Kdt5 lee chang hwi_6조

README.md

@@ -3,6 +3,10 @@
 주어진 API를 활용해 '[완성 예시](https://stupefied-hodgkin-d9d350.netlify.app/)' 처럼 자유롭게 영화 검색 기능을 구현해보세요!  
 과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
 
+#
+
+완성주소 링크: https://hwi-moviesearch.netlify.app/
+
 ## 과제 수행 및 제출 방법
 
 ```
@@ -22,26 +26,26 @@ KDT기수번호_이름  |  E.g, KDT0_ParkYoungWoong
 
 ## 요구사항
 
-필수 요구사항은 꼭 달성해야 하는 목표로, 수정/삭제는 불가하고 추가는 가능합니다.    
+필수 요구사항은 꼭 달성해야 하는 목표로, 수정/삭제는 불가하고 추가는 가능합니다.  
 선택 요구사항은 단순 예시로, 자유롭게 추가/수정/삭제해서 구현해보세요.  
-각 요구사항은 달성 후 마크다운에서 `- [x]`로 표시하세요.  
+각 요구사항은 달성 후 마크다운에서 `- [x]`로 표시하세요.
 
 ### ❗ 필수
 
-- [ ] 영화 제목으로 검색이 가능해야 합니다!
-- [ ] 검색된 결과의 영화 목록이 출력돼야 합니다!
-- [ ] 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있어야 합니다!
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- [x] 영화 제목으로 검색이 가능해야 합니다!
+- [x] 검색된 결과의 영화 목록이 출력돼야 합니다!
+- [x] 단일 영화의 상세정보(제목, 개봉연도, 평점, 장르, 감독, 배우, 줄거리, 포스터 등)를 볼 수 있어야 합니다!
+- [x] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
 ### ❔ 선택
 
-- [ ] 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보세요.
-- [ ] 영화 개봉연도로 검색할 수 있도록 만들어보세요.
-- [ ] 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
+- [x] 한 번의 검색으로 영화 목록이 20개 이상 검색되도록 만들어보세요.
+- [x] 영화 개봉연도로 검색할 수 있도록 만들어보세요.
+- [x] 영화 목록을 검색하는 동안 로딩 애니메이션이 보이도록 만들어보세요.
 - [ ] 무한 스크롤 기능을 추가해서 추가 영화 목록을 볼 수 있도록 만들어보세요.
-- [ ] 영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
-- [ ] 영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- [ ] 영화 상세정보 포스터를 고해상도로 출력해보세요. (실시간 이미지 리사이징)
+- [x] 영화 포스터가 없을 경우 대체 이미지를 출력하도록 만들어보세요.
+- [x] 영화 상세정보가 출력되기 전에 로딩 애니메이션이 보이도록 만들어보세요.
+- [x] 영화 상세정보 포스터를 고해상도로 출력해보세요. (실시간 이미지 리사이징)
 - [ ] 차별화가 가능하도록 프로젝트를 최대한 예쁘게 만들어보세요.
 - [ ] 영화와 관련된 기타 기능도 고려해보세요.
 
@@ -53,35 +57,35 @@ curl https://omdbapi.com/?apikey=7035c60c
 ```
 
 ## 영화 목록 검색
- 
+
 영화 목록은 한 번에 최대 10개까지 검색할 수 있습니다.
 
-파라미터 | 설명                   | 기본값
----|----------------------|---
-`s` | 검색할 영화 제목(필수!)       | -
-`y` | 검색할 개봉연도, 빈 값은 전체 검색 | - 
-`page` | 검색할 페이지 번호           | `1`
+| 파라미터 | 설명                               | 기본값 |
+| -------- | ---------------------------------- | ------ |
+| `s`      | 검색할 영화 제목(필수!)            | -      |
+| `y`      | 검색할 개봉연도, 빈 값은 전체 검색 | -      |
+| `page`   | 검색할 페이지 번호                 | `1`    |
 
 요청 코드 예시:
 
 ```js
-async function getMovies(title, year = '', page = 1) {
-  const s = `&s=${title}`
-  const y = `&y=${year}`
-  const p = `&page=${page}`
+async function getMovies(title, year = "", page = 1) {
+  const s = `&s=${title}`;
+  const y = `&y=${year}`;
+  const p = `&page=${page}`;
   try {
-    const res = await fetch(`https://omdbapi.com/?apikey=7035c60c${s}${y}${p}`)
-    const json = await res.json()
-    if (json.Response === 'True') {
-      const { Search: movies, totalResults } = json
+    const res = await fetch(`https://omdbapi.com/?apikey=7035c60c${s}${y}${p}`);
+    const json = await res.json();
+    if (json.Response === "True") {
+      const { Search: movies, totalResults } = json;
       return {
         movies,
-        totalResults
-      }
+        totalResults,
+      };
     }
-    return json.Error
+    return json.Error;
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
 }
 ```
@@ -90,16 +94,16 @@ async function getMovies(title, year = '', page = 1) {
 
 ```ts
 interface ResponseValue {
-  Search: Movie[] // 검색된 영화 목록, 최대 10개
-  totalResults: string // 검색된 영화 개수
-  Response: 'True' | 'False' // 요청 성공 여부
+  Search: Movie[]; // 검색된 영화 목록, 최대 10개
+  totalResults: string; // 검색된 영화 개수
+  Response: "True" | "False"; // 요청 성공 여부
 }
 interface Movie {
-  Title: string // 영화 제목
-  Year: string // 영화 개봉연도
-  imdbID: string // 영화 고유 ID
-  Type: string // 영화 타입
-  Poster: string // 영화 포스터 이미지 URL
+  Title: string; // 영화 제목
+  Year: string; // 영화 개봉연도
+  imdbID: string; // 영화 고유 ID
+  Type: string; // 영화 타입
+  Poster: string; // 영화 포스터 이미지 URL
 }
 ```
 
@@ -130,57 +134,60 @@ interface Movie {
 
 단일 영화의 상제정보를 검색합니다.
 
-파라미터 | 설명 | 기본값
----|---|---
-`i` | 검색할 영화 ID(필수!) |
-`plot` | 줄거리 길이 | `short`
+| 파라미터 | 설명                  | 기본값  |
+| -------- | --------------------- | ------- |
+| `i`      | 검색할 영화 ID(필수!) |
+| `plot`   | 줄거리 길이           | `short` |
 
 요청 코드 예시:
 
 ```js
 async function getMovie(id) {
-  const res = await fetch(`https://omdbapi.com/?apikey=7035c60c&i=${id}&plot=full`)
-  const json = await res.json()
-  if (json.Response === 'True') {
-    return json
+  const res = await fetch(
+    `https://omdbapi.com/?apikey=7035c60c&i=${id}&plot=full`
+  );
+  const json = await res.json();
+  if (json.Response === "True") {
+    return json;
   }
-  return json.Error
+  return json.Error;
 }
 ```
 
 응답 데이터 타입 및 예시:
 
 ```ts
 interface ResponseValue {
-  Title: string // 영화 제목
-  Year: string // 영화 개봉연도
-  Rated: string // 영화 등급
-  Released: string // 영화 개봉일
-  Runtime: string // 영화 상영시간
-  Genre: string // 영화 장르
-  Director: string // 영화 감독
-  Writer: string // 영화 작가
-  Actors: string // 영화 출연진
-  Plot: string // 영화 줄거리
-  Language: string // 영화 언어
-  Country: string // 영화 제작 국가
-  Awards: string // 영화 수상 내역
-  Poster: string // 영화 포스터 이미지 URL
-  Ratings: Rating[] // 영화 평점 정보
-  Metascore: string // 영화 메타스코어
-  imdbRating: string // 영화 IMDB 평점
-  imdbVotes: string // 영화 IMDB 투표 수
-  imdbID: string // 영화 고유 ID
-  Type: string // 영화 타입
-  DVD: string // 영화 DVD 출시일
-  BoxOffice: string // 영화 박스오피스
-  Production: string // 영화 제작사
-  Website: string // 영화 공식 웹사이트
-  Response: string // 요청 성공 여부
+  Title: string; // 영화 제목
+  Year: string; // 영화 개봉연도
+  Rated: string; // 영화 등급
+  Released: string; // 영화 개봉일
+  Runtime: string; // 영화 상영시간
+  Genre: string; // 영화 장르
+  Director: string; // 영화 감독
+  Writer: string; // 영화 작가
+  Actors: string; // 영화 출연진
+  Plot: string; // 영화 줄거리
+  Language: string; // 영화 언어
+  Country: string; // 영화 제작 국가
+  Awards: string; // 영화 수상 내역
+  Poster: string; // 영화 포스터 이미지 URL
+  Ratings: Rating[]; // 영화 평점 정보
+  Metascore: string; // 영화 메타스코어
+  imdbRating: string; // 영화 IMDB 평점
+  imdbVotes: string; // 영화 IMDB 투표 수
+  imdbID: string; // 영화 고유 ID
+  Type: string; // 영화 타입
+  DVD: string; // 영화 DVD 출시일
+  BoxOffice: string; // 영화 박스오피스
+  Production: string; // 영화 제작사
+  Website: string; // 영화 공식 웹사이트
+  Response: string; // 요청 성공 여부
 }
-interface Rating { // 영화 평점 정보
-  Source: string // 평점 제공 사이트
-  Value: string // 평점
+interface Rating {
+  // 영화 평점 정보
+  Source: string; // 평점 제공 사이트
+  Value: string; // 평점
 }
 ```
 
@@ -201,7 +208,7 @@ interface Rating { // 영화 평점 정보
   "Awards": "Won 2 Oscars. 82 wins & 60 nominations total",
   "Poster": "https://m.media-amazon.com/images/M/MV5BMTQ1MjQwMTE5OF5BMl5BanBnXkFtZTgwNjk3MTcyMDE@._V1_SX300.jpg",
   "Ratings": [
-    { "Source": "Internet Movie Database",  "Value": "7.4/10" },
+    { "Source": "Internet Movie Database", "Value": "7.4/10" },
     { "Source": "Rotten Tomatoes", "Value": "90%" },
     { "Source": "Metacritic", "Value": "75/100" }
   ],

vite-moviesearch/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

vite-moviesearch/.gitignore

@@ -0,0 +1,18 @@
+
+!**/glob-import/dir/node_modules
+.DS_Store
+.idea
+*.cpuprofile
+*.local
+*.log
+/.vscode/
+/docs/.vitepress/cache
+/packages/vite/LICENSE
+dist
+dist-ssr
+explorations
+node_modules
+playground-temp
+temp
+TODOs.md
+.eslintcache

vite-moviesearch/_headers

@@ -0,0 +1,5 @@
+/*
+  X-Content-Type-Options: nosniff
+  X-Frame-Options: DENY
+  Referrer-Policy: no-referrer
+*/

vite-moviesearch/_redirects

@@ -0,0 +1,3 @@
+/*.jsx      application/javascript
+/*.svg      image/svg+xml
+/* /index.html 200

vite-moviesearch/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@babel/preset-react"],
+};

vite-moviesearch/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>영화 검색 사이트</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="./src/main.jsx"></script>
+  </body>
+</html>