first commit

.claude/launch.json

@@ -0,0 +1,12 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "frontend",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 3000,
+      "autoPort": false
+    }
+  ]
+}

.claude/plan/studio-settlement.md

@@ -0,0 +1,342 @@
+# Implementation Plan: Studio Settlement (정산) Pages
+
+## Task Type
+- [x] Frontend
+- [ ] Backend
+- [ ] Fullstack
+
+---
+
+## Research Summary: "세금계산서" 는 잘못된 명칭
+
+### 핵심 발견
+**세금계산서(Tax Invoice)는 부가세(VAT) 문서로, 3.3% 원천징수 모델에서는 해당 없음.**
+
+현재 dpot의 크리에이터 정산 방식:
+- 크리에이터 = 비사업자 프리랜서 → **사업소득 3.3% 원천징수** (소득세 3% + 지방소득세 0.3%)
+- **플랫폼**이 원천징수의무자로서 3.3%를 원천징수 후 국세청에 납부
+- **플랫폼**이 매년 3월 10일까지 **사업소득 지급명세서**를 국세청에 제출
+- **크리에이터**는 5월에 **종합소득세** 신고 시 기납부세액으로 처리
+
+### 세금계산서가 필요한 경우 (현재 해당 없음)
+- 과세사업자(921505) 크리에이터 → 크리에이터가 플랫폼에 세금계산서 발행 + 10% VAT 추가 지급
+- 면세사업자(940306) 크리에이터 → 크리에이터가 플랫폼에 계산서(VAT 없음) 발행
+- **→ 추후 사업자 크리에이터 지원 시 확장 가능하도록 설계**
+
+### 한국 플랫폼 사례
+| 플랫폼 | 세금 관련 문서 제공 방식 |
+|--------|------------------------|
+| CHZZK | 정산내역에서 월별 내역 확인, 원천징수영수증은 홈택스에서 조회 |
+| SOOP | 원천징수영수증 직접 미제공, 지급명세서 국세청 제출 후 홈택스에서 조회 |
+| 투네이션 | 월별 정산 내역만 제공, 원천징수영수증은 홈택스에서 5월 이후 조회 안내 |
+
+### 결론: 메뉴명 변경 권장
+- ~~세금계산서~~ → **"원천징수 내역"** 또는 **"세금 서류"**
+- 실제 내용: 월별 원천징수 내역 + 연간 요약 + 종합소득세 신고 안내
+
+---
+
+## Design Decision
+
+### 메뉴 구조 (사이드바 수정)
+| 현재 | 변경 후 | 경로 |
+|------|---------|------|
+| 계좌 관리 | 계좌 관리 (유지) | `/studio/settlement/account` |
+| 세금계산서 | **원천징수 내역** | `/studio/settlement/tax` |
+
+### 2-Page Structure
+
+**1. 계좌 관리** (`/studio/settlement/account`)
+- 출금 계좌 등록/수정 폼
+- 은행 선택, 계좌번호, 예금주 입력
+- 등록 상태 표시 (미등록/인증완료)
+- 1원 인증은 Backend 의존 → 우선 기본 폼만 구현
+
+**2. 원천징수 내역** (`/studio/settlement/tax`)
+- 연간 요약 카드 (총 지급액, 소득세, 지방소득세)
+- 월별 원천징수 내역 테이블
+- 종합소득세 신고 안내 가이드
+
+---
+
+## Implementation Steps
+
+### Step 1: Type Definitions
+
+**File: `types/response/settlement/account.ts`** (NEW)
+```typescript
+export interface SettlementAccountResponse {
+  hasAccount: boolean;
+  bankCode: string|null;       // '004' (KB), '088' (신한) 등
+  bankName: string|null;
+  accountNumber: string|null;  // 마스킹: '****5678'
+  accountHolder: string|null;
+  isVerified: boolean;
+  registeredAt: string|null;
+  updatedAt: string|null;
+}
+
+export interface SaveAccountRequest {
+  bankCode: string;
+  accountNumber: string;
+  accountHolder: string;
+}
+```
+
+**File: `types/response/settlement/tax.ts`** (NEW)
+```typescript
+export interface WithholdingTaxSummaryResponse {
+  year: number;
+  annualSummary: {
+    totalGrossAmount: number;     // 연간 총 지급액
+    totalIncomeTax: number;       // 연간 소득세 (3%)
+    totalLocalTax: number;        // 연간 지방소득세 (0.3%)
+    totalNetAmount: number;       // 연간 실수령액
+  };
+  monthlyList: WithholdingTaxMonthItem[];
+}
+
+export interface WithholdingTaxMonthItem {
+  month: number;                  // 1~12
+  grossAmount: number;            // 해당월 총 지급액
+  incomeTax: number;              // 소득세 (3%)
+  localTax: number;               // 지방소득세 (0.3%)
+  netAmount: number;              // 실수령액
+  paymentCount: number;           // 정산 건수
+}
+```
+
+---
+
+### Step 2: Constants
+
+**File: `app/studio/settlement/constants.ts`** (NEW)
+```typescript
+export const BANK_LIST = [
+  { code: '004', name: 'KB국민은행' },
+  { code: '088', name: '신한은행' },
+  { code: '020', name: '우리은행' },
+  { code: '081', name: '하나은행' },
+  { code: '011', name: 'NH농협은행' },
+  { code: '023', name: 'SC제일은행' },
+  { code: '027', name: '한국씨티은행' },
+  { code: '071', name: '우체국' },
+  { code: '031', name: 'DGB대구은행' },
+  { code: '032', name: '부산은행' },
+  { code: '039', name: '경남은행' },
+  { code: '034', name: '광주은행' },
+  { code: '035', name: '제주은행' },
+  { code: '037', name: '전북은행' },
+  { code: '007', name: '수협은행' },
+  { code: '045', name: '새마을금고' },
+  { code: '048', name: '신협' },
+  { code: '090', name: '카카오뱅크' },
+  { code: '092', name: '토스뱅크' },
+  { code: '089', name: '케이뱅크' },
+];
+```
+
+---
+
+### Step 3: Layout & Style
+
+**File: `app/studio/settlement/layout.tsx`** (NEW)
+- children 패스스루 + style.scss import
+
+**File: `app/studio/settlement/style.scss`** (NEW)
+- BEM Block: `.settlement`
+- 기존 wallet 스타일 패턴 재사용
+
+---
+
+### Step 4: 계좌 관리 페이지
+
+**File: `app/studio/settlement/account/page.tsx`** (NEW)
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────┐
+│  계좌 관리                                       │
+├─────────────────────────────────────────────────┤
+│                                                  │
+│  ┌─ 등록된 계좌 ────────────────────────┐       │
+│  │ KB국민은행 ****5678 (홍길동)          │       │
+│  │ ✓ 인증 완료 · 등록일 2026.03.15      │       │
+│  │ [수정하기]                           │       │
+│  └──────────────────────────────────────┘       │
+│                                                  │
+│  ── OR (미등록 시) ──                            │
+│                                                  │
+│  ┌─ 계좌 등록 ──────────────────────────┐       │
+│  │ 은행    [KB국민은행 ▾]               │       │
+│  │ 계좌번호 [__________________]         │       │
+│  │ 예금주   [__________________]         │       │
+│  │                                      │       │
+│  │ ※ 본인 명의 계좌만 등록 가능           │       │
+│  │ ※ 출금 시 등록된 계좌로 입금됩니다      │       │
+│  │                                      │       │
+│  │ [등록하기]                            │       │
+│  └──────────────────────────────────────┘       │
+│                                                  │
+└─────────────────────────────────────────────────┘
+```
+
+**구현:**
+- 상태: `mode` ('view' | 'edit') — 등록됨이면 view, 미등록이면 edit
+- 등록된 계좌 표시: 은행명, 마스킹 계좌번호, 예금주, 인증상태, 등록일
+- 수정 모드: 은행 select, 계좌번호 input, 예금주 input
+- Validation: 계좌번호 숫자만, 7~16자리
+- API: `GET /api/studio/settlement/account`
+- API: `POST /api/studio/settlement/account`
+
+---
+
+### Step 5: 원천징수 내역 페이지
+
+**File: `app/studio/settlement/tax/page.tsx`** (NEW)
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────┐
+│  원천징수 내역                                    │
+├─────────────────────────────────────────────────┤
+│  연도 선택: [2026 ▾]                              │
+├───────────┬───────────┬───────────┬──────────────┤
+│ 총 지급액 │ 소득세(3%)│지방세(0.3%)│ 실수령액     │
+│ 1,520,000 │ -45,600  │ -4,560    │ 1,469,840    │
+├───────────┴───────────┴───────────┴──────────────┤
+│                                                  │
+│  월별 상세                                        │
+├──────────────────────────────────────────────────┤
+│ 월 | 지급액 | 소득세 | 지방소득세 | 실수령 | 건수  │
+│ 4  | 129,000 | -3,870 | -387    | 124,743 | 8   │
+│ 3  | 250,000 | -7,500 | -750    | 241,750 | 15  │
+│ ...                                              │
+├──────────────────────────────────────────────────┤
+│                                                  │
+│  ℹ 종합소득세 신고 안내                             │
+│  ┌──────────────────────────────────────────┐   │
+│  │ · 본 소득은 사업소득으로 분류됩니다.        │   │
+│  │ · 연말정산 대상이 아닙니다.                 │   │
+│  │ · 매년 5월 종합소득세를 직접 신고해야 합니다. │   │
+│  │ · 국세청 홈택스에서 지급명세서를 확인할 수    │   │
+│  │   있습니다. (My홈택스 > 지급명세서 제출내역)  │   │
+│  │ · 플랫폼은 매년 3/10까지 지급명세서를 국세청  │   │
+│  │   에 제출합니다.                           │   │
+│  └──────────────────────────────────────────┘   │
+│                                                  │
+└──────────────────────────────────────────────────┘
+```
+
+**구현:**
+- 연도 선택 드롭다운 (현재 연도 기본)
+- 연간 요약 카드 4개: 총 지급액, 소득세, 지방소득세, 실수령액
+- 월별 테이블 (12개월, 역순 — 최신 월 상단)
+- 종합소득세 신고 안내 정보 박스
+- API: `GET /api/studio/settlement/tax?year={year}`
+
+---
+
+### Step 6: 사이드바 메뉴명 수정
+
+**File: `app/studio/Sidebar.tsx`** (MODIFY)
+- `세금계산서` → `원천징수 내역` 으로 텍스트만 변경
+
+---
+
+## Key Files
+
+| File | Operation | Description |
+|------|-----------|-------------|
+| `types/response/settlement/account.ts` | **Create** | 계좌 관리 타입 |
+| `types/response/settlement/tax.ts` | **Create** | 원천징수 내역 타입 |
+| `app/studio/settlement/constants.ts` | **Create** | 은행 목록 등 상수 |
+| `app/studio/settlement/layout.tsx` | **Create** | style import 레이아웃 |
+| `app/studio/settlement/style.scss` | **Create** | 전체 settlement 스타일 |
+| `app/studio/settlement/account/page.tsx` | **Create** | 계좌 관리 페이지 |
+| `app/studio/settlement/tax/page.tsx` | **Create** | 원천징수 내역 페이지 |
+| `app/studio/settlement/mock.ts` | **Create** | Mock 데이터 |
+| `app/studio/settlement/page.tsx` | **Delete** | 기존 플레이스홀더 삭제 |
+| `app/studio/Sidebar.tsx:L343` | **Modify** | '세금계산서' → '원천징수 내역' |
+
+---
+
+## Risks and Mitigation
+
+| Risk | Mitigation |
+|------|------------|
+| Backend API 미존재 | Mock 데이터로 UI 구현, API 후속 연동 |
+| 1원 인증 미구현 | 기본 계좌 등록 폼만 우선 구현, 1원 인증은 Backend 연동 시 추가 |
+| 사업자 크리에이터 지원 | 현재는 개인(3.3%) 전용, 타입에 사업자 유형 필드 예약 |
+| 원천징수 금액 정확성 | Frontend는 표시만, 계산은 Backend 담당 |
+
+---
+
+## Implementation Order
+
+1. Types + Constants (의존성 없음)
+2. Layout + Style (공통 기반)
+3. Mock 데이터
+4. Account 페이지 (출금 페이지에서 이미 링크됨 — 우선순위 높음)
+5. Tax 페이지 (정보 표시 위주)
+6. Sidebar 텍스트 수정
+7. 기존 placeholder 삭제
+
+---
+
+## 사업자 유형별 세금 처리 (Research)
+
+### 크리에이터 유형 분류
+
+| 유형 | 원천징수 3.3% | VAT 10% | 세금계산서 | 정산 금액 |
+|------|:---:|:---:|:---:|------|
+| 개인 비사업자 | O | X | 발행 불가 | 공급가액 - 3.3% |
+| 면세 개인사업자 (940306) | O | X | 계산서(면세) | 공급가액 - 3.3% |
+| 과세 개인사업자 (921505) | X | O | 세금계산서 필수 | 공급가액 + VAT 10% |
+| 법인사업자 | X | O | 세금계산서 필수 | 공급가액 + VAT 10% |
+
+### 유형별 상세
+
+**1. 개인 비사업자 (현재 기본)**
+- 주민등록번호 + 계좌만 필요
+- 플랫폼이 3.3% 원천징수 → 국세청 납부 + 지급명세서 제출
+- 크리에이터: 5월 종합소득세 신고
+
+**2. 면세 개인사업자 (940306: 1인 미디어 콘텐츠 창작자)**
+- 사업자등록번호 필요
+- 원천징수 3.3% 동일 적용 (면세 인적용역이므로)
+- 비사업자와 정산 흐름 동일하나, 경비처리/세액감면 가능
+- 2월: 사업장현황신고 / 5월: 종합소득세 신고
+
+**3. 과세 개인사업자 (921505: 미디어콘텐츠창작업)**
+- 사업자등록번호 필요
+- 원천징수 없음 → 크리에이터가 세금계산서 발행
+- 플랫폼은 공급가액 + VAT 10% 지급
+- 크리에이터: 부가세 신고(반기) + 종합소득세(5월)
+- CHZZK 사례: 역발행(플랫폼이 초안 생성, 크리에이터 승인) 방식
+
+**4. 법인사업자**
+- 법인 사업자등록번호 필요
+- 과세 개인사업자와 동일 흐름 (세금계산서 + VAT)
+- 법인세(10~25%) 적용, 종합소득세 대상 아님
+- 전자세금계산서 의무 발행 (매출 무관)
+
+### 현재 구현 범위
+- **V1 (현재)**: 개인 비사업자 전용 — 3.3% 원천징수 내역만 표시
+- **V2 (추후)**: 크리에이터 유형 선택 UI + 사업자등록번호 입력 + 유형별 정산 분기
+
+### V2 확장 시 필요한 UI 변경
+1. 설정에 크리에이터 유형 선택: 개인/면세사업자/과세사업자/법인
+2. 사업자등록번호 입력 + 국세청 API 상태조회
+3. 과세/법인: 세금계산서 역발행 워크플로우 (월 마감 → 초안 생성 → 승인)
+4. 원천징수 내역 페이지: 유형에 따라 표시 내용 분기
+   - 개인/면세: 현재와 동일 (3.3% 원천징수)
+   - 과세/법인: 세금계산서 발행내역 + VAT 내역
+
+---
+
+## Notes
+- **세금계산서 → 원천징수 내역**: 기술적으로 정확한 명칭으로 변경 완료
+- 공식 원천징수영수증은 국세청 홈택스에서 조회 — 플랫폼은 참고용 내역만 제공
+- 계좌 등록은 출금 기능의 전제 조건 → 출금 페이지에서 이미 `/studio/settlement/account` 링크
+- SESSION_ID: N/A (external model wrapper 미사용)

