첫 개인과제였던 영화 검색 사이트 구현을 바탕으로 새로운 상세페이지와 댓글창을 만드는 첫 팀프로젝트가 시작되었다. 초창기에 정보가 많이 부족하기도 했고 아웃라인을 어떻게 정하면 좋을지 몰라서 많이들 헤메였다.
피그마를 활용하여서 팀기획을 했었고 (사용법을 익히는 데 시간을 많이 투자했지만 매우 편리했음) 기본적인 구현만 신경쓰기로 했기에 다른 팀들에 비해 많이 빈약해보이기도 했다. 내 담당은 api를 가져와서 홈페이지에 뿌리기까지 였으나 개인 과제물에서 가져왔었기에 특별히 구현한 부분은 없었다. 오히려 css에 눈을 돌리게 되었음... 필수요구사항과 선택요구사항은 아래와 같다.
필수요구사항
[1] TMDB 또는 영화진흥위원회 오픈 API 이용(택 1 또는 중복 사용)
[2] 영화정보 상세 페이지 구현
- 기존 영화정보 카드 리스트에서 특정 item을 선택할 시, 상세 페이지로 이동하도록 구현합니다.
- 상세 페이지에서 메인 페이지(홈)로 이동하는 UI도 함께 구성합니다.
[3] 상세 페이지 영화 리뷰 작성 기능 구현
- 상세페이지에서 특정 영화에 대해 의견을 작성할 수 있는 UI를 구현합니다.
- 작성자, 리뷰, 확인비밀번호를 입력하도록 구현합니다. - 작성한 정보는 브라우저의 localStorage에 적재하도록 합니다.
[4] github PR(=Pull Request) 사용한 협업
[5] UX를 고려한 validation check
- 영화 검색 시
- 댓글 작성 시
- 추가 기능 구현 시 반드시 삽입
선택요구사항
[1]CSS
- flex 사용하기
- grid 사용하기
- 반응형 UI 구성하기
[2]상세페이지 리뷰 수정 및 삭제 기능 구현
[3]메인 페이지
- 조건에 맞는 카드 리스트 정렬 기능(이름순, 별점순 등 자유롭게)
[4]위에서 설명하지 않은 기타 외부 Api
다시금 살펴보니 필수요구사항도 충족되지 않은게 많이 있다. 상세페이지에서 홈으로 이동하는 것이나, 검색창이 작동하지 않는다는 점(기존에 있던 기능인데 어째서인지 작동하지 않음), validation check 등등.. 또한 영화 상세정보를 api에서 불러오는 함수가 undefined로 뜨는 이유를 여전히 찾지 못했다. api의 정보를 localStorage에 담아 불러오기를 하려 했던게 화근이었던 것 같다..
가장 발목을 크게 잡았던 문제점이라면 아무래도 깃허브를 이용한 협업과정이었다. 사용방법이 익숙치 않아 conflict에 대한 우려로 인해 git pull과 push가 원활하지 않았고 때문에 서로 소통하고 문제를 발견 및 해결하는 데 있어 협업이라고 하기 뭐할 정도였다. 그럼에도 자기 맡은 바 다들 책임감이 강한 탓에 욕심을 내어 자기주도적으로 이끌어가려 했었던 것 같다. 물론 마지막에는 미루었던 merge를 하였으나 충돌이 매우 심해 해결하는 시간 또한 많이 잡아먹었다. 다시는 이런 일이 없도록 깃헙 룰을 정하고 소통을 아끼지 말도록 해야겠다.
