+
+ );
+};
+
+export default IsError;
diff --git a/Week10/geg222/Mission1/src/components/LanguageSelector.tsx b/Week10/geg222/Mission1/src/components/LanguageSelector.tsx
new file mode 100644
index 00000000..1fc7ef88
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/LanguageSelector.tsx
@@ -0,0 +1,34 @@
+interface LanguageOption {
+ value: string;
+ label: string;
+}
+
+interface LanguageSelectorProps {
+ value: string;
+ onChange: (value: string) => void;
+ options: LanguageOption[];
+ className?: string;
+}
+
+const LanguageSelector = ({
+ value,
+ onChange,
+ options,
+ className = "",
+}: LanguageSelectorProps) => {
+ return (
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/Week10/geg222/Mission1/src/components/LoadingSpinner.tsx b/Week10/geg222/Mission1/src/components/LoadingSpinner.tsx
new file mode 100644
index 00000000..8b5e5ba0
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/LoadingSpinner.tsx
@@ -0,0 +1,12 @@
+import { JSX } from "react";
+
+export const LoadingSpinner = (): JSX.Element => {
+ return (
+ 에러가 발생했습니다
+잠시 후 다시 시도해주세요.
+
+ 로딩 중...
+
+ );
+};
diff --git a/Week10/geg222/Mission1/src/components/MovieCard.tsx b/Week10/geg222/Mission1/src/components/MovieCard.tsx
new file mode 100644
index 00000000..a9297eec
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MovieCard.tsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { Movie } from "../types/movie";
+
+interface MovieCardProps {
+ movie: Movie;
+ onClick: (movieId: number) => void;
+}
+
+const MovieCard = ({ movie, onClick }: MovieCardProps) => {
+ const imageBaseUrl = "https://image.tmdb.org/t/p/w500";
+ const fallbackImageImage = "https://via.placeholder.com/640x480";
+ const [isHovered, setIsHovered] = useState(false);
+
+ return (
+ setIsHovered(true)}
+ onMouseLeave={(): void => setIsHovered(false)}
+ onClick={() => onClick(movie.id)}
+ >
+
+ );
+};
+
+export default MovieCard;
diff --git a/Week10/geg222/Mission1/src/components/MovieFilter.tsx b/Week10/geg222/Mission1/src/components/MovieFilter.tsx
new file mode 100644
index 00000000..5036a322
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MovieFilter.tsx
@@ -0,0 +1,78 @@
+import { JSX, memo, useState, useCallback } from "react";
+import { SelectBox } from "./SelectBox";
+import LanguageSelector from "./LanguageSelector";
+import { MovieFilters } from "../types/movie";
+import { LANGUAGE_OPTIONS } from "../constants/movie";
+import { Input } from "./Input";
+
+interface MovieFilterProps {
+ onChange: (filter: MovieFilters) => void;
+}
+
+const MovieFilter = ({ onChange }: MovieFilterProps): JSX.Element => {
+ const [query, setQuery] = useState
+ 
+
+
+ {movie.vote_average.toFixed(1)}
+
+ {isHovered && (
+
+
+ )}
+ {movie.title}
++ {movie.overview} +
+
+
+ );
+};
+
+export default memo(MovieFilter);
diff --git a/Week10/geg222/Mission1/src/components/MovieHeader.tsx b/Week10/geg222/Mission1/src/components/MovieHeader.tsx
new file mode 100644
index 00000000..a779805c
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MovieHeader.tsx
@@ -0,0 +1,33 @@
+import React, { JSX } from 'react';
+import { MovieDetail } from '../types/movie';
+
+const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/original';
+
+interface MovieHeaderProps {
+ movie: MovieDetail;
+}
+
+const MovieHeader = ({ movie }: MovieHeaderProps): JSX.Element => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ );
+};
+
+export default MovieHeader;
diff --git a/Week10/geg222/Mission1/src/components/MovieList.tsx b/Week10/geg222/Mission1/src/components/MovieList.tsx
new file mode 100644
index 00000000..01590959
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MovieList.tsx
@@ -0,0 +1,28 @@
+import { Movie } from "../types/movie";
+import MovieCard from "./MovieCard";
+
+
+interface MovieListProps {
+ movies: Movie[];
+ onMovieClick: (movieId: number) => void;
+}
+
+const MovieList = ({ movies, onMovieClick }: MovieListProps) => {
+ if (movies.length === 0) {
+ return (
+
+
+ {movie.title}
+
+ ⭐ {movie.vote_average.toFixed(1)}
+ {new Date(movie.release_date).getFullYear()}년
+ ⏱ {movie.runtime}분
+
+ {movie.tagline}
+{movie.overview}
+
+
+ );
+ }
+
+ return (
+ 검색 결과가 없습니다.
+
+ {movies.map((movie) => (
+
+ );
+};
+
+export default MovieList;
diff --git a/Week10/geg222/Mission1/src/components/MovieModal/MovieDetailContent.tsx b/Week10/geg222/Mission1/src/components/MovieModal/MovieDetailContent.tsx
new file mode 100644
index 00000000..00122d25
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MovieModal/MovieDetailContent.tsx
@@ -0,0 +1,52 @@
+
+
+
+import { JSX } from "react";
+import { MovieDetail } from "../../types/movie";
+
+interface MovieDetailContentProps {
+ data: MovieDetail;
+ onClose: () => void;
+}
+
+const MovieDetailContent = ({ data, onClose }: MovieDetailContentProps): JSX.Element => {
+ return (
+
+ 
+
+ );
+};
+
+export default MovieDetailContent;
\ No newline at end of file
diff --git a/Week10/geg222/Mission1/src/components/MovieModal/MovieDetailModal.tsx b/Week10/geg222/Mission1/src/components/MovieModal/MovieDetailModal.tsx
new file mode 100644
index 00000000..0ba43a21
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MovieModal/MovieDetailModal.tsx
@@ -0,0 +1,54 @@
+import { JSX } from "react";
+import useFetch from "../../hooks/useFetch";
+import { MovieDetail } from "../../types/movie";
+import MovieDetailContent from "./MovieDetailContent";
+
+
+interface MovieDetailModalProps {
+ movieId: number | null;
+ onClose: () => void;
+}
+
+const MovieDetailModal = ({
+ movieId,
+ onClose,
+}: MovieDetailModalProps): JSX.Element | null => {
+ if (!movieId) return null;
+
+ const { data, isLoading, isError } = useFetch
+
+
+
+ + 평점: {data.vote_average} ({data.vote_count}명 참여) +
+개봉일: {data.release_date}
+인기도: {data.popularity}
+상영 시간: {data.runtime}분
+언어: {data.original_language}
+관람 등급: {data.adult ? "청불" : "전체 관람가"}
++
{data.overview}
+
+
+ IMDb에서 검색
+
+
+
+ 영화 정보를 불러오는 중입니다...
;
+ if (isError || !data)
+ return 에러가 발생했습니다
;
+
+ return (
+
+
+ );
+};
+
+export default MovieDetailModal;
diff --git a/Week10/geg222/Mission1/src/components/MoviePeopleGrid.tsx b/Week10/geg222/Mission1/src/components/MoviePeopleGrid.tsx
new file mode 100644
index 00000000..df105295
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/MoviePeopleGrid.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { MovieCast } from '../types/movie';
+
+interface Props {
+ people: MovieCast[];
+}
+
+const MoviePeopleGrid = ({ people }: Props) => {
+ return (
+
+
+
+ 
+
+
+
+
+
+
+ {data.title}
+{data.original_title}
+
+
+ );
+};
+
+export default MoviePeopleGrid;
\ No newline at end of file
diff --git a/Week10/geg222/Mission1/src/components/Navbar.tsx b/Week10/geg222/Mission1/src/components/Navbar.tsx
new file mode 100644
index 00000000..85872c11
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/Navbar.tsx
@@ -0,0 +1,60 @@
+import { NavLink } from "react-router-dom";
+
+const MAIN_LINKS = [
+ { to: "/", label: "홈" },
+ { to: "/movies/popular", label: "인기 영화" },
+ { to: "/movies/now_playing", label: "상영 중" },
+ { to: "/movies/top_rated", label: "평점 순" },
+ { to: "/movies/upcoming", label: "개봉 예정" },
+ { to: "/search", label: "영화 검색" },
+];
+
+const AUTH_LINKS = [
+ { to: "/login", label: "로그인" },
+ { to: "/signup", label: "회원가입" },
+ { to: "/my/", label: "마이페이지" },
+];
+
+const Navbar = () => {
+ return (
+ 감독/출연
+
+ {people.map((person) => (
+
+
+
+
+ ))}
+ {person.name}
+{person.character || person.job}
+
+
+ );
+};
+
+export default Navbar;
diff --git a/Week10/geg222/Mission1/src/components/SelectBox.tsx b/Week10/geg222/Mission1/src/components/SelectBox.tsx
new file mode 100644
index 00000000..2c5d1539
--- /dev/null
+++ b/Week10/geg222/Mission1/src/components/SelectBox.tsx
@@ -0,0 +1,30 @@
+interface SelectBoxProps {
+ checked: boolean;
+ onChange: (checked: boolean) => void;
+ label: string;
+ id?: string;
+ className: string;
+}
+
+export const SelectBox = ({
+ checked,
+ onChange,
+ label,
+ id = "checkbox",
+ className = "",
+}: SelectBoxProps) => {
+ return (
+
+
+ isActive
+ ? "text-lg font-semibold text-red-600"
+ : "text-lg font-semibold text-white hover:text-red-500"
+ }
+ >
+ {label}
+
+ ))}
+
+ + YOUNGFLIX +
+ {MAIN_LINKS.map(({ to, label }) => ( +
+ {AUTH_LINKS.map(({ to, label }, index) => (
+
+ `px-3 py-1 rounded ${
+ index === 0
+ ? "bg-black text-white borde hover:bg-white hover:text-black"
+ : "bg-red-600 text-white hover:bg-red-500"
+ } text-sm font-semibold transition-colors duration-200`
+ }
+ >
+ {label}
+
+ ))}
+
+
+ onChange(e.target.checked)}
+ className="size-4 rounded border-gray-300 bg-gray-200 text-blue-600 focus:ring-blue-500"
+ />
+
+
+ );
+};
diff --git a/Week10/geg222/Mission1/src/constants/key.ts b/Week10/geg222/Mission1/src/constants/key.ts
new file mode 100644
index 00000000..bc90a544
--- /dev/null
+++ b/Week10/geg222/Mission1/src/constants/key.ts
@@ -0,0 +1,4 @@
+export const LOCAL_STORAGE_KEY = {
+ accessToken : 'accessToken',
+ refreshToken : 'refreshToken',
+}
\ No newline at end of file
diff --git a/Week10/geg222/Mission1/src/constants/movie.ts b/Week10/geg222/Mission1/src/constants/movie.ts
new file mode 100644
index 00000000..82374746
--- /dev/null
+++ b/Week10/geg222/Mission1/src/constants/movie.ts
@@ -0,0 +1,5 @@
+export const LANGUAGE_OPTIONS = [
+ { value: "ko-KR", label: "한국어" },
+ { value: "en-US", label: "English" },
+ { value: "ja-JP", label: "日本語" },
+];
diff --git a/Week10/geg222/Mission1/src/context/AuthContext.tsx b/Week10/geg222/Mission1/src/context/AuthContext.tsx
new file mode 100644
index 00000000..27fcfa9d
--- /dev/null
+++ b/Week10/geg222/Mission1/src/context/AuthContext.tsx
@@ -0,0 +1,83 @@
+import { createContext, PropsWithChildren, useContext, useState } from "react";
+import { RequestSigninDto } from "../types/auth";
+import { LOCAL_STORAGE_KEY } from "../constants/key";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { postLogout, postSignin } from "../apis/auth";
+
+interface AuthContextType {
+ accessToken: string | null;
+ refreshToken: string | null;
+ login: (signinData: RequestSigninDto) => Promise
+
+ );
+};
+
+export default HomeLayout;
diff --git a/Week10/geg222/Mission1/src/layout/ProtectedLayout.tsx b/Week10/geg222/Mission1/src/layout/ProtectedLayout.tsx
new file mode 100644
index 00000000..6fcf5de9
--- /dev/null
+++ b/Week10/geg222/Mission1/src/layout/ProtectedLayout.tsx
@@ -0,0 +1,16 @@
+import React, { use } from 'react'
+import { useAuth } from '../context/AuthContext'
+import { Navigate, Outlet, useLocation } from 'react-router-dom';
+
+const ProtectedLayout = () => {
+ const {accessToken} = useAuth();
+ const location = useLocation();
+
+ if(!accessToken) {
+ return */}
+
+ //
+ 구글 로그인 리다이렉트 페이지
+
+ )
+}
+
+export default GoogleLoginRedirectPage
diff --git a/Week10/geg222/Mission1/src/pages/Homepage.tsx b/Week10/geg222/Mission1/src/pages/Homepage.tsx
new file mode 100644
index 00000000..f0635c74
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/Homepage.tsx
@@ -0,0 +1,41 @@
+import React, { JSX } from "react";
+import { useLocation } from "react-router-dom";
+import useCustomFetch from "../hooks/useCustomFetch";
+import { MovieResponse } from "../types/movie";
+
+const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/original";
+
+const Homepage = (): JSX.Element => {
+ const location = useLocation();
+ const { data, isPending, isError } = useCustomFetch
+
+ )
+ );
+};
+
+export default Homepage;
\ No newline at end of file
diff --git a/Week10/geg222/Mission1/src/pages/LoginPage.tsx b/Week10/geg222/Mission1/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..cbd8ccb4
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/LoginPage.tsx
@@ -0,0 +1,155 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { UserSigninInformation, validateSignin } from '../utils/validate';
+import useForm from '../hooks/useForm';
+import useCustomFetch from '../hooks/useCustomFetch';
+import { MovieResponse } from '../types/movie';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+
+const LoginPage = () => {
+ const {login, accessToken} = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (accessToken) {
+ navigate("/");
+ }
+ }, [accessToken, navigate]);
+
+ const { values, errors, touched, getInputProps } = useForm
+ {backgroundImages.map((src, index) => (
+ 
+ ))}
+
+
+
+ YOUNGFLIX
+
+
+
+ );
+}
+
+export default LoginPage;
diff --git a/Week10/geg222/Mission1/src/pages/MovieDetailPage.tsx b/Week10/geg222/Mission1/src/pages/MovieDetailPage.tsx
new file mode 100644
index 00000000..c556d0e8
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/MovieDetailPage.tsx
@@ -0,0 +1,52 @@
+import React, { JSX } from 'react';
+import { useParams } from 'react-router-dom';
+import useCustomFetch from '../hooks/useCustomFetch';
+import { MovieDetail } from '../types/movie';
+import IsError from '../components/IsError';
+import MovieHeader from '../components/MovieHeader';
+import MoviePeopleGrid from '../components/MoviePeopleGrid';
+
+const MovieDetailPage = (): JSX.Element => {
+ const { movieId } = useParams<{ movieId: string }>();
+
+ const { data: movie, isPending, isError } = useCustomFetch
+
+
+
+
+
+
+
+
+
+ 로그인
+
+
+ 또는
+
+
+
+
+
+ 아직 계정이 없으신가요?{" "}
+
+
+
+ 영화 정보를 불러오는 중입니다...
+
+ );
+ }
+
+ if (isError || !movie) {
+ return
+
+ );
+};
+
+export default MovieDetailPage;
diff --git a/Week10/geg222/Mission1/src/pages/MoviePage.tsx b/Week10/geg222/Mission1/src/pages/MoviePage.tsx
new file mode 100644
index 00000000..42ffceb4
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/MoviePage.tsx
@@ -0,0 +1,94 @@
+import { JSX, useEffect, useState } from "react";
+import axios from "axios";
+import { Movie, MovieResponse } from "../types/movie";
+import MovieCard from "../components/MovieCard";
+import { LoadingSpinner } from "../components/LoadingSpinner";
+import { useParams, Link } from "react-router-dom";
+import useCustomFetch from "../hooks/useCustomFetch";
+import IsError from "../components/IsError";
+
+export default function MoviePage(): JSX.Element {
+ const [page, setPage] = useState(1);
+
+ const { category } = useParams<{
+ category: string;
+ }>();
+
+ useEffect(() => {
+ setPage(1);
+ }, [category]);
+
+ const categoryMap = {
+ popular: "인기 영화",
+ top_rated: "평점 높은 영화",
+ now_playing: "상영 중인 영화",
+ upcoming: "개봉 예정 영화"
+ };
+
+ const url = `https://api.themoviedb.org/3/movie/${category}?language=ko-KR&page=${page}`;
+ const { data, isPending, isError } = useCustomFetch
+
+ );
+}
diff --git a/Week10/geg222/Mission1/src/pages/Mypage.tsx b/Week10/geg222/Mission1/src/pages/Mypage.tsx
new file mode 100644
index 00000000..a32fcc0f
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/Mypage.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { getMyInfo } from '../apis/auth';
+import { useAuth } from '../context/AuthContext';
+import { useNavigate } from 'react-router-dom';
+import { LoadingSpinner } from '../components/LoadingSpinner';
+
+interface UserData {
+ name: string;
+ avatar: string;
+ email: string;
+}
+
+const Mypage = () => {
+ const navigate = useNavigate();
+ const { logout } = useAuth();
+ const [data, setData] = useState
+ {data?.results?.[0] && (
+
+ )}
+
+
+
+ {data?.results?.[0]?.title}
+{data?.results?.[0]?.overview}
+ ++ {{ + popular: "인기 영화", + top_rated: "평점 높은 영화", + now_playing: "상영 중인 영화", + upcoming: "개봉 예정 영화" + }[category as keyof typeof categoryMap] || "영화 목록"} +
+ +
+
+ {page} 페이지
+
+
+
+ {isPending && (
+
+
+ )}
+
+ {!isPending && data && (
+
+ {data.results.map((movie): JSX.Element => (
+
+ )}
+
+ 
+
+ );
+};
+
+export default Mypage;
diff --git a/Week10/geg222/Mission1/src/pages/NotFoundPage.tsx b/Week10/geg222/Mission1/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..e9f05ab8
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/NotFoundPage.tsx
@@ -0,0 +1,16 @@
+import { JSX } from "react";
+
+export default function NotFoundPage(): JSX.Element {
+ return (
+ {data.name}님 환영합니다.
+{data.email}
+ +
+
+ );
+}
diff --git a/Week10/geg222/Mission1/src/pages/SearchPage.tsx b/Week10/geg222/Mission1/src/pages/SearchPage.tsx
new file mode 100644
index 00000000..00bbeb27
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/SearchPage.tsx
@@ -0,0 +1,63 @@
+import { useCallback, useMemo, useState } from "react";
+import MovieFilter from "../components/MovieFilter";
+import MovieList from "../components/MovieList";
+import { MovieFilters, MovieResponse } from "../types/movie";
+import useFetch from "../hooks/useFetch";
+import MovieDetailModal from "../components/MovieModal/MovieDetailModal";
+
+
+const SearchPage = () => {
+ const [filters, setFilters] = useState404 Not Found
+유효하지 않은 페이지입니다. 주소를 다시 확인해주세요.
+ +{error}
;
+ }
+
+ return (
+
+ setSelectedMovieId(null)}
+ />
+
+ );
+};
+
+export default SearchPage;
diff --git a/Week10/geg222/Mission1/src/pages/SignupPage.tsx b/Week10/geg222/Mission1/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..54d4415c
--- /dev/null
+++ b/Week10/geg222/Mission1/src/pages/SignupPage.tsx
@@ -0,0 +1,304 @@
+import { z } from "zod";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "react-router-dom";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import useCustomFetch from "../hooks/useCustomFetch";
+import { postSignup as apiPostSignup } from "../apis/auth";
+import { MovieResponse } from "../types/movie";
+
+const IMAGE_BASE_URL = "https://image.tmdb.org/t/p/original";
+
+const schema = z
+ .object({
+ email: z.string().email({ message: "올바른 이메일 형식을 입력해주세요." }),
+ password: z
+ .string()
+ .min(8, { message: "비밀번호는 8자 이상이여야 합니다." })
+ .max(20, { message: "비밀번호는 20자 이하이여야 합니다." }),
+ passwordCheck: z
+ .string()
+ .min(8, { message: "비밀번호는 8자 이상이여야 합니다." })
+ .max(20, { message: "비밀번호는 20자 이하이여야 합니다." }),
+ name: z.string().min(1, { message: "이름을 입력해주세요." }),
+ })
+ .refine((data) => data.password === data.passwordCheck, {
+ message: "비밀번호가 일치하지 않습니다.",
+ path: ["passwordCheck"],
+ });
+
+type FormFields = z.infer로딩 중...
+ ) : (
+
+ {backgroundImage && (
+
+ )}
+
+ );
+};
+
+export default SignupPage;
\ No newline at end of file
diff --git a/Week10/geg222/Mission1/src/types/auth.ts b/Week10/geg222/Mission1/src/types/auth.ts
new file mode 100644
index 00000000..952a23cc
--- /dev/null
+++ b/Week10/geg222/Mission1/src/types/auth.ts
@@ -0,0 +1,44 @@
+import { CommonResponse } from "./common.ts";
+
+//회원가입
+export type RequestSignupDto = {
+ name: string;
+ email: string;
+ bio?: string;
+ avatar?: string;
+ password: string;
+};
+
+export type ResponseSingupDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}>;
+
+//로그인
+export type RequestSigninDto = {
+ email: string;
+ password: string;
+};
+
+export type ResponseSigninDto = CommonResponse<{
+ id: number;
+ name: string;
+ accessToken: string;
+ refreshToken: string;
+}>;
+
+// 내 정보 조회
+export type ResponseMyInfoDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}>;
\ No newline at end of file
diff --git a/Week10/geg222/Mission1/src/types/common.ts b/Week10/geg222/Mission1/src/types/common.ts
new file mode 100644
index 00000000..15ee914d
--- /dev/null
+++ b/Week10/geg222/Mission1/src/types/common.ts
@@ -0,0 +1,6 @@
+export type CommonResponse
+
+
+
+
+
+
+
+ {step === 1 && (
+ <>
+
+
+
+ 회원가입
+
+
+
+ 또는
+
+
+
+
+ {errors?.email && (
+ {errors.email.message}
+ )}
+
+
+
+ )}
+
+ {step === 2 && (
+ <>
+ {email}
+
+
+
+
+ {errors?.password && (
+
+
+ {errors.password.message}
+ )}
+
+
+
+ {errors?.passwordCheck && (
+
+
+
+
+ )}
+
+ {step === 3 && (
+
+ )}
+ {errors.passwordCheck.message}
+ )}
+ {!errors?.passwordCheck && password !== passwordCheck && (
+ 비밀번호가 일치하지 않습니다.
+ )}
+