From ca5bbf32b263f7a4071938f4478d3373431dce65 Mon Sep 17 00:00:00 2001
From: yabo0812 <yabo0812@gmail.com>
Date: Wed, 22 Oct 2025 13:13:59 +0900
Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9D=98=EB=A1=9D=20=EA=B3=B5?=
 =?UTF-8?q?=EC=9C=A0=20=ED=99=94=EB=A9=B4=20=EC=9B=B9=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 웹 화면에서 컨텐츠 중앙 정렬 (max-width: 800px)
- 공유 이력 섹션 하단 불필요한 여백 제거
- 다른 화면들과 일관된 반응형 레이아웃 적용

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 design/uiux/prototype/08-회의록공유.html | 230 +++++++++++++----------
 1 file changed, 135 insertions(+), 95 deletions(-)
diff --git a/design/uiux/prototype/08-회의록공유.html b/design/uiux/prototype/08-회의록공유.html
index 277da32..8afe979 100644
--- a/design/uiux/prototype/08-회의록공유.html
+++ b/design/uiux/prototype/08-회의록공유.html
@@ -6,33 +6,70 @@
   <title>회의록 공유 - 회의록 서비스</title>
   <link rel="stylesheet" href="common.css">
   <style>
-    /* 페이지 특화 스타일 */
-    .page-header {
+    /* Body 배경 흰색으로 변경 */
+    body {
+      background: var(--white);
+    }
+
+    /* 헤더 - 회의록 수정화면과 통일 */
+    .header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 64px;
+      background: var(--white);
+      border-bottom: 1px solid var(--gray-300);
+      box-shadow: var(--shadow-sm);
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding-bottom: var(--space-md);
-      border-bottom: 1px solid var(--gray-300);
-      margin-bottom: var(--space-lg);
+      padding: 0 var(--space-md);
+      z-index: 100;
     }
 
-    .back-button {
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: var(--space-md);
+    }
+
+    .icon-btn {
       background: transparent;
       border: none;
       font-size: 24px;
       color: var(--gray-700);
       cursor: pointer;
       padding: var(--space-sm);
+      transition: color var(--transition-fast);
     }
 
