ByungCheol
13308a82ef
- 가계부: 대시보드(예산 대비 지출·분류별 파이·기간별 막대·순자산 추이), 내역(검색·필터·태그), 계좌(은행/카드/대출/투자), 예산, 분류, 정기 거래, 태그, 투자 포트폴리오(종목·매수/매도·평가손익) - 게시판: 목록/상세/작성(마크다운)/댓글/태그/열람제한 - 공통: 인증(Bearer 토큰·401 처리), 모바일 반응형(드로어·아이콘 버튼), Slim Budget 브랜딩(로고/타이틀/푸터), 홈 대시보드 자리 - 문서: docs/FRONTEND.md Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
86 lines
4.8 KiB
Markdown
86 lines
4.8 KiB
Markdown
# Slim Budget — 프론트엔드 (sb_pt)
|
|
|
|
Vue 3 + Vite 기반의 가계부·게시판 웹 애플리케이션 프론트엔드.
|
|
|
|
## 기술 스택
|
|
- **Vue 3** (`<script setup>` Composition API) + **Vite**
|
|
- **Pinia** (상태관리), **Vue Router** (라우팅)
|
|
- **Axios** (HTTP, 공통 인스턴스 + 토큰/401 인터셉터)
|
|
- **Toast UI Editor** (`@toast-ui/editor`) + Prism.js (게시판 마크다운 작성/뷰어·코드 하이라이트)
|
|
|
|
## 브랜딩
|
|
- 서비스명 **Slim Budget** (헤더 로고/타이틀/푸터)
|
|
- 로고: `public/logo.svg` (브랜드 그린 `#00bc7e` 배지 + 슬림 막대 차트), 파비콘으로도 사용
|
|
|
|
## 디렉터리 구조
|
|
```
|
|
src/
|
|
├── api/ # 백엔드 연동 (axios)
|
|
│ ├── http.js # 공통 인스턴스 (Authorization 주입, 401 처리)
|
|
│ ├── authApi.js # 로그인/회원가입/세션
|
|
│ ├── boardApi.js # 게시판
|
|
│ ├── adminApi.js # 관리자(태그 카테고리)
|
|
│ └── accountApi.js # 가계부 전체
|
|
├── stores/ # Pinia (auth, ui, user)
|
|
├── router/index.js # 라우트 + 인증 가드
|
|
├── components/
|
|
│ ├── layout/ # AppHeader / AppSidebar / AppFooter
|
|
│ ├── ui/IconBtn.vue # 공통 SVG 아이콘 버튼
|
|
│ ├── editor/ # MarkdownEditor / MarkdownViewer
|
|
│ ├── LoginModal.vue / SignupModal.vue
|
|
├── views/
|
|
│ ├── HomeView.vue # 홈(대시보드 자리, 현재 빈 공간)
|
|
│ ├── UsersView.vue # 사용자 관리
|
|
│ ├── board/ # 게시판 (목록/상세/작성)
|
|
│ ├── account/ # 가계부 (아래 참조)
|
|
│ └── admin/ # 태그 관리(관리자)
|
|
└── assets/main.css # 전역 스타일
|
|
```
|
|
|
|
## 인증
|
|
- 로그인 시 발급된 **Bearer 토큰**을 `localStorage`에 저장, `http.js` 요청 인터셉터가 `Authorization` 헤더에 주입
|
|
- 401 응답 시 토큰 정리 후 `auth:unauthorized` 이벤트 → 로그인 모달 표시
|
|
- 라우트 `meta.requiresAuth` / `requiresAdmin` 가드
|
|
|
|
## 레이아웃 / 반응형
|
|
- 그리드 레이아웃(헤더·사이드바·본문·푸터)
|
|
- **모바일(≤768px)**: 사이드바가 **오프캔버스 드로어**(햄버거 토글 + 백드롭, 라우트 이동 시 자동 닫힘)
|
|
- 모든 액션 버튼은 **아이콘화**(`IconBtn`: 등록/수정/삭제/검색/페이징 등), `title`로 접근성·툴팁 제공
|
|
- 한 줄에 담기 어려운 목록은 **2줄 표기**(게시판: 제목/메타, 가계부 내역: 분류·금액/날짜·메모·액션 등)
|
|
|
|
## 게시판 (`/board`)
|
|
- 목록(페이징·태그 필터·검색[제목/본문/댓글]), 상세, 작성/수정(마크다운)
|
|
- 댓글, 태그, 관리자 **열람 제한/해제**
|
|
|
|
## 가계부 (`/account`)
|
|
사용자별 데이터 격리(본인 데이터만). 주요 화면(사이드바 하위 메뉴):
|
|
|
|
| 경로 | 화면 | 설명 |
|
|
|------|------|------|
|
|
| `/account` | 대시보드 | 예산 대비 지출 도넛, **분류별 파이차트**, 기간별 예산대비지출 막대(툴팁), 수입대비지출, 월별 총액, **순자산 추이** 라인차트 |
|
|
| `/account/entries` | 가계부 내역 | 월별 내역 CRUD, **검색·필터**(키워드/구분/분류/계좌/태그), 분류 인라인 추가 |
|
|
| `/account/recurrings` | 정기 거래 | 일/주/월/년 반복 규칙, 진입 시 자동 반영(중복 없이) |
|
|
| `/account/wallets` | 계좌 관리 | 은행/카드/대출/**투자** 계좌, 잔액·순자산, 상환/납부, **투자 포트폴리오** |
|
|
| `/account/categories` | 분류 관리 | 수입/지출 분류 CRUD, 이름 변경 전파, 기존 내역에서 가져오기 |
|
|
| `/account/budget` | 예산 설정 | 고정(일수 기준 자동 환산)/비고정, 예산 대비 진행률 |
|
|
| `/account/tags` | 태그 관리 | 사용자별 가계부 태그 |
|
|
|
|
### 잔액·순자산 모델 (표시)
|
|
- 자산(+) / 부채(−) 부호 모델. 지갑 잔액 = 개시잔액 + 수입 − 지출 − 이체출금 + 이체입금
|
|
- 순자산 = 총자산 − 총부채 (투자계좌는 평가금액 반영)
|
|
|
|
### 투자 포트폴리오 (계좌 관리 > 투자 탭)
|
|
- 투자계좌를 펼치면 [InvestPortfolio.vue](../src/views/account/InvestPortfolio.vue) 패널
|
|
- **종목별** 보유: 수량·평균매입단가·현재가(수동)·평가금액·**평가손익·수익률**·실현손익
|
|
- **매수/매도** 건별 기록(이동평균 평단 자동 산출, 매도수량 초과 검증)
|
|
- 입금은 가계부 **이체**(은행→투자)로, 예수금·주식평가는 자동 계산되어 순자산·추이에 반영
|
|
- 원화·정수 수량 기준 (해외주식 소수점/환율·자동 시세는 범위 외)
|
|
|
|
## 개발/빌드
|
|
```bash
|
|
npm install
|
|
npm run dev # 개발 서버
|
|
npm run build # dist/ 정적 빌드
|
|
```
|
|
- API 베이스 URL: `VITE_API_BASE_URL` (기본 `/api`)
|