Home Page 야호~!
; +}; + +export default HomePage; \ No newline at end of file diff --git a/week3/src/pages/movie-detail.tsx b/week3/src/pages/movie-detail.tsx new file mode 100644 index 00000000..e889ecfc --- /dev/null +++ b/week3/src/pages/movie-detail.tsx @@ -0,0 +1,81 @@ +import { useParams } from "react-router-dom"; +import { useEffect, useState } from "react"; +import axios from "axios"; + +const MovieDetailPage = () => { + const { movieId } = useParams(); + + const [movieDetails, setMovieDetails] = useState로딩 중...
;
+
+ return (
+
+ {/* 상단 배너 섹션 */}
+
+ )
+
+}
+
+export default MovieDetailPage;
\ No newline at end of file
diff --git a/week3/src/pages/not-found.tsx b/week3/src/pages/not-found.tsx
new file mode 100644
index 00000000..f3b6efc0
--- /dev/null
+++ b/week3/src/pages/not-found.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+ return
+
+
+ {/* 하단 출연진 섹션 */}
+
+
+ {movieDetails?.title}
+평균 {movieDetails?.vote_average.toFixed(1)}
+{movieDetails?.release_date.split('-')[0]}
+{movieDetails?.runtime}분
+"{movieDetails?.tagline}"
+{movieDetails?.overview}
+
+
+ 감독/출연
+
+ {credits?.cast.slice(0, 10).map((person: any) => (
+
+
+
+ ))}
+
+ 
+
+ {person.name}
+{person.character}
+너는 찾을 수 없는 페이지 야호~!
; +}; + +export default NotFound; \ No newline at end of file diff --git a/week3/src/pages/now-showing.tsx b/week3/src/pages/now-showing.tsx new file mode 100644 index 00000000..d3f0506e --- /dev/null +++ b/week3/src/pages/now-showing.tsx @@ -0,0 +1,114 @@ +import type { Movie, MovieResponse } from '../types/movie'; +import { useEffect, useState } from 'react'; +import axios from 'axios'; +import { Link } from 'react-router-dom'; + +const NowShowingPage = () => { + const [movies, setMovies] = useState
+ {/* 로딩 스피너 애니메이션 */}
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+ 로딩 중입니다...
+
+
+ );
+ }
+
+ return (
+ 에러가 발생했습니다 😢
+ +
+ {/* 페이지네이션 */}
+
+ );
+};
+
+export default NowShowingPage;
\ No newline at end of file
diff --git a/week3/src/pages/popular.tsx b/week3/src/pages/popular.tsx
new file mode 100644
index 00000000..2ccbdc97
--- /dev/null
+++ b/week3/src/pages/popular.tsx
@@ -0,0 +1,114 @@
+import type { Movie, MovieResponse } from '../types/movie';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+const PopularPage = () => {
+ const [movies, setMovies] = useState
+
+ {page} 페이지
+
+
+
+ {/* 영화 */}
+ -
+ {movies?.map((movie) => (
+
-
+
+ ++ +
+ +
+++ {movie.title} +
++ {movie.overview || "줄거리 정보가 없습니다."} +
+
+ ))}
+
+ {/* 로딩 스피너 애니메이션 */}
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+ 로딩 중입니다...
+
+
+ );
+ }
+
+ return (
+ 에러가 발생했습니다 😢
+ +
+ {/* 페이지네이션 */}
+
+ );
+};
+
+export default PopularPage;
\ No newline at end of file
diff --git a/week3/src/pages/top-rated.tsx b/week3/src/pages/top-rated.tsx
new file mode 100644
index 00000000..4db49b72
--- /dev/null
+++ b/week3/src/pages/top-rated.tsx
@@ -0,0 +1,113 @@
+import type { Movie, MovieResponse } from '../types/movie';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+const TopRatedPage = () => {
+ const [movies, setMovies] = useState
+
+ {page} 페이지
+
+
+
+ {/* 영화 */}
+ -
+ {movies?.map((movie) => (
+
-
+
+ ++ +++
+ {movie.title} +
++ {movie.overview || "줄거리 정보가 없습니다."} +
+
+ ))}
+
+ {/* 로딩 스피너 애니메이션 */}
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+ 로딩 중입니다...
+
+
+ );
+ }
+
+ return (
+ 에러가 발생했습니다 😢
+ +
+ {/* 페이지네이션 */}
+
+ );
+};
+
+export default TopRatedPage;
\ No newline at end of file
diff --git a/week3/src/pages/upcoming.tsx b/week3/src/pages/upcoming.tsx
new file mode 100644
index 00000000..e66eae76
--- /dev/null
+++ b/week3/src/pages/upcoming.tsx
@@ -0,0 +1,112 @@
+import type { Movie, MovieResponse } from '../types/movie';
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+import { Link } from 'react-router-dom';
+
+const UpcomingPage = () => {
+ const [movies, setMovies] = useState
+
+ {page} 페이지
+
+
+
+ {/* 영화 */}
+ -
+ {movies?.map((movie) => (
+
-
+
+ ++ +++
+ {movie.title} +
++ {movie.overview || "줄거리 정보가 없습니다."} +
+
+ ))}
+
+ {/* 로딩 스피너 애니메이션 */}
+
+
+ );
+ }
+
+ if (isError) {
+ return (
+ 로딩 중입니다...
+
+
+ );
+ }
+
+ return (
+ 에러가 발생했습니다 😢
+ +
+ {/* 페이지네이션 */}
+
+ );
+};
+
+export default UpcomingPage;
\ No newline at end of file
diff --git a/week3/src/types/movie.ts b/week3/src/types/movie.ts
new file mode 100644
index 00000000..b7788ee2
--- /dev/null
+++ b/week3/src/types/movie.ts
@@ -0,0 +1,16 @@
+export type Movie = {
+ id: number;
+ title: string;
+ overview: string;
+ poster_path: string;
+ release_date: string;
+ vote_average: number;
+ // 필요하다면 추가 필드도 정의 가능
+};
+
+export type MovieResponse = {
+ page: number;
+ results: Movie[];
+ total_pages: number;
+ total_results: number;
+};
\ No newline at end of file
diff --git a/week3/tsconfig.app.json b/week3/tsconfig.app.json
new file mode 100644
index 00000000..af516fcc
--- /dev/null
+++ b/week3/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "ES2023",
+ "useDefineForClassFields": true,
+ "lib": ["ES2023", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["src"]
+}
diff --git a/week3/tsconfig.json b/week3/tsconfig.json
new file mode 100644
index 00000000..1ffef600
--- /dev/null
+++ b/week3/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/week3/tsconfig.node.json b/week3/tsconfig.node.json
new file mode 100644
index 00000000..8a67f62f
--- /dev/null
+++ b/week3/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "ES2023",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true,
+ "noUncheckedSideEffectImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/week3/vite.config.ts b/week3/vite.config.ts
new file mode 100644
index 00000000..b7b53e19
--- /dev/null
+++ b/week3/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+ plugins: [
+ tailwindcss(),
+ ],
+})
\ No newline at end of file
+
+ {page} 페이지
+
+
+
+ {/* 영화 */}
+ -
+ {movies?.map((movie) => (
+
-
+
+ ++ +++
+ {movie.title} +
++ {movie.overview || "줄거리 정보가 없습니다."} +
+
+ ))}
+