docs: add project docs and test updates

2026-04-08 00:23:55 +09:00
parent 06fedc866a
commit 06aa401048
238 changed files with 8373 additions and 148 deletions
--- a/규칙/04-CSS정리구조.md
+++ b/규칙/04-CSS정리구조.md
@@ -0,0 +1,42 @@
+# CSS 정리 구조 (CSS Organization)
+
+> Auth·일일봉투 수불현황 뷰 기준. Tailwind + 페이지 단위 커스텀 스타일.
+
+## 1. 기본 원칙
+
+- **Tailwind CSS**를 메인으로 사용. CDN: `https://cdn.tailwindcss.com?plugins=forms,container-queries`.
+- **페이지/화면 단위**로 필요한 경우에만 `tailwind.config` 확장(colors, fontFamily 등)과 `<style>` 블록 사용.
+- 프로젝트 공통 스타일이 있으면 한 곳에 모아서 참조(예: 레이아웃·버튼 클래스).
+
+## 2. Tailwind 설정 (페이지 내)
+
+- 뷰 파일 `<head>` 안 `<script>` 에서 `tailwind.config.theme.extend` 로 커스텀 색·폰트 정의.
+- **Auth(로그인) 예**: `page-bg`, `brand-blue`, `brand-blue-hover`, `text-primary`, `text-secondary`, `input-border`, `fontFamily.sans`, `boxShadow.soft`.
+- **업무 화면(일일봉투 등) 예**: `system-header`, `title-bar`, `control-panel`, `btn-search`, `btn-excel-border`, `btn-excel-text`, `btn-print-border`, `btn-exit`, `fontSize.xxs`.
+
+## 3. 커스텀 CSS 블록
+
+- **용도**: 테이블, 스크롤, 레이아웃 등 Tailwind만으로 표현하기 어려운 부분.
+- **위치**: 같은 뷰 파일 내 `<style data-purpose="...">` 로 구분. 예: `data-purpose="typography"`, `data-purpose="table-layout"`.
+- **네이밍**: 클래스명은 소문자·하이픈. 예: `.data-table`, `.main-content-area`. 페이지 특화 클래스는 해당 뷰에만 두기.
+
+## 4. 폰트
+
+- **로그인/간단 폼**: Inter 등 (예: Google Fonts `Inter`).
+- **업무 화면**: `Malgun Gothic`, `Noto Sans KR` 등 (예: `fontFamily.sans` 에 배열로 지정).
+
+## 5. 반응형·접근성
+
+- `min-h-screen`, `max-w-[420px]` 등 유틸리티로 레이아웃. 필요 시 `md:` 브레이크포인트 사용.
+- 포커스 링 등은 Tailwind `focus:`, `focus-visible:` 로 통일.
+
+## 6. 정리
+
+| 구분 | 사용처 | 비고 |
+|------|--------|------|
+| Tailwind 유틸리티 | 전체 | 기본 스타일 |
+| tailwind.config.extend | 뷰별 | 색, 폰트, 그림자 등 |
+| <style> 블록 | 뷰별 | 테이블, 스크롤, 레이아웃 |
+| data-purpose | <style> | 블록 용도 구분 |
+
+새 화면 추가 시 기존 Auth·일일봉투 수불현황 뷰의 Tailwind·config·style 구조를 참고해 동일한 방식으로 정리한다. **디자인 일관성**(레이아웃·색상·버튼·테이블)은 [08-디자인규칙.md](08-디자인규칙.md)를 따른다.