[프로젝트2] 영화검색 사이트 업그레이드

두번째 팀프로젝트

기존의 TMDB 구현 한 것을 조금더 업그레이드해서 만드는 거였다.
와 정말 감사하게도 이번에 팀장으로 뽑아주셔서 열심히 해야겠다고 생각했다.
영화진흥위원회 API와 기존의 TMDB중 택1 해도 되고, 둘다 해도 된다고 했었다.
일단 주어진 시간은 월요일 13시까지라서 TMDB로 하기로 했다.

팀 내 결정한 사항들

1. TMDB로 정함
2. 기본 베이스 모델은 내가 만든 것을 추천해주셔서 베이스가 되었다.
3. 역할을 나눔
   상세페이지 윗 부분과 메인페이지 이동하는 상단은 광희님과 홍상님이 하시고
   상세페이지의 아랫부분인 영화리뷰 관련한 하단은 나랑 명섭님이랑 지예님이 맡아서 하기로 했다.
4. 페이지 분리 코딩
   일단 상단과 하단을 각각 detail.html과 review.html로 각각 분리해서 작성하고
   나중에 합치기로 했다. 물론 css도 일단 따로 적기로 했다.

디자인은 내가 찾았는데 이걸 이쁘다 해주셔서 기뻤다 :]
[티빙 디자인 _ 상단 디자인]

[위키피디아 _ 하단 디자인]

[위키피디아 _ 리뷰 디자인]

오늘 직접 한 것

1. 리뷰를 작성하는 모달창 html css 구조 짜기
   html과 css로 구현하는 것은 재밌다.
   상상하는 대로 구성하는 재미랄까.
   물론 중요한 JS부터는 조금 덜덜덜 이지만 'ㅅ'..

명섭님이랑 지예님은 아래 리뷰 UI를 구성하셨는데 짱 멋져보였다.
그리드라... 부트스트랩 그리드로 조금 해본적이 있긴하지만 역시 조금 어려운 부분이랄까, 열심히 해야지!

2. 닫기버튼 누르면 닫기하기

document
  .querySelector(".review_btn_close")
  .addEventListener("click", function () {
    document.querySelector(".review_input_box").style.display = "none";
  });

☞ 간단하게 display로 구현함. 이제 이건 너무 쉬움.

3. 별 rating 구현
   지예님이 찾아주셨다.
   (링크 : https://velog.io/@hsecode/%EB%B3%84%EC%A0%90-%EB%A7%8C%EB%93%A4%EA%B8%B0)
   그걸 토대로 조금씩 고침. 라디오버튼이던데 이미지가 초록색이였는데 입맛에 맞게 일단 핑크색으로 바꿈.

중간중간에 width와 height를 바꿨어야했지만 그래도 이정도면 무난하게 된 듯

4. 검은배경 누르면 닫기 구현
   X 버튼 뿐만이 아니라 어두운 배경을 클릭하면 닫기가 되도록 했다.
   지난번 공부했던 부분이 쓰여서 신기했다.

document
  .querySelector(".review_input_box")
  .addEventListener("click", function (e) {
    if (e.target == document.querySelector(".review_input_box")) {
      document.querySelector(".review_input_box").style.display = "none";
    }
  });

깃 특강 듣기

오늘 git 협업 관련해서 강의를 들음.
pull request에 대한 부분은 신선했다.

오늘의 한줄평 : 재미있는 웹.. 열심히 해야지!!