Skip to content

seoulcircle/Koflix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Netflix Clone

📌 프로젝트 소개

아직 개발중..

이 프로젝트는 Netflix 클론코딩으로, React와 TypeScript를 사용하여 Netflix의 UI와 기능을 재현하는 프로젝트입니다. 애니메이션 효과를 위해 Framer Motion을 활용하였으며, 상태 관리를 위해 Zustand를 사용하였습니다.

🛠 사용 기술

  • React: 컴포넌트 기반 UI 개발
  • TypeScript: 정적 타입을 적용하여 안정적인 코드 작성
  • Framer Motion: 애니메이션 및 인터랙션 구현
  • Zustand: 경량 상태 관리 라이브러리

📂 폴더 구조

📦 netflix-clone
├── 📁 src
│   ├── 📁 components    # 재사용 가능한 UI 컴포넌트
│   ├── 📁 pages         # 페이지 단위 컴포넌트
│   ├── 📁 hooks         # 커스텀 훅 모음
│   ├── 📁 stores        # Zustand 상태 관리 스토어
│   ├── 📁 styles        # 스타일 파일
│   ├── 📁 utils         # 유틸리티 함수
│   ├── App.tsx         # 메인 앱 컴포넌트
│   ├── index.tsx       # React 렌더링 시작점
├── package.json
├── tsconfig.json
├── README.md

🚀 설치 및 실행

  1. 프로젝트 클론
    git clone https://github.com/your-repo/netflix-clone.git
    cd netflix-clone
  2. 패키지 설치
    npm install
  3. 개발 서버 실행
    npm start
  4. 웹 브라우저에서 확인
    http://localhost:3000
    

🎬 주요 기능

  • 메인 페이지: 인기 영화 및 TV 프로그램 목록 표시
  • 검색 기능: 영화 및 TV 프로그램 검색
  • 애니메이션 효과: Framer Motion을 활용한 자연스러운 UI 전환
  • 상태 관리: Zustand를 사용하여 전역 상태 관리
  • 반응형 디자인: 다양한 화면 크기에 대응하는 UI

📜 라이선스

이 프로젝트는 MIT 라이선스를 따릅니다.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published