• 왓챠 - 영화(/tv 프로그램/책) 리뷰 등록 후/ 다른 사람과도 공유 → 관리 : 필터 별점 별 / 이름 별
  1. 영화 API 데이터 불러오기 - The Movie Database https://developers.themoviedb.org/3/getting-started
  2. 검색 기능 / 필터
  3. 로그인(dummy data)
  4. 회원가입
  5. 라우팅
  6. /movies/:id 영화 상세 페이지 - 후기(별점) 작성( + 찜 버튼)

index (반응형?)

• 헤더 : 로고, 검색, 로그인, 회원가입
  • 검색 (form)
    • 정규표현식
    • 20개 찾으면 멈춤
      • 캐러셀 or 플렉스 박스
  • 로그인 / 회원가입
    • 클릭 시 모달
    • 로그인/회원가입 모달창 전환
    • 닉네임/이메일/비밀번호 validation (옵션)
    • 로그인 시
      • 로컬 스토리지에 userInfo: {'userEmail': '[email protected]', 'username': 'userNick'}
      • 댓글 작성 권한 부여
    • 로그아웃 시
      • 로컬 스토리지에서 userInfo 제거

https://pedia.watcha.com/ko-KR nav 만 제거

• 바디 : 박스오피스, 별점 순 캐러셀 (단방향 옵션)
  • 영화 포스터, 제목, 개봉 연도, 별점, 찜횟수 (옵션)
• 푸터 : 총 평가 수, 정보, 레퍼런스

/movies/:id (영화 상세)

• 아티클
  • 영화, 포스터, 제목
  • 평균 평점 / 평가 수 - get 이후 가공
  • 평점 (직접 제작)
    • 5점 만점
    • 온별
    • 호버 → 채워나가는 식
    • 클릭 시 제출 - post
    • 다시 클릭 시 수정 - get 이후 이미 평점 데이터가 있을 경우 patch
    • 같은 점수 클릭 시 삭제 - delete (옵션)
    • 시각화 그래프 (옵션)
• 섹션

  • 내 리뷰

    • 닉네임: 코멘트 삭제 / 수정 버튼
    • 내 댓글이 있을 경우 display: none 제거 + 코멘트 추가 버튼 비활성화
    • 삭제 / 수정 (모달)

  • 영화 기본정보 (몇 자 이상 '...' 으로 생략)

  • 출연(6명) / 제작 (옵션)

  • 댓글 (캐러셀)

    → 데이터 한 번에 로드 - get

    → 시간이 있으면 댓글 상세 페이지 - get

    • 클릭 시 상세 페이지 (옵션)

fetch 사용하기

/mypage

• 평점 리스트
  • 포스터, 제목, 내 별점
  • 영화 클릭 시 영화 상세 페이지 이동 /movies/:id
• 개인 후기(욕설 필터), 찜 (옵션)

1. 서버 api 구현
2. fetch
3. movie api 연동
4. users, movies, reviews, rates crud (state 관리)
5. 레이아웃 (html, css) (SPA) → history로 Router 구현
   • 전체를 <div id="app"></div> 안에 구현 (확장성)
   • render 는 section 만 구현한다.
6. 기능들~~~ dom 조작

<aside> 💡 SPA 공부하기 git stash, conflict 해결법 공부하기 각자 맡은 레이아웃 html, css(BEM) 로 만들어오기 (선택)

</aside>