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

feat: [additional] 키오스크 페이지에 PPTX 영업자료 내용 반영

Browse Source 
- index: 왜 키오스크인가, DNSYS 파트너/스펙, SAM 연동 구조, 가격/도입조건, 영업포인트 추가
- showroom: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가
- factory: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가
This commit is contained in:
김보곤
2026-02-22 22:50:21 +09:00
parent a570fa9246
commit a67e0dc019
3 changed files with 574 additions and 409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

299
resources/views/additional/kiosk/factory.blade.php
View File

@@ -4,179 +4,184 @@
@push('styles')
<style>
.factory-container {
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px;
}
.factory-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
}
.factory-header h1 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
}
.factory-header .back-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.15s;
}
.factory-header .back-link:hover {
color: #16a34a;
}
.factory-sections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.factory-section {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
}
.factory-section h2 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.factory-section h2 .icon {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.factory-section h2 .icon svg {
width: 14px;
height: 14px;
}
.factory-section p {
color: #94a3b8;
font-size: 0.85rem;
margin-bottom: 16px;
}
.factory-placeholder {
background: #f8fafc;
border: 2px dashed #e2e8f0;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
color: #94a3b8;
font-size: 0.85rem;
}
.factory-section.production h2 .icon { background: #dcfce7; color: #16a34a; }
.factory-section.work-order h2 .icon { background: #dbeafe; color: #2563eb; }
.factory-section.stats h2 .icon { background: #fef3c7; color: #d97706; }
.factory-section.notices h2 .icon { background: #fee2e2; color: #dc2626; }
.fc { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
.fc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.fc-header h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.fc-header .back-link { display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
.fc-header .back-link:hover { color: #16a34a; }
/* 시나리오 흐름 */
.fc-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.fc-flow-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; }
.fc-flow-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.fc-flow-card h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
.fc-flow-card p { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
.fc-flow-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem; font-weight: 700; z-index: 1; }
/* SAM 자산 바 */
.fc-assets { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 14px 20px; margin-bottom: 32px; }
.fc-assets-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.fc-assets-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-asset-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: #fff; border: 1px solid #bbf7d0; }
.fc-asset-tag.blue { color: #1d4ed8; }
.fc-asset-tag.green { color: #15803d; }
.fc-asset-tag.orange { color: #d97706; }
/* 기능 섹션 */
.fc-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.fc-section-title .bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.fc-section-title h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.fc-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fc-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
.fc-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fc-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fc-sec-icon svg { width: 15px; height: 15px; }
.fc-sec h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
.fc-sec > p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }
.fc-sec-detail { background: #f8fafc; border-radius: 8px; padding: 14px 16px; }
.fc-sec-detail li { font-size: 0.8rem; color: #334155; padding: 4px 0; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
.fc-sec-detail li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.fc-sec.production li::before { background: #16a34a; }
.fc-sec.work-order li::before { background: #2563eb; }
.fc-sec.stats li::before { background: #d97706; }
.fc-sec.notices li::before { background: #dc2626; }
.fc-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 0.82rem; margin-top: 12px; }
@media (max-width: 768px) {
.factory-sections {
grid-template-columns: 1fr;
}
.fc-flow { grid-template-columns: repeat(2, 1fr); }
.fc-flow-arrow { display: none; }
.fc-sections { grid-template-columns: 1fr; }
}
</style>
@endpush
@section('content')
<div class="factory-container">
<div class="factory-header">
<div class="fc">
<div class="fc-header">
<h1>공장 키오스크</h1>
<a href="{{ route('additional.kiosk.index') }}" class="back-link">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
키오스크 메인으로
</a>
</div>
<div class="factory-sections">
{{-- 생산 현황 --}}
<div class="factory-section production">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</span>
생산 현황
</h2>
{{-- 활용 시나리오 흐름 --}}
<div class="fc-flow">
<div class="fc-flow-card">
<div class="fc-flow-num" style="background:#2563eb;">1</div>
<h3>작업 지시 조회</h3>
<p>오늘의 작업 목록 공정별/라인별 지시서</p>
<span class="fc-flow-arrow">&rsaquo;</span>
</div>
<div class="fc-flow-card">
<div class="fc-flow-num" style="background:#16a34a;">2</div>
<h3>생산 현황</h3>
<p>실시간 진행률 목표 대비 실적 확인</p>
<span class="fc-flow-arrow">&rsaquo;</span>
</div>
<div class="fc-flow-card">
<div class="fc-flow-num" style="background:#d97706;">3</div>
<h3>실적 입력</h3>
<p>완료 수량 터치 입력 불량/비고 기록</p>
<span class="fc-flow-arrow">&rsaquo;</span>
</div>
<div class="fc-flow-card">
<div class="fc-flow-num" style="background:#7c3aed;">4</div>
<h3>통계 조회</h3>
<p>일별/주별 실적 라인별 생산성 비교</p>
</div>
</div>
{{-- SAM 기존 자산 활용 --}}
<div class="fc-assets">
<div class="fc-assets-title">SAM 기존 자산 활용</div>
<div class="fc-assets-tags">
<span class="fc-asset-tag blue">Worker Screen (/production/worker-screen)</span>
<span class="fc-asset-tag green">생산 통계 테이블</span>
<span class="fc-asset-tag orange">작업 지시 데이터</span>
</div>
</div>
{{-- 기능 섹션 --}}
<div class="fc-section-title">
<div class="bar" style="background:#16a34a;"></div>
<h2>기능 구성</h2>
</div>
<div class="fc-sections">
<div class="fc-sec production">
<div class="fc-sec-head">
<div class="fc-sec-icon" style="background:#dcfce7; color:#16a34a;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
</div>
<h3>생산 현황</h3>
</div>
<p>오늘의 생산 진행 상황을 실시간으로 확인합니다</p>
<div class="factory-placeholder">
생산 현황 영역<br>
<small>Worker Screen, 통계 테이블 연동 예정</small>
<div class="fc-sec-detail">
<ul>
<li>오늘 생산 목표 대비 실적 진행률</li>
<li>라인별/공정별 현황 대시보드</li>
<li>자동 새로고침 (실시간 갱신)</li>
<li>이상 발생 시 경고 표시</li>
</ul>
</div>
<div class="fc-placeholder">생산 현황 영역 &middot; Worker Screen, 통계 테이블 연동 예정</div>
</div>
{{-- 작업 지시 --}}
<div class="factory-section work-order">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
</svg>
</span>
작업 지시
</h2>
<div class="fc-sec work-order">
<div class="fc-sec-head">
<div class="fc-sec-icon" style="background:#dbeafe; color:#2563eb;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" /></svg>
</div>
<h3>작업 지시</h3>
</div>
<p>현재 진행 중인 작업 지시서를 조회합니다</p>
<div class="factory-placeholder">
작업 지시 영역<br>
<small>작업 지시서 목록 표시 예정</small>
<div class="fc-sec-detail">
<ul>
<li>오늘 배정된 작업 지시 목록</li>
<li>공정 순서 및 우선순위 표시</li>
<li>제품 사양/수량/납기 정보</li>
<li>종이 지시서 없이 터치로 확인</li>
</ul>
</div>
<div class="fc-placeholder">작업 지시 영역 &middot; 작업 지시서 목록 표시 예정</div>
</div>
{{-- 생산 통계 --}}
<div class="factory-section stats">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" />
</svg>
</span>
생산 통계
</h2>
<div class="fc-sec stats">
<div class="fc-sec-head">
<div class="fc-sec-icon" style="background:#fef3c7; color:#d97706;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 3.055A9.001 9.001 0 1020.945 13H11V3.055z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.488 9H15V3.512A9.025 9.025 0 0120.488 9z" /></svg>
</div>
<h3>생산 통계</h3>
</div>
<p>일별, 주별 생산 실적과 목표 달성률을 확인합니다</p>
<div class="factory-placeholder">
생산 통계 영역<br>
<small>생산 실적 차트 표시 예정</small>
<div class="fc-sec-detail">
<ul>
<li>일별/주별/월별 생산 실적 차트</li>
<li>라인별 생산성 비교 그래프</li>
<li>목표 달성률 및 추이</li>
<li>불량률 통계 및 분석</li>
</ul>
</div>
<div class="fc-placeholder">생산 통계 영역 &middot; 생산 실적 차트 표시 예정</div>
</div>
{{-- 공지사항 --}}
<div class="factory-section notices">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</span>
공지사항
</h2>
<p>공장 내 공지사항과 안전 수칙을 확인합니다</p>
<div class="factory-placeholder">
공지사항 영역<br>
<small>공장 공지사항 표시 예정</small>
<div class="fc-sec notices">
<div class="fc-sec-head">
<div class="fc-sec-icon" style="background:#fee2e2; color:#dc2626;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
</div>
<h3>공지사항</h3>
</div>
<p>공장 내 공지사항과 안전 수칙을 확인합니다</p>
<div class="fc-sec-detail">
<ul>
<li>공장 전체 공지사항 게시</li>
<li>안전 수칙 및 주의사항</li>
<li>설비 점검/정비 일정</li>
<li>긴급 공지 상단 고정 표시</li>
</ul>
</div>
<div class="fc-placeholder">공지사항 영역 &middot; 공장 공지사항 표시 예정</div>
</div>
</div>
</div>

387
resources/views/additional/kiosk/index.blade.php
View File

@@ -4,138 +4,291 @@
@push('styles')
<style>
.kiosk-container {
max-width: 900px;
margin: 0 auto;
padding: 40px 20px;
}
.kiosk-header {
text-align: center;
margin-bottom: 48px;
}
.kiosk-header h1 {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 8px;
}
.kiosk-header p {
color: #64748b;
font-size: 1.05rem;
}
.kiosk-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.kiosk-card {
display: block;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 40px 32px;
text-align: center;
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.kiosk-card:hover {
border-color: #3b82f6;
box-shadow: 0 8px 24px rgba(59,130,246,0.12);
transform: translateY(-2px);
}
.kiosk-card-icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.kiosk-card-icon svg {
width: 32px;
height: 32px;
}
.kiosk-card-icon.showroom {
background: #dbeafe;
color: #2563eb;
}
.kiosk-card-icon.factory {
background: #dcfce7;
color: #16a34a;
}
.kiosk-card h2 {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 8px;
}
.kiosk-card p {
color: #64748b;
font-size: 0.9rem;
line-height: 1.5;
}
.kiosk-card .tag {
display: inline-block;
margin-top: 16px;
padding: 4px 12px;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 500;
}
.kiosk-card .tag.showroom {
background: #dbeafe;
color: #1d4ed8;
}
.kiosk-card .tag.factory {
background: #dcfce7;
color: #15803d;
}
@media (max-width: 640px) {
.kiosk-cards {
grid-template-columns: 1fr;
}
.ki { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
/* 헤더 */
.ki-header { text-align: center; margin-bottom: 40px; }
.ki-header h1 { font-size: 1.75rem; font-weight: 700; color: #1e293b; margin-bottom: 6px; }
.ki-header p { color: #64748b; font-size: 0.95rem; }
/* 키오스크 선택 카드 */
.ki-select { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 48px; }
.ki-select a { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px 24px; text-align: center; text-decoration: none; color: inherit; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.ki-select a:hover { border-color: #3b82f6; box-shadow: 0 6px 20px rgba(59,130,246,0.12); transform: translateY(-2px); }
.ki-sel-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.ki-sel-icon svg { width: 26px; height: 26px; }
.ki-sel-icon.sr { background: #dbeafe; color: #2563eb; }
.ki-sel-icon.fc { background: #dcfce7; color: #16a34a; }
.ki-select h2 { font-size: 1.1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
.ki-select p { color: #64748b; font-size: 0.82rem; line-height: 1.5; margin-bottom: 10px; }
.ki-tag { display: inline-block; padding: 3px 10px; border-radius: 9999px; font-size: 0.7rem; font-weight: 500; }
.ki-tag.sr { background: #dbeafe; color: #1d4ed8; }
.ki-tag.fc { background: #dcfce7; color: #15803d; }
/* 섹션 공통 */
.ki-section { margin-bottom: 40px; }
.ki-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.ki-section-title .bar { width: 4px; height: 22px; border-radius: 2px; background: #2563eb; flex-shrink: 0; }
.ki-section-title h2 { font-size: 1.15rem; font-weight: 700; color: #1e293b; }
.ki-section-title span { font-size: 0.8rem; color: #94a3b8; margin-left: 4px; }
/* 왜 키오스크 - 2열 */
.ki-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ki-why-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
.ki-why-card.showroom { border-left: 3px solid #2563eb; }
.ki-why-card.factory { border-left: 3px solid #16a34a; }
.ki-why-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; margin-bottom: 12px; }
.ki-why-badge.sr { background: #dbeafe; color: #1d4ed8; }
.ki-why-badge.fc { background: #dcfce7; color: #15803d; }
.ki-why-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f5f9; }
.ki-why-item:last-child { border-bottom: none; }
.ki-why-item strong { font-size: 0.85rem; color: #1e293b; display: block; }
.ki-why-item small { font-size: 0.75rem; color: #94a3b8; }
.ki-why-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.ki-why-dot.sr { background: #2563eb; }
.ki-why-dot.fc { background: #16a34a; }
/* DNSYS + 스펙 - 2열 */
.ki-info { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ki-info-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; }
.ki-info-card h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.ki-info-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f8fafc; font-size: 0.82rem; }
.ki-info-row:last-child { border-bottom: none; }
.ki-info-row .label { color: #64748b; }
.ki-info-row .value { color: #1e293b; font-weight: 500; }
/* 강점 태그 */
.ki-strengths { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ki-str-tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 0.78rem; color: #334155; }
.ki-str-tag .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* 연동 구조 */
.ki-arch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0; align-items: stretch; }
.ki-arch-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 18px 16px; }
.ki-arch-box h3 { font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; text-align: center; }
.ki-arch-box.hw h3 { color: #2563eb; }
.ki-arch-box.sw h3 { color: #16a34a; }
.ki-arch-box.data h3 { color: #d97706; }
.ki-arch-item { background: #f8fafc; border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; font-size: 0.78rem; color: #334155; text-align: center; }
.ki-arch-item:last-child { margin-bottom: 0; }
.ki-arch-arrow { display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #94a3b8; font-size: 0.85rem; font-weight: 700; }
.ki-arch-note { margin-top: 14px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 8px; }
.ki-arch-note strong { font-size: 0.78rem; color: #2563eb; white-space: nowrap; }
.ki-arch-note span { font-size: 0.78rem; color: #334155; }
/* 가격/프로세스 */
.ki-price-wrap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ki-price-card { background: #0f172a; border-radius: 12px; padding: 24px; color: #fff; }
.ki-price-card h3 { font-size: 0.9rem; font-weight: 600; color: #94a3b8; margin-bottom: 14px; }
.ki-price-num { font-size: 2.8rem; font-weight: 700; color: #3b82f6; line-height: 1; }
.ki-price-unit { font-size: 1rem; color: #64748b; margin-left: 4px; }
.ki-price-items { margin-top: 16px; border-top: 1px solid #1e293b; padding-top: 12px; }
.ki-price-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.ki-price-item .dot { width: 6px; height: 6px; border-radius: 50%; background: #3b82f6; margin-top: 6px; flex-shrink: 0; }
.ki-price-item strong { font-size: 0.82rem; color: #e2e8f0; display: block; }
.ki-price-item small { font-size: 0.72rem; color: #64748b; }
.ki-process-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; }
.ki-process-card h3 { font-size: 0.95rem; font-weight: 600; color: #1e293b; margin-bottom: 16px; }
.ki-step { display: flex; gap: 12px; padding: 10px 0; }
.ki-step-num { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.ki-step-body strong { font-size: 0.85rem; color: #1e293b; display: block; }
.ki-step-body small { font-size: 0.75rem; color: #94a3b8; }
.ki-step-line { width: 2px; height: 12px; background: #e2e8f0; margin-left: 13px; }
/* 영업 포인트 */
.ki-points { display: flex; flex-direction: column; gap: 12px; }
.ki-point { background: #0f172a; border-radius: 12px; padding: 18px 20px; display: flex; align-items: flex-start; gap: 16px; }
.ki-point-num { font-size: 1.5rem; font-weight: 700; line-height: 1; flex-shrink: 0; }
.ki-point h4 { font-size: 0.95rem; font-weight: 600; color: #fff; margin-bottom: 4px; }
.ki-point p { font-size: 0.8rem; color: #94a3b8; line-height: 1.5; }
@media (max-width: 768px) {
.ki-select, .ki-why, .ki-info, .ki-price-wrap { grid-template-columns: 1fr; }
.ki-arch { grid-template-columns: 1fr; gap: 8px; }
.ki-arch-arrow { transform: rotate(90deg); padding: 4px 0; }
}
</style>
@endpush
@section('content')
<div class="kiosk-container">
<div class="kiosk-header">
<div class="ki">
{{-- 헤더 --}}
<div class="ki-header">
<h1>키오스크</h1>
<p>용도에 맞는 키오스크 모드를 선택하세요</p>
<p>DNSYS 기둥형 키오스크(KS-SA240) + SAM 웹 브라우저 연동</p>
</div>
<div class="kiosk-cards">
{{-- 쇼룸 키오스크 --}}
<a href="{{ route('additional.kiosk.showroom') }}" class="kiosk-card">
<div class="kiosk-card-icon showroom">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
</svg>
{{-- 키오스크 모드 선택 --}}
<div class="ki-select">
<a href="{{ route('additional.kiosk.showroom') }}">
<div class="ki-sel-icon sr">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>
</div>
<h2>쇼룸 키오스크</h2>
<p>고객이 제품을 탐색하고 견적을 시뮬레이션할 수 있는 쇼룸 전용 화면</p>
<span class="tag showroom">고객용</span>
<p>고객이 제품을 탐색하고 견적을 시뮬레이션하는 쇼룸 전용 화면</p>
<span class="ki-tag sr">고객용</span>
</a>
{{-- 공장 키오스크 --}}
<a href="{{ route('additional.kiosk.factory') }}" class="kiosk-card">
<div class="kiosk-card-icon factory">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<a href="{{ route('additional.kiosk.factory') }}">
<div class="ki-sel-icon fc">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
</div>
<h2>공장 키오스크</h2>
<p>작업자가 생산 현황을 확인하고 작업 지시를 조회하는 공장 전용 화면</p>
<span class="tag factory">작업자용</span>
<span class="ki-tag fc">작업자용</span>
</a>
</div>
{{-- 왜 키오스크인가 --}}
<div class="ki-section">
<div class="ki-section-title">
<div class="bar"></div>
<h2>왜 키오스크인가?</h2>
<span>고객사에 키오스크를 제안해야 하는 이유</span>
</div>
<div class="ki-why">
<div class="ki-why-card showroom">
<span class="ki-why-badge sr">쇼룸 (고객용)</span>
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>고객이 직접 제품을 탐색</strong><small>영업사원 없이도 제품 정보 확인</small></div></div>
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>실시간 견적 시뮬레이션</strong><small>사이즈/옵션별 즉석 가격 확인</small></div></div>
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>상담 효율 극대화</strong><small>사전 탐색 후 구체적 상담 진행</small></div></div>
<div class="ki-why-item"><div class="ki-why-dot sr"></div><div><strong>브랜드 이미지 향상</strong><small>첨단 쇼룸으로 신뢰도 상승</small></div></div>
</div>
<div class="ki-why-card factory">
<span class="ki-why-badge fc">공장 (작업자용)</span>
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>생산 현황 실시간 확인</strong><small>대시보드로 진행률 한눈에 파악</small></div></div>
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>작업 지시서 전자화</strong><small>종이 지시서 제거, 실시간 업데이트</small></div></div>
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>실적 입력 간소화</strong><small>터치 입력으로 현장 데이터 수집</small></div></div>
<div class="ki-why-item"><div class="ki-why-dot fc"></div><div><strong>관리 비용 절감</strong><small>별도 PC 없이 공유 터미널 운영</small></div></div>
</div>
</div>
</div>
{{-- DNSYS 파트너 + 제품 스펙 --}}
<div class="ki-section">
<div class="ki-section-title">
<div class="bar" style="background: #d97706;"></div>
<h2>공급 파트너 및 제품 사양</h2>
<span>DNSYS (디앤시스) KS-SA240 기둥형 24"</span>
</div>
<div class="ki-info">
<div class="ki-info-card">
<h3>DNSYS (디앤시스) 회사 개요</h3>
<div class="ki-info-row"><span class="label">회사명</span><span class="value">(주)디앤시스</span></div>
<div class="ki-info-row"><span class="label">사업분야</span><span class="value">산업용 PC/모니터/키오스크 제조</span></div>
<div class="ki-info-row"><span class="label">소재지</span><span class="value">인천광역시 부평구 새벌로 15</span></div>
<div class="ki-info-row"><span class="label">연락처</span><span class="value">032-512-5480</span></div>
<div class="ki-info-row"><span class="label">제작방식</span><span class="value">BTO (주문맞춤 제작)</span></div>
<div class="ki-strengths">
<span class="ki-str-tag"><span class="dot" style="background:#2563eb;"></span>산업 현장 특화</span>
<span class="ki-str-tag"><span class="dot" style="background:#16a34a;"></span>BTO 맞춤 제작</span>
<span class="ki-str-tag"><span class="dot" style="background:#d97706;"></span>7종+ 라인업</span>
<span class="ki-str-tag"><span class="dot" style="background:#7c3aed;"></span>국내 제조사</span>
</div>
</div>
<div class="ki-info-card">
<h3>KS-SA240 주요 사양</h3>
<div class="ki-info-row"><span class="label">화면 크기</span><span class="value">24인치 (23.6") 터치스크린</span></div>
<div class="ki-info-row"><span class="label">터치 방식</span><span class="value">감압식 / 정전식 / 적외선 선택</span></div>
<div class="ki-info-row"><span class="label">외형 치수</span><span class="value">W350 x D350 x H1048 mm</span></div>
<div class="ki-info-row"><span class="label">마운트</span><span class="value">VESA 규격 홀 (범용 호환)</span></div>
<div class="ki-info-row"><span class="label">CPU</span><span class="value">4~12세대 셀러론 / 코어 i5</span></div>
<div class="ki-info-row"><span class="label">재질/마감</span><span class="value">스틸 함체, 분체 도장</span></div>
<div class="ki-info-row"><span class="label">이동성</span><span class="value">레벨링 캐스터 (이동+고정)</span></div>
<div class="ki-info-row"><span class="label">부가장비</span><span class="value">핸디 스캐너 걸이 (탈부착)</span></div>
</div>
</div>
</div>
{{-- SAM 연동 구조 --}}
<div class="ki-section">
<div class="ki-section-title">
<div class="bar" style="background: #16a34a;"></div>
<h2>SAM 연동 구조</h2>
<span>키오스크 HW + SAM 웹 브라우저 기반 연동</span>
</div>
<div class="ki-arch">
<div class="ki-arch-box hw">
<h3>키오스크 HW</h3>
<div class="ki-arch-item">DNSYS KS-SA240</div>
<div class="ki-arch-item">24" 터치스크린</div>
<div class="ki-arch-item">Windows PC 내장</div>
<div class="ki-arch-item">웹 브라우저 (전체화면)</div>
</div>
<div class="ki-arch-arrow">HTTPS &rarr;</div>
<div class="ki-arch-box sw">
<h3>SAM 서버</h3>
<div class="ki-arch-item">키오스크 전용 URL</div>
<div class="ki-arch-item">제품 카탈로그 API</div>
<div class="ki-arch-item">견적 계산 엔진</div>
<div class="ki-arch-item">생산 현황 대시보드</div>
</div>
<div class="ki-arch-arrow">DB &rarr;</div>
<div class="ki-arch-box data">
<h3>기존 SAM 데이터</h3>
<div class="ki-arch-item">제품 마스터</div>
<div class="ki-arch-item">가격 정책</div>
<div class="ki-arch-item">BOM 데이터</div>
<div class="ki-arch-item">생산 실적</div>
</div>
</div>
<div class="ki-arch-note">
<strong>Point</strong>
<span>별도 앱 설치 불필요 &middot; 웹 브라우저 전체화면 모드 &middot; SAM 기존 데이터 100% 활용 &middot; 추가 개발 최소화</span>
</div>
</div>
{{-- 가격 및 도입 프로세스 --}}
<div class="ki-section">
<div class="ki-section-title">
<div class="bar" style="background: #7c3aed;"></div>
<h2>가격 및 도입 조건</h2>
<span>키오스크 HW 공급 + SAM SW 연동</span>
</div>
<div class="ki-price-wrap">
<div class="ki-price-card">
<h3>공급 가격 (예상)</h3>
<div><span class="ki-price-num">200</span><span class="ki-price-unit">만원대 / 대</span></div>
<div class="ki-price-items">
<div class="ki-price-item"><div class="dot"></div><div><strong>키오스크 함체 (KS-SA240)</strong><small>DNSYS 기둥형 24"</small></div></div>
<div class="ki-price-item"><div class="dot"></div><div><strong>패널 PC + 터치모니터</strong><small>CPU/RAM/SSD 내장</small></div></div>
<div class="ki-price-item"><div class="dot"></div><div><strong>SAM 키오스크 SW 연동</strong><small>설정 및 초기 세팅 포함</small></div></div>
</div>
</div>
<div class="ki-process-card">
<h3>도입 프로세스</h3>
<div class="ki-step"><div class="ki-step-num" style="background:#2563eb;">1</div><div class="ki-step-body"><strong>고객 상담 & 현장 확인</strong><small>설치 위치, 용도(쇼룸/공장) 확인</small></div></div>
<div class="ki-step-line"></div>
<div class="ki-step"><div class="ki-step-num" style="background:#d97706;">2</div><div class="ki-step-body"><strong>DNSYS 사양 확정</strong><small>터치방식, CPU, 옵션 결정</small></div></div>
<div class="ki-step-line"></div>
<div class="ki-step"><div class="ki-step-num" style="background:#16a34a;">3</div><div class="ki-step-body"><strong>SAM 키오스크 설정</strong><small>URL 설정, 표시 항목 커스터마이징</small></div></div>
<div class="ki-step-line"></div>
<div class="ki-step"><div class="ki-step-num" style="background:#7c3aed;">4</div><div class="ki-step-body"><strong>납품 & 설치</strong><small>현장 설치, 네트워크 연결, 동작 확인</small></div></div>
</div>
</div>
</div>
{{-- 영업 포인트 --}}
<div class="ki-section">
<div class="ki-section-title">
<div class="bar" style="background: #dc2626;"></div>
<h2>영업 포인트</h2>
<span>고객에게 제안할 때 강조할 핵심 가치</span>
</div>
<div class="ki-points">
<div class="ki-point">
<div class="ki-point-num" style="color: #3b82f6;">01</div>
<div><h4>추가 비용 없이 기존 시스템 활용</h4><p>SAM에 이미 구축된 제품 카탈로그, 견적 엔진, 생산 대시보드를 그대로 키오스크에 표시합니다. 별도 소프트웨어 개발이 필요없습니다.</p></div>
</div>
<div class="ki-point">
<div class="ki-point-num" style="color: #16a34a;">02</div>
<div><h4>웹 브라우저 기반 = 유지보수 간편</h4><p>전용 앱이 아닌 웹 브라우저로 동작하므로, SAM이 업데이트되면 키오스크 화면도 자동으로 반영됩니다. 별도 배포 작업이 없습니다.</p></div>
</div>
<div class="ki-point">
<div class="ki-point-num" style="color: #d97706;">03</div>
<div><h4>산업용 키오스크 = 안정적 내구성</h4><p>DNSYS는 반도체/공장 환경에 납품하는 전문 제조사입니다. 분진, 충격에 강한 산업용 설계로 쇼룸과 공장 모두 안심 운영.</p></div>
</div>
</div>
</div>
</div>
@endsection

297
resources/views/additional/kiosk/showroom.blade.php
View File

@@ -4,177 +4,184 @@
@push('styles')
<style>
.showroom-container {
max-width: 1200px;
margin: 0 auto;
padding: 32px 20px;
}
.showroom-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
}
.showroom-header h1 {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
}
.showroom-header .back-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #64748b;
text-decoration: none;
font-size: 0.875rem;
transition: color 0.15s;
}
.showroom-header .back-link:hover {
color: #2563eb;
}
.showroom-sections {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.showroom-section {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 24px;
}
.showroom-section h2 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 8px;
}
.showroom-section h2 .icon {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.showroom-section h2 .icon svg {
width: 14px;
height: 14px;
}
.showroom-section p {
color: #94a3b8;
font-size: 0.85rem;
margin-bottom: 16px;
}
.showroom-placeholder {
background: #f8fafc;
border: 2px dashed #e2e8f0;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
color: #94a3b8;
font-size: 0.85rem;
}
.showroom-section.catalog h2 .icon { background: #dbeafe; color: #2563eb; }
.showroom-section.quote h2 .icon { background: #fef3c7; color: #d97706; }
.showroom-section.gallery h2 .icon { background: #ede9fe; color: #7c3aed; }
.showroom-section.info h2 .icon { background: #dcfce7; color: #16a34a; }
.sr { max-width: 1100px; margin: 0 auto; padding: 32px 20px 48px; }
.sr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.sr-header h1 { font-size: 1.5rem; font-weight: 700; color: #1e293b; }
.sr-header .back-link { display: inline-flex; align-items: center; gap: 6px; color: #64748b; text-decoration: none; font-size: 0.85rem; transition: color 0.15s; }
.sr-header .back-link:hover { color: #2563eb; }
/* 시나리오 흐름 */
.sr-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
.sr-flow-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px 16px; text-align: center; position: relative; }
.sr-flow-num { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; }
.sr-flow-card h3 { font-size: 1rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
.sr-flow-card p { font-size: 0.8rem; color: #64748b; line-height: 1.5; }
.sr-flow-arrow { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); color: #cbd5e1; font-size: 1.1rem; font-weight: 700; z-index: 1; }
/* SAM 자산 바 */
.sr-assets { background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px; padding: 14px 20px; margin-bottom: 32px; }
.sr-assets-title { font-size: 0.82rem; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.sr-assets-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-asset-tag { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.75rem; font-weight: 500; background: #fff; border: 1px solid #dbeafe; }
.sr-asset-tag.blue { color: #1d4ed8; }
.sr-asset-tag.purple { color: #7c3aed; }
.sr-asset-tag.orange { color: #d97706; }
/* 기능 섹션 */
.sr-section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.sr-section-title .bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.sr-section-title h2 { font-size: 1.1rem; font-weight: 700; color: #1e293b; }
.sr-sections { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sr-sec { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 22px; }
.sr-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.sr-sec-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-sec-icon svg { width: 15px; height: 15px; }
.sr-sec h3 { font-size: 1rem; font-weight: 600; color: #1e293b; }
.sr-sec > p { color: #94a3b8; font-size: 0.8rem; margin-bottom: 14px; }
.sr-sec-detail { background: #f8fafc; border-radius: 8px; padding: 14px 16px; }
.sr-sec-detail li { font-size: 0.8rem; color: #334155; padding: 4px 0; list-style: none; display: flex; align-items: flex-start; gap: 8px; }
.sr-sec-detail li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.sr-sec.catalog li::before { background: #2563eb; }
.sr-sec.quote li::before { background: #d97706; }
.sr-sec.gallery li::before { background: #7c3aed; }
.sr-sec.info li::before { background: #16a34a; }
.sr-placeholder { background: #f8fafc; border: 2px dashed #e2e8f0; border-radius: 8px; padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 0.82rem; margin-top: 12px; }
@media (max-width: 768px) {
.showroom-sections {
grid-template-columns: 1fr;
}
.sr-flow { grid-template-columns: repeat(2, 1fr); }
.sr-flow-arrow { display: none; }
.sr-sections { grid-template-columns: 1fr; }
}
</style>
@endpush
@section('content')
<div class="showroom-container">
<div class="showroom-header">
<div class="sr">
<div class="sr-header">
<h1>쇼룸 키오스크</h1>
<a href="{{ route('additional.kiosk.index') }}" class="back-link">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
키오스크 메인으로
</a>
</div>
<div class="showroom-sections">
{{-- 제품 카탈로그 --}}
<div class="showroom-section catalog">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
</svg>
</span>
제품 카탈로그
</h2>
{{-- 활용 시나리오 흐름 --}}
<div class="sr-flow">
<div class="sr-flow-card">
<div class="sr-flow-num" style="background:#2563eb;">1</div>
<h3>제품 탐색</h3>
<p>블라인드/스크린 등 카테고리별 제품 탐색</p>
<span class="sr-flow-arrow">&rsaquo;</span>
</div>
<div class="sr-flow-card">
<div class="sr-flow-num" style="background:#7c3aed;">2</div>
<h3>옵션 선택</h3>
<p>사이즈, 색상, 소재 원하는 옵션 선택</p>
<span class="sr-flow-arrow">&rsaquo;</span>
</div>
<div class="sr-flow-card">
<div class="sr-flow-num" style="background:#d97706;">3</div>
<h3>견적 확인</h3>
<p>실시간 가격 계산 면적/중량 기반 견적</p>
<span class="sr-flow-arrow">&rsaquo;</span>
</div>
<div class="sr-flow-card">
<div class="sr-flow-num" style="background:#16a34a;">4</div>
<h3>저장/상담</h3>
<p>QR로 견적 저장 또는 영업사원 호출</p>
</div>
</div>
{{-- SAM 기존 자산 활용 --}}
<div class="sr-assets">
<div class="sr-assets-title">SAM 기존 자산 활용</div>
<div class="sr-assets-tags">
<span class="sr-asset-tag blue">items / products 테이블</span>
<span class="sr-asset-tag purple">FormulaEvaluatorService (BOM 10단계)</span>
<span class="sr-asset-tag orange">prices 테이블 (면적/중량/수량 기반)</span>
</div>
</div>
{{-- 기능 섹션 --}}
<div class="sr-section-title">
<div class="bar" style="background:#2563eb;"></div>
<h2>기능 구성</h2>
</div>
<div class="sr-sections">
<div class="sr-sec catalog">
<div class="sr-sec-head">
<div class="sr-sec-icon" style="background:#dbeafe; color:#2563eb;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
</div>
<h3>제품 카탈로그</h3>
</div>
<p>블라인드, 스크린 등 제품 목록을 탐색합니다</p>
<div class="showroom-placeholder">
제품 카탈로그 영역<br>
<small>items, products 테이블 연동 예정</small>
<div class="sr-sec-detail">
<ul>
<li>카테고리별 제품 목록 (블라인드, 롤스크린, 셔터 등)</li>
<li>제품 이미지 및 상세 사양 표시</li>
<li>색상/소재 옵션 미리보기</li>
<li>터치 기반 직관적 탐색 UI</li>
</ul>
</div>
<div class="sr-placeholder">제품 카탈로그 영역 &middot; items, products 테이블 연동 예정</div>
</div>
{{-- 견적 시뮬레이션 --}}
<div class="showroom-section quote">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</span>
견적 시뮬레이션
</h2>
<div class="sr-sec quote">
<div class="sr-sec-head">
<div class="sr-sec-icon" style="background:#fef3c7; color:#d97706;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
</div>
<h3>견적 시뮬레이션</h3>
</div>
<p>사이즈와 옵션을 선택하여 실시간 견적을 확인합니다</p>
<div class="showroom-placeholder">
견적 시뮬레이션 영역<br>
<small>BOM 10단계, FormulaEvaluatorService 연동 예정</small>
<div class="sr-sec-detail">
<ul>
<li>가로/세로 사이즈 입력 (면적 기반 자동 계산)</li>
<li>옵션별 가격 변동 실시간 반영</li>
<li>BOM 10단계 견적 엔진 (FormulaEvaluatorService)</li>
<li>견적서 QR 코드 생성 (모바일 저장용)</li>
</ul>
</div>
<div class="sr-placeholder">견적 시뮬레이션 영역 &middot; BOM 10단계 연동 예정</div>
</div>
{{-- 시공 갤러리 --}}
<div class="showroom-section gallery">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</span>
시공 갤러리
</h2>
<div class="sr-sec gallery">
<div class="sr-sec-head">
<div class="sr-sec-icon" style="background:#ede9fe; color:#7c3aed;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
</div>
<h3>시공 갤러리</h3>
</div>
<p>실제 시공 사례 이미지를 통해 완성 이미지를 확인합니다</p>
<div class="showroom-placeholder">
시공 갤러리 영역<br>
<small>시공 사례 이미지 표시 예정</small>
<div class="sr-sec-detail">
<ul>
<li>제품 유형별 시공 사례 사진</li>
<li>공간 유형별 필터 (주거, 상업, 사무실)</li>
<li>Before/After 비교 뷰</li>
<li>고객 후기 및 만족도 표시</li>
</ul>
</div>
<div class="sr-placeholder">시공 갤러리 영역 &middot; 시공 사례 이미지 표시 예정</div>
</div>
{{-- 회사 소개 --}}
<div class="showroom-section info">
<h2>
<span class="icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</span>
회사 소개
</h2>
<p>회사 정보 및 연락처를 안내합니다</p>
<div class="showroom-placeholder">
회사 소개 영역<br>
<small>회사 정보 표시 예정</small>
<div class="sr-sec info">
<div class="sr-sec-head">
<div class="sr-sec-icon" style="background:#dcfce7; color:#16a34a;">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
<h3>회사 소개</h3>
</div>
<p>회사 정보 및 연락처를 안내합니다</p>
<div class="sr-sec-detail">
<ul>
<li>회사 소개 및 브랜드 스토리</li>
<li>주요 제품 라인업 소개</li>
<li>쇼룸 위치 및 운영시간 안내</li>
<li>영업사원 호출 / 상담 예약 버튼</li>
</ul>
</div>
<div class="sr-placeholder">회사 소개 영역 &middot; 회사 정보 표시 예정</div>
</div>
</div>
</div>