Yeonda

당신의 마음을 연다.
연애 다이어리. 연다.

📎 연다 바로가기

💡 프로젝트 소개

기존의 SNS, 소개팅 어플에서 요구하는 사진, 동영상 등의 복잡한 미디어 대신
상대적으로 준비 난이도가 낮고 사람의 외양보다는 내면에 집중할 수 있는
텍스트 미디어인 일기를 활용한 웹 어플리케이션을 개발하고자 하였습니다.

"(마음을) 연 다(이어리)" 라는 캐치 프레이즈에서 출발한 이 프로젝트는
사용자의 선호도를 기반으로 다른 이용자들의 일기를 제공하고,
좋아요를 통해 매칭을 해주는 소개팅 서비스입니다.

🎬 프로젝트 진행상황

✔︎ 진행기간 : 2024.4.19 ~ 5.23

🛠 사용한 기술 스택

BackEnd

• Express
• Socket.io
• OpenAI
• JWT
• NodeMailer
• Joi
• aws-sdk/client-s3
• multer

FrontEnd

• React
• TypeScript
• Vite
• Tailwind CSS
• Axios
• Tanstack Query
• Socket.io
• React Hook Form
• Zustand
• Jest

🛠 주요 기능

✔︎ 튜토리얼

• 처음 접속하면 전체 서비스들에 대한 소개가 있는 튜토리얼 페이지로 이동합니다.
• 튜토리얼 페이지를 모두 확인하면 로그인 페이지로 이동합니다.

튜토리얼

✔︎ 로그인/회원가입/비밀번호 찾기

• Email 인증을 통해 회원가입/비밀번호 찾기를 수행할 수 있고, 계정정보 뿐만 아니라, 성별, 연령대, 거리 등 매칭 상대의 취향을 선택할 수 있습니다.
• 로그인시 Access-Token과 Refreash-Token으로 인증정보를 쿠키에 저장합니다.

로그인

회원가입

비밀번호 찾기

✔︎ 추천 일기 페이지

• 사용자가 선호하는 성별, 거리, 나이대를 가진 작성자가 작성한 일기를 랜덤으로 보여줍니다.
• 좋아요 버튼을 클릭 했을 때 화면은 반응하며 정보가 갱신됩니다
• X 버튼을 클릭하면 다른 일기를 보여줍니다
• 서로 좋아요 상태가 될 때도 알려줍니다
• 내부적으로 선택, 연산 작업 최적화가 되어 있습니다

Suggestion

✔︎ 인기 일기 페이지

• 기본적으로 최근 좋아요를 많이 받은 5개의 일기 목록을 보여줍니다
• 상단에는 사용자가 관심사로 설정한 태그들이 있습니다
• 이 태그들을 클릭하면 그 태그가 포함된 인기 일기 5개가 따로 보여집니다.

Popular

✔︎ 일기 작성 페이지

• 사용자는 제목과 내용 작성에만 집중할 수 있고
• 태깅은 Open AI 엠베딩과 데이터 베이스 내 태그 목록과 연계해 자동으로 이루어집니다

Write

✔︎ 내 일기 페이지

• tanstack/react-query에 useInfiniteQuery,
• 기본 Web intersection observer API를 사용해서 무한 스크롤을 구현했습니다.
• 최신 날짜순, 좋아요 많은 순 정렬 기능이 있습니다
• 추후 달력 버튼을 추가해서 날짜별로 조회하는 기능도 구현 예정입니다

MyDiary

✔︎ 일기 상세보기 페이지

• 조회, 수정, 삭제 등 기본적인 동작이 가능합니다
• 첫 작성시 자동 태깅되었던 태그들을 원하는 태그로도 다시 수정할 수 있습니다

DiaryDetail

✔︎ 채팅 페이지

• 채팅 페이지에서는 서로 연결된 사용자간 채팅이 가능합니다.

Chat

✔︎ Admin 페이지

• Admin 페이지에서는 이용자 분석, 통계를 확인하거나 태그 설정을 할 수 있습니다.

Admin

✔︎ Error 페이지

• 잘못된 주소로 접속을 요청하거나, 에러가 발생한 경우 에러 페이지로 이동시켜줍니다.

Error

📁 Directory Structure

BE

📦src
  ┣ 📂controllers	: 비즈니스 로직 컨트롤러
  ┣ 📂databases	: DAO
  ┣ 📂logs	: 로그 파일
  ┣ 📂middlewares	: 미들 웨어
  ┣ 📂models	: DB 테이블 타입 설정
  ┣ 📂routes	: 라우트
  ┣ 📂schemas  : 스키마
  ┣ 📂sockets	: 소켓
  ┣ 📂storage	: 저장소
  ┣ 📂tests	: Jest 통합 테스트
  ┣ 📂utils	: 유틸
  ┣ 📜app.ts	: Express/Socket.io 및 라우팅
  ┣ 📜db.ts	: DB 연결 싱글턴 객체
  ┣ 📜error.ts	: 에러 설정
  ┣ 📜index.ts  : 루트 파일 (서버 설정)
  ┗ 📜logger.ts : Logger 설정
┣ 📜jest.config.mjs	: Jest 설정
┣ 📜nodemon.json	: Dev 설정
┣📜eslint.config.mjs	: ESLint 설정
┣📜.eslintrc.js : ESLint 설정
┗📜.prettierrc  : Prettier 설정

FE

📦src
  ┣ 📂api		: rest api 호출
  ┣ 📂assets		: 이미지, 폰트 파일
  ┣ 📂components	: 컴포넌트
  ┣ 📂constants	        : 상수
  ┣ 📂hooks		: 커스텀 훅
  ┣ 📂layout 		: 레이아웃
  ┣ 📂mocks		: mock data
  ┣ 📂pages		: Route 관리
  ┣ 📂store		: 전역 상태 관리
  ┣ 📂test		: Jest 테스트
  ┣ 📂types		: Type관리
  ┣ 📂utils		: 날짜,숫자 등 유틸 함수
┣ 📜jest.config.js	: Jest 설정
┣ 📜tailwind.config.js	: Tailwind 설정
┣ 📜tsconfig.json	: TypeScript설정
┣ 📜vite.config.ts	: Vite설정
┣ 📜.eslintrc.cjs 	: ESLint 설정
┗ 📜.prettierrc :	: Prettier 설정

팀원

BE

박재현

이호성

FE

박병규

박상하

이종석

이창근