9ce6a897a8
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1497 lines
100 KiB
PHP
1497 lines
100 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>
|
||
<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;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-100 min-h-screen">
|
||
<!-- Header -->
|
||
<header class="bg-white shadow-sm sticky top-0 z-50">
|
||
<div class="max-w-6xl mx-auto px-4">
|
||
<div class="flex items-center justify-between py-4">
|
||
<div class="flex items-center space-x-4">
|
||
<a href="../index.php" class="flex items-center justify-center w-10 h-10 bg-slate-100 hover:bg-teal-100 rounded-lg transition-colors" title="홈으로">
|
||
<span class="text-xl">🏠</span>
|
||
</a>
|
||
<h1 class="text-xl font-bold text-slate-800">바로빌 API 회계 솔루션</h1>
|
||
</div>
|
||
<span class="text-sm text-slate-500"><?php echo date('Y-m-d'); ?></span>
|
||
</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">
|
||
<strong>코드브릿지엑스</strong>는 바로빌 공식 <strong>수익형 파트너</strong>로서, 멀티테넌시 환경에서 회원사에게 전자세금계산서, 카드/계좌 조회 등
|
||
회계 자동화 서비스를 재판매합니다.
|
||
</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">0원</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">0원</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">종량제</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">🔗</span> 파트너 연동 구조
|
||
</h2>
|
||
<div class="flex flex-col md:flex-row items-center justify-center gap-4 mb-6">
|
||
<div class="bg-slate-800 text-white rounded-lg p-4 text-center min-w-[140px]">
|
||
<div class="text-2xl mb-2">🏛️</div>
|
||
<div class="font-medium text-sm">바로빌</div>
|
||
<div class="text-xs text-slate-400">API 제공사</div>
|
||
</div>
|
||
<div class="text-teal-500 text-2xl rotate-90 md:rotate-0">→</div>
|
||
<div class="bg-teal-600 text-white rounded-lg p-4 text-center min-w-[140px] ring-4 ring-teal-200">
|
||
<div class="text-2xl mb-2">💼</div>
|
||
<div class="font-medium text-sm">코드브릿지엑스</div>
|
||
<div class="text-xs text-teal-200">수익형 파트너</div>
|
||
</div>
|
||
<div class="text-teal-500 text-2xl rotate-90 md:rotate-0">→</div>
|
||
<div class="bg-blue-500 text-white rounded-lg p-4 text-center min-w-[140px]">
|
||
<div class="text-2xl mb-2">🏢</div>
|
||
<div class="font-medium text-sm">회원사</div>
|
||
<div class="text-xs text-blue-200">서비스 이용 기업</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-slate-50 rounded-lg p-4">
|
||
<h4 class="font-medium text-slate-700 mb-2 text-sm">수익형 파트너 구조</h4>
|
||
<ul class="text-xs text-slate-600 space-y-1">
|
||
<li class="flex items-start"><span class="text-teal-500 mr-2">•</span>코드브릿지엑스는 바로빌과 계약한 <strong>파트너 단가</strong>로 서비스를 이용합니다.</li>
|
||
<li class="flex items-start"><span class="text-teal-500 mr-2">•</span>회원사에게는 파트너 단가에 <strong>판매 마진</strong>을 더한 금액으로 서비스를 제공합니다.</li>
|
||
<li class="flex items-start"><span class="text-teal-500 mr-2">•</span>회원사는 코드브릿지엑스의 솔루션을 통해 바로빌 API 서비스를 이용합니다.</li>
|
||
</ul>
|
||
</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>
|
||
<p class="text-sm text-slate-600 mb-4">선불 포인트 차감 방식으로, 서비스 이용 시 건당 단가가 차감됩니다.</p>
|
||
|
||
<!-- 요금표 -->
|
||
<div class="overflow-x-auto custom-scroll mb-6">
|
||
<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-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="4" 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 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center mr-2">📄</span>
|
||
전자세금계산서 발급
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500 line-through">100원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">80원</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 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-amber-100 rounded-lg flex items-center justify-center mr-2">📄</span>
|
||
전자계산서 발급 (면세)
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500 line-through">100원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">80원</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 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-2">🧾</span>
|
||
현금영수증 발급
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500">0원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-green-600">무료</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">발급 건수 무제한</td>
|
||
</tr>
|
||
<tr class="bg-blue-50">
|
||
<td colspan="4" 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 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-2">💳</span>
|
||
카드 사용내역 조회
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500 line-through">500원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">400원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">카드당 월 1회 수집</td>
|
||
</tr>
|
||
<tr class="hover:bg-slate-50">
|
||
<td class="px-4 py-3 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-green-100 rounded-lg flex items-center justify-center mr-2">🏦</span>
|
||
계좌 입출금내역 조회
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500 line-through">500원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">400원</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">계좌당 월 1회 수집</td>
|
||
</tr>
|
||
<tr class="bg-purple-50">
|
||
<td colspan="4" 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 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-purple-100 rounded-lg flex items-center justify-center mr-2">📊</span>
|
||
홈택스 매입매출 조회
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500 line-through">300원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-teal-600">250원</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 text-slate-700">
|
||
<div class="flex items-center">
|
||
<span class="w-8 h-8 bg-slate-100 rounded-lg flex items-center justify-center mr-2">🔍</span>
|
||
사업자 휴폐업 조회
|
||
</div>
|
||
</td>
|
||
<td class="px-4 py-3 text-center text-slate-500">0원</td>
|
||
<td class="px-4 py-3 text-center font-bold text-green-600">무료</td>
|
||
<td class="px-4 py-3 text-slate-500 text-xs">조회 건수 무제한</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</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 text-sm">
|
||
<span class="mr-2">💡</span> 요금 안내
|
||
</h4>
|
||
<ul class="text-xs text-amber-700 space-y-1">
|
||
<li>• 위 요금은 코드브릿지엑스 회원사 기준 단가입니다.</li>
|
||
<li>• 대량 사용 시 볼륨 디스카운트가 적용될 수 있습니다.</li>
|
||
<li>• 최소 충전 금액: 10,000원 / 결제 수단: 카드, 계좌이체, 가상계좌</li>
|
||
</ul>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 회원사 가입 프로세스 -->
|
||
<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>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<!-- ============================================ -->
|
||
<!-- 모달창들 -->
|
||
<!-- ============================================ -->
|
||
|
||
<!-- 모달 오버레이 -->
|
||
<div id="modalOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4" onclick="closeModal(event)">
|
||
|
||
<!-- 회사 정보 관리 모달 -->
|
||
<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();
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|