.claude/plan/studio-wallet.md

@@ -0,0 +1,422 @@
+# Implementation Plan: Studio Wallet (지갑) Pages
+
+## Task Type
+- [x] Frontend
+- [ ] Backend (API endpoints assumed to exist or will be created separately)
+- [ ] Fullstack
+
+---
+
+## Research Summary
+
+### Korean Creator Platform Patterns (CHZZK, SOOP, Toonation, YouTube)
+- All major platforms use **separate sub-pages** under a "Studio" hub: 수익 요약 / 후원 내역 / 정산 내역 / 정산 정보
+- CHZZK: 수익창출 → 정산내역, 정산정보, 후원내역, 구독내역, 광고수익
+- SOOP: 별풍선 환전, 광고수익 환전, 구독수익 (각각 별도 플로우)
+- Toonation: 대시보드(잔액) + 정산등록 + 정산신청(별도)
+
+### Tax & Fee Structure (Korean regulations)
+- **원천징수 3.3%** (소득세 3% + 지방소득세 0.3%) — 사업소득 기준
+- **부가세**: 물적시설 없는 1인 크리에이터 = 면세사업자 (VAT 없음)
+- **플랫폼 수수료**: 설정값으로 관리 (backend config, 추후 결정)
+
+### Design Decision: 3-Page Structure
+현재 사이드바에 이미 정의된 3개 메뉴를 그대로 유지:
+
+| 메뉴 | 경로 | 역할 |
+|------|------|------|
+| **잔액** | `/studio/wallet/balance` | 현재 잔액 요약 + 최근 내역 |
+| **수익** | `/studio/wallet/revenue` | 후원 수입 상세 내역 (기간별) |
+| **출금** | `/studio/wallet/withdraw` | 출금 신청 + 출금 내역 |
+
+---
+
+## Technical Solution
+
+### Architecture
+- 각 페이지는 `'use client'` 클라이언트 컴포넌트
+- `fetchApi<T>()` → `/api/studio/wallet/[...path]` Route Handler → Backend
+- 기존 `charge-logs` 패턴 기반 (상태 관리, 기간 필터, 페이지네이션)
+- BEM 클래스 네이밍, studio-page 공통 스타일 활용
+- 반응형: PC 그리드 테이블 + 모바일 DL 레이아웃
+
+### Balance Data Model (DropdownData 확장)
+기존 `DropdownData`의 `spendableBalance`(P), `withdrawableBalance`(M) 활용.
+각 페이지별 전용 API 응답 타입 신규 생성.
+
+---
+
+## Implementation Steps
+
+### Step 1: Type Definitions
+
+**File: `types/response/wallet/balance.ts`** (NEW)
+```typescript
+export interface WalletBalanceResponse {
+  spendableBalance: number;       // 포인트 (P) 잔액
+  withdrawableBalance: number;    // 머니 (M) 잔액
+  totalEarned: number;            // 누적 수익
+  totalWithdrawn: number;         // 누적 출금
+  pendingWithdrawal: number;      // 출금 대기 중 금액
+  recentTransactions: {
+    id: number;
+    type: 'donation_received'|'withdrawal'|'fee'|'adjustment';
+    amount: number;
+    balance: number;
+    description: string;
+    createdAt: string;
+  }[];
+}
+```
+
+**File: `types/response/wallet/revenue.ts`** (NEW)
+```typescript
+export interface WalletRevenueResponse {
+  total: number;
+  summary: {
+    grossAmount: number;         // 총 후원 금액
+    platformFee: number;         // 플랫폼 수수료
+    netAmount: number;           // 순수익 (수수료 차감)
+  };
+  list: {
+    id: number;
+    donorName: string;
+    donorSID: string|null;
+    grossAmount: number;
+    platformFee: number;
+    netAmount: number;
+    type: 'donation'|'crew_donation';
+    crewName: string|null;
+    createdAt: string;
+  }[];
+}
+```
+
+**File: `types/response/wallet/withdraw.ts`** (NEW)
+```typescript
+export interface WalletWithdrawHistoryResponse {
+  total: number;
+  withdrawableBalance: number;
+  hasBankAccount: boolean;
+  list: {
+    id: number;
+    requestedAmount: number;     // 신청 금액
+    withholdingTax: number;      // 원천징수 (3.3%)
+    netAmount: number;           // 실수령액
+    status: 'Pending'|'Processing'|'Completed'|'Rejected';
+    bankName: string;
+    accountNumber: string;       // 마스킹 처리 (뒤 4자리만)
+    requestedAt: string;
+    completedAt: string|null;
+    rejectedReason: string|null;
+  }[];
+}
+
+export interface WithdrawRequest {
+  amount: number;
+}
+```
+
+---
+
+### Step 2: Shared Layout & Constants
+
+**File: `app/studio/wallet/layout.tsx`** (NEW)
+```typescript
+// 단순 children 패스스루 + style import
+import './style.scss';
+export default function WalletLayout({ children }) {
+  return children;
+}
+```
+
+**File: `app/studio/wallet/constants.ts`** (NEW)
+```typescript
+export const PERIOD_TABS = [
+  { label: '오늘', value: 0 },
+  { label: '1주일', value: 1 },
+  { label: '1개월', value: 2 },
+  { label: '3개월', value: 3 },
+  { label: '6개월', value: 4 },
+];
+
+export const WITHDRAW_STATUS_MAP: Record<string, { label: string; cls: string }> = {
+  Pending:    { label: '대기',   cls: 'status--pending' },
+  Processing: { label: '처리중', cls: 'status--processing' },
+  Completed:  { label: '완료',   cls: 'status--completed' },
+  Rejected:   { label: '거절',   cls: 'status--rejected' },
+};
+
+export const REVENUE_TYPE_MAP: Record<string, string> = {
+  donation: '후원',
+  crew_donation: '크루 후원',
+};
+
+export const WITHHOLDING_TAX_RATE = 0.033; // 3.3%
+export const MIN_WITHDRAW_AMOUNT = 40000;  // 최소 출금 금액
+```
+
+---
+
+### Step 3: Balance Page (잔액)
+
+**File: `app/studio/wallet/balance/page.tsx`** (NEW)
+
+**Layout:**
+```
+┌─────────────────────────────────────────────┐
+│  잔액 현황                                   │
+├───────────┬───────────┬────────────────────────┤
+│  머니(M)  │ 누적수익  │ 누적출금               │
+│  80,000   │ 350,000   │ 270,000                │
+├───────────┴───────────┴────────────────────────┤
+│                           [출금하기]            │
+├─────────────────────────────────────────────────┤
+│  최근 거래 내역                                  │
+│  일시 | 유형 | 내용 | 금액 | 잔액                │
+│  ...                                            │
+│  ...                                            │
+└─────────────────────────────────────────────────┘
+```
+
+**구현 내용:**
+- 3개 Summary Card: M잔액(출금 가능), 누적수익, 누적출금
+- 빠른 액션: 출금하기 (`/studio/wallet/withdraw` 이동)
+- 최근 거래 10건 (페이지네이션 없음, 간략 리스트)
+- API: `GET /api/studio/wallet/balance`
+
+---
+
+### Step 4: Revenue Page (수익)
+
+**의존성 추가:** `npm install recharts` (React 친화적 차트 라이브러리, ~45KB gzip)
+
+**File: `app/studio/wallet/revenue/page.tsx`** (NEW)
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────┐
+│  수익 내역                                       │
+├────────────────┬────────────────┬─────────────────┤
+│ 총 후원 금액   │ 플랫폼 수수료  │ 순수익          │
+│ 500,000원      │ -50,000원      │ 450,000원       │
+├───────────────────────────────────────────────────┤
+│  [오늘] [1주일] [1개월] [3개월] [6개월]            │
+├───────────────────────────────────────────────────┤
+│  수익 추이 (AreaChart)                            │
+│  ┌─────────────────────────────────────────────┐ │
+│  │    ╱\                                       │ │
+│  │   ╱  \      ╱\   ╱\                        │ │
+│  │  ╱    \    ╱  ╱    \                       │ │
+│  │ ╱      \  ╱  ╱      ───                    │ │
+│  │╱        ╲╱  ╱                               │ │
+│  └──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┘ │
+│     4/1 4/2 4/3 4/4 ...                         │
+│  ■ 순수익  ■ 수수료                              │
+├───────────────────────────────────────────────────┤
+│  합계: 128                                        │
+├───────────────────────────────────────────────────┤
+│  일시 | 후원자 | 유형 | 후원금액 | 수수료 | 순수익  │
+│  04.14 | 유저A | 후원 | 10,000  | -1,000 | 9,000  │
+│  ...                                              │
+├───────────────────────────────────────────────────┤
+│  < 1 2 3 4 5 >                                    │
+└───────────────────────────────────────────────────┘
+```
+
+**차트 구현:**
+- `recharts`의 `AreaChart` + `ResponsiveContainer` 사용
+- X축: 날짜 (기간별 자동 그룹핑 — 일간/주간/월간)
+- Y축: 금액 (toLocaleString 포맷)
+- Area 2개: 순수익 (primary color, fill opacity 0.3), 수수료 (muted color, fill opacity 0.15)
+- Tooltip: 날짜 + 순수익 + 수수료 금액 표시
+- 높이 고정 280px, 반응형 너비
+- API: `GET /api/studio/wallet/revenue/chart?type={period}` (차트용 집계 데이터)
+
+**차트 응답 타입 추가 (`types/response/wallet/revenue.ts`):**
+```typescript
+export interface RevenueChartItem {
+  date: string;           // '2026-04-01'
+  grossAmount: number;
+  platformFee: number;
+  netAmount: number;
+}
+```
+
+**구현 내용:**
+- Summary 3칸: 총 후원 금액, 플랫폼 수수료, 순수익 (선택 기간 기준)
+- 기간 필터 탭 (charge-logs와 동일 패턴)
+- 수익 추이 차트 (AreaChart — 기간 필터 연동)
+- 테이블: 일시, 후원자, 유형(후원/크루후원), 후원금액, 수수료, 순수익
+- 페이지네이션 (20건/페이지)
+- 반응형: PC grid + Mobile dl (차트는 모바일에서 높이 200px로 축소)
+- API: `GET /api/studio/wallet/revenue?type={period}&page={n}&perPage=20`
+
+---
+
+### Step 5: Withdrawal Page (출금)
+
+**File: `app/studio/wallet/withdraw/page.tsx`** (NEW)
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────┐
+│  출금                                            │
+├─────────────────────────────────────────────────┤
+│  출금 가능 잔액: 80,000원 (M)                    │
+│                                                  │
+│  출금 금액  [_______________] 원                  │
+│                                                  │
+│  ┌─ 예상 차감 ──────────────────┐               │
+│  │ 신청 금액      80,000원     │               │
+│  │ 원천징수(3.3%) -2,640원     │               │
+│  │ 실수령액       77,360원     │               │
+│  └─────────────────────────────┘               │
+│                                                  │
+│  입금 계좌: 국민은행 ****5678 (홍길동)           │
+│  [계좌 변경 →]                                   │
+│                                                  │
+│  ※ 최소 출금 금액: 40,000원                      │
+│  ※ 원천징수 3.3% (소득세 3% + 지방소득세 0.3%)   │
+│  ※ 매월 10일까지 신청 → 당월 말 입금              │
+│                                                  │
+│  [출금 신청]                                     │
+├─────────────────────────────────────────────────┤
+│  출금 내역                                       │
+│  합계: 15     [오늘] [1주일] [1개월] [3개월] [6개월] │
+├─────────────────────────────────────────────────┤
+│  신청일 | 금액 | 원천징수 | 실수령 | 계좌 | 상태  │
+│  ...                                             │
+├─────────────────────────────────────────────────┤
+│  < 1 2 3 4 5 >                                   │
+└─────────────────────────────────────────────────┘
+```
+
+**구현 내용:**
+- 상단: 출금 가능 잔액 강조 표시
+- 출금 신청 폼: 금액 입력 → 실시간 원천징수/실수령액 계산 프리뷰
+- 계좌 정보 표시 (마스킹) + 정산 페이지 링크
+- 안내 문구 (최소 금액, 세금, 일정)
+- 계좌 미등록 시: 경고 + 계좌 등록 유도
+- 하단: 출금 내역 테이블 (기간 필터 + 페이지네이션)
+- API: `GET /api/studio/wallet/withdraw?type={period}&page={n}&perPage=20`
+- API: `POST /api/studio/wallet/withdraw` (출금 신청)
+
+---
+
+### Step 6: SCSS Styling
+
+**File: `app/studio/wallet/style.scss`** (NEW)
+
+**BEM Block: `.wallet`**
+
+```scss
+// ── Summary Cards ──
+.wallet__cards            // display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px;
+.wallet__card             // border, radius 8px, padding 20px
+.wallet__card-label       // 0.8125rem, muted color
+.wallet__card-value       // 1.5rem, font-weight 700
+.wallet__card-value--point   // P color
+.wallet__card-value--money   // M color (brand)
+.wallet__card-value--danger  // negative amounts
+
+// ── Actions ──
+.wallet__actions          // flex, gap 8px, justify center
+.wallet__action-btn       // studio-page__btn 스타일 재사용
+
+// ── Filter ──
+.wallet__header           // flex, space-between (charge-logs__header 패턴)
+.wallet__summary          // 합계 텍스트
+.wallet__tabs             // flex, button 탭 (charge-logs__tabs 패턴)
+
+// ── Table ──
+.wallet__table-wrap       // studio-page__table-wrap 재사용
+.wallet__table            // studio-page__table 재사용 + 커스텀 컬럼
+.wallet__amount--plus     // color success
+.wallet__amount--minus    // color danger
+
+// ── Withdraw Form ──
+.wallet__withdraw-form    // border, radius 8px, padding 24px, max-width 560px
+.wallet__withdraw-balance // 잔액 강조 (1.25rem, font-weight 600)
+.wallet__withdraw-field   // label + input 그룹
+.wallet__withdraw-input   // crew-widget-form__input 패턴
+.wallet__withdraw-preview // 차감 프리뷰 박스 (muted bg, border)
+.wallet__withdraw-row     // flex, justify space-between
+.wallet__withdraw-total   // font-weight 700, border-top
+.wallet__withdraw-info    // 안내문 (0.8125rem, muted)
+.wallet__withdraw-account // 계좌 정보 표시
+.wallet__withdraw-submit  // studio-page__btn--primary
+
+// ── Status Badges ──
+.wallet__status--pending     // color warning
+.wallet__status--processing  // color primary
+.wallet__status--completed   // color success
+.wallet__status--rejected    // color danger
+
+// ── Responsive ──
+@media (max-width: 768px)
+  .wallet__cards: grid 2 columns
+  Table: hide ol, show dl
+```
+
+---
+
+### Step 7: API Route Handler
+
+**File: `app/api/studio/wallet/[...path]/route.ts`** (NEW — 또는 기존 `/api/studio/[...path]` 활용)
+
+기존 `app/api/studio/[...path]/route.ts` 프록시가 있으면 별도 생성 불필요.
+없으면 동일한 프록시 패턴으로 생성:
+
+```typescript
+// GET/POST → fetchJson('/api/studio/wallet/{path}')
+```
+
+---
+
+## Key Files
+
+| File | Operation | Description |
+|------|-----------|-------------|
+| `types/response/wallet/balance.ts` | **Create** | 잔액 API 응답 타입 |
+| `types/response/wallet/revenue.ts` | **Create** | 수익 API 응답 타입 |
+| `types/response/wallet/withdraw.ts` | **Create** | 출금 요청/응답 타입 |
+| `app/studio/wallet/layout.tsx` | **Create** | style.scss import용 레이아웃 |
+| `app/studio/wallet/constants.ts` | **Create** | 공통 상수 (탭, 상태맵, 세율) |
+| `app/studio/wallet/style.scss` | **Create** | 전체 wallet 스타일 |
+| `app/studio/wallet/balance/page.tsx` | **Create** | 잔액 현황 페이지 |
+| `app/studio/wallet/revenue/page.tsx` | **Create** | 수익 내역 페이지 |
+| `app/studio/wallet/withdraw/page.tsx` | **Create** | 출금 신청 + 내역 페이지 |
+| `app/api/studio/wallet/[...path]/route.ts` | **Create** (필요 시) | API 프록시 |
+| `app/studio/Sidebar.tsx` | None | 이미 3개 메뉴 정의됨 |
+
+---
+
+## Risks and Mitigation
+
+| Risk | Mitigation |
+|------|------------|
+| Backend API 미존재 | Mock 데이터로 UI 먼저 구현, API 연동은 후속 작업 |
+| 플랫폼 수수료율 미확정 | `constants.ts`에 변수화, backend config에서 받아오도록 설계 |
+| 원천징수 계산 정확성 | Frontend는 프리뷰만 표시, 실제 계산은 Backend에서 수행 |
+| 계좌 등록 미구현 | 출금 페이지에서 정산 → 계좌관리 페이지로 유도 |
+| 충전 팝업 연동 | 기존 `/charge` 페이지 팝업 패턴 그대로 활용 |
+
+---
+
+## Implementation Order
+
+1. **Types** → constants 먼저 (의존성 없음)
+2. **layout.tsx** + **style.scss** (공통 기반)
+3. **balance/page.tsx** (가장 단순, 전체 구조 검증)
+4. **revenue/page.tsx** (charge-logs 패턴 복사 + 커스터마이즈)
+5. **withdraw/page.tsx** (폼 + 리스트 복합, 가장 복잡)
+6. **API route handler** (필요 시)
+
+---
+
+## Notes
+- Backend API 스펙은 별도 협의 필요 (이 계획은 Frontend만 다룸)
+- 정산 메뉴 (계좌관리, 세금계산서)는 별도 계획으로 분리
+- 출금 신청 시 confirm dialog 필수 (금액 + 실수령액 재확인)
+- SESSION_ID: N/A (external model wrapper 미사용)

