P82282866/kt-event-marketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

헤더롤백

Browse Source
This commit is contained in:
doyeon 2025-10-21 11:10:02 +09:00
parent ca2eb92619
commit 380a4a5319
28 changed files with 351 additions and 279 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
design/uiux/prototype/01-회원가입.html
View File

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

2
design/uiux/prototype/02-매장정보등록.html
View File

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

2
design/uiux/prototype/03-홈화면.html
View File

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

2
design/uiux/prototype/04-이벤트목적선택.html
View File

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

2
design/uiux/prototype/05-AI트렌드분석결과.html
View File

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

4
design/uiux/prototype/06-AI이벤트상품추천.html
View File

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

15
design/uiux/prototype/07-AI참여방법설계.html
View File

@ -4,7 +4,6 @@
<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/navigation.css">
<style> <style>
/* CSS Reset */ /* CSS Reset */
* { * {
@ -445,16 +444,10 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" onclick="history.back()">←</button>
<div class="app-bar__left"> <h1 class="header__title">AI 참여 방법 설계</h1>
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> <p class="header__subtitle">고객이 이벤트에 참여하는 방법을 선택해 주세요</p>
<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 -->

17
design/uiux/prototype/08-AI홍보문구생성.html
View File

@ -4,7 +4,6 @@
<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/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -579,16 +578,12 @@
<body> <body>
<div class="copy-container"> <div class="copy-container">
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="copy-header">
<div class="app-bar__container"> <button class="copy-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="copy-header__title">AI 홍보 문구 생성</h1>
</svg> <p class="copy-header__subtitle">AI가 맞춤형 홍보 문구를 생성해 드려요</p>
</div>
<h1 class="app-bar__title">AI 홍보 문구 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Loading State --> <!-- Loading State -->

73
design/uiux/prototype/09-이벤트기획안승인.html
View File

@ -5,16 +5,56 @@
<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/variables.css"> <link rel="stylesheet" href="css/variables.css">
<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/common.css">
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* Layout */
.approval-container {
min-height: 100vh;
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl);
}
/* Header */
.approval-header {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
color: var(--color-white);
padding: var(--spacing-xl) var(--spacing-m);
box-shadow: var(--shadow-lg);
}
.approval-header__back {
background: none;
border: none;
color: var(--color-white);
font-size: var(--font-size-xl);
padding: 0;
margin-bottom: var(--spacing-m);
cursor: pointer;
}
.approval-header__badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: var(--spacing-xs) var(--spacing-m);
border-radius: var(--radius-s);
font-size: var(--font-size-s);
margin-bottom: var(--spacing-s);
}
.approval-header__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-xs);
}
.approval-header__subtitle {
font-size: var(--font-size-m);
opacity: 0.9;
}
/* Content */ /* Content */
.approval-content { .approval-content {
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding: var(--spacing-l) var(--spacing-m); padding: var(--spacing-l) var(--spacing-m);
padding-bottom: var(--spacing-2xl);
} }
/* Success Message */ /* Success Message */
@ -342,22 +382,19 @@
</style> </style>
</head> </head>
<body> <body>
<div class="page"> <div class="approval-container">
<!-- App Bar --> <!-- Header -->
<header class="app-bar"> <header class="approval-header">
<div class="app-bar__container"> <button class="approval-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <div class="approval-header__badge">✨ AI 기획 완료</div>
</svg> <h1 class="approval-header__title">이벤트 기획안 승인</h1>
</div> <p class="approval-header__subtitle">AI가 생성한 이벤트 기획안을 확인하고 승인해 주세요</p>
<h1 class="app-bar__title">이벤트 기획안 승인</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->
<main class="page-main approval-content"> <main class="approval-content">
<!-- Success Message --> <!-- Success Message -->
<div class="success-message"> <div class="success-message">
<div class="success-message__icon">🎉</div> <div class="success-message__icon">🎉</div>

17
design/uiux/prototype/10-AI영상제작.html
View File

@ -4,7 +4,6 @@
<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/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -341,16 +340,12 @@
<body> <body>
<div class="video-container"> <div class="video-container">
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="video-header">
<div class="app-bar__container"> <button class="video-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="video-header__title">AI 영상 제작</h1>
</svg> <p class="video-header__subtitle">이벤트 홍보 영상을 자동으로 제작해 드려요</p>
</div>
<h1 class="app-bar__title">AI 영상 제작</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

17
design/uiux/prototype/11-SNS콘텐츠생성.html
View File

