Finly

감정과 투자 데이터를 연결해 사용자가 자신의 금융 성향을 이해하도록 돕는 서비스

👥 Frontend Team

김은하	윤나경(leader)	윤윤지	조하늘
성신여대	성신여대	덕성여대	성신여대
rladmsgki	nakyeongg	Yunji-Yun	gkdl0113

✨ Key Features

💡 금융 마음 지수

• 감정 기록과 투자 데이터를 기반으로 사용자의 금융 심리 상태를 점수와 설명으로 시각화

📝 감정 연동 투자 기록

• 투자 기록과 함께 당시 감정을 기록하여 의사결정의 맥락을 관리

🕒 최근 기록 요약

• 최근 투자 및 감정 데이터를 한눈에 확인
• 일주일의 감정 요약 이모지로 제공

📊 감정·투자 통계

• 감정 흐름과 투자 기록을 그래프로 분석하여 패턴과 연관성을 확인

📅 캘린더 기반 탐색

• 날짜별 기록을 캘린더로 쉽게 확인하고 비교

👤 페르소나 타입 제공

• 사용자의 투자 습관과 감정 패턴을 분석하여 개인별 금융 페르소나 타입을 제공

🛠️ Tech Stack

기술	선정 이유
React	컴포넌트 기반 구조를 통해 복잡한 UI를 효율적으로 분리하고 재사용성을 높임. 상태 변화에 따른 자동 렌더링을 통해 데이터 중심의 서비스 구조를 효율적으로 구현.
TypeScript	API 응답과 상태 값을 명확히 정의해 런타임 오류를 줄이고, 안정적인 개발 환경을 구축. 금융 데이터(주가) 및 사용자 감정 데이터의 복잡한 타입을 인터페이스로 엄격히 관리하여, 개발 단계에서 Type Error를 사전에 방지하고 협업 시 데이터 구조 파악 비용을 낮춤.
React Query	중복된 API 호출을 캐싱을 통해 방지하고, staleTime 설정을 통해 서버 데이터와 클라이언트 상태 간의 동기화 로직을 추상화하여 실시간성 데이터 관리 효율을 극대화.
Tailwind CSS	CSS-in-JS의 런타임 오버헤드를 줄이고, 미리 정의된 디자인 시스템을 활용해 스타일의 일관성을 유지하면서도 개발 속도를 높임.
React Router	클라이언트 사이드 라우팅을 통해 페이지 전환 시 불필요한 리소스 로드를 방지하고, 중첩 라우팅으로 서비스의 계층 구조를 명확히 함.

📦 Libraries

라이브러리	선정 이유
date-fns	달력 컴포넌트 구현 시 시계열 데이터의 파싱, 포맷팅, 유효성 검사를 수행. 가벼운 라이브러리 사이즈를 유지하면서도 다양한 날짜 연산 로직을 일관된 인터페이스로 관리.
react-tooltip	주가 및 감정 흐름 그래프에 툴팁을 제공해 페이지 이동 가능성을 시각적으로 안내함으로써 사용자의 기능 탐색성을 높임.
react-use	useClickAway 훅을 활용해 종목 선택 리스트의 외부 클릭 감지 로직을 간결하게 구현, 반복되는 UI 로직을 검증된 커스텀 훅으로 대체하여, 코드의 선언성을 높이고 직접 구현 시 발생할 수 있는 엣지 케이스 오류를 방지.
recharts	통계 페이지의 다양한 그래프를 구현. React 생태계에 최적화되어 있으며, 유연한 커스터마이징이 가능.
react-intersection-observer	무한 스크롤 구현. 대량의 데이터를 렌더링할 때 브라우저 리소스 소모를 최소화할 수 있어 성능 측면에서 적합.
Axios	fetch API 대비 요청/응답 인터셉터 기능을 제공하여, 공통 헤더 처리 및 에러 핸들링 로직을 중앙에서 관리하기 위해 도입.
zustand	여러 페이지에 걸쳐 유지되어야 하는 로그인한 유저의 정보와 온보딩 과정에서 입력된 약관동의 데이터 를 효율적으로 관리하고 공유.
framer-motion	페르소나 결과 페이지에서 사용자의 몰입감을 높이기 위해 도입. 특히 페르소나 결과가 나올 때 캐릭터 뒤에 배경이 튀어나오는 듯한 애니메이션을 직관적이고 효율적으로 구현.
tailwind-merge	스켈레톤 컴포넌트에서 넘겨받은 스타일을 우선으로 적용하기 위해 도입.