.edge-debug-profile/AutoLaunchProtocolsComponent/1.0.0.10/manifest.json

@@ -0,0 +1,5 @@
+{
+    "description" : "AutoLaunch Protocols Preregistration",
+    "name" : "Protocol Preregistration",
+    "version" : "1.0.0.10"
+}

.edge-debug-profile/AutoLaunchProtocolsComponent/1.0.0.10/protocols.json

@@ -0,0 +1,119 @@
+{
+  "allow": [
+    {
+      "origins": [
+        "https://.get.microsoft.com",
+        "https://.apps.microsoft.com"
+      ],
+      "protocol": "ms-windows-store"
+    },
+    {
+      "origins": [
+        "https://.onedrive.com",
+        "https://.onedrive.live.com",
+        "https://sharepoint.com"
+      ],
+      "protocol": "ms-word"
+    },
+    {
+      "origins": [
+        "https://[a-z1-9-]*word-edit.officeapps.live.com",
+        "https://[a-z1-9-]*word-view.officeapps.live.com",
+        "https://[a-z1-9-]*onenote.officeapps.live.com",
+        "https://[a-z1-9-]*eap.officeapps.live.com",
+        "https://[a-z1-9-]*shared.officeapps.live.com",
+        "https://[a-z1-9-]*afhs.officeapps.live.com",
+        "https://[a-z1-9-]*vhs.officeapps.live.com",
+        "https://[a-z1-9-]*optin.online.office.com"
+      ],
+      "use_regex": true,
+      "protocol": "ms-word"
+    },
+    {
+      "origins": [
+        "https://.onedrive.com",
+        "https://.onedrive.live.com",
+        "https://sharepoint.com"
+      ],
+      "protocol": "ms-excel"
+    },
+    {
+      "origins": [
+        "https://[a-z1-9-]*excel.officeapps.live.com",
+        "https://[a-z1-9-]*onenote.officeapps.live.com",
+        "https://[a-z1-9-]*eap.officeapps.live.com",
+        "https://[a-z1-9-]*shared.officeapps.live.com",
+        "https://[a-z1-9-]*afhs.officeapps.live.com",
+        "https://[a-z1-9-]*vhs.officeapps.live.com",
+        "https://[a-z1-9-]*optin.online.office.com"
+      ],
+      "use_regex": true,
+      "protocol": "ms-excel"
+    },
+    {
+      "origins": [
+        "https://.onedrive.com",
+        "https://.onedrive.live.com",
+        "https://sharepoint.com"
+      ],
+      "protocol": "ms-powerpoint"
+    },
+    {
+      "origins": [
+        "https://[a-z1-9-]*powerpoint.officeapps.live.com",
+        "https://[a-z1-9-]*onenote.officeapps.live.com",
+        "https://[a-z1-9-]*eap.officeapps.live.com",
+        "https://[a-z1-9-]*shared.officeapps.live.com",
+        "https://[a-z1-9-]*afhs.officeapps.live.com",
+        "https://[a-z1-9-]*vhs.officeapps.live.com",
+        "https://[a-z1-9-]*optin.online.office.com"
+      ],
+      "use_regex": true,
+      "protocol": "ms-powerpoint"
+    },
+    {
+      "origins": [
+        "https://.onedrive.com",
+        "https://.onedrive.live.com",
+        "https://sharepoint.com"
+      ],
+      "protocol": "ms-visio"
+    },
+    {
+      "origins": [
+        "https://[a-z1-9-]*visio.officeapps.live.com",
+        "https://[a-z1-9-]*onenote.officeapps.live.com",
+        "https://[a-z1-9-]*eap.officeapps.live.com",
+        "https://[a-z1-9-]*shared.officeapps.live.com",
+        "https://[a-z1-9-]*afhs.officeapps.live.com",
+        "https://[a-z1-9-]*vhs.officeapps.live.com",
+        "https://[a-z1-9-]*optin.online.office.com"
+      ],
+      "use_regex": true,
+      "protocol": "ms-visio"
+    },
+    {
+      "origins": [
+        "https://www.microsoft.com",
+        "https://copilot.microsoft.com"
+      ],
+      "protocol": "ms-copilot"
+    }
+  ],
+  "warn": [
+    {
+      "origins": [
+        "*"
+      ],
+      "protocol": "ms-test-warn"
+    }
+  ],
+  "block": [
+    {
+      "origins": [
+        "*"
+      ],
+      "protocol": "ms-test-block"
+    }
+  ]
+}

.edge-debug-profile/CertificateRevocation/6498.2025.9.4/manifest.json

@@ -0,0 +1,5 @@
+{
+    "description":  "Microsoft CRLSet",
+    "name":  "MicrosoftCRLSet",
+    "version":  "6498.2025.9.4"
+}

.edge-debug-profile/Crashpad/throttle_store.dat

@@ -0,0 +1 @@
+level=none expiry=0

.edge-debug-profile/Default/Asset Store/assets.db/CURRENT

@@ -0,0 +1 @@
+MANIFEST-000001

.edge-debug-profile/Default/Asset Store/assets.db/LOG

@@ -0,0 +1,3 @@
+2026/03/08-20:17:23.049 9cb0 Reusing MANIFEST E:\workspace\bitforum-new\Frontend\.edge-debug-profile\Default\Asset Store\assets.db/MANIFEST-000001
+2026/03/08-20:17:23.053 9cb0 Recovering log #4
+2026/03/08-20:17:23.055 9cb0 Reusing old log E:\workspace\bitforum-new\Frontend\.edge-debug-profile\Default\Asset Store\assets.db/000004.log 

.edge-debug-profile/Default/Asset Store/assets.db/LOG.old

@@ -0,0 +1,3 @@
+2026/03/08-20:15:41.529 cc18 Reusing MANIFEST E:\workspace\bitforum-new\Frontend\.edge-debug-profile\Default\Asset Store\assets.db/MANIFEST-000001
+2026/03/08-20:15:41.533 cc18 Recovering log #4
+2026/03/08-20:15:41.536 cc18 Reusing old log E:\workspace\bitforum-new\Frontend\.edge-debug-profile\Default\Asset Store\assets.db/000004.log 