@ -4,7 +4,6 @@
<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/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -487,16 +486,12 @@
<body> <body>
<div class="sns-container"> <div class="sns-container">
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="sns-header">
<div class="app-bar__container"> <button class="sns-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="sns-header__title">SNS 콘텐츠 생성</h1>
</svg> <p class="sns-header__subtitle">각 SNS 플랫폼에 최적화된 콘텐츠를 생성해 드려요</p>
</div>
<h1 class="app-bar__title">SNS 콘텐츠 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

17
design/uiux/prototype/12-QR포스터생성.html
View File

@ -4,7 +4,6 @@
<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/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -501,16 +500,12 @@
<body> <body>
<div class="qr-container"> <div class="qr-container">
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="qr-header">
<div class="app-bar__container"> <button class="qr-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="qr-header__title">QR 포스터 생성</h1>
</svg> <p class="qr-header__subtitle">이벤트 QR 코드와 포스터를 자동으로 생성해 드려요</p>
</div>
<h1 class="app-bar__title">QR 포스터 생성</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

16
design/uiux/prototype/12-QR포스터생성선택.html
View File

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

17
design/uiux/prototype/13-QR포스터상세설정.html
View File

@ -6,7 +6,6 @@
<title>QR 포스터 상세 설정 - KT 이벤트 마케팅</title> <title>QR 포스터 상세 설정 - KT 이벤트 마케팅</title>
<link rel="stylesheet" href="css/variables.css"> <link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* Layout */ /* Layout */
.detail-container { .detail-container {
@ -330,16 +329,12 @@
<body> <body>
<div class="detail-container"> <div class="detail-container">
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="detail-header">
<div class="app-bar__container"> <button class="detail-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="detail-header__title">QR 포스터 상세 설정</h1>
</svg> <p class="detail-header__subtitle">포스터 내용을 상세하게 편집하세요</p>
</div>
<h1 class="app-bar__title">QR 포스터 상세 설정</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

17
design/uiux/prototype/13-콘텐츠편집.html
View File

@ -4,7 +4,6 @@
<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/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -434,16 +433,12 @@
<body> <body>
<div class="edit-container"> <div class="edit-container">
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="edit-header">
<div class="app-bar__container"> <button class="edit-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="edit-header__title">콘텐츠 편집</h1>
</svg> <p class="edit-header__subtitle">생성된 콘텐츠를 검토하고 수정하세요</p>
</div>
<h1 class="app-bar__title">콘텐츠 편집</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->

204
design/uiux/prototype/14-콘텐츠최종승인.html
View File

@ -4,17 +4,184 @@
<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/variables.css">
<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/navigation.css">
<style> <style>
/* CSS Variables */
:root {
/* Colors */
--color-primary: #E31E24;
--color-primary-dark: #B71C1C;
--color-primary-light: #FFEBEE;
--color-secondary: #FF6B6B;
--color-secondary-dark: #FF5252;
--color-secondary-light: #FFE9E9;
--color-success: #4CAF50;
--color-success-light: #E8F5E9;
--color-warning: #FF9800;
--color-warning-light: #FFF3E0;
--color-error: #F44336;
--color-error-light: #FFEBEE;
--color-info: #2196F3;
--color-info-light: #E3F2FD;
/* Grayscale */
--color-white: #FFFFFF;
--color-gray-50: #FAFAFA;
--color-gray-100: #F5F5F5;
--color-gray-200: #EEEEEE;
--color-gray-300: #E0E0E0;
--color-gray-400: #BDBDBD;
--color-gray-500: #9E9E9E;
--color-gray-600: #757575;
--color-gray-700: #616161;
--color-gray-800: #424242;
--color-gray-900: #212121;
--color-black: #000000;
/* Text Colors */
--color-text-primary: #212121;
--color-text-secondary: #757575;
--color-text-tertiary: #9E9E9E;
--color-text-disabled: #BDBDBD;
--color-text-inverse: #FFFFFF;
/* Border Colors */
--color-border-light: #E0E0E0;
--color-border-medium: #BDBDBD;
--color-border-dark: #757575;
/* Background Colors */
--color-bg-primary: #FFFFFF;
--color-bg-secondary: #F5F5F5;
--color-bg-tertiary: #FAFAFA;
/* Spacing (4px base unit) */
--spacing-xs: 4px;
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--spacing-3xl: 64px;
/* Typography */
--font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--font-size-xs: 12px;
--font-size-s: 14px;
--font-size-m: 16px;
--font-size-l: 18px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 32px;
--font-size-4xl: 40px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* Border Radius */
--radius-s: 4px;
--radius-m: 8px;
--radius-l: 12px;
--radius-xl: 16px;
--radius-2xl: 24px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-normal: 250ms ease-in-out;
--transition-slow: 350ms ease-in-out;
/* Z-index */
--z-dropdown: 1000;
--z-sticky: 1020;
--z-fixed: 1030;
--z-modal-backdrop: 1040;
--z-modal: 1050;
--z-popover: 1060;
--z-tooltip: 1070;
}
/* Reset & Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-family-primary);
font-size: var(--font-size-m);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background: var(--color-bg-secondary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
button {
font-family: inherit;
cursor: pointer;
}
/* Layout */
.approval-container {
min-height: 100vh;
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding-bottom: var(--spacing-2xl);
}
/* Header */
.approval-header {
background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
color: var(--color-white);
padding: var(--spacing-xl) var(--spacing-m);
box-shadow: var(--shadow-lg);
}
.approval-header__back {
background: none;
border: none;
color: var(--color-white);
font-size: var(--font-size-xl);
padding: 0;
margin-bottom: var(--spacing-m);
cursor: pointer;
}
.approval-header__badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: var(--spacing-xs) var(--spacing-m);
border-radius: var(--radius-s);
font-size: var(--font-size-s);
margin-bottom: var(--spacing-s);
}
.approval-header__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-xs);
}
.approval-header__subtitle {
font-size: var(--font-size-m);
opacity: 0.9;
}
/* Content */ /* Content */
.approval-content { .approval-content {
background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
padding: var(--spacing-l) var(--spacing-m); padding: var(--spacing-l) var(--spacing-m);
padding-bottom: var(--spacing-2xl);
} }
/* Success Message */ /* Success Message */
@ -332,22 +499,19 @@
</style> </style>
</head> </head>
<body> <body>
<div class="page"> <div class="approval-container">
<!-- App Bar --> <!-- Header -->
<header class="app-bar"> <header class="approval-header">
<div class="app-bar__container"> <button class="approval-header__back" onclick="history.back()">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="history.back()"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <div class="approval-header__badge">✨ AI 콘텐츠 생성 완료</div>
</svg> <h1 class="approval-header__title">콘텐츠 최종 승인</h1>
</div> <p class="approval-header__subtitle">생성된 모든 콘텐츠를 확인하고 승인해 주세요</p>
<h1 class="app-bar__title">콘텐츠 최종 승인</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Content --> <!-- Content -->
<main class="page-main approval-content"> <main class="approval-content">
<!-- Success Message --> <!-- Success Message -->
<div class="success-message"> <div class="success-message">
<div class="success-message__icon">🎉</div> <div class="success-message__icon">🎉</div>

