prototype final

design/uiux/prototype/03-프로필.html

@@ -16,7 +16,7 @@
     <div class="container" style="max-width: 600px;">
       <!-- User Info Section -->
       <section class="mt-lg mb-xl text-center">
-        <div class="mb-md" style="display: inline-block; width: 80px; height: 80px; background: var(--color-gray-100); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;">
+        <div class="mb-md" style="width: 80px; height: 80px; background: var(--color-gray-100); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;">
           <span class="material-icons" style="font-size: 48px; color: var(--color-gray-400);">person</span>
         </div>
         <h2 class="text-title" id="userName">홍길동</h2> 

design/uiux/prototype/08-AI이벤트추천.html

@@ -425,8 +425,8 @@
 
         KTEventApp.Utils.saveToStorage('selected_recommendation', recommendationData);
 
-        // 콘텐츠 편집 페이지로 이동
+        // SNS 이미지 생성 페이지로 이동
-        window.location.href = '10-콘텐츠편집.html';
+        window.location.href = '09-콘텐츠미리보기.html';
       }
     });
 

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

@@ -34,6 +34,40 @@
         color: var(--color-gray-400);
         text-align: center;
       }
+      .style-card {
+        position: relative;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 3px solid transparent;
+      }
+      .style-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+      }
+      .style-card.selected {
+        border-color: var(--color-kt-red);
+        box-shadow: 0 4px 12px rgba(227, 30, 36, 0.2);
+      }
+      .style-card .form-check-input {
+        display: none;
+      }
+      .selected-badge {
+        position: absolute;
+        top: var(--spacing-md);
+        right: var(--spacing-md);
+        background: var(--color-kt-red);
+        color: white;
+        width: 32px;
+        height: 32px;
+        border-radius: var(--radius-full);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+      }
+      .style-card.selected .selected-badge {
+        display: flex;
+      }
       .fullscreen-modal {
         position: fixed;
         top: 0;
@@ -110,7 +144,17 @@
           <!-- Style 1: 심플 -->
           <section class="mb-lg">
             <h3 class="text-headline mb-md">스타일 1: 심플</h3>
-            <div class="card">
+            <div class="card style-card" data-style="simple">
+              <div class="selected-badge">
+                <span class="material-icons" style="font-size: 20px">check</span>
+              </div>
+              <input
+                type="radio"
+                name="imageStyle"
+                id="style1"
+                value="simple"
+                class="form-check-input"
+              />
               <div class="image-preview mb-md">
                 <div class="image-preview-placeholder">
                   <span class="material-icons" style="font-size: 48px"
@@ -124,17 +168,7 @@
                   </p>
                 </div>
               </div>
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-end">
-                <div class="form-check">
-                  <input
-                    type="radio"
-                    name="imageStyle"
-                    id="style1"
-                    value="simple"
-                    class="form-check-input"
-                  />
-                  <label for="style1" class="form-check-label">선택</label>
-                </div>
                 <button
                   class="btn btn-text btn-small preview-btn"
                   data-style="simple"
@@ -149,7 +183,17 @@
           <!-- Style 2: 화려 -->
           <section class="mb-lg">
             <h3 class="text-headline mb-md">스타일 2: 화려</h3>
-            <div class="card">
+            <div class="card style-card" data-style="fancy">
+              <div class="selected-badge">
+                <span class="material-icons" style="font-size: 20px">check</span>
+              </div>
+              <input
+                type="radio"
+                name="imageStyle"
+                id="style2"
+                value="fancy"
+                class="form-check-input"
+              />
               <div
                 class="image-preview mb-md"
                 style="
@@ -168,17 +212,7 @@
                   </p>
                 </div>
               </div>
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-end">
-                <div class="form-check">
-                  <input
-                    type="radio"
-                    name="imageStyle"
-                    id="style2"
-                    value="fancy"
-                    class="form-check-input"
-                  />
-                  <label for="style2" class="form-check-label">선택</label>
-                </div>
                 <button
                   class="btn btn-text btn-small preview-btn"
                   data-style="fancy"
@@ -193,7 +227,17 @@
           <!-- Style 3: 트렌디 -->
           <section class="mb-lg">
             <h3 class="text-headline mb-md">스타일 3: 트렌디</h3>
-            <div class="card">
+            <div class="card style-card" data-style="trendy">
+              <div class="selected-badge">
+                <span class="material-icons" style="font-size: 20px">check</span>
+              </div>
+              <input
+                type="radio"
+                name="imageStyle"
+                id="style3"
+                value="trendy"
+                class="form-check-input"
+              />
               <div
                 class="image-preview mb-md"
                 style="
@@ -212,17 +256,7 @@
                   </p>
                 </div>
               </div>
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-end">
-                <div class="form-check">
-                  <input
-                    type="radio"
-                    name="imageStyle"
-                    id="style3"
-                    value="trendy"
-                    class="form-check-input"
-                  />
-                  <label for="style3" class="form-check-label">선택</label>
-                </div>
                 <button
                   class="btn btn-text btn-small preview-btn"
                   data-style="trendy"
@@ -314,16 +348,35 @@
       // 선택 상태 관리
       let selectedStyle = null;
 
-      document.querySelectorAll('input[name="imageStyle"]').forEach((radio) => {
+      // 카드 클릭 이벤트
-        radio.addEventListener("change", function () {
+      document.querySelectorAll('.style-card').forEach((card) => {
-          selectedStyle = this.value;
+        card.addEventListener('click', function(e) {
+          // 크게보기 버튼 클릭은 무시
+          if (e.target.closest('.preview-btn')) {
+            return;
+          }
+
+          const styleValue = this.dataset.style;
+          const radioInput = this.querySelector('input[name="imageStyle"]');
+
+          // 모든 카드의 선택 상태 제거
+          document.querySelectorAll('.style-card').forEach(c => {
+            c.classList.remove('selected');
+          });
+
+          // 현재 카드 선택
+          this.classList.add('selected');
+          radioInput.checked = true;
+
+          selectedStyle = styleValue;
           document.getElementById("nextBtn").disabled = false;
         });
       });
 
       // 크게보기 버튼
       document.querySelectorAll(".preview-btn").forEach((btn) => {
-        btn.addEventListener("click", function () {
+        btn.addEventListener("click", function (e) {
+          e.stopPropagation(); // 카드 클릭 이벤트 방지
           const style = this.dataset.style;
           openFullscreen(style);
         });

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

@@ -146,12 +146,6 @@
       const title = document.getElementById('titleInput').value;
       const prize = document.getElementById('prizeInput').value;
       const guide = document.getElementById('guideInput').value;
-      const bgColor = document.getElementById('bgColorInput').value;
-      const textColor = document.getElementById('textColorInput').value;
-
-      const preview = document.getElementById('preview');
-      preview.style.background = `linear-gradient(135deg, ${bgColor} 0%, #764ba2 100%)`;
-      preview.style.color = textColor;
 
       document.getElementById('previewTitle').textContent = title || '제목을 입력하세요';
       document.getElementById('previewPrize').textContent = prize || '경품을 입력하세요';
@@ -181,53 +175,12 @@
       updateCharCount();
     });
 
-    // 색상 선택 이벤트
-    document.getElementById('bgColorInput').addEventListener('change', function() {
-      document.getElementById('bgColorSwatch').style.background = this.value;
-      updatePreview();
-    });
-
-    document.getElementById('textColorInput').addEventListener('change', function() {
-      document.getElementById('textColorSwatch').style.background = this.value;
-      updatePreview();
-    });
-
-    document.getElementById('accentColorInput').addEventListener('change', function() {
-      document.getElementById('accentColorSwatch').style.background = this.value;
-    });
-
-    // 로고 위치 이동
-    let logoPosition = 0;
-    window.moveLogo = function(direction) {
-      if (direction === 'left' && logoPosition > -2) {
-        logoPosition--;
-      } else if (direction === 'right' && logoPosition < 2) {
-        logoPosition++;
-      }
-      // 실제로는 로고 위치 조정 로직 구현
-      KTEventApp.Feedback.showToast(`로고를 ${direction === 'left' ? '왼쪽' : '오른쪽'}으로 이동했습니다`);
-    };
-
-    // 로고 크기 조절
-    let logoSize = 1;
-    const logoSizeLabels = ['작게', '중간', '크게'];
-    window.resizeLogo = function(delta) {
-      logoSize = Math.max(0, Math.min(2, logoSize + delta));
-      document.getElementById('logoSize').textContent = logoSizeLabels[logoSize];
-      KTEventApp.Feedback.showToast(`로고 크기: ${logoSizeLabels[logoSize]}`);
-    };
-
     // 저장 버튼
     document.getElementById('saveBtn').addEventListener('click', function() {
       const editData = {
         title: document.getElementById('titleInput').value,
         prize: document.getElementById('prizeInput').value,
-        guide: document.getElementById('guideInput').value,
+        guide: document.getElementById('guideInput').value
-        bgColor: document.getElementById('bgColorInput').value,
-        textColor: document.getElementById('textColorInput').value,
-        accentColor: document.getElementById('accentColorInput').value,
-        logoPosition: logoPosition,
-        logoSize: logoSize
       };
 
       KTEventApp.Utils.saveToStorage('content_edit', editData);
@@ -240,12 +193,7 @@
       const editData = {
         title: document.getElementById('titleInput').value,
         prize: document.getElementById('prizeInput').value,
-        guide: document.getElementById('guideInput').value,
+        guide: document.getElementById('guideInput').value
-        bgColor: document.getElementById('bgColorInput').value,
-        textColor: document.getElementById('textColorInput').value,
-        accentColor: document.getElementById('accentColorInput').value,
-        logoPosition: logoPosition,
-        logoSize: logoSize
       };
 
       KTEventApp.Utils.saveToStorage('content_edit', editData);