에피그램
에피그램은 명언을 공유하고 사람들과 댓글로 소통하며, 나의 감정을 기록하고 통계로 시각화하여 감정 변화를 한눈에 확인할 수 있는 커뮤니티 플랫폼입니다.
에피그램 프로젝트 시연영상
default.mov
에피그램은 감동적인 명언을 통해 사람들의 감정을 공유하고, 서로의 경험을 나누는 소통 플랫폼입니다.
또한, 에피그램은 사용자가 자신의 감정을 기록하고, 이를 통계로 시각화하여 감정 변화를 한눈에 확인할 수 있는 기능을 제공합니다. 감정의 변화를 기록하면서 자신의 마음 상태를 되돌아보고, 성장 과정을 추적할 수 있는 기회를 제공합니다.
에피그램에서 제공하는 주요 기능들
- 💬 명언 공유 및 댓글 소통 기능
- 📝 감정 기록 및 일일 감정 입력
- 📊 감정 통계 시각화
- 📚 명언과 태그 추가 가능 및 검색 기능 제공
- 🔒 개인 로그인 제공 및 소셜 로그인 (카카오, 구글 지원)
에피그램 프로젝트 스크린샷
| 렌딩페이지 | 메인 | 네비게이션 | 검색 결과 |
 |
 |
 |
 |
| 피드 | 에피그램 상세 | 에피그램 작성 | 삭제하기 모달 |
 |
 |
 |
 |
| 로그인 | 회원가입 | 마이페이지 | 프로필수정 모달 |
 |
 |
 |
 |
사용된 기술 스택
|
|
|
|
| Next.js | TypeScript | Tailwind | NextAuth |
|
|
|
|
| React Hook Form | Zod | Chart.js | Tanstack Query |
|
|
|
| Storybook | Jest | Cypress |
|
|
|
| Figma | Notion | Discord |
프로젝트의 폴더 구조와 명명 규칙에 대해 설명합니다.
📦 src
┣ 📂 app
┃ ┣ 📂 mypage
┃ ┃ ┣ 📂 _components
┃ ┃ ┃ ┗ 📄 Profile.tsx
┃ ┃ ┗ 📄 page.tsx
┣ 📂 components
┣ 📂 hooks
┣ 📂 assets
┣ 📂 types
┣ 📂 utils
┣ 📂 apis
┣ 📂 constants
┗ 📂 contexts$ git clone https://github.com/kss761036/Epigram
$ cd Epigram
$ nvm use 22.14.0
$ npm install
$ npm run dev
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 iOS Safari |
|---|---|---|---|---|
| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
팀원과 각자의 역활입니다.
|
|
|
|
|
| 김승석 | 김찬기 | 이민서 | 이석찬 |
| 팀장 | 팀원 | 팀원 | 팀원 |
김승석
- 프로젝트 팀장
- 프로젝트 셋팅 및 배포 설정
- 공용 컴포넌트 작업
김찬기
- 프로젝트 팀원
- 공용 컴포넌트 작업
이민서
- 프로젝트 팀원
- 공용 컴포넌트 작업
이석찬
- 프로젝트 팀원
- 공용 컴포넌트 작업