docs: README 실제 문서화 + FRONTEND.md 현행화(브랜딩·플랫폼·화면·투자)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

README.md

@@ -1,44 +1,69 @@
-# sb_pt
+# 돈돼지 가계부 — 프론트엔드 (sb_pt)
 
-This template should help get you started developing with Vue 3 in Vite.
+Vue 3 + Vite 기반의 가계부·자산·게시판 앱 프론트엔드. 웹 / 안드로이드(Capacitor) / Windows 데스크톱(Electron) 3개 플랫폼을 하나의 코드베이스로 빌드합니다.
 
-## Recommended IDE Setup
+- 서비스명 **돈돼지 가계부** (구 Slim Budget)
+- 운영: [app.sblog.kr](https://app.sblog.kr) · 안내/정책 페이지 [www.sblog.kr](https://www.sblog.kr)
 
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Recommended Browser Setup
-
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
+## 기술 스택
+- **Vue 3** (`<script setup>` Composition API) + **Vite**
+- **Pinia** (상태관리), **Vue Router** (라우팅 + 인증 가드)
+- **Axios** (공통 인스턴스 + 토큰/401 인터셉터)
+- **Toast UI Editor** + Prism.js (게시판 마크다운 작성/뷰어)
+- **Capacitor** (안드로이드 하이브리드 앱), **Electron** (Windows 데스크톱)
+- **Vitest** + `@vue/test-utils` (테스트)
 
+## 빠른 시작
 ```sh
 npm install
+npm run dev        # 개발 서버 (전체 앱 표시 — 웹 접근 제한 예외)
 ```
+- Node: `^20.19.0 || >=22.12.0`
+- API 베이스 URL: `VITE_API_BASE_URL` (기본 `/api`, Nginx 가 백엔드 8080 으로 프록시)
 
-### Compile and Hot-Reload for Development
+## 주요 스크립트
+| 명령 | 설명 |
+|---|---|
+| `npm run dev` | 개발 서버 (HMR) |
+| `npm run build` | `dist/` 정적 빌드 (웹 배포용) |
+| `npm run build:app` | Capacitor 모드 빌드 (`--mode capacitor`, 앱 전용 env) |
+| `npm run cap:sync` | 앱 빌드 + `cap sync` (안드로이드 동기화) |
+| `npm run cap:android` | Android Studio 열기 |
+| `npm run electron:dev` | Electron 데스크톱 실행 |
+| `npm run electron:build` | Windows 설치파일(`DonDwaeji-Setup.exe`) 빌드 |
+| `npm test` | Vitest 실행 |
+| `npm run lint` | oxlint + eslint (`--fix`) |
 
-```sh
-npm run dev
-```
+## 플랫폼별 동작
+- **웹(PC·모바일)**: 안내 페이지만 노출(앱 다운로드 유도). 실제 이용은 앱에서. (`npm run dev` 는 예외로 전체 앱 표시)
+- **안드로이드**: Capacitor WebView 패키징. 빌드 전 `.env.capacitor` 의 백엔드 절대 URL 설정 필수 → [docs/ANDROID.md](docs/ANDROID.md)
+- **Windows**: Electron 이 라이브 사이트(app.sblog.kr)를 직접 로드 → 프론트 변경이 재설치 없이 반영
 
-### Compile and Minify for Production
+## 인증
+- 로그인 시 발급된 **Bearer 토큰**을 `localStorage` 에 저장, `http.js` 인터셉터가 `Authorization` 헤더에 주입
+- **구글 로그인**(웹/PC=GIS, 앱=네이티브 플러그인) — 현재 소셜 로그인 전용(아이디/비번 폼은 `features.js` 플래그로 숨김)
+- 401 응답 시 토큰 정리 후 로그인 모달, 라우트 `meta.requiresAuth` / `requiresAdmin` 가드
 
-```sh
-npm run build
-```
+## 주요 기능
+- **가계부** — 수입·지출·이체 기록, 검색·필터, 날짜 그룹 접기/펴기, 외화 입력(환율 자동환산)
+- **계좌·자산** — 은행·현금·카드·대출·투자 계좌, 순자산 자동 집계
+- **고정 지출** — 반복 규칙 자동 생성 + '확인' 확정 흐름
+- **통계** — 분류별 분석, 순자산 추이, 월말 예상 지출, 지난달 대비 (대시보드 차트)
+- **예산** — 월별 카테고리 예산, 예산 대비 진행률
+- **게시판** — 커뮤니티/짠테크/재테크 3개 게시판, 댓글·태그·이미지 업로드·공지
+- **테마** — 시스템/라이트/다크 모드
 
-### Lint with [ESLint](https://eslint.org/)
+## 문서
+| 문서 | 내용 |
+|---|---|
+| [docs/FRONTEND.md](docs/FRONTEND.md) | 아키텍처·디렉터리 구조·화면 명세 |
+| [docs/release-2026-06-06.md](docs/release-2026-06-06.md) | 누적 변경 이력 (릴리스 노트) |
+| [docs/ANDROID.md](docs/ANDROID.md) | 안드로이드(Capacitor) 빌드·배포 |
+| [docs/plan-membership-tiers.md](docs/plan-membership-tiers.md) | 무료/유료 티어 설계 (미구현) |
+| [deploy/README.md](deploy/README.md) | 프론트 배포(Nginx + Gitea Actions) |
+| [brand/LAUNCH-PROGRESS.md](brand/LAUNCH-PROGRESS.md) | Play 스토어 출시 진행 상황·로드맵 |
 
-```sh
-npm run lint
-```
+## 배포
+- `main` 푸시 → Gitea Actions 가 CI(빌드·테스트) + Deploy(Nginx 업로드·reload) 실행
+- **테스트 게이트**: CI·배포 워크플로 모두 테스트 실패 시 배포 중단
+- 상세: [deploy/README.md](deploy/README.md)