You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
사용자가 선호하는 성별, 거리, 나이대를 가진 작성자가 작성한 일기를 랜덤으로 보여줍니다.
좋아요 버튼을 클릭 했을 때 화면은 반응하며 정보가 갱신됩니다
X 버튼을 클릭하면 다른 일기를 보여줍니다
서로 좋아요 상태가 될 때도 알려줍니다
내부적으로 선택, 연산 작업 최적화가 되어 있습니다
Suggestion
✔︎ 인기 일기 페이지
기본적으로 최근 좋아요를 많이 받은 5개의 일기 목록을 보여줍니다
상단에는 사용자가 관심사로 설정한 태그들이 있습니다
이 태그들을 클릭하면 그 태그가 포함된 인기 일기 5개가 따로 보여집니다.
Popular
✔︎ 일기 작성 페이지
사용자는 제목과 내용 작성에만 집중할 수 있고
태깅은 Open AI 엠베딩과 데이터 베이스 내 태그 목록과 연계해 자동으로 이루어집니다
Write
✔︎ 내 일기 페이지
tanstack/react-query에 useInfiniteQuery,
기본 Web intersection observer API를 사용해서 무한 스크롤을 구현했습니다.
최신 날짜순, 좋아요 많은 순 정렬 기능이 있습니다
추후 달력 버튼을 추가해서 날짜별로 조회하는 기능도 구현 예정입니다
MyDiary
✔︎ 일기 상세보기 페이지
조회, 수정, 삭제 등 기본적인 동작이 가능합니다
첫 작성시 자동 태깅되었던 태그들을
자신이 원하는 태그로도 수정할 수 있습니다
DiaryDetail
✔︎ 채팅 페이지
채팅 페이지에서는 서로 연결된 사용자간 채팅이 가능합니다.
Chat
✔︎ 마이 페이지
현재 유저의 성별, 프로필, 주소, 닉네임, 선호 취향을 보여줍니다.
MyPage
✔︎ 세팅 페이지
유저의 주소, 프로필 사진 변경 가능
로그아웃, 회원탈퇴 가능
상대방의 연령대, 거리, 성별 선택 가능
본인이 선호하는 취향의 일기를 탐색하기 위해 태그 최대 5개까지 설정 가능
SettingPage
✔︎ 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 설정
