prototype 05060910 edit

design/uiux/prototype/05-대시보드.html

@@ -34,7 +34,7 @@
         <div class="flex items-center justify-between mb-md">
           <h3 class="text-headline">빠른 시작</h3>
         </div>
-        <div class="grid grid-cols-2 gap-sm tablet:grid-cols-4">
+        <div class="grid grid-cols-2 gap-sm">
           <button class="card card-clickable p-md" id="createEvent">
             <span class="material-icons text-kt-red" style="font-size: 32px;">add_circle</span>
             <p class="text-body-small mt-sm">새 이벤트</p>

design/uiux/prototype/09-콘텐츠미리보기.html

@@ -85,7 +85,7 @@
       <!-- Header -->
       <div id="header"></div>
 
-      <div class="container" style="max-width: 800px">
+      <div class="container" style="max-width: 600px">
         <!-- Loading State -->
         <div id="loadingState" class="text-center mt-2xl mb-2xl">
           <span

design/uiux/prototype/10-콘텐츠편집.html

@@ -50,7 +50,7 @@
     <!-- Header -->
     <div id="header"></div>
 
-    <div class="container" style="max-width: 1000px;">
+    <div class="container" style="max-width: 800px;">
       <!-- Desktop Layout: Side-by-side -->
       <div class="grid desktop:grid-cols-2 gap-lg mt-lg mb-2xl">
         <!-- Preview Section -->
@@ -96,74 +96,6 @@
             </div>
           </div>
 
-          <!-- Color Adjustment -->
-          <div class="card mb-md">
-            <h4 class="text-headline mb-md">
-              <span class="material-icons" style="vertical-align: middle;">palette</span>
-              색상 조정
-            </h4>
-
-            <div class="form-group">
-              <label class="form-label">배경색</label>
-              <div class="color-picker-wrapper">
-                <div class="color-swatch" id="bgColorSwatch" onclick="document.getElementById('bgColorInput').click()" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
-                <input type="color" id="bgColorInput" value="#667eea">
-                <span class="text-body-small text-secondary">클릭하여 선택</span>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label class="form-label">텍스트색</label>
-              <div class="color-picker-wrapper">
-                <div class="color-swatch" id="textColorSwatch" onclick="document.getElementById('textColorInput').click()" style="background: #ffffff;"></div>
-                <input type="color" id="textColorInput" value="#ffffff">
-                <span class="text-body-small text-secondary">클릭하여 선택</span>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label class="form-label">강조색</label>
-              <div class="color-picker-wrapper">
-                <div class="color-swatch" id="accentColorSwatch" onclick="document.getElementById('accentColorInput').click()" style="background: #E31E24;"></div>
-                <input type="color" id="accentColorInput" value="#E31E24">
-                <span class="text-body-small text-secondary">클릭하여 선택</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Logo Position -->
-          <div class="card mb-md">
-            <h4 class="text-headline mb-md">
-              <span class="material-icons" style="vertical-align: middle;">business</span>
-              로고 위치
-            </h4>
-
-            <div class="form-group">
-              <label class="form-label">위치 이동</label>
-              <div class="logo-controls">
-                <button class="btn btn-secondary btn-small" onclick="moveLogo('left')">
-                  <span class="material-icons">chevron_left</span>
-                </button>
-                <span class="text-body-small text-secondary flex-1 text-center">좌/우 이동</span>
-                <button class="btn btn-secondary btn-small" onclick="moveLogo('right')">
-                  <span class="material-icons">chevron_right</span>
-                </button>
-              </div>
-            </div>
-
-            <div class="form-group">
-              <label class="form-label">크기 조절</label>
-              <div class="logo-controls">
-                <button class="btn btn-secondary btn-small" onclick="resizeLogo(-1)">
-                  <span class="material-icons">remove</span>
-                </button>
-                <span class="text-body-small text-secondary flex-1 text-center" id="logoSize">중간</span>
-                <button class="btn btn-secondary btn-small" onclick="resizeLogo(1)">
-                  <span class="material-icons">add</span>
-                </button>
-              </div>
-            </div>
-          </div>
         </section>
       </div>
 

design/uiux/prototype/11-배포채널선택.html

@@ -273,6 +273,75 @@
       updateSummary();
     });
 
+    // SNS 예약 게시 선택 시 모달 표시
+    let scheduledDateTime = null;
+    document.getElementById('snsSchedule').addEventListener('change', function() {
+      if (this.value === 'schedule') {
+        showScheduleModal();
+      }
+    });
+
+    function showScheduleModal() {
+      // 현재 날짜/시간 기본값 설정
+      const now = new Date();
+      const tomorrow = new Date(now);
+      tomorrow.setDate(tomorrow.getDate() + 1);
+
+      const dateStr = tomorrow.toISOString().split('T')[0];
+      const timeStr = '09:00';
+
+      KTEventApp.Feedback.showModal({
+        title: '예약 배포 설정',
+        content: `
+          <div class="form-group">
+            <label class="form-label">배포 날짜</label>
+            <input type="date" id="scheduleDate" class="form-input" value="${dateStr}" min="${dateStr}">
+          </div>
+          <div class="form-group">
+            <label class="form-label">배포 시간</label>
+            <input type="time" id="scheduleTime" class="form-input" value="${timeStr}">
+          </div>
+          <p class="text-body-small text-secondary mt-md">
+            * 설정한 시간에 자동으로 SNS에 게시됩니다
+          </p>
+        `,
+        buttons: [
+          {
+            text: '취소',
+            variant: 'text',
+            onClick: function() {
+              // 즉시로 되돌리기
+              document.getElementById('snsSchedule').value = 'now';
+              scheduledDateTime = null;
+              this.closest('.modal-backdrop').remove();
+            }
+          },
+          {
+            text: '확인',
+            variant: 'primary',
+            onClick: function() {
+              const date = document.getElementById('scheduleDate').value;
+              const time = document.getElementById('scheduleTime').value;
+
+              if (!date || !time) {
+                KTEventApp.Feedback.showToast('날짜와 시간을 모두 입력해주세요');
+                return;
+              }
+
+              scheduledDateTime = {
+                date: date,
+                time: time,
+                datetime: `${date} ${time}`
+              };
+
+              KTEventApp.Feedback.showToast(`${date} ${time}에 배포 예약되었습니다`);
+              this.closest('.modal-backdrop').remove();
+            }
+          }
+        ]
+      });
+    }
+
     // 요약 업데이트
     function updateSummary() {
       let totalCost = 0;
@@ -337,7 +406,8 @@
           instagram: document.getElementById('snsInstagram').checked,
           naver: document.getElementById('snsNaver').checked,
           kakao: document.getElementById('snsKakao').checked,
-          schedule: document.getElementById('snsSchedule').value
+          schedule: document.getElementById('snsSchedule').value,
+          scheduledDateTime: scheduledDateTime
         } : null
       };