SamProject/sam-sales
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

카드 구조 변경

Browse Source
This commit is contained in:
김보곤
2025-12-19 10:48:59 +09:00
parent 0fab71634b
commit 7253c40e3c
3 changed files with 95 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
index.php
View File

@@ -266,6 +266,23 @@
<img id="fullscreen-img" src="" alt="Full size view" onclick="event.stopPropagation()">
</div>
<!-- PDF Viewer Modal -->
<div id="pdf-modal-backdrop" class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[70] hidden transition-opacity opacity-0" onclick="closePdfViewer()"></div>
<div id="pdf-modal-container" class="fixed inset-0 z-[70] flex items-center justify-center p-4 pointer-events-none hidden">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-[95vw] h-[95vh] flex flex-col pointer-events-auto scale-95 opacity-0 transition-all duration-300" id="pdf-modal-card">
<div class="sticky top-0 bg-white/90 backdrop-blur-sm p-4 border-b border-slate-100 flex justify-between items-center z-10">
<h3 class="text-lg font-bold text-slate-900" id="pdf-modal-title">상세자료</h3>
<button onclick="closePdfViewer()" class="w-8 h-8 rounded-full bg-slate-50 hover:bg-slate-100 flex items-center justify-center text-slate-500 transition-colors">
<i data-lucide="x" class="w-5 h-5"></i>
</button>
</div>
<div class="flex-1 overflow-hidden">
<iframe id="pdf-viewer-iframe" src="" class="w-full h-full border-0" frameborder="0"></iframe>
</div>
</div>
</div>
<script>
// 통일된 영업 자료 데이터 구조
// 모든 카드는 동일한 포맷: 이미지(4:3), 설명, 동영상, 오디오, 영업 스크립트
@@ -275,8 +292,9 @@
title: '대표를 위한 무기',
image: 'img/sales1.jpg',
description: '기존 ERP는 직원의 관리 도구였지만, SAM은 대표님의 의사결정 무기입니다. 직원의 보고를 기다리지 마십시오.',
video: null,
audio: null,
video: '<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/1147875239?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="SAM__CEO를_위한_무기"></iframe></div>',
audio: 'm4a/sales1.m4a',
pdf: 'pdf/sales1.pdf',
script: "대표님, ERP나 MES 들어보셨죠? 보통 직원들이 입력하고 관리하는 도구입니다. 정작 대표님은 직원한테 보고를 받아야만 회사를 알 수 있죠. SAM은 반대입니다. 직원이 아니라 '대표님을 위한 무기'입니다. 외근 중이든 집이든, 대표님 폰에서 회사의 자금, 인력, 리스크가 한눈에 보입니다.",
tags: ['Pitch', 'Opener'],
},
@@ -580,6 +598,20 @@
</div>`;
}
// 2. 설명 (이미지 밑에 표시)
if (asset.description) {
mediaHtml += `
<div class="mb-6">
<div class="flex items-center gap-2 mb-3">
<div class="w-1 h-5 rounded-full bg-brand-500"></div>
<h4 class="font-bold text-slate-900">설명</h4>
</div>
<div class="p-4 bg-slate-50 rounded-xl border border-slate-100 text-slate-700 leading-relaxed">
${asset.description}
</div>
</div>`;
}
// 2. 동영상
if (asset.video) {
mediaHtml += `
@@ -631,19 +663,6 @@
<div class="p-6 sm:p-8">
${mediaHtml}
<!-- 설명 -->
${asset.description ? `
<div class="mb-8">
<div class="flex items-center gap-2 mb-3">
<div class="w-1 h-5 rounded-full bg-brand-500"></div>
<h4 class="font-bold text-slate-900">설명</h4>
</div>
<div class="p-4 bg-slate-50 rounded-xl border border-slate-100 text-slate-700 leading-relaxed">
${asset.description}
</div>
</div>
` : ''}
<!-- 영업 스크립트 -->
${asset.script ? `
<div class="mb-8">
@@ -665,10 +684,17 @@
<div class="p-4 border-t border-slate-100 bg-slate-50 rounded-b-2xl flex justify-end gap-3">
<button onclick="closeModal()" class="px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 font-medium hover:bg-slate-50 transition-colors">닫기</button>
${asset.pdf ? `
<button onclick="openPdfViewer('${asset.id}')" class="px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2">
<i data-lucide="file-text" class="w-4 h-4"></i>
상세자료 보기
</button>
` : `
<button onclick="showDownloadToast(); closeModal()" class="px-4 py-2 rounded-lg bg-brand-600 text-white font-medium hover:bg-brand-700 shadow-md transition-colors flex items-center gap-2">
<i data-lucide="download" class="w-4 h-4"></i>
자료 사용하기
</button>
`}
</div>
</div>
`;
@@ -739,6 +765,60 @@
}
};
// PDF Viewer Functions
window.openPdfViewer = (id) => {
const asset = ASSETS.find(a => a.id === id);
if (!asset || !asset.pdf) return;
const pdfBackdrop = document.getElementById('pdf-modal-backdrop');
const pdfContainer = document.getElementById('pdf-modal-container');
const pdfCard = document.getElementById('pdf-modal-card');
const pdfIframe = document.getElementById('pdf-viewer-iframe');
const pdfTitle = document.getElementById('pdf-modal-title');
pdfTitle.textContent = asset.title;
// PDF를 Google Drive Viewer로 표시 (로컬 파일도 가능)
// 또는 직접 PDF 파일 경로 사용 (브라우저 지원 시)
const pdfUrl = asset.pdf;
pdfIframe.src = pdfUrl;
// Animation In
pdfBackdrop.classList.remove('hidden');
pdfContainer.classList.remove('hidden');
document.body.classList.add('no-scroll');
// Trigger reflow
void pdfBackdrop.offsetWidth;
pdfBackdrop.classList.remove('opacity-0');
pdfCard.classList.remove('scale-95', 'opacity-0');
lucide.createIcons();
};
window.closePdfViewer = () => {
const pdfBackdrop = document.getElementById('pdf-modal-backdrop');
const pdfContainer = document.getElementById('pdf-modal-container');
const pdfCard = document.getElementById('pdf-modal-card');
const pdfIframe = document.getElementById('pdf-viewer-iframe');
if (pdfCard) {
pdfCard.classList.add('scale-95', 'opacity-0');
}
pdfBackdrop.classList.add('opacity-0');
setTimeout(() => {
pdfBackdrop.classList.add('hidden');
pdfContainer.classList.add('hidden');
pdfIframe.src = '';
// 모달이 열려있는 상태면 스크롤 제한 유지, 아니면 해제
if (document.getElementById('modal-backdrop').classList.contains('hidden')) {
document.body.classList.remove('no-scroll');
}
}, 300);
};
// 카드 이미지 비율 계산 함수
window.setImageAspectRatio = (img) => {
if (img.naturalWidth && img.naturalHeight) {