diff --git a/img/sam_sales1.jpg b/img/sam_sales1.jpg new file mode 100644 index 0000000..2e56650 Binary files /dev/null and b/img/sam_sales1.jpg differ diff --git a/index.php b/index.php index 859fb7d..dee9653 100644 --- a/index.php +++ b/index.php @@ -55,6 +55,44 @@ /* Hide scrollbar for clean modal */ .no-scroll { overflow: hidden; } + + /* Image Zoom & Float Effect */ + .img-zoom-container { + overflow: visible !important; + perspective: 1000px; + } + .img-zoom-target { + cursor: zoom-in; + transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); + position: relative; + z-index: 1; + /* 인라인 스타일을 클래스로 통합 */ + image-rendering: -webkit-optimize-contrast; + image-rendering: crisp-edges; + transform: translateZ(0); + backface-visibility: hidden; + } + .img-zoom-target:hover { + transform: scale(1.1) translateZ(0) !important; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); + z-index: 50; + } + + /* Full Size Viewer */ + .img-full-container { + max-height: 70vh; + overflow: auto; + cursor: grab; + background: #f8fafc; + border-radius: 0.75rem; + border: 1px solid #e2e8f0; + } + .img-full-container:active { cursor: grabbing; } + .img-natural { + max-width: none !important; + width: auto !important; + height: auto !important; + } @@ -193,7 +231,9 @@ // Data - Ported from constants.ts const ASSETS = [ { - id: '1', type: 'TEXT', title: 'Concept: 대표를 위한 무기', + id: '1', type: 'IMAGE', title: 'Concept: 대표를 위한 무기', + 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' @@ -360,9 +400,12 @@ badgeColor = 'bg-emerald-100 text-emerald-700'; } else if (asset.type === 'IMAGE' || asset.type === 'VIDEO') { const aspectClass = asset.customAspect || 'aspect-video'; + // object-cover 대신 object-contain을 사용하고 padding을 주어 잘림 방지 contentRaw = ` -
- ${asset.title} +
+ ${asset.title} ${asset.type === 'VIDEO' ? `
@@ -474,9 +517,28 @@
`; } else { - const aspectClass = asset.customAspect || 'aspect-video'; - const objectFitClass = asset.customAspect ? 'object-contain p-2' : 'object-cover'; - mediaHtml = `
`; + // 원본 크기 전환 및 스크롤 가능 컨테이너 적용 (버튼 위치 절대 좌표 고정) + mediaHtml = ` +
+ +
+ +
+ +
+ +
+
+ * 우측 상단 버튼으로 원본 크기를 확인할 수 있습니다. +
+
`; } } @@ -568,12 +630,20 @@ }, 300); }; - // Toast - window.showDownloadToast = () => { - toast.classList.remove('translate-x-full', 'opacity-0'); - setTimeout(() => { - toast.classList.add('translate-x-full', 'opacity-0'); - }, 3000); + // Toggle Image Natural Size + window.toggleNaturalSize = (btn) => { + const img = document.getElementById('modal-main-img'); + const container = document.getElementById('image-viewer'); + const isNatural = img.classList.toggle('img-natural'); + + if (isNatural) { + btn.innerHTML = '맞춤 크기 보기'; + img.classList.remove('img-zoom-target'); // 원본 크기일 때는 호버 확대 끔 + } else { + btn.innerHTML = '원본 크기 보기'; + img.classList.add('img-zoom-target'); + } + lucide.createIcons(); }; // Initialize