feat: 영화 댓글 작성하기 기능 구현

[1eeyerin]

🍎 Issue Ticket

close #3

🍎 UI 구현 이미지

• 클릭하여 별점 부여하기
• 댓글 개행 가능
• 최대 글자수 제한
• 유효성 검사

🍎 localStorage 에 comments 객체 배열 추가

const comments = [
	{movieId: '1234', results: [{rate, comment, name, thumbnail}]},
	{movieId: '1234', results: [{rate, comment, name, thumbnail}]},
	{movieId: '1234', results: [{rate, comment, name, thumbnail}]},
	{movieId: '1234', results: [{rate, comment, name, thumbnail}]}
];

🚨 공용 함수 추가 🚨

js/utils/localStorage.js

• localStorage getItem, setItem 함수 입니다.

js/utils/getUrlParamValue.js

• 현재 주소 중 쿼리스트링에서 특정 값을 찾아서 value를 return 합니다.

🍎 Structure

js/
└── review/
    ├── index.js
    ├── utils.js
    ├── reviewForm/
    │   └── reviewFormSubmitHandler.js
    │   └── isValidReviewValues.js
    │   └── addReviewToLocalStorage.js
    │   └── reviewRatingClickHandler.js
    ├── reviewList/
    │   └── getMovieReviews.js
    │   └── renderMovieReviews.js

js/review/index.js

• review.html과 연결된 js file 입니다.
• review와 관련된 모든 함수를 호출합니다.

js/review/utils.js

• 자주 사용될 수 있는 공용함수들이 모여있는 js file 입니다.

js/review/reviewList/getMovieReviews.js

• 쿼리스트링에 달린 movie_id 값을 기준으로 해당 영화의 review 데이터를 가져오는 함수입니다.
• 영화에 달린 댓글이 존재하지 않으면, 기본 값으로 빈 배열을 return 합니다.

js/review/reviewList/renderMovieReviews.js

• 인자값으로 영화 댓글 배열을 받습니다.
• 상황에 맞는 요소들을 innerHtml로 넣습니다.
  • 댓글이 없을때는 댓글 작성 유도 멘트 UI를 노출하도록 하였습니다.
  • 댓글이 있으면 댓글 UI를 노출하도록 하였습니다.

js/review/reviewForm/isValidReviewValues.js

• 유효성을 검사합니다. 모든 항목은 필수 항목이며, alert도 띄워줍니다.

js/review/reviewForm/reviewFormSubmitHandler.js

• form에서 submit이 일어나는 경우의 eventHandler입니다.

js/review/reviewForm/addReviewToLocalStorage.js

• 작성한 form values를 localstorage에 넣는 함수입니다.

js/review/reviewForm/reviewRatingClickHandler.js

• 별점을 수집하는 UI에서 별을 클릭하면 수집할 수 있도록 하는 eventHandler입니다.

[LeLu815]

잘 봤습니다

[LeLu815]

큰 문제는 없어보입니다

[Ahnjonghyun87]

lgtm

[yeeunseo-dev]

깔끔하게 잘 정리하셔서 보기 편했습니다! 수고하셨습니다
LGTM