+
+
+
+ );
+};
+
+export default Layout;
diff --git a/mission/chapter05/mission01/src/main.tsx b/mission/chapter05/mission01/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/mission/chapter05/mission01/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ );
+};
+
+export default HomePage;
diff --git a/mission/chapter05/mission01/src/pages/LoginPage.tsx b/mission/chapter05/mission01/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..979a972
--- /dev/null
+++ b/mission/chapter05/mission01/src/pages/LoginPage.tsx
@@ -0,0 +1,108 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+import { loginSchema } from '../types/auth';
+import type { LoginFormData } from '../types/auth';
+import { signin } from '../apis/authApi';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const LoginPage = () => {
+ const navigate = useNavigate();
+ const [serverError, setServerError] = useState์ด์์ค์ธ์!
+์ํ๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์ ํํด ์ํ๋ฅผ ํ์ํด๋ณด์ธ์.
+ +
+
+ );
+};
+
+export default LoginPage;
diff --git a/mission/chapter05/mission01/src/pages/MovieDetailPage.tsx b/mission/chapter05/mission01/src/pages/MovieDetailPage.tsx
new file mode 100644
index 0000000..7819bd0
--- /dev/null
+++ b/mission/chapter05/mission01/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,167 @@
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import type { Movie } from '../types/movie';
+import useMovieDetail from '../hooks/useMovieDetail';
+import { TMDB_IMAGE_BASE } from '../constants/tmdb';
+
+const MovieDetailPage = () => {
+ const { movieId } = useParams<{ movieId: string }>();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const preview = (location.state as { movie?: Movie } | null)?.movie ?? null;
+
+ const { movie, credits, isLoading, error } = useMovieDetail(movieId);
+
+ if (isLoading) {
+ return (
+
+
+
+
+
+ ๐ฌ
+ MovieApp
+๋น์ ๋ง์ ์ํ ๊ณต๊ฐ
+
+
+
+
+ ๋ก๊ทธ์ธ
+๊ณ์ ์ ๋ก๊ทธ์ธํด ์ฃผ์ธ์.
+ + +
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const displayTitle = movie?.title ?? preview?.title;
+ const displayPoster = movie?.poster_path ?? preview?.poster_path;
+ const displayOverview = movie?.overview ?? preview?.overview;
+ const displayVote = movie?.vote_average ?? preview?.vote_average;
+ const displayDate = movie?.release_date ?? preview?.release_date;
+
+ const director = credits?.crew.find((c) => c.job === 'Director');
+ const topCast = credits?.cast.slice(0, 10) ?? [];
+
+ return (
+ {error}
+
+ {movie?.backdrop_path ? (
+
+ );
+};
+
+export default MovieDetailPage;
diff --git a/mission/chapter05/mission01/src/pages/MoviesPage.tsx b/mission/chapter05/mission01/src/pages/MoviesPage.tsx
new file mode 100644
index 0000000..509341f
--- /dev/null
+++ b/mission/chapter05/mission01/src/pages/MoviesPage.tsx
@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { MovieResponse } from '../types/movie';
+import { fetchMoviesByCategory } from '../apis/movieApi';
+import { TMDB_IMAGE_BASE } from '../constants/tmdb';
+import useCustomFetch from '../hooks/useCustomFetch';
+
+type Props = {
+ category: 'popular' | 'upcoming' | 'top_rated' | 'now_playing';
+};
+
+const MoviesPage = ({ category }: Props) => {
+ const [page, setPage] = useState(1);
+ const navigate = useNavigate();
+
+ const fetchFn = useCallback(
+ () => fetchMoviesByCategory(category, page),
+ [category, page]
+ );
+
+ const { data, isLoading, error } = useCustomFetch
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+ 
+
+
+
+
+
+ {displayTitle}
+ {movie?.tagline && ( +"{movie.tagline}"
+ )} + +
+ {movie?.genres.map((genre) => (
+
+ {genre.name}
+
+ ))}
+
+
+
+ {displayVote !== undefined && (
+
+ โญ{' '}
+
+ {displayVote.toFixed(1)}
+ {' '}
+ / 10
+
+ )}
+ {displayDate && ๐ {displayDate}}
+ {movie?.runtime != null && movie.runtime > 0 && (
+ โฑ {movie.runtime}๋ถ
+ )}
+ {director && ๐ฌ {director.name}}
+
+
+
+
+ ์ค๊ฑฐ๋ฆฌ
++ {displayOverview || '์ค๊ฑฐ๋ฆฌ ์ ๋ณด๊ฐ ์์ต๋๋ค.'} +
+
+
+ ์ถ์ฐ์ง
+ {topCast.length > 0 ? ( +
+ {topCast.map((actor) => (
+
+ ) : (
+
+ {actor.profile_path ? (
+ 
+ ) : (
+
+ ))}
+
+ ๐ค
+
+ )}
+ {actor.name}
+{actor.character}
+์ถ์ฐ์ง ์ ๋ณด๊ฐ ์์ต๋๋ค.
+ )} +
+
+ );
+};
+
+export default MoviesPage;
diff --git a/mission/chapter05/mission01/src/pages/SignupPage.tsx b/mission/chapter05/mission01/src/pages/SignupPage.tsx
new file mode 100644
index 0000000..3a2113a
--- /dev/null
+++ b/mission/chapter05/mission01/src/pages/SignupPage.tsx
@@ -0,0 +1,235 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+import {
+ signupEmailSchema,
+ signupPasswordSchema,
+ signupNameSchema,
+} from '../types/auth';
+import type {
+ SignupEmailFormData,
+ SignupPasswordFormData,
+ SignupNameFormData,
+} from '../types/auth';
+import { signup, signin } from '../apis/authApi';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+type Step = 1 | 2 | 3;
+
+const SignupPage = () => {
+ const navigate = useNavigate();
+ const [step, setStep] = useState
+
+ {page} ํ์ด์ง
+
+
+
+ {isLoading ? (
+
+
+
+ ) : error ? (
+
+
+ ) : (
+ {error}
+
+ {movies.map((movie) => (
+
+ )}
+ navigate(`/movies/${movie.id}`, { state: { movie } })}
+ className="group relative cursor-pointer overflow-hidden rounded-xl"
+ >
+ 
+
+ ))}
+
+
+ + {movie.title} +
++ {movie.overview} +
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/mission/chapter05/mission01/src/types/auth.ts b/mission/chapter05/mission01/src/types/auth.ts
new file mode 100644
index 0000000..9e3ef7a
--- /dev/null
+++ b/mission/chapter05/mission01/src/types/auth.ts
@@ -0,0 +1,49 @@
+import { z } from 'zod';
+
+export const loginSchema = z.object({
+ email: z.string().email({ error: '์ ํจํ์ง ์์ ์ด๋ฉ์ผ ํ์์
๋๋ค.' }),
+ password: z.string().min(6, '๋น๋ฐ๋ฒํธ๋ ์ต์ 6์ ์ด์์ด์ด์ผ ํฉ๋๋ค.'),
+});
+
+export const signupEmailSchema = z.object({
+ email: z.string().email({ error: '์ฌ๋ฐ๋ฅธ ์ด๋ฉ์ผ ํ์์ ์
๋ ฅํด์ฃผ์ธ์.' }),
+});
+
+export const signupPasswordSchema = z
+ .object({
+ password: z.string().min(6, '๋น๋ฐ๋ฒํธ๋ 6์ ์ด์์ด์ด์ผ ํฉ๋๋ค.'),
+ passwordConfirm: z.string(),
+ })
+ .refine((data) => data.password === data.passwordConfirm, {
+ message: '๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.',
+ path: ['passwordConfirm'],
+ });
+
+export const signupNameSchema = z.object({
+ name: z.string().min(1, '๋๋ค์์ ์
๋ ฅํด์ฃผ์ธ์.'),
+});
+
+export type LoginFormData = z.infer
+
+
+
+
+ ๐ฌ
+ MovieApp
+์ง๊ธ ๋ฐ๋ก ์์ํด๋ณด์ธ์
+
+
+
+
+
+
+
+ {[1, 2, 3].map((s) => (
+
+ ))}
+
+ {step} / 3 ๋จ๊ณ
+ + {step === 1 && ( + <> +์ด๋ฉ์ผ ์ ๋ ฅ
+๊ฐ์ ์ ์ฌ์ฉํ ์ด๋ฉ์ผ์ ์ ๋ ฅํด์ฃผ์ธ์.
+ + + )} + + {step === 2 && ( + <> +๋น๋ฐ๋ฒํธ ์ค์
+๋น๋ฐ๋ฒํธ๋ฅผ ์ค์ ํด์ฃผ์ธ์.
+{email}
+ + + )} + + {step === 3 && ( + <> +๋๋ค์ ์ค์
+์ฌ์ฉํ ๋๋ค์์ ์ ๋ ฅํด์ฃผ์ธ์.
+ + + )} +
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/mission/chapter05/mission02/src/main.tsx b/mission/chapter05/mission02/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/mission/chapter05/mission02/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ );
+};
+
+export default HomePage;
diff --git a/mission/chapter05/mission02/src/pages/LoginPage.tsx b/mission/chapter05/mission02/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..5ac02e6
--- /dev/null
+++ b/mission/chapter05/mission02/src/pages/LoginPage.tsx
@@ -0,0 +1,110 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+import { loginSchema } from '../types/auth';
+import type { LoginFormData } from '../types/auth';
+import { signin } from '../apis/authApi';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const LoginPage = () => {
+ const navigate = useNavigate();
+ const [serverError, setServerError] = useState์ด์์ค์ธ์!
+์ํ๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์ ํํด ์ํ๋ฅผ ํ์ํด๋ณด์ธ์.
+ +
+
+ {protectedMsg && (
+
+ {protectedMsg}
+ )} +
+
+ );
+};
+
+export default LoginPage;
diff --git a/mission/chapter05/mission02/src/pages/MovieDetailPage.tsx b/mission/chapter05/mission02/src/pages/MovieDetailPage.tsx
new file mode 100644
index 0000000..7819bd0
--- /dev/null
+++ b/mission/chapter05/mission02/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,167 @@
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import type { Movie } from '../types/movie';
+import useMovieDetail from '../hooks/useMovieDetail';
+import { TMDB_IMAGE_BASE } from '../constants/tmdb';
+
+const MovieDetailPage = () => {
+ const { movieId } = useParams<{ movieId: string }>();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const preview = (location.state as { movie?: Movie } | null)?.movie ?? null;
+
+ const { movie, credits, isLoading, error } = useMovieDetail(movieId);
+
+ if (isLoading) {
+ return (
+
+
+
+
+
+ ๐ฌ
+ MovieApp
+๋น์ ๋ง์ ์ํ ๊ณต๊ฐ
+
+
+
+
+ ๋ก๊ทธ์ธ
+๊ณ์ ์ ๋ก๊ทธ์ธํด ์ฃผ์ธ์.
+ + +
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const displayTitle = movie?.title ?? preview?.title;
+ const displayPoster = movie?.poster_path ?? preview?.poster_path;
+ const displayOverview = movie?.overview ?? preview?.overview;
+ const displayVote = movie?.vote_average ?? preview?.vote_average;
+ const displayDate = movie?.release_date ?? preview?.release_date;
+
+ const director = credits?.crew.find((c) => c.job === 'Director');
+ const topCast = credits?.cast.slice(0, 10) ?? [];
+
+ return (
+ {error}
+
+ {movie?.backdrop_path ? (
+
+ );
+};
+
+export default MovieDetailPage;
diff --git a/mission/chapter05/mission02/src/pages/MoviesPage.tsx b/mission/chapter05/mission02/src/pages/MoviesPage.tsx
new file mode 100644
index 0000000..509341f
--- /dev/null
+++ b/mission/chapter05/mission02/src/pages/MoviesPage.tsx
@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { MovieResponse } from '../types/movie';
+import { fetchMoviesByCategory } from '../apis/movieApi';
+import { TMDB_IMAGE_BASE } from '../constants/tmdb';
+import useCustomFetch from '../hooks/useCustomFetch';
+
+type Props = {
+ category: 'popular' | 'upcoming' | 'top_rated' | 'now_playing';
+};
+
+const MoviesPage = ({ category }: Props) => {
+ const [page, setPage] = useState(1);
+ const navigate = useNavigate();
+
+ const fetchFn = useCallback(
+ () => fetchMoviesByCategory(category, page),
+ [category, page]
+ );
+
+ const { data, isLoading, error } = useCustomFetch
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {displayTitle}
+ {movie?.tagline && ( +"{movie.tagline}"
+ )} + +
+ {movie?.genres.map((genre) => (
+
+ {genre.name}
+
+ ))}
+
+
+
+ {displayVote !== undefined && (
+
+ โญ{' '}
+
+ {displayVote.toFixed(1)}
+ {' '}
+ / 10
+
+ )}
+ {displayDate && ๐ {displayDate}}
+ {movie?.runtime != null && movie.runtime > 0 && (
+ โฑ {movie.runtime}๋ถ
+ )}
+ {director && ๐ฌ {director.name}}
+
+
+
+
+ ์ค๊ฑฐ๋ฆฌ
++ {displayOverview || '์ค๊ฑฐ๋ฆฌ ์ ๋ณด๊ฐ ์์ต๋๋ค.'} +
+
+
+ ์ถ์ฐ์ง
+ {topCast.length > 0 ? ( +
+ {topCast.map((actor) => (
+
+ ) : (
+
+ {actor.profile_path ? (
+
+ ) : (
+
+ ))}
+
+ ๐ค
+
+ )}
+ {actor.name}
+{actor.character}
+์ถ์ฐ์ง ์ ๋ณด๊ฐ ์์ต๋๋ค.
+ )} +
+
+ );
+};
+
+export default MoviesPage;
diff --git a/mission/chapter05/mission02/src/pages/SignupPage.tsx b/mission/chapter05/mission02/src/pages/SignupPage.tsx
new file mode 100644
index 0000000..17f10e7
--- /dev/null
+++ b/mission/chapter05/mission02/src/pages/SignupPage.tsx
@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+import {
+ signupEmailSchema,
+ signupPasswordSchema,
+ signupNameSchema,
+} from '../types/auth';
+import type {
+ SignupEmailFormData,
+ SignupPasswordFormData,
+ SignupNameFormData,
+} from '../types/auth';
+import { signup, signin } from '../apis/authApi';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+type Step = 1 | 2 | 3;
+
+const SignupPage = () => {
+ const navigate = useNavigate();
+ const [step, setStep] = useState
+
+ {page} ํ์ด์ง
+
+
+
+ {isLoading ? (
+
+
+
+ ) : error ? (
+
+
+ ) : (
+ {error}
+
+ {movies.map((movie) => (
+
+ )}
+ navigate(`/movies/${movie.id}`, { state: { movie } })}
+ className="group relative cursor-pointer overflow-hidden rounded-xl"
+ >
+
+
+ ))}
+
+
+ + {movie.title} +
++ {movie.overview} +
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/mission/chapter05/mission02/src/types/auth.ts b/mission/chapter05/mission02/src/types/auth.ts
new file mode 100644
index 0000000..9e3ef7a
--- /dev/null
+++ b/mission/chapter05/mission02/src/types/auth.ts
@@ -0,0 +1,49 @@
+import { z } from 'zod';
+
+export const loginSchema = z.object({
+ email: z.string().email({ error: '์ ํจํ์ง ์์ ์ด๋ฉ์ผ ํ์์
๋๋ค.' }),
+ password: z.string().min(6, '๋น๋ฐ๋ฒํธ๋ ์ต์ 6์ ์ด์์ด์ด์ผ ํฉ๋๋ค.'),
+});
+
+export const signupEmailSchema = z.object({
+ email: z.string().email({ error: '์ฌ๋ฐ๋ฅธ ์ด๋ฉ์ผ ํ์์ ์
๋ ฅํด์ฃผ์ธ์.' }),
+});
+
+export const signupPasswordSchema = z
+ .object({
+ password: z.string().min(6, '๋น๋ฐ๋ฒํธ๋ 6์ ์ด์์ด์ด์ผ ํฉ๋๋ค.'),
+ passwordConfirm: z.string(),
+ })
+ .refine((data) => data.password === data.passwordConfirm, {
+ message: '๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.',
+ path: ['passwordConfirm'],
+ });
+
+export const signupNameSchema = z.object({
+ name: z.string().min(1, '๋๋ค์์ ์
๋ ฅํด์ฃผ์ธ์.'),
+});
+
+export type LoginFormData = z.infer
+
+
+
+
+ ๐ฌ
+ MovieApp
+์ง๊ธ ๋ฐ๋ก ์์ํด๋ณด์ธ์
+
+
+
+
+
+
+
+ {[1, 2, 3].map((s) => (
+
+ ))}
+
+ {step} / 3 ๋จ๊ณ
+ + {step === 1 && ( + <> +์ด๋ฉ์ผ ์ ๋ ฅ
+๊ฐ์ ์ ์ฌ์ฉํ ์ด๋ฉ์ผ์ ์ ๋ ฅํด์ฃผ์ธ์.
+ + + )} + + {step === 2 && ( + <> +๋น๋ฐ๋ฒํธ ์ค์
+๋น๋ฐ๋ฒํธ๋ฅผ ์ค์ ํด์ฃผ์ธ์.
+{email}
+ + + )} + + {step === 3 && ( + <> +๋๋ค์ ์ค์
+์ฌ์ฉํ ๋๋ค์์ ์ ๋ ฅํด์ฃผ์ธ์.
+ + + )} +
+
+
+
+ );
+};
+
+export default Layout;
diff --git a/mission/chapter05/mission03/src/main.tsx b/mission/chapter05/mission03/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/mission/chapter05/mission03/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+ );
+};
+
+export default GoogleCallbackPage;
diff --git a/mission/chapter05/mission03/src/pages/HomePage.tsx b/mission/chapter05/mission03/src/pages/HomePage.tsx
new file mode 100644
index 0000000..3f8a57d
--- /dev/null
+++ b/mission/chapter05/mission03/src/pages/HomePage.tsx
@@ -0,0 +1,20 @@
+import { useNavigate } from 'react-router-dom';
+
+const HomePage = () => {
+ const navigate = useNavigate();
+
+ return (
+
+
+ );
+};
+
+export default HomePage;
diff --git a/mission/chapter05/mission03/src/pages/LoginPage.tsx b/mission/chapter05/mission03/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..92c99fb
--- /dev/null
+++ b/mission/chapter05/mission03/src/pages/LoginPage.tsx
@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+import { loginSchema } from '../types/auth';
+import type { LoginFormData } from '../types/auth';
+import { signin } from '../apis/authApi';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+const LoginPage = () => {
+ const navigate = useNavigate();
+ const [serverError, setServerError] = useState์ด์์ค์ธ์!
+์ํ๋ ์นดํ ๊ณ ๋ฆฌ๋ฅผ ์ ํํด ์ํ๋ฅผ ํ์ํด๋ณด์ธ์.
+ +
+
+ );
+};
+
+export default LoginPage;
diff --git a/mission/chapter05/mission03/src/pages/MovieDetailPage.tsx b/mission/chapter05/mission03/src/pages/MovieDetailPage.tsx
new file mode 100644
index 0000000..7819bd0
--- /dev/null
+++ b/mission/chapter05/mission03/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,167 @@
+import { useParams, useNavigate, useLocation } from 'react-router-dom';
+import type { Movie } from '../types/movie';
+import useMovieDetail from '../hooks/useMovieDetail';
+import { TMDB_IMAGE_BASE } from '../constants/tmdb';
+
+const MovieDetailPage = () => {
+ const { movieId } = useParams<{ movieId: string }>();
+ const navigate = useNavigate();
+ const location = useLocation();
+ const preview = (location.state as { movie?: Movie } | null)?.movie ?? null;
+
+ const { movie, credits, isLoading, error } = useMovieDetail(movieId);
+
+ if (isLoading) {
+ return (
+
+
+
+
+
+ ๐ฌ
+ MovieApp
+๋น์ ๋ง์ ์ํ ๊ณต๊ฐ
+
+
+
+
+ ๋ก๊ทธ์ธ
+๊ณ์ ์ ๋ก๊ทธ์ธํด ์ฃผ์ธ์.
+ + + +
+
+ ๋๋
+
+
+
+
+
+ Google๋ก ๋ก๊ทธ์ธ
+
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const displayTitle = movie?.title ?? preview?.title;
+ const displayPoster = movie?.poster_path ?? preview?.poster_path;
+ const displayOverview = movie?.overview ?? preview?.overview;
+ const displayVote = movie?.vote_average ?? preview?.vote_average;
+ const displayDate = movie?.release_date ?? preview?.release_date;
+
+ const director = credits?.crew.find((c) => c.job === 'Director');
+ const topCast = credits?.cast.slice(0, 10) ?? [];
+
+ return (
+ {error}
+
+ {movie?.backdrop_path ? (
+
+ );
+};
+
+export default MovieDetailPage;
diff --git a/mission/chapter05/mission03/src/pages/MoviesPage.tsx b/mission/chapter05/mission03/src/pages/MoviesPage.tsx
new file mode 100644
index 0000000..509341f
--- /dev/null
+++ b/mission/chapter05/mission03/src/pages/MoviesPage.tsx
@@ -0,0 +1,83 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import type { MovieResponse } from '../types/movie';
+import { fetchMoviesByCategory } from '../apis/movieApi';
+import { TMDB_IMAGE_BASE } from '../constants/tmdb';
+import useCustomFetch from '../hooks/useCustomFetch';
+
+type Props = {
+ category: 'popular' | 'upcoming' | 'top_rated' | 'now_playing';
+};
+
+const MoviesPage = ({ category }: Props) => {
+ const [page, setPage] = useState(1);
+ const navigate = useNavigate();
+
+ const fetchFn = useCallback(
+ () => fetchMoviesByCategory(category, page),
+ [category, page]
+ );
+
+ const { data, isLoading, error } = useCustomFetch
+
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {displayTitle}
+ {movie?.tagline && ( +"{movie.tagline}"
+ )} + +
+ {movie?.genres.map((genre) => (
+
+ {genre.name}
+
+ ))}
+
+
+
+ {displayVote !== undefined && (
+
+ โญ{' '}
+
+ {displayVote.toFixed(1)}
+ {' '}
+ / 10
+
+ )}
+ {displayDate && ๐ {displayDate}}
+ {movie?.runtime != null && movie.runtime > 0 && (
+ โฑ {movie.runtime}๋ถ
+ )}
+ {director && ๐ฌ {director.name}}
+
+
+
+
+ ์ค๊ฑฐ๋ฆฌ
++ {displayOverview || '์ค๊ฑฐ๋ฆฌ ์ ๋ณด๊ฐ ์์ต๋๋ค.'} +
+
+
+ ์ถ์ฐ์ง
+ {topCast.length > 0 ? ( +
+ {topCast.map((actor) => (
+
+ ) : (
+
+ {actor.profile_path ? (
+
+ ) : (
+
+ ))}
+
+ ๐ค
+
+ )}
+ {actor.name}
+{actor.character}
+์ถ์ฐ์ง ์ ๋ณด๊ฐ ์์ต๋๋ค.
+ )} +
+
+ );
+};
+
+export default MoviesPage;
diff --git a/mission/chapter05/mission03/src/pages/SignupPage.tsx b/mission/chapter05/mission03/src/pages/SignupPage.tsx
new file mode 100644
index 0000000..17f10e7
--- /dev/null
+++ b/mission/chapter05/mission03/src/pages/SignupPage.tsx
@@ -0,0 +1,237 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useNavigate } from 'react-router-dom';
+import {
+ signupEmailSchema,
+ signupPasswordSchema,
+ signupNameSchema,
+} from '../types/auth';
+import type {
+ SignupEmailFormData,
+ SignupPasswordFormData,
+ SignupNameFormData,
+} from '../types/auth';
+import { signup, signin } from '../apis/authApi';
+import useLocalStorage from '../hooks/useLocalStorage';
+
+type Step = 1 | 2 | 3;
+
+const SignupPage = () => {
+ const navigate = useNavigate();
+ const [step, setStep] = useState
+
+ {page} ํ์ด์ง
+
+
+
+ {isLoading ? (
+
+
+
+ ) : error ? (
+
+
+ ) : (
+ {error}
+
+ {movies.map((movie) => (
+
+ )}
+ navigate(`/movies/${movie.id}`, { state: { movie } })}
+ className="group relative cursor-pointer overflow-hidden rounded-xl"
+ >
+
+
+ ))}
+
+
+ + {movie.title} +
++ {movie.overview} +
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/mission/chapter05/mission03/src/types/auth.ts b/mission/chapter05/mission03/src/types/auth.ts
new file mode 100644
index 0000000..9e3ef7a
--- /dev/null
+++ b/mission/chapter05/mission03/src/types/auth.ts
@@ -0,0 +1,49 @@
+import { z } from 'zod';
+
+export const loginSchema = z.object({
+ email: z.string().email({ error: '์ ํจํ์ง ์์ ์ด๋ฉ์ผ ํ์์
๋๋ค.' }),
+ password: z.string().min(6, '๋น๋ฐ๋ฒํธ๋ ์ต์ 6์ ์ด์์ด์ด์ผ ํฉ๋๋ค.'),
+});
+
+export const signupEmailSchema = z.object({
+ email: z.string().email({ error: '์ฌ๋ฐ๋ฅธ ์ด๋ฉ์ผ ํ์์ ์
๋ ฅํด์ฃผ์ธ์.' }),
+});
+
+export const signupPasswordSchema = z
+ .object({
+ password: z.string().min(6, '๋น๋ฐ๋ฒํธ๋ 6์ ์ด์์ด์ด์ผ ํฉ๋๋ค.'),
+ passwordConfirm: z.string(),
+ })
+ .refine((data) => data.password === data.passwordConfirm, {
+ message: '๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค.',
+ path: ['passwordConfirm'],
+ });
+
+export const signupNameSchema = z.object({
+ name: z.string().min(1, '๋๋ค์์ ์
๋ ฅํด์ฃผ์ธ์.'),
+});
+
+export type LoginFormData = z.infer
+
+
+
+
+ ๐ฌ
+ MovieApp
+์ง๊ธ ๋ฐ๋ก ์์ํด๋ณด์ธ์
+
+
+
+
+
+
+
+ {[1, 2, 3].map((s) => (
+
+ ))}
+
+ {step} / 3 ๋จ๊ณ
+ + {step === 1 && ( + <> +์ด๋ฉ์ผ ์ ๋ ฅ
+๊ฐ์ ์ ์ฌ์ฉํ ์ด๋ฉ์ผ์ ์ ๋ ฅํด์ฃผ์ธ์.
+ + + )} + + {step === 2 && ( + <> +๋น๋ฐ๋ฒํธ ์ค์
+๋น๋ฐ๋ฒํธ๋ฅผ ์ค์ ํด์ฃผ์ธ์.
+{email}
+ + + )} + + {step === 3 && ( + <> +๋๋ค์ ์ค์
+์ฌ์ฉํ ๋๋ค์์ ์ ๋ ฅํด์ฃผ์ธ์.
+ + + )} +