회계증빙관리 (FE 메인테이너)

독자: FE 메인테이너/AI. 작성: 2026-07-11, 도메인명 개정: 2026-07-26. 도메인 경계: 회계 원천증빙 aggregate는 accounting-source-documents가 소유하고, 재무회계는 분류된 원천증빙을 전표 후보로 소비한다.

라우트·트리

/accounting-source-documents(랜딩) · /accounting-source-documents/app-view 셸(전자결재 셸 패턴 미러 — components/accounting-source-documents/_shell/) 하위:
- /accounting-source-documents/assistant → AssistantMainOrg(대화 로그·추천 칩·초안 폼 — UI는 EDS Chat 정본(Chat/ChatLog/ChatThread/ChatMessage/ChatBubble/ChatComposer/ChatSuggestions, @/registry/vue/chat — thread 48rem 중앙 수렴 내장), seam aiAssistantRepo — chooseAdapter: VITE_XAI_API_KEY 있으면 하이브리드(Grok 의도해석·다듬기, maskPII 강제)/없으면 로컬, 안전 계약 = backend/ai-assistant-safety.md)
- /accounting-source-documents/evidence/sales · /accounting-source-documents/evidence/purchases → EvidenceMainOrg(direction prop 공용)
- /accounting-source-documents/vat/estimate → VatEstimateOrg
nav 레지스트리: accountingSourceDocumentNav.js (approvalNav 패턴 — 순수 데이터). i18n 미사용(플레인 한글 — locale 파일 불수정).

파일	역할
`accountingSourceDocumentMock.js`	증빙 시드(매출 8·매입 8, 5~7월, 원천 4종)·`classifyEvidence`·계정과목 옵션·`sourceLabel`
`useAccountingSourceDocuments.js`	`filterRows`(월·원천·분류상태)·`classifyCounts`·`vatEstimate`(A−B·원천 분해)·`vatTrend` — 파생 계산 SSOT
`accountingSourceDocumentRepo.js`	seam — list/classify(활성) + collect류 4종(바로빌 — NOT_WIRED). Supabase 어댑터 스케치 주석

AssistantMainOrg가 Sheet에 embedded될 때 card-md를 제거해 sheet-lg의 24px padding만 남긴다. 전체 페이지에서는 기존 card-md 16px padding을 유지한다.
제안 질문은 제품 로컬 nowrap/max-content/overflow-x override를 두지 않고 SSOT .chat-suggestions의 flex-wrap: wrap을 그대로 사용한다.
composer는 input-group-xl을 유지하되 모바일 icon과 데스크톱 텍스트 전송 버튼을 모두 button-md로 낮춰 입력 surface 안에 여백을 확보한다.
증빙: card-header(조회 월 native select + desktop 원천 primary tabs / mobile 원천 native select + [바로빌 수집] disabled) / card-body(분류 상태 segmented + 반응형 목록). 계정과목 select → seam classify → 재조회.
부가세: 분기 segmented → 요약 title-lg + A−B 분해 table-static + 분기 추이 테이블. 상주 안내 = role="note"(§6).

조회 월은 input[type=month]가 아니라 공식 native Select anatomy(.select.select-lg > select)를 쓴다. 모바일 w-full, sm 이상 w-40; 전체 기간 + 데이터에 존재하는 월을 최신순으로 제공한다.
원천은 업무 데이터셋 전환이므로 desktop에서 .tabs-list-primary-moderate.tabs-list-radius-full + .tabs-trigger-sm을 쓴다. 모바일에서는 동일 source 모델을 .select.select-lg로 조작해 5개 탭 압축·페이지 overflow를 피한다.
분류 상태는 화면 내 필터이므로 neutral segmented를 유지한다. card-header의 월·탭·연동 액션과 body의 segmented·[규칙 자동분류]는 모두 외곽 높이 36px tier(select-lg / tabs-list+trigger-sm / button-lg / segmented-sm)로 맞춘다.
<sm: 표 대신 card card-sm card-inset-edged card-divide-y 증빙 목록. 거래처·합계금액을 header에, 품목·공급가액·세액과 .select.select-lg.w-full 계정과목을 body에 둔다.
sm+: w-max min-w-full whitespace-nowrap 표를 스크롤 wrapper 안에 유지한다. 계정과목 native select는 min-w-36으로 선택 라벨이 한 글자로 압축되지 않게 한다.
mobile/desktop 표현은 같은 visibleRows, onClassify, accounts를 소비한다. 표현만 이원화하고 필터·저장 상태는 이원화하지 않는다.

accountingSourceDocumentClassifyRules.js: CLASSIFY_RULES(순서=우선순위·direction 스코프·계정은 SALES/PURCHASE_ACCOUNTS 어휘 안) → suggestAccount(row)·autoClassify(direction)(미분류만·멱등). seam accountingSourceDocumentRepo.autoClassify 경유, EvidenceMainOrg [규칙 자동분류] 버튼+role=status 결과. 테스트 accountingSourceDocumentClassifyRules.test.js.
AI 비서 intent 7종(+overdueTop 연체 상위·payrollTotal 급여 총액 — HR payslip 읽기전용 소비).

페이지 콘텐츠 폭 3-tier(leysys-design docs/decisions/CONTENT-WIDTH-TIERS-2026-07-11.md): 다열 테이블=wide(w-full) / 키밸류·폼=focused(max-w-3xl~4xl mx-auto) / 채팅·본문=prose(max-w-2xl~3xl, chat은 컴포넌트 내장 --chat-thread-max). 적용: /accounting-source-documents/vat/estimate=focused(4xl), /accounting-source-documents/assistant=chat 내장.

useAccountingSourceDocuments.test.js 10종 — 필터·카운트 정합·분류 멱등·A−B 손계산 교차(228,500원)·Σ 보존·seam 가드.
src/components/accounting-source-documents/evidence/__tests__/EvidenceMainOrg.spec.js: 조회 월·모바일 원천 select, desktop primary tabs, 모바일 카드/desktop table, 컨트롤 높이 tier를 고정한다.
Playwright(2026-07-13): 390px에서 문서 가로 overflow 0, mobile cards·select 전체 폭, desktop source tabs·table select 최소 폭, 분류 즉시반영, 콘솔 에러 0.