[Next.js][프로젝트] 💚Color Inside (4) - 프로젝트 MVP 구현

💚 배포 링크

🍒 프로젝트 소개

• 프로젝트 명: Color Inside
• 한 줄 설명: 감정을 색으로 표현하고 일상을 기록하는 다이어리 어플리케이션
• 기획의도: 바쁜 일상 속에서 자신을 돌아볼 시간을 가지기 어려운 사용자들에게, 감정과 일상을 색으로 시각화하여 자아성찰을 돕고 자신을 객관적으로 이해할 수 있도록 지원

🍀 화면 구성 및 주요 기능

1. 메인 페이지

• 캘린더 형식과 카드 형식으로 감정 다이어리 리스트 조회
• 캘린더에서 색상이 없는 날짜 클릭하면 해당 날짜 다이어리 작성 페이지로 이동
• 색상이 있는 날짜 클릭하면 조회 페이지로 이동
• 미래 날짜의 다이어리는 작성 불가능
• 비회원은 다이어리 2개까지 작성 가능
• Header에서 배경음악 on/off 기능 제공
• '나의 감정 확인하기' 버튼을 통해 감정 테스트 페이지로 이동 가능

캘린더 형식	카드 형식

2. 다이어리 작성/수정 페이지

• 감정 다이어리 작성/수정 기능 제공
• 기본 제공 팔레트의 색상을 선택하여도 되고, 사용자가 커스텀으로 색상을 선택하는 것도 가능
• 태그 입력창에 #00 형식으로 감정 키워드 입력 후 Enter를 통해 감정 태그 작성
• 간단한 일기와 함께 이미지 추가도 가능
• 사용자가 오늘의 감정을 파악하기 힘든 경우, '나의 감정 확인하기' 버튼을 통해 감정 테스트 페이지로 이동시켜 감정 테스트 진행

작성 페이지

3. 다이어리 조회 페이지

• 다이어리 내용 표시
• 다이어리 작성 시 선택했던 오늘의 색상이 일기 조회 페이지의 배경색으로 표시
• 수정하기/삭제하기 버튼을 통해 수정/삭제 기능 제공
• 사용자는 본인이 작성한 일기만 조회 가능

조회 페이지 (이미지O)	조회 페이지 (이미지 X)

4. 로그인/회원가입 페이지

• supabase authentication 활용
• 회원가입 시 이메일, 닉네임, 비밀번호, 이용약관 동의 필요

로그인 페이지	회원가입 모달

5. 마이 페이지

• 내 정보 표시 (닉네임, 프로필 이미지)
• 내 정보 수정 기능 제공 (닉네임, 프로필 이미지)

비회원 마이페이지	회원 마이페이지

6. 통계 페이지

• 달별 감정 다이어리 내용 통계 표시
• 달별 다이어리 작성 시 사용한 감정 색상을 파이차트를 이용하여 표시
• 달별 다이어리 작성 시 많이 사용한 감정 태그 TOP3를 표시
• 명언 API를 이용해 랜덤으로 명언 화면에 표시
• 비회원은 조회할 수 없는 페이지

통계 페이지

7. 감정 테스트 페이지

• 사용자가 오늘 하루 감정을 알아볼 수 있도록 도움을 제공하는 페이지
• 감정 파악을 위한 6가지 질문 제공
• 감정 테스트 결과 페이지에서 바로 일기 작성 페이지로 이동 가능
• 감정 테스트 결과를 카카오톡이나 링크를 통해 공유하는 기능 제공

테스트 시작 화면	테스트 화면

테스트 결과 화면