CEO 고충 20가지

2025-12-18 10:51:01 +09:00
parent b8e4dd5db2
commit 6cd83b9fe7
1 changed files with 60 additions and 14 deletions
--- a/index.php
+++ b/index.php
@@ -93,6 +93,37 @@
        width: auto !important;
        height: auto !important;
      }
+
+      /* Full Screen Lightbox */
+      #fullscreen-view {
+        position: fixed;
+        inset: 0;
+        background: rgba(15, 23, 42, 0.95);
+        z-index: 100;
+        overflow-y: auto;
+        display: none;
+        flex-direction: column;
+        align-items: center;
+        padding: 2rem 0; /* 상하 여백 */
+      }
+      #fullscreen-view img {
+        width: 100%; /* 기기 너비 꽉 채움 */
+        max-width: 1400px; /* PC에서는 너무 커지지 않게 제한 (선택 가능) */
+        height: auto;
+        display: block;
+        box-shadow: 0 0 50px rgba(0,0,0,0.5);
+      }
+      .fullscreen-close {
+        position: fixed;
+        top: 1.5rem;
+        right: 1.5rem;
+        z-index: 110;
+        background: white;
+        border-radius: 9999px;
+        padding: 0.75rem;
+        cursor: pointer;
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+      }
    </style>
 </head>
 <body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
@@ -227,16 +258,24 @@
        <!-- Modal Content injected by JS -->
    </div>

+    <!-- Full Screen Viewer Overlay -->
+    <div id="fullscreen-view" onclick="closeFullscreen()">
+        <div class="fullscreen-close">
+            <i data-lucide="x" class="w-6 h-6 text-slate-900"></i>
+        </div>
+        <img id="fullscreen-img" src="" alt="Full size view" onclick="event.stopPropagation()">
+    </div>
+
    <script>
        // Data - Ported from constants.ts
        const ASSETS = [
          {
-            id: '1', type: 'IMAGE', title: 'Concept: 대표를 위한 무기',
+            id: '1', type: 'IMAGE', title: '대표를 위한 무기',
            src: 'img/sam_sales1.jpg',
            description: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오.',
            content: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오. SAM이 대표님께 직접, 실시간으로 회사의 현황을 보고합니다.',
            script: "대표님, ERP나 MES 들어보셨죠? 보통 직원들이 입력하고 관리하는 도구입니다. 정작 대표님은 직원한테 보고를 받아야만 회사를 알 수 있죠. SAM은 반대입니다. 직원이 아니라 '대표님을 위한 무기'입니다. 외근 중이든 집이든, 대표님 폰에서 회사의 자금, 인력, 리스크가 한눈에 보입니다.",
-            tags: ['Concept', 'Pitch', 'Opener'], gridSpan: 'col-span-1', rowSpan: 'row-span-1'
+            tags: [ 'Pitch', 'Opener'], gridSpan: 'col-span-1', rowSpan: 'row-span-1', customAspect: 'aspect-[3/4]'
          },
          {
            id: '3', type: 'VIDEO', title: 'CEO 시크릿 대시보드', src: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=2670&q=80', videoTitle: 'CEO Dashboard Demo',
@@ -255,7 +294,7 @@
            id: '5', type: 'IMAGE', title: '모바일 & 감성 알림', src: 'img/sam_alert.jpg',
            description: '수주/입금 시 울리는 "SAM~" 알림음. 외근 중에도 회사가 돌아가는 소리를 들으세요.',
            script: "가장 인기 있는 기능입니다. 외근 나가 계실 때 불안하시죠? 직원이 큰 수주를 따오거나, 거래처에서 돈을 입금하면 대표님 폰에서 'SAM~' 하고 알림이 옵니다. 그 소리만 들으면 '아, 우리 회사 잘 돌아가고 있구나' 안심이 되실 겁니다.",
-            tags: ['Mobile', 'UX', 'Emotion'], gridSpan: 'col-span-3 md:col-span-3', rowSpan: 'row-span-1'
+            tags: ['Mobile', 'UX', 'Emotion'], gridSpan: 'col-span-3 md:col-span-3', rowSpan: 'row-span-1', customAspect: 'aspect-video'
          },
          {
            id: '6', type: 'VIDEO', title: '영업 전략 해부: CEO에게 파는 법', 
@@ -399,7 +438,9 @@
                    iconName = 'bar-chart-2';
                    badgeColor = 'bg-emerald-100 text-emerald-700';
                } else if (asset.type === 'IMAGE' || asset.type === 'VIDEO') {
-                    const aspectClass = asset.customAspect || 'aspect-video';
+                    // 비디오는 16:9, 이미지는 기본적으로 세로형(3:4) 비율 적용
+                    const defaultAspect = asset.type === 'VIDEO' ? 'aspect-video' : 'aspect-[3/4]';
+                    const aspectClass = asset.customAspect || defaultAspect;
                    // object-cover 대신 object-contain을 사용하고 padding을 주어 잘림 방지
                    contentRaw = `
                        <div class="mb-4 rounded-lg overflow-hidden border border-slate-100 relative group ${aspectClass} bg-slate-50 p-2 flex items-center justify-center">
@@ -630,22 +671,27 @@
            }, 300);
        };

-        // Toggle Image Natural Size
+        // Toggle Image Natural Size (Now Full Screen Wide View)
        window.toggleNaturalSize = (btn) => {
            const img = document.getElementById('modal-main-img');
-            const container = document.getElementById('image-viewer');
-            const isNatural = img.classList.toggle('img-natural');
+            const fsView = document.getElementById('fullscreen-view');
+            const fsImg = document.getElementById('fullscreen-img');
            
-            if (isNatural) {
-                btn.innerHTML = '<i data-lucide="minimize" class="w-3.5 h-3.5"></i><span>맞춤 크기 보기</span>';
-                img.classList.remove('img-zoom-target'); // 원본 크기일 때는 호버 확대 끔
-            } else {
-                btn.innerHTML = '<i data-lucide="maximize" class="w-3.5 h-3.5"></i><span>원본 크기 보기</span>';
-                img.classList.add('img-zoom-target');
-            }
+            fsImg.src = img.src;
+            fsView.style.display = 'flex';
+            document.body.classList.add('no-scroll');
            lucide.createIcons();
        };

+        window.closeFullscreen = () => {
+            const fsView = document.getElementById('fullscreen-view');
+            fsView.style.display = 'none';
+            // 모달이 열려있는 상태면 스크롤 제한 유지, 아니면 해제
+            if (document.getElementById('modal-backdrop').classList.contains('hidden')) {
+                document.body.classList.remove('no-scroll');
+            }
+        };
+
        // Initialize
        init();
    </script>