07-13번 파일 헤더 HTML을 app-bar 구조로 통일

This commit is contained in:
doyeon 2025-10-21 10:35:12 +09:00
parent 9aace30054
commit 781be0d5a5
7 changed files with 76 additions and 40 deletions

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 참여 방법 설계 - KT AI 이벤트 플랫폼</title> <title>AI 참여 방법 설계 - KT AI 이벤트 플랫폼</title>
<link rel="stylesheet" href="css/components/navigation.css">
<style> <style>
/* CSS Reset */ /* CSS Reset */
* { * {
@ -444,10 +445,16 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="header"> <header class="app-bar">
<button class="header__back" onclick="history.back()"></button> <div class="app-bar__container">
<h1 class="header__title">AI 참여 방법 설계</h1> <div class="app-bar__left">
<p class="header__subtitle">고객이 이벤트에 참여하는 방법을 선택해 주세요</p> <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>
<h1 class="app-bar__title">AI 참여 방법 설계</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Main --> <!-- Main -->

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 홍보 문구 생성 - KT 이벤트 마케팅</title> <title>AI 홍보 문구 생성 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -578,12 +579,16 @@
<body> <body>
<div class="copy-container"> <div class="copy-container">
<!-- Header --> <!-- Header -->
<header class="copy-header"> <header class="app-bar">
<button class="copy-header__back" onclick="history.back()"> <div class="app-bar__container">
<div class="app-bar__left">
</button> <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<h1 class="copy-header__title">AI 홍보 문구 생성</h1> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<p class="copy-header__subtitle">AI가 맞춤형 홍보 문구를 생성해 드려요</p> </svg>
</div>
<h1 class="app-bar__title">AI 홍보 문구 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Loading State --> <!-- Loading State -->

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 영상 제작 - KT 이벤트 마케팅</title> <title>AI 영상 제작 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -340,12 +341,16 @@
<body> <body>
<div class="video-container"> <div class="video-container">
<!-- Header --> <!-- Header -->
<header class="video-header"> <header class="app-bar">
<button class="video-header__back" onclick="history.back()"> <div class="app-bar__container">
<div class="app-bar__left">
</button> <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<h1 class="video-header__title">AI 영상 제작</h1> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<p class="video-header__subtitle">이벤트 홍보 영상을 자동으로 제작해 드려요</p> </svg>
</div>
<h1 class="app-bar__title">AI 영상 제작</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SNS 콘텐츠 생성 - KT 이벤트 마케팅</title> <title>SNS 콘텐츠 생성 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -486,12 +487,16 @@
<body> <body>
<div class="sns-container"> <div class="sns-container">
<!-- Header --> <!-- Header -->
<header class="sns-header"> <header class="app-bar">
<button class="sns-header__back" onclick="history.back()"> <div class="app-bar__container">
<div class="app-bar__left">
</button> <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<h1 class="sns-header__title">SNS 콘텐츠 생성</h1> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<p class="sns-header__subtitle">각 SNS 플랫폼에 최적화된 콘텐츠를 생성해 드려요</p> </svg>
</div>
<h1 class="app-bar__title">SNS 콘텐츠 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QR 포스터 생성 - KT 이벤트 마케팅</title> <title>QR 포스터 생성 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -500,12 +501,16 @@
<body> <body>
<div class="qr-container"> <div class="qr-container">
<!-- Header --> <!-- Header -->
<header class="qr-header"> <header class="app-bar">
<button class="qr-header__back" onclick="history.back()"> <div class="app-bar__container">
<div class="app-bar__left">
</button> <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<h1 class="qr-header__title">QR 포스터 생성</h1> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<p class="qr-header__subtitle">이벤트 QR 코드와 포스터를 자동으로 생성해 드려요</p> </svg>
</div>
<h1 class="app-bar__title">QR 포스터 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

View File

@ -325,12 +325,16 @@
<body> <body>
<div class="poster-container"> <div class="poster-container">
<!-- Header --> <!-- Header -->
<header class="poster-header"> <header class="app-bar">
<button class="poster-header__back" onclick="history.back()"> <div class="app-bar__container">
<div class="app-bar__left">
</button> <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<h1 class="poster-header__title">QR 포스터 생성</h1> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<p class="poster-header__subtitle">오프라인 홍보용 QR 포스터를 만들어 보세요</p> </svg>
</div>
<h1 class="app-bar__title">QR 포스터 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

View File

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콘텐츠 편집 - KT 이벤트 마케팅</title> <title>콘텐츠 편집 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/components/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -433,12 +434,16 @@
<body> <body>
<div class="edit-container"> <div class="edit-container">
<!-- Header --> <!-- Header -->
<header class="edit-header"> <header class="app-bar">
<button class="edit-header__back" onclick="history.back()"> <div class="app-bar__container">
<div class="app-bar__left">
</button> <svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()">
<h1 class="edit-header__title">콘텐츠 편집</h1> <path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<p class="edit-header__subtitle">생성된 콘텐츠를 검토하고 수정하세요</p> </svg>
</div>
<h1 class="app-bar__title">콘텐츠 편집</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->