프로젝트 제목: Tree — 감정 기반 자기 성찰 다이어리 & 리포트 서비스
진행 기간: 2025년 4월 ~ 2025년 6월
프로젝트 목적: 사용자 일기를 바탕으로 월간 감정 리포트를 제공하여 자기 인식과 심리 건강 증진을 돕는 프론트엔드 중심의 서비스입니다.
본 프로젝트는 GDG(Google Developer Groups) on Campus 2025 솔루션 챌린지 참가를 위해 기획되었으며,
Google의 기술을 활용해 사회적 영향력을 줄 수 있는 솔루션을 목표로 개발되었습니다.
 노성원 |
 박준서 |
- Frontend: React + TypeScript
- UI Framework: TailwindCSS
- Charting: Recharts, Wordcloud.js
- Routing: React Router DOM
- State Management: React Hooks, Context
- Deployment: Vercel
- Node.js >= 23.11.0
- npm >= 10.9.2
- Vite >= 6.3.4
# 1. Clone the repository
git clone https://github.com/25SolutionChallenge-tree/FE_tree.git
cd FE_tree
# 2. Install dependencies
npm install
# 3. Run development server
npm run dev
| Package | Purpose |
|---|---|
swiper |
Week chart swipe interaction (슬라이드) |
recharts |
Weekly area chart (감정 흐름 시각화) |
tailwindcss |
Utility-first CSS framework (UI 스타일링) |
date-fns |
날짜 포맷 및 조작 유틸리티 |
wordcloud |
감정 키워드 워드클라우드 생성 (<canvas>) |
| 홈 | 감정 일기 작성 | 월간 기록 | 주간 기록 및 워드 클라우드 |
|---|---|---|---|
 |
 |
 |
 |
| 월간 리포트 상세 내용 |
|---|
 |
- 질문 기반 아침/점심/저녁 일기 작성 기능
- 주간/월간 레포트 시각화 제공
- 감정 키워드 워드클라우드 분석
- 월간 감정 변화 요약 및 리스크 분석
- 성격 유형 기반 추천 링크 제공
tree
├── apis/ # API 통신 및 타입 정의
│ ├── auth.ts
│ ├── auth.type.ts
│ ├── diary.ts
│ ├── diary.type.ts
│ ├── instance.ts
│ ├── user.ts
│ └── user.type.ts
├── assets/ # 이미지 및 정적 리소스
│ ├── images/ # 프로젝트 이미지 (아이콘, 로고, 트리 등)
│ └── react.svg
├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── ReportModal.tsx
│ ├── ReportMonthly.tsx
│ ├── ReportWeekly.tsx
│ └── WordCloud.tsx
│
├── layout/ # 레이아웃 컴포넌트
│ └── Layout.tsx
├── navigator/ # 네비게이션 UI
│ └── BottonNav.tsx
├── pages/ # 주요 페이지 라우트
│ ├── Home.tsx
│ ├── Login.tsx
│ ├── Mypage.tsx
│ └── Report.tsx
│
├── types/ # 커스텀 타입 선언
│ ├── swiper-css.d.ts
│ └── wordcloud.d.ts
├── utils/ # 유틸리티 함수
│ ├── extractWordFrequency.ts
│ └── getStartAndEndOfWeek.ts
│
├── App.tsx # 진입점 App 컴포넌트
├── index.css # 전역 스타일
├── main.tsx # 엔트리 포인트
└── vite-env.d.ts # Vite 환경 타입 정의
[User] → [React UI] → [Axios] → [Spring Boot API] → [Redis/MySQL/ChatGPT] ↔ [AI 기반 리포트 분석]