[Project] MOVIE찾냥?! 후기

🚀  프로젝트에 대하여

< 프로젝트 개요 >

오픈 movie API를 활용한 영화 트레일러 사이트를 제작. [MOVIE찾냥?!]라는 웹사이트명과 컨셉은 팀원 모두 고양이를 좋아해서 쉽게 정해졌다.

◻ 오픈 API 사이트

Details

 

< 프로젝트 기간 >

2023년 3월 20일 ~ 2023년 3월 26일 ( 총 일주일 )

 

< 프로젝트 깃허브 >

GitHub - Frontend-TEAM1/React_Movie_Trailer_project: 리액트 _ 무비 트레일러 프로젝트 입니다.

 

< 프로젝트 배포 사이트 >

MOVIE 찾냥?!

 

< 팀원 소개 >

프론트엔드 개발자 5명과 함께 프로젝트를 진행.

 

< 협력 툴 >

vsCode 내에 prettier와 esLint, husky를 적용시켜 코드 컨벤션 적용.

 

---

메인 페이지

 

---

✨  사용 기술 스택

< MAIN >	< CSS >
JavaScript, React	styled-components, media-query(반응형)
< Library >
react-query, react-router, axios, swiper, mui, react-intersection-observer

---

< 요구사항 >

---

📖  페이지에 대하여

< 페이지 설명 >  (🎞표시는 직접 구현한 페이지)

• 메인 페이지 🎞
  • 인기순 top4 영화를 슬라이드로 표현
  • 각 필터링을 제공할 분류(상영순, 평점순, 개봉예정순)별 4개의 영화만 미리보기식으로 화면에 표현
• 검색 페이지 : 검색창에 키워드 입력시 연관된 모든 영화 리스트를 표현(한글/영어 둘다 검색 가능) 🎞
• 목록 페이지 : 선택한 분류 기준으로 필터링된 영화 리스트들을 무한 스크롤을 적용하여 표현
• 상세 페이지 : 선택한 영화의 세부 내용을 담은 페이지

---

< 시현 영상 >

메인 페이지   /   검색 페이지

목록 페이지   /   상세 페이지

---

💭  후기 및 회고

< 좋았던 점 >

🔹 웹페이지로 만들 아이템이 확실하니 기획 단계에서 모두 동의하는 tone & manner를 빨리 정할 수 있었다.

🔹 빠르게 진행되다 보니 집중이 더 잘 되었고, 빠른 시일 내에 완성해야하니 다음 회의 전까지 조금이라도 더 해가려고 바삐 움직였다.

🔹 처음으로 배포한 프로젝트였으며, 요구사항들을 고려하고 하나씩 충족해가며 개발해 본 값진 경험이었다.

 

< 아쉬웠던 점 >

🔸 단기간 목표로 인해 타협하는 부분이 있었다. (반응형이나 디테일한 디자인 등)

🔸 요구사항을 충족하는 기능 구현하느라 시간이 부족하여 요구사항 외 추가로 디테일을 살리지 못해서 아쉬웠다.

 

프로젝트를 진행하면서 가장 신경 쓴 부분은?
개발을 시작한지 얼마 안된 시점에 맞닥뜨린 2번째 소소한 팀 프로젝트이면서, 늘 토이 프로젝트만 하다가 처음으로 배포까지 하게 된 사이트이기도 하다. 따라서 일주일 만에 개발을 끝내자는 목표 하에 디자인 기획부터 기능 구현까지 해야했어서 스케줄링을 가장 많이 신경 썼다.