Loading...
;
+ }
+ if (!accessToken) {
+ console.log("[ProtectedRoute] 토큰 없음 -> 로그인 페이지로 리다이렉트");
+ return
+
+
+
+
+
+ {/* 백드롭 이미지 (배경) */}
+ 
+
+ {/* 텍스트 위에 올라오도록 */}
+
+
+
+ {/* 텍스트 위에 올라오도록 */}
+
+
+ {detail?.title}
+
+ {/* 포스터 */}
+ 
+
+ {/* 텍스트 영역 */}
+
+
+
+ {/* 텍스트 영역 */}
+
+
+
+ 개봉일
+
+ {/* {detail.vote_average.toFixed(1)} */}
+ |
+ {detail?.release_date}
+
+
+ 줄거리
++ {detail?.overview} +
+ + {/* 버튼 */} +
+
+ IMDb에서 검색
+
+
+
+ {movie.title}
*/} +
+
+
+
+
+ {movie.title}
+{movie.overview}
+
+
+ }
+ {
+ error &&
+
+
+ }
+ {!isLoading && !error && filteredResults.length > 0 && (
+
+
+ )}
+
+ {!isLoading && !error && filteredResults.length === 0 && isSearching && (
+ -
+ {filteredResults.map(movie => (
+
검색 결과가 없습니다.
+ )}
+
+ )
+};
+
+export default MovieList;
\ No newline at end of file
diff --git a/Week10/joyeeon/Mission/src/components/moviescomp/Slidebar.tsx b/Week10/joyeeon/Mission/src/components/moviescomp/Slidebar.tsx
new file mode 100644
index 00000000..02f03a27
--- /dev/null
+++ b/Week10/joyeeon/Mission/src/components/moviescomp/Slidebar.tsx
@@ -0,0 +1,40 @@
+import { BsCaretRightSquareFill } from "react-icons/bs";
+import { BsCaretLeftSquareFill } from "react-icons/bs";
+
+interface SlidebarProps {
+ page:number;
+ setPage:(page:number) =>void;
+ totalPages:number;
+}
+
+const Slidebar = ({page, setPage, totalPages} : SlidebarProps) => {
+ const handleprev = () =>{
+ if(page > 1 ) setPage(page-1);
+ console.log("prev 버튼 클릭");
+ };
+
+ const handlenext = () => {
+ if(page < totalPages) setPage(page+1);
+ console.log("next 버튼 클릭");
+ }
+
+ return(
+
+
+ OR
+
+
+
+ )}
+ {error}
}
+
+ );
+};
+
+export default EmailComp;
diff --git a/Week10/joyeeon/Mission/src/components/register/Google.tsx b/Week10/joyeeon/Mission/src/components/register/Google.tsx
new file mode 100644
index 00000000..6b46240c
--- /dev/null
+++ b/Week10/joyeeon/Mission/src/components/register/Google.tsx
@@ -0,0 +1,19 @@
+import GoogleIcon from '../../assets/google.png'
+import React from 'react';
+
+const Google = () =>{
+ const Googlehandler = () =>{
+ window.location.href = `${import.meta.env.VITE_BASE_URL}/auth/google/login`;
+ };
+
+ return(
+
+ )
+}
+
+export default Google;
\ No newline at end of file
diff --git a/Week10/joyeeon/Mission/src/components/register/LoginComp.tsx b/Week10/joyeeon/Mission/src/components/register/LoginComp.tsx
new file mode 100644
index 00000000..d67ac511
--- /dev/null
+++ b/Week10/joyeeon/Mission/src/components/register/LoginComp.tsx
@@ -0,0 +1,100 @@
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+
+import AuthHeader from "./AuthHeader";
+import EmailComp from "./EmailComp";
+import AbledButton from "./AbledButton";
+import PassComp from "./PassComp";
+import useLocalStorage from "../../hooks/useLocalStorage";
+
+import { useAuth } from "../../context/AuthContext";
+import { loginApi } from "../../apis/auth";
+import { api } from "../../apis/api";
+
+const loginSchema = z.object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }),
+ password: z.string().min(1, { message: "비밀번호를 입력해주세요." }),
+});
+
+type LoginFormValues = z.infer
+
+
+
+ {error && {error}
}
+
+ )
+}
+
+export default PassComp;
\ No newline at end of file
diff --git a/Week10/joyeeon/Mission/src/components/register/SignupComp.tsx b/Week10/joyeeon/Mission/src/components/register/SignupComp.tsx
new file mode 100644
index 00000000..7574001d
--- /dev/null
+++ b/Week10/joyeeon/Mission/src/components/register/SignupComp.tsx
@@ -0,0 +1,183 @@
+import axios from "axios";
+import { useState, useEffect } from "react";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+
+import AuthHeader from "./AuthHeader"
+import EmailComp from "./EmailComp"
+import AbledButton from "./AbledButton";
+import PassComp from "./PassComp";
+
+import { signupApi } from "../../apis/auth";
+
+const signupSchema = z
+ .object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }),
+ password: z
+ .string()
+ .min(8, { message: "비밀번호는 8자 이상이어야 합니다" })
+ .max(20, { message: "비밀번호는 20자 이하여야 합니다." }),
+ passcheck: z.string(),
+ name: z.string().min(1, { message: "이름을 입력해주세요." }),
+ bio:z.string().optional().or(z.literal("")),
+ avatar: z.string().url({ message: "올바른 URL 형식이 아닙니다." }).optional().or(z.literal("")),
+ })
+ .refine((data) => data.password === data.passcheck, {
+ message: "비밀번호가 일치하지 않습니다.",
+ path: ["passcheck"],
+ });
+
+export type FormValues = z.infer에러가 발생했습니다.
+ 로딩중...
+ + 홈페이지 +
+ ) +} + +export default Homepage; \ No newline at end of file diff --git a/Week10/joyeeon/Mission/src/pages/Loginpage.tsx b/Week10/joyeeon/Mission/src/pages/Loginpage.tsx new file mode 100644 index 00000000..c277c6c4 --- /dev/null +++ b/Week10/joyeeon/Mission/src/pages/Loginpage.tsx @@ -0,0 +1,11 @@ +import LoginComp from "../components/register/LoginComp" + +const Loginpage = () =>{ + return( +로그아웃 페이지
+ + ) +} + +export default Logoutpage; \ No newline at end of file diff --git a/Week10/joyeeon/Mission/src/pages/Moviepage.tsx b/Week10/joyeeon/Mission/src/pages/Moviepage.tsx new file mode 100644 index 00000000..20b1094f --- /dev/null +++ b/Week10/joyeeon/Mission/src/pages/Moviepage.tsx @@ -0,0 +1,63 @@ +import MovieList from "../components/moviescomp/MovieList"; +import { useParams, Navigate } from "react-router-dom"; +import Slidebar from "../components/moviescomp/Slidebar"; +import { useState } from "react"; +import SearchComp from "../components/searchMovies/SearchComp"; +import useDebounce from "../hooks/state/useDebounce"; +import { useEffect } from "react"; +import { useCallback } from "react"; + +type Category = 'popular' | 'top_rated' | 'upcoming' | 'now_playing'; + +const MoviePage = () => { + const { category } = useParams(); + //console.log(`params 값: ${category}`); + + const [page, setPage] = useState잘못된 경로입니다.
; + } + + const handleInputChange = useCallback((value: string) => { + setSearchInput(value); + }, []); + + const handleSearch = useCallback((keyword: string, options: { language: string; includeAdult: boolean }) => { + setSearchKeyword(keyword); + setSearchOptions(options); + }, []); + + return ( +Loading...
;
+ }
+
+ return (
+
+ 
} */}
+
+ );
+};
+
+export default Mypage;
\ No newline at end of file
diff --git a/Week10/joyeeon/Mission/src/pages/Notfound.tsx b/Week10/joyeeon/Mission/src/pages/Notfound.tsx
new file mode 100644
index 00000000..0cea7ae7
--- /dev/null
+++ b/Week10/joyeeon/Mission/src/pages/Notfound.tsx
@@ -0,0 +1,7 @@
+const Notfound = () => {
+ return(
+ 마이 페이지
+ {/*이메일: {userInfo.email}
+이름: {userInfo.name}
+ {userInfo.bio &&소개: {userInfo.bio}
} + {userInfo.avatar &&