From 9aace30054b35c837259d47173bc98c0abcb019d Mon Sep 17 00:00:00 2001
From: doyeon <dokaykim@gmail.com>
Date: Tue, 21 Oct 2025 10:29:42 +0900
Subject: [PATCH] =?UTF-8?q?09,=2014=EB=B2=88=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=ED=97=A4=EB=8D=94=EB=A5=BC=2005=EB=B2=88=EA=B3=BC=20=EB=8F=99?=
 =?UTF-8?q?=EC=9D=BC=ED=95=9C=20app-bar=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../uiux/prototype/09-이벤트기획안승인.html   |  73 ++-----
 design/uiux/prototype/14-콘텐츠최종승인.html  | 204 ++----------------
 2 files changed, 38 insertions(+), 239 deletions(-)
diff --git a/design/uiux/prototype/09-이벤트기획안승인.html b/design/uiux/prototype/09-이벤트기획안승인.html
index 601c029..8766ca5 100644
--- a/design/uiux/prototype/09-이벤트기획안승인.html
+++ b/design/uiux/prototype/09-이벤트기획안승인.html
@@ -5,56 +5,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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/components/navigation.css">
   <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 */
     .approval-content {
+      background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
       padding: var(--spacing-l) var(--spacing-m);
+      padding-bottom: var(--spacing-2xl);
     }
 
     /* Success Message */
@@ -382,19 +342,22 @@
   </style>
 </head>
 <body>
-  <div class="approval-container">
-    <!-- Header -->
-    <header class="approval-header">
-      <button class="approval-header__back" onclick="history.back()">
-        ←
-      </button>
-      <div class="approval-header__badge">✨ AI 기획 완료</div>
-      <h1 class="approval-header__title">이벤트 기획안 승인</h1>
-      <p class="approval-header__subtitle">AI가 생성한 이벤트 기획안을 확인하고 승인해 주세요</p>
+  <div class="page">
+    <!-- App Bar -->
+    <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>
 
     <!-- Content -->
-    <main class="approval-content">
+    <main class="page-main approval-content">
       <!-- Success Message -->
       <div class="success-message">
         <div class="success-message__icon">🎉</div>
diff --git a/design/uiux/prototype/14-콘텐츠최종승인.html b/design/uiux/prototype/14-콘텐츠최종승인.html
index b14ee7d..0e8f8ab 100644
--- a/design/uiux/prototype/14-콘텐츠최종승인.html
+++ b/design/uiux/prototype/14-콘텐츠최종승인.html
@@ -4,184 +4,17 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <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/components/navigation.css">
   <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 */
     .approval-content {
+      background: linear-gradient(135deg, #FFF5F5 0%, #FFFFFF 100%);
       padding: var(--spacing-l) var(--spacing-m);
+      padding-bottom: var(--spacing-2xl);
     }
 
     /* Success Message */
@@ -499,19 +332,22 @@
   </style>
 </head>
 <body>
-  <div class="approval-container">
-    <!-- Header -->
-    <header class="approval-header">
-      <button class="approval-header__back" onclick="history.back()">
-        ←
-      </button>
-      <div class="approval-header__badge">✨ AI 콘텐츠 생성 완료</div>
-      <h1 class="approval-header__title">콘텐츠 최종 승인</h1>
-      <p class="approval-header__subtitle">생성된 모든 콘텐츠를 확인하고 승인해 주세요</p>
+  <div class="page">
+    <!-- App Bar -->
+    <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>
 
     <!-- Content -->
-    <main class="approval-content">
+    <main class="page-main approval-content">
       <!-- Success Message -->
       <div class="success-message">
         <div class="success-message__icon">🎉</div>
