feat: [help] 도움말 > 회계동작원리 페이지 추가

- 6탭 구성: 전체 흐름도, 일상 업무, 월간 업무, 세금/부가세, 정산/결산, 메뉴 맵
- AccountingGuideController + HX-Redirect 패턴 적용
- 중소기업 회계담당자를 위한 SAM 재무/회계 가이드
This commit is contained in:
김보곤
2026-03-07 18:36:08 +09:00
parent f8e5a4df75
commit 33f0a9b808
3 changed files with 824 additions and 0 deletions

View File

@@ -0,0 +1,23 @@
<?php
namespace App\Http\Controllers\Help;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Illuminate\View\View;
/**
* 도움말 > 회계동작원리 컨트롤러
*/
class AccountingGuideController extends Controller
{
public function index(Request $request): View|Response
{
if ($request->header('HX-Request')) {
return response('', 200)->header('HX-Redirect', route('help.accounting.index'));
}
return view('help.accounting.index');
}
}

View File

@@ -0,0 +1,790 @@
@extends('layouts.app')
@section('title', '회계동작원리')
@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap" rel="stylesheet">
<style>
.acg-body { font-family: 'Noto Sans KR', sans-serif; color: #1e293b; }
/* 히어로 */
.acg-hero { background: linear-gradient(135deg, #1e3a5f 0%, #0f4c75 40%, #1b6ca8 70%, #3282b8 100%); }
.acg-hero-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; filter: blur(80px); opacity: 0.12; }
/* 탭 */
.acg-tab { padding: 0.5rem 1.25rem; border-radius: 2rem; font-weight: 600; font-size: 0.8rem; transition: all 0.2s; border: 2px solid transparent; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); cursor: pointer; }
.acg-tab:hover { color: white; background: rgba(255,255,255,0.1); }
.acg-tab.active { background: rgba(255,255,255,0.15); color: white; border-color: rgba(255,255,255,0.3); }
.acg-section { display: none; }
.acg-section.active { display: block; }
/* 플로우 카드 */
.flow-card { background: white; border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; transition: all 0.3s; }
.flow-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.flow-head { padding: 1rem 1.25rem; color: white; font-weight: 700; font-size: 0.85rem; }
.flow-body { padding: 1.25rem; }
/* 스텝 */
.step-row { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; position: relative; }
.step-row:last-child { margin-bottom: 0; }
.step-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: white; flex-shrink: 0; }
.step-content { flex: 1; }
.step-title { font-weight: 700; font-size: 0.85rem; margin-bottom: 2px; }
.step-desc { font-size: 0.75rem; color: #64748b; line-height: 1.6; }
.step-menu { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 0.65rem; font-weight: 600; background: #f0f9ff; border: 1px solid #bae6fd; color: #0369a1; margin-top: 4px; }
/* 연결 화살표 */
.flow-arrow { display: flex; justify-content: center; align-items: center; padding: 0.5rem 0; color: #94a3b8; font-size: 1.5rem; }
/* 주의사항 박스 */
.notice-box { border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 0.8rem; line-height: 1.7; }
.notice-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.notice-warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.notice-tip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
/* 메뉴 맵 */
.menu-map { background: #f8fafc; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1.5rem; }
.menu-group { margin-bottom: 1.25rem; }
.menu-group:last-child { margin-bottom: 0; }
.menu-group-title { font-weight: 800; font-size: 0.85rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.menu-item { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 500; background: white; border: 1px solid #e2e8f0; margin: 2px; transition: all 0.2s; }
.menu-item:hover { border-color: #3b82f6; background: #eff6ff; }
.menu-item-num { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 800; color: white; }
/* 월간 업무 달력 */
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.cal-card { background: white; border-radius: 0.75rem; border: 1px solid #e2e8f0; padding: 1rem; }
.cal-day { font-size: 2rem; font-weight: 900; line-height: 1; }
.cal-label { font-size: 0.7rem; font-weight: 600; margin-top: 0.25rem; }
.cal-desc { font-size: 0.7rem; color: #64748b; margin-top: 0.5rem; line-height: 1.5; }
/* 흐름도 */
.process-flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; justify-content: center; }
.process-step { flex: 1; min-width: 120px; max-width: 180px; text-align: center; padding: 1rem 0.5rem; position: relative; }
.process-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.5rem; font-size: 1.25rem; }
.process-name { font-weight: 700; font-size: 0.8rem; }
.process-sub { font-size: 0.65rem; color: #64748b; margin-top: 2px; }
.process-arrow { display: flex; align-items: center; color: #cbd5e1; font-size: 1.2rem; padding: 0 2px; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.anim-in { animation: fadeIn 0.5s ease-out forwards; }
</style>
@endpush
@section('content')
<div class="acg-body">
{{-- ===== 히어로 ===== --}}
<div class="acg-hero text-white px-6 py-10 rounded-b-3xl mb-8 relative overflow-hidden">
<div class="acg-hero-glow" style="top: -40px; right: -40px; background: #60a5fa;"></div>
<div class="acg-hero-glow" style="bottom: -60px; left: 15%; background: #34d399;"></div>
<div style="max-width: 1400px; margin: 0 auto; position: relative; z-index: 1;">
<div class="flex items-center gap-3 mb-3">
<div style="width: 48px; height: 48px; background: linear-gradient(135deg, #2563eb, #3b82f6); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
<span style="font-size: 1.5rem;">📒</span>
</div>
<div>
<p class="text-blue-300 text-xs font-bold tracking-wider uppercase">SAM 도움말</p>
<h1 class="text-3xl font-black">회계동작원리</h1>
</div>
</div>
<p class="text-blue-100 text-sm mb-6" style="max-width: 700px;">
중소기업 회계담당자와 경리담당자를 위한 SAM 재무/회계 시스템 완전 가이드.
일상 업무부터 결산까지, 문서 하나로 SAM의 회계 프로세스를 완벽하게 이해할 있습니다.
</p>
<div class="flex flex-wrap gap-2">
<button class="acg-tab active" onclick="switchAcgTab(0)">전체 흐름도</button>
<button class="acg-tab" onclick="switchAcgTab(1)">일상 업무</button>
<button class="acg-tab" onclick="switchAcgTab(2)">월간 업무</button>
<button class="acg-tab" onclick="switchAcgTab(3)">세금/부가세</button>
<button class="acg-tab" onclick="switchAcgTab(4)">정산/결산</button>
<button class="acg-tab" onclick="switchAcgTab(5)">메뉴 </button>
</div>
</div>
</div>
<div style="max-width: 1400px; margin: 0 auto;" class="px-4">
{{-- ===== 0: 전체 흐름도 ===== --}}
<div class="acg-section active" id="acgTab0">
<h2 class="text-xl font-bold mb-2 text-gray-800">SAM 재무/회계 전체 흐름</h2>
<p class="text-sm text-gray-500 mb-6">매출 발생부터 결산까지, SAM 시스템에서 처리하는 회계의 전체 사이클을 보여줍니다.</p>
{{-- 흐름도 --}}
<div class="bg-white rounded-xl p-6 mb-6" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
<h3 class="font-bold text-sm text-gray-700 mb-4">회계 순환 과정 (Accounting Cycle)</h3>
<div class="process-flow mb-6">
<div class="process-step">
<div class="process-icon" style="background: #dbeafe; color: #2563eb;">📋</div>
<div class="process-name">거래 발생</div>
<div class="process-sub">매출/매입/경비</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="process-icon" style="background: #fef3c7; color: #d97706;"></div>
<div class="process-name">증빙 수집</div>
<div class="process-sub">세금계산서/카드전표</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="process-icon" style="background: #dcfce7; color: #16a34a;">📝</div>
<div class="process-name">전표 입력</div>
<div class="process-sub">일반전표/분개</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="process-icon" style="background: #f3e8ff; color: #7c3aed;">📊</div>
<div class="process-name">장부 반영</div>
<div class="process-sub">자금일보/계좌내역</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="process-icon" style="background: #fce7f3; color: #db2777;">🧮</div>
<div class="process-name">세무 신고</div>
<div class="process-sub">부가세/원천세</div>
</div>
<div class="process-arrow"></div>
<div class="process-step">
<div class="process-icon" style="background: #ecfdf5; color: #059669;"></div>
<div class="process-name">결산</div>
<div class="process-sub">/분기/ 마감</div>
</div>
</div>
<div class="notice-info notice-box">
<strong>핵심 원리:</strong> SAM에서는 모든 거래가 <strong>증빙(세금계산서, 카드전표, 입금증)</strong> 기반으로 처리됩니다. 증빙 없는 거래는 존재하지 않으며, 증빙은 자동 또는 수동으로 <strong>전표(분개)</strong> 변환되어 장부에 반영됩니다.
</div>
</div>
{{-- 4 영역 --}}
<h3 class="font-bold text-sm text-gray-700 mb-3">SAM 회계의 4 영역</h3>
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #1d4ed8, #3b82f6);">
<span style="margin-right: 4px;">💰</span> 재무/자금관리
</div>
<div class="flow-body">
<p class="text-xs text-gray-600 mb-3">회사의 <strong>돈의 흐름</strong> 관리합니다. "지금 통장에 얼마 있지?", "이번 주 지출 예정은?"</p>
<div class="space-y-1">
<div class="step-menu">재무 대시보드 전사 자금 현황 한눈에</div>
<div class="step-menu">일일자금일보 매일 입출금 요약</div>
<div class="step-menu">자금계획일정 미래 자금 스케줄</div>
<div class="step-menu">보유계좌관리 법인 통장 목록</div>
<div class="step-menu">계좌입출금내역 실제 이체 내역</div>
</div>
</div>
</div>
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
<span style="margin-right: 4px;">📒</span> 회계/세무관리
</div>
<div class="flow-body">
<p class="text-xs text-gray-600 mb-3">거래를 <strong>장부에 기록</strong>하고 <strong>세금을 관리</strong>합니다. 모든 숫자의 근거가 되는 핵심 영역.</p>
<div class="space-y-1">
<div class="step-menu">일반전표입력 분개 장부 기록</div>
<div class="step-menu">전자세금계산서 바로빌 연동 발행/수취</div>
<div class="step-menu">홈택스매출/매입 국세청 데이터 동기화</div>
<div class="step-menu">부가세관리 부가가치세 신고 준비</div>
<div class="step-menu">경조사비관리 복리후생 증빙 관리</div>
</div>
</div>
</div>
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
<span style="margin-right: 4px;">💳</span> 카드/차량관리
</div>
<div class="flow-body">
<p class="text-xs text-gray-600 mb-3"><strong>법인카드 사용내역</strong> <strong>업무용 차량</strong> 관리합니다. 경비 처리의 핵심.</p>
<div class="space-y-1">
<div class="step-menu">법인카드관리 카드 등록/한도 관리</div>
<div class="step-menu">카드사용내역 승인/취소 내역 조회</div>
<div class="step-menu">차량목록 업무용 차량 등록</div>
<div class="step-menu">차량일지 운행 기록 (유류비 연동)</div>
<div class="step-menu">정비이력 수리/점검 기록</div>
</div>
</div>
</div>
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
<span style="margin-right: 4px;">🧮</span> 정산관리
</div>
<div class="flow-body">
<p class="text-xs text-gray-600 mb-3">영업수수료, 컨설팅비, 구독료 <strong>대가를 정산</strong>합니다. 누구에게 얼마를 지급/청구할지.</p>
<div class="space-y-1">
<div class="step-menu">통합 정산 전체 정산 현황</div>
<div class="step-menu">영업수수료정산 파트너별 수수료 계산</div>
<div class="step-menu">컨설팅비용정산 외부 컨설팅비</div>
<div class="step-menu">고객사정산 고객별 청구/입금 매칭</div>
<div class="step-menu">구독료정산 SaaS 구독 과금 관리</div>
</div>
</div>
</div>
</div>
{{-- 연관 영역 --}}
<h3 class="font-bold text-sm text-gray-700 mb-3">회계와 연결되는 관련 영역</h3>
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));">
<div class="flow-card" style="border-left: 3px solid #0ea5e9;">
<div class="flow-body">
<p class="font-bold text-sm text-sky-700 mb-1">고객/거래처/채권관리</p>
<p class="text-xs text-gray-500 mb-2">거래처 등록, 미수금/미지급금 추적, 환불/해지 처리</p>
<div class="flex flex-wrap gap-1">
<span class="step-menu">거래처관리</span>
<span class="step-menu">미수금관리</span>
<span class="step-menu">미지급금관리</span>
<span class="step-menu">환불/해지관리</span>
</div>
</div>
</div>
<div class="flow-card" style="border-left: 3px solid #f43f5e;">
<div class="flow-body">
<p class="font-bold text-sm text-rose-700 mb-1">인사/급여관리</p>
<p class="text-xs text-gray-500 mb-2">사원정보, 급여 계산, 4대보험, 원천징수</p>
<div class="flex flex-wrap gap-1">
<span class="step-menu">사원관리</span>
<span class="step-menu">급여관리</span>
<span class="step-menu">사업소득자관리</span>
<span class="step-menu">근태현황</span>
</div>
</div>
</div>
<div class="flow-card" style="border-left: 3px solid #8b5cf6;">
<div class="flow-body">
<p class="font-bold text-sm text-violet-700 mb-1">영업/매출관리</p>
<p class="text-xs text-gray-500 mb-2">영업 실적, 고객 관리, 수주 데이터 매출 전표로 연결</p>
<div class="flex flex-wrap gap-1">
<span class="step-menu">영업실적관리</span>
<span class="step-menu">파트너관리</span>
<span class="step-menu">고객관리</span>
<span class="step-menu">상품관리</span>
</div>
</div>
</div>
</div>
</div>
{{-- ===== 1: 일상 업무 ===== --}}
<div class="acg-section" id="acgTab1">
<h2 class="text-xl font-bold mb-2 text-gray-800">일상 업무 가이드</h2>
<p class="text-sm text-gray-500 mb-6">회계담당자가 매일 처리하는 핵심 업무를 단계별로 안내합니다.</p>
<div class="grid gap-5" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));">
{{-- 출근 확인 --}}
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #1d4ed8, #3b82f6);">
출근 자금 현황 확인
</div>
<div class="flow-body">
<div class="step-row">
<div class="step-num" style="background: #2563eb;">1</div>
<div class="step-content">
<div class="step-title">재무 대시보드 확인</div>
<div class="step-desc">전사 자금 현황, 당일 입출금 예정, 미수금/미지급금 알림을 한눈에 확인합니다.</div>
<span class="step-menu">재무/자금관리 > 재무 대시보드</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #2563eb;">2</div>
<div class="step-content">
<div class="step-title">계좌 입출금 내역 조회</div>
<div class="step-desc">전일 이후 발생한 입출금 내역을 확인하고, 미확인 건이 있는지 체크합니다.</div>
<span class="step-menu">재무/자금관리 > 계좌입출금내역</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #2563eb;">3</div>
<div class="step-content">
<div class="step-title">일일자금일보 작성</div>
<div class="step-desc">전일 기준 자금 현황을 정리하여 대표에게 보고할 자금일보를 확인/작성합니다.</div>
<span class="step-menu">재무/자금관리 > 일일자금일보</span>
</div>
</div>
</div>
</div>
{{-- 매출/매입 처리 --}}
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
📑 일상 매출/매입 전표 처리
</div>
<div class="flow-body">
<div class="step-row">
<div class="step-num" style="background: #059669;">1</div>
<div class="step-content">
<div class="step-title">세금계산서 확인</div>
<div class="step-desc">바로빌 연동으로 발행/수취한 전자세금계산서를 확인합니다. 누락 건이 없는지 매일 체크.</div>
<span class="step-menu">회계/세무관리 > 전자세금계산서</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #059669;">2</div>
<div class="step-content">
<div class="step-title">전표 입력 (분개)</div>
<div class="step-desc">세금계산서, 입금증, 지출증빙 등을 기반으로 차변/대변 분개 전표를 입력합니다.</div>
<span class="step-menu">회계/세무관리 > 일반전표입력</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #059669;">3</div>
<div class="step-content">
<div class="step-title">미수금/미지급금 확인</div>
<div class="step-desc">거래처별 미수금(받을 ) 미지급금( ) 잔액을 확인하고 독촉/지급 일정을 관리합니다.</div>
<span class="step-menu">고객/거래처/채권관리 > 미수금/미지급금관리</span>
</div>
</div>
</div>
</div>
{{-- 법인카드 --}}
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
💳 일상 법인카드 관리
</div>
<div class="flow-body">
<div class="step-row">
<div class="step-num" style="background: #d97706;">1</div>
<div class="step-content">
<div class="step-title">카드 사용내역 조회</div>
<div class="step-desc">임직원의 법인카드 사용 내역을 조회합니다. 사용 목적, 금액, 가맹점 정보를 확인합니다.</div>
<span class="step-menu">카드/차량관리 > 카드사용내역</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #d97706;">2</div>
<div class="step-content">
<div class="step-title">사용 내역 분류</div>
<div class="step-desc"> 사용건의 계정 과목을 분류합니다 (접대비, 복리후생비, 소모품비, 여비교통비 ).</div>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #d97706;">3</div>
<div class="step-content">
<div class="step-title">증빙 확인 전표 연결</div>
<div class="step-desc">영수증/카드전표를 증빙으로 첨부하고, 해당 전표를 일반전표에 반영합니다.</div>
</div>
</div>
<div class="notice-tip notice-box mt-3" style="font-size: 0.7rem;">
<strong>:</strong> 법인카드 사용 내역은 카드사 연동으로 자동 수집됩니다. 경리담당자는 <strong>계정 과목 분류</strong> <strong>사용 목적 확인</strong> 집중하세요.
</div>
</div>
</div>
{{-- 경비/지출 --}}
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">
🧾 일상 경비/지출 처리
</div>
<div class="flow-body">
<div class="step-row">
<div class="step-num" style="background: #7c3aed;">1</div>
<div class="step-content">
<div class="step-title">경조사비 처리</div>
<div class="step-desc">직원 경조사 발생 축의금/조의금을 등록합니다. 비과세 한도(20만원) 자동 체크.</div>
<span class="step-menu">회계/세무관리 > 경조사비관리</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #7c3aed;">2</div>
<div class="step-content">
<div class="step-title">거래처 관리</div>
<div class="step-desc">신규 거래처 등록, 사업자등록번호 확인, 계좌정보 관리. 세금계산서 발행에 필요한 기초 정보.</div>
<span class="step-menu">고객/거래처/채권관리 > 거래처관리</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #7c3aed;">3</div>
<div class="step-content">
<div class="step-title">환불/해지 처리</div>
<div class="step-desc">고객 환불 요청이나 계약 해지 환불금액을 산정하고 역분개 전표를 처리합니다.</div>
<span class="step-menu">고객/거래처/채권관리 > 환불/해지관리</span>
</div>
</div>
</div>
</div>
</div>
</div>
{{-- ===== 2: 월간 업무 ===== --}}
<div class="acg-section" id="acgTab2">
<h2 class="text-xl font-bold mb-2 text-gray-800">월간 업무 캘린더</h2>
<p class="text-sm text-gray-500 mb-6">매월 반복되는 회계/경리 업무 일정입니다. 마감일을 놓치지 않도록 참고하세요.</p>
<div class="cal-grid mb-6">
<div class="cal-card" style="border-top: 3px solid #ef4444;">
<div class="cal-day text-red-500">1~5</div>
<div class="cal-label text-red-700">전월 마감</div>
<div class="cal-desc">전월 매출/매입 세금계산서 최종 확인. 미수취 세금계산서 독촉. 전월 카드 사용내역 분류 완료.</div>
</div>
<div class="cal-card" style="border-top: 3px solid #f97316;">
<div class="cal-day text-orange-500">10</div>
<div class="cal-label text-orange-700">원천세 신고/납부</div>
<div class="cal-desc">전월 급여/사업소득에 대한 원천징수세액 신고 납부 기한. (급여관리 연동)</div>
</div>
<div class="cal-card" style="border-top: 3px solid #eab308;">
<div class="cal-day text-yellow-600">10~15</div>
<div class="cal-label text-yellow-700">급여 처리</div>
<div class="cal-desc">당월 급여 계산, 4대보험료 산정, 원천징수 계산. 급여 이체 급여 전표 처리.</div>
</div>
<div class="cal-card" style="border-top: 3px solid #22c55e;">
<div class="cal-day text-green-600">15</div>
<div class="cal-label text-green-700">4대보험 납부</div>
<div class="cal-desc">국민연금, 건강보험, 고용보험, 산재보험 사업장 분담금 납부.</div>
</div>
<div class="cal-card" style="border-top: 3px solid #3b82f6;">
<div class="cal-day text-blue-600">20</div>
<div class="cal-label text-blue-700">자금 계획 수립</div>
<div class="cal-desc">차월 지출 예정 파악, 자금 스케줄 등록, 대표 보고용 자금 계획 작성.</div>
</div>
<div class="cal-card" style="border-top: 3px solid #8b5cf6;">
<div class="cal-day text-violet-600">25</div>
<div class="cal-label text-violet-700">부가세 예정 (분기)</div>
<div class="cal-desc">1/4/7/10 25: 부가가치세 예정/확정 신고 기한. SAM의 부가세관리에서 사전 준비.</div>
</div>
<div class="cal-card" style="border-top: 3px solid #06b6d4;">
<div class="cal-day text-cyan-600">말일</div>
<div class="cal-label text-cyan-700"> 마감</div>
<div class="cal-desc">당월 전표 최종 점검, 잔액 대사(통장 vs 장부), 미처리 확인, 월간 재무제표 생성.</div>
</div>
<div class="cal-card" style="border-top: 3px solid #ec4899;">
<div class="cal-day text-pink-500">수시</div>
<div class="cal-label text-pink-700">정산 처리</div>
<div class="cal-desc">영업수수료, 컨설팅비, 구독료 정산 요청 발생 수시 처리. 고객사 정산 매칭.</div>
</div>
</div>
<div class="notice-warn notice-box mb-6">
<strong>주의:</strong> 세금계산서 발행은 <strong>거래일이 속한 달의 다음 10일까지</strong> 완료해야 합니다 (지연발급 가산세 1%). 매월 초에 전월 미발행 건을 반드시 확인하세요.
</div>
<div class="notice-info notice-box">
<strong>분기별 추가 업무:</strong> 1/4/7/10월에는 <strong>부가가치세 신고</strong> 추가됩니다. SAM의 '부가세관리'에서 매출/매입 세액을 자동 집계하여 신고서 작성을 도와줍니다.
</div>
</div>
{{-- ===== 3: 세금/부가세 ===== --}}
<div class="acg-section" id="acgTab3">
<h2 class="text-xl font-bold mb-2 text-gray-800">세금/부가세 관리</h2>
<p class="text-sm text-gray-500 mb-6">SAM에서 세금 관련 업무를 처리하는 전체 흐름입니다.</p>
{{-- 부가세 프로세스 --}}
<div class="flow-card mb-5">
<div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">
부가가치세 신고 프로세스
</div>
<div class="flow-body">
<div class="step-row">
<div class="step-num" style="background: #dc2626;">1</div>
<div class="step-content">
<div class="step-title">매출 세금계산서 발행</div>
<div class="step-desc">고객에게 재화/용역을 공급하면 전자세금계산서를 발행합니다. 바로빌 연동으로 발행하면 국세청에 자동 전송됩니다.</div>
<span class="step-menu">회계/세무관리 > 전자세금계산서</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #dc2626;">2</div>
<div class="step-content">
<div class="step-title">매입 세금계산서 수취 확인</div>
<div class="step-desc">거래처로부터 받은 매입 세금계산서를 확인합니다. 홈택스 데이터와 자동 대사하여 누락 건을 찾습니다.</div>
<span class="step-menu">회계/세무관리 > 홈택스매출/매입</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #dc2626;">3</div>
<div class="step-content">
<div class="step-title">매출세액 - 매입세액 = 납부세액</div>
<div class="step-desc">분기별로 매출세액(받은 부가세)에서 매입세액( 부가세) 차감하여 납부할 부가세를 계산합니다.</div>
<span class="step-menu">회계/세무관리 > 부가세관리</span>
</div>
</div>
<div class="step-row">
<div class="step-num" style="background: #dc2626;">4</div>
<div class="step-content">
<div class="step-title">신고서 작성 납부</div>
<div class="step-desc">SAM에서 집계된 데이터를 기반으로 부가세 신고서를 작성합니다. 납부 기한: 분기 종료 25 이내.</div>
</div>
</div>
</div>
</div>
{{-- 부가세 계산 설명 --}}
<div class="bg-white rounded-xl p-6 mb-5" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
<h3 class="font-bold text-sm text-gray-800 mb-3">부가세 계산 원리</h3>
<div class="overflow-x-auto">
<table class="w-full text-sm" style="border-collapse: separate; border-spacing: 0;">
<thead>
<tr style="background: #fef2f2;">
<th class="text-left p-3 font-bold text-red-800 rounded-tl-lg">구분</th>
<th class="text-center p-3 font-bold text-red-800">의미</th>
<th class="text-center p-3 font-bold text-red-800">예시</th>
<th class="text-center p-3 font-bold text-red-800 rounded-tr-lg">SAM 메뉴</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-3 font-medium">매출세액</td>
<td class="p-3 text-center text-xs text-gray-600">고객에게 받은 부가세 (공급가액의 10%)</td>
<td class="p-3 text-center text-xs">매출 1,000만원 부가세 100만원</td>
<td class="p-3 text-center"><span class="step-menu">전자세금계산서</span></td>
</tr>
<tr class="border-b">
<td class="p-3 font-medium">매입세액</td>
<td class="p-3 text-center text-xs text-gray-600">거래처에 부가세 (비용의 10%)</td>
<td class="p-3 text-center text-xs">매입 600만원 부가세 60만원</td>
<td class="p-3 text-center"><span class="step-menu">홈택스매출/매입</span></td>
</tr>
<tr style="background: #fef2f2;">
<td class="p-3 font-bold text-red-700">납부세액</td>
<td class="p-3 text-center text-xs font-bold text-red-700">매출세액 - 매입세액</td>
<td class="p-3 text-center text-xs font-bold text-red-700">100 - 60 = 40만원 납부</td>
<td class="p-3 text-center"><span class="step-menu">부가세관리</span></td>
</tr>
</tbody>
</table>
</div>
</div>
{{-- 세금계산서 vs 카드매입 --}}
<div class="grid gap-4 mb-5" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #059669, #34d399);">
세금계산서 기반 매입세액 공제
</div>
<div class="flow-body text-xs text-gray-600" style="line-height: 1.8;">
<p><strong>적격 증빙:</strong> 전자세금계산서, 전자계산서</p>
<p><strong>매입세액 공제:</strong> 공급가액의 10% 전액 공제 가능</p>
<p><strong>발행 기한:</strong> 공급일이 속하는 달의 다음 10</p>
<p><strong>SAM 처리:</strong> 바로빌 연동으로 자동 발행/수취, 홈택스 대사</p>
</div>
</div>
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #d97706, #f59e0b);">
법인카드 기반 매입세액 공제
</div>
<div class="flow-body text-xs text-gray-600" style="line-height: 1.8;">
<p><strong>적격 증빙:</strong> 법인카드 매출전표 (사업자 가맹점)</p>
<p><strong>매입세액 공제:</strong> 부가세 포함 금액에서 10/110 공제</p>
<p><strong>주의:</strong> 비사업자 가맹점, 간이과세자 매입은 공제 불가</p>
<p><strong>SAM 처리:</strong> 카드사 연동으로 자동 수집, 계정 과목 분류</p>
</div>
</div>
</div>
<div class="notice-tip notice-box">
<strong>실무 :</strong> 분기 부가세 신고 전에 SAM의 <strong>'홈택스매출/매입'</strong> 메뉴에서 국세청 데이터와 우리 장부를 대사하세요. 누락된 매입 세금계산서가 있으면 매입세액 공제를 받아 세금을 내게 됩니다.
</div>
</div>
{{-- ===== 4: 정산/결산 ===== --}}
<div class="acg-section" id="acgTab4">
<h2 class="text-xl font-bold mb-2 text-gray-800">정산 결산</h2>
<p class="text-sm text-gray-500 mb-6">SAM에서의 정산 업무와 /분기/연간 결산 프로세스입니다.</p>
{{-- 정산 유형 --}}
<h3 class="font-bold text-sm text-gray-700 mb-3">정산 업무 유형</h3>
<div class="grid gap-4 mb-6" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));">
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #7c3aed, #a78bfa);">영업수수료 정산</div>
<div class="flow-body">
<div class="text-xs text-gray-600 space-y-2">
<p><strong>대상:</strong> 영업파트너 (대리점, 총판, 개인 영업)</p>
<p><strong>기준:</strong> 매출 실적 x 수수료율 = 지급액</p>
<p><strong>주기:</strong> 1 (익월 15 지급)</p>
<p><strong>처리:</strong> 실적 확인 수수료 계산 세금계산서 수취 이체</p>
</div>
<span class="step-menu mt-2">정산관리 > 영업수수료정산</span>
</div>
</div>
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #0891b2, #67e8f9);">고객사 정산</div>
<div class="flow-body">
<div class="text-xs text-gray-600 space-y-2">
<p><strong>대상:</strong> 서비스 이용 고객사</p>
<p><strong>기준:</strong> 구독료 + 추가 사용량 = 청구액</p>
<p><strong>주기:</strong> 1 (당월 청구, 익월 10 입금)</p>
<p><strong>처리:</strong> 사용량 집계 청구서 발행 입금 확인 미수금 관리</p>
</div>
<span class="step-menu mt-2">정산관리 > 고객사정산</span>
</div>
</div>
<div class="flow-card">
<div class="flow-head" style="background: linear-gradient(135deg, #dc2626, #f87171);">급여 정산</div>
<div class="flow-body">
<div class="text-xs text-gray-600 space-y-2">
<p><strong>대상:</strong> 정규직 사원 + 사업소득자(프리랜서)</p>
<p><strong>기준:</strong> 기본급 + 수당 - 4대보험 - 원천세 = 실수령액</p>
<p><strong>주기:</strong> 1 (매월 15~25)</p>
<p><strong>처리:</strong> 근태 확인 급여 계산 원천징수 이체 전표</p>
</div>
<span class="step-menu mt-2">인사관리 > 급여관리</span>
</div>
</div>
</div>
{{-- 결산 프로세스 --}}
<h3 class="font-bold text-sm text-gray-700 mb-3"> 결산 체크리스트</h3>
<div class="bg-white rounded-xl p-6 mb-5" style="box-shadow: 0 4px 20px rgba(0,0,0,0.06);">
<div class="space-y-3">
<div class="flex items-start gap-3 p-3 rounded-lg" style="background: #f0fdf4; border: 1px solid #bbf7d0;">
<span class="text-lg">1️⃣</span>
<div>
<p class="text-sm font-bold text-green-800">전표 마감</p>
<p class="text-xs text-gray-600">해당 월의 모든 전표가 입력되었는지 확인. 미처리 증빙, 누락된 세금계산서 체크.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg" style="background: #eff6ff; border: 1px solid #bfdbfe;">
<span class="text-lg">2️⃣</span>
<div>
<p class="text-sm font-bold text-blue-800">잔액 대사</p>
<p class="text-xs text-gray-600">실제 통장 잔고와 SAM 장부 잔액을 대사합니다. 차이가 있으면 원인을 추적합니다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg" style="background: #fefce8; border: 1px solid #fef08a;">
<span class="text-lg">3️⃣</span>
<div>
<p class="text-sm font-bold text-yellow-800">미수금/미지급금 확인</p>
<p class="text-xs text-gray-600">해당 발생한 미수금과 미지급금의 잔액을 확인하고, 장기 미수금에 대한 조치를 결정합니다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg" style="background: #fdf2f8; border: 1px solid #fbcfe8;">
<span class="text-lg">4️⃣</span>
<div>
<p class="text-sm font-bold text-pink-800">감가상각/선급비용 처리</p>
<p class="text-xs text-gray-600">고정자산 감가상각비, 보험료 선급비용의 당월분을 비용으로 처리합니다.</p>
</div>
</div>
<div class="flex items-start gap-3 p-3 rounded-lg" style="background: #f5f3ff; border: 1px solid #ddd6fe;">
<span class="text-lg">5️⃣</span>
<div>
<p class="text-sm font-bold text-purple-800">월간 재무제표 확인</p>
<p class="text-xs text-gray-600">손익계산서, 재무상태표를 출력하여 전월 대비 이상 항목이 없는지 검토합니다.</p>
</div>
</div>
</div>
</div>
<div class="notice-warn notice-box">
<strong>연간 결산 참고:</strong> 12 결산법인은 <strong>3 </strong>까지 법인세 신고를 완료해야 합니다. 연간 결산은 결산의 누적이므로, 매월 정확히 마감하면 연말 결산이 수월해집니다.
</div>
</div>
{{-- ===== 5: 메뉴 ===== --}}
<div class="acg-section" id="acgTab5">
<h2 class="text-xl font-bold mb-2 text-gray-800">SAM 재무/회계 메뉴 </h2>
<p class="text-sm text-gray-500 mb-6">SAM 시스템의 재무/회계 관련 전체 메뉴를 한눈에 보여줍니다. 메뉴의 역할을 빠르게 파악하세요.</p>
<div class="menu-map mb-5">
<div class="menu-group">
<div class="menu-group-title">
<span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #1d4ed8, #3b82f6); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">💰</span>
재무/자금관리
</div>
<div class="flex flex-wrap">
<span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">1</span> 재무 대시보드</span>
<span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">2</span> 일일자금일보</span>
<span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">3</span> 자금계획일정</span>
<span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">4</span> 보유계좌관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #2563eb;">5</span> 계좌입출금내역</span>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">
<span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #059669, #34d399); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">📒</span>
회계/세무관리
</div>
<div class="flex flex-wrap">
<span class="menu-item"><span class="menu-item-num" style="background: #059669;">1</span> 일반전표입력</span>
<span class="menu-item"><span class="menu-item-num" style="background: #059669;">2</span> 전자세금계산서</span>
<span class="menu-item"><span class="menu-item-num" style="background: #059669;">3</span> 홈택스매출/매입</span>
<span class="menu-item"><span class="menu-item-num" style="background: #059669;">4</span> 부가세관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #059669;">5</span> 경조사비관리</span>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">
<span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #d97706, #f59e0b); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">💳</span>
카드/차량관리
</div>
<div class="flex flex-wrap">
<span class="menu-item"><span class="menu-item-num" style="background: #d97706;">1</span> 법인카드관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #d97706;">2</span> 카드사용내역</span>
<span class="menu-item"><span class="menu-item-num" style="background: #d97706;">3</span> 차량목록</span>
<span class="menu-item"><span class="menu-item-num" style="background: #d97706;">4</span> 차량일지</span>
<span class="menu-item"><span class="menu-item-num" style="background: #d97706;">5</span> 정비이력</span>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">
<span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #7c3aed, #a78bfa); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">🧮</span>
정산관리
</div>
<div class="flex flex-wrap">
<span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">1</span> 통합 정산</span>
<span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">2</span> 영업수수료정산</span>
<span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">3</span> 컨설팅비용정산</span>
<span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">4</span> 고객사정산</span>
<span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">5</span> 구독료정산</span>
<span class="menu-item"><span class="menu-item-num" style="background: #7c3aed;">6</span> 수당지급현황통계</span>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">
<span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #0ea5e9, #38bdf8); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">🤝</span>
고객/거래처/채권관리
</div>
<div class="flex flex-wrap">
<span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">1</span> 거래처관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">2</span> 고객사관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">3</span> 미수금관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">4</span> 미지급금관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #0ea5e9;">5</span> 환불/해지관리</span>
</div>
</div>
<div class="menu-group">
<div class="menu-group-title">
<span style="width: 24px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #e11d48, #fb7185); display: inline-flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem;">👤</span>
인사관리 (회계 연관)
</div>
<div class="flex flex-wrap">
<span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">1</span> 사원관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">2</span> 급여관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">3</span> 사업소득자관리</span>
<span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">4</span> 사업소득자입력</span>
<span class="menu-item"><span class="menu-item-num" style="background: #e11d48;">5</span> 근태현황</span>
</div>
</div>
</div>
<div class="notice-tip notice-box">
<strong>사용 순서 권장:</strong> SAM을 처음 사용하신다면 순서로 시작하세요:
<strong>거래처관리</strong>(기초 등록) <strong>보유계좌관리</strong>(통장 등록) <strong>법인카드관리</strong>(카드 등록) <strong>재무 대시보드</strong>(현황 파악) <strong>일반전표입력</strong>(일상 업무 시작)
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script>
function switchAcgTab(index) {
document.querySelectorAll('.acg-tab').forEach((btn, i) => {
btn.classList.toggle('active', i === index);
});
document.querySelectorAll('.acg-section').forEach((section, i) => {
section.classList.toggle('active', i === index);
});
}
</script>
@endpush

View File

@@ -15,6 +15,8 @@
use App\Http\Controllers\CategoryController;
use App\Http\Controllers\CategorySyncController;
use App\Http\Controllers\ChinaTech\BigTechController;
use App\Http\Controllers\ChinaTech\ChinaAiController;
use App\Http\Controllers\Help\AccountingGuideController;
use App\Http\Controllers\ClaudeCode\CoworkController as ClaudeCodeCoworkController;
use App\Http\Controllers\ClaudeCode\NewsController as ClaudeCodeNewsController;
use App\Http\Controllers\ClaudeCode\PricingController as ClaudeCodePricingController;
@@ -851,6 +853,15 @@
Route::get('/big-tech', [BigTechController::class, 'index'])->name('big-tech.index');
});
/*
|--------------------------------------------------------------------------
| 도움말 Routes
|--------------------------------------------------------------------------
*/
Route::prefix('help')->name('help.')->group(function () {
Route::get('/accounting', [AccountingGuideController::class, 'index'])->name('accounting.index');
});
/*
|--------------------------------------------------------------------------
| 추가기능 Routes