Bridging the World to Korean Finance, FinForU

4호선톤 10팀 프론트엔드 레포지토리

개발 기간 : 2025.10.30. ~ 2025.11.14.

🙋‍♀️ 프론트엔드 팀원 🙋‍♀️

백민영	황선하
3개 국어(영어, 중국어, 베트남어) 다국어 처리 온보딩(언어 선택), 로그인, 회원가입 정보 수정, 계정 삭제 환율 열람 기능, 지갑 기능 푸시 알림	금융 가이드 (chatbot) 특화 점포 안내 (지도 렌더링) 금융 상품 안내 (상품 비교, ai 추천)

🔧 기술 스택 🔧

용도	사용한 스택
사용 언어
라이브러리
라우팅
데이터 페칭
전역 상태 관리
스타일링
다국어 처리
번들러
배포
CI/CD
푸시 알림
협업 도구

📁 폴더 구조 📁

FinForU-FE/
├─ .github/ (이슈 템플릿, PR 템플릿)
│  ├─ ISSUE_TEMPLATE/
│  │  ├─ config.yml
│  │  └─ issue_template.md
│  │
│  ├─ workflows
│  │  └─ deploy.yml (CI/CD 배포 파일)
│  │
│  └─ pull_request_template.md
│                
├─ public/
│  ├─ favicons (favicon, 웹앱 아이콘 등 관리)
│  │      
│  ├─ fonts/ (정적 경로에서 폰트 관리)
│  │  ├─ fonts.css
│  │  ├─ NotoSansSC-VariableFont_wght.ttf (중국어 환경 메인 폰트)
│  │  └─ PretendardVariable.woff2
│  │
│  ├─ favicon.png
│  ├─ firebase-messaging-sw.js (FCM 푸시알림을 위한 서비스워커)                  
│  ├─ logo.png
│  └─ manifest.json             
│
├─ src/
│  ├─ api/ (데이터 페칭에 사용하는 axiosInstance 파일)       
│  │
│  ├─ components/ (전역에서 재사용되는 컴포넌트 파일)        
│  │
│  ├─ constants/ (전역에서 재사용되는 정적 상수 파일)
│  │
│  ├─ hooks/ (FCM 토큰 관리에 사용되는 커스텀 훅 파일)               
│  │
│  ├─ layouts/ (전역 기본 레이아웃 파일 및 각 상황별 레이아웃 파일)               
│  │
│  ├─ locales/ (i18next 다국어 처리를 위한 정적 파일)               
│  │
│  ├─ pages/ (홈 화면 등 페이지 파일)             
│  │
│  ├─ stores/ (zustand 전역 상태 관리 파일)         
│  │
│  ├─ styles/ (css 관련 파일)
│  │  └─ GlobalStyle.jsx (전역 스타일 관리)           
│  │
│  ├─ App.jsx
│  ├─ firebase.js (Firebase 프로젝트 초기화 및 토큰 가져오는 로직 파일)
│  ├─ i18next.js (i18next 세팅 파일)
│  └─ main.jsx          
│
├─ .gitignore
├─ .prettierrc
├─ build.sh (CI/CD 배포 관련 파일)
├─ eslint.config.js
├─ index.html
├─ package-lock.json                  
├─ package.json
├─ README.md
└─ vite.config.js

💻 개발 시작하기 💻

git clone https://github.com/line4thon-team10/FinForU-FE.git
cd FinForU-FE
npm install
npm run dev

📃 커밋 컨벤션, 브랜치 전략 📃

커밋 메세지 컨벤션

• 커밋의 시작은 아래의 목록을 참고하여 gitmoji & 커밋이름 삽입
• 커밋의 끝맺음은 "~ 기능 추가", "~ 작업", "~ 개발" 과 같이 명사로 통일

🎉 Init: 프로젝트 세팅
✨ Feat: 새로운 기능 추가
🐛 Fix: 버그 수정
🎨 Design: UI 스타일/디자인 수정
♻️ Refactor: 코드 리팩토링
✏️ Typo: 오타 수정,타입 수정
🚚 Rename: 폴더 구조 이동, 파일명 변경
🍱 Assets: 이미지, 폰트 등 리소스 추가/삭제
🔥 Del: 파일 삭제
📝 Docs: 문서 수정, 목데이터 작업 등
🔧 Chore: 설정파일 보완, 환경 설정
➕ Deps: 새로운 라이브러리 설치
➖ Deps: 불필요한 라이브러리 삭제
🔙 : 커밋 내용 복구

예시

✨ Feat: 메인페이지 개발
♻️ Refactor: 등록 플로우 - 글 작성 페이지 로직 정리

브랜치 전략

태그이름	설명
main	실제 배포용 브랜치
develop	개발용 브랜치(기능 통합용)
feat/이슈번호/기능이름	새로운 기능 개발 시
refactor/이슈번호/기능이름	코드 리팩토링
fix/이슈번호/버그이름	버그 수정
design/이슈번호/요소	디자인 및 스타일 변경
chore/이슈번호/내용	설정, 의존성 등 기타 작업

예시

feat/12/login-page  // 로그인 기능 개발
refactor/34/reduce-duplicated-code  // 코드 리팩토링
chore/56/update-eslint  // eslint 설정 수정