+
+ );
+}
+
+export default App;
diff --git a/judy/Week2/ToDoList/src/assets/react.svg b/judy/Week2/ToDoList/src/assets/react.svg
new file mode 100644
index 00000000..6c87de9b
--- /dev/null
+++ b/judy/Week2/ToDoList/src/assets/react.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/judy/Week2/ToDoList/src/components/CompletedTodoList/CompletedTodoList.tsx b/judy/Week2/ToDoList/src/components/CompletedTodoList/CompletedTodoList.tsx
new file mode 100644
index 00000000..028302b1
--- /dev/null
+++ b/judy/Week2/ToDoList/src/components/CompletedTodoList/CompletedTodoList.tsx
@@ -0,0 +1,25 @@
+import { useTodo } from "../../hook/useTodo";
+
+export const CompletedTodoList = () => {
+ const { completeTodoList, deleteTodo } = useTodo();
+ return (
+ YONG TODO
+
+
+
+
+ );
+};
diff --git a/judy/Week2/ToDoList/src/components/TodoForm/TodoForm.tsx b/judy/Week2/ToDoList/src/components/TodoForm/TodoForm.tsx
new file mode 100644
index 00000000..6909f448
--- /dev/null
+++ b/judy/Week2/ToDoList/src/components/TodoForm/TodoForm.tsx
@@ -0,0 +1,23 @@
+import { useTodo } from "../../hook/useTodo";
+
+export const TodoForm = () => {
+ const { text, onChange, addTodo } = useTodo();
+ return (
+
+ );
+};
diff --git a/judy/Week2/ToDoList/src/components/TodoList/TodoItem.tsx b/judy/Week2/ToDoList/src/components/TodoList/TodoItem.tsx
new file mode 100644
index 00000000..855407e0
--- /dev/null
+++ b/judy/Week2/ToDoList/src/components/TodoList/TodoItem.tsx
@@ -0,0 +1,17 @@
+import { Todo } from "../../App";
+import { useTodo } from "../../hook/useTodo";
+
+export const TodoItem = ({ todo }: { todo: Todo }) => {
+ const { completeTodo } = useTodo();
+ return (
+ 완료
+-
+ {completeTodoList.map((todo) => {
+ return (
+
+
+ );
+ })}
+ {todo.content}
+
+
+
+ );
+};
diff --git a/judy/Week2/ToDoList/src/components/TodoList/TodoList.tsx b/judy/Week2/ToDoList/src/components/TodoList/TodoList.tsx
new file mode 100644
index 00000000..c39b0394
--- /dev/null
+++ b/judy/Week2/ToDoList/src/components/TodoList/TodoList.tsx
@@ -0,0 +1,16 @@
+import { useTodo } from "../../hook/useTodo";
+import { TodoItem } from "./TodoItem";
+
+export const TodoList = () => {
+ const { todoList } = useTodo();
+ return (
+ {todo.content}
+
+
+
+ );
+};
diff --git a/judy/Week2/ToDoList/src/context/TodoProvider.tsx b/judy/Week2/ToDoList/src/context/TodoProvider.tsx
new file mode 100644
index 00000000..775e3169
--- /dev/null
+++ b/judy/Week2/ToDoList/src/context/TodoProvider.tsx
@@ -0,0 +1,66 @@
+import { createContext, ReactNode, useState } from "react";
+
+export interface Todo {
+ content: string;
+ id: number;
+}
+
+interface TodoContextType {
+ text: string;
+ todoList: Todo[];
+ completeTodoList: Todo[];
+ onChange: (e: React.ChangeEvent할 일
+-
+ {todoList.map((todo) => {
+ return
+ 
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 회원가입 입력 */}
+ OR
+
+
+
+ {errors.email && (
+
+
+ );
+};
diff --git a/judy/Week4/LP/src/components/signup/PasswordInput.tsx b/judy/Week4/LP/src/components/signup/PasswordInput.tsx
new file mode 100644
index 00000000..d618c676
--- /dev/null
+++ b/judy/Week4/LP/src/components/signup/PasswordInput.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import { MdEmail } from "react-icons/md";
+import { FaEyeSlash, FaRegEye } from "react-icons/fa";
+import { useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+
+interface Props {
+ nextStep: () => void;
+}
+
+export const PasswordInput = ({ nextStep }: Props) => {
+ const {
+ register,
+ watch,
+ formState: { errors },
+ } = useFormContext{errors.email.message}
+ )}
+
+
+
+ {/* 이메일 */}
+
+ );
+};
diff --git a/judy/Week4/LP/src/components/signup/ProfileInput.tsx b/judy/Week4/LP/src/components/signup/ProfileInput.tsx
new file mode 100644
index 00000000..7c27700a
--- /dev/null
+++ b/judy/Week4/LP/src/components/signup/ProfileInput.tsx
@@ -0,0 +1,55 @@
+import { FaRegCircleUser } from "react-icons/fa6";
+import { useNavigate } from "react-router-dom";
+import { SubmitHandler, useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+import { apiClient } from "../../api/apiClient";
+
+export const ProfileInput = () => {
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ } = useFormContext
+
+
+ {/* 비밀번호 입력 폼 */}
+
+
+
+ );
+};
diff --git a/judy/Week4/LP/src/context/SignupFormContext.tsx b/judy/Week4/LP/src/context/SignupFormContext.tsx
new file mode 100644
index 00000000..d91c8e33
--- /dev/null
+++ b/judy/Week4/LP/src/context/SignupFormContext.tsx
@@ -0,0 +1,42 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ReactNode } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+import { z } from "zod";
+
+const schema = z
+ .object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }),
+ password: z
+ .string()
+ .min(8, {
+ message: "비밀번호는 8자 이상이어야 합니다.",
+ })
+ .max(20, {
+ message: "비밀번호는 20자 이하이어야 합니다.",
+ }),
+ confirmPassword: z.string(),
+ name: z.string().min(1, {
+ message: "이름을 입력해주세요.",
+ }),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ path: ["confirmPassword"],
+ message: "비밀번호가 일치하지 않습니다.",
+ });
+
+export type FormFields = z.infer{errors.name.message}
+ )}
+
+
+
+
+ );
+};
diff --git a/judy/Week4/LP/src/layout/root-layout.tsx b/judy/Week4/LP/src/layout/root-layout.tsx
new file mode 100644
index 00000000..23156dab
--- /dev/null
+++ b/judy/Week4/LP/src/layout/root-layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+import { NavBar } from "./NavBar";
+
+export const RootLayout = () => {
+ return (
+ <>
+ 돌려돌려LP판
+
+
+
+ 로그인
+
+
+ 회원가입
+
+
+
+ );
+};
diff --git a/judy/Week4/LP/src/pages/SignupPage.tsx b/judy/Week4/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6fe5e2e9
--- /dev/null
+++ b/judy/Week4/LP/src/pages/SignupPage.tsx
@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { IoIosArrowBack } from "react-icons/io";
+import { Link } from "react-router-dom";
+import { EmailInput } from "../components/signup/EmailInput";
+import { PasswordInput } from "../components/signup/PasswordInput";
+import { ProfileInput } from "../components/signup/ProfileInput";
+import { SignupFormProvider } from "../context/SignupFormContext";
+
+export const SignupPage = () => {
+ const [step, setStep] = useState<"email" | "password" | "profile">("email");
+ return (
+
+ {/* 로그인 header */}
+
+
+
+
+ {/* 소셜 로그인 */}
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 로그인 입력 */}
+ OR
+
+
+
+ {errors?.email && touched?.email && (
+
+ {errors?.email}
+ )}
+
+ {errors?.password && touched?.password && (
+ {errors?.password}
+ )}
+
+
+
+
+ {/* 회원가입 header */}
+ setStep("password")} />
+ )}
+ {step === "password" && (
+ setStep("profile")} />
+ )}
+ {step === "profile" &&
+
+
+
+ {/* 이메일 입력 */}
+ {step === "email" && (
+
+
+ );
+};
diff --git a/judy/Week4/Movie/src/components/common/LoadingPage.tsx b/judy/Week4/Movie/src/components/common/LoadingPage.tsx
new file mode 100644
index 00000000..d0ebf616
--- /dev/null
+++ b/judy/Week4/Movie/src/components/common/LoadingPage.tsx
@@ -0,0 +1,7 @@
+export const LoadingPage = () => {
+ return (
+ 영화를 불러올 수 없습니다🥹
+
+
+
+ );
+};
diff --git a/judy/Week4/Movie/src/components/movieList/MovieCard.tsx b/judy/Week4/Movie/src/components/movieList/MovieCard.tsx
new file mode 100644
index 00000000..78d94af8
--- /dev/null
+++ b/judy/Week4/Movie/src/components/movieList/MovieCard.tsx
@@ -0,0 +1,36 @@
+import { useNavigate } from "react-router-dom";
+import { Movie } from "../../types/movieType";
+
+interface Props {
+ movie: Movie;
+}
+
+export const MovieCard = ({ movie }: Props) => {
+ const navigate = useNavigate();
+ const onClickMovie = (movieId: number) => {
+ navigate(`/movie/detail/${movieId}`);
+ };
+
+ return (
+ onClickMovie(movie.id)}
+ >
+ 
+
+ );
+};
diff --git a/judy/Week4/Movie/src/components/movieList/Pagination.tsx b/judy/Week4/Movie/src/components/movieList/Pagination.tsx
new file mode 100644
index 00000000..e748e7ec
--- /dev/null
+++ b/judy/Week4/Movie/src/components/movieList/Pagination.tsx
@@ -0,0 +1,42 @@
+import clsx from "clsx";
+
+interface Props {
+ page: number;
+ setPage: React.Dispatch
+
+
+ {movie.title}
+
+ {movie.overview.length > 50
+ ? movie.overview.substring(0, 50) + "..."
+ : movie.overview}
+
+
+
+
+ );
+};
diff --git a/judy/Week4/Movie/src/hooks/useCustomFetch.ts b/judy/Week4/Movie/src/hooks/useCustomFetch.ts
new file mode 100644
index 00000000..992c32d0
--- /dev/null
+++ b/judy/Week4/Movie/src/hooks/useCustomFetch.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+
+interface ApiResponse{page} 페이지
+
+ HomePage
;
+};
diff --git a/judy/Week4/Movie/src/page/MovieDetailPage.tsx b/judy/Week4/Movie/src/page/MovieDetailPage.tsx
new file mode 100644
index 00000000..6e6d5f99
--- /dev/null
+++ b/judy/Week4/Movie/src/page/MovieDetailPage.tsx
@@ -0,0 +1,117 @@
+import { IFCredits, IFmovieInfo } from "../types/movieDetailType";
+import { ErrorPage } from "../components/common/ErrorPage";
+import { LoadingPage } from "../components/common/LoadingPage";
+import useCostomFetch from "../hooks/useCustomFetch";
+
+export const MovieDetailPage = () => {
+ const movieId = window.location.pathname.split("/")[3];
+
+ const {
+ data: movieData,
+ loading: movieLoading,
+ error: movieError,
+ } = useCostomFetch
+
+ )}
+
+ );
+};
diff --git a/judy/Week4/Movie/src/page/MovieListPage.tsx b/judy/Week4/Movie/src/page/MovieListPage.tsx
new file mode 100644
index 00000000..896b0e8b
--- /dev/null
+++ b/judy/Week4/Movie/src/page/MovieListPage.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import { MovieResponse } from "../types/movieType";
+import { MovieCard } from "../components/movieList/MovieCard";
+import { Pagination } from "../components/movieList/Pagination";
+import { ErrorPage } from "../components/common/ErrorPage";
+import { LoadingPage } from "../components/common/LoadingPage";
+import useCostomFetch from "../hooks/useCustomFetch";
+
+export const MovieListPage = () => {
+ const [page, setPage] = useState
+ 
+
+
+
+
+ {/* 제목 */}
+
+ {movieData?.original_title}
+ {/* 내용 */} +
+ {movieData?.overview}
+
+ {/* 평점 */}
+
+ 평점:{" "}
+ {movieData?.vote_average.toFixed(2)}
+
+ {/* 출연진 */}
+
+
+
+ {/* 제작진 */}
+ 출연진
+
+ {creditsData?.cast.map((actor) => (
+ <>
+ {actor.profile_path && (
+
+
+ 
+
+ )}
+
+ ))}
+
+
+ {actor.name.length > 10
+ ? actor.name.substring(0, 12) + "..."
+ : actor.name}
+
+
+
+
+ 제작진
+
+ {creditsData?.crew.map((cr) => (
+ <>
+ {cr.profile_path && (
+
+
+ 
+
+ )}
+
+ ))}
+
+
+ {cr.name.length > 10
+ ? cr.name.substring(0, 10) + "..."
+ : cr.name}
+
+
+
+ 제작회사
+
+ {movieData?.production_companies.map((company) => (
+
+
+ 
+
+ ))}
+
+ {company.name}
+
+
+ {movies?.results?.map((movie) => (
+
+
+ )}
+
+ );
+};
diff --git a/judy/Week4/Movie/src/types/movieDetailType.ts b/judy/Week4/Movie/src/types/movieDetailType.ts
new file mode 100644
index 00000000..56885686
--- /dev/null
+++ b/judy/Week4/Movie/src/types/movieDetailType.ts
@@ -0,0 +1,85 @@
+interface IFGenre {
+ id: number;
+ name: string;
+}
+
+interface IFProductionCompany {
+ id: number;
+ logo_path: string;
+ name: string;
+ origin_country: string;
+}
+
+interface IFProductionCountries {
+ iso_3166_1: string;
+ name: string;
+}
+
+interface IFSpokenLanguages {
+ english_name: string;
+ iso_639_1: string;
+ name: string;
+}
+
+export interface IFmovieInfo {
+ adult: boolean;
+ backdrop_path: string;
+ belongs_to_collection: null;
+ budget: number;
+ genres: IFGenre[];
+ homepage: string;
+ id: number;
+ imdb_id: string;
+ original_language: string;
+ original_title: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ production_companies: IFProductionCompany[];
+ production_countries: IFProductionCountries[];
+ release_date: string;
+ revenue: number;
+ runtime: number;
+ spoken_languages: IFSpokenLanguages[];
+ status: string;
+ tagline: string;
+ title: string;
+ video: boolean;
+ vote_average: number;
+ vote_count: number;
+}
+
+interface IFCast {
+ adult: boolean;
+ gender: number;
+ id: number;
+ known_for_department: string;
+ name: string;
+ original_name: string;
+ popularity: number;
+ profile_path: string;
+ cast_id: number;
+ character: string;
+ credit_id: string;
+ order: number;
+}
+
+interface IFCrew {
+ adult: boolean;
+ gender: number;
+ id: number;
+ known_for_department: string;
+ name: string;
+ original_name: string;
+ popularity: number;
+ profile_path: string;
+ credit_id: string;
+ department: string;
+ job: string;
+}
+
+export interface IFCredits {
+ id: number;
+ cast: IFCast[];
+ crew: IFCrew[];
+}
diff --git a/judy/Week4/Movie/src/types/movieType.ts b/judy/Week4/Movie/src/types/movieType.ts
new file mode 100644
index 00000000..9c69fbbd
--- /dev/null
+++ b/judy/Week4/Movie/src/types/movieType.ts
@@ -0,0 +1,27 @@
+export type Movie = {
+ adult: boolean;
+ backdrop_path: string;
+ genre_ids: number[];
+ id: number;
+ original_language: string;
+ original_title: string;
+ overview: string;
+ popularity: number;
+ poster_path: string;
+ release_date: string;
+ title: string;
+ video: boolean;
+ vote_average: number;
+ vote_count: number;
+};
+
+export type MovieResponse = {
+ dates: {
+ maximum: string;
+ minimum: string;
+ };
+ page: number;
+ results: Movie[];
+ total_pages: number;
+ total_results: number;
+};
diff --git a/judy/Week4/Movie/src/vite-env.d.ts b/judy/Week4/Movie/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/judy/Week4/Movie/src/vite-env.d.ts
@@ -0,0 +1 @@
+///