{movie.title}
++ {movie.overview} +
+에러 발생
;
+
+ return (
+
+
+ );
+};
+
+export default MovieDetailModal;
diff --git a/Week10/wantkdd/mission1/src/components/input.tsx b/Week10/wantkdd/mission1/src/components/input.tsx
new file mode 100644
index 00000000..038f5f33
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/components/input.tsx
@@ -0,0 +1,23 @@
+interface InputProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+ className?: string;
+}
+
+export const Input = ({
+ value,
+ onChange,
+ placeholder = '검색어를 입력하세요.',
+ className,
+}: InputProps) => {
+ return (
+ onChange(e.target.value)}
+ placeholder={placeholder}
+ className={`w-full rounded-md border border-white px-3 py-2 shadow-sm focus:border-green-300 focus:ring-green-300 focus:outline-none ${className}`}
+ />
+ );
+};
diff --git a/Week10/wantkdd/mission1/src/components/language-selector.tsx b/Week10/wantkdd/mission1/src/components/language-selector.tsx
new file mode 100644
index 00000000..76eb3218
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/components/language-selector.tsx
@@ -0,0 +1,44 @@
+import { MovieLanguage } from '../types/movie';
+
+interface LanguageOption {
+ value: string;
+ label: string;
+}
+interface LanguageSelectorProps {
+ value: MovieLanguage;
+ onChange: (value: MovieLanguage) => void;
+ options: LanguageOption[];
+ className?: string;
+}
+
+const LanguageSelector = ({
+ value,
+ onChange,
+ options,
+ className = '',
+}: LanguageSelectorProps) => {
+ return (
+
+
+
+ {backdropUrl && (
+
+
+ 
+
+ )}
+
+
+ 
+
+
+
+
+ {movie.title}
+{movie.release_date} 개봉
+⭐ {movie.vote_average.toFixed(1)}
++ {movie.overview} +
+
+
+ IMDb에서 보기
+
+
+
+
+
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/Week10/wantkdd/mission1/src/components/loading-spinner.tsx b/Week10/wantkdd/mission1/src/components/loading-spinner.tsx
new file mode 100644
index 00000000..9da4333a
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/components/loading-spinner.tsx
@@ -0,0 +1,10 @@
+export const LoadingSpinner = () => {
+ return (
+
+ 로딩 중...
+
+ );
+};
diff --git a/Week10/wantkdd/mission1/src/components/movie-filter.tsx b/Week10/wantkdd/mission1/src/components/movie-filter.tsx
new file mode 100644
index 00000000..b3386ef6
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/components/movie-filter.tsx
@@ -0,0 +1,76 @@
+import React, { memo, useState } from 'react';
+import { MovieFilters, MovieLanguage } from '../types/movie';
+import LanguageSelector from './language-selector';
+import { Input } from './input';
+import { SelectBox } from './select-box';
+import { LANGUAGE_OPTIONS } from '../constants/movie';
+
+interface MovieFilterProps {
+ onChange: (filters: MovieFilters) => void;
+}
+
+const MovieFilter = ({ onChange }: MovieFilterProps) => {
+ // console.log('리렌더링');
+ const [query, setQuery] = useState('');
+ const [includeAdult, setIncludeAdult] = useState(false);
+ const [language, setLanguage] = useState
+
+
+ );
+};
+
+export default memo(MovieFilter);
diff --git a/Week10/wantkdd/mission1/src/components/movie-form.tsx b/Week10/wantkdd/mission1/src/components/movie-form.tsx
new file mode 100644
index 00000000..16c446d3
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/components/movie-form.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Movie } from '../types/movie';
+import { LoadingSpinner } from './loading-spinner';
+import MovieDetailModal from './detail-modal';
+
+type MovieGridProps = {
+ movies: Movie[];
+ isLoading: boolean;
+};
+
+const MovieForm = ({ movies, isLoading }: MovieGridProps) => {
+ const [selectedMovieId, setSelectedMovieId] = useState
+
+ );
+ }
+
+ return (
+ <>
+ -
+ {movies?.map((movie) => (
+
- setSelectedMovieId(movie.id)}
+ >
+
+ +
+ ))}
+
+
+
+
+ );
+};
+
+export default Pagination;
diff --git a/Week10/wantkdd/mission1/src/components/select-box.tsx b/Week10/wantkdd/mission1/src/components/select-box.tsx
new file mode 100644
index 00000000..afa0b9f2
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/components/select-box.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 (
+ {currentPage}페이지
+
+
+
+ onChange(e.target.checked)}
+ className="mr-2 h-4 w-4 text-pink-500 focus:ring-pink-500 border-gray-300 rounded"
+ />
+
+
+ );
+};
diff --git a/Week10/wantkdd/mission1/src/constants/key.ts b/Week10/wantkdd/mission1/src/constants/key.ts
new file mode 100644
index 00000000..dcf0e903
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/constants/key.ts
@@ -0,0 +1,4 @@
+export const LOCAL_STORAGE_KEY = {
+ accessToken: 'accessToken',
+ refreshToken: 'refreshToken',
+};
diff --git a/Week10/wantkdd/mission1/src/constants/movie.ts b/Week10/wantkdd/mission1/src/constants/movie.ts
new file mode 100644
index 00000000..e5628bd2
--- /dev/null
+++ b/Week10/wantkdd/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/wantkdd/mission1/src/context/AuthContext.tsx b/Week10/wantkdd/mission1/src/context/AuthContext.tsx
new file mode 100644
index 00000000..4827377c
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/context/AuthContext.tsx
@@ -0,0 +1,92 @@
+import { createContext, PropsWithChildren, useState, useContext } from 'react';
+import { RequestSigninDto } from '../types/auth';
+import { LOCAL_STORAGE_KEY } from '../constants/key';
+import { postLogout, postSignin } from '../apis/auth';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import axios from 'axios';
+
+interface AuthContextType {
+ accessToken: string | null;
+ refreshToken: string | null;
+ login: (signinData: RequestSigninDto) => Promise
+
+ {children ||
+ );
+};
+
+export default RootLayout;
diff --git a/Week10/wantkdd/mission1/src/main.tsx b/Week10/wantkdd/mission1/src/main.tsx
new file mode 100644
index 00000000..df655eae
--- /dev/null
+++ b/Week10/wantkdd/mission1/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(
+ + {children ||
+
+ );
+ }
+
+ if (error) {
+ return (
+
+ {error}
+
+ );
+ }
+
+ if (!movie) {
+ return (
+
+ 🚨영화 정보를 찾을 수 없습니다...🚨
+
+ );
+ }
+
+ return (
+
+
+ +
+ );
+};
+
+export default DetailPage;
diff --git a/Week10/wantkdd/mission1/src/pages/googleLoginRedirect-page.tsx b/Week10/wantkdd/mission1/src/pages/googleLoginRedirect-page.tsx
new file mode 100644
index 00000000..807f4b7d
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/googleLoginRedirect-page.tsx
@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { LOCAL_STORAGE_KEY } from '../constants/key';
+
+const GoogleLoginRedirectPage = () => {
+ const { setItem: setAccessToken } = useLocalStorage(
+ LOCAL_STORAGE_KEY.accessToken
+ );
+ const { setItem: setRefreshToken } = useLocalStorage(
+ LOCAL_STORAGE_KEY.refreshToken
+ );
+
+ useEffect(() => {
+ const urlParams = new URLSearchParams(window.location.search);
+ const accessToken = urlParams.get(LOCAL_STORAGE_KEY.accessToken);
+ const refreshToken = urlParams.get(LOCAL_STORAGE_KEY.refreshToken);
+
+ if (accessToken) {
+ setAccessToken(accessToken);
+ setRefreshToken(refreshToken);
+ window.location.href = '/my-page';
+ }
+ }, [setAccessToken, setRefreshToken]);
+ return
+
+
+
+ {backdropUrl ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+ {movie.title}
+평균 {movie.vote_average.toFixed(1)}
+{movie.release_date.split('-')[0]}년
+{movie.runtime}분
+ {movie.tagline && ( ++ {movie.tagline} +
+ )} +{movie.overview}
++ +
+
+ 출연진
+
+ {credits?.cast.slice(0, 20).map((actor: CastMember) => (
+
+
+
+ ))}
+
+ {actor.profile_path ? (
+ 
+ ) : (
+
+
+ ) : (
+
+ 없음ㅎ
+
+ )}
+ + {actor.name} +
++ {actor.character} +
+구글 리다이렉 화면
;
+};
+
+export default GoogleLoginRedirectPage;
diff --git a/Week10/wantkdd/mission1/src/pages/home-page.tsx b/Week10/wantkdd/mission1/src/pages/home-page.tsx
new file mode 100644
index 00000000..34488bd2
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/home-page.tsx
@@ -0,0 +1,8 @@
+const HomePage = () => {
+ return (
+ + WAN CINEMA +
+ ); +}; +export default HomePage; diff --git a/Week10/wantkdd/mission1/src/pages/login-page.tsx b/Week10/wantkdd/mission1/src/pages/login-page.tsx new file mode 100644 index 00000000..110b01bf --- /dev/null +++ b/Week10/wantkdd/mission1/src/pages/login-page.tsx @@ -0,0 +1,117 @@ +import { Link, useNavigate } from 'react-router-dom'; +import { useForm } from 'react-hook-form'; +import { zodResolver } from '@hookform/resolvers/zod'; +import { signinSchema, SigninFormFields } from '../utils/validate'; + +import googleLogo from '../assets/googleLogo.svg'; +import { useAuth } from '../context/AuthContext'; +import { useEffect } from 'react'; + +const LoginPage = () => { + const { login, accessToken } = useAuth(); + const navigate = useNavigate(); + useEffect(() => { + if (accessToken) { + navigate('/my-page'); + } + }); + const { + register, + handleSubmit, + formState: { errors, isValid, isDirty }, + } = useForm
+
+ );
+};
+
+export default LoginPage;
diff --git a/Week10/wantkdd/mission1/src/pages/my-page.tsx b/Week10/wantkdd/mission1/src/pages/my-page.tsx
new file mode 100644
index 00000000..4923f581
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/my-page.tsx
@@ -0,0 +1,80 @@
+import { useEffect, useState } from 'react';
+import { ResponseMyInfoDto } from '../types/auth';
+import { useAuth } from '../context/AuthContext';
+import { getMyInfo } from '../apis/auth';
+import { useNavigate } from 'react-router-dom';
+
+const MyPage = () => {
+ const { logout } = useAuth();
+ const [data, setData] = useState
+ 
+
+
+
+ <
+
+
+ 로그인
+
+
+
+
+
+ OR +
+
+
+ + OR +
+
+
+ );
+};
+
+export default MyPage;
diff --git a/Week10/wantkdd/mission1/src/pages/now-playing-movies.tsx b/Week10/wantkdd/mission1/src/pages/now-playing-movies.tsx
new file mode 100644
index 00000000..8d9aa937
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/now-playing-movies.tsx
@@ -0,0 +1,29 @@
+import MovieForm from '../components/movie-form';
+import Pagination from '../components/pagination';
+import { useMovies } from '../hooks/useMovies';
+
+const NowPlayingMoviesPage = () => {
+ const { movies, isLoading, error, page, nextPage, prevPage } =
+ useMovies('now_playing');
+
+ if (error) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {data.data?.avatar ? (
+ 
+ ) : (
+ 없음
+ )}
+
+
+
+ + {data.data?.name}님 환영합니다 +
+ +
+
+
+
+ 이메일
++ {data.data?.email || '이메일 정보 없음'} +
+
+ {error}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default NowPlayingMoviesPage;
diff --git a/Week10/wantkdd/mission1/src/pages/popular-movies.tsx b/Week10/wantkdd/mission1/src/pages/popular-movies.tsx
new file mode 100644
index 00000000..0c3262f7
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/popular-movies.tsx
@@ -0,0 +1,29 @@
+import MovieForm from '../components/movie-form';
+import Pagination from '../components/pagination';
+import { useMovies } from '../hooks/useMovies';
+
+const PopularMoviesPage = () => {
+ const { movies, isLoading, error, page, nextPage, prevPage } =
+ useMovies('popular');
+
+ if (error) {
+ return (
+
+ {error}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default PopularMoviesPage;
diff --git a/Week10/wantkdd/mission1/src/pages/search-page.tsx b/Week10/wantkdd/mission1/src/pages/search-page.tsx
new file mode 100644
index 00000000..1f984ef4
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/search-page.tsx
@@ -0,0 +1,94 @@
+import { useCallback, useState } from 'react';
+import MovieFilter from '../components/movie-filter';
+import MovieForm from '../components/movie-form';
+import { useCustomFetch } from '../hooks/useCustomFetch';
+import { MovieFilters, MovieResponse } from '../types/movie';
+import Pagination from '../components/pagination';
+
+const SearchPage = () => {
+ const [filters, setFilters] = useState
+ {error}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default SearchPage;
diff --git a/Week10/wantkdd/mission1/src/pages/signup-page.tsx b/Week10/wantkdd/mission1/src/pages/signup-page.tsx
new file mode 100644
index 00000000..3dc98d32
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/signup-page.tsx
@@ -0,0 +1,304 @@
+import { z } from 'zod';
+import {
+ SubmitHandler,
+ useForm,
+ UseFormRegister,
+ FieldErrors,
+} from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { postSignup } from '../apis/auth';
+import { useState } from 'react';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
+import { signupSchema } from '../utils/validate';
+
+type FormFields = z.infer
+
+ + 영화 검색 +
+ +
+ {movies.length > 0 ? (
+ <>
+
+ ) : (
+ + 검색 결과 ({movies.length}개) +
+
+
+ ) : null}
+ 검색 결과가 없습니다.
+
+
+ )}
+ 영화를 검색하세요
+{message}
+);
+
+const EmailStep = ({
+ register,
+ errors,
+ watchedValues,
+ nextStep,
+}: EmailStepProps) => (
+ <>
+
+
+ {errors?.email &&
+
+
+);
+
+const PasswordStep = ({
+ register,
+ errors,
+ watchedValues,
+ showPassword,
+ showPasswordCheck,
+ togglePassword,
+ togglePasswordCheck,
+ nextStep,
+ prevStep,
+}: PasswordStepProps) => (
+ <>
+
+
+ 이메일: {watchedValues.email}
+
+
+
+ {errors?.password &&
+
+
+
+
+ {errors?.passwordCheck && (
+
+
+
+
+
+
+
+);
+
+const NameStep = ({
+ register,
+ errors,
+ watchedValues,
+ isSubmitting,
+ prevStep,
+ onSubmit,
+}: NameStepProps) => (
+ <>
+
+
+ 이메일: {watchedValues.email}
+비밀번호: {watchedValues.password}
+
+
+ {errors?.name &&
+
+
+
+
+
+
+);
+
+const SignupPage = () => {
+ const [step, setStep] = useState
+
+ );
+};
+
+export default SignupPage;
diff --git a/Week10/wantkdd/mission1/src/pages/signupPage.tsx b/Week10/wantkdd/mission1/src/pages/signupPage.tsx
new file mode 100644
index 00000000..670dc134
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/signupPage.tsx
@@ -0,0 +1,163 @@
+import { z } from 'zod';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { postSignup } from '../apis/auth';
+import { useState } from 'react';
+import { FiEye, FiEyeOff } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
+
+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
+
+
+
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/Week10/wantkdd/mission1/src/pages/top-rated-movies.tsx b/Week10/wantkdd/mission1/src/pages/top-rated-movies.tsx
new file mode 100644
index 00000000..1031491d
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/top-rated-movies.tsx
@@ -0,0 +1,29 @@
+import MovieForm from '../components/movie-form';
+import Pagination from '../components/pagination';
+import { useMovies } from '../hooks/useMovies';
+
+const TopRatedMoviesPage = () => {
+ const { movies, isLoading, error, page, nextPage, prevPage } =
+ useMovies('top_rated');
+
+ if (error) {
+ return (
+
+ {error}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default TopRatedMoviesPage;
diff --git a/Week10/wantkdd/mission1/src/pages/upcoming-movies.tsx b/Week10/wantkdd/mission1/src/pages/upcoming-movies.tsx
new file mode 100644
index 00000000..4f6d73b1
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/pages/upcoming-movies.tsx
@@ -0,0 +1,29 @@
+import MovieForm from '../components/movie-form';
+import Pagination from '../components/pagination';
+import { useMovies } from '../hooks/useMovies';
+
+const UpcomingMoviesPage = () => {
+ const { movies, isLoading, error, page, nextPage, prevPage } =
+ useMovies('upcoming');
+
+ if (error) {
+ return (
+
+ {error}
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default UpcomingMoviesPage;
diff --git a/Week10/wantkdd/mission1/src/types/auth.ts b/Week10/wantkdd/mission1/src/types/auth.ts
new file mode 100644
index 00000000..95c50e87
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/types/auth.ts
@@ -0,0 +1,40 @@
+import { CommonRespense } from './common';
+
+export type RequestSignupDto = {
+ name: string;
+ email: string;
+ bio?: string;
+ avatar?: string;
+ password: string;
+};
+
+export type ResponseSignupDto = CommonRespense<{
+ id: number;
+ name: string;
+ email: string;
+ bio: null | string;
+ avatar: null | string;
+ createdAt: Date;
+ updatedAt: Date;
+}>;
+
+export type RequestSigninDto = {
+ email: string;
+ password: string;
+};
+export type ResponseSigninDto = CommonRespense<{
+ id: number;
+ name: string;
+ accessToken: string;
+ refreshToken: string;
+}>;
+
+export type ResponseMyInfoDto = CommonRespense<{
+ id: number;
+ name: string;
+ email: string;
+ bio: null | string;
+ avatar: null | string;
+ createdAt: Date;
+ updatedAt: Date;
+}>;
diff --git a/Week10/wantkdd/mission1/src/types/common.ts b/Week10/wantkdd/mission1/src/types/common.ts
new file mode 100644
index 00000000..48e1bc98
--- /dev/null
+++ b/Week10/wantkdd/mission1/src/types/common.ts
@@ -0,0 +1,6 @@
+export type CommonRespense