🙋🏻‍♀️ Donakawa의 FE Developer를 소개합니다!

김하경	신현우	양서윤	정주연
위시리스트 페이지 공통 컴포넌트	로그인 페이지 회원가입 페이지	프로젝트 초기세팅 기록 페이지 마이 페이지	홈 페이지 공통 컴포넌

💸 서비스 소개

“최소 지출, 최대 만족. 당신에게 딱 맞는 소비"

도나카와는 단순히 지출을 기록하는 가계부를 넘어 소비의 이유를 기록하고 돌아보는 쇼핑 분석 서비스 입니다.

물건을 구매하기 전 혹은 장바구니에 담을 때, 간단한 구매 이유를 함께 남김으로써 충동적인 소비를 한 번 더 멈춰 생각하게 합니다. 이후 쌓인 기록을 통해 “왜 이 소비를 했는지”, “이 선택은 나에게 어떤 의미였는지”를 스스로 점검할 수 있도록 돕습니다. 또한 소비가 고민되는 순간에는 AI와의 대화를 통해 감정에 치우치지 않은 판단을 유도합니다.

도나카와는 당신이 돈에 끌려다니는 소비자가 아니라, 가치와 기준을 가지고 선택하는 주도적인 소비자가 될 수 있도록 돕습니다.

💻 기술 스택

역할	종류	선정 이유
Library		컴포넌트 기반 구조로 재사용성과 유지보수성이 높아 개발 효율을 극대화 가능
Programming Language		정적 타입을 제공하여 코드의 안정성과 가독성을 높이고, 개발 중 오류를 사전에 방지할 수 있어 유지보수에 유리
Styling		유틸리티 클래스 기반의 스타일링으로 반복되는 CSS 코드 작성을 줄이고, 빠르고 일관된 UI 구현 가능
Data Fetching		직관적인 API 사용법과 자동 JSON 변환 기능으로 비동기 통신이 간편
State management	-	전역 상태 라이브러리 없이 React 기본 상태 관리와 Custom Hook을 사용해 서버 데이터와 UI 상태를 분리하고, 명확한 상태 흐름을 유지
Routing		SPA에 최적화된 라우팅 기능 제공, 선언적 방식으로 라우트를 쉽게 구성 가능
Formatting		코드 스타일을 통일하고 잠재적인 오류를 사전에 방지하여 협업 시 효율성을 높임
Package Manager		빠른 설치 속도와 안정적인 패키지 관리 기능으로 프로젝트 환경 설정에 용이
Bundler		빠른 서버 시작과 모듈 번들링 성능으로 개발 생산성을 향상

🧩 Package Manager

• pnpm 버전
  • 10.12.1
• pnpm 버전 설치 방법

pnpm set version 버전 # 프로젝트 최상위 폴더 위치에서 명령어 입력

• pnpm 명령어 예시

pnpm install # 전체 설치
pnpm add 라이브러리 # 라이브러리 설치
pnpm dev # 실행

⌨️ Code Styling

• camelCase
  • 변수명, 함수명에 적용
  • 첫글자는 소문자로 시작, 띄어쓰기는 붙이고 뒷 단어의 시작을 대문자로
    • ex- handleDelete
  • 언더바 사용 X (클래스명은 허용)

🎉Git Convention

📌 Git Flow

develop ← 작업 브랜치

• main branch : 배포 브랜치

• develop branch : 개발 브랜치, feature 브랜치가 merge됨

• feature branch : 페이지/기능 브랜치

  
  

✨ Flow

• develop 브랜치에서 새로운 브랜치를 생성.
• 작업을 완료하고 커밋 메시지에 맞게 커밋.
• Pull Request 생성
• develop 브랜치로 병합.

🔥 Commit Message Convention

• 커밋 유형
  • 🎉 Init: 프로젝트 세팅
  • ✨ Feat: 새로운 기능 추가
  • 🐛 Fix : 버그 수정
  • 💄 Design : UI(CSS) 수정
  • ✏️ Typing Error : 오타 수정
  • 📝 Docs : 문서 수정
  • 🚚 Mod : 폴더 구조 이동 및 파일 이름 수정
  • 💡 Add : 파일 추가 (ex- 이미지 추가)
  • 🔥 Del : 파일 삭제
  • ♻️ Refactor : 코드 리펙토링
  • 🚧 Chore : 배포, 빌드 등 기타 작업
  • 🔀 Merge : 브랜치 병합