17
design/uiux/prototype/15-배포채널선택.html
View File

@ -4,7 +4,6 @@
<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 AI 이벤트</title> <title>배포 채널 선택 - KT AI 이벤트</title>
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -748,16 +747,12 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" onclick="window.location.href='14-콘텐츠최종승인.html'" aria-label="뒤로 가기">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="window.location.href='14-콘텐츠최종승인.html'"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="header__title">배포 채널 선택</h1>
</svg> <div class="header__action"></div>
</div>
<h1 class="app-bar__title">배포 채널 선택</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->

17
design/uiux/prototype/16-배포진행상태.html
View File

@ -4,7 +4,6 @@
<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 AI 이벤트</title> <title>배포 진행 상태 - KT AI 이벤트</title>
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -659,16 +658,12 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" onclick="window.location.href='15-배포채널선택.html'" aria-label="뒤로 가기">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="window.location.href='15-배포채널선택.html'"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="header__title">배포 진행 중</h1>
</svg> <div class="header__action"></div>
</div>
<h1 class="app-bar__title">배포 진행 중</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->

17
design/uiux/prototype/17-오프라인자료다운로드.html
View File

@ -4,7 +4,6 @@
<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 AI 이벤트</title> <title>오프라인 자료 다운로드 - KT AI 이벤트</title>
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* CSS Variables */ /* CSS Variables */
:root { :root {
@ -610,16 +609,12 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" onclick="window.location.href='16-배포진행상태.html'" aria-label="뒤로 가기">
<div class="app-bar__left"> ←
<svg class="app-bar__back" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" onclick="window.location.href='16-배포진행상태.html'"> </button>
<path d="M19 12H5M12 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <h1 class="header__title">오프라인 자료</h1>
</svg> <div class="header__action"></div>
</div>
<h1 class="app-bar__title">오프라인 자료</h1>
<div class="app-bar__right"></div>
</div>
</header> </header>
<!-- Main Content --> <!-- Main Content -->

14
design/uiux/prototype/18-이벤트참여.html
View File

@ -4,7 +4,6 @@
<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 AI 이벤트</title> <title>이벤트 참여 - KT AI 이벤트</title>
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* ======================================== /* ========================================
CSS Variables & Base Styles CSS Variables & Base Styles
@ -654,19 +653,6 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Header -->
<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" 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">이벤트 참여</h1>
<div class="app-bar__right"></div>
</div>
</header>
<!-- Main Content --> <!-- Main Content -->
<main class="event-participation"> <main class="event-participation">
<!-- Event Header --> <!-- Event Header -->

14
design/uiux/prototype/19-참여완료.html
View File

@ -4,7 +4,6 @@
<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 AI 이벤트</title> <title>참여 완료 - KT AI 이벤트</title>
<link rel="stylesheet" href="css/navigation.css">
<style> <style>
/* ======================================== /* ========================================
CSS Variables & Base Styles CSS Variables & Base Styles
@ -620,19 +619,6 @@
</style> </style>
</head> </head>
<body> <body>
<!-- Header -->
<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" 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">참여 완료</h1>
<div class="app-bar__right"></div>
</div>
</header>
<!-- Confetti Container --> <!-- Confetti Container -->
<div class="confetti" id="confetti"></div> <div class="confetti" id="confetti"></div>

17
design/uiux/prototype/20-당첨자명단관리.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>당첨자 명단 관리 - KT AI 이벤트 플랫폼</title> <title>당첨자 명단 관리 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -616,16 +615,10 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">당첨자 명단 관리</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <button class="header__action" aria-label="새로고침">⟳</button>
</div>
<h1 class="app-bar__title">당첨자 명단 관리</h1>
<div class="app-bar__right">
<button class="header__action" aria-label="새로고침">⟳</button>
</div>
</div>
</header> </header>
<!-- Main --> <!-- Main -->
@ -775,7 +768,7 @@
const emptyState = $('#emptyState'); const emptyState = $('#emptyState');
const exportBtn = $('#exportBtn'); const exportBtn = $('#exportBtn');
const notifyBtn = $('#notifyBtn'); const notifyBtn = $('#notifyBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
const refreshBtn = $('.header__action'); const refreshBtn = $('.header__action');
const countAll = $('#countAll'); const countAll = $('#countAll');
const countPending = $('#countPending'); const countPending = $('#countPending');

23
design/uiux/prototype/21-실시간대시보드.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>실시간 대시보드 - KT AI 이벤트 플랫폼</title> <title>실시간 대시보드 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -536,18 +535,14 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">실시간 대시보드</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <div class="header__actions">
</div> <button class="header__action" id="refreshBtn" aria-label="새로고침">
<h1 class="app-bar__title">실시간 대시보드</h1> ⟳
<div class="app-bar__right"> <span class="refresh-indicator"></span>
<button class="header__action" id="refreshBtn" aria-label="새로고침"> </button>
⟳
<span class="refresh-indicator"></span>
</button>
</div>
</div> </div>
</header> </header>
@ -708,7 +703,7 @@
const activityList = $('#activityList'); const activityList = $('#activityList');
const dateRangeBtns = $$('.date-range__btn'); const dateRangeBtns = $$('.date-range__btn');
const refreshBtn = $('#refreshBtn'); const refreshBtn = $('#refreshBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
// Generate Mock Data // Generate Mock Data
function generateMockData(range) { function generateMockData(range) {

17
design/uiux/prototype/22-채널별성과분석.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>채널별 성과 분석 - KT AI 이벤트 플랫폼</title> <title>채널별 성과 분석 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -492,16 +491,10 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">채널별 성과 분석</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
</div>
<h1 class="app-bar__title">채널별 성과 분석</h1>
<div class="app-bar__right">
<button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
</div>
</div>
</header> </header>
<!-- Main --> <!-- Main -->
@ -612,7 +605,7 @@
const periodFilterBtns = $$('.period-filter__btn'); const periodFilterBtns = $$('.period-filter__btn');
const refreshBtn = $('#refreshBtn'); const refreshBtn = $('#refreshBtn');
const exportBtn = $('#exportBtn'); const exportBtn = $('#exportBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
// Generate Mock Channel Data // Generate Mock Channel Data
function generateChannelData(period) { function generateChannelData(period) {

17
design/uiux/prototype/23-ROI분석.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>ROI 분석 - KT AI 이벤트 플랫폼</title> <title>ROI 분석 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -525,16 +524,10 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">ROI 분석</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
</div>
<h1 class="app-bar__title">ROI 분석</h1>
<div class="app-bar__right">
<button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
</div>
</div>
</header> </header>
<!-- Main --> <!-- Main -->
@ -667,7 +660,7 @@
const insightsList = $('#insightsList'); const insightsList = $('#insightsList');
const refreshBtn = $('#refreshBtn'); const refreshBtn = $('#refreshBtn');
const exportBtn = $('#exportBtn'); const exportBtn = $('#exportBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
// Generate Mock Data // Generate Mock Data
function generateROIData() { function generateROIData() {

19
design/uiux/prototype/24-분석리포트.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>분석 리포트 - KT AI 이벤트 플랫폼</title> <title>분석 리포트 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -549,16 +548,12 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">분석 리포트</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <div class="header__actions">
</div> <button class="header__action" id="shareBtn" aria-label="공유하기">📤</button>
<h1 class="app-bar__title">분석 리포트</h1> <button class="header__action" id="printBtn" aria-label="인쇄하기">🖨</button>
<div class="app-bar__right">
<button class="header__action" id="shareBtn" aria-label="공유하기">📤</button>
<button class="header__action" id="printBtn" aria-label="인쇄하기">🖨</button>
</div>
</div> </div>
</header> </header>
@ -812,7 +807,7 @@
const printBtn = $('#printBtn'); const printBtn = $('#printBtn');
const saveBtn = $('#saveBtn'); const saveBtn = $('#saveBtn');
const downloadBtn = $('#downloadBtn'); const downloadBtn = $('#downloadBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
// Format Date // Format Date
function formatDate(date) { function formatDate(date) {

17
design/uiux/prototype/25-이벤트목록.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>이벤트 목록 - KT AI 이벤트 플랫폼</title> <title>이벤트 목록 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -488,16 +487,10 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">이벤트 목록</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
</div>
<h1 class="app-bar__title">이벤트 목록</h1>
<div class="app-bar__right">
<button class="header__action" id="refreshBtn" aria-label="새로고침">⟳</button>
</div>
</div>
</header> </header>
<!-- Main --> <!-- Main -->
@ -596,7 +589,7 @@
const refreshBtn = $('#refreshBtn'); const refreshBtn = $('#refreshBtn');
const fabBtn = $('#fabBtn'); const fabBtn = $('#fabBtn');
const emptyCreateBtn = $('#emptyCreateBtn'); const emptyCreateBtn = $('#emptyCreateBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
// Generate Mock Events // Generate Mock Events
function generateMockEvents() { function generateMockEvents() {

17
design/uiux/prototype/26-마이페이지.html
View File

@ -3,7 +3,6 @@
<head> <head>
<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">
<link rel="stylesheet" href="css/navigation.css">
<title>마이페이지 - KT AI 이벤트 플랫폼</title> <title>마이페이지 - KT AI 이벤트 플랫폼</title>
<style> <style>
/* CSS Reset */ /* CSS Reset */
@ -381,16 +380,10 @@
</head> </head>
<body> <body>
<!-- Header --> <!-- Header -->
<header class="app-bar"> <header class="header">
<div class="app-bar__container"> <button class="header__back" aria-label="뒤로 가기">←</button>
<div class="app-bar__left"> <h1 class="header__title">마이페이지</h1>
<button class="app-bar__back" aria-label="뒤로 가기">←</button> <button class="header__action" id="settingsBtn" aria-label="설정">⚙️</button>
</div>
<h1 class="app-bar__title">마이페이지</h1>
<div class="app-bar__right">
<button class="header__action" id="settingsBtn" aria-label="설정">⚙️</button>
</div>
</div>
</header> </header>
<!-- Main --> <!-- Main -->
@ -616,7 +609,7 @@
const termsBtn = $('#termsBtn'); const termsBtn = $('#termsBtn');
const privacyBtn = $('#privacyBtn'); const privacyBtn = $('#privacyBtn');
const logoutBtn = $('#logoutBtn'); const logoutBtn = $('#logoutBtn');
const backBtn = $('.app-bar__back'); const backBtn = $('.header__back');
// Format Number // Format Number
function formatNumber(num) { function formatNumber(num) {