+ {profilePath ? (
+ 
+ ) : (
+
+ );
+};
+
+export default Credit;
diff --git a/Week10/ysh2002m/mission/src/components/movie-detail/detailcontent.tsx b/Week10/ysh2002m/mission/src/components/movie-detail/detailcontent.tsx
new file mode 100644
index 00000000..8eaeff74
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/components/movie-detail/detailcontent.tsx
@@ -0,0 +1,59 @@
+interface Movie {
+ title?: string;
+ original_title?: string;
+ release_date?: string;
+ vote_average?: number;
+ runtime?: number;
+ tagline?: string;
+ overview?: string;
+ poster_path?: string;
+}
+
+interface Props {
+ movie: Movie;
+}
+
+const MovieDetailContent = ({ movie }: Props) => {
+ return (
+
+ 사진 없음
+
+ )}
+
+ {role}
+
+ {name}
+{originalName}
+
+
+
+
+
+
+ );
+};
+
+export default MovieDetailContent;
diff --git a/Week10/ysh2002m/mission/src/components/movie/movie-item.tsx b/Week10/ysh2002m/mission/src/components/movie/movie-item.tsx
new file mode 100644
index 00000000..9a2d7ee1
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/components/movie/movie-item.tsx
@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router-dom";
+import type { Movie } from "../../types/movie";
+
+type Props = {
+ movie: Movie;
+};
+
+const Item = ({ movie }: Props) => {
+ const navigate = useNavigate();
+
+ return (
+
+
+ {movie?.title || "제목 정보가 없습니다."}
+원제: {movie?.original_title || "정보 없음"}
+개봉일: {movie?.release_date || "정보 없음"}
++ 평점:{" "} + {movie?.vote_average + ? `${movie.vote_average} / 10` + : "평점 정보가 없습니다."} +
++ 상영 시간:{" "} + {movie?.runtime ? `${movie.runtime}분` : "상영 시간 정보가 없습니다."} +
+태그라인: {movie?.tagline || "N/A"}
+{movie?.overview || "줄거리 정보가 없습니다."}
+
+
+ IMDb에서 검색
+
+
+ navigate(`/movies/${movie.id}`)}
+ className="group relative w-48 h-72 rounded-lg overflow-hidden cursor-pointer
+ shadow-md hover:shadow-lg transition-shadow">
+ 
+
+
+ );
+};
+
+export default Item;
diff --git a/Week10/ysh2002m/mission/src/components/movie/movie-list.tsx b/Week10/ysh2002m/mission/src/components/movie/movie-list.tsx
new file mode 100644
index 00000000..65f4a754
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/components/movie/movie-list.tsx
@@ -0,0 +1,21 @@
+import { useCallback } from "react";
+import Item from "./movie-item";
+import type { Movie } from "../../types/movie";
+
+type Props = {
+ movies: Movie[];
+};
+
+const MovieList = ({ movies }: Props) => {
+ const renderItem = useCallback(
+ (movie: Movie) =>
+
+
+
+ + {movie.title} +
++ {movie.overview} +
+
+ {movies.map(renderItem)}
+
+ );
+};
+
+export default MovieList;
diff --git a/Week10/ysh2002m/mission/src/components/navbar/navbar.tsx b/Week10/ysh2002m/mission/src/components/navbar/navbar.tsx
new file mode 100644
index 00000000..34c5b92f
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/components/navbar/navbar.tsx
@@ -0,0 +1,76 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { useEffect, useState } from "react";
+
+const Navbar = () => {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const [isLoggedIn, setIsLoggedIn] = useState
+
+
+
+ 페이지 {page}
+
+
+
+
+ );
+};
+
+export default Pagination;
diff --git a/Week10/ysh2002m/mission/src/components/protectedroute.tsx b/Week10/ysh2002m/mission/src/components/protectedroute.tsx
new file mode 100644
index 00000000..b9e7e961
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/components/protectedroute.tsx
@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { Navigate, useLocation, Outlet } from 'react-router-dom';
+
+interface ProtectedRouteProps {
+ children?: ReactNode;
+}
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+ const accessToken = localStorage.getItem('accessToken');
+ const location = useLocation();
+
+ if (!accessToken) {
+ return
+
+
+ );
+ };
+
+ export default Spinner;
+
\ No newline at end of file
diff --git a/Week10/ysh2002m/mission/src/hooks/uselocalstorage.ts b/Week10/ysh2002m/mission/src/hooks/uselocalstorage.ts
new file mode 100644
index 00000000..fd66da6d
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/hooks/uselocalstorage.ts
@@ -0,0 +1,14 @@
+import { useState, useEffect } from "react";
+
+export function useLocalStorage{error}
; + } else { + content = ( +
+
+ );
+ }
+
+ return { content };
+};
+
+export default usePaginatedMovies;
diff --git a/Week10/ysh2002m/mission/src/hooks/usesignupform.ts b/Week10/ysh2002m/mission/src/hooks/usesignupform.ts
new file mode 100644
index 00000000..df935fc4
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/hooks/usesignupform.ts
@@ -0,0 +1,97 @@
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+ emailSchema,
+ passwordSchema,
+ nicknameSchema,
+ EmailFormData,
+ PasswordFormData,
+ NicknameFormData,
+} from "../schema/signupschema";
+import { useLocalStorage } from "./uselocalstorage";
+import { AxiosError } from "axios";
+import { signUpUser } from "../apis/signup";
+import { useNavigate } from "react-router-dom";
+
+export const useSignupForm = () => {
+ const navigate = useNavigate();
+
+ const [emailValue, setEmailValue] = useLocalStorage("signup-email", "");
+ const [nicknameValue, setNicknameValue] = useLocalStorage("signup-nickname", "");
+
+ const {
+ register: registerEmail,
+ handleSubmit: handleEmailSubmit,
+ formState: { errors: emailErrors, isValid: isEmailValid },
+ } = useForm
+
+ );
+};
+
+export default Layout;
diff --git a/Week10/ysh2002m/mission/src/main.tsx b/Week10/ysh2002m/mission/src/main.tsx
new file mode 100644
index 00000000..126420dd
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "react-query";
+import App from "./App.tsx";
+import "./index.css";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+
+
+
+
,
+ document.body
+ );
+};
+
+export default Detail;
diff --git a/Week10/ysh2002m/mission/src/pages/googlelogin.tsx b/Week10/ysh2002m/mission/src/pages/googlelogin.tsx
new file mode 100644
index 00000000..9988d292
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/googlelogin.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const OAuthCallbackPage = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ useEffect(() => {
+ const searchParams = new URLSearchParams(location.search);
+ const accessToken = searchParams.get("accessToken");
+ const refreshToken = searchParams.get("refreshToken");
+
+ if (accessToken) {
+ localStorage.setItem("accessToken", accessToken);
+ console.log("accessToken 저장 완료:", accessToken);
+
+ if (refreshToken) {
+ sessionStorage.setItem("refreshToken", refreshToken);
+ console.log("refreshToken 저장 완료:", refreshToken);
+ }
+
+ navigate("/", { replace: true });
+ } else {
+ console.error("accessToken이 없습니다.");
+ navigate("/login", { replace: true });
+ }
+ }, [location, navigate]);
+
+ return (
+
+
+ {isLoading ? (
+
+ 영화 정보를 불러오는 중입니다...
+ ) : error ? ( +에러가 발생했습니다.
+ ) : ( +
+
+ );
+};
+
+export default OAuthCallbackPage;
diff --git a/Week10/ysh2002m/mission/src/pages/home.tsx b/Week10/ysh2002m/mission/src/pages/home.tsx
new file mode 100644
index 00000000..6d639eb7
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/home.tsx
@@ -0,0 +1,5 @@
+const Home = () => {
+ return 로그인 처리 중입니다...
+홈
;
+};
+
+export default Home;
diff --git a/Week10/ysh2002m/mission/src/pages/login.tsx b/Week10/ysh2002m/mission/src/pages/login.tsx
new file mode 100644
index 00000000..60e59c66
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/login.tsx
@@ -0,0 +1,86 @@
+import { useNavigate } from "react-router-dom";
+import { useLoginForm } from "../hooks/useloginform";
+
+const LoginPage = () => {
+ const navigate = useNavigate();
+
+ const {
+ register,
+ handleSubmit,
+ errors,
+ isValid,
+ onSubmit,
+ } = useLoginForm();
+
+ return (
+
+
+
+ );
+};
+
+export default LoginPage;
diff --git a/Week10/ysh2002m/mission/src/pages/movies/now-playing.tsx b/Week10/ysh2002m/mission/src/pages/movies/now-playing.tsx
new file mode 100644
index 00000000..ed23592d
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/movies/now-playing.tsx
@@ -0,0 +1,8 @@
+import usePaginatedMovies from "../../hooks/usepaginated";
+
+const NowPlaying = () => {
+ const { content } = usePaginatedMovies("now_playing");
+ return content;
+};
+
+export default NowPlaying;
diff --git a/Week10/ysh2002m/mission/src/pages/movies/popular.tsx b/Week10/ysh2002m/mission/src/pages/movies/popular.tsx
new file mode 100644
index 00000000..70c4163e
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/movies/popular.tsx
@@ -0,0 +1,8 @@
+import usePaginatedMovies from "../../hooks/usepaginated";
+
+const Popular = () => {
+ const { content } = usePaginatedMovies("popular");
+ return content;
+};
+
+export default Popular;
diff --git a/Week10/ysh2002m/mission/src/pages/movies/top-rated.tsx b/Week10/ysh2002m/mission/src/pages/movies/top-rated.tsx
new file mode 100644
index 00000000..afd2dd27
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/movies/top-rated.tsx
@@ -0,0 +1,8 @@
+import usePaginatedMovies from "../../hooks/usepaginated";
+
+const TopRated = () => {
+ const { content } = usePaginatedMovies("top_rated");
+ return content;
+};
+
+export default TopRated;
diff --git a/Week10/ysh2002m/mission/src/pages/movies/upcoming.tsx b/Week10/ysh2002m/mission/src/pages/movies/upcoming.tsx
new file mode 100644
index 00000000..4e668c07
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/movies/upcoming.tsx
@@ -0,0 +1,8 @@
+import usePaginatedMovies from "../../hooks/usepaginated";
+
+const Upcoming = () => {
+ const { content } = usePaginatedMovies("upcoming");
+ return content;
+};
+
+export default Upcoming;
diff --git a/Week10/ysh2002m/mission/src/pages/not-found.tsx b/Week10/ysh2002m/mission/src/pages/not-found.tsx
new file mode 100644
index 00000000..d099349e
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/not-found.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+ return 페이지가 읽히지 않습니다.
;
+};
+
+export default NotFound;
diff --git a/Week10/ysh2002m/mission/src/pages/search.tsx b/Week10/ysh2002m/mission/src/pages/search.tsx
new file mode 100644
index 00000000..8849a77f
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/search.tsx
@@ -0,0 +1,137 @@
+import { useRef, useEffect, useState, useMemo } from "react";
+import List from "../components/movie/movie-list";
+import Pagination from "../components/pagination";
+import { useMovieSearch } from "../hooks/usemoviesearch";
+
+const SearchPage = () => {
+ const observerRef = useRef
+
+ );
+};
+
+export default SearchPage;
diff --git a/Week10/ysh2002m/mission/src/pages/signup.tsx b/Week10/ysh2002m/mission/src/pages/signup.tsx
new file mode 100644
index 00000000..8c4660df
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/pages/signup.tsx
@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Eye, EyeOff } from "lucide-react";
+import { useSignupForm } from "../hooks/usesignupform";
+
+const SignUpPage = () => {
+ const navigate = useNavigate();
+ const [step, setStep] = useState(1);
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+ const {
+ emailValue,
+ setEmailValue,
+ registerEmail,
+ handleEmailSubmit,
+ emailErrors,
+ isEmailValid,
+ registerPassword,
+ handlePasswordSubmit,
+ pwErrors,
+ isPasswordValid,
+ registerNickname,
+ onNicknameSubmit,
+ nicknameErrors,
+ isNicknameValid,
+ } = useSignupForm();
+
+ const onEmailSubmit = handleEmailSubmit((data) => {
+ setEmailValue(data.email);
+ setStep(2);
+ });
+
+ const onPasswordSubmit = handlePasswordSubmit(() => setStep(3));
+
+ const goBack = () => {
+ if (step === 1) navigate(-1);
+ else setStep(step - 1);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ 🎬
+ setQuery(e.target.value)}
+ className="w-full h-full bg-transparent focus:outline-none text-sm text-gray-700"
+ />
+
+
+ ⚙️
+ setShowAdult(e.target.checked)}
+ className="mr-2 h-4 w-4 text-yellow-400"
+ />
+
+
+
+ 🌐
+
+
+
+
+
+ {isLoading && triggered &&
+ 로딩 중...
} + {isError && triggered &&에러 발생
} + {triggered && memoizedMovies.length === 0 && ( +검색 결과 없음
+ )} + {triggered && memoizedMovies.length > 0 && ( + <> +
+
+
+ );
+};
+
+export default SignUpPage;
diff --git a/Week10/ysh2002m/mission/src/routes/routes.tsx b/Week10/ysh2002m/mission/src/routes/routes.tsx
new file mode 100644
index 00000000..eb81e2b2
--- /dev/null
+++ b/Week10/ysh2002m/mission/src/routes/routes.tsx
@@ -0,0 +1,41 @@
+import { createBrowserRouter } from "react-router-dom";
+import Home from "../pages/home";
+import NotFound from "../pages/not-found";
+import Layout from "../layout/root-layout";
+import Popular from "../pages/movies/popular";
+import NowPlaying from "../pages/movies/now-playing";
+import TopRated from "../pages/movies/top-rated";
+import Upcoming from "../pages/movies/upcoming";
+import MovieDetails from "../pages/detail";
+import LoginPage from "../pages/login";
+import SignUpPage from "../pages/signup";
+import ProtectedRoute from "../components/protectedroute";
+import OAuthCallbackPage from "../pages/googlelogin";
+import SearchPage from "../pages/search";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: