Code Monkey home page Code Monkey logo

movie-wiki's Introduction

Movie-Wiki

개요

TMDB API 기반 영화 추천/검색 웹 서비스로 사용자에게 쉽고 빠르게 원하는 영화에 대한 상세정보를 제공함으로써 편의성을 극대화 시킬 수 있는 서비스입니다.

  • 인기 영화/검색/장르별 영화 검색 기능 등의 다양한 검색 방법을 통해 사용자에게 편의성을 제공합니다.

기술 스택

Html CSS JavaScript React Styled-
Components
tailwindCSS react-star-
rating
Redux-ToolKit
Html
CSS
js
icon
styled-components icon
tailwindcss
icon

개발 환경 세팅

npm install
npm start

팀원

1팀 2팀
김민재 김준표
김영웅 김태우
황찬우 류지수

기능 목록

무비 카드

  • 무비카드에 Hover 시 줄거리를 보여줍니다.

영화 상세보기

무비모달

  • 무비 카드를 눌렀을 때, 영화에 대한 상세 정보 모달을 보여줍니다.
  • 모달 외부를 누르거나 닫기 버튼을 눌렀을 때, 종료됩니다.

무한스크롤

무한스크롤1

  • 00개씩 가져오기/스크롤이 끝에 다다를 경우 00개를 더 가져와서 화면에 보여줍니다.
  • 더 이상 불러올 데이터가 없을때 데이터가 없음을 보여줍니다.

캐러셀(메인 페이지)

캐러셀

  • 자동으로 특정 주기마다 다음 콘텐츠를 보여줍니다.

마우스 드래그 (메인 페이지)

마우스 드래그

  • 주제별 무비카드를 10개까지 보여줍니다.
  • 특정 영역에서 마우스 드래그 시 구간을 이동할 수 있습니다.

영화 검색

검색

  • 검색한 키워드가 포함된 영화를 보여줍니다.
  • 검색한 키워드와 비슷한 추천 영화들을 무한스크롤로 보여줍니다.

카테고리 검색

카테고리

  • 카테고리(장르)별 영화를 보여줍니다.
  • 장르에 포함되는 영화가 없다면 영화를 찾을수 없다는 메세지를 보여줍니다.

회고

movie-wiki's People

Contributors

r-jisu avatar kimjunpyo avatar taewookim-sch avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.