[프로그래머스] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 2기

🎧 MeloDiary 🎧

MeloDiary는 매일 일기를 작성하며 그날의 기분을 음악과 이모지로 표현하고, 친구와 일기 및 음악 목록을 공유할 수 있는 웹 서비스입니다.

밖에서는 하지 못하는 이야기를 조심스럽게 나누어볼까요? 🤫

url : https://melodiary.site/

🖥️ 프로젝트 기능

📌 랜딩 페이지

회원가입 및 로그인

• 구글, 카카오, 네이버 계정을 이용하여 회원가입, 로그인 가능

랜딩 페이지
회원가입
로그인

📌 Home

사용자의 달력, 플레이리스트, 날짜에 해당하는 일기를 볼 수 있는 페이지

캘린더

• 월 간 이동 가능
• 일기를 쓴 날에는, 사용자가 설정한 이모지가 달력에 표시
• 아직 오지 않은 미래 날짜에는 회색 원으로 표시

일기

• 달력에 표시된 이모지 클릭 시, 오른쪽 화면에 일기 표시
• 확장 버튼을 통해 일기를 확장하여 전체 화면으로 보기 가능

친구

• 친구 프로필을 들어갔을 때에는 친구의 홈을 볼 수 있음
• 친구 신청 및 삭제를 할 수 있음

친구가 되어있을 때	친구 요청을 보냈을 때	친구가 안되어있을 때

홈
친구 홈

📌 Explore

MeloDiary에 게시된 <전체공개> 일기들을 무한 스크롤 형태로 확인하고 소통할 수 있는 페이지

• 각 다이어리는 요약된 형태로 제공 (클릭 시 해당 다이어리로 이동)
• 해당 다이어리로 들어가지 않아도 좋아요 누르기 가능
• 해당 다이어리에 있는 이미지로 스와이프로 넘겨보기 가능

전체공개 페이지

📌 Mates

자신의 친구 목록을 관리하고, 친구들의 활동을 확인할 수 있는 페이지

• 친구 요청 및 거절을 할 수 있음
• 친구 목록에서 프로필 클릭 시, 친구의 홈으로 이동

친구공개 페이지

📌 MyPage

사용자의 전체일기 목록, 기분 그래프, 플레이리스트, 닉네임 변경 및 회원탈퇴를 할 수 있는 페이지

전체일기 목록

• 사용자가 작성한 모든 일기 조회 가능
• page, limit를 이용한 무한 스크롤 (마지막 페이지에 데이터가 없다면 호출 중지)

기분 그래프

• 날짜 별 기분을 확인할 수 있는 그래프
• ApexCharts 라이브러리 사용

플레이리스트

• 일기에 사용한 음악 리스트
• <보러가기> 버튼을 누르면 해당 일기로 이동

환경설정

• 닉네임 변경 시 중복확인 필수
• 회원탈퇴 기능

전체일기 목록
기분 그래프
플레이리스트
환경설정(닉네임변경)
환경설정(회원탈퇴)

📄 BE 설계

시스템 아키텍처 다이어그램
데이터베이스 설계 ERD

🛠️ 기술 스택

📆 개발 기간

2024.07.29 - 2024.08.29

서비스 소개 보러가기

🎧 MeloDiary 구성원

🍀 Frontend

김가현	안예린	이다미
@gahyeon11	@yeah1832	@Dami-LEE00

🍀 Backend

고상민	김건우
@Dukkov	@GonnaWooh