Requirements

• 로그인 / 로그아웃

  • session을 활용한 로그인/로그아웃 구현
  • OAuth를 이용한 소셜 로그인(Kakao, Google, Facebook)
  • passport.js 를 이용한 인증 로직 간소화
  • 권한 부여(Authorization)에 따른 기능의 접근 제한 구현 (비로그인 상태에서 사용할 수 있는 기능 제한)
  • 페이지 이동 할 때 마다 세션 인증 및 계정 정보 불러오기(로그인 유지)
  • 로그인 모달 구현 및 이메일, 비밀번호 기입 시 유효성 검사
  • 로그인 모달에 회원가입 버튼 제공
  • 백엔드와 통신할 수 있도록 CORS 설정 허용

• 회원가입

  • 소셜 로그인 외 서비스 자체 회원가입 기능 제공
  • 회원정보 작성시 유효성 검사
  • 회원가입 완료시 메인페이지로 리다이렉트

• 마이페이지

  • 마이페이지를 통해 해당 계정이 작성한 글, 댓글, 북마크 조회기능
    • 조회된 글에 좋아요, 댓글, 북마크 기능 제공
    • 조회된 글, 댓글을 누르면 해당 페이지 이동
  • 사용자 개인정보 수정 기능 제공
    • 닉네임, 자기소개, 프로필 이미지 수정 기능 제공
      • 이미지는 multer를 이용한 이미지 업로드 및 저장
    • (소셜 로그인이 아닐 경우) 비밀번호 수정 기능 제공
  • 회원탈퇴 기능 구현
  • 회원 탈퇴나 리소스 삭제시 비밀번호 인증, 확인(confirm) 모달 제공

• 블로그, 뉴스, 핫딜 페이지

  • 헤더에 Home 버튼, 검색창, 프로필 이미지(로그인 시), 로그인 버튼 제공
    • 프로필 이미지 클릭시 옵션창 제공(마이페이지/로그아웃)
    • 검색 기능 제공
  • 블로그, 뉴스, 자유, 핫딜 게시판 제공
    • 블로그, 뉴스, 핫딜 게시글은 크롤링(puppeteer)를 통해 생성된 컨텐츠
      • 블로그, 뉴스, 핫딜 게시글 클릭 시 링크된 게시물로 이동
      • 블로그, 뉴스, 핫딜 게시글에 게시글 필터 기능 제공
      • 블로그, 뉴스는 페이지네이션, 핫딜은 인피니트 스크롤링 방식
      • 핫딜은 일정 스크롤 아래로 이동 시, 스크롤 탑 버튼 좌측 하단에 제공
      • 일정 주기로 크롤링, 게시글 업데이트
    • 자유 게시글은 게시글 마다 좋아요 버튼, 댓글 버튼, 북마크 버튼 제공
      • 좋아요, 북마크 추가/취소 기능
      • 댓글 버튼 클릭시 댓글 모달 제공 및 댓글 CRUD 기능 제공
      • 게시글 목록은 페이지네이션 방식

• 검색 페이지

  • 검색창에 키워드 입력 후 엔터 또는 돋보기 버튼 클릭시 검색 페이지로 이동, 검색결과 제공
  • 검색창에 키워드 입력시 Debounce Search 제공(0.5초 간격)
  • 검색 결과는 블로그, 뉴스, 자유, 핫딜 게시글 제공
  • 게시글 클릭 시 해당 페이지 이동

• 자유 게시글

  • 자유 게시글 추가, 수정, 삭제 기능 제공
  • 게시글 추가/수정 시 게시글 추가/수정 용 모달 제공
  • 제목, 내용, 이미지 추가 기능 제공
    • 제목 또는 내용이 없을경우 작성하지 못하도록 제한
    • 이미지는 multer를 이용한 이미지 첨부 및 저장
  • 게시글 클릭 시 게시글 페이지 이동
  • 게시글 페이지에서 게시글 내용과 댓글 목록 제공
  • 게시글 페이지에서 좋아요, 북마크, 뒤로가기, 글 삭제/수정, 댓글쓰기, 공유하기 버튼 제공
    • 댓글 쓰기 버튼은 클릭시 페이지 최하단에 있는 댓글 입력창으로 이동
    • 일정 스크롤 아래로 이동 시, 스크롤 탑 버튼 좌측 하단에 제공
    • 공유하기 버튼은 클릭 시 공유버튼을 담고 있는 모달 제공,
      • 페이스북, 트위터, URL복사, 카카오 공유 기능 제공
      • URL버튼 클릭 시 말풍선 UI로 URL 복사 되었음을 표시

• 댓글 기능

  • 댓글 목록 및 하단에 댓글 입력창 제공
  • 댓글, 대댓글에 대한 추가, 삭제, 수정 기능 제공
  • 들여쓰기, 배경색을 통해 댓글과 대댓글 구분
  • 대댓글 추가시 누구에게 단 대댓글인지 앞부분에 표시
  • 500자로 글자 수 제한
  • 입력창에 입력한 글의 줄 수가 늘어나면, 입력창의 높이를 줄 수 만큼 늘어나도록 구현
  • 게시글 목록에서는 댓글 버튼을 누르면 댓글 모달 제공, 댓글 모달을 통해 댓글 CRUD 기능 제공

• 좋아요 기능

  • 특정 게시글에 대한 좋아요 기능 제공
  • 좋아요 한 게시글은 버튼 색상 변경
  • 게시글 카드, 게시글 페이지에서 버튼 제공
  • 게시글 페이지에서 좋아요 개수 표시

• 북마크 기능

  • 특정 게시글에 대한 북마크 기능 제공
  • 좋아요 한 게시글은 버튼 색상 변경
  • 게시글 카드, 게시글 페이지에서 버튼 제공
  • 마이페이지에서 북마크한 게시물 조회 가능

• 배포

  • AWS EC2를 이용한 배포
  • nginx와 certbot을 이용한 https 적용
  • swagger.js 를 이용한 API 문서화

• etc

  • 비동기 요청시 로딩 표시
  • 오픈그래프, 트위터 카드 제공
  • 자주 사용하는 모달에 대해 위아래로 슬라이드 되는 애니메이션 구현
  • 뷰포트 너비 765px 이하에서 반응형 푸터 제공