sb-front/docs/FRONTEND.md

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 패널
• 종목별 보유: 수량·평균매입단가·현재가(수동)·평가금액·평가손익·수익률·실현손익
• 매수/매도 건별 기록(이동평균 평단 자동 산출, 매도수량 초과 검증)
• 입금은 가계부 이체(은행→투자)로, 예수금·주식평가는 자동 계산되어 순자산·추이에 반영
• 원화·정수 수량 기준 (해외주식 소수점/환율·자동 시세는 범위 외)

개발/빌드

npm install
npm run dev      # 개발 서버
npm run build    # dist/ 정적 빌드

• API 베이스 URL: VITE_API_BASE_URL (기본 /api)