1926 lines
136 KiB
PHP
1926 lines
136 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>바로빌 API 회계 솔루션</title>
|
||
<!-- Favicon -->
|
||
<link rel="apple-touch-icon" sizes="180x180" href="../img/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="../img/favicon-32x32.png">
|
||
<link rel="icon" type="image/png" sizes="16x16" href="../img/favicon-16x16.png">
|
||
<link rel="shortcut icon" href="../img/favicon.png">
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||
<style>
|
||
* { font-family: 'Noto Sans KR', sans-serif; }
|
||
.nav-active { border-bottom: 3px solid #0d9488; color: #0d9488; font-weight: 700; }
|
||
.fade-in { animation: fadeIn 0.5s ease-out forwards; opacity: 0; }
|
||
.fade-in-1 { animation-delay: 0.1s; }
|
||
.fade-in-2 { animation-delay: 0.2s; }
|
||
.fade-in-3 { animation-delay: 0.3s; }
|
||
.fade-in-4 { animation-delay: 0.4s; }
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
.custom-scroll::-webkit-scrollbar { width: 6px; }
|
||
.custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 10px; }
|
||
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||
.tab-content { display: none; }
|
||
.tab-content.active { display: block; }
|
||
.api-card:hover { transform: translateY(-2px); }
|
||
.code-block { background: #1e293b; color: #e2e8f0; border-radius: 8px; padding: 12px; font-family: 'Consolas', monospace; font-size: 12px; overflow-x: auto; }
|
||
.code-block .keyword { color: #c084fc; }
|
||
.code-block .string { color: #34d399; }
|
||
.code-block .comment { color: #64748b; }
|
||
.code-block .function { color: #60a5fa; }
|
||
.field-required { color: #ef4444; font-weight: 700; }
|
||
.field-optional { color: #64748b; }
|
||
/* 모달 스타일 */
|
||
.modal-content {
|
||
transform: scale(0.95);
|
||
opacity: 0;
|
||
transition: all 0.2s ease-out;
|
||
}
|
||
.modal-content.show {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
#modalOverlay {
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease-out;
|
||
}
|
||
#modalOverlay.show {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 상세 단가표 (Shadcn 스타일) */
|
||
.pricing-card { background: white; border-radius: 0.75rem; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
|
||
.pricing-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; }
|
||
.pricing-table-header { background: #f8fafc; }
|
||
.pricing-tier-row:hover { background: #f1f5f9; }
|
||
.pricing-tab-active { background: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); font-weight: 600; color: #0d9488 !important; }
|
||
.pricing-example-card { background: linear-gradient(135deg, #f8fafc, #f1f5f9); border: 1px solid #e2e8f0; }
|
||
.pricing-summary-row { background: rgba(13, 148, 136, 0.05); }
|
||
.pricing-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
|
||
.pricing-collapsible.open { max-height: 2000px; }
|
||
.pricing-rotate { transition: transform 0.3s ease; }
|
||
.pricing-rotate.open { transform: rotate(180deg); }
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100 min-h-screen">
|
||
<!-- Header -->
|
||
<header class="bg-white/80 backdrop-blur-md border-b border-teal-100/50 sticky top-0 z-50 transition-all shadow-sm">
|
||
<div class="max-w-6xl mx-auto px-4 py-3">
|
||
<div class="flex items-center justify-between">
|
||
<a href="../index.php" class="flex items-center gap-3 cursor-pointer">
|
||
<img src="../img/favicon-32x32.png" alt="SAM" class="w-10 h-10 rounded-xl">
|
||
<div class="flex flex-col">
|
||
<span class="text-lg font-bold text-slate-800 leading-tight">SAM</span>
|
||
<span class="text-xs text-slate-500 leading-tight">Smart Automation Management</span>
|
||
</div>
|
||
</a>
|
||
|
||
<div class="flex items-center gap-2 text-xs text-slate-500 font-medium">
|
||
<div class="flex bg-slate-100/50 p-1 rounded-xl border border-slate-200/50 mr-2">
|
||
<a href="eaccount/index.php" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:text-teal-600 hover:bg-white transition-all duration-200">
|
||
<span>💰</span> <span>계좌조회</span>
|
||
</a>
|
||
<a href="ecard/index.php" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:text-teal-600 hover:bg-white transition-all duration-200">
|
||
<span>💳</span> <span>카드내역</span>
|
||
</a>
|
||
<a href="tenant/index.php" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:text-teal-600 hover:bg-white transition-all duration-200">
|
||
<span>🏢</span> <span>테넌트</span>
|
||
</a>
|
||
<a href="registration/index.php" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:text-teal-600 hover:bg-white transition-all duration-200">
|
||
<span>👥</span> <span>바로빌 회원관리</span>
|
||
</a>
|
||
<button onclick="openApiInfoModal(); event.preventDefault();" class="flex items-center gap-2 px-3 py-2 rounded-lg hover:text-teal-600 hover:bg-white transition-all duration-200">
|
||
<span>📖</span> <span>API정보</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="h-4 w-px bg-slate-200 mx-2"></div>
|
||
|
||
<a href="etax/index.php" class="flex items-center gap-1.5 px-3 py-2 text-slate-400 hover:text-teal-600 transition-colors">
|
||
<span>📄</span> <span class="hidden lg:inline text-[10px]">세금계산서</span>
|
||
</a>
|
||
<a href="../index.php" class="flex items-center gap-1.5 px-3 py-2 text-slate-400 hover:text-teal-600 transition-colors">
|
||
<span>🏠</span> <span class="hidden lg:inline text-[10px]">홈</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Navigation -->
|
||
<nav class="bg-white border-b border-slate-200">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<div class="flex space-x-8">
|
||
<a href="#" class="nav-tab py-3 text-sm nav-active" data-tab="dashboard">대시보드</a>
|
||
<a href="#" class="nav-tab py-3 text-sm text-slate-600 hover:text-teal-600 transition-colors" data-tab="sales">매출/매입 관리</a>
|
||
<a href="#" class="nav-tab py-3 text-sm text-slate-600 hover:text-teal-600 transition-colors" data-tab="settings">설정 및 연동</a>
|
||
<a href="#" class="nav-tab py-3 text-sm text-slate-600 hover:text-teal-600 transition-colors" data-tab="pricing">과금정책</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="max-w-6xl mx-auto px-4 py-8">
|
||
<!-- ============================================ -->
|
||
<!-- 탭 1: 대시보드 -->
|
||
<!-- ============================================ -->
|
||
<div id="dashboard" class="tab-content active">
|
||
<!-- 프로젝트 개요 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 border-l-4 border-teal-600 fade-in fade-in-1">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">📋</span> 프로젝트 개요
|
||
</h2>
|
||
<p class="text-slate-600 mb-4">바로빌(Barobill) API를 활용한 멀티테넌시 환경의 회계 자동화 시스템</p>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||
<div class="bg-slate-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<div class="text-2xl mb-2">🏢</div>
|
||
<h3 class="font-medium text-slate-700 text-sm">회원사 관리</h3>
|
||
<p class="text-xs text-slate-500 mt-1">API 기반 가입 및 관리</p>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<div class="text-2xl mb-2">🔐</div>
|
||
<h3 class="font-medium text-slate-700 text-sm">인증서 연동</h3>
|
||
<p class="text-xs text-slate-500 mt-1">공인인증서 플러그인</p>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<div class="text-2xl mb-2">📄</div>
|
||
<h3 class="font-medium text-slate-700 text-sm">전자세금계산서</h3>
|
||
<p class="text-xs text-slate-500 mt-1">발행 및 관리</p>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<div class="text-2xl mb-2">💳</div>
|
||
<h3 class="font-medium text-slate-700 text-sm">금융 데이터</h3>
|
||
<p class="text-xs text-slate-500 mt-1">카드/계좌 실시간 조회</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 워크플로우 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-2">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">🔄</span> 통합 워크플로우
|
||
</h2>
|
||
<div class="mb-6">
|
||
<h3 class="font-medium text-slate-700 mb-3 flex items-center">
|
||
<span class="w-6 h-6 bg-teal-600 text-white rounded-full text-xs flex items-center justify-center mr-2">1</span>
|
||
회원 온보딩 프로세스
|
||
</h3>
|
||
<div class="flex flex-col md:flex-row gap-4">
|
||
<div class="flex-1 bg-gradient-to-r from-teal-50 to-white rounded-lg p-4 border border-teal-100">
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-lg mr-2">📝</span>
|
||
<span class="font-medium text-slate-700 text-sm">회원 가입</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">사업자 정보 입력 → RegistCorp API → 연동키 발급</p>
|
||
</div>
|
||
<div class="hidden md:flex items-center text-teal-400">→</div>
|
||
<div class="flex-1 bg-gradient-to-r from-teal-50 to-white rounded-lg p-4 border border-teal-100">
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-lg mr-2">🔑</span>
|
||
<span class="font-medium text-slate-700 text-sm">인증서 등록</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">플러그인 호출 → 인증서 선택 → 보안 서버 전송</p>
|
||
</div>
|
||
<div class="hidden md:flex items-center text-teal-400">→</div>
|
||
<div class="flex-1 bg-gradient-to-r from-teal-50 to-white rounded-lg p-4 border border-teal-100">
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-lg mr-2">✅</span>
|
||
<span class="font-medium text-slate-700 text-sm">연동 확인</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">등록 완료 → 상태 '활성(Active)' 변경</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 class="font-medium text-slate-700 mb-3 flex items-center">
|
||
<span class="w-6 h-6 bg-teal-600 text-white rounded-full text-xs flex items-center justify-center mr-2">2</span>
|
||
서비스 이용 프로세스
|
||
</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="bg-slate-50 rounded-lg p-4 border-l-4 border-amber-500">
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-lg mr-2">📄</span>
|
||
<span class="font-medium text-slate-700 text-sm">전자세금계산서</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">매출 데이터 → RegistTaxInvoice → 국세청 전송</p>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4 border-l-4 border-blue-500">
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-lg mr-2">💳</span>
|
||
<span class="font-medium text-slate-700 text-sm">카드 내역</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">카드 등록 → GetCardLog → 지출 내역 스크래핑</p>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4 border-l-4 border-green-500">
|
||
<div class="flex items-center mb-2">
|
||
<span class="text-lg mr-2">🏦</span>
|
||
<span class="font-medium text-slate-700 text-sm">계좌 내역</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">계좌 연결 → GetBankAccountLog → 입출금 동기화</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 메뉴 구조 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-3">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">🗂️</span> 메뉴 구조도
|
||
</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-3">
|
||
<span class="text-sm font-medium">📊 대시보드</span>
|
||
</div>
|
||
<ul class="p-4 space-y-2">
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
회계 요약
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
알림
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-3">
|
||
<span class="text-sm font-medium">💰 매출/매입 관리</span>
|
||
</div>
|
||
<ul class="p-4 space-y-2">
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
전자세금계산서 발행/목록
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
카드 이용 내역
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
계좌 거래 내역
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-3">
|
||
<span class="text-sm font-medium">⚙️ 설정 및 연동</span>
|
||
</div>
|
||
<ul class="p-4 space-y-2">
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
회사 정보 관리
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
바로빌 연동 설정
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-center">
|
||
<span class="w-1.5 h-1.5 bg-teal-500 rounded-full mr-2"></span>
|
||
사용자 권한 설정
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 데이터 관리 전략 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 fade-in fade-in-4">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">🛡️</span> 멀티테넌시 데이터 관리
|
||
</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="bg-gradient-to-br from-slate-50 to-white rounded-lg p-5 border border-slate-200">
|
||
<h3 class="font-medium text-slate-700 mb-3 flex items-center">
|
||
<span class="text-teal-600 mr-2">🔒</span> 데이터 격리
|
||
</h3>
|
||
<ul class="space-y-2">
|
||
<li class="text-sm text-slate-600 flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
모든 테이블에 TenantID 부여
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
회원사 간 데이터 혼선 방지
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
테넌트별 고유 연동키 동적 매핑
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-slate-50 to-white rounded-lg p-5 border border-slate-200">
|
||
<h3 class="font-medium text-slate-700 mb-3 flex items-center">
|
||
<span class="text-teal-600 mr-2">⚠️</span> 보안 및 예외 처리
|
||
</h3>
|
||
<ul class="space-y-2">
|
||
<li class="text-sm text-slate-600 flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
HTTPS 통신 및 토큰 기반 보안
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
인증서 만료/API 한도 초과 알림
|
||
</li>
|
||
<li class="text-sm text-slate-600 flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
API 요청/응답 로그 기록
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- 탭 2: 매출/매입 관리 -->
|
||
<!-- ============================================ -->
|
||
<div id="sales" class="tab-content">
|
||
<!-- API 서비스 개요 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 border-l-4 border-teal-600 fade-in fade-in-1">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-lg font-bold text-slate-800 flex items-center">
|
||
<span class="mr-2">🔗</span> 바로빌 API 연동 서비스
|
||
</h2>
|
||
<a href="https://dev.barobill.co.kr" target="_blank" class="text-xs text-teal-600 hover:text-teal-700 flex items-center">
|
||
개발자센터 바로가기 →
|
||
</a>
|
||
</div>
|
||
<p class="text-slate-600 text-sm mb-4">
|
||
바로빌 개발자센터는 전자세금계산서, 카드/계좌 조회, 홈택스 매입매출 연동 등 B2B API 서비스를 제공합니다.
|
||
Java, Python, PHP, .NET, Node.js 등 HTTP 통신이 가능한 모든 개발언어를 지원합니다.
|
||
</p>
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||
<div class="bg-teal-50 rounded-lg p-3 text-center">
|
||
<div class="text-xl mb-1">📄</div>
|
||
<div class="text-xs font-medium text-slate-700">전자세금계산서</div>
|
||
</div>
|
||
<div class="bg-blue-50 rounded-lg p-3 text-center">
|
||
<div class="text-xl mb-1">💳</div>
|
||
<div class="text-xs font-medium text-slate-700">카드 사용내역</div>
|
||
</div>
|
||
<div class="bg-green-50 rounded-lg p-3 text-center">
|
||
<div class="text-xl mb-1">🏦</div>
|
||
<div class="text-xs font-medium text-slate-700">계좌 입출금</div>
|
||
</div>
|
||
<div class="bg-amber-50 rounded-lg p-3 text-center">
|
||
<div class="text-xl mb-1">📊</div>
|
||
<div class="text-xs font-medium text-slate-700">홈택스 연동</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 전자세금계산서 API -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-2">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">📄</span> 전자세금계산서 API
|
||
</h2>
|
||
|
||
<!-- 발급 유형 -->
|
||
<div class="mb-6">
|
||
<h3 class="font-medium text-slate-700 mb-3">발급 유형</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="bg-gradient-to-br from-amber-50 to-white rounded-lg p-4 border border-amber-200 api-card transition-all">
|
||
<div class="flex items-center mb-2">
|
||
<span class="w-8 h-8 bg-amber-500 text-white rounded-lg flex items-center justify-center text-sm font-bold mr-2">정</span>
|
||
<span class="font-medium text-slate-700">정발행</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">공급자가 세금계산서 작성 후 인증서로 전자서명하여 발급하고, 공급받는자에게 이메일로 발송</p>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-blue-50 to-white rounded-lg p-4 border border-blue-200 api-card transition-all">
|
||
<div class="flex items-center mb-2">
|
||
<span class="w-8 h-8 bg-blue-500 text-white rounded-lg flex items-center justify-center text-sm font-bold mr-2">역</span>
|
||
<span class="font-medium text-slate-700">역발행</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">공급받는자가 세금계산서 작성 후 공급자에게 발급 요청, 공급자가 확인 후 전자서명하여 발급</p>
|
||
</div>
|
||
<div class="bg-gradient-to-br from-purple-50 to-white rounded-lg p-4 border border-purple-200 api-card transition-all">
|
||
<div class="flex items-center mb-2">
|
||
<span class="w-8 h-8 bg-purple-500 text-white rounded-lg flex items-center justify-center text-sm font-bold mr-2">위</span>
|
||
<span class="font-medium text-slate-700">위수탁발행</span>
|
||
</div>
|
||
<p class="text-xs text-slate-500">공급자(위탁자)를 대신하여 수탁자가 세금계산서를 작성 및 발급(전자서명)</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 주요 API 메소드 -->
|
||
<div class="mb-6">
|
||
<h3 class="font-medium text-slate-700 mb-3">주요 API 메소드</h3>
|
||
<div class="overflow-x-auto custom-scroll">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="bg-slate-100">
|
||
<th class="text-left px-4 py-3 font-medium text-slate-700 rounded-tl-lg">메소드명</th>
|
||
<th class="text-left px-4 py-3 font-medium text-slate-700">기능</th>
|
||
<th class="text-left px-4 py-3 font-medium text-slate-700 rounded-tr-lg">비고</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">RegistTaxInvoice</code></td>
|
||
<td class="px-4 py-3 text-slate-600">세금계산서 임시저장</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">발급 전 데이터 저장</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">IssueTaxInvoiceEx</code></td>
|
||
<td class="px-4 py-3 text-slate-600">세금계산서 발급</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">문자, 첨부파일 지원</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">GetTaxInvoiceNK</code></td>
|
||
<td class="px-4 py-3 text-slate-600">세금계산서 내용 조회</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">국세청승인번호 사용</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">GetTaxInvoiceStatesIK</code></td>
|
||
<td class="px-4 py-3 text-slate-600">세금계산서 상태 조회</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">최대 100건</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">GetTaxInvoiceSalesList</code></td>
|
||
<td class="px-4 py-3 text-slate-600">매출 세금계산서 목록 조회</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">국세청 전송완료 건</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">GetTaxInvoicePurchaseList</code></td>
|
||
<td class="px-4 py-3 text-slate-600">매입 세금계산서 목록 조회</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">국세청 전송완료 건</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">ProcTaxInvoice</code></td>
|
||
<td class="px-4 py-3 text-slate-600">세금계산서 승인/거부/취소</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">역발행 처리용</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3"><code class="text-teal-600 bg-teal-50 px-2 py-1 rounded text-xs">GetTaxInvoicesPrintURL</code></td>
|
||
<td class="px-4 py-3 text-slate-600">세금계산서 인쇄 URL</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">최대 50건</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 세금계산서 필드 명세 -->
|
||
<div>
|
||
<h3 class="font-medium text-slate-700 mb-3">세금계산서 객체 필드 명세</h3>
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||
<!-- 기본 정보 -->
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-2 text-sm font-medium">기본 정보</div>
|
||
<div class="p-4 space-y-2 text-xs">
|
||
<div class="flex justify-between"><span class="text-slate-600">writeDate</span><span><span class="field-required">[필수]</span> 작성일자 (yyyyMMdd)</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">issueType</span><span><span class="field-required">[필수]</span> 발행형태</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">purposeType</span><span><span class="field-required">[필수]</span> 영수/청구 구분</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">taxType</span><span><span class="field-required">[필수]</span> 과세형태</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">chargeDirection</span><span><span class="field-required">[필수]</span> 과금방향</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 공급자 정보 -->
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-2 text-sm font-medium">공급자 정보</div>
|
||
<div class="p-4 space-y-2 text-xs">
|
||
<div class="flex justify-between"><span class="text-slate-600">invoicerCorpNum</span><span><span class="field-required">[필수]</span> 사업자번호 (10자리)</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoicerCorpName</span><span><span class="field-required">[필수]</span> 상호</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoicerMgtKey</span><span><span class="field-required">[필수]</span> 문서번호 (1~24자리)</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoicerCEOName</span><span><span class="field-required">[필수]</span> 대표자 성명</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoicerEmail</span><span><span class="field-optional">[선택]</span> 담당자 이메일</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 공급받는자 정보 -->
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-2 text-sm font-medium">공급받는자 정보</div>
|
||
<div class="p-4 space-y-2 text-xs">
|
||
<div class="flex justify-between"><span class="text-slate-600">invoiceeCorpNum</span><span><span class="field-required">[필수]</span> 사업자번호</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoiceeCorpName</span><span><span class="field-required">[필수]</span> 상호</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoiceeType</span><span><span class="field-required">[필수]</span> 구분 (사업자/개인/외국인)</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoiceeCEOName</span><span><span class="field-required">[필수]</span> 대표자 성명</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">invoiceeEmail1</span><span><span class="field-optional">[선택]</span> 담당자 이메일</span></div>
|
||
</div>
|
||
</div>
|
||
<!-- 금액 정보 -->
|
||
<div class="border border-slate-200 rounded-lg overflow-hidden">
|
||
<div class="bg-slate-800 text-white px-4 py-2 text-sm font-medium">금액 정보</div>
|
||
<div class="p-4 space-y-2 text-xs">
|
||
<div class="flex justify-between"><span class="text-slate-600">supplyCostTotal</span><span><span class="field-required">[필수]</span> 공급가액 합계</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">taxTotal</span><span><span class="field-required">[필수]</span> 세액 합계</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">totalAmount</span><span><span class="field-required">[필수]</span> 합계금액</span></div>
|
||
<div class="flex justify-between"><span class="text-slate-600">remark1~3</span><span><span class="field-optional">[선택]</span> 비고</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 카드 사용내역 API -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-3">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">💳</span> 카드 사용내역 조회 API
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- 서비스 설명 -->
|
||
<div>
|
||
<h3 class="font-medium text-slate-700 mb-3">서비스 개요</h3>
|
||
<div class="bg-blue-50 rounded-lg p-4 mb-4">
|
||
<p class="text-sm text-slate-600 mb-3">
|
||
개인/법인카드의 사용내역을 자동으로 수집하여 사용일시, 승인번호, 승인구분, 거래금액, 과세유형 정보를 제공합니다.
|
||
</p>
|
||
<ul class="text-xs text-slate-500 space-y-1">
|
||
<li class="flex items-center"><span class="text-blue-500 mr-2">•</span>매일 자동 업데이트</li>
|
||
<li class="flex items-center"><span class="text-blue-500 mr-2">•</span>기간별/카드별 조회 가능</li>
|
||
<li class="flex items-center"><span class="text-blue-500 mr-2">•</span>가맹점 과세유형 조회 지원</li>
|
||
<li class="flex items-center"><span class="text-blue-500 mr-2">•</span>부가세 신고 자료 활용</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3 class="font-medium text-slate-700 mb-3">조회 가능 필드</h3>
|
||
<div class="bg-slate-50 rounded-lg p-4">
|
||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>사용일시</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>승인번호</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>카드번호</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>거래금액</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>가맹점명</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>가맹점 사업자번호</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>승인구분</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-blue-500 rounded-full mr-2"></span>과세유형</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API 메소드 -->
|
||
<div>
|
||
<h3 class="font-medium text-slate-700 mb-3">주요 API 메소드</h3>
|
||
<div class="space-y-3">
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-blue-600 bg-blue-50 px-2 py-1 rounded text-xs font-medium">RegistCard</code>
|
||
<p class="text-xs text-slate-500 mt-2">카드 정보 등록 (카드번호, 유효기간, 비밀번호)</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-blue-600 bg-blue-50 px-2 py-1 rounded text-xs font-medium">GetCardLog</code>
|
||
<p class="text-xs text-slate-500 mt-2">카드 사용내역 조회 (기간, 카드번호 지정)</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-blue-600 bg-blue-50 px-2 py-1 rounded text-xs font-medium">GetCardList</code>
|
||
<p class="text-xs text-slate-500 mt-2">등록된 카드 목록 조회</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-blue-600 bg-blue-50 px-2 py-1 rounded text-xs font-medium">DeleteCard</code>
|
||
<p class="text-xs text-slate-500 mt-2">등록된 카드 삭제</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 계좌 입출금 API -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-4">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">🏦</span> 계좌 입출금내역 조회 API
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||
<!-- 서비스 설명 -->
|
||
<div>
|
||
<h3 class="font-medium text-slate-700 mb-3">서비스 개요</h3>
|
||
<div class="bg-green-50 rounded-lg p-4 mb-4">
|
||
<p class="text-sm text-slate-600 mb-3">
|
||
총 20개 뱅킹의 기업/개인 계좌 입출금내역을 수집하여 입출금일시, 입출금액, 잔액, 이체내역 등의 정보를 제공합니다.
|
||
</p>
|
||
<ul class="text-xs text-slate-500 space-y-1">
|
||
<li class="flex items-center"><span class="text-green-500 mr-2">•</span>은행 직접 접속 불필요</li>
|
||
<li class="flex items-center"><span class="text-green-500 mr-2">•</span>다수 은행 통합 조회</li>
|
||
<li class="flex items-center"><span class="text-green-500 mr-2">•</span>다양한 조회 주기 설정</li>
|
||
<li class="flex items-center"><span class="text-green-500 mr-2">•</span>자동 수집 기능</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<h3 class="font-medium text-slate-700 mb-3">조회 가능 필드</h3>
|
||
<div class="bg-slate-50 rounded-lg p-4">
|
||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>거래일시</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>입금액</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>출금액</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>잔액</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>거래점</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>적요</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>거래구분</div>
|
||
<div class="flex items-center"><span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>메모</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API 메소드 -->
|
||
<div>
|
||
<h3 class="font-medium text-slate-700 mb-3">주요 API 메소드</h3>
|
||
<div class="space-y-3">
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-green-600 bg-green-50 px-2 py-1 rounded text-xs font-medium">RegistBankAccount</code>
|
||
<p class="text-xs text-slate-500 mt-2">계좌 정보 등록 (은행코드, 계좌번호, 비밀번호)</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-green-600 bg-green-50 px-2 py-1 rounded text-xs font-medium">GetBankAccountLog</code>
|
||
<p class="text-xs text-slate-500 mt-2">계좌 입출금내역 조회 (기간, 계좌번호 지정)</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-green-600 bg-green-50 px-2 py-1 rounded text-xs font-medium">GetBankAccountList</code>
|
||
<p class="text-xs text-slate-500 mt-2">등록된 계좌 목록 조회</p>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4 hover:shadow-md transition-shadow">
|
||
<code class="text-green-600 bg-green-50 px-2 py-1 rounded text-xs font-medium">GetBankAccountBalance</code>
|
||
<p class="text-xs text-slate-500 mt-2">계좌 잔액 조회</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 지원 은행 -->
|
||
<div class="mt-6">
|
||
<h3 class="font-medium text-slate-700 mb-3">지원 금융기관 (20개)</h3>
|
||
<div class="flex flex-wrap gap-2">
|
||
<?php
|
||
$banks = ['국민은행', '신한은행', '우리은행', '하나은행', 'NH농협', '기업은행', 'SC제일', '씨티은행', '케이뱅크', '카카오뱅크', '토스뱅크', '새마을금고', '신협', '우체국', '수협', '대구은행', '부산은행', '광주은행', '전북은행', '제주은행'];
|
||
foreach($banks as $bank) {
|
||
echo '<span class="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs">'.$bank.'</span>';
|
||
}
|
||
?>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 홈택스 매입매출 연동 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 fade-in fade-in-4">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">📊</span> 홈택스 매입매출자료 연동 API
|
||
</h2>
|
||
|
||
<div class="bg-amber-50 rounded-lg p-4 mb-4">
|
||
<p class="text-sm text-slate-600">
|
||
홈택스에 신고/수집된 세금계산서, 현금영수증, 신용카드 매입내역 등을 API로 조회하여 부가세 신고 및 결산 자료로 활용할 수 있습니다.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="border border-slate-200 rounded-lg p-4">
|
||
<div class="flex items-center mb-3">
|
||
<span class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center mr-3">📄</span>
|
||
<span class="font-medium text-slate-700 text-sm">세금계산서</span>
|
||
</div>
|
||
<ul class="text-xs text-slate-500 space-y-1">
|
||
<li>• 매출/매입 세금계산서 조회</li>
|
||
<li>• 국세청 전송 상태 확인</li>
|
||
<li>• 수정세금계산서 이력</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4">
|
||
<div class="flex items-center mb-3">
|
||
<span class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center mr-3">🧾</span>
|
||
<span class="font-medium text-slate-700 text-sm">현금영수증</span>
|
||
</div>
|
||
<ul class="text-xs text-slate-500 space-y-1">
|
||
<li>• 발급/취소 내역 조회</li>
|
||
<li>• 매입자료 수집</li>
|
||
<li>• 공제/불공제 구분</li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4">
|
||
<div class="flex items-center mb-3">
|
||
<span class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center mr-3">💳</span>
|
||
<span class="font-medium text-slate-700 text-sm">신용카드 매입</span>
|
||
</div>
|
||
<ul class="text-xs text-slate-500 space-y-1">
|
||
<li>• 매입세액 공제 자료</li>
|
||
<li>• 가맹점별 내역 조회</li>
|
||
<li>• 과세유형 자동 분류</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- 탭 3: 설정 및 연동 -->
|
||
<!-- ============================================ -->
|
||
<div id="settings" class="tab-content">
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 border-l-4 border-teal-600 fade-in fade-in-1">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">⚙️</span> 설정 및 연동 관리
|
||
</h2>
|
||
<p class="text-slate-600 text-sm mb-6">바로빌 API 연동을 위한 회사 정보, 인증서, 사용자 권한을 관리합니다.</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="border border-slate-200 rounded-lg p-5 hover:shadow-md transition-shadow">
|
||
<div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4">
|
||
<span class="text-2xl">🏢</span>
|
||
</div>
|
||
<h3 class="font-medium text-slate-700 mb-2">회사 정보 관리</h3>
|
||
<p class="text-xs text-slate-500 mb-3">사업자등록번호, 상호, 대표자, 업태/종목 등 기본 정보 관리</p>
|
||
<button onclick="openModal('companyModal')" class="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs py-2 rounded-lg transition-colors">설정하기</button>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-5 hover:shadow-md transition-shadow">
|
||
<div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4">
|
||
<span class="text-2xl">🔐</span>
|
||
</div>
|
||
<h3 class="font-medium text-slate-700 mb-2">바로빌 연동 설정</h3>
|
||
<p class="text-xs text-slate-500 mb-3">API 연동키, 공인인증서 등록, 연동 상태 확인</p>
|
||
<button onclick="openModal('apiModal')" class="w-full bg-teal-600 hover:bg-teal-700 text-white text-xs py-2 rounded-lg transition-colors">연동 관리</button>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-5 hover:shadow-md transition-shadow">
|
||
<div class="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4">
|
||
<span class="text-2xl">👥</span>
|
||
</div>
|
||
<h3 class="font-medium text-slate-700 mb-2">사용자 권한 설정</h3>
|
||
<p class="text-xs text-slate-500 mb-3">담당자별 접근 권한, 발급 권한, 조회 범위 설정</p>
|
||
<button onclick="openModal('permissionModal')" class="w-full bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs py-2 rounded-lg transition-colors">권한 관리</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 연동 가이드 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 fade-in fade-in-2">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">📖</span> 연동 가이드
|
||
</h2>
|
||
|
||
<div class="space-y-4">
|
||
<div class="flex items-start">
|
||
<span class="w-8 h-8 bg-teal-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-4 flex-shrink-0">1</span>
|
||
<div>
|
||
<h4 class="font-medium text-slate-700 mb-1">바로빌 개발자센터 회원가입</h4>
|
||
<p class="text-xs text-slate-500">dev.barobill.co.kr에서 회원가입 후 테스트 API 키를 발급받습니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="w-8 h-8 bg-teal-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-4 flex-shrink-0">2</span>
|
||
<div>
|
||
<h4 class="font-medium text-slate-700 mb-1">회원사 등록 (RegistCorp)</h4>
|
||
<p class="text-xs text-slate-500">사업자 정보를 입력하고 RegistCorp API를 호출하여 연동키를 발급받습니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="w-8 h-8 bg-teal-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-4 flex-shrink-0">3</span>
|
||
<div>
|
||
<h4 class="font-medium text-slate-700 mb-1">공인인증서 등록</h4>
|
||
<p class="text-xs text-slate-500">바로빌 전용 플러그인을 통해 세금계산서 발급용 공인인증서를 등록합니다.</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="w-8 h-8 bg-teal-600 text-white rounded-full flex items-center justify-center text-sm font-bold mr-4 flex-shrink-0">4</span>
|
||
<div>
|
||
<h4 class="font-medium text-slate-700 mb-1">테스트 및 운영 전환</h4>
|
||
<p class="text-xs text-slate-500">테스트베드에서 API 연동을 검증한 후, 운영 환경으로 전환합니다.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- 탭 4: 과금정책 -->
|
||
<!-- ============================================ -->
|
||
<div id="pricing" class="tab-content">
|
||
<!-- 파트너 소개 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 border-l-4 border-teal-600 fade-in fade-in-1">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h2 class="text-lg font-bold text-slate-800 flex items-center">
|
||
<span class="mr-2">🏢</span> 바로빌 할인형 연동 서비스
|
||
</h2>
|
||
<span class="bg-teal-100 text-teal-700 text-xs px-3 py-1 rounded-full font-medium">할인형 연동</span>
|
||
</div>
|
||
<div class="bg-gradient-to-r from-teal-50 to-blue-50 rounded-lg p-5 mb-4">
|
||
<p class="text-slate-700 text-sm mb-3">
|
||
본 서비스는 바로빌(Barobill)의 공식 API를 활용하여 <strong>할인된 계약 단가</strong>로 제공되는 회계 자동화 솔루션입니다.
|
||
정산요율은 '바로빌 100% / 파트너 0%' 방식으로, 별도의 판매 마진 없이 최저가 수준의 비용으로 서비스를 이용하실 수 있습니다.
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="bg-white text-slate-600 text-xs px-3 py-1 rounded-full border border-slate-200">바로빌 공식 연동</span>
|
||
<span class="bg-white text-slate-600 text-xs px-3 py-1 rounded-full border border-slate-200">최저가 할인 단가</span>
|
||
<span class="bg-white text-slate-600 text-xs px-3 py-1 rounded-full border border-slate-200">멀티테넌시 지원</span>
|
||
<span class="bg-white text-slate-600 text-xs px-3 py-1 rounded-full border border-slate-200">종량제 및 월정액</span>
|
||
</div>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="text-center p-4 bg-slate-50 rounded-lg">
|
||
<div class="text-3xl font-bold text-teal-600 mb-1">부가세 별도</div>
|
||
<div class="text-xs text-slate-500">모든 단가는 부가세 별도 기준</div>
|
||
</div>
|
||
<div class="text-center p-4 bg-slate-50 rounded-lg">
|
||
<div class="text-3xl font-bold text-teal-600 mb-1">건당 7.7원~</div>
|
||
<div class="text-xs text-slate-500">카카오 알림톡 기준</div>
|
||
</div>
|
||
<div class="text-center p-4 bg-slate-50 rounded-lg">
|
||
<div class="text-3xl font-bold text-teal-600 mb-1">정산 100%</div>
|
||
<div class="text-xs text-slate-500">투명한 과금 체계</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 요금 정책 요약 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-2">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2"><3E></span> 요금 체계 요약
|
||
</h2>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<div class="border border-slate-100 rounded-lg p-4">
|
||
<div class="text-sm font-bold text-slate-700 mb-2 flex items-center">
|
||
<span class="w-2 h-4 bg-teal-500 rounded-sm mr-2"></span> 건당 과금 (18개 서비스)
|
||
</div>
|
||
<ul class="text-xs text-slate-600 space-y-2">
|
||
<li class="flex justify-between"><span>단가 범위</span><span class="font-medium text-teal-600">7.7원 ~ 110원</span></li>
|
||
<li class="flex justify-between"><span>과금 방식</span><span>사용량 × 단가</span></li>
|
||
<li class="flex justify-between"><span>주요 서비스</span><span>세금계산서, 문자, 카카오톡</span></li>
|
||
</ul>
|
||
</div>
|
||
<div class="border border-slate-100 rounded-lg p-4">
|
||
<div class="text-sm font-bold text-slate-700 mb-2 flex items-center">
|
||
<span class="w-2 h-4 bg-blue-500 rounded-sm mr-2"></span> 월정액 (9개 서비스)
|
||
</div>
|
||
<ul class="text-xs text-slate-600 space-y-2">
|
||
<li class="flex justify-between"><span>단가 범위</span><span class="font-medium text-blue-600">3,300원 ~ 33,000원</span></li>
|
||
<li class="flex justify-between"><span>과금 방식</span><span>매월 고정 요금</span></li>
|
||
<li class="flex justify-between"><span>주요 서비스</span><span>홈택스, 계좌 스크래핑</span></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 요금표 -->
|
||
<div class="overflow-x-auto custom-scroll mb-8">
|
||
<h3 class="text-sm font-bold text-slate-700 mb-4 flex items-center">
|
||
<span class="mr-2"><3E></span> 1. 건당 과금 서비스
|
||
</h3>
|
||
<table class="w-full text-sm mb-6">
|
||
<thead>
|
||
<tr class="bg-slate-800 text-white">
|
||
<th class="text-left px-4 py-3 font-medium rounded-tl-lg">서비스 항목</th>
|
||
<th class="text-center px-4 py-3 font-medium">건당 단가</th>
|
||
<th class="text-left px-4 py-3 font-medium rounded-tr-lg">비고</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
<tr class="bg-teal-50"><td colspan="3" class="px-4 py-2 font-medium text-teal-700 text-xs">전자문서 발행</td></tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-amber-100 rounded flex items-center justify-center mr-2 text-xs">📄</span> 세금계산서</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">110원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">전자세금계산서</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-slate-100 rounded flex items-center justify-center mr-2 text-xs"><3E></span> 종지세금계산서 / 대량발행</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">55원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">거래명세서, 청구서, 견적서 등 동일</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-green-100 rounded flex items-center justify-center mr-2 text-xs">🧾</span> 현금영수증</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">11원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">-</td>
|
||
</tr>
|
||
<tr class="bg-blue-50"><td colspan="3" class="px-4 py-2 font-medium text-blue-700 text-xs">메시징 서비스</td></tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center mr-2 text-xs"><3E></span> 카카오 알림톡</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">7.7원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">최저가 권장</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center mr-2 text-xs">📱</span> 문자 (SMS)</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">16.5원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">90byte 이하</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-blue-100 rounded flex items-center justify-center mr-2 text-xs">📱</span> 문자 (LMS)</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">38.5원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">2,000byte 이하</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-purple-100 rounded flex items-center justify-center mr-2 text-xs">📠</span> 팩스 (Fax)</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">55원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">-</td>
|
||
</tr>
|
||
<tr class="bg-slate-50"><td colspan="3" class="px-4 py-2 font-medium text-slate-700 text-xs">기타 조회</td></tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-slate-200 rounded flex items-center justify-center mr-2 text-xs">🔍</span> 사업자등록 상태조회</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">11원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">휴/폐업 실시간 확인</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<h3 class="text-sm font-bold text-slate-700 mb-4 mt-8 flex items-center">
|
||
<span class="mr-2">📅</span> 2. 월정액 서비스
|
||
</h3>
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="bg-slate-800 text-white">
|
||
<th class="text-left px-4 py-3 font-medium rounded-tl-lg">서비스 항목</th>
|
||
<th class="text-center px-4 py-3 font-medium">월 요금</th>
|
||
<th class="text-left px-4 py-3 font-medium rounded-tr-lg">비고</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
<tr class="bg-amber-50"><td colspan="3" class="px-4 py-2 font-medium text-amber-700 text-xs">홈택스 자동 수집</td></tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3">홈택스 매입매출조회 (세금계산서/현금영수증)</td>
|
||
<td class="px-4 py-3 text-center font-bold text-blue-600">33,000원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">각 항목별 자동 수집</td>
|
||
</tr>
|
||
<tr class="bg-green-50"><td colspan="3" class="px-4 py-2 font-medium text-green-700 text-xs">금융 스크래핑</td></tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3">카드 매출 조회</td>
|
||
<td class="px-4 py-3 text-center font-bold text-blue-600">3,300원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">최저가</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3">계좌 조회 (1일 주기)</td>
|
||
<td class="px-4 py-3 text-center font-bold text-blue-600">3,300원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">최저가</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3">계좌 조회 (10분 주기)</td>
|
||
<td class="px-4 py-3 text-center font-bold text-blue-600">6,600원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">실시간형</td>
|
||
</tr>
|
||
<tr class="bg-purple-50"><td colspan="3" class="px-4 py-2 font-medium text-purple-700 text-xs">기타 월정액</td></tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3">080 수신거부 번호</td>
|
||
<td class="px-4 py-3 text-center font-bold text-blue-600">31,900원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">번호 유지비 포함</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 월별 시나리오 -->
|
||
<div class="mb-8">
|
||
<h3 class="text-sm font-bold text-slate-700 mb-4 flex items-center">
|
||
<span class="mr-2">📊</span> 월별 예상 비용 시나리오
|
||
</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||
<div class="text-teal-600 font-bold mb-2">소규모 기업</div>
|
||
<ul class="text-xs text-slate-600 space-y-1 mb-4">
|
||
<li>세금계산서 100건</li>
|
||
<li>알림톡 500건</li>
|
||
<li>계좌조회(1일) 1회</li>
|
||
</ul>
|
||
<div class="text-lg font-bold text-slate-800">약 51,150원</div>
|
||
</div>
|
||
<div class="bg-teal-50 rounded-lg p-4 border border-teal-200 ring-2 ring-teal-400 ring-offset-2">
|
||
<div class="text-teal-700 font-bold mb-2">중규모 기업 (권장)</div>
|
||
<ul class="text-xs text-slate-600 space-y-1 mb-4">
|
||
<li>세금계산서 500건</li>
|
||
<li>알림톡 2,000건</li>
|
||
<li>홈택스 조회 포함</li>
|
||
</ul>
|
||
<div class="text-lg font-bold text-teal-700">약 110,000원</div>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
|
||
<div class="text-blue-600 font-bold mb-2">대규모 기업</div>
|
||
<ul class="text-xs text-slate-600 space-y-1 mb-4">
|
||
<li>세금계산서 2,000건</li>
|
||
<li>알림톡 10,000건</li>
|
||
<li>계좌/홈택스 풀세트</li>
|
||
</ul>
|
||
<div class="text-lg font-bold text-slate-800">약 376,200원</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-5">
|
||
<h4 class="font-medium text-blue-800 mb-3 flex items-center text-sm">
|
||
<span class="mr-2">💡</span> 검토 및 권장 사항
|
||
</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<ul class="text-xs text-blue-700 space-y-2">
|
||
<li class="flex items-start"><span class="mr-2">•</span> <strong>알림톡 우선 활용</strong>: SMS(16.5원) 대비 알림톡(7.7원)이 약 53% 저렴하여 비용 절감에 효과적입니다.</li>
|
||
<li class="flex items-start"><span class="mr-2">•</span> <strong>계좌 주기 최적화</strong>: 실시간 확인이 불필요한 경우 1일 주기(3,300원)를 선택하여 고정비를 낮출 수 있습니다.</li>
|
||
</ul>
|
||
<ul class="text-xs text-blue-700 space-y-2">
|
||
<li class="flex items-start"><span class="mr-2">•</span> <strong>홈택스 연동</strong>: 매입/매출 자동 수집(33,000원)을 통해 경리 업무의 90% 이상을 자동화할 수 있습니다.</li>
|
||
<li class="flex items-start"><span class="mr-2">•</span> <strong>사업자 상태조회</strong>: 건당 11원으로 거래처의 휴/폐업 여부를 자동으로 판별하여 리스크를 관리하세요.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 회원사 가입 프로세스 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in fade-in-4">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">📋</span> 회원사 가입 프로세스
|
||
</h2>
|
||
<p class="text-sm text-slate-600 mb-4">코드브릿지엑스 솔루션을 통해 바로빌 API 서비스를 이용하려면 아래 절차를 따르세요.</p>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||
<div class="relative">
|
||
<div class="bg-gradient-to-br from-teal-500 to-teal-600 text-white rounded-xl p-4 h-full">
|
||
<div class="absolute -top-3 -left-3 w-8 h-8 bg-white text-teal-600 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">1</div>
|
||
<div class="text-2xl mb-2 mt-2">📝</div>
|
||
<h4 class="font-medium text-sm mb-1">회원사 등록</h4>
|
||
<p class="text-xs text-teal-100">사업자 정보 입력 및 이용약관 동의</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl p-4 h-full">
|
||
<div class="absolute -top-3 -left-3 w-8 h-8 bg-white text-blue-600 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">2</div>
|
||
<div class="text-2xl mb-2 mt-2">🔑</div>
|
||
<h4 class="font-medium text-sm mb-1">연동키 발급</h4>
|
||
<p class="text-xs text-blue-100">RegistCorp API로 회원사 고유 연동키 생성</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl p-4 h-full">
|
||
<div class="absolute -top-3 -left-3 w-8 h-8 bg-white text-purple-600 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">3</div>
|
||
<div class="text-2xl mb-2 mt-2">🔐</div>
|
||
<h4 class="font-medium text-sm mb-1">인증서 등록</h4>
|
||
<p class="text-xs text-purple-100">세금계산서 발급용 공인인증서 등록</p>
|
||
</div>
|
||
</div>
|
||
<div class="relative">
|
||
<div class="bg-gradient-to-br from-amber-500 to-amber-600 text-white rounded-xl p-4 h-full">
|
||
<div class="absolute -top-3 -left-3 w-8 h-8 bg-white text-amber-600 rounded-full flex items-center justify-center font-bold text-sm shadow-lg">4</div>
|
||
<div class="text-2xl mb-2 mt-2">💳</div>
|
||
<h4 class="font-medium text-sm mb-1">포인트 충전</h4>
|
||
<p class="text-xs text-amber-100">선불 포인트 충전 후 서비스 이용 시작</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 과금 방식 상세 -->
|
||
<section class="bg-white rounded-xl shadow-sm p-6 fade-in fade-in-4">
|
||
<h2 class="text-lg font-bold text-slate-800 mb-4 flex items-center">
|
||
<span class="mr-2">⚙️</span> 과금 방식 상세
|
||
</h2>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
<!-- 포인트 시스템 -->
|
||
<div class="border border-slate-200 rounded-lg p-5">
|
||
<h3 class="font-medium text-slate-700 mb-4 flex items-center">
|
||
<span class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center mr-2">💎</span>
|
||
포인트 시스템
|
||
</h3>
|
||
<ul class="space-y-3 text-sm text-slate-600">
|
||
<li class="flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
<div><strong>선불 충전</strong>: 포인트를 미리 충전한 후 서비스 이용 시 차감</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
<div><strong>자동 알림</strong>: 잔액 부족 시 이메일/SMS 알림 발송</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
<div><strong>사용 내역</strong>: 실시간 포인트 사용 내역 조회 가능</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-teal-500 mr-2 mt-1">•</span>
|
||
<div><strong>유효기간</strong>: 충전일로부터 5년간 유효</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 정산 방식 -->
|
||
<div class="border border-slate-200 rounded-lg p-5">
|
||
<h3 class="font-medium text-slate-700 mb-4 flex items-center">
|
||
<span class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-2">📊</span>
|
||
정산 및 결제
|
||
</h3>
|
||
<ul class="space-y-3 text-sm text-slate-600">
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2 mt-1">•</span>
|
||
<div><strong>결제 수단</strong>: 신용카드, 실시간 계좌이체, 가상계좌</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2 mt-1">•</span>
|
||
<div><strong>세금계산서</strong>: 충전 금액에 대해 전자세금계산서 발급</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2 mt-1">•</span>
|
||
<div><strong>정산 주기</strong>: 월별 사용 내역 리포트 제공</div>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-blue-500 mr-2 mt-1">•</span>
|
||
<div><strong>대량 할인</strong>: 월 사용량에 따른 볼륨 디스카운트</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API 호출 예시 -->
|
||
<div class="mt-6">
|
||
<h3 class="font-medium text-slate-700 mb-3">회원사 포인트 조회 API</h3>
|
||
<div class="bg-slate-900 rounded-lg p-4 text-sm font-mono overflow-x-auto">
|
||
<div class="text-slate-400">// 회원사 포인트 잔액 조회</div>
|
||
<div class="text-green-400 mt-2">$balance = $barobill->GetBalance(</div>
|
||
<div class="text-slate-300 ml-4">"CERT_KEY", <span class="text-slate-500">// 파트너 인증키</span></div>
|
||
<div class="text-slate-300 ml-4">"1234567890" <span class="text-slate-500">// 회원사 사업자번호</span></div>
|
||
<div class="text-green-400">);</div>
|
||
<div class="text-slate-400 mt-3">// 반환값: 현재 잔액 (원)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 문의 안내 -->
|
||
<div class="mt-6 bg-gradient-to-r from-slate-800 to-slate-900 rounded-lg p-5 text-white">
|
||
<div class="flex flex-col md:flex-row items-center justify-between">
|
||
<div class="mb-4 md:mb-0">
|
||
<h4 class="font-medium mb-1">과금 정책 문의</h4>
|
||
<p class="text-sm text-slate-300">대량 사용, 맞춤 요금제 등 문의사항이 있으시면 연락주세요.</p>
|
||
</div>
|
||
<div class="flex gap-3">
|
||
<a href="tel:070-4040-5617" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm transition-colors flex items-center">
|
||
<span class="mr-2">📞</span> 070-4040-5617
|
||
</a>
|
||
<a href="https://dev.barobill.co.kr" target="_blank" class="bg-slate-700 hover:bg-slate-600 text-white px-4 py-2 rounded-lg text-sm transition-colors flex items-center">
|
||
<span class="mr-2">🌐</span> 개발자센터
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- 상세 단가표 (Shadcn Style) -->
|
||
<!-- ============================================ -->
|
||
<div class="mt-12 pt-12 border-t border-slate-200 fade-in fade-in-4">
|
||
<div class="mb-8">
|
||
<div class="flex items-center gap-3 mb-2">
|
||
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-teal-500 to-teal-600 flex items-center justify-center shadow-lg">
|
||
<svg class="w-7 h-7 text-white" 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"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-2xl font-bold text-slate-900">바로빌 API 구간별 상세 단가표</h2>
|
||
<p class="text-sm text-slate-500">전체 구간별 할인 요율 및 계산 예시 · VAT 별도</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pricing Tabs -->
|
||
<div class="bg-slate-100 p-1 rounded-lg inline-flex mb-6 gap-1 flex-wrap border border-slate-200">
|
||
<button onclick="showPricingTab('all')" id="tab-pricing-all" class="pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all pricing-tab-active">전체 보기</button>
|
||
<button onclick="showPricingTab('tax')" id="tab-pricing-tax" class="pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-slate-600 hover:text-slate-900">전자세금계산서</button>
|
||
<button onclick="showPricingTab('account')" id="tab-pricing-account" class="pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-slate-600 hover:text-slate-900">계좌조회</button>
|
||
<button onclick="showPricingTab('card')" id="tab-pricing-card" class="pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-slate-600 hover:text-slate-900">카드</button>
|
||
<button onclick="showPricingTab('hometax')" id="tab-pricing-hometax" class="pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-slate-600 hover:text-slate-900">홈택스</button>
|
||
</div>
|
||
|
||
<!-- Card: Tax -->
|
||
<div class="pricing-card mb-6" id="card-pricing-tax">
|
||
<div class="p-6 border-b border-slate-100">
|
||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 rounded-xl bg-emerald-100 flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-slate-900">전자세금계산서</h2>
|
||
<p class="text-sm text-slate-500">발급 건당 과금 · 6개 구간</p>
|
||
</div>
|
||
</div>
|
||
<span class="pricing-badge bg-emerald-100 text-emerald-700 text-sm px-3 py-1">건당 50~100원</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6 border-b border-slate-100">
|
||
<h3 class="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
|
||
<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="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
|
||
구간별 기본 단가
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="pricing-table-header">
|
||
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-slate-600">구간</th>
|
||
<th class="text-left py-3 px-4 font-medium text-slate-600">발급건수</th>
|
||
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-slate-600">단가</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="pricing-tier-row border-b border-slate-50">
|
||
<td class="py-3 px-4"><span class="pricing-badge bg-slate-100 text-slate-700">기본</span></td>
|
||
<td class="py-3 px-4 text-slate-600">3,000건 이하</td>
|
||
<td class="py-3 px-4 text-right font-semibold text-slate-900">100원</td>
|
||
</tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50">
|
||
<td class="py-3 px-4"><span class="pricing-badge bg-teal-50 text-teal-700">1구간</span></td>
|
||
<td class="py-3 px-4 text-slate-600">3,001 ~ 4,000</td>
|
||
<td class="py-3 px-4 text-right font-semibold text-slate-900">90원</td>
|
||
</tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50">
|
||
<td class="py-3 px-4"><span class="pricing-badge bg-teal-50 text-teal-700">2구간</span></td>
|
||
<td class="py-3 px-4 text-slate-600">4,001 ~ 5,000</td>
|
||
<td class="py-3 px-4 text-right font-semibold text-slate-900">80원</td>
|
||
</tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50">
|
||
<td class="py-3 px-4"><span class="pricing-badge bg-teal-50 text-teal-700">3구간</span></td>
|
||
<td class="py-3 px-4 text-slate-600">5,001 ~ 8,000</td>
|
||
<td class="py-3 px-4 text-right font-semibold text-slate-900">70원</td>
|
||
</tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50">
|
||
<td class="py-3 px-4"><span class="pricing-badge bg-teal-50 text-teal-700">4구간</span></td>
|
||
<td class="py-3 px-4 text-slate-600">8,001 ~ 10,000</td>
|
||
<td class="py-3 px-4 text-right font-semibold text-slate-900">60원</td>
|
||
</tr>
|
||
<tr class="pricing-tier-row">
|
||
<td class="py-3 px-4"><span class="pricing-badge bg-purple-50 text-purple-700">5구간</span></td>
|
||
<td class="py-3 px-4 text-slate-600">10,000건 초과</td>
|
||
<td class="py-3 px-4 text-right font-semibold text-teal-600">50원</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<button onclick="togglePricingSection('tax-examples')" class="w-full flex items-center justify-between text-left mb-4">
|
||
<h3 class="text-sm font-semibold text-slate-700 flex items-center gap-2">
|
||
<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="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"></path></svg>
|
||
상세 계산 예시 (대표 사례)
|
||
</h3>
|
||
<svg id="tax-examples-icon" class="w-5 h-5 text-slate-400 pricing-rotate" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||
</button>
|
||
<div id="tax-examples" class="pricing-collapsible open space-y-4">
|
||
<div class="pricing-example-card rounded-lg p-4">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<span class="font-semibold text-slate-900 text-sm">📊 월 4,000건 발급 시</span>
|
||
<span class="pricing-badge bg-teal-100 text-teal-700">평균 98원</span>
|
||
</div>
|
||
<table class="w-full text-xs">
|
||
<thead><tr class="text-slate-500"><th class="text-left py-1">구간</th><th class="text-left py-1">수량</th><th class="text-right py-1">단가</th><th class="text-right py-1">금액</th></tr></thead>
|
||
<tbody>
|
||
<tr class="border-b border-slate-100"><td class="py-1 text-slate-600">기본 (3,000)</td><td>3,000</td><td class="text-right">100원</td><td class="text-right">300,000</td></tr>
|
||
<tr class="border-b border-slate-100"><td class="py-1 text-slate-600">1구간 (1,000)</td><td>1,000</td><td class="text-right">90원</td><td class="text-right">90,000</td></tr>
|
||
</tbody>
|
||
<tfoot><tr class="pricing-summary-row font-bold"><td colspan="3" class="py-2 text-slate-800">계</td><td class="text-right text-teal-600">390,000원</td></tr></tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card: Account -->
|
||
<div class="pricing-card mb-6" id="card-pricing-account">
|
||
<div class="p-6 border-b border-slate-100">
|
||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-slate-900">계좌조회 (10분주기)</h2>
|
||
<p class="text-sm text-slate-500">등록 건당 과금 · 5개 구간</p>
|
||
</div>
|
||
</div>
|
||
<span class="pricing-badge bg-blue-100 text-blue-700 text-sm px-3 py-1">건당 3,000~6,000원</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
|
||
<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="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
|
||
구간별 기본 단가
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="pricing-table-header">
|
||
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-slate-600">구간</th>
|
||
<th class="text-left py-3 px-4 font-medium text-slate-600">등록수</th>
|
||
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-slate-600">단가</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>기본 (1~50)</td><td>50개</td><td class="text-right font-semibold">6,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>1구간 (51~100)</td><td>50개</td><td class="text-right font-semibold">5,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>2구간 (101~500)</td><td>400개</td><td class="text-right font-semibold">4,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>3구간 (501~1,000)</td><td>500개</td><td class="text-right font-semibold">3,500원</td></tr>
|
||
<tr class="pricing-tier-row"><td>4구간 (1,000 초과)</td><td>-</td><td class="text-right font-semibold text-teal-600">3,000원</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card: Card -->
|
||
<div class="pricing-card mb-6" id="card-pricing-card">
|
||
<div class="p-6 border-b border-slate-100">
|
||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 rounded-xl bg-orange-100 flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-slate-900">법인/개인카드 조회</h2>
|
||
<p class="text-sm text-slate-500">등록 건당 과금 · 5개 구간</p>
|
||
</div>
|
||
</div>
|
||
<span class="pricing-badge bg-orange-100 text-orange-700 text-sm px-3 py-1">건당 1,700~3,000원</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
|
||
<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="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
|
||
구간별 기본 단가
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="pricing-table-header">
|
||
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-slate-600">구간</th>
|
||
<th class="text-left py-3 px-4 font-medium text-slate-600">등록수</th>
|
||
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-slate-600">단가</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>기본 (1~50)</td><td>50개</td><td class="text-right font-semibold">3,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>1구간 (51~100)</td><td>50개</td><td class="text-right font-semibold">2,500원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>2구간 (101~500)</td><td>400개</td><td class="text-right font-semibold">2,300원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>3구간 (501~1,000)</td><td>500개</td><td class="text-right font-semibold">1,900원</td></tr>
|
||
<tr class="pricing-tier-row"><td>4구간 (1,000 초과)</td><td>-</td><td class="text-right font-semibold text-teal-600">1,700원</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Card: Hometax -->
|
||
<div class="pricing-card mb-6" id="card-pricing-hometax">
|
||
<div class="p-6 border-b border-slate-100">
|
||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-12 h-12 rounded-xl bg-violet-100 flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-violet-600" 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"></path>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h2 class="text-xl font-bold text-slate-900">홈택스 매입/매출 조회</h2>
|
||
<p class="text-sm text-slate-500">개사당 월정액 · 6개 구간</p>
|
||
</div>
|
||
</div>
|
||
<span class="pricing-badge bg-violet-100 text-violet-700 text-sm px-3 py-1">월 10,000~30,000원</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-6">
|
||
<h3 class="text-sm font-semibold text-slate-700 mb-4 flex items-center gap-2">
|
||
<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="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
|
||
구간별 기본 단가
|
||
</h3>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="pricing-table-header">
|
||
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-slate-600">구간</th>
|
||
<th class="text-left py-3 px-4 font-medium text-slate-600">개사수</th>
|
||
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-slate-600">단가</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>기본 (1~20)</td><td>20개사</td><td class="text-right font-semibold">30,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>1구간 (21~50)</td><td>30개사</td><td class="text-right font-semibold">20,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>2구간 (51~100)</td><td>50개사</td><td class="text-right font-semibold">18,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>3구간 (101~200)</td><td>100개사</td><td class="text-right font-semibold">15,000원</td></tr>
|
||
<tr class="pricing-tier-row border-b border-slate-50"><td>4구간 (201~500)</td><td>300개사</td><td class="text-right font-semibold">12,000원</td></tr>
|
||
<tr class="pricing-tier-row"><td>5구간 (500 초과)</td><td>-</td><td class="text-right font-semibold text-teal-600">10,000원</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Summary Table -->
|
||
<div class="pricing-card mt-8" id="pricing-summary-section">
|
||
<div class="p-6 border-b border-slate-100">
|
||
<h3 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
||
<svg class="w-5 h-5 text-teal-600" 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"></path>
|
||
</svg>
|
||
서비스별 할인 요율 요약
|
||
</h3>
|
||
<p class="text-sm text-slate-500 mt-1">대량 사용 시 최대 할인폭 비교</p>
|
||
</div>
|
||
<div class="p-6">
|
||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||
<div class="bg-emerald-50 rounded-lg p-4 text-center border border-emerald-100">
|
||
<div class="text-xs text-emerald-600 font-medium mb-1">전자세금계산서</div>
|
||
<div class="text-2xl font-bold text-emerald-700">50% <span class="text-xs font-normal">OFF</span></div>
|
||
<div class="text-[10px] text-slate-500 mt-1">100원 → 50원</div>
|
||
</div>
|
||
<div class="bg-blue-50 rounded-lg p-4 text-center border border-blue-100">
|
||
<div class="text-xs text-blue-600 font-medium mb-1">계좌조회</div>
|
||
<div class="text-2xl font-bold text-blue-700">50% <span class="text-xs font-normal">OFF</span></div>
|
||
<div class="text-[10px] text-slate-500 mt-1">6,000원 → 3,000원</div>
|
||
</div>
|
||
<div class="bg-orange-50 rounded-lg p-4 text-center border border-orange-100">
|
||
<div class="text-xs text-orange-600 font-medium mb-1">카드조회</div>
|
||
<div class="text-2xl font-bold text-orange-700">43% <span class="text-xs font-normal">OFF</span></div>
|
||
<div class="text-[10px] text-slate-500 mt-1">3,000원 → 1,700원</div>
|
||
</div>
|
||
<div class="bg-violet-50 rounded-lg p-4 text-center border border-violet-100">
|
||
<div class="text-xs text-violet-600 font-medium mb-1">홈택스조회</div>
|
||
<div class="text-2xl font-bold text-violet-700">67% <span class="text-xs font-normal">OFF</span></div>
|
||
<div class="text-[10px] text-slate-500 mt-1">30,000원 → 10,000원</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Additional Info -->
|
||
<div class="mt-8 text-center text-xs text-slate-500">
|
||
<p>위 단가표는 Code Bridge X 파트너 전용 특별 할인 단가입니다.</p>
|
||
<p class="mt-1">정확한 견적은 사용량 추이에 따라 매달 정산됩니다.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- 모달창들 -->
|
||
<!-- ============================================ -->
|
||
|
||
<!-- 모달 오버레이 -->
|
||
<div id="modalOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4 transition-opacity duration-200" onclick="closeModal(event)">
|
||
|
||
<!-- 바로빌 API 상세 정보 모달 -->
|
||
<div id="apiInfoModal" class="modal-content bg-white rounded-2xl shadow-2xl w-full max-w-5xl h-[85vh] flex flex-col overflow-hidden hidden" onclick="event.stopPropagation()">
|
||
<div class="px-6 py-4 border-b border-teal-100 flex justify-between items-center bg-teal-50/50">
|
||
<h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
|
||
<span class="w-1.5 h-6 bg-teal-500 rounded-full"></span>
|
||
바로빌 API 상세 정보
|
||
</h3>
|
||
<button onclick="closeModal()" class="w-10 h-10 flex items-center justify-center rounded-full text-slate-600 hover:text-slate-900 hover:bg-slate-200 transition-all duration-200 bg-white/50 shadow-sm border border-slate-200">
|
||
<span class="text-2xl leading-none">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="flex-1 bg-slate-50 min-h-0">
|
||
<iframe src="etax/barobill_api_info.php" class="w-full h-full border-none" title="API Information"></iframe>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 회사 정보 관리 모달 -->
|
||
<div id="companyModal" class="modal-content bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto hidden" onclick="event.stopPropagation()">
|
||
<div class="sticky top-0 bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
|
||
<h3 class="text-lg font-bold text-slate-800 flex items-center">
|
||
<span class="mr-2">🏢</span> 회사 정보 관리
|
||
</h3>
|
||
<button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 transition-colors">
|
||
<span class="text-slate-500 text-xl">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 사용 방법 -->
|
||
<div class="bg-teal-50 rounded-lg p-4 mb-6">
|
||
<h4 class="font-medium text-teal-800 mb-2">사용 방법</h4>
|
||
<p class="text-sm text-teal-700">바로빌 API 연동을 위해 회사의 기본 정보를 등록합니다. 등록된 정보는 세금계산서 발행 시 공급자 정보로 자동 입력됩니다.</p>
|
||
</div>
|
||
|
||
<!-- API 호출 정보 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3 flex items-center">
|
||
<span class="w-6 h-6 bg-slate-800 text-white rounded text-xs flex items-center justify-center mr-2">API</span>
|
||
RegistCorp - 회원사 등록
|
||
</h4>
|
||
<div class="bg-slate-900 rounded-lg p-4 text-sm font-mono overflow-x-auto">
|
||
<div class="text-slate-400">// 회원사 등록 API 호출 예시</div>
|
||
<div class="text-green-400 mt-2">$result = $barobill->RegistCorp(</div>
|
||
<div class="text-slate-300 ml-4">"CERT_KEY", <span class="text-slate-500">// 인증키</span></div>
|
||
<div class="text-slate-300 ml-4">"1234567890", <span class="text-slate-500">// 사업자번호</span></div>
|
||
<div class="text-slate-300 ml-4">"(주)샘플회사", <span class="text-slate-500">// 상호</span></div>
|
||
<div class="text-slate-300 ml-4">"홍길동", <span class="text-slate-500">// 대표자명</span></div>
|
||
<div class="text-slate-300 ml-4">"서울시 강남구", <span class="text-slate-500">// 주소</span></div>
|
||
<div class="text-slate-300 ml-4">"서비스업", <span class="text-slate-500">// 업태</span></div>
|
||
<div class="text-slate-300 ml-4">"소프트웨어" <span class="text-slate-500">// 종목</span></div>
|
||
<div class="text-green-400">);</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 필수 입력 필드 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3">필수 입력 필드</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div class="border border-slate-200 rounded-lg p-3">
|
||
<div class="text-xs text-red-500 font-medium mb-1">[필수]</div>
|
||
<div class="font-medium text-slate-700 text-sm">사업자등록번호</div>
|
||
<div class="text-xs text-slate-500">'-' 제외 10자리 숫자</div>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-3">
|
||
<div class="text-xs text-red-500 font-medium mb-1">[필수]</div>
|
||
<div class="font-medium text-slate-700 text-sm">상호 (회사명)</div>
|
||
<div class="text-xs text-slate-500">사업자등록증상의 상호</div>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-3">
|
||
<div class="text-xs text-red-500 font-medium mb-1">[필수]</div>
|
||
<div class="font-medium text-slate-700 text-sm">대표자명</div>
|
||
<div class="text-xs text-slate-500">사업자등록증상의 대표자</div>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-3">
|
||
<div class="text-xs text-slate-500 font-medium mb-1">[선택]</div>
|
||
<div class="font-medium text-slate-700 text-sm">업태 / 종목</div>
|
||
<div class="text-xs text-slate-500">사업의 업태 및 종목</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 주의사항 -->
|
||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||
<h4 class="font-medium text-amber-800 mb-2 flex items-center">
|
||
<span class="mr-2">⚠️</span> 주의사항
|
||
</h4>
|
||
<ul class="text-sm text-amber-700 space-y-1">
|
||
<li>• 사업자등록번호는 변경이 불가능합니다.</li>
|
||
<li>• 휴/폐업 사업자는 등록할 수 없습니다.</li>
|
||
<li>• 등록 후 연동키가 발급되며, 이 키는 안전하게 보관해야 합니다.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 바로빌 연동 설정 모달 -->
|
||
<div id="apiModal" class="modal-content bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto hidden" onclick="event.stopPropagation()">
|
||
<div class="sticky top-0 bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
|
||
<h3 class="text-lg font-bold text-slate-800 flex items-center">
|
||
<span class="mr-2">🔐</span> 바로빌 연동 설정
|
||
</h3>
|
||
<button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 transition-colors">
|
||
<span class="text-slate-500 text-xl">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 사용 방법 -->
|
||
<div class="bg-teal-50 rounded-lg p-4 mb-6">
|
||
<h4 class="font-medium text-teal-800 mb-2">사용 방법</h4>
|
||
<p class="text-sm text-teal-700">바로빌 API 연동을 위한 인증키 설정 및 공인인증서를 등록합니다. 세금계산서 발급을 위해서는 반드시 공인인증서 등록이 필요합니다.</p>
|
||
</div>
|
||
|
||
<!-- 연동 프로세스 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3">연동 프로세스</h4>
|
||
<div class="space-y-3">
|
||
<div class="flex items-start">
|
||
<span class="w-6 h-6 bg-teal-600 text-white rounded-full text-xs flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">1</span>
|
||
<div class="flex-1 bg-slate-50 rounded-lg p-3">
|
||
<div class="font-medium text-slate-700 text-sm">개발자센터 가입</div>
|
||
<div class="text-xs text-slate-500 mt-1">dev.barobill.co.kr 에서 파트너 계정 생성</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="w-6 h-6 bg-teal-600 text-white rounded-full text-xs flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">2</span>
|
||
<div class="flex-1 bg-slate-50 rounded-lg p-3">
|
||
<div class="font-medium text-slate-700 text-sm">인증키 발급</div>
|
||
<div class="text-xs text-slate-500 mt-1">테스트/운영 환경별 CERT_KEY 발급</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="w-6 h-6 bg-teal-600 text-white rounded-full text-xs flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">3</span>
|
||
<div class="flex-1 bg-slate-50 rounded-lg p-3">
|
||
<div class="font-medium text-slate-700 text-sm">공인인증서 등록</div>
|
||
<div class="text-xs text-slate-500 mt-1">바로빌 플러그인으로 전자서명용 인증서 등록</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-start">
|
||
<span class="w-6 h-6 bg-teal-600 text-white rounded-full text-xs flex items-center justify-center mr-3 flex-shrink-0 mt-0.5">4</span>
|
||
<div class="flex-1 bg-slate-50 rounded-lg p-3">
|
||
<div class="font-medium text-slate-700 text-sm">연동 테스트</div>
|
||
<div class="text-xs text-slate-500 mt-1">테스트베드에서 API 호출 검증</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- API 엔드포인트 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3">API 엔드포인트</h4>
|
||
<div class="space-y-2">
|
||
<div class="bg-slate-900 rounded-lg p-3 flex items-center justify-between">
|
||
<div>
|
||
<div class="text-xs text-slate-400">테스트 환경</div>
|
||
<div class="text-sm text-green-400 font-mono">https://testws.baroservice.com</div>
|
||
</div>
|
||
<span class="bg-amber-500 text-white text-xs px-2 py-1 rounded">TEST</span>
|
||
</div>
|
||
<div class="bg-slate-900 rounded-lg p-3 flex items-center justify-between">
|
||
<div>
|
||
<div class="text-xs text-slate-400">운영 환경</div>
|
||
<div class="text-sm text-green-400 font-mono">https://ws.baroservice.com</div>
|
||
</div>
|
||
<span class="bg-teal-600 text-white text-xs px-2 py-1 rounded">PROD</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 인증서 등록 방법 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3">공인인증서 등록 방법</h4>
|
||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||
<div class="text-sm text-blue-800 space-y-2">
|
||
<p><strong>1.</strong> 바로빌 플러그인 설치 (바로빌 개발자센터에서 다운로드)</p>
|
||
<p><strong>2.</strong> 플러그인 실행 후 '인증서 등록' 버튼 클릭</p>
|
||
<p><strong>3.</strong> 공인인증서 선택 및 비밀번호 입력</p>
|
||
<p><strong>4.</strong> 바로빌 서버로 인증서 전송 완료</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 지원 언어 -->
|
||
<div>
|
||
<h4 class="font-medium text-slate-700 mb-3">지원 개발 언어</h4>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">Java</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">Python</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">PHP</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">.NET</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">Node.js</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">ASP</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">Delphi</span>
|
||
<span class="bg-slate-100 text-slate-700 px-3 py-1 rounded-full text-xs">PowerBuilder</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 사용자 권한 설정 모달 -->
|
||
<div id="permissionModal" class="modal-content bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto hidden" onclick="event.stopPropagation()">
|
||
<div class="sticky top-0 bg-white border-b border-slate-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
|
||
<h3 class="text-lg font-bold text-slate-800 flex items-center">
|
||
<span class="mr-2">👥</span> 사용자 권한 설정
|
||
</h3>
|
||
<button onclick="closeModal()" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 transition-colors">
|
||
<span class="text-slate-500 text-xl">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="p-6">
|
||
<!-- 사용 방법 -->
|
||
<div class="bg-teal-50 rounded-lg p-4 mb-6">
|
||
<h4 class="font-medium text-teal-800 mb-2">사용 방법</h4>
|
||
<p class="text-sm text-teal-700">담당자별로 세금계산서 발급, 조회, 관리 권한을 세분화하여 설정할 수 있습니다. 보안을 위해 최소 권한 원칙을 적용하는 것을 권장합니다.</p>
|
||
</div>
|
||
|
||
<!-- 권한 유형 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3">권한 유형</h4>
|
||
<div class="space-y-3">
|
||
<div class="border border-slate-200 rounded-lg p-4">
|
||
<div class="flex items-center mb-2">
|
||
<span class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center mr-3">
|
||
<span class="text-red-600 font-bold text-sm">A</span>
|
||
</span>
|
||
<div>
|
||
<div class="font-medium text-slate-700">관리자 (Admin)</div>
|
||
<div class="text-xs text-slate-500">모든 기능 접근 가능</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1 mt-2">
|
||
<span class="bg-red-50 text-red-600 text-xs px-2 py-1 rounded">발급</span>
|
||
<span class="bg-red-50 text-red-600 text-xs px-2 py-1 rounded">조회</span>
|
||
<span class="bg-red-50 text-red-600 text-xs px-2 py-1 rounded">수정</span>
|
||
<span class="bg-red-50 text-red-600 text-xs px-2 py-1 rounded">삭제</span>
|
||
<span class="bg-red-50 text-red-600 text-xs px-2 py-1 rounded">설정</span>
|
||
</div>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4">
|
||
<div class="flex items-center mb-2">
|
||
<span class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
|
||
<span class="text-blue-600 font-bold text-sm">M</span>
|
||
</span>
|
||
<div>
|
||
<div class="font-medium text-slate-700">매니저 (Manager)</div>
|
||
<div class="text-xs text-slate-500">발급 및 조회 권한</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1 mt-2">
|
||
<span class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded">발급</span>
|
||
<span class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded">조회</span>
|
||
<span class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded">수정</span>
|
||
</div>
|
||
</div>
|
||
<div class="border border-slate-200 rounded-lg p-4">
|
||
<div class="flex items-center mb-2">
|
||
<span class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-3">
|
||
<span class="text-green-600 font-bold text-sm">U</span>
|
||
</span>
|
||
<div>
|
||
<div class="font-medium text-slate-700">사용자 (User)</div>
|
||
<div class="text-xs text-slate-500">조회 전용</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-1 mt-2">
|
||
<span class="bg-green-50 text-green-600 text-xs px-2 py-1 rounded">조회</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 권한별 기능 매트릭스 -->
|
||
<div class="mb-6">
|
||
<h4 class="font-medium text-slate-700 mb-3">권한별 기능 매트릭스</h4>
|
||
<div class="overflow-x-auto">
|
||
<table class="w-full text-sm">
|
||
<thead>
|
||
<tr class="bg-slate-100">
|
||
<th class="text-left px-3 py-2 font-medium text-slate-700">기능</th>
|
||
<th class="text-center px-3 py-2 font-medium text-slate-700">Admin</th>
|
||
<th class="text-center px-3 py-2 font-medium text-slate-700">Manager</th>
|
||
<th class="text-center px-3 py-2 font-medium text-slate-700">User</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody class="divide-y divide-slate-100">
|
||
<tr>
|
||
<td class="px-3 py-2 text-slate-600">세금계산서 발급</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 text-slate-600">세금계산서 조회</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 text-slate-600">카드/계좌 내역 조회</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 text-slate-600">카드/계좌 등록</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 text-slate-600">회사 정보 수정</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="px-3 py-2 text-slate-600">사용자 권한 관리</td>
|
||
<td class="px-3 py-2 text-center text-green-600">✓</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
<td class="px-3 py-2 text-center text-slate-300">-</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 보안 권장사항 -->
|
||
<div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
|
||
<h4 class="font-medium text-amber-800 mb-2 flex items-center">
|
||
<span class="mr-2">🔒</span> 보안 권장사항
|
||
</h4>
|
||
<ul class="text-sm text-amber-700 space-y-1">
|
||
<li>• 최소 권한 원칙: 업무에 필요한 최소한의 권한만 부여</li>
|
||
<li>• 정기적인 권한 검토: 분기별로 사용자 권한 적절성 확인</li>
|
||
<li>• 퇴사자 즉시 비활성화: 인사 변동 시 즉각 권한 회수</li>
|
||
<li>• 관리자 계정 최소화: Admin 권한은 필수 인원에게만 부여</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<footer class="bg-slate-800 text-white py-8 mt-12">
|
||
<div class="max-w-6xl mx-auto px-4 text-center">
|
||
<p class="text-sm text-slate-400 mb-2">바로빌 API 기반 멀티테넌시 회계 지원 솔루션</p>
|
||
<p class="text-xs text-slate-500">© SAM | API Reference: <a href="https://dev.barobill.co.kr" target="_blank" class="text-teal-400 hover:text-teal-300">dev.barobill.co.kr</a></p>
|
||
</div>
|
||
</footer>
|
||
|
||
<script>
|
||
// 탭 전환 기능
|
||
document.querySelectorAll('.nav-tab').forEach(tab => {
|
||
tab.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
// 모든 탭 비활성화
|
||
document.querySelectorAll('.nav-tab').forEach(t => {
|
||
t.classList.remove('nav-active');
|
||
t.classList.add('text-slate-600');
|
||
});
|
||
|
||
// 클릭한 탭 활성화
|
||
this.classList.add('nav-active');
|
||
this.classList.remove('text-slate-600');
|
||
|
||
// 모든 콘텐츠 숨김
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
});
|
||
|
||
// 해당 콘텐츠 표시
|
||
const tabId = this.getAttribute('data-tab');
|
||
document.getElementById(tabId).classList.add('active');
|
||
|
||
// 애니메이션 재실행
|
||
document.querySelectorAll('#' + tabId + ' .fade-in').forEach(el => {
|
||
el.style.animation = 'none';
|
||
el.offsetHeight;
|
||
el.style.animation = null;
|
||
});
|
||
});
|
||
});
|
||
|
||
// 모달 관련 함수
|
||
let currentModal = null;
|
||
|
||
function openModal(modalId) {
|
||
const overlay = document.getElementById('modalOverlay');
|
||
const modal = document.getElementById(modalId);
|
||
|
||
// 오버레이 표시
|
||
overlay.classList.remove('hidden');
|
||
document.body.style.overflow = 'hidden';
|
||
|
||
// 모달 표시
|
||
modal.classList.remove('hidden');
|
||
currentModal = modal;
|
||
|
||
// 애니메이션 시작
|
||
setTimeout(() => {
|
||
overlay.classList.add('show');
|
||
modal.classList.add('show');
|
||
}, 10);
|
||
}
|
||
|
||
function closeModal(event) {
|
||
// 이벤트가 있고, 타겟이 오버레이가 아니면 무시
|
||
if (event && event.target !== document.getElementById('modalOverlay')) {
|
||
return;
|
||
}
|
||
|
||
const overlay = document.getElementById('modalOverlay');
|
||
|
||
if (currentModal) {
|
||
// 애니메이션 종료
|
||
overlay.classList.remove('show');
|
||
currentModal.classList.remove('show');
|
||
|
||
// 애니메이션 후 숨김
|
||
setTimeout(() => {
|
||
overlay.classList.add('hidden');
|
||
currentModal.classList.add('hidden');
|
||
currentModal = null;
|
||
document.body.style.overflow = '';
|
||
}, 200);
|
||
}
|
||
}
|
||
|
||
// ESC 키로 모달 닫기
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.key === 'Escape' && currentModal) {
|
||
closeModal();
|
||
}
|
||
});
|
||
|
||
function openApiInfoModal() {
|
||
openModal('apiInfoModal');
|
||
}
|
||
|
||
// 상세 단가표 제어 함수
|
||
function showPricingTab(tabId) {
|
||
document.querySelectorAll('.pricing-tab-btn').forEach(btn => {
|
||
btn.classList.remove('pricing-tab-active');
|
||
btn.classList.add('text-slate-600');
|
||
});
|
||
|
||
const activeTab = document.getElementById('tab-pricing-' + tabId);
|
||
activeTab.classList.add('pricing-tab-active');
|
||
activeTab.classList.remove('text-slate-600');
|
||
|
||
const cards = ['tax', 'account', 'card', 'hometax'];
|
||
const summarySection = document.getElementById('pricing-summary-section');
|
||
|
||
if (tabId === 'all') {
|
||
cards.forEach(card => {
|
||
document.getElementById('card-pricing-' + card).style.display = 'block';
|
||
});
|
||
summarySection.style.display = 'block';
|
||
} else {
|
||
cards.forEach(card => {
|
||
document.getElementById('card-pricing-' + card).style.display = (card === tabId) ? 'block' : 'none';
|
||
});
|
||
summarySection.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function togglePricingSection(sectionId) {
|
||
const section = document.getElementById(sectionId);
|
||
const icon = document.getElementById(sectionId + '-icon');
|
||
section.classList.toggle('open');
|
||
icon.classList.toggle('open');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|