Epiday

감정상태에 따른 명언과 글귀들을 열람하고 공유하는 서비스를 제공하는 사이트입니다.

⭐ 배포 URL : https://ej-epiday.vercel.app/

---

• 기술 스택

• 폴더 구조

├── apis/               # API 관련 파일
├── app/                # 페이지 및 레이아웃
      ├──(afterLogin)   # 로그인 후 접근 가능 페이지
      ├──(beforeLogin)  # 로그인 전 접근 가능 페이지
├── assets/fonts        # 폰트
├── components/         # UI 컴포넌트
├── constant/           # 상수 정의 폴더
├── hooks/              # 커스텀 훅
├── public/             # 정적 파일 폴더 (이미지, favicon 등)
├── schema/             # zod 스키마
├── store/              # zustand 상태 관리 설정
├── styles/             # 글로벌css 및 캘린더 css
├── types/              # 타입 정의 폴더
├── utils/              # 유틸리티 함수
├── auth.ts             # auth.js 설정
└── middleware.ts       # 미들웨어 설정

• 주요 기능

  • next-auth, zod를 이용한 입력 데이터 유효성 검사 및 로그인/회원가입
  • 미들웨어를 활용하여 로그인 여부에 따라 페이지 접근 제한
  • react-hook-form을 활용하여 게시글 등록
  • 로컬스토리지를 활용한 최근 검색어
  • react-query 사용으로 데이터 캐싱
  • Infinite Queries를 활용한 무한스크롤
  • Optimistic Updates를 활용한 좋아요 기능
  • zustand를 통한 모달 컨텐츠 관리
  • react-calendar, chart.js 라이브러리를 통해 월 별 감정 컨텐츠 관리

• 스크린샷

  • 메인 랜딩 페이지

    

  • 로그인 후 메인 페이지

    • 오늘의 에피데이, 오늘의 감정 선택 및 확인 가능
    • 최신 게시글, 댓글 확인 가능
    

  • 피드 페이지

    • '더보기 버튼'으로 컨텐츠 제어
    • 사이드 네비게이션으로 최상단 이동 및 에피데이 생성페이지 이동
    

  • 검색 페이지

    • 검색 결과 데이터 무한스크롤
    • 최근 검색어 저장
    • 검색어 하이라이팅
    

  • 에피데이 상세페이지

    • 좋아요 기능
    • ULR 복사(공유)
    • 댓글 입력 / 무한스크롤
    

  • 마이페이지

    • 프로필 이미지, 닉네임 변경 가능
    • 오늘의 감정 선택
    • 월 별 감정 기록 캘린더 및 차트 확인
    • 내가 작성한 에피데이, 댓글 확인