🚨 Troubleshooting

1. 외부 API 데이터 불일치 및 예외 상황 대응

• 상황
  • 서버에서 내려주는 종목 데이터 중 일부 항목에서 로고 이미지 URL이 누락(null)되어 UI상에서 Broken Image가 노출되는 현상 발생.
• 해결
  • Default Image 적용: 이미지 로드 실패 시 또는 데이터가 없을 경우를 대비한 공통 '디폴트 로고' 에셋을 준비하여 폴백(Fallback) 처리를 구현.
  • 방어적 데이터 파싱: 각 컴포넌트 진입 단계에서 데이터 존재 여부를 체크하는 옵셔널 체이닝(?.)과 조건부 렌더링을 강화하여, 특정 데이터가 없어도 전체 레이아웃이 무너지지 않도록 방어적인 구조를 설계.
• 결과
  • 외부 데이터의 가용 상태와 관계없이 일관된 시각적 UI를 유지할 수 있게 되었으며, 서비스의 전반적인 신뢰도를 높임.

2. SPA 배포 환경에서의 경로 인식 오류

• 상황
  • Vercel 배포 환경에서 메인 페이지 외의 특정 경로(예: /login, /record)로 직접 접속하거나 페이지를 새로고침할 때 브라우저에 404: NOT_FOUND 에러가 출력되는 현상 발생.
• 해결
  • Rewrites 설정 적용: 프로젝트 루트 디렉토리에 vercel.json 파일을 생성하고, 모든 URL 요청을 애플리케이션의 진입점인 index.html로 리다이렉트하도록 rewrites 규칙을 설정함.
• 결과
  • 사용자가 어떤 경로로 접속하더라도 끊김 없는 서비스를 이용할 수 있게 되었음.

🚀 GitHub Workflow

1. Issue를 생성
2. develop 브랜치를 기준으로 개별 브랜치를 생성
3. 기능 구현 완료 후 develop 브랜치로 Pull Request를 생성하여 리뷰를 요청
4. 최소 1명 이상의 승인이 있어야 머지가 가능

🤝 Convention

1. Commit Convention

커밋 메시지는 Gitmoji Type: 제목 형태이며, 콜론(:) 뒤에만 space가 있음에 유의.

• Format: Gitmoji Type: 제목
• Example: ✨ Feat: 로그인 기능 구현

Type	설명
feat	새로운 기능 추가
fix	버그 수정
docs	문서 수정 (README, API 명세서 등)
style	코드 포맷팅, 세미콜론 누락 (비즈니스 로직 변경 없음)
design	사용자 UI 디자인 변경 (CSS, 레이아웃 등)
refactor	코드 리팩토링 (기능 변경 없음)
chore	빌드, 패키지 매니저, 환경 설정 수정 (.gitignore, package.json 등)
init	프로젝트 초기 생성
rename	파일/폴더명 수정 혹은 이동
remove	파일 삭제
deploy	배포

2. PR Convention

PR 제목은 Gitmoji를 포함하여 작성.

• Format: [Gitmoji] [Type] 제목
• Example: ✨ [Feat] 로그인 기능 구현

Gitmoji	Type	설명
✨	Feat	새로운 기능 추가
🐛	Fix	버그 수정
📝	Docs	문서 수정
🎨	Style	코드 스타일 수정
💄	Design	사용자 UI 디자인 수정
♻️	Refactor	코드 리팩토링
📦	Chore	빌드/설정 파일 수정
🎉	Init	프로젝트 초기 생성
🚚	Rename	파일 이동/이름 변경
🔥	Remove	파일 삭제
🚀	Deploy	배포

3. Branch Strategy

브랜치 이름은 해당 작업의 이슈 번호를 포함하여 생성.

• main: 배포용 최종 브랜치
• develop: 개발용 메인 브랜치
• feature: 기능 개발 브랜치 (feat/#이슈번호-제목)
  • ex) feat/#12-login