money.sori.studio/docs/project-guidelines.md

프로젝트 지침

제품 방향

• 모바일 입력을 가장 중요하게 본다.
• 모바일 전용 고정 폭 앱으로 만들지 않는다.
• PC에서는 넓은 작업영역, 사이드바, 표/목록 밀도를 활용한다.
• 기능은 회계 앱처럼 복잡하게 확장하지 않는다.
• 거래 데이터가 금액 계산의 Source of Truth다.

UI 기준

• 모바일: 하단 탭, 플로팅 추가 버튼, 바텀 시트 선택 UI를 우선한다.
• PC: 사이드바 내비게이션과 넓은 콘텐츠 영역을 사용한다.
• 입력 화면은 한 화면에서 빠르게 끝나는 흐름을 유지한다.
• 거래 입력에서는 시간 입력을 요구하지 않고 날짜만 선택한다.
• 거래 타입은 수입과 지출만 사용하고 이체 타입이나 이체 탭은 만들지 않는다.
• 날짜 선택은 모바일 친화적인 바텀 시트 캘린더를 사용한다.
• 자산, 분류, 금액, 내용 입력은 placeholder 문구를 넣지 않고 비어 있는 입력 상태로 둔다.
• 금액 입력은 기본값 0을 채우지 않는다.
• 거래 입력/수정 저장 버튼은 하단에만 두고, 저장하기와 취소를 2:1 비율로 배치한다.
• 필수값 없이 저장을 누르면 토스트로 부족한 항목을 알려주고 해당 입력 줄에 포커스와 강조선을 준다.
• 거래 입력 행은 위아래 박스 라인 대신 각 입력란 하단 밑줄만 사용하고, 포커스 중인 줄만 포인트 색상으로 강조한다.
• 셀렉트 박스보다 모바일 친화적인 바텀 시트를 우선한다.
• 상태를 켜고 끄는 기능이 꼭 필요한 경우에는 텍스트 버튼보다 토글처럼 현재 상태가 보이는 UI를 쓴다.
• 자산 관리는 활성/비활성 토글을 쓰지 않고, 등록된 자산은 모두 사용하는 것으로 본다.
• 통계 화면은 그래프보다 숫자와 분류별 리스트를 우선한다.
• 방향 이동 UI는 assets/icons의 키보드 화살표 SVG를 사용한다.
• 추가 버튼 UI는 텍스트 + 대신 assets/icons/add.svg를 사용한다.
• 검색과 필터 같은 헤더 액션도 텍스트 기호 대신 assets/icons의 SVG 아이콘을 사용한다.
• 거래 목록의 카테고리 표시는 하위 카테고리가 있으면 하위 이름만, 없으면 상위 이름만 보여준다.
• 카테고리 아이콘과 색상은 카테고리 관리 상세 화면에서 수정하고 거래 목록 아이콘에 즉시 반영한다.
• 빈 데이터 화면은 단순 텍스트만 노출하지 않고 공통 EmptyState 형태로 제목, 짧은 설명, 다음 행동의 힌트를 제공한다.

데이터 기준

• PostgreSQL을 기본 DB로 사용한다.
• Prisma migration은 저장소에 포함한다.
• 자산 잔액은 현재값을 저장하지 않고 거래 합계로 계산한다.
• 자산은 활성/비활성으로 관리하지 않는다. 삭제는 거래가 연결되지 않은 자산에 한해 제공한다.
• 거래에 연결되는 카테고리 선택은 하위가 있으면 하위 카테고리를 우선하고, 하위가 없는 경우에만 상위 카테고리를 직접 선택한다.
• CSV Export는 데이터 보존을 위한 필수 기능으로 유지한다.
• CSV Export 컬럼은 사용자가 앱에서 보는 흐름에 맞춰 날짜, 유형, 자산, 분류, 금액, 내용, 메모 중심의 한글 컬럼으로 제공한다.
• 주 화폐, 월 시작일, 주간 시작일 같은 사용자별 기본 설정은 UserSetting에 저장한다.

개발/운영 기준

• 주요 수정 후 npm run build로 검증한다.
• 개발 서버가 켜져 있어 빌드 락이 걸리면 NUXT_IGNORE_LOCK=1 npm run build로 검증한다.
• git 커밋 사용자 정보는 아래 값을 사용한다.

user.name: zenn
user.email: zenn.message@gmail.com

• 의미 있는 수정 단위마다 변경 내역을 문서에 남기고 커밋/푸시한다.
• 원격 저장소는 https://git.sori.studio/zenn/money.sori.studio.git를 사용한다.