a67e0dc019
- index: 왜 키오스크인가, DNSYS 파트너/스펙, SAM 연동 구조, 가격/도입조건, 영업포인트 추가 - showroom: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가 - factory: 4단계 활용 시나리오, SAM 자산 활용 태그, 기능별 상세 설명 추가
189 lines
11 KiB
PHP
189 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '쇼룸 키오스크')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.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) {
|
|
.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="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>
|
|
키오스크 메인으로
|
|
</a>
|
|
</div>
|
|
|
|
{{-- 활용 시나리오 흐름 --}}
|
|
<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">›</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">›</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">›</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="sr-sec-detail">
|
|
<ul>
|
|
<li>카테고리별 제품 목록 (블라인드, 롤스크린, 셔터 등)</li>
|
|
<li>제품 이미지 및 상세 사양 표시</li>
|
|
<li>색상/소재 옵션 미리보기</li>
|
|
<li>터치 기반 직관적 탐색 UI</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sr-placeholder">제품 카탈로그 영역 · items, products 테이블 연동 예정</div>
|
|
</div>
|
|
|
|
<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="sr-sec-detail">
|
|
<ul>
|
|
<li>가로/세로 사이즈 입력 (면적 기반 자동 계산)</li>
|
|
<li>옵션별 가격 변동 실시간 반영</li>
|
|
<li>BOM 10단계 견적 엔진 (FormulaEvaluatorService)</li>
|
|
<li>견적서 QR 코드 생성 (모바일 저장용)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sr-placeholder">견적 시뮬레이션 영역 · BOM 10단계 연동 예정</div>
|
|
</div>
|
|
|
|
<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="sr-sec-detail">
|
|
<ul>
|
|
<li>제품 유형별 시공 사례 사진</li>
|
|
<li>공간 유형별 필터 (주거, 상업, 사무실)</li>
|
|
<li>Before/After 비교 뷰</li>
|
|
<li>고객 후기 및 만족도 표시</li>
|
|
</ul>
|
|
</div>
|
|
<div class="sr-placeholder">시공 갤러리 영역 · 시공 사례 이미지 표시 예정</div>
|
|
</div>
|
|
|
|
<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">회사 소개 영역 · 회사 정보 표시 예정</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|