.edge-debug-profile/Default/BookmarkMergedSurfaceOrdering

@@ -0,0 +1,2 @@
+{
+}

.edge-debug-profile/Default/BrowsingTopicsState

@@ -0,0 +1,12 @@
+{
+   "epochs": [ {
+      "calculation_time": "13417440866775839",
+      "config_version": 0,
+      "model_version": "0",
+      "padded_top_topics_start_index": 0,
+      "taxonomy_version": 0,
+      "top_topics_and_observing_domains": [  ]
+   } ],
+   "hex_encoded_hmac_key": "A7A41C1B00EDC5DE5C3E6A1C90FAD74EE9AB7B1BCD6C607B9DCBD32B1AA43D80",
+   "next_scheduled_calculation_time": "13418045666775961"
+}

.edge-debug-profile/Default/Cache/No_Vary_Search/journal.baj

@@ -0,0 +1 @@
+$F~

.edge-debug-profile/Default/DualEngine/SiteList-Consumer.json

@@ -0,0 +1 @@
+{}

.edge-debug-profile/Default/DualEngine/SiteList-Enterprise.json

@@ -0,0 +1 @@
+{}

.edge-debug-profile/Default/EdgeCoupons/coupons_data.db/CURRENT

@@ -0,0 +1 @@
+MANIFEST-000001