• 형식: 커밋유형: 상세설명 (#이슈번호)
• 예시:
  • 🎉 Init: 프로젝트 초기 세팅 (#1)
  • ✨ Feat: 메인페이지 개발 (#2)

🌿 Branch Convention

Branch Naming 규칙

• 브랜치 종류
  • init: 프로젝트 세팅
  • feat: 새로운 기능 추가
  • fix : 버그 수정
  • refactor : 코드 리펙토링
• 형식: 브랜치종류/#이슈번호/상세기능
• 예시:
  • init/#1/init
  • fix/#2/splash

📋 Issue Convention

Issue Title 규칙

• 태그 목록:
  • Init: 프로젝트 세팅
  • Feat: 새로운 기능 추가
  • Fix : 버그 수정
  • Refactor : 코드 리펙토링
• 형식: [태그] 작업 요약
• 예시:
  • [Init] 프로젝트 초기 세팅
  • [Feat] Header 컴포넌트 구현

📂 프로젝트 구조

📦DONAKAWA-FRONTEND
 ┣ 📂.github
 ┃ ┣ 📂ISSUE_TEMPLATE
 ┃ ┣ 📂appmod
 ┃ ┗ 📜pull_request_template.md
 ┣ 📂public
 ┃ ┗ 📂fonts
 ┃ ┗ 📜Logo.svg
 ┣ 📂src
 ┃ ┣ 📂apis
 ┃ ┣ 📂assets
 ┃ ┣ 📂components
 ┃ ┣ 📂constants
 ┃ ┣ 📂layouts
 ┃ ┣ 📂pages
 ┃ ┃ ┣ 📂BudgetSettingPage
 ┃ ┃ ┃ ┗ 📂components
 ┃ ┃ ┣ 📂BudgetSummaryPage
 ┃ ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┗ 📂hooks
 ┃ ┃ ┣ 📂ConsumptionPage
 ┃ ┃ ┃ ┗ 📂hooks
 ┃ ┃ ┣ 📂FindPasswordPage
 ┃ ┃ ┣ 📂HomePage
 ┃ ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┗ 📂hooks
 ┃ ┃ ┣ 📂ItemSelectionPage
 ┃ ┃ ┃ ┗ 📂components
 ┃ ┃ ┣ 📂LoginPage
 ┃ ┃ ┣ 📂MyPage
 ┃ ┃ ┃ ┗ 📂components
 ┃ ┃ ┣ 📂ReportPage
 ┃ ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┗ 📂hooks
 ┃ ┃ ┣ 📂SignupPage
 ┃ ┃ ┃ ┗ 📂components
 ┃ ┃ ┣ 📂WishlistPage
 ┃ ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┗ 📂hooks
 ┃ ┣ 📂queries
 ┃ ┣ 📂routes
 ┃ ┣ 📂types
 ┃ ┣ 📂utils
 ┃ ┣ 📜App.tsx
 ┃ ┣ 📜index.css
 ┃ ┣ 📜main.tsx
 ┃ ┗ 📜vite-env.d.ts
 ┣ 📜.env
 ┣ 📜.gitignore
 ┣ 📜.prettierrc
 ┣ 📜.stylelintrc
 ┣ 📜eslint.config.js
 ┣ 📜index.html
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜pnpm-lock.yaml
 ┣ 📜pnpm-workspace.yaml
 ┣ 📜README.md
 ┣ 📜tsconfig.app.json
 ┣ 📜tsconfig.json
 ┣ 📜tsconfig.node.json
 ┣ 📜vercel.json
 ┗ 📜vite.config.ts

• public
  • fonts - 폰트
• src
  • apis - 서버와 통신하는 API 함수 모음
  • assets - 사용되는 모든 에셋
  • components - 공용 컴포넌트 및 스타일
  • constants - 프로젝트 전역에서 사용되는 상수값 및 설정 모음
  • layouts - 페이지의 공통 레이아웃 컴포넌트
  • pages - 실제 라우팅되는 페이지 컴포넌트
  • routes - 도메인 별 라우팅 페이지와 컴포넌트 및 스타일 등
  • types - TypeScript 타입 정의 모음
  • utils - 전역으로 사용되는 함수