감정과 투자 데이터를 연결해 사용자가 자신의 금융 성향을 이해하도록 돕는 서비스
| 김은하 | 윤나경(leader) | 윤윤지 | 조하늘 |
|---|---|---|---|
 |
 |
 |
 |
| 성신여대 | 성신여대 | 덕성여대 | 성신여대 |
| rladmsgki | nakyeongg | Yunji-Yun | gkdl0113 |
- 감정 기록과 투자 데이터를 기반으로 사용자의 금융 심리 상태를 점수와 설명으로 시각화
- 투자 기록과 함께 당시 감정을 기록하여 의사결정의 맥락을 관리
- 최근 투자 및 감정 데이터를 한눈에 확인
- 일주일의 감정 요약 이모지로 제공
- 감정 흐름과 투자 기록을 그래프로 분석하여 패턴과 연관성을 확인
- 날짜별 기록을 캘린더로 쉽게 확인하고 비교
- 사용자의 투자 습관과 감정 패턴을 분석하여 개인별 금융 페르소나 타입을 제공
| 기술 | 선정 이유 |
|---|---|
| React | 컴포넌트 기반 구조를 통해 복잡한 UI를 효율적으로 분리하고 재사용성을 높임. 상태 변화에 따른 자동 렌더링을 통해 데이터 중심의 서비스 구조를 효율적으로 구현. |
| TypeScript | API 응답과 상태 값을 명확히 정의해 런타임 오류를 줄이고, 안정적인 개발 환경을 구축. 금융 데이터(주가) 및 사용자 감정 데이터의 복잡한 타입을 인터페이스로 엄격히 관리하여, 개발 단계에서 Type Error를 사전에 방지하고 협업 시 데이터 구조 파악 비용을 낮춤. |
| React Query | 중복된 API 호출을 캐싱을 통해 방지하고, staleTime 설정을 통해 서버 데이터와 클라이언트 상태 간의 동기화 로직을 추상화하여 실시간성 데이터 관리 효율을 극대화. |
| Tailwind CSS | CSS-in-JS의 런타임 오버헤드를 줄이고, 미리 정의된 디자인 시스템을 활용해 스타일의 일관성을 유지하면서도 개발 속도를 높임. |
| React Router | 클라이언트 사이드 라우팅을 통해 페이지 전환 시 불필요한 리소스 로드를 방지하고, 중첩 라우팅으로 서비스의 계층 구조를 명확히 함. |
| 라이브러리 | 선정 이유 |
|---|---|
| date-fns | 달력 컴포넌트 구현 시 시계열 데이터의 파싱, 포맷팅, 유효성 검사를 수행. 가벼운 라이브러리 사이즈를 유지하면서도 다양한 날짜 연산 로직을 일관된 인터페이스로 관리. |
| react-tooltip | 주가 및 감정 흐름 그래프에 툴팁을 제공해 페이지 이동 가능성을 시각적으로 안내함으로써 사용자의 기능 탐색성을 높임. |
| react-use | useClickAway 훅을 활용해 종목 선택 리스트의 외부 클릭 감지 로직을 간결하게 구현, 반복되는 UI 로직을 검증된 커스텀 훅으로 대체하여, 코드의 선언성을 높이고 직접 구현 시 발생할 수 있는 엣지 케이스 오류를 방지. |
| recharts | 통계 페이지의 다양한 그래프를 구현. React 생태계에 최적화되어 있으며, 유연한 커스터마이징이 가능. |
| react-intersection-observer | 무한 스크롤 구현. 대량의 데이터를 렌더링할 때 브라우저 리소스 소모를 최소화할 수 있어 성능 측면에서 적합. |
| Axios | fetch API 대비 요청/응답 인터셉터 기능을 제공하여, 공통 헤더 처리 및 에러 핸들링 로직을 중앙에서 관리하기 위해 도입. |
| zustand | 여러 페이지에 걸쳐 유지되어야 하는 로그인한 유저의 정보와 온보딩 과정에서 입력된 약관동의 데이터 를 효율적으로 관리하고 공유. |
| framer-motion | 페르소나 결과 페이지에서 사용자의 몰입감을 높이기 위해 도입. 특히 페르소나 결과가 나올 때 캐릭터 뒤에 배경이 튀어나오는 듯한 애니메이션을 직관적이고 효율적으로 구현. |
| tailwind-merge | 스켈레톤 컴포넌트에서 넘겨받은 스타일을 우선으로 적용하기 위해 도입. |
- 상황
- 서버에서 내려주는 종목 데이터 중 일부 항목에서 로고 이미지 URL이 누락(null)되어 UI상에서 Broken Image가 노출되는 현상 발생.
- 해결
- Default Image 적용: 이미지 로드 실패 시 또는 데이터가 없을 경우를 대비한 공통 '디폴트 로고' 에셋을 준비하여 폴백(Fallback) 처리를 구현.
- 방어적 데이터 파싱: 각 컴포넌트 진입 단계에서 데이터 존재 여부를 체크하는 옵셔널 체이닝(?.)과 조건부 렌더링을 강화하여, 특정 데이터가 없어도 전체 레이아웃이 무너지지 않도록 방어적인 구조를 설계.
- 결과
- 외부 데이터의 가용 상태와 관계없이 일관된 시각적 UI를 유지할 수 있게 되었으며, 서비스의 전반적인 신뢰도를 높임.
- 상황
- Vercel 배포 환경에서 메인 페이지 외의 특정 경로(예: /login, /record)로 직접 접속하거나 페이지를 새로고침할 때 브라우저에 404: NOT_FOUND 에러가 출력되는 현상 발생.
- 해결
- Rewrites 설정 적용: 프로젝트 루트 디렉토리에 vercel.json 파일을 생성하고, 모든 URL 요청을 애플리케이션의 진입점인 index.html로 리다이렉트하도록 rewrites 규칙을 설정함.
- 결과
- 사용자가 어떤 경로로 접속하더라도 끊김 없는 서비스를 이용할 수 있게 되었음.
- Issue를 생성
- develop 브랜치를 기준으로 개별 브랜치를 생성
- 기능 구현 완료 후 develop 브랜치로 Pull Request를 생성하여 리뷰를 요청
- 최소 1명 이상의 승인이 있어야 머지가 가능
커밋 메시지는 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 | 배포 |
PR 제목은 Gitmoji를 포함하여 작성.
- Format:
[Gitmoji] [Type] 제목 - Example:
✨ [Feat] 로그인 기능 구현
| Gitmoji | Type | 설명 |
|---|---|---|
| ✨ | Feat | 새로운 기능 추가 |
| 🐛 | Fix | 버그 수정 |
| 📝 | Docs | 문서 수정 |
| 🎨 | Style | 코드 스타일 수정 |
| 💄 | Design | 사용자 UI 디자인 수정 |
| ♻️ | Refactor | 코드 리팩토링 |
| 📦 | Chore | 빌드/설정 파일 수정 |
| 🎉 | Init | 프로젝트 초기 생성 |
| 🚚 | Rename | 파일 이동/이름 변경 |
| 🔥 | Remove | 파일 삭제 |
| 🚀 | Deploy | 배포 |
브랜치 이름은 해당 작업의 이슈 번호를 포함하여 생성.
- main: 배포용 최종 브랜치
- develop: 개발용 메인 브랜치
- feature: 기능 개발 브랜치 (
feat/#이슈번호-제목)- ex)
feat/#12-login
- ex)