SamProject/sam-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
develop
sam-manage/resources/views/claude-code/usage-plan/index.blade.php

449 lines
33 KiB
PHP
Raw Permalink Normal View History

feat: [claude-code] SAM 활용방안 페이지 추가 - 컨트롤러, 뷰, 라우트 생성 - 7개 섹션: 핵심요약, Before/After, 프로세스플로우, 80%공통화론, 멀티테넌시, AI자동화, 로드맵 - HX-Redirect 패턴 적용
2026-03-02 12:32:47 +09:00
@extends('layouts.app')
@section('title', 'SAM 활용방안')
@push('styles')
<style>
.up-card { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
.up-card-header { padding: 16px 20px; border-bottom: 1px solid #f1f5f9; }
.up-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; }
.up-badge-blue { background: #dbeafe; color: #1d4ed8; }
.up-badge-green { background: #dcfce7; color: #166534; }
.up-badge-purple { background: #f3e8ff; color: #7c3aed; }
.up-badge-amber { background: #fef3c7; color: #92400e; }
.up-badge-red { background: #fee2e2; color: #991b1b; }
.up-badge-indigo { background: #e0e7ff; color: #3730a3; }
.up-badge-gray { background: #f1f5f9; color: #475569; }
.up-icon-circle { display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; }
.up-step-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; }
.up-step-item { flex: 1; min-width: 130px; text-align: center; position: relative; padding: 16px 8px; }
.up-step-item:not(:last-child)::after { content: ''; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 10px solid #6366f1; z-index: 1; }
.up-step-num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #6366f1; color: #fff; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.up-bar { height: 28px; border-radius: 6px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; font-weight: 600; color: #fff; transition: width 0.8s ease; }
.up-bar-green { background: linear-gradient(90deg, #059669, #10b981); }
.up-bar-amber { background: linear-gradient(90deg, #d97706, #f59e0b); }
.up-timeline { position: relative; padding-left: 32px; }
.up-timeline::before { content: ''; position: absolute; left: 13px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
.up-timeline-item { position: relative; padding-bottom: 24px; }
.up-timeline-item:last-child { padding-bottom: 0; }
.up-timeline-dot { position: absolute; left: -25px; top: 4px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; }
.up-quote { border-left: 3px solid #6366f1; padding: 12px 16px; background: #f5f3ff; border-radius: 0 8px 8px 0; font-style: italic; }
</style>
@endpush
@section('content')
<div class="space-y-6">
{{-- 페이지 헤더 --}}
<div class="flex items-center justify-between">
<div>
<h1 class="text-2xl font-bold text-gray-900">SAM 활용방안</h1>
<p class="mt-1 text-sm text-gray-500">AI 자동화로 중소 제조업을 혁신하다 | (주)코드브릿지엑스의 비전</p>
</div>
feat: [claude-code] 활용방안 PPTX 다운로드 기능 추가 - UsagePlanController에 download 메서드 추가 - 라우트에 /usage-plan/download 추가 - 뷰 헤더에 PPTX 다운로드 버튼 추가 - 7장 슬라이드 PPTX 파일 배치
2026-03-02 13:24:43 +09:00
<div class="flex items-center gap-3">
feat: [claude-code] SAM 활용방안 페이지 추가 - 컨트롤러, 뷰, 라우트 생성 - 7개 섹션: 핵심요약, Before/After, 프로세스플로우, 80%공통화론, 멀티테넌시, AI자동화, 로드맵 - HX-Redirect 패턴 적용
2026-03-02 12:32:47 +09:00
<span class="text-xs text-gray-400">CodeBridgeX | 2026.03</span>
feat: [claude-code] 활용방안 PPTX 다운로드 기능 추가 - UsagePlanController에 download 메서드 추가 - 라우트에 /usage-plan/download 추가 - 뷰 헤더에 PPTX 다운로드 버튼 추가 - 7장 슬라이드 PPTX 파일 배치
2026-03-02 13:24:43 +09:00
<a href="{{ route('claude-code.usage-plan.download') }}"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors"
title="PPTX 다운로드">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
PPTX
</a>
feat: [claude-code] SAM 활용방안 페이지 추가 - 컨트롤러, 뷰, 라우트 생성 - 7개 섹션: 핵심요약, Before/After, 프로세스플로우, 80%공통화론, 멀티테넌시, AI자동화, 로드맵 - HX-Redirect 패턴 적용
2026-03-02 12:32:47 +09:00
</div>
</div>
{{-- ─── 핵심 요약 3카드 ─── --}}
<div class="flex gap-4" style="flex-wrap: wrap;">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 340px;">
<div class="flex items-center gap-2 text-sm text-gray-500">
<svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
코어 모델
</div>
<div class="text-lg font-bold text-gray-900 mt-1">방화셔터 제조업</div>
<div class="text-sm text-gray-500 mt-0.5">경동/주일 실증 완료 기반</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 340px;">
<div class="flex items-center gap-2 text-sm text-gray-500">
<svg class="w-4 h-4 text-emerald-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
확장 전략
</div>
<div class="text-lg font-bold text-emerald-600 mt-1">80% 공통 + 상품만 변경</div>
<div class="text-sm text-gray-500 mt-0.5">중소 제조업 공통 프로세스 활용</div>
</div>
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5" style="flex: 1 1 220px; max-width: 340px;">
<div class="flex items-center gap-2 text-sm text-gray-500">
<svg class="w-4 h-4 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
최종 목표
</div>
<div class="text-lg font-bold text-gray-900 mt-1">Multi-tenant SaaS</div>
<div class="text-sm text-gray-500 mt-0.5">다산업군 제조업 플랫폼</div>
</div>
</div>
{{-- ─── Section 2: 왜 SAM인가? (Before / After) ─── --}}
<div class="up-card">
<div class="up-card-header">
<h2 class="text-base font-semibold text-gray-800">왜 SAM인가? &mdash; Before / After</h2>
<p class="text-xs text-gray-400 mt-0.5">중소 제조업의 현실과 SAM이 제시하는 변화</p>
</div>
<div class="p-5">
<div class="flex gap-4" style="flex-wrap: wrap;">
{{-- Before --}}
<div class="p-4 rounded-lg border border-red-200 bg-red-50" style="flex: 1 1 300px;">
<div class="flex items-center gap-2 mb-3">
<div class="up-icon-circle" style="width: 28px; height: 28px; background: #dc2626;">
<svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
</div>
<span class="font-bold text-red-800 text-sm">Before &mdash; 기존 방식</span>
</div>
<div class="space-y-2 text-sm">
<div class="flex items-start gap-2"><span class="text-red-400 mt-0.5">&#9654;</span> <span class="text-gray-700">Excel 수기 관리 &mdash; 데이터 유실, 버전 혼란</span></div>
<div class="flex items-start gap-2"><span class="text-red-400 mt-0.5">&#9654;</span> <span class="text-gray-700">ERP 도입비 수천만원 &mdash; 중소기업에 부담</span></div>
<div class="flex items-start gap-2"><span class="text-red-400 mt-0.5">&#9654;</span> <span class="text-gray-700">업체별 커스텀 6개월+ &mdash; 도입까지 긴 시간</span></div>
<div class="flex items-start gap-2"><span class="text-red-400 mt-0.5">&#9654;</span> <span class="text-gray-700">부서간 정보 단절 &mdash; 영업/생산/경영 각자 관리</span></div>
</div>
</div>
{{-- After --}}
<div class="p-4 rounded-lg border border-emerald-200 bg-emerald-50" style="flex: 1 1 300px;">
<div class="flex items-center gap-2 mb-3">
<div class="up-icon-circle" style="width: 28px; height: 28px; background: #059669;">
<svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
</div>
<span class="font-bold text-emerald-800 text-sm">After &mdash; SAM 도입 후</span>
</div>
<div class="space-y-2 text-sm">
<div class="flex items-start gap-2"><span class="text-emerald-500 mt-0.5">&#9654;</span> <span class="text-gray-700">시스템 기반 통합 관리 &mdash; 실시간 데이터 공유</span></div>
<div class="flex items-start gap-2"><span class="text-emerald-500 mt-0.5">&#9654;</span> <span class="text-gray-700">월 구독 SaaS &mdash; 초기 비용 최소화</span></div>
<div class="flex items-start gap-2"><span class="text-emerald-500 mt-0.5">&#9654;</span> <span class="text-gray-700">멀티테넌시 즉시 입주 &mdash; 설정만으로 바로 사용</span></div>
<div class="flex items-start gap-2"><span class="text-emerald-500 mt-0.5">&#9654;</span> <span class="text-gray-700">영업~출고 원스톱 자동화 &mdash; AI가 연결</span></div>
</div>
</div>
</div>
</div>
</div>
{{-- ─── Section 3: 전체 프로세스 플로우 ─── --}}
<div class="up-card">
<div class="up-card-header">
<h2 class="text-base font-semibold text-gray-800">전체 프로세스 &mdash; 영업에서 출고까지</h2>
<p class="text-xs text-gray-400 mt-0.5">6단계 비즈니스 플로우와 AI 자동화 포인트</p>
</div>
<div class="p-5">
{{-- 6단계 스텝 --}}
<div class="up-step-flow" style="margin-bottom: 20px;">
@php
$steps = [
['num' => 1, 'title' => '영업', 'ai' => '고객 DB 자동분류', 'color' => '#6366f1'],
['num' => 2, 'title' => '상담', 'ai' => 'STT 음성 기록', 'color' => '#8b5cf6'],
['num' => 3, 'title' => '견적서', 'ai' => 'AI 자동 산출', 'color' => '#a855f7'],
['num' => 4, 'title' => '수주서', 'ai' => '견적→수주 자동 전환', 'color' => '#0ea5e9'],
['num' => 5, 'title' => '작업공정', 'ai' => 'AI 공정 최적화', 'color' => '#059669'],
['num' => 6, 'title' => '출고', 'ai' => '출고/배송 자동화', 'color' => '#16a34a'],
];
@endphp
@foreach($steps as $step)
<div class="up-step-item">
<div class="up-step-num" style="background: {{ $step['color'] }};">{{ $step['num'] }}</div>
<div class="font-semibold text-gray-800 text-sm">{{ $step['title'] }}</div>
<div class="text-xs text-gray-500 mt-1">{{ $step['ai'] }}</div>
</div>
@endforeach
</div>
{{-- 실증 사례 테이블 --}}
<div class="mt-4">
<div class="text-sm font-medium text-gray-700 mb-2">경동/주일 실증 현황</div>
<table class="w-full text-sm">
<thead>
<tr class="border-b-2 border-gray-200">
<th class="text-left py-2 px-3 text-gray-600 font-medium" style="width: 20%;">단계</th>
<th class="text-left py-2 px-3 text-gray-600 font-medium" style="width: 25%;">구현 기능</th>
<th class="text-center py-2 px-3 text-gray-600 font-medium" style="width: 15%;">상태</th>
<th class="text-left py-2 px-3 text-gray-600 font-medium">AI 적용</th>
</tr>
</thead>
<tbody>
@php
$cases = [
['step' => '영업관리', 'feat' => '고객/거래처 CRM', 'status' => '운영중', 'ai' => '고객 분류 자동화'],
['step' => '상담/문의', 'feat' => '상담 이력, 음성 입력', 'status' => '운영중', 'ai' => 'STT 음성→텍스트 변환'],
['step' => '견적서', 'feat' => '견적 작성/승인/발송', 'status' => '운영중', 'ai' => 'AI 견적 자동 산출 (개발중)'],
['step' => '수주서', 'feat' => '견적→수주 연동', 'status' => '운영중', 'ai' => '자동 전환 프로세스'],
['step' => '작업공정', 'feat' => 'BOM, 공정 관리', 'status' => '개발중', 'ai' => 'AI 공정 최적화 (계획)'],
['step' => '출고/배송', 'feat' => '출고 지시, 배송 추적', 'status' => '계획', 'ai' => '물류 자동화 (계획)'],
];
@endphp
@foreach($cases as $case)
<tr class="border-b border-gray-100 hover:bg-gray-50">
<td class="py-2.5 px-3 font-medium text-gray-800">{{ $case['step'] }}</td>
<td class="py-2.5 px-3 text-gray-600">{{ $case['feat'] }}</td>
<td class="py-2.5 px-3 text-center">
@if($case['status'] === '운영중')
<span class="up-badge up-badge-green">{{ $case['status'] }}</span>
@elseif($case['status'] === '개발중')
<span class="up-badge up-badge-blue">{{ $case['status'] }}</span>
@else
<span class="up-badge up-badge-gray">{{ $case['status'] }}</span>
@endif
</td>
<td class="py-2.5 px-3 text-gray-500 text-xs">{{ $case['ai'] }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
{{-- ─── Section 4: 80% 공통화론 ─── --}}
<div class="up-card">
<div class="up-card-header">
<h2 class="text-base font-semibold text-gray-800">80% 공통화론 &mdash; 핵심 설득 논거</h2>
<p class="text-xs text-gray-400 mt-0.5">중소 제조업 업무의 80%는 업종과 무관하게 동일하다</p>
</div>
<div class="p-5">
{{-- 가로 바 차트 --}}
<div class="mb-5">
<div class="text-sm font-medium text-gray-700 mb-3">업무 구성 비율</div>
<div class="flex items-center gap-3 mb-2">
<div class="shrink-0 text-xs text-gray-500 text-right" style="width: 70px;">공통 업무</div>
<div style="flex: 1;">
<div class="up-bar up-bar-green" style="width: 80%;">80% &mdash; 영업, 회계, 인사, 재고, 문서</div>
</div>
</div>
<div class="flex items-center gap-3">
<div class="shrink-0 text-xs text-gray-500 text-right" style="width: 70px;">커스텀</div>
<div style="flex: 1;">
<div class="up-bar up-bar-amber" style="width: 20%;">20%</div>
</div>
</div>
<div class="text-xs text-gray-400 mt-2">커스텀 20% = 상품 마스터, 견적 계산식, 공정 시퀀스 (업종마다 다른 부분)</div>
</div>
{{-- 공통 업무 상세 --}}
<div class="flex gap-3 mb-5" style="flex-wrap: wrap;">
@php
$commons = [
['name' => '영업/CRM', 'icon' => 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z'],
['name' => '회계/재무', 'icon' => 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
['name' => '인사/근태', 'icon' => 'M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'],
['name' => '재고관리', 'icon' => 'M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4'],
['name' => '문서/전자결재', 'icon' => 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
['name' => '품질관리', 'icon' => 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'],
];
@endphp
@foreach($commons as $common)
<div class="flex items-center gap-2 bg-emerald-50 border border-emerald-200 rounded-lg px-3 py-2" style="flex: 0 0 auto;">
<svg class="w-4 h-4 text-emerald-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $common['icon'] }}"/></svg>
<span class="text-sm font-medium text-emerald-800">{{ $common['name'] }}</span>
</div>
@endforeach
</div>
{{-- 업종별 확장 시나리오 --}}
<div class="mb-4">
<div class="text-sm font-medium text-gray-700 mb-2">업종별 확장 시나리오</div>
<table class="w-full text-sm">
<thead>
<tr class="border-b-2 border-gray-200">
<th class="text-left py-2 px-3 text-gray-600 font-medium" style="width: 18%;">업종</th>
<th class="text-left py-2 px-3 text-gray-600 font-medium" style="width: 30%;">공통 (80%)</th>
<th class="text-left py-2 px-3 text-gray-600 font-medium" style="width: 30%;">커스텀 (20%)</th>
<th class="text-center py-2 px-3 text-gray-600 font-medium">난이도</th>
</tr>
</thead>
<tbody>
@php
$industries = [
['name' => '방화셔터', 'common' => '영업, 견적, 수주, 회계, 인사', 'custom' => '셔터 규격 계산, 설치 공정', 'diff' => '실증완료', 'color' => 'green'],
['name' => '블라인드', 'common' => '영업, 견적, 수주, 회계, 인사', 'custom' => '원단/슬랫 규격, 재단 공정', 'diff' => '즉시가능', 'color' => 'green'],
['name' => '금속가공', 'common' => '영업, 견적, 수주, 회계, 인사', 'custom' => '소재/두께 단가표, CNC 공정', 'diff' => '단기적용', 'color' => 'blue'],
['name' => '식품제조', 'common' => '영업, 견적, 수주, 회계, 인사', 'custom' => '레시피 관리, HACCP, 유통기한', 'diff' => '중기적용', 'color' => 'amber'],
['name' => '전자부품', 'common' => '영업, 견적, 수주, 회계, 인사', 'custom' => 'PCB BOM, SMT 공정, 검사', 'diff' => '중기적용', 'color' => 'amber'],
];
@endphp
@foreach($industries as $ind)
<tr class="border-b border-gray-100 hover:bg-gray-50">
<td class="py-2.5 px-3 font-medium text-gray-800">{{ $ind['name'] }}</td>
<td class="py-2.5 px-3 text-gray-600">{{ $ind['common'] }}</td>
<td class="py-2.5 px-3 text-gray-600">{{ $ind['custom'] }}</td>
<td class="py-2.5 px-3 text-center">
<span class="up-badge up-badge-{{ $ind['color'] }}">{{ $ind['diff'] }}</span>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="up-quote">
<span class="text-sm text-indigo-800">"상품만 바꾸면 새로운 제조업이 된다. 영업, 회계, 인사, 재고 &mdash; 이 80%는 이미 완성되어 있다."</span>
</div>
</div>
</div>
{{-- ─── Section 5: 멀티테넌시 구조 ─── --}}
<div class="up-card">
<div class="up-card-header">
<h2 class="text-base font-semibold text-gray-800">멀티테넌시 &mdash; 하나의 플랫폼, 다수의 기업</h2>
<p class="text-xs text-gray-400 mt-0.5">tenant_id 기반 데이터 격리로 안전하게 다수 기업을 서비스</p>
</div>
<div class="p-5">
{{-- 다이어그램 --}}
<div class="p-4 bg-gray-50 border border-gray-200 rounded-lg mb-5" style="overflow-x: auto;">
<pre class="text-xs text-gray-700 leading-relaxed" style="font-family: 'Courier New', monospace; white-space: pre;">
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ A 기업 │ │ B 기업 │ │ C 기업 │ │ D 기업 │
│ (경동기업) │ │ (주일기업) │ │ (금속가공) │ │ (식품제조) │
└────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │ │
└─────────────┴──────┬──────┴─────────────┘
│
┌─────────▼─────────┐
│ SAM 플랫폼 │
│ │
│ 공유: 코드 100% │
│ 격리: 데이터 100% │
│ (tenant_id 기반) │
└───────────────────┘</pre>
</div>
{{-- 3카드 --}}
<div class="flex gap-4" style="flex-wrap: wrap;">
<div class="p-4 bg-emerald-50 border border-emerald-200 rounded-lg" style="flex: 1 1 200px;">
<div class="flex items-center gap-2 mb-2">
<div class="up-icon-circle" style="width: 28px; height: 28px; background: #059669;">
<svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<span class="font-semibold text-emerald-800 text-sm">비용 절감</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">하나의 코드베이스로 N개 기업 서비스. 기업이 늘어도 개발비는 동일.</p>
</div>
<div class="p-4 bg-blue-50 border border-blue-200 rounded-lg" style="flex: 1 1 200px;">
<div class="flex items-center gap-2 mb-2">
<div class="up-icon-circle" style="width: 28px; height: 28px; background: #2563eb;">
<svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
</div>
<span class="font-semibold text-blue-800 text-sm">즉시 입주</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">새 기업 추가 = tenant_id 발급 + 기본 설정. 별도 개발 없이 수일 내 사용 가능.</p>
</div>
<div class="p-4 bg-purple-50 border border-purple-200 rounded-lg" style="flex: 1 1 200px;">
<div class="flex items-center gap-2 mb-2">
<div class="up-icon-circle" style="width: 28px; height: 28px; background: #7c3aed;">
<svg class="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
<span class="font-semibold text-purple-800 text-sm">데이터 격리</span>
</div>
<p class="text-xs text-gray-600 leading-relaxed">모든 쿼리에 tenant_id 자동 적용. A기업이 B기업 데이터에 절대 접근 불가.</p>
</div>
</div>
</div>
</div>
{{-- ─── Section 6: AI 자동화 현황 & 로드맵 ─── --}}
<div class="up-card">
<div class="up-card-header">
<h2 class="text-base font-semibold text-gray-800">AI 자동화 현황 &amp; 로드맵</h2>
<p class="text-xs text-gray-400 mt-0.5">구현 완료된 AI 기능과 향후 계획</p>
</div>
<div class="p-5">
<div class="flex gap-5" style="flex-wrap: wrap;">
{{-- 구현 완료 --}}
<div style="flex: 1 1 280px;">
<div class="flex items-center gap-2 mb-3">
<span class="up-badge up-badge-green">구현 완료</span>
</div>
<div class="space-y-3">
<div class="p-3 bg-emerald-50 border border-emerald-200 rounded-lg">
<div class="font-semibold text-gray-800 text-sm">AI 재무 분석</div>
<p class="text-xs text-gray-500 mt-1">CEO 대시보드에서 매출/비용/손익 AI 분석. Claude API 활용하여 자연어 인사이트 제공.</p>
</div>
<div class="p-3 bg-emerald-50 border border-emerald-200 rounded-lg">
<div class="font-semibold text-gray-800 text-sm">STT 음성 입력</div>
<p class="text-xs text-gray-500 mt-1">상담 메모, 현장 보고를 음성으로 입력. 자동 텍스트 변환 후 시스템 기록.</p>
</div>
<div class="p-3 bg-emerald-50 border border-emerald-200 rounded-lg">
<div class="font-semibold text-gray-800 text-sm">Claude Code 개발 자동화</div>
<p class="text-xs text-gray-500 mt-1">SAM 시스템 자체를 Claude Code로 개발. 코드 생성, 리뷰, 테스트, 배포 자동화.</p>
</div>
</div>
</div>
{{-- 향후 계획 --}}
<div style="flex: 1 1 280px;">
<div class="flex items-center gap-2 mb-3">
<span class="up-badge up-badge-blue">향후 계획</span>
</div>
<div class="space-y-3">
<div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
<div class="font-semibold text-gray-800 text-sm">AI 견적 자동 생성</div>
<p class="text-xs text-gray-500 mt-1">고객 요구사항 입력 시 과거 데이터 기반으로 최적 견적 자동 산출. 단가표 + 옵션 조합.</p>
</div>
<div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
<div class="font-semibold text-gray-800 text-sm">AI 공정 최적화</div>
<p class="text-xs text-gray-500 mt-1">생산 데이터 분석으로 최적 공정 순서, 자재 배치 제안. 불량률 예측 및 사전 경고.</p>
</div>
<div class="p-3 bg-blue-50 border border-blue-200 rounded-lg">
<div class="font-semibold text-gray-800 text-sm">AI 고객 상담</div>
<p class="text-xs text-gray-500 mt-1">FAQ 자동 응답, 견적 문의 자동 접수. 사람의 개입이 필요한 경우만 담당자 연결.</p>
</div>
</div>
</div>
</div>
<div class="up-quote mt-5">
<span class="text-sm text-indigo-800">"공정의 다양성은 천차만별. 이를 AI와 데이터로 정복하는 것이 SAM의 연구 과제다."</span>
</div>
</div>
</div>
{{-- ─── Section 7: 결론 — 로드맵 & 비전 ─── --}}
<div class="up-card" style="border-color: #c7d2fe;">
<div class="up-card-header" style="background: #f5f3ff; border-bottom-color: #e0e7ff;">
<h2 class="text-base font-semibold text-indigo-900">로드맵 &amp; 비전</h2>
<p class="text-xs text-indigo-400 mt-0.5">방화셔터에서 시작하여 모든 중소 제조업으로</p>
</div>
<div class="p-5">
{{-- 4단계 타임라인 --}}
<div class="up-timeline">
@php
$phases = [
['phase' => 'Phase 1', 'title' => '코어 실증', 'period' => '2025~2026 상반기', 'desc' => '경동/주일 방화셔터 제조업에서 전 프로세스 실증. 영업→상담→견적→수주→공정→출고 파이프라인 완성.', 'color' => '#059669', 'status' => '진행중'],
['phase' => 'Phase 2', 'title' => '3~5사 확장', 'period' => '2026 하반기', 'desc' => '블라인드, 금속가공 등 유사 제조업 3~5사에 멀티테넌시로 확장. 상품 마스터만 교체하여 빠르게 적용.', 'color' => '#2563eb', 'status' => '계획'],
['phase' => 'Phase 3', 'title' => 'AI 고도화', 'period' => '2027', 'desc' => 'AI 견적 자동 산출, AI 공정 최적화, AI 고객 상담 순차 적용. 데이터 축적으로 AI 정확도 지속 향상.', 'color' => '#7c3aed', 'status' => '계획'],
['phase' => 'Phase 4', 'title' => '다산업군 플랫폼', 'period' => '2028~', 'desc' => '식품, 전자부품 등 다양한 제조업종으로 확대. SAM을 중소 제조업 표준 SaaS 플랫폼으로 성장.', 'color' => '#dc2626', 'status' => '비전'],
];
@endphp
@foreach($phases as $p)
<div class="up-timeline-item">
<div class="up-timeline-dot" style="background: {{ $p['color'] }};"></div>
<div class="flex items-center gap-2 mb-1">
<span class="font-bold text-sm" style="color: {{ $p['color'] }};">{{ $p['phase'] }}</span>
<span class="font-semibold text-gray-800 text-sm">{{ $p['title'] }}</span>
<span class="text-xs text-gray-400">{{ $p['period'] }}</span>
@if($p['status'] === '진행중')
<span class="up-badge up-badge-green">{{ $p['status'] }}</span>
@else
<span class="up-badge up-badge-gray">{{ $p['status'] }}</span>
@endif
</div>
<p class="text-xs text-gray-600 leading-relaxed">{{ $p['desc'] }}</p>
</div>
@endforeach
</div>
{{-- 한 줄 요약 --}}
<div class="mt-6 p-4 bg-indigo-50 border border-indigo-200 rounded-lg text-center">
<div class="text-lg font-bold text-indigo-900">
"방화셔터에서 시작하여, 모든 중소 제조업의 디지털 전환을 이끄는 SAM"
</div>
<p class="text-sm text-indigo-600 mt-2">AI 자동화 + 멀티테넌시 + 80% 공통화 = 중소 제조업 혁신 플랫폼</p>
<p class="text-xs text-indigo-400 mt-1">(주)코드브릿지엑스</p>
</div>
</div>
</div>
</div>
@endsection
Reference in New Issue Copy Permalink