📺 Netflix Clone (Nomflix)

📝 프로젝트 소개

React와 TMDB API를 활용해 제작한 넷플릭스 클론 프로젝트입니다.
영화 정보 조회, 상세 페이지, 모달 기능 등을 구현하며 React 생태계와 프론트엔드 구조에 대한 이해를 높이고자 기획되었습니다.

🚀 주요 기능

• ✅ 현재 상영작, 인기 영화, 최고 평점 영화 리스트 (동일한 구조의 TV 페이지)
• ✅ 영화 클릭 시 상세 정보 모달
• ✅ 반응형 디자인
• ✅ URL 파라미터 기반 라우팅
• ✅ Framer Motion을 활용한 애니메이션 효과

🛠️ 사용 기술 스택

• React
• TypeScript
• Framer Motion
• React Router v6
• Styled Components
• TMDB API

📂 폴더 구조

루트 디렉토리

• build/
• node_modules/
• public/
• screenshots/
• src/
  • Api/
  • Components/
  • Hooks/
  • Routes/
  • App.tsx
  • index.tsx
  • motionVariants.ts
  • styled.d.ts
  • theme.ts
  • utils.ts
• .gitignore
• package-lock.json
• package.json
• README.md
• tsconfig.json

📸 주요 화면

메인 페이지	상세 모달

💡 구현 중 고민했던 점

• 상태 분리와 props 전달 구조 설계
• React rendering 최적화 고민
• Components 재사용 방안 고민
• useEffect의 의존성 배열 관리
• API 요청 후 캐시 or 상태 저장 구조 고민
• Framer Motion에서 exit animation 버그 해결

📈 프로젝트 결과 & 회고

• 컴포넌트 재사용성을 고려한 설계를 해보며 설계 경험 축적
• React Router v6 사용 경험 축적
• 클론 코딩에서 벗어나 나만의 구조와 기능 커스터마이징 시도
• 사용자 경험 최적화를 위한 고민 경험 축적

🔗 배포 링크

https://friendly-concha-3150b7.netlify.app/

📧 연락

궁금한 점이 있다면 언제든지 연락주세요!
Email: an010719@naver.com
GitHub: aidenkim9