d293cdd7a1
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
771 lines
51 KiB
PHP
771 lines
51 KiB
PHP
<?php
|
|
// session.php가 상위 폴더에 있을 것으로 예상됨 (sales/index.php 참고)
|
|
if (file_exists('../session.php')) {
|
|
require_once '../session.php';
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>수당 계산기 | SAM</title>
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'Noto Sans KR', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
brand: {
|
|
50: '#f0f9ff',
|
|
100: '#e0f2fe',
|
|
200: '#bae6fd',
|
|
500: '#0ea5e9',
|
|
600: '#0284c7',
|
|
700: '#0369a1',
|
|
900: '#0c4a6e',
|
|
}
|
|
},
|
|
animation: {
|
|
blob: "blob 7s infinite",
|
|
'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
|
|
},
|
|
keyframes: {
|
|
blob: {
|
|
"0%": { transform: "translate(0px, 0px) scale(1)" },
|
|
"33%": { transform: "translate(30px, -50px) scale(1.1)" },
|
|
"66%": { transform: "translate(-20px, 20px) scale(0.9)" },
|
|
"100%": { transform: "translate(0px, 0px) scale(1)" },
|
|
},
|
|
fadeInUp: {
|
|
'0%': { opacity: '0', transform: 'translateY(20px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
}
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.delay-100 { animation-delay: 100ms; }
|
|
.delay-200 { animation-delay: 200ms; }
|
|
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-50 text-slate-900 font-sans selection:bg-brand-200 selection:text-brand-900 overflow-x-hidden">
|
|
|
|
<!-- Navigation (Simplified version of sales/index.php) -->
|
|
<nav class="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-slate-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
|
<div class="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-brand-200">S</div>
|
|
<span class="text-xl font-bold tracking-tight text-slate-900">CodeBridgeX <span class="text-brand-600">SAM</span></span>
|
|
</a>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<a href="../salesmanagement/" class="text-sm font-medium text-slate-600 hover:text-brand-600 transition-colors">영업관리</a>
|
|
<a href="수당지급체계.md" class="px-4 py-2 bg-slate-100 text-slate-600 text-xs font-bold rounded-lg hover:bg-slate-200 transition-colors border border-slate-200">체계 문서 보기</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Header Section -->
|
|
<header class="relative bg-white pt-12 pb-16 overflow-hidden">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
|
|
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 text-brand-700 text-xs font-semibold uppercase tracking-wider mb-4 animate-fade-in-up">
|
|
<i data-lucide="calculator" class="w-4 h-4"></i>
|
|
Commission Calculator
|
|
</div>
|
|
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight mb-4 animate-fade-in-up delay-100">
|
|
수당 및 가격 <span class="text-brand-600">동적 계산기</span>
|
|
</h1>
|
|
<p class="text-slate-500 max-w-2xl mx-auto animate-fade-in-up delay-200">
|
|
개정된 수당 지급 체계에 따라 상품을 선택하시면 실시간으로 가입비, 구독료 및 영업 수당을 계산해 드립니다.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Background Decorations -->
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full z-0 pointer-events-none">
|
|
<div class="absolute top-0 left-10 w-64 h-64 bg-brand-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
|
|
<div class="absolute top-0 right-10 w-64 h-64 bg-indigo-100 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
|
|
<!-- Left: Options Column -->
|
|
<div class="lg:col-span-2 space-y-6">
|
|
<section class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden animate-fade-in-up delay-100">
|
|
<div class="p-6 border-b border-slate-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center text-brand-600">
|
|
<i data-lucide="package" class="w-6 h-6"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-slate-900">상품 패키지 선택</h2>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<!-- Package Item 1 -->
|
|
<label class="group relative flex items-start p-4 bg-slate-50 hover:bg-brand-50/50 rounded-xl border border-slate-100 hover:border-brand-200 transition-all cursor-pointer">
|
|
<div class="flex items-center h-5">
|
|
<input id="item-basic" type="checkbox" checked disabled class="h-5 w-5 text-brand-600 focus:ring-brand-500 border-slate-300 rounded cursor-not-allowed">
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-base font-bold text-slate-900">제조업 기본 패키지</span>
|
|
<button type="button" onclick="openInfoModal('basic')" class="text-slate-400 hover:text-brand-600 transition-colors">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
<span class="text-brand-600 font-bold">2,000만원</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 mt-1">품목관리, 견적, 수주, 생산, 출하 (**ERP(인사/회계) 무료 포함**)</p>
|
|
<div class="mt-2 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
|
|
</div>
|
|
</label>
|
|
|
|
<!-- Package Item 2 -->
|
|
<label class="group relative flex items-start p-4 hover:bg-brand-50/50 rounded-xl border border-slate-100 hover:border-brand-200 transition-all cursor-pointer bg-white">
|
|
<div class="flex items-center h-5">
|
|
<input id="item-quality" type="checkbox" onchange="calculate()" class="h-5 w-5 text-brand-600 focus:ring-brand-500 border-slate-300 rounded transition-all">
|
|
</div>
|
|
<div class="ml-4 flex-1">
|
|
<div class="flex justify-between items-start">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-base font-bold text-slate-900 group-hover:text-brand-700 transition-colors">품질관리(인정검사)</span>
|
|
<button type="button" onclick="openInfoModal('quality')" class="text-slate-400 hover:text-brand-600 transition-colors">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
<span class="text-brand-600 font-bold">2,000만원</span>
|
|
</div>
|
|
<p class="text-sm text-slate-500 mt-1">국토교통부 고시 기준 성능 인정 (내화 1시간, 차연, 개폐)</p>
|
|
|
|
<!-- NEW: Detailed info for Quality Control -->
|
|
<div class="mt-3 p-3 bg-indigo-50/50 rounded-lg border border-indigo-100/50">
|
|
<h5 class="text-[11px] font-bold text-indigo-700 flex items-center gap-1.5 mb-2">
|
|
<i data-lucide="award" class="w-3 h-3"></i>
|
|
법적 근거 및 성능 기준
|
|
</h5>
|
|
<ul class="text-[10px] text-slate-600 space-y-1.5 leading-relaxed">
|
|
<li class="flex gap-1.5">
|
|
<span class="text-indigo-400">•</span>
|
|
<span><strong>국토부고시 제2021-1009호</strong> 준수 및 KICT 품질인정 완료</span>
|
|
</li>
|
|
<li class="flex gap-1.5">
|
|
<span class="text-indigo-400">•</span>
|
|
<span><strong>비차열 1시간 이상의 내화성능</strong> 및 차연성능 확보</span>
|
|
</li>
|
|
<li class="flex gap-1.5">
|
|
<span class="text-indigo-400">•</span>
|
|
<span>매년 KICT 공장심사 및 사후관리 프로세스 적용</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mt-3 text-[11px] font-semibold text-slate-400 uppercase tracking-widest">월 구독료: 50만원</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden animate-fade-in-up delay-200">
|
|
<div class="p-6 border-b border-slate-100 flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
|
<i data-lucide="plus-circle" class="w-6 h-6"></i>
|
|
</div>
|
|
<h2 class="text-xl font-bold text-slate-900">추가 옵션</h2>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<!-- Option 1: 생산공정 추가 (수량 입력형) -->
|
|
<div class="group flex flex-col p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all">
|
|
<div class="flex items-start cursor-pointer" onclick="document.getElementById('item-line').click()">
|
|
<input type="checkbox" id="item-line" onchange="calculate()" data-join="5000000" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all" onclick="event.stopPropagation()">
|
|
<div class="ml-3 flex-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-sm font-bold text-slate-800">생산공정 추가</span>
|
|
<button type="button" onclick="openInfoModal('line')" class="text-slate-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="info" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">1개당 가입: 500만원 / 월: 10만원</span>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 flex items-center gap-3 pl-8">
|
|
<span class="text-xs text-slate-500 font-medium">추가 수량:</span>
|
|
<div class="flex items-center">
|
|
<button onclick="changeQty(-1)" class="w-8 h-8 rounded-l-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">-</button>
|
|
<input type="number" id="line-qty" value="1" min="1" onchange="calculate()" class="w-12 h-8 border-y border-slate-200 text-center text-sm font-bold focus:outline-none focus:ring-0">
|
|
<button onclick="changeQty(1)" class="w-8 h-8 rounded-r-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">+</button>
|
|
</div>
|
|
<span class="text-xs text-slate-400">개</span>
|
|
</div>
|
|
</div>
|
|
<!-- Option 2 -->
|
|
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
|
|
<input type="checkbox" id="item-photo" onchange="calculate()" data-join="0" data-monthly="100000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
|
|
<div class="ml-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-sm font-bold text-slate-800">사진 등록 기능</span>
|
|
<button type="button" onclick="openInfoModal('photo')" class="text-slate-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="info" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 10만원</span>
|
|
</div>
|
|
</label>
|
|
<!-- Option 3 -->
|
|
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
|
|
<input type="checkbox" id="item-chatbot" onchange="calculate()" data-join="0" data-monthly="200000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
|
|
<div class="ml-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-sm font-bold text-slate-800">챗봇/녹음/업무일지</span>
|
|
<button type="button" onclick="openInfoModal('ai')" class="text-slate-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="info" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 20만원</span>
|
|
</div>
|
|
drum
|
|
</label>
|
|
<!-- Option 4: 연구소 연구노트 (NEW) -->
|
|
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
|
|
<input type="checkbox" id="item-lab-note" onchange="calculate()" data-join="0" data-monthly="50000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
|
|
<div class="ml-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-sm font-bold text-slate-800">연구소 연구노트</span>
|
|
<button type="button" onclick="openInfoModal('lab')" class="text-slate-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="info" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 5만원</span>
|
|
</div>
|
|
drum
|
|
</label>
|
|
<!-- Option 5: 장비점검, 사무소 정비 (NEW, 품질관리 미선택 시) -->
|
|
<div id="equip-check-container" class="transition-all duration-300">
|
|
<label class="group flex items-start p-4 rounded-xl border border-slate-100 hover:border-indigo-200 hover:bg-indigo-50/30 transition-all cursor-pointer">
|
|
<input type="checkbox" id="item-equip-check" onchange="calculate()" data-join="0" data-monthly="50000" class="h-5 w-5 mt-1 text-indigo-600 focus:ring-indigo-500 border-slate-300 rounded transition-all">
|
|
<div class="ml-3">
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-sm font-bold text-slate-800">장비점검, 사무소 정비</span>
|
|
<button type="button" onclick="openInfoModal('equip')" class="text-slate-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="info" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</div>
|
|
<span class="block text-xs text-indigo-600 font-medium mt-1">가입: 0원 / 월: 5만원</span>
|
|
<p id="equip-check-hint" class="text-[10px] text-red-500 mt-1 hidden">* 품질관리 패키지에 포함된 기능입니다.</p>
|
|
</div>
|
|
drum
|
|
drum
|
|
</label>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- NEW: Usage-based Pricing Section -->
|
|
<section class="bg-white rounded-3xl p-8 shadow-sm border border-slate-200 animate-fade-in-up" style="animation-delay: 0.15s;">
|
|
<div class="flex items-center gap-4 mb-8">
|
|
<div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center text-amber-600">
|
|
<i data-lucide="bar-chart-3" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-slate-900">사용량 기반 추가 과금</h2>
|
|
<p class="text-xs text-slate-500 mt-1">기본 제공량 초과 시 발생하는 비용입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Storage Option -->
|
|
<div class="p-6 rounded-2xl border border-slate-100 bg-slate-50/30">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<span class="block text-sm font-bold text-slate-800">파일 저장 공간</span>
|
|
<span class="block text-[11px] text-slate-500 mt-1">기본 100GB 제공</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-lg">100GB당 10만원</span>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-500 font-medium">추가 용량:</span>
|
|
<div class="flex items-center">
|
|
<button onclick="changeStorage(-100)" class="w-8 h-8 rounded-l-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">-</button>
|
|
<input type="number" id="storage-qty" value="0" min="0" step="100" onchange="calculate()" class="w-16 h-8 border-y border-slate-200 text-center text-sm font-bold focus:outline-none focus:ring-0">
|
|
<button onclick="changeStorage(100)" class="w-8 h-8 rounded-r-lg border border-slate-200 bg-white flex items-center justify-center hover:bg-slate-50 transition-colors text-slate-600">+</button>
|
|
</div>
|
|
<span class="text-xs text-slate-400">GB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Token Option -->
|
|
<div class="p-6 rounded-2xl border border-slate-100 bg-slate-50/30">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="block text-sm font-bold text-slate-800">실험실 AI 토큰</span>
|
|
<button onclick="openTokenModal()" class="text-slate-400 hover:text-indigo-600 transition-colors">
|
|
<i data-lucide="info" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
<span class="block text-[11px] text-slate-500 mt-1">월 100만 토큰 기본 제공</span>
|
|
</div>
|
|
<span class="text-xs font-bold text-indigo-600 bg-indigo-50 px-2 py-1 rounded-lg">초과 시 실비</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="text-[11px] text-slate-400 leading-tight">기본 제공량 내에서는 추가 비용이 발생하지 않습니다.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right: Summary Dashboard Column -->
|
|
<div class="lg:col-span-1">
|
|
<div class="sticky top-24 space-y-6">
|
|
<!-- Summary Card -->
|
|
<section class="bg-slate-900 rounded-3xl p-8 text-white shadow-2xl shadow-slate-200 relative overflow-hidden animate-fade-in-up">
|
|
<!-- Decorative background light -->
|
|
<div class="absolute -top-10 -right-10 w-40 h-40 bg-brand-500/20 rounded-full blur-3xl"></div>
|
|
|
|
<h2 class="text-xl font-bold mb-8 flex items-center justify-between">
|
|
최종 견적 요약
|
|
<i data-lucide="pie-chart" class="w-5 h-5 text-brand-400"></i>
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Totals Table -->
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center text-slate-400 text-sm">
|
|
<span>총 가입비 (Join Fee)</span>
|
|
<span id="display-total-join" class="text-white font-bold text-lg">2,000만원</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-slate-400 text-sm">
|
|
<span>총 월 구독료 (Monthly)</span>
|
|
<span id="display-total-monthly" class="text-white font-bold text-lg">50만원</span>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-slate-800">
|
|
|
|
<!-- Commission Section -->
|
|
<div class="space-y-4">
|
|
<div class="p-4 bg-brand-600/10 rounded-2xl border border-brand-500/20">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-brand-400 text-xs font-bold uppercase tracking-widest">판매자 수당 (20%)</span>
|
|
<span id="display-seller-commission" class="text-brand-500 font-extrabold text-xl">400만원</span>
|
|
</div>
|
|
<div class="text-[10px] text-slate-500">계약 성사 시 직접 수령 수당</div>
|
|
</div>
|
|
<div class="p-4 bg-slate-800/50 rounded-2xl border border-slate-700/50">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="text-slate-400 text-xs font-bold uppercase tracking-widest">관리자 수당 (5%)</span>
|
|
<span id="display-manager-commission" class="text-slate-300 font-bold text-lg">100만원</span>
|
|
</div>
|
|
<div class="text-[10px] text-slate-500">직속 상위 관리자 지급 수당</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="window.print()" class="w-full py-4 bg-white text-slate-900 rounded-xl font-bold hover:bg-slate-100 transition-colors shadow-lg flex items-center justify-center gap-2 mt-4">
|
|
<i data-lucide="download" class="w-5 h-5"></i>
|
|
견적서 다운로드
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Info Box -->
|
|
<div class="p-6 bg-white rounded-2xl border border-slate-200 shadow-sm animate-fade-in-up delay-100">
|
|
<h4 class="text-sm font-bold text-slate-900 mb-3 flex items-center gap-2">
|
|
<i data-lucide="info" class="w-4 h-4 text-brand-600"></i>
|
|
가격 정책 안내
|
|
</h4>
|
|
<ul class="text-xs text-slate-500 space-y-2 leading-relaxed">
|
|
<li class="flex gap-2"><div class="w-1 h-1 rounded-full bg-slate-400 mt-1.5 flex-shrink-0"></div> 수당은 입금된 가입비 총액을 기준으로 계산됩니다.</li>
|
|
<li class="flex gap-2"><div class="w-1 h-1 rounded-full bg-slate-400 mt-1.5 flex-shrink-0"></div> 월 구독료는 플랫폼 인프라 비용으로 수당 제외 대상입니다.</li>
|
|
<li class="flex gap-2"><div class="w-1 h-1 rounded-full bg-slate-400 mt-1.5 flex-shrink-0"></div> 부가세(VAT)는 별도입니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
calculate();
|
|
});
|
|
|
|
function calculate() {
|
|
// 원단위 기본값
|
|
let totalJoin = 20000000; // 제조업 기본 패키지 20M
|
|
let totalMonthly = 500000; // 제조업 기본 패키지 500k
|
|
|
|
// 품질관리(인정검사) 체크 확인
|
|
const isQualityChecked = document.getElementById('item-quality').checked;
|
|
if (isQualityChecked) {
|
|
totalJoin += 20000000;
|
|
totalMonthly += 500000;
|
|
}
|
|
|
|
// 장비점검 옵션 연동 (품질관리 선택 시 자동 포함 처리 느낌)
|
|
const equipCheck = document.getElementById('item-equip-check');
|
|
const equipHint = document.getElementById('equip-check-hint');
|
|
if (isQualityChecked) {
|
|
equipCheck.checked = false;
|
|
equipCheck.disabled = true;
|
|
equipHint.classList.remove('hidden');
|
|
equipCheck.parentElement.parentElement.classList.add('opacity-50', 'pointer-events-none');
|
|
} else {
|
|
equipCheck.disabled = false;
|
|
equipHint.classList.add('hidden');
|
|
equipCheck.parentElement.parentElement.classList.remove('opacity-50', 'pointer-events-none');
|
|
}
|
|
|
|
// 생산공정 체크 확인 (수량 반영)
|
|
const itemLine = document.getElementById('item-line');
|
|
if (itemLine.checked) {
|
|
const qty = parseInt(document.getElementById('line-qty').value || 1);
|
|
totalJoin += parseInt(itemLine.dataset.join || 0) * qty;
|
|
totalMonthly += parseInt(itemLine.dataset.monthly || 0) * qty;
|
|
}
|
|
|
|
// 추가 옵션들
|
|
const otherOptions = ['item-photo', 'item-chatbot', 'item-lab-note', 'item-equip-check'];
|
|
otherOptions.forEach(id => {
|
|
const el = document.getElementById(id);
|
|
if (el && el.checked) {
|
|
totalJoin += parseInt(el.dataset.join || 0);
|
|
totalMonthly += parseInt(el.dataset.monthly || 0);
|
|
}
|
|
});
|
|
|
|
// 저장공간 추가 과금 (100GB당 10만원)
|
|
const storageQty = parseInt(document.getElementById('storage-qty').value || 0);
|
|
totalMonthly += (storageQty / 100) * 100000;
|
|
|
|
// 표시 업데이트
|
|
document.getElementById('display-total-join').innerText = formatKRW(totalJoin);
|
|
document.getElementById('display-total-monthly').innerText = formatKRW(totalMonthly);
|
|
document.getElementById('display-seller-commission').innerText = formatKRW(sellerCommission);
|
|
document.getElementById('display-manager-commission').innerText = formatKRW(managerCommission);
|
|
}
|
|
|
|
function changeQty(delta) {
|
|
const el = document.getElementById('line-qty');
|
|
let val = parseInt(el.value || 1) + delta;
|
|
if (val < 1) val = 1;
|
|
el.value = val;
|
|
calculate();
|
|
}
|
|
|
|
function changeStorage(delta) {
|
|
const el = document.getElementById('storage-qty');
|
|
let val = parseInt(el.value || 0) + delta;
|
|
if (val < 0) val = 0;
|
|
el.value = val;
|
|
calculate();
|
|
}
|
|
|
|
function openTokenModal() {
|
|
document.getElementById('token-modal').classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
|
|
function closeTokenModal() {
|
|
document.getElementById('token-modal').classList.add('hidden');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
function openInfoModal(type) {
|
|
const modal = document.getElementById('info-modal');
|
|
const title = document.getElementById('info-modal-title');
|
|
const content = document.getElementById('info-modal-content');
|
|
|
|
if (type === 'basic') {
|
|
title.innerText = '제조업 기본 패키지 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="check-circle-2" class="w-4 h-4 text-brand-600"></i>
|
|
핵심 제공 기능
|
|
</h4>
|
|
<ul class="grid grid-cols-2 gap-2 text-sm text-slate-600">
|
|
<li class="bg-slate-50 p-2 rounded-lg">• 품목/자재 관리</li>
|
|
<li class="bg-slate-50 p-2 rounded-lg">• 견적 및 수주 관리</li>
|
|
<li class="bg-slate-50 p-2 rounded-lg">• 생산/공정 관리</li>
|
|
<li class="bg-slate-50 p-2 rounded-lg">• 출하 및 재고 관리</li>
|
|
<li class="bg-brand-50 p-2 rounded-lg border border-brand-100 font-bold text-brand-700">• ERP(인사/회계) 무료</li>
|
|
<li class="bg-slate-50 p-2 rounded-lg">• 바코드/QR 대응</li>
|
|
</ul>
|
|
</section>
|
|
<section class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-xs text-slate-500 leading-relaxed">
|
|
<p>제조업의 핵심 업무 프로세스를 표준화하여 디지털 전환의 기초를 마련해주는 패키지입니다. 특히 외부 ERP 연동 없이 인사와 회계 업무까지 통합 처리할 수 있는 환경을 기본으로 제공합니다.</p>
|
|
</section>
|
|
</div>
|
|
`;
|
|
} else if (type === 'quality') {
|
|
title.innerText = '품질관리(인정검사) 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="award" class="w-4 h-4 text-indigo-600"></i>
|
|
법적 근거 및 인증 체계
|
|
</h4>
|
|
<div class="bg-indigo-50 border border-indigo-100 p-4 rounded-2xl">
|
|
<p class="text-sm font-bold text-indigo-900 mb-1">국토교통부 고시 제2021-1009호 준수</p>
|
|
<p class="text-xs text-indigo-700">방화문 및 자동방화셔터의 인정 및 관리기준에 따른 엄격한 품질 품질인정 획득</p>
|
|
</div>
|
|
</section>
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-3 flex items-center gap-2">
|
|
<i data-lucide="shield-check" class="w-4 h-4 text-indigo-600"></i>
|
|
주요 검증 성능
|
|
</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="p-3 bg-white border border-slate-200 rounded-xl text-center">
|
|
<span class="block text-xs text-slate-400 mb-1">내화성능</span>
|
|
<span class="text-sm font-bold text-slate-800">비차열 1시간+</span>
|
|
</div>
|
|
<div class="p-3 bg-white border border-slate-200 rounded-xl text-center">
|
|
<span class="block text-xs text-slate-400 mb-1">차연성능</span>
|
|
<span class="text-sm font-bold text-slate-800">연기 완벽 차단</span>
|
|
</div>
|
|
<div class="p-3 bg-white border border-slate-200 rounded-xl text-center">
|
|
<span class="block text-xs text-slate-400 mb-1">개폐성능</span>
|
|
<span class="text-sm font-bold text-slate-800">비상 수동 조작</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-xs text-slate-500 leading-relaxed">
|
|
<p>한국건설기술연구원(KICT)의 정기 공장심사와 사후관리 프로세스를 시스템 내에서 자동 대응할 수 있도록 설계된 프리미엄 모듈입니다. '장비점검 및 사무소 정비' 기능이 기본 포함되어 있습니다.</p>
|
|
</section>
|
|
</div>
|
|
`;
|
|
} else if (type === 'line') {
|
|
title.innerText = '생산공정 추가 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="settings-2" class="w-4 h-4 text-indigo-600"></i>
|
|
공정별 독립적 프로세스 구축
|
|
</h4>
|
|
<p class="text-sm text-slate-600 leading-relaxed">각 공정마다 작업지시서 발행, 결과 기록, 공정별 병목 분석 등 <strong>별도의 프로세스 개발 및 데이터 환경</strong>을 구축하는 비용이 포함됩니다.</p>
|
|
</section>
|
|
<ul class="space-y-2 text-xs text-slate-500 bg-slate-50 p-4 rounded-xl">
|
|
<li class="flex gap-2"><span>•</span> <span>다품종 소량 생산 체계에 필수적인 공정 독립성 확보</span></li>
|
|
<li class="flex gap-2"><span>•</span> <span>공정별 실시간 진척률 및 가동율 데이터 집계 지원</span></li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
} else if (type === 'photo') {
|
|
title.innerText = '사진 등록 기능 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="camera" class="w-4 h-4 text-indigo-600"></i>
|
|
현장 기반 시각 데이터 관리
|
|
</h4>
|
|
<p class="text-sm text-slate-600 leading-relaxed">현장별, 공정별로 발생하는 <strong>증빙 사진을 실시간으로 촬영하고 시스템에 자동 분류/저장</strong>하는 기능입니다.</p>
|
|
</section>
|
|
<div class="p-4 bg-indigo-50 border border-indigo-100 rounded-2xl">
|
|
<h5 class="text-xs font-bold text-indigo-800 mb-2">추천 활용 분야</h5>
|
|
<p class="text-[11px] text-indigo-600 leading-relaxed">시공 현장 기록이 필수적인 건설사, 설치 완료 증빙이 필요한 제조사 등에 최적화되어 있습니다. 찍고 저장하는 번거로운 과정을 획기적으로 줄여줍니다.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (type === 'ai') {
|
|
title.innerText = 'AI 업무 효율화 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="sparkles" class="w-4 h-4 text-indigo-600"></i>
|
|
지능형 업무 자동화 (AI)
|
|
</h4>
|
|
<p class="text-sm text-slate-600 leading-relaxed">챗봇 인터페이스와 음성 녹음 입력을 활용하여 <strong>업무 데이터 입력을 간소화하고 자동 업무일지를 생성</strong>합니다.</p>
|
|
</section>
|
|
<ul class="grid grid-cols-1 gap-2 text-xs text-slate-500">
|
|
<li class="flex gap-2 bg-slate-50 p-2 rounded-lg"><span>•</span> <span>대화형 데이터를 통한 실시간 재고/실적 조회</span></li>
|
|
<li class="flex gap-2 bg-slate-50 p-2 rounded-lg"><span>•</span> <span>현장 음성 기록을 텍스트로 자동 변환 및 요약</span></li>
|
|
<li class="flex gap-2 bg-slate-50 p-2 rounded-lg"><span>•</span> <span>반복되는 일상 업무의 AI 자동 일지 작성 지원</span></li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
} else if (type === 'lab') {
|
|
title.innerText = '연구소 연구노트 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="microscope" class="w-4 h-4 text-indigo-600"></i>
|
|
신뢰성 있는 기술 개발 기록
|
|
</h4>
|
|
<p class="text-sm text-slate-600 leading-relaxed">한국산업기술진흥협회(산기협)의 연구노트 기준을 준수하여 <strong>연구 부서에서 필수적으로 관리해야 하는 기술 기록 솔루션</strong>을 제공합니다.</p>
|
|
</section>
|
|
<div class="p-4 bg-slate-900 text-white rounded-2xl">
|
|
<h5 class="text-xs font-bold text-brand-400 mb-2">핵심 보안 및 규정</h5>
|
|
<p class="text-[10px] text-slate-400 leading-relaxed">수정 불가한 타임스탬프 기록, 전자서명 연동 대응 등 연구소 인정 유지 및 기술 유출 방지를 위한 전문 프로세스가 탑재됩니다.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
} else if (type === 'equip') {
|
|
title.innerText = '장비/사무소 관리 상세 안내';
|
|
content.innerHTML = `
|
|
<div class="space-y-6">
|
|
<section>
|
|
<h4 class="font-bold text-slate-900 mb-2 flex items-center gap-2">
|
|
<i data-lucide="wrench" class="w-4 h-4 text-indigo-600"></i>
|
|
심사 대응용 환경 정보 관리
|
|
</h4>
|
|
<p class="text-sm text-slate-600 leading-relaxed">ISO 심사나 품질 인정 검사 시 가장 중요하게 평가되는 <strong>장비의 정기 점검 기록 및 사무소 정비(청소/정돈) 상태를 체계적으로 관리</strong>합니다.</p>
|
|
</section>
|
|
<div class="bg-amber-50 border border-amber-100 p-4 rounded-xl">
|
|
<p class="text-xs text-amber-800 leading-relaxed font-medium">관리 부주의로 인한 심사 탈락 리스크를 해소하고, 공장 및 사무실 전체의 쾌적한 제조 환경을 데이터로 증빙할 수 있게 돕습니다.</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
modal.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
lucide.createIcons();
|
|
}
|
|
|
|
function closeInfoModal() {
|
|
document.getElementById('info-modal').classList.add('hidden');
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
function formatKRW(num) {
|
|
if (num === 0) return "0원";
|
|
const man = num / 10000;
|
|
if (man >= 10000) {
|
|
const eok = Math.floor(man / 10000);
|
|
const restMan = man % 10000;
|
|
return eok + "억" + (restMan > 0 ? " " + restMan.toLocaleString() + "만원" : "원");
|
|
}
|
|
return man.toLocaleString() + "만원";
|
|
}
|
|
</script>
|
|
<!-- AI Token Policy Modal -->
|
|
<div id="token-modal" class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeTokenModal()"></div>
|
|
<div class="relative bg-white w-full max-w-2xl rounded-3xl shadow-2xl overflow-hidden animate-fade-in-up">
|
|
<div class="flex items-center justify-between p-6 border-b border-slate-100 bg-slate-50/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-600">
|
|
<i data-lucide="shield-check" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-slate-900">API 토큰 사용 정책 가이드</h3>
|
|
<p class="text-xs text-slate-500">안전하고 투명한 AI 서비스 이용을 위한 안내</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="closeTokenModal()" class="p-2 hover:bg-white rounded-xl transition-colors">
|
|
<i data-lucide="x" class="w-6 h-6 text-slate-400"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="p-8 max-h-[70vh] overflow-y-auto">
|
|
<div class="space-y-8">
|
|
<section>
|
|
<h4 class="text-sm font-bold text-slate-900 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
|
|
기본 제공 요금제
|
|
</h4>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-100">
|
|
<span class="block text-xs text-slate-400 mb-1">매월 기본 제공량</span>
|
|
<span class="text-lg font-bold text-slate-800">1,000,000 Tokens</span>
|
|
</div>
|
|
<div class="p-4 rounded-2xl bg-indigo-50/50 border border-indigo-100">
|
|
<span class="block text-xs text-indigo-400 mb-1">초과 시 과금</span>
|
|
<span class="text-lg font-bold text-indigo-600">1,000 토큰 단위 실비</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<h4 class="text-sm font-bold text-slate-900 mb-4 flex items-center gap-2">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-indigo-600"></span>
|
|
토큰 사용량 가이드 (100만 토큰 기준)
|
|
</h4>
|
|
<div class="overflow-hidden rounded-2xl border border-slate-100">
|
|
<table class="w-full text-sm text-left">
|
|
<thead class="bg-slate-50 text-slate-600">
|
|
<tr>
|
|
<th class="py-3 px-4 font-bold">서비스 항목</th>
|
|
<th class="py-3 px-4 font-bold">가능 작업량</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 text-slate-500">
|
|
<tr>
|
|
<td class="py-3 px-4 font-medium text-slate-700">음성 회의 요약</td>
|
|
<td class="py-3 px-4">약 520분 (8.6시간)</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 px-4 font-medium text-slate-700">문서 자료 정리</td>
|
|
<td class="py-3 px-4">A4 기준 약 300~400매</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="py-3 px-4 font-medium text-slate-700">이메일/노트 정리</td>
|
|
<td class="py-3 px-4">약 1,500 ~ 2,000건</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="p-4 rounded-2xl bg-amber-50 border border-amber-100 text-[11px] text-amber-700 leading-relaxed">
|
|
<i data-lucide="alert-triangle" class="w-4 h-4 inline-block mr-1 -mt-1"></i>
|
|
미사용 잔여 토큰은 다음 달로 이월되지 않으며, 매월 1일 기본 제공량이 갱신됩니다. 음성 파일의 경우 처리 시간을 기준으로 토큰이 산정되어 투명한 비용 예측이 가능합니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-end">
|
|
<button onclick="closeTokenModal()" class="px-8 py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-colors">확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Package Info Modal -->
|
|
<div id="info-modal" class="hidden fixed inset-0 z-[101] flex items-center justify-center p-4">
|
|
<div class="absolute inset-0 bg-slate-900/60 backdrop-blur-sm" onclick="closeInfoModal()"></div>
|
|
<div class="relative bg-white w-full max-w-xl rounded-3xl shadow-2xl overflow-hidden animate-fade-in-up">
|
|
<div class="flex items-center justify-between p-6 border-b border-slate-100 bg-slate-50/50">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-brand-50 flex items-center justify-center text-brand-600">
|
|
<i data-lucide="info" class="w-6 h-6"></i>
|
|
</div>
|
|
<div>
|
|
<h3 id="info-modal-title" class="text-lg font-bold text-slate-900">상세 안내</h3>
|
|
<p class="text-xs text-slate-500">패키지 구성 및 주요 기능을 확인하세요.</p>
|
|
</div>
|
|
</div>
|
|
<button onclick="closeInfoModal()" class="p-2 hover:bg-white rounded-xl transition-colors">
|
|
<i data-lucide="x" class="w-6 h-6 text-slate-400"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div id="info-modal-content" class="p-8 max-h-[70vh] overflow-y-auto">
|
|
<!-- Content will be injected by JS -->
|
|
</div>
|
|
|
|
<div class="p-6 bg-slate-50 border-t border-slate-100 flex justify-end">
|
|
<button onclick="closeInfoModal()" class="px-8 py-3 bg-slate-900 text-white rounded-xl font-bold hover:bg-slate-800 transition-colors">확인</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|