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-18 10:15:00 +09:00
parent ee9c2b88cf
commit b8e4dd5db2
2 changed files with 82 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/sam_sales1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 432 KiB

94
index.php
View File

@@ -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;
}
</style>
</head>
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900">
@@ -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 = `
<div class="mb-4 rounded-lg overflow-hidden border border-slate-100 relative group ${aspectClass}">
<img src="${asset.src}" alt="${asset.title}" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500">
<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">
<img src="${asset.src}" alt="${asset.title}"
class="w-full h-full object-contain transform group-hover:scale-105 transition-transform duration-500"
style="image-rendering: -webkit-optimize-contrast;">
${asset.type === 'VIDEO' ? `
<div class="absolute inset-0 bg-black/40 flex items-center justify-center group-hover:bg-black/30 transition-all">
<div class="w-12 h-12 rounded-full bg-white/90 flex items-center justify-center pl-1 shadow-lg transform group-hover:scale-110 transition-transform">
@@ -474,9 +517,28 @@
</div>
`;
} else {
const aspectClass = asset.customAspect || 'aspect-video';
const objectFitClass = asset.customAspect ? 'object-contain p-2' : 'object-cover';
mediaHtml = `<div class="${aspectClass} bg-slate-100 rounded-xl overflow-hidden mb-6"><img src="${asset.src}" class="w-full h-full ${objectFitClass}"></div>`;
// 원본 크기 전환 및 스크롤 가능 컨테이너 적용 (버튼 위치 절대 좌표 고정)
mediaHtml = `
<div class="relative mb-6 group/viewer min-h-[200px] bg-slate-50 rounded-xl overflow-hidden border border-slate-100">
<!-- 항상 고정된 우측 상단 위치 -->
<div class="absolute top-3 right-3 z-[60] flex gap-2 translate-y-2 opacity-0 group-hover/viewer:translate-y-0 group-hover/viewer:opacity-100 transition-all duration-300">
<button onclick="toggleNaturalSize(this)"
class="px-4 py-2 bg-white/95 backdrop-blur-md shadow-lg border border-slate-200 rounded-full text-xs font-bold text-brand-600 hover:bg-brand-600 hover:text-white transition-all flex items-center gap-2 ring-4 ring-black/5">
<i data-lucide="maximize" class="w-3.5 h-3.5"></i>
<span>원본 크기 보기</span>
</button>
</div>
<!-- 이미지 스크롤 영역 -->
<div class="img-full-container custom-scrollbar scroll-smooth w-full" id="image-viewer">
<img src="${asset.src}"
id="modal-main-img"
class="w-full h-auto object-contain rounded-xl img-zoom-target mx-auto"
style="image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges;">
</div>
<div class="absolute bottom-3 left-0 right-0 text-center text-[10px] text-slate-400 font-medium pointer-events-none group-hover/viewer:opacity-0 transition-opacity">
* 우측 상단 버튼으로 원본 크기를 확인할 수 있습니다.
</div>
</div>`;
}
}
@@ -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 = '<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');
}
lucide.createIcons();
};
// Initialize