-    .page-title {
-      flex: 1;
-      text-align: center;
-      font-size: var(--font-h2);
+    .icon-btn:hover {
+      color: var(--primary);
+    }
+
+    .header-title {
+      font-size: var(--font-h3);
       font-weight: var(--font-weight-bold);
       color: var(--gray-900);
     }
 
+    /* 메인 콘텐츠 */
+    .main-content {
+      margin-top: 64px;
+      padding: var(--space-md);
+      padding-bottom: 100px;
+    }
+
+    @media (min-width: 768px) {
+      .main-content {
+        max-width: 800px;
+        margin-left: auto;
+        margin-right: auto;
+        padding-bottom: var(--space-lg);
+      }
+    }
+
     /* 섹션 타이틀 */
     .section-title {
       font-size: var(--font-h3);
@@ -194,8 +231,8 @@
       color: var(--gray-700);
     }
 
-    /* 고정 하단 버튼 */
-    .fixed-bottom-action {
+    /* 하단 버튼 - 회의록 수정화면과 통일 */
+    .bottom-buttons {
       position: fixed;
       bottom: 0;
       left: 0;
@@ -205,10 +242,12 @@
       border-top: 1px solid var(--gray-300);
       box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
       z-index: 100;
+      display: flex;
+      gap: var(--space-md);
     }
 
     @media (min-width: 768px) {
-      .fixed-bottom-action {
+      .bottom-buttons {
         position: static;
         margin-top: var(--space-lg);
         border-top: none;
@@ -219,99 +258,100 @@
   </style>
 </head>
 <body>
-  <div class="page">
-    <div class="container" style="padding-bottom: 100px;">
-      <!-- 페이지 헤더 -->
-      <div class="page-header">
-        <button class="back-button" onclick="history.back()">←</button>
-        <h1 class="page-title">회의록 공유</h1>
-        <div style="width: 40px;"></div>
+  <!-- Header -->
+  <header class="header">
+    <div class="header-left">
+      <button class="icon-btn" onclick="history.back()">←</button>
+      <h1 class="header-title">회의록 공유</h1>
+    </div>
+  </header>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    <!-- 공유 대상 -->
+    <section class="mb-lg">
+      <h3 class="section-title">공유 대상</h3>
+      <div class="radio-group">
+        <div class="radio-option selected" id="shareAllOption" onclick="selectShareTarget('all')">
+          <input type="radio" name="shareTarget" id="shareAll" checked>
+          <label for="shareAll">참석자 전체</label>
+        </div>
+        <div class="radio-option" id="shareSelectedOption" onclick="selectShareTarget('selected')">
+          <input type="radio" name="shareTarget" id="shareSelected">
+          <label for="shareSelected">특정 참석자 선택</label>
+        </div>
       </div>
 
-      <!-- 공유 대상 -->
-      <section class="mb-lg">
-        <h3 class="section-title">공유 대상</h3>
-        <div class="radio-group">
-          <div class="radio-option selected" id="shareAllOption" onclick="selectShareTarget('all')">
-            <input type="radio" name="shareTarget" id="shareAll" checked>
-            <label for="shareAll">참석자 전체</label>
-          </div>
-          <div class="radio-option" id="shareSelectedOption" onclick="selectShareTarget('selected')">
-            <input type="radio" name="shareTarget" id="shareSelected">
-            <label for="shareSelected">특정 참석자 선택</label>
-          </div>
-        </div>
+      <div class="participant-list" id="participantList">
+        <div id="participantCheckList"></div>
+      </div>
+    </section>
 
-        <div class="participant-list" id="participantList">
-          <div id="participantCheckList"></div>
-        </div>
-      </section>
+    <!-- 공유 권한 -->
+    <section class="mb-lg">
+      <h3 class="section-title">공유 권한</h3>
+      <div class="form-group">
+        <select class="form-control" id="sharePermission">
+          <option value="readonly" selected>읽기 전용</option>
+          <option value="comment">댓글 가능</option>
+          <option value="edit">편집 가능</option>
+        </select>
+      </div>
+    </section>
 
-      <!-- 공유 권한 -->
-      <section class="mb-lg">
-        <h3 class="section-title">공유 권한</h3>
-        <div class="form-group">
-          <select class="form-control" id="sharePermission">
-            <option value="readonly" selected>읽기 전용</option>
-            <option value="comment">댓글 가능</option>
-            <option value="edit">편집 가능</option>
+    <!-- 공유 방식 -->
+    <section class="mb-lg">
+      <h3 class="section-title">공유 방식</h3>
+      <div class="checkbox-wrapper mb-md">
+        <input type="checkbox" class="checkbox" id="emailShare" checked>
+        <label for="emailShare">이메일 발송</label>
+      </div>
+      <button class="btn btn-secondary" style="width: 100%;" onclick="copyShareLink()">
+        🔗 링크 복사
+      </button>
+    </section>
+
+    <!-- 링크 보안 설정 -->
+    <section class="mb-lg">
+      <h3 class="section-title">링크 보안 설정 (선택)</h3>
+
+      <div class="toggle-group">
+        <div class="toggle-item">
+          <span class="toggle-label">유효기간 설정</span>
+          <div class="toggle-switch" id="expiryToggle" onclick="toggleOption('expiry')"></div>
+        </div>
+        <div class="toggle-content" id="expiryContent">
+          <select class="form-control">
+            <option value="7">7일</option>
+            <option value="30" selected>30일</option>
+            <option value="90">90일</option>
+            <option value="0">무제한</option>
           </select>
         </div>
-      </section>
 
-      <!-- 공유 방식 -->
-      <section class="mb-lg">
-        <h3 class="section-title">공유 방식</h3>
-        <div class="checkbox-wrapper mb-md">
-          <input type="checkbox" class="checkbox" id="emailShare" checked>
-          <label for="emailShare">이메일 발송</label>
+        <div class="toggle-item">
+          <span class="toggle-label">비밀번호 설정</span>
+          <div class="toggle-switch" id="passwordToggle" onclick="toggleOption('password')"></div>
         </div>
-        <button class="btn btn-secondary" style="width: 100%;" onclick="copyShareLink()">
-          🔗 링크 복사
-        </button>
-      </section>
-
-      <!-- 링크 보안 설정 -->
-      <section class="mb-lg">
-        <h3 class="section-title">링크 보안 설정 (선택)</h3>
-
-        <div class="toggle-group">
-          <div class="toggle-item">
-            <span class="toggle-label">유효기간 설정</span>
-            <div class="toggle-switch" id="expiryToggle" onclick="toggleOption('expiry')"></div>
-          </div>
-          <div class="toggle-content" id="expiryContent">
-            <select class="form-control">
-              <option value="7">7일</option>
-              <option value="30" selected>30일</option>
-              <option value="90">90일</option>
-              <option value="0">무제한</option>
-            </select>
-          </div>
-
-          <div class="toggle-item">
-            <span class="toggle-label">비밀번호 설정</span>
-            <div class="toggle-switch" id="passwordToggle" onclick="toggleOption('password')"></div>
-          </div>
-          <div class="toggle-content" id="passwordContent">
-            <input type="password" class="form-control" placeholder="비밀번호 입력">
-          </div>
+        <div class="toggle-content" id="passwordContent">
+          <input type="password" class="form-control" placeholder="비밀번호 입력">
         </div>
-      </section>
+      </div>
+    </section>
 
-      <!-- 공유 이력 -->
-      <section class="mb-lg">
-        <h3 class="section-title">공유 이력</h3>
-        <div class="history-list" id="shareHistory"></div>
-      </section>
-    </div>
+    <!-- 공유 이력 -->
+    <section>
+      <h3 class="section-title">공유 이력</h3>
+      <div class="history-list" id="shareHistory"></div>
+    </section>
 
-    <!-- 고정 하단 버튼 -->
-    <div class="fixed-bottom-action">
-      <button class="btn btn-primary" style="width: 100%;" onclick="shareMinutes()">
-        공유하기
-      </button>
-    </div>
+  </main>
+
+  <!-- 하단 버튼 -->
+  <div class="bottom-buttons">
+    <button class="btn btn-primary" style="flex: 1;" onclick="shareMinutes()">
+      공유하기
+    </button>
   </div>
 
   <script src="common.js"></script>
