cd84153994
- 경정청구 소개 (sales/Requestforcorrection → rd/correction-request) - 바로빌 API 통합기획서 (sales/barobill → rd/barobill-plan) - 견적서 자동기획 프로젝트 (sales/plan → rd/auto-quotation) - 라우트/컨트롤러/메뉴 등록
1848 lines
124 KiB
PHP
1848 lines
124 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', '바로빌 API 통합기획서')
|
|
|
|
@section('content')
|
|
<style>
|
|
.bb-tab-active { border-bottom: 3px solid #0d9488; color: #0d9488; font-weight: 700; }
|
|
.bb-fade-in { animation: bbFadeIn 0.5s ease-out forwards; opacity: 0; }
|
|
.bb-fade-in-1 { animation-delay: 0.1s; }
|
|
.bb-fade-in-2 { animation-delay: 0.2s; }
|
|
.bb-fade-in-3 { animation-delay: 0.3s; }
|
|
.bb-fade-in-4 { animation-delay: 0.4s; }
|
|
@keyframes bbFadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.bb-custom-scroll::-webkit-scrollbar { width: 6px; }
|
|
.bb-custom-scroll::-webkit-scrollbar-track { background: #f3f4f6; border-radius: 10px; }
|
|
.bb-custom-scroll::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
|
|
.bb-tab-content { display: none; }
|
|
.bb-tab-content.active { display: block; }
|
|
.bb-api-card:hover { transform: translateY(-2px); }
|
|
.bb-field-required { color: #ef4444; font-weight: 700; }
|
|
.bb-field-optional { color: #6b7280; }
|
|
/* 모달 스타일 */
|
|
.bb-modal-content {
|
|
transform: scale(0.95);
|
|
opacity: 0;
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
.bb-modal-content.show {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
#bbModalOverlay {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-out;
|
|
}
|
|
#bbModalOverlay.show {
|
|
opacity: 1;
|
|
}
|
|
/* 상세 단가표 */
|
|
.bb-pricing-card { background: white; border-radius: 0.75rem; border: 1px solid #e5e7eb; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); }
|
|
.bb-pricing-badge { display: inline-flex; align-items: center; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; }
|
|
.bb-pricing-table-header { background: #f9fafb; }
|
|
.bb-pricing-tier-row:hover { background: #f3f4f6; }
|
|
.bb-pricing-tab-active { background: white; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); font-weight: 600; color: #0d9488 !important; }
|
|
.bb-pricing-example-card { background: linear-gradient(135deg, #f9fafb, #f3f4f6); border: 1px solid #e5e7eb; }
|
|
.bb-pricing-summary-row { background: rgba(13, 148, 136, 0.05); }
|
|
.bb-pricing-collapsible { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
|
|
.bb-pricing-collapsible.open { max-height: 2000px; }
|
|
.bb-pricing-rotate { transition: transform 0.3s ease; }
|
|
.bb-pricing-rotate.open { transform: rotate(180deg); }
|
|
</style>
|
|
|
|
<div class="max-w-6xl mx-auto">
|
|
{{-- 페이지 헤더 --}}
|
|
<div class="mb-6">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<i class="ri-file-text-line text-teal-600"></i>
|
|
바로빌 API 통합기획서
|
|
</h1>
|
|
<p class="text-sm text-gray-500 mt-1">바로빌(Barobill) API를 활용한 멀티테넌시 회계 자동화 시스템</p>
|
|
</div>
|
|
|
|
{{-- 탭 네비게이션 --}}
|
|
<nav class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
|
|
<div class="px-4">
|
|
<div class="flex space-x-8">
|
|
<a href="#" class="bb-nav-tab py-3 text-sm bb-tab-active" data-tab="bb-dashboard">
|
|
<i class="ri-dashboard-line mr-1"></i> 대시보드
|
|
</a>
|
|
<a href="#" class="bb-nav-tab py-3 text-sm text-gray-600 hover:text-teal-600 transition-colors" data-tab="bb-sales">
|
|
<i class="ri-exchange-funds-line mr-1"></i> 매출/매입 관리
|
|
</a>
|
|
<a href="#" class="bb-nav-tab py-3 text-sm text-gray-600 hover:text-teal-600 transition-colors" data-tab="bb-settings">
|
|
<i class="ri-settings-3-line mr-1"></i> 설정 및 연동
|
|
</a>
|
|
<a href="#" class="bb-nav-tab py-3 text-sm text-gray-600 hover:text-teal-600 transition-colors" data-tab="bb-pricing">
|
|
<i class="ri-price-tag-3-line mr-1"></i> 과금정책
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{{-- ============================================ --}}
|
|
{{-- 탭 1: 대시보드 --}}
|
|
{{-- ============================================ --}}
|
|
<div id="bb-dashboard" class="bb-tab-content active">
|
|
{{-- 프로젝트 개요 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 border-l-4 border-l-teal-600 bb-fade-in bb-fade-in-1">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-clipboard-line mr-2 text-teal-600"></i> 프로젝트 개요
|
|
</h2>
|
|
<p class="text-gray-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-gray-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<div class="text-2xl mb-2"><i class="ri-building-2-line text-teal-600"></i></div>
|
|
<h3 class="font-medium text-gray-700 text-sm">회원사 관리</h3>
|
|
<p class="text-xs text-gray-500 mt-1">API 기반 가입 및 관리</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<div class="text-2xl mb-2"><i class="ri-shield-keyhole-line text-teal-600"></i></div>
|
|
<h3 class="font-medium text-gray-700 text-sm">인증서 연동</h3>
|
|
<p class="text-xs text-gray-500 mt-1">공인인증서 플러그인</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<div class="text-2xl mb-2"><i class="ri-file-list-3-line text-teal-600"></i></div>
|
|
<h3 class="font-medium text-gray-700 text-sm">전자세금계산서</h3>
|
|
<p class="text-xs text-gray-500 mt-1">발행 및 관리</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<div class="text-2xl mb-2"><i class="ri-bank-card-line text-teal-600"></i></div>
|
|
<h3 class="font-medium text-gray-700 text-sm">금융 데이터</h3>
|
|
<p class="text-xs text-gray-500 mt-1">카드/계좌 실시간 조회</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 워크플로우 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-2">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-refresh-line mr-2 text-teal-600"></i> 통합 워크플로우
|
|
</h2>
|
|
<div class="mb-6">
|
|
<h3 class="font-medium text-gray-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">
|
|
<i class="ri-edit-line text-lg mr-2 text-teal-600"></i>
|
|
<span class="font-medium text-gray-700 text-sm">회원 가입</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">사업자 정보 입력 → RegistCorp API → 연동키 발급</p>
|
|
</div>
|
|
<div class="hidden md:flex items-center text-teal-400"><i class="ri-arrow-right-line"></i></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">
|
|
<i class="ri-key-2-line text-lg mr-2 text-teal-600"></i>
|
|
<span class="font-medium text-gray-700 text-sm">인증서 등록</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">플러그인 호출 → 인증서 선택 → 보안 서버 전송</p>
|
|
</div>
|
|
<div class="hidden md:flex items-center text-teal-400"><i class="ri-arrow-right-line"></i></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">
|
|
<i class="ri-check-double-line text-lg mr-2 text-teal-600"></i>
|
|
<span class="font-medium text-gray-700 text-sm">연동 확인</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">등록 완료 → 상태 '활성(Active)' 변경</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium text-gray-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-gray-50 rounded-lg p-4 border-l-4 border-amber-500">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-file-list-3-line text-lg mr-2 text-amber-500"></i>
|
|
<span class="font-medium text-gray-700 text-sm">전자세금계산서</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">매출 데이터 → RegistTaxInvoice → 국세청 전송</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-blue-500">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-bank-card-line text-lg mr-2 text-blue-500"></i>
|
|
<span class="font-medium text-gray-700 text-sm">카드 내역</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">카드 등록 → GetCardLog → 지출 내역 스크래핑</p>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 border-l-4 border-green-500">
|
|
<div class="flex items-center mb-2">
|
|
<i class="ri-building-4-line text-lg mr-2 text-green-500"></i>
|
|
<span class="font-medium text-gray-700 text-sm">계좌 내역</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">계좌 연결 → GetBankAccountLog → 입출금 동기화</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 메뉴 구조 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-3">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-folder-3-line mr-2 text-teal-600"></i> 메뉴 구조도
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-800 text-white px-4 py-3">
|
|
<span class="text-sm font-medium"><i class="ri-bar-chart-box-line mr-1"></i> 대시보드</span>
|
|
</div>
|
|
<ul class="p-4 space-y-2">
|
|
<li class="text-sm text-gray-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-gray-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-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-800 text-white px-4 py-3">
|
|
<span class="text-sm font-medium"><i class="ri-money-dollar-circle-line mr-1"></i> 매출/매입 관리</span>
|
|
</div>
|
|
<ul class="p-4 space-y-2">
|
|
<li class="text-sm text-gray-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-gray-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-gray-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-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-800 text-white px-4 py-3">
|
|
<span class="text-sm font-medium"><i class="ri-settings-3-line mr-1"></i> 설정 및 연동</span>
|
|
</div>
|
|
<ul class="p-4 space-y-2">
|
|
<li class="text-sm text-gray-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-gray-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-gray-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-lg shadow-sm p-6 border border-gray-200 bb-fade-in bb-fade-in-4">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-shield-check-line mr-2 text-teal-600"></i> 멀티테넌시 데이터 관리
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-gradient-to-br from-gray-50 to-white rounded-lg p-5 border border-gray-200">
|
|
<h3 class="font-medium text-gray-700 mb-3 flex items-center">
|
|
<i class="ri-lock-line text-teal-600 mr-2"></i> 데이터 격리
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<li class="text-sm text-gray-600 flex items-start">
|
|
<span class="text-teal-500 mr-2 mt-1">•</span>
|
|
모든 테이블에 TenantID 부여
|
|
</li>
|
|
<li class="text-sm text-gray-600 flex items-start">
|
|
<span class="text-teal-500 mr-2 mt-1">•</span>
|
|
회원사 간 데이터 혼선 방지
|
|
</li>
|
|
<li class="text-sm text-gray-600 flex items-start">
|
|
<span class="text-teal-500 mr-2 mt-1">•</span>
|
|
테넌트별 고유 연동키 동적 매핑
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-gray-50 to-white rounded-lg p-5 border border-gray-200">
|
|
<h3 class="font-medium text-gray-700 mb-3 flex items-center">
|
|
<i class="ri-alarm-warning-line text-teal-600 mr-2"></i> 보안 및 예외 처리
|
|
</h3>
|
|
<ul class="space-y-2">
|
|
<li class="text-sm text-gray-600 flex items-start">
|
|
<span class="text-teal-500 mr-2 mt-1">•</span>
|
|
HTTPS 통신 및 토큰 기반 보안
|
|
</li>
|
|
<li class="text-sm text-gray-600 flex items-start">
|
|
<span class="text-teal-500 mr-2 mt-1">•</span>
|
|
인증서 만료/API 한도 초과 알림
|
|
</li>
|
|
<li class="text-sm text-gray-600 flex items-start">
|
|
<span class="text-teal-500 mr-2 mt-1">•</span>
|
|
API 요청/응답 로그 기록
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- ============================================ --}}
|
|
{{-- 탭 2: 매출/매입 관리 --}}
|
|
{{-- ============================================ --}}
|
|
<div id="bb-sales" class="bb-tab-content">
|
|
{{-- API 서비스 개요 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 border-l-4 border-l-teal-600 bb-fade-in bb-fade-in-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-bold text-gray-800 flex items-center">
|
|
<i class="ri-link mr-2 text-teal-600"></i> 바로빌 API 연동 서비스
|
|
</h2>
|
|
<a href="https://dev.barobill.co.kr" target="_blank" class="text-xs text-teal-600 hover:text-teal-700 flex items-center">
|
|
개발자센터 바로가기 <i class="ri-arrow-right-s-line ml-1"></i>
|
|
</a>
|
|
</div>
|
|
<p class="text-gray-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"><i class="ri-file-list-3-line text-teal-600"></i></div>
|
|
<div class="text-xs font-medium text-gray-700">전자세금계산서</div>
|
|
</div>
|
|
<div class="bg-blue-50 rounded-lg p-3 text-center">
|
|
<div class="text-xl mb-1"><i class="ri-bank-card-line text-blue-600"></i></div>
|
|
<div class="text-xs font-medium text-gray-700">카드 사용내역</div>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-3 text-center">
|
|
<div class="text-xl mb-1"><i class="ri-building-4-line text-green-600"></i></div>
|
|
<div class="text-xs font-medium text-gray-700">계좌 입출금</div>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-3 text-center">
|
|
<div class="text-xl mb-1"><i class="ri-bar-chart-grouped-line text-amber-600"></i></div>
|
|
<div class="text-xs font-medium text-gray-700">홈택스 연동</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 전자세금계산서 API --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-2">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-file-list-3-line mr-2 text-teal-600"></i> 전자세금계산서 API
|
|
</h2>
|
|
|
|
{{-- 발급 유형 --}}
|
|
<div class="mb-6">
|
|
<h3 class="font-medium text-gray-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 bb-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-gray-700">정발행</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">공급자가 세금계산서 작성 후 인증서로 전자서명하여 발급하고, 공급받는자에게 이메일로 발송</p>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-blue-50 to-white rounded-lg p-4 border border-blue-200 bb-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-gray-700">역발행</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">공급받는자가 세금계산서 작성 후 공급자에게 발급 요청, 공급자가 확인 후 전자서명하여 발급</p>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-purple-50 to-white rounded-lg p-4 border border-purple-200 bb-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-gray-700">위수탁발행</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500">공급자(위탁자)를 대신하여 수탁자가 세금계산서를 작성 및 발급(전자서명)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 주요 API 메소드 --}}
|
|
<div class="mb-6">
|
|
<h3 class="font-medium text-gray-700 mb-3">주요 API 메소드</h3>
|
|
<div class="overflow-x-auto bb-custom-scroll">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="text-left px-4 py-3 font-medium text-gray-700 rounded-tl-lg">메소드명</th>
|
|
<th class="text-left px-4 py-3 font-medium text-gray-700">기능</th>
|
|
<th class="text-left px-4 py-3 font-medium text-gray-700 rounded-tr-lg">비고</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr class="hover:bg-gray-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-gray-600">세금계산서 임시저장</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">발급 전 데이터 저장</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">세금계산서 발급</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">문자, 첨부파일 지원</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">세금계산서 내용 조회</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">국세청승인번호 사용</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">세금계산서 상태 조회</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">최대 100건</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">매출 세금계산서 목록 조회</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">국세청 전송완료 건</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">매입 세금계산서 목록 조회</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">국세청 전송완료 건</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">세금계산서 승인/거부/취소</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">역발행 처리용</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-600">세금계산서 인쇄 URL</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">최대 50건</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 세금계산서 필드 명세 --}}
|
|
<div>
|
|
<h3 class="font-medium text-gray-700 mb-3">세금계산서 객체 필드 명세</h3>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{{-- 기본 정보 --}}
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-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-gray-600">writeDate</span><span><span class="bb-field-required">[필수]</span> 작성일자 (yyyyMMdd)</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">issueType</span><span><span class="bb-field-required">[필수]</span> 발행형태</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">purposeType</span><span><span class="bb-field-required">[필수]</span> 영수/청구 구분</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">taxType</span><span><span class="bb-field-required">[필수]</span> 과세형태</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">chargeDirection</span><span><span class="bb-field-required">[필수]</span> 과금방향</span></div>
|
|
</div>
|
|
</div>
|
|
{{-- 공급자 정보 --}}
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-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-gray-600">invoicerCorpNum</span><span><span class="bb-field-required">[필수]</span> 사업자번호 (10자리)</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoicerCorpName</span><span><span class="bb-field-required">[필수]</span> 상호</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoicerMgtKey</span><span><span class="bb-field-required">[필수]</span> 문서번호 (1~24자리)</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoicerCEOName</span><span><span class="bb-field-required">[필수]</span> 대표자 성명</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoicerEmail</span><span><span class="bb-field-optional">[선택]</span> 담당자 이메일</span></div>
|
|
</div>
|
|
</div>
|
|
{{-- 공급받는자 정보 --}}
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-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-gray-600">invoiceeCorpNum</span><span><span class="bb-field-required">[필수]</span> 사업자번호</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoiceeCorpName</span><span><span class="bb-field-required">[필수]</span> 상호</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoiceeType</span><span><span class="bb-field-required">[필수]</span> 구분 (사업자/개인/외국인)</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoiceeCEOName</span><span><span class="bb-field-required">[필수]</span> 대표자 성명</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">invoiceeEmail1</span><span><span class="bb-field-optional">[선택]</span> 담당자 이메일</span></div>
|
|
</div>
|
|
</div>
|
|
{{-- 금액 정보 --}}
|
|
<div class="border border-gray-200 rounded-lg overflow-hidden">
|
|
<div class="bg-gray-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-gray-600">supplyCostTotal</span><span><span class="bb-field-required">[필수]</span> 공급가액 합계</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">taxTotal</span><span><span class="bb-field-required">[필수]</span> 세액 합계</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">totalAmount</span><span><span class="bb-field-required">[필수]</span> 합계금액</span></div>
|
|
<div class="flex justify-between"><span class="text-gray-600">remark1~3</span><span><span class="bb-field-optional">[선택]</span> 비고</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 카드 사용내역 API --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-3">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-bank-card-line mr-2 text-blue-600"></i> 카드 사용내역 조회 API
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{{-- 서비스 설명 --}}
|
|
<div>
|
|
<h3 class="font-medium text-gray-700 mb-3">서비스 개요</h3>
|
|
<div class="bg-blue-50 rounded-lg p-4 mb-4">
|
|
<p class="text-sm text-gray-600 mb-3">
|
|
개인/법인카드의 사용내역을 자동으로 수집하여 사용일시, 승인번호, 승인구분, 거래금액, 과세유형 정보를 제공합니다.
|
|
</p>
|
|
<ul class="text-xs text-gray-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-gray-700 mb-3">조회 가능 필드</h3>
|
|
<div class="bg-gray-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-gray-700 mb-3">주요 API 메소드</h3>
|
|
<div class="space-y-3">
|
|
<div class="border border-gray-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-gray-500 mt-2">카드 정보 등록 (카드번호, 유효기간, 비밀번호)</p>
|
|
</div>
|
|
<div class="border border-gray-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-gray-500 mt-2">카드 사용내역 조회 (기간, 카드번호 지정)</p>
|
|
</div>
|
|
<div class="border border-gray-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-gray-500 mt-2">등록된 카드 목록 조회</p>
|
|
</div>
|
|
<div class="border border-gray-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-gray-500 mt-2">등록된 카드 삭제</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 계좌 입출금 API --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-4">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-building-4-line mr-2 text-green-600"></i> 계좌 입출금내역 조회 API
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{{-- 서비스 설명 --}}
|
|
<div>
|
|
<h3 class="font-medium text-gray-700 mb-3">서비스 개요</h3>
|
|
<div class="bg-green-50 rounded-lg p-4 mb-4">
|
|
<p class="text-sm text-gray-600 mb-3">
|
|
총 20개 뱅킹의 기업/개인 계좌 입출금내역을 수집하여 입출금일시, 입출금액, 잔액, 이체내역 등의 정보를 제공합니다.
|
|
</p>
|
|
<ul class="text-xs text-gray-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-gray-700 mb-3">조회 가능 필드</h3>
|
|
<div class="bg-gray-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-gray-700 mb-3">주요 API 메소드</h3>
|
|
<div class="space-y-3">
|
|
<div class="border border-gray-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-gray-500 mt-2">계좌 정보 등록 (은행코드, 계좌번호, 비밀번호)</p>
|
|
</div>
|
|
<div class="border border-gray-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-gray-500 mt-2">계좌 입출금내역 조회 (기간, 계좌번호 지정)</p>
|
|
</div>
|
|
<div class="border border-gray-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-gray-500 mt-2">등록된 계좌 목록 조회</p>
|
|
</div>
|
|
<div class="border border-gray-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-gray-500 mt-2">계좌 잔액 조회</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 지원 은행 --}}
|
|
<div class="mt-6">
|
|
<h3 class="font-medium text-gray-700 mb-3">지원 금융기관 (20개)</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach(['국민은행', '신한은행', '우리은행', '하나은행', 'NH농협', '기업은행', 'SC제일', '씨티은행', '케이뱅크', '카카오뱅크', '토스뱅크', '새마을금고', '신협', '우체국', '수협', '대구은행', '부산은행', '광주은행', '전북은행', '제주은행'] as $bank)
|
|
<span class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-xs">{{ $bank }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 홈택스 매입매출 연동 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 bb-fade-in bb-fade-in-4">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-bar-chart-grouped-line mr-2 text-amber-600"></i> 홈택스 매입매출자료 연동 API
|
|
</h2>
|
|
|
|
<div class="bg-amber-50 rounded-lg p-4 mb-4">
|
|
<p class="text-sm text-gray-600">
|
|
홈택스에 신고/수집된 세금계산서, 현금영수증, 신용카드 매입내역 등을 API로 조회하여 부가세 신고 및 결산 자료로 활용할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="border border-gray-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">
|
|
<i class="ri-file-list-3-line text-amber-600"></i>
|
|
</span>
|
|
<span class="font-medium text-gray-700 text-sm">세금계산서</span>
|
|
</div>
|
|
<ul class="text-xs text-gray-500 space-y-1">
|
|
<li>• 매출/매입 세금계산서 조회</li>
|
|
<li>• 국세청 전송 상태 확인</li>
|
|
<li>• 수정세금계산서 이력</li>
|
|
</ul>
|
|
</div>
|
|
<div class="border border-gray-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">
|
|
<i class="ri-receipt-line text-amber-600"></i>
|
|
</span>
|
|
<span class="font-medium text-gray-700 text-sm">현금영수증</span>
|
|
</div>
|
|
<ul class="text-xs text-gray-500 space-y-1">
|
|
<li>• 발급/취소 내역 조회</li>
|
|
<li>• 매입자료 수집</li>
|
|
<li>• 공제/불공제 구분</li>
|
|
</ul>
|
|
</div>
|
|
<div class="border border-gray-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">
|
|
<i class="ri-bank-card-line text-amber-600"></i>
|
|
</span>
|
|
<span class="font-medium text-gray-700 text-sm">신용카드 매입</span>
|
|
</div>
|
|
<ul class="text-xs text-gray-500 space-y-1">
|
|
<li>• 매입세액 공제 자료</li>
|
|
<li>• 가맹점별 내역 조회</li>
|
|
<li>• 과세유형 자동 분류</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- ============================================ --}}
|
|
{{-- 탭 3: 설정 및 연동 --}}
|
|
{{-- ============================================ --}}
|
|
<div id="bb-settings" class="bb-tab-content">
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 border-l-4 border-l-teal-600 bb-fade-in bb-fade-in-1">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-settings-3-line mr-2 text-teal-600"></i> 설정 및 연동 관리
|
|
</h2>
|
|
<p class="text-gray-600 text-sm mb-6">바로빌 API 연동을 위한 회사 정보, 인증서, 사용자 권한을 관리합니다.</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="border border-gray-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">
|
|
<i class="ri-building-2-line text-2xl text-teal-600"></i>
|
|
</div>
|
|
<h3 class="font-medium text-gray-700 mb-2">회사 정보 관리</h3>
|
|
<p class="text-xs text-gray-500 mb-3">사업자등록번호, 상호, 대표자, 업태/종목 등 기본 정보 관리</p>
|
|
<button onclick="bbOpenModal('bbCompanyModal')" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs py-2 rounded-lg transition-colors">설정하기</button>
|
|
</div>
|
|
<div class="border border-gray-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">
|
|
<i class="ri-shield-keyhole-line text-2xl text-teal-600"></i>
|
|
</div>
|
|
<h3 class="font-medium text-gray-700 mb-2">바로빌 연동 설정</h3>
|
|
<p class="text-xs text-gray-500 mb-3">API 연동키, 공인인증서 등록, 연동 상태 확인</p>
|
|
<button onclick="bbOpenModal('bbApiModal')" 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-gray-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">
|
|
<i class="ri-team-line text-2xl text-teal-600"></i>
|
|
</div>
|
|
<h3 class="font-medium text-gray-700 mb-2">사용자 권한 설정</h3>
|
|
<p class="text-xs text-gray-500 mb-3">담당자별 접근 권한, 발급 권한, 조회 범위 설정</p>
|
|
<button onclick="bbOpenModal('bbPermissionModal')" class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 text-xs py-2 rounded-lg transition-colors">권한 관리</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 연동 가이드 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 border border-gray-200 bb-fade-in bb-fade-in-2">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-book-open-line mr-2 text-teal-600"></i> 연동 가이드
|
|
</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-gray-700 mb-1">바로빌 개발자센터 회원가입</h4>
|
|
<p class="text-xs text-gray-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-gray-700 mb-1">회원사 등록 (RegistCorp)</h4>
|
|
<p class="text-xs text-gray-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-gray-700 mb-1">공인인증서 등록</h4>
|
|
<p class="text-xs text-gray-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-gray-700 mb-1">테스트 및 운영 전환</h4>
|
|
<p class="text-xs text-gray-500">테스트베드에서 API 연동을 검증한 후, 운영 환경으로 전환합니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
{{-- ============================================ --}}
|
|
{{-- 탭 4: 과금정책 --}}
|
|
{{-- ============================================ --}}
|
|
<div id="bb-pricing" class="bb-tab-content">
|
|
{{-- 파트너 소개 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 border-l-4 border-l-teal-600 bb-fade-in bb-fade-in-1">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg font-bold text-gray-800 flex items-center">
|
|
<i class="ri-building-2-line mr-2 text-teal-600"></i> 바로빌 할인형 연동 서비스
|
|
</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-gray-700 text-sm mb-3">
|
|
본 서비스는 바로빌(Barobill)의 공식 API를 활용하여 <strong>할인된 계약 단가</strong>로 제공되는 회계 자동화 솔루션입니다.
|
|
정산요율은 '바로빌 100% / 파트너 0%' 방식으로, 별도의 판매 마진 없이 최저가 수준의 비용으로 서비스를 이용하실 수 있습니다.
|
|
</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="bg-white text-gray-600 text-xs px-3 py-1 rounded-full border border-gray-200">바로빌 공식 연동</span>
|
|
<span class="bg-white text-gray-600 text-xs px-3 py-1 rounded-full border border-gray-200">최저가 할인 단가</span>
|
|
<span class="bg-white text-gray-600 text-xs px-3 py-1 rounded-full border border-gray-200">멀티테넌시 지원</span>
|
|
<span class="bg-white text-gray-600 text-xs px-3 py-1 rounded-full border border-gray-200">종량제 및 월정액</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="text-center p-4 bg-gray-50 rounded-lg">
|
|
<div class="text-3xl font-bold text-teal-600 mb-1">부가세 별도</div>
|
|
<div class="text-xs text-gray-500">모든 단가는 부가세 별도 기준</div>
|
|
</div>
|
|
<div class="text-center p-4 bg-gray-50 rounded-lg">
|
|
<div class="text-3xl font-bold text-teal-600 mb-1">건당 7.7원~</div>
|
|
<div class="text-xs text-gray-500">카카오 알림톡 기준</div>
|
|
</div>
|
|
<div class="text-center p-4 bg-gray-50 rounded-lg">
|
|
<div class="text-3xl font-bold text-teal-600 mb-1">정산 100%</div>
|
|
<div class="text-xs text-gray-500">투명한 과금 체계</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{-- 요금 정책 요약 --}}
|
|
<section class="bg-white rounded-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-2">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-money-dollar-circle-line mr-2 text-teal-600"></i> 요금 체계 요약
|
|
</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="border border-gray-100 rounded-lg p-4">
|
|
<div class="text-sm font-bold text-gray-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-gray-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>사용량 x 단가</span></li>
|
|
<li class="flex justify-between"><span>주요 서비스</span><span>세금계산서, 문자, 카카오톡</span></li>
|
|
</ul>
|
|
</div>
|
|
<div class="border border-gray-100 rounded-lg p-4">
|
|
<div class="text-sm font-bold text-gray-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-gray-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 bb-custom-scroll mb-8">
|
|
<h3 class="text-sm font-bold text-gray-700 mb-4 flex items-center">
|
|
<i class="ri-list-ordered mr-2 text-teal-600"></i> 1. 건당 과금 서비스
|
|
</h3>
|
|
<table class="w-full text-sm mb-6">
|
|
<thead>
|
|
<tr class="bg-gray-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-gray-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-gray-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"><i class="ri-file-list-3-line text-amber-600"></i></span> 세금계산서</td>
|
|
<td class="px-4 py-3 text-center font-bold text-teal-600">110원</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">전자세금계산서</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-gray-100 rounded flex items-center justify-center mr-2 text-xs"><i class="ri-file-copy-line text-gray-600"></i></span> 종지세금계산서 / 대량발행</td>
|
|
<td class="px-4 py-3 text-center font-bold text-teal-600">55원</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">거래명세서, 청구서, 견적서 등 동일</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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"><i class="ri-receipt-line text-green-600"></i></span> 현금영수증</td>
|
|
<td class="px-4 py-3 text-center font-bold text-teal-600">11원</td>
|
|
<td class="px-4 py-3 text-gray-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-gray-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"><i class="ri-kakao-talk-line text-blue-600"></i></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-gray-500 text-xs">최저가 권장</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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"><i class="ri-smartphone-line text-blue-600"></i></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-gray-500 text-xs">90byte 이하</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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"><i class="ri-smartphone-line text-blue-600"></i></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-gray-500 text-xs">2,000byte 이하</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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"><i class="ri-printer-line text-purple-600"></i></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-gray-500 text-xs">-</td>
|
|
</tr>
|
|
<tr class="bg-gray-50"><td colspan="3" class="px-4 py-2 font-medium text-gray-700 text-xs">기타 조회</td></tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 flex items-center"><span class="w-6 h-6 bg-gray-200 rounded flex items-center justify-center mr-2 text-xs"><i class="ri-search-line text-gray-600"></i></span> 사업자등록 상태조회</td>
|
|
<td class="px-4 py-3 text-center font-bold text-teal-600">11원</td>
|
|
<td class="px-4 py-3 text-gray-500 text-xs">휴/폐업 실시간 확인</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3 class="text-sm font-bold text-gray-700 mb-4 mt-8 flex items-center">
|
|
<i class="ri-calendar-line mr-2 text-blue-600"></i> 2. 월정액 서비스
|
|
</h3>
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-gray-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-gray-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-gray-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-gray-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-gray-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-gray-500 text-xs">최저가</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-500 text-xs">최저가</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-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-gray-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-gray-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-gray-500 text-xs">번호 유지비 포함</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- 월별 시나리오 --}}
|
|
<div class="mb-8">
|
|
<h3 class="text-sm font-bold text-gray-700 mb-4 flex items-center">
|
|
<i class="ri-bar-chart-grouped-line mr-2 text-teal-600"></i> 월별 예상 비용 시나리오
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
|
|
<div class="text-teal-600 font-bold mb-2">소규모 기업</div>
|
|
<ul class="text-xs text-gray-600 space-y-1 mb-4">
|
|
<li>세금계산서 100건</li>
|
|
<li>알림톡 500건</li>
|
|
<li>계좌조회(1일) 1회</li>
|
|
</ul>
|
|
<div class="text-lg font-bold text-gray-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-gray-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-gray-50 rounded-lg p-4 border border-gray-200">
|
|
<div class="text-blue-600 font-bold mb-2">대규모 기업</div>
|
|
<ul class="text-xs text-gray-600 space-y-1 mb-4">
|
|
<li>세금계산서 2,000건</li>
|
|
<li>알림톡 10,000건</li>
|
|
<li>계좌/홈택스 풀세트</li>
|
|
</ul>
|
|
<div class="text-lg font-bold text-gray-800">약 376,200원</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-5 mb-6">
|
|
<h4 class="font-medium text-blue-800 mb-3 flex items-center text-sm">
|
|
<i class="ri-lightbulb-line mr-2"></i> 검토 및 권장 사항
|
|
</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-lg shadow-sm p-6 mb-6 border border-gray-200 bb-fade-in bb-fade-in-4">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-clipboard-line mr-2 text-teal-600"></i> 회원사 가입 프로세스
|
|
</h2>
|
|
<p class="text-sm text-gray-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"><i class="ri-edit-line"></i></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"><i class="ri-key-2-line"></i></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"><i class="ri-shield-keyhole-line"></i></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"><i class="ri-bank-card-line"></i></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-lg shadow-sm p-6 border border-gray-200 bb-fade-in bb-fade-in-4">
|
|
<h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
|
|
<i class="ri-settings-3-line mr-2 text-teal-600"></i> 과금 방식 상세
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{{-- 포인트 시스템 --}}
|
|
<div class="border border-gray-200 rounded-lg p-5">
|
|
<h3 class="font-medium text-gray-700 mb-4 flex items-center">
|
|
<span class="w-8 h-8 bg-teal-100 rounded-lg flex items-center justify-center mr-2">
|
|
<i class="ri-diamond-line text-teal-600"></i>
|
|
</span>
|
|
포인트 시스템
|
|
</h3>
|
|
<ul class="space-y-3 text-sm text-gray-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-gray-200 rounded-lg p-5">
|
|
<h3 class="font-medium text-gray-700 mb-4 flex items-center">
|
|
<span class="w-8 h-8 bg-blue-100 rounded-lg flex items-center justify-center mr-2">
|
|
<i class="ri-bar-chart-grouped-line text-blue-600"></i>
|
|
</span>
|
|
정산 및 결제
|
|
</h3>
|
|
<ul class="space-y-3 text-sm text-gray-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-gray-700 mb-3">회원사 포인트 조회 API</h3>
|
|
<div class="bg-gray-900 text-gray-100 rounded-lg p-4 text-sm font-mono overflow-x-auto">
|
|
<div class="text-gray-400">// 회원사 포인트 잔액 조회</div>
|
|
<div class="text-green-400 mt-2">$balance = $barobill->GetBalance(</div>
|
|
<div class="text-gray-300 ml-4">"CERT_KEY", <span class="text-gray-500">// 파트너 인증키</span></div>
|
|
<div class="text-gray-300 ml-4">"1234567890" <span class="text-gray-500">// 회원사 사업자번호</span></div>
|
|
<div class="text-green-400">);</div>
|
|
<div class="text-gray-400 mt-3">// 반환값: 현재 잔액 (원)</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 문의 안내 --}}
|
|
<div class="mt-6 bg-gradient-to-r from-gray-800 to-gray-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-gray-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">
|
|
<i class="ri-phone-line mr-2"></i> 070-4040-5617
|
|
</a>
|
|
<a href="https://dev.barobill.co.kr" target="_blank" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm transition-colors flex items-center">
|
|
<i class="ri-global-line mr-2"></i> 개발자센터
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ============================================ --}}
|
|
{{-- 상세 단가표 --}}
|
|
{{-- ============================================ --}}
|
|
<div class="mt-12 pt-12 border-t border-gray-200 bb-fade-in bb-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">
|
|
<i class="ri-calculator-line text-white text-2xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900">바로빌 API 구간별 상세 단가표</h2>
|
|
<p class="text-sm text-gray-500">전체 구간별 할인 요율 및 계산 예시 / VAT 별도</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Pricing Tabs --}}
|
|
<div class="bg-gray-100 p-1 rounded-lg inline-flex mb-6 gap-1 flex-wrap border border-gray-200">
|
|
<button onclick="bbShowPricingTab('all')" id="bb-tab-pricing-all" class="bb-pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all bb-pricing-tab-active">전체 보기</button>
|
|
<button onclick="bbShowPricingTab('tax')" id="bb-tab-pricing-tax" class="bb-pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-900">전자세금계산서</button>
|
|
<button onclick="bbShowPricingTab('account')" id="bb-tab-pricing-account" class="bb-pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-900">계좌조회</button>
|
|
<button onclick="bbShowPricingTab('card')" id="bb-tab-pricing-card" class="bb-pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-900">카드</button>
|
|
<button onclick="bbShowPricingTab('hometax')" id="bb-tab-pricing-hometax" class="bb-pricing-tab-btn px-4 py-2 rounded-md text-sm font-medium transition-all text-gray-600 hover:text-gray-900">홈택스</button>
|
|
</div>
|
|
|
|
{{-- Card: Tax --}}
|
|
<div class="bb-pricing-card mb-6" id="bb-card-pricing-tax">
|
|
<div class="p-6 border-b border-gray-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">
|
|
<i class="ri-file-text-line text-emerald-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-900">전자세금계산서</h2>
|
|
<p class="text-sm text-gray-500">발급 건당 과금 / 6개 구간</p>
|
|
</div>
|
|
</div>
|
|
<span class="bb-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-gray-100">
|
|
<h3 class="text-sm font-semibold text-gray-700 mb-4 flex items-center gap-2">
|
|
<i class="ri-list-unordered text-gray-500"></i>
|
|
구간별 기본 단가
|
|
</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bb-pricing-table-header">
|
|
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-gray-600">구간</th>
|
|
<th class="text-left py-3 px-4 font-medium text-gray-600">발급건수</th>
|
|
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-gray-600">단가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50">
|
|
<td class="py-3 px-4"><span class="bb-pricing-badge bg-gray-100 text-gray-700">기본</span></td>
|
|
<td class="py-3 px-4 text-gray-600">3,000건 이하</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-gray-900">100원</td>
|
|
</tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50">
|
|
<td class="py-3 px-4"><span class="bb-pricing-badge bg-teal-50 text-teal-700">1구간</span></td>
|
|
<td class="py-3 px-4 text-gray-600">3,001 ~ 4,000</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-gray-900">90원</td>
|
|
</tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50">
|
|
<td class="py-3 px-4"><span class="bb-pricing-badge bg-teal-50 text-teal-700">2구간</span></td>
|
|
<td class="py-3 px-4 text-gray-600">4,001 ~ 5,000</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-gray-900">80원</td>
|
|
</tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50">
|
|
<td class="py-3 px-4"><span class="bb-pricing-badge bg-teal-50 text-teal-700">3구간</span></td>
|
|
<td class="py-3 px-4 text-gray-600">5,001 ~ 8,000</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-gray-900">70원</td>
|
|
</tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50">
|
|
<td class="py-3 px-4"><span class="bb-pricing-badge bg-teal-50 text-teal-700">4구간</span></td>
|
|
<td class="py-3 px-4 text-gray-600">8,001 ~ 10,000</td>
|
|
<td class="py-3 px-4 text-right font-semibold text-gray-900">60원</td>
|
|
</tr>
|
|
<tr class="bb-pricing-tier-row">
|
|
<td class="py-3 px-4"><span class="bb-pricing-badge bg-purple-50 text-purple-700">5구간</span></td>
|
|
<td class="py-3 px-4 text-gray-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="bbTogglePricingSection('bb-tax-examples')" class="w-full flex items-center justify-between text-left mb-4">
|
|
<h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
|
|
<i class="ri-bar-chart-2-line text-gray-500"></i>
|
|
상세 계산 예시 (대표 사례)
|
|
</h3>
|
|
<i id="bb-tax-examples-icon" class="ri-arrow-down-s-line text-gray-400 bb-pricing-rotate"></i>
|
|
</button>
|
|
<div id="bb-tax-examples" class="bb-pricing-collapsible open space-y-4">
|
|
<div class="bb-pricing-example-card rounded-lg p-4">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<span class="font-semibold text-gray-900 text-sm"><i class="ri-bar-chart-grouped-line mr-1"></i> 월 4,000건 발급 시</span>
|
|
<span class="bb-pricing-badge bg-teal-100 text-teal-700">평균 98원</span>
|
|
</div>
|
|
<table class="w-full text-xs">
|
|
<thead><tr class="text-gray-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-gray-100"><td class="py-1 text-gray-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-gray-100"><td class="py-1 text-gray-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="bb-pricing-summary-row font-bold"><td colspan="3" class="py-2 text-gray-800">계</td><td class="text-right text-teal-600">390,000원</td></tr></tfoot>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card: Account --}}
|
|
<div class="bb-pricing-card mb-6" id="bb-card-pricing-account">
|
|
<div class="p-6 border-b border-gray-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">
|
|
<i class="ri-bank-card-2-line text-blue-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-900">계좌조회 (10분주기)</h2>
|
|
<p class="text-sm text-gray-500">등록 건당 과금 / 5개 구간</p>
|
|
</div>
|
|
</div>
|
|
<span class="bb-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-gray-700 mb-4 flex items-center gap-2">
|
|
<i class="ri-list-unordered text-gray-500"></i>
|
|
구간별 기본 단가
|
|
</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bb-pricing-table-header">
|
|
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-gray-600">구간</th>
|
|
<th class="text-left py-3 px-4 font-medium text-gray-600">등록수</th>
|
|
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-gray-600">단가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">기본 (1~50)</td><td class="py-3 px-4">50개</td><td class="py-3 px-4 text-right font-semibold">6,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">1구간 (51~100)</td><td class="py-3 px-4">50개</td><td class="py-3 px-4 text-right font-semibold">5,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">2구간 (101~500)</td><td class="py-3 px-4">400개</td><td class="py-3 px-4 text-right font-semibold">4,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">3구간 (501~1,000)</td><td class="py-3 px-4">500개</td><td class="py-3 px-4 text-right font-semibold">3,500원</td></tr>
|
|
<tr class="bb-pricing-tier-row"><td class="py-3 px-4">4구간 (1,000 초과)</td><td class="py-3 px-4">-</td><td class="py-3 px-4 text-right font-semibold text-teal-600">3,000원</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card: Card --}}
|
|
<div class="bb-pricing-card mb-6" id="bb-card-pricing-card">
|
|
<div class="p-6 border-b border-gray-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">
|
|
<i class="ri-bank-card-line text-orange-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-900">법인/개인카드 조회</h2>
|
|
<p class="text-sm text-gray-500">등록 건당 과금 / 5개 구간</p>
|
|
</div>
|
|
</div>
|
|
<span class="bb-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-gray-700 mb-4 flex items-center gap-2">
|
|
<i class="ri-list-unordered text-gray-500"></i>
|
|
구간별 기본 단가
|
|
</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bb-pricing-table-header">
|
|
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-gray-600">구간</th>
|
|
<th class="text-left py-3 px-4 font-medium text-gray-600">등록수</th>
|
|
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-gray-600">단가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">기본 (1~50)</td><td class="py-3 px-4">50개</td><td class="py-3 px-4 text-right font-semibold">3,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">1구간 (51~100)</td><td class="py-3 px-4">50개</td><td class="py-3 px-4 text-right font-semibold">2,500원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">2구간 (101~500)</td><td class="py-3 px-4">400개</td><td class="py-3 px-4 text-right font-semibold">2,300원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">3구간 (501~1,000)</td><td class="py-3 px-4">500개</td><td class="py-3 px-4 text-right font-semibold">1,900원</td></tr>
|
|
<tr class="bb-pricing-tier-row"><td class="py-3 px-4">4구간 (1,000 초과)</td><td class="py-3 px-4">-</td><td class="py-3 px-4 text-right font-semibold text-teal-600">1,700원</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card: Hometax --}}
|
|
<div class="bb-pricing-card mb-6" id="bb-card-pricing-hometax">
|
|
<div class="p-6 border-b border-gray-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">
|
|
<i class="ri-government-line text-violet-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-bold text-gray-900">홈택스 매입/매출 조회</h2>
|
|
<p class="text-sm text-gray-500">개사당 월정액 / 6개 구간</p>
|
|
</div>
|
|
</div>
|
|
<span class="bb-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-gray-700 mb-4 flex items-center gap-2">
|
|
<i class="ri-list-unordered text-gray-500"></i>
|
|
구간별 기본 단가
|
|
</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bb-pricing-table-header">
|
|
<th class="text-left py-3 px-4 rounded-l-lg font-medium text-gray-600">구간</th>
|
|
<th class="text-left py-3 px-4 font-medium text-gray-600">개사수</th>
|
|
<th class="text-right py-3 px-4 rounded-r-lg font-medium text-gray-600">단가</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">기본 (1~20)</td><td class="py-3 px-4">20개사</td><td class="py-3 px-4 text-right font-semibold">30,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">1구간 (21~50)</td><td class="py-3 px-4">30개사</td><td class="py-3 px-4 text-right font-semibold">20,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">2구간 (51~100)</td><td class="py-3 px-4">50개사</td><td class="py-3 px-4 text-right font-semibold">18,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">3구간 (101~200)</td><td class="py-3 px-4">100개사</td><td class="py-3 px-4 text-right font-semibold">15,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row border-b border-gray-50"><td class="py-3 px-4">4구간 (201~500)</td><td class="py-3 px-4">300개사</td><td class="py-3 px-4 text-right font-semibold">12,000원</td></tr>
|
|
<tr class="bb-pricing-tier-row"><td class="py-3 px-4">5구간 (500 초과)</td><td class="py-3 px-4">-</td><td class="py-3 px-4 text-right font-semibold text-teal-600">10,000원</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Summary Table --}}
|
|
<div class="bb-pricing-card mt-8" id="bb-pricing-summary-section">
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
|
|
<i class="ri-bar-chart-2-line text-teal-600"></i>
|
|
서비스별 할인 요율 요약
|
|
</h3>
|
|
<p class="text-sm text-gray-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-gray-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-gray-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-gray-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-gray-500 mt-1">30,000원 -> 10,000원</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Additional Info --}}
|
|
<div class="mt-8 text-center text-xs text-gray-500">
|
|
<p>위 단가표는 Code Bridge X 파트너 전용 특별 할인 단가입니다.</p>
|
|
<p class="mt-1">정확한 견적은 사용량 추이에 따라 매달 정산됩니다.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ============================================ --}}
|
|
{{-- 모달창들 --}}
|
|
{{-- ============================================ --}}
|
|
|
|
{{-- 모달 오버레이 --}}
|
|
<div id="bbModalOverlay" 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="bbCloseModal(event)">
|
|
|
|
{{-- 회사 정보 관리 모달 --}}
|
|
<div id="bbCompanyModal" class="bb-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-gray-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center">
|
|
<i class="ri-building-2-line mr-2 text-teal-600"></i> 회사 정보 관리
|
|
</h3>
|
|
<button onclick="bbCloseModal()" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors">
|
|
<i class="ri-close-line text-gray-500 text-xl"></i>
|
|
</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-gray-700 mb-3 flex items-center">
|
|
<span class="w-6 h-6 bg-gray-800 text-white rounded text-xs flex items-center justify-center mr-2">API</span>
|
|
RegistCorp - 회원사 등록
|
|
</h4>
|
|
<div class="bg-gray-900 text-gray-100 rounded-lg p-4 text-sm font-mono overflow-x-auto">
|
|
<div class="text-gray-400">// 회원사 등록 API 호출 예시</div>
|
|
<div class="text-green-400 mt-2">$result = $barobill->RegistCorp(</div>
|
|
<div class="text-gray-300 ml-4">"CERT_KEY", <span class="text-gray-500">// 인증키</span></div>
|
|
<div class="text-gray-300 ml-4">"1234567890", <span class="text-gray-500">// 사업자번호</span></div>
|
|
<div class="text-gray-300 ml-4">"(주)샘플회사", <span class="text-gray-500">// 상호</span></div>
|
|
<div class="text-gray-300 ml-4">"홍길동", <span class="text-gray-500">// 대표자명</span></div>
|
|
<div class="text-gray-300 ml-4">"서울시 강남구", <span class="text-gray-500">// 주소</span></div>
|
|
<div class="text-gray-300 ml-4">"서비스업", <span class="text-gray-500">// 업태</span></div>
|
|
<div class="text-gray-300 ml-4">"소프트웨어" <span class="text-gray-500">// 종목</span></div>
|
|
<div class="text-green-400">);</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 필수 입력 필드 --}}
|
|
<div class="mb-6">
|
|
<h4 class="font-medium text-gray-700 mb-3">필수 입력 필드</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
<div class="border border-gray-200 rounded-lg p-3">
|
|
<div class="text-xs text-red-500 font-medium mb-1">[필수]</div>
|
|
<div class="font-medium text-gray-700 text-sm">사업자등록번호</div>
|
|
<div class="text-xs text-gray-500">'-' 제외 10자리 숫자</div>
|
|
</div>
|
|
<div class="border border-gray-200 rounded-lg p-3">
|
|
<div class="text-xs text-red-500 font-medium mb-1">[필수]</div>
|
|
<div class="font-medium text-gray-700 text-sm">상호 (회사명)</div>
|
|
<div class="text-xs text-gray-500">사업자등록증상의 상호</div>
|
|
</div>
|
|
<div class="border border-gray-200 rounded-lg p-3">
|
|
<div class="text-xs text-red-500 font-medium mb-1">[필수]</div>
|
|
<div class="font-medium text-gray-700 text-sm">대표자명</div>
|
|
<div class="text-xs text-gray-500">사업자등록증상의 대표자</div>
|
|
</div>
|
|
<div class="border border-gray-200 rounded-lg p-3">
|
|
<div class="text-xs text-gray-500 font-medium mb-1">[선택]</div>
|
|
<div class="font-medium text-gray-700 text-sm">업태 / 종목</div>
|
|
<div class="text-xs text-gray-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">
|
|
<i class="ri-alarm-warning-line mr-2"></i> 주의사항
|
|
</h4>
|
|
<ul class="text-sm text-amber-700 space-y-1">
|
|
<li>• 사업자등록번호는 변경이 불가능합니다.</li>
|
|
<li>• 휴/폐업 사업자는 등록할 수 없습니다.</li>
|
|
<li>• 등록 후 연동키가 발급되며, 이 키는 안전하게 보관해야 합니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 바로빌 연동 설정 모달 --}}
|
|
<div id="bbApiModal" class="bb-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-gray-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center">
|
|
<i class="ri-shield-keyhole-line mr-2 text-teal-600"></i> 바로빌 연동 설정
|
|
</h3>
|
|
<button onclick="bbCloseModal()" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors">
|
|
<i class="ri-close-line text-gray-500 text-xl"></i>
|
|
</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-gray-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-gray-50 rounded-lg p-3">
|
|
<div class="font-medium text-gray-700 text-sm">개발자센터 가입</div>
|
|
<div class="text-xs text-gray-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-gray-50 rounded-lg p-3">
|
|
<div class="font-medium text-gray-700 text-sm">인증키 발급</div>
|
|
<div class="text-xs text-gray-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-gray-50 rounded-lg p-3">
|
|
<div class="font-medium text-gray-700 text-sm">공인인증서 등록</div>
|
|
<div class="text-xs text-gray-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-gray-50 rounded-lg p-3">
|
|
<div class="font-medium text-gray-700 text-sm">연동 테스트</div>
|
|
<div class="text-xs text-gray-500 mt-1">테스트베드에서 API 호출 검증</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- API 엔드포인트 --}}
|
|
<div class="mb-6">
|
|
<h4 class="font-medium text-gray-700 mb-3">API 엔드포인트</h4>
|
|
<div class="space-y-2">
|
|
<div class="bg-gray-900 text-gray-100 rounded-lg p-3 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xs text-gray-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-gray-900 text-gray-100 rounded-lg p-3 flex items-center justify-between">
|
|
<div>
|
|
<div class="text-xs text-gray-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-gray-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-gray-700 mb-3">지원 개발 언어</h4>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach(['Java', 'Python', 'PHP', '.NET', 'Node.js', 'ASP', 'Delphi', 'PowerBuilder'] as $lang)
|
|
<span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs">{{ $lang }}</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 사용자 권한 설정 모달 --}}
|
|
<div id="bbPermissionModal" class="bb-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-gray-200 px-6 py-4 flex items-center justify-between rounded-t-xl">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center">
|
|
<i class="ri-team-line mr-2 text-teal-600"></i> 사용자 권한 설정
|
|
</h3>
|
|
<button onclick="bbCloseModal()" class="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors">
|
|
<i class="ri-close-line text-gray-500 text-xl"></i>
|
|
</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-gray-700 mb-3">권한 유형</h4>
|
|
<div class="space-y-3">
|
|
<div class="border border-gray-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-gray-700">관리자 (Admin)</div>
|
|
<div class="text-xs text-gray-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-gray-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-gray-700">매니저 (Manager)</div>
|
|
<div class="text-xs text-gray-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-gray-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-gray-700">사용자 (User)</div>
|
|
<div class="text-xs text-gray-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-gray-700 mb-3">권한별 기능 매트릭스</h4>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="text-left px-3 py-2 font-medium text-gray-700">기능</th>
|
|
<th class="text-center px-3 py-2 font-medium text-gray-700">Admin</th>
|
|
<th class="text-center px-3 py-2 font-medium text-gray-700">Manager</th>
|
|
<th class="text-center px-3 py-2 font-medium text-gray-700">User</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<tr>
|
|
<td class="px-3 py-2 text-gray-600">세금계산서 발급</td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-gray-300">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 text-gray-600">세금계산서 조회</td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 text-gray-600">카드/계좌 내역 조회</td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 text-gray-600">카드/계좌 등록</td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-gray-300">-</td>
|
|
<td class="px-3 py-2 text-center text-gray-300">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 text-gray-600">회사 정보 수정</td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-gray-300">-</td>
|
|
<td class="px-3 py-2 text-center text-gray-300">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-3 py-2 text-gray-600">사용자 권한 관리</td>
|
|
<td class="px-3 py-2 text-center text-green-600"><i class="ri-check-line"></i></td>
|
|
<td class="px-3 py-2 text-center text-gray-300">-</td>
|
|
<td class="px-3 py-2 text-center text-gray-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">
|
|
<i class="ri-lock-line mr-2"></i> 보안 권장사항
|
|
</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>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
@verbatim
|
|
<script>
|
|
// 탭 전환 기능
|
|
document.querySelectorAll('.bb-nav-tab').forEach(tab => {
|
|
tab.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 모든 탭 비활성화
|
|
document.querySelectorAll('.bb-nav-tab').forEach(t => {
|
|
t.classList.remove('bb-tab-active');
|
|
t.classList.add('text-gray-600');
|
|
});
|
|
|
|
// 클릭한 탭 활성화
|
|
this.classList.add('bb-tab-active');
|
|
this.classList.remove('text-gray-600');
|
|
|
|
// 모든 콘텐츠 숨김
|
|
document.querySelectorAll('.bb-tab-content').forEach(content => {
|
|
content.classList.remove('active');
|
|
});
|
|
|
|
// 해당 콘텐츠 표시
|
|
const tabId = this.getAttribute('data-tab');
|
|
document.getElementById(tabId).classList.add('active');
|
|
|
|
// 애니메이션 재실행
|
|
document.querySelectorAll('#' + tabId + ' .bb-fade-in').forEach(el => {
|
|
el.style.animation = 'none';
|
|
el.offsetHeight;
|
|
el.style.animation = null;
|
|
});
|
|
});
|
|
});
|
|
|
|
// 모달 관련 함수
|
|
let bbCurrentModal = null;
|
|
|
|
function bbOpenModal(modalId) {
|
|
const overlay = document.getElementById('bbModalOverlay');
|
|
const modal = document.getElementById(modalId);
|
|
|
|
// 오버레이 표시
|
|
overlay.classList.remove('hidden');
|
|
document.body.style.overflow = 'hidden';
|
|
|
|
// 모달 표시
|
|
modal.classList.remove('hidden');
|
|
bbCurrentModal = modal;
|
|
|
|
// 애니메이션 시작
|
|
setTimeout(() => {
|
|
overlay.classList.add('show');
|
|
modal.classList.add('show');
|
|
}, 10);
|
|
}
|
|
|
|
function bbCloseModal(event) {
|
|
// 이벤트가 있고, 타겟이 오버레이가 아니면 무시
|
|
if (event && event.target !== document.getElementById('bbModalOverlay')) {
|
|
return;
|
|
}
|
|
|
|
const overlay = document.getElementById('bbModalOverlay');
|
|
|
|
if (bbCurrentModal) {
|
|
// 애니메이션 종료
|
|
overlay.classList.remove('show');
|
|
bbCurrentModal.classList.remove('show');
|
|
|
|
// 애니메이션 후 숨김
|
|
setTimeout(() => {
|
|
overlay.classList.add('hidden');
|
|
bbCurrentModal.classList.add('hidden');
|
|
bbCurrentModal = null;
|
|
document.body.style.overflow = '';
|
|
}, 200);
|
|
}
|
|
}
|
|
|
|
// ESC 키로 모달 닫기
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && bbCurrentModal) {
|
|
bbCloseModal();
|
|
}
|
|
});
|
|
|
|
// 상세 단가표 제어 함수
|
|
function bbShowPricingTab(tabId) {
|
|
document.querySelectorAll('.bb-pricing-tab-btn').forEach(btn => {
|
|
btn.classList.remove('bb-pricing-tab-active');
|
|
btn.classList.add('text-gray-600');
|
|
});
|
|
|
|
const activeTab = document.getElementById('bb-tab-pricing-' + tabId);
|
|
activeTab.classList.add('bb-pricing-tab-active');
|
|
activeTab.classList.remove('text-gray-600');
|
|
|
|
const cards = ['tax', 'account', 'card', 'hometax'];
|
|
const summarySection = document.getElementById('bb-pricing-summary-section');
|
|
|
|
if (tabId === 'all') {
|
|
cards.forEach(card => {
|
|
document.getElementById('bb-card-pricing-' + card).style.display = 'block';
|
|
});
|
|
summarySection.style.display = 'block';
|
|
} else {
|
|
cards.forEach(card => {
|
|
document.getElementById('bb-card-pricing-' + card).style.display = (card === tabId) ? 'block' : 'none';
|
|
});
|
|
summarySection.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
function bbTogglePricingSection(sectionId) {
|
|
const section = document.getElementById(sectionId);
|
|
const icon = document.getElementById(sectionId + '-icon');
|
|
section.classList.toggle('open');
|
|
icon.classList.toggle('open');
|
|
}
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|