•
왓챠 - 영화(/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': 'test1@test.com', '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 조작
SPA 공부하기
git stash, conflict 해결법 공부하기
각자 맡은 레이아웃 html, css(BEM) 로 만들어오기 (선택)
월
•
레이아웃 완성
•
api 적용 (api 문서 만들기) put reviews / >
•
서버 적용
•
캐러셀
화
•
fetch
•
state 관리 (func jsDoc)
수
•
각각 기능들~
서버에 데이터가 있다
클라이언트에도 store에 데이터가 있다.
리뷰 등록시
1. 데이터를 바로 서버에 보낸다.
2. 서버에서 받은 데이터를 store에 set
•
3시간
•
내일(토) 한시~네시
