프로토타입 네비게이션 바 통일 및 CSS 경로 표준화

- navigation.css 파일 생성 (17번 파일 app-bar 스타일 기반)
- 21개 HTML 파일의 CSS 경로 통일 (css/components/navigation.css → css/navigation.css)
- 모든 페이지에 일관된 상단 네비게이션 바 적용
- 사용자 경험 일관성 개선

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
doyeon 2025-10-21 11:01:26 +09:00
parent 0f68d2b075
commit 96099dc87a
22 changed files with 67 additions and 22 deletions

View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/buttons.css">
<link rel="stylesheet" href="css/components/inputs.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/components/modals.css">
</head>
<body>

View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/buttons.css">
<link rel="stylesheet" href="css/components/inputs.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/components/modals.css">
<style>

View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/buttons.css">
<link rel="stylesheet" href="css/components/cards.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* Home Screen Specific Styles */

View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/buttons.css">
<link rel="stylesheet" href="css/components/cards.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* Event Purpose Selection Specific Styles */

View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/buttons.css">
<link rel="stylesheet" href="css/components/cards.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/components/loaders.css">
<style>

View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/buttons.css">
<link rel="stylesheet" href="css/components/cards.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* AI Prize Recommendation Specific Styles */
@ -272,7 +272,7 @@
<header class="app-bar">
<div class="app-bar__container">
<div class="app-bar__left">
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 참여 방법 설계 - KT AI 이벤트 플랫폼</title>
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* CSS Reset */
* {

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 홍보 문구 생성 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* CSS Variables */
:root {

View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* Content */
.approval-content {

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 영상 제작 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* CSS Variables */
:root {

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNS 콘텐츠 생성 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* CSS Variables */
:root {

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR 포스터 생성 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* CSS Variables */
:root {

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콘텐츠 편집 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* CSS Variables */
:root {

View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<style>
/* Content */
.approval-content {

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>당첨자 명단 관리 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>실시간 대시보드 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>채널별 성과 분석 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>ROI 분석 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>분석 리포트 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>이벤트 목록 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/components/navigation.css">
<link rel="stylesheet" href="css/navigation.css">
<title>마이페이지 - KT AI 이벤트 플랫폼</title>
<style>
/* CSS Reset */

View File

@ -0,0 +1,45 @@
/* ========================================
Navigation Bar (App Bar)
======================================== */
.app-bar {
background: var(--color-white, #FFFFFF);
padding: 16px;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
position: sticky;
top: 0;
z-index: 1020;
}
.app-bar__container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
}
.app-bar__left,
.app-bar__right {
width: 32px;
display: flex;
align-items: center;
justify-content: center;
}
.app-bar__title {
font-size: 18px;
font-weight: 600;
color: var(--color-text-primary, #212121);
flex: 1;
text-align: center;
}
.app-bar__back {
cursor: pointer;
color: var(--color-text-primary, #212121);
}
.app-bar__back:hover {
opacity: 0.7;
}