+
+ );
+}
+
+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
+
+ );
+};
diff --git a/judy/Week3/Movie/src/components/common/LoadingPage.tsx b/judy/Week3/Movie/src/components/common/LoadingPage.tsx
new file mode 100644
index 00000000..d0ebf616
--- /dev/null
+++ b/judy/Week3/Movie/src/components/common/LoadingPage.tsx
@@ -0,0 +1,7 @@
+export const LoadingPage = () => {
+ return (
+ 영화를 불러올 수 없습니다🥹
+
+
+
+ );
+};
diff --git a/judy/Week3/Movie/src/components/movieList/MovieCard.tsx b/judy/Week3/Movie/src/components/movieList/MovieCard.tsx
new file mode 100644
index 00000000..78d94af8
--- /dev/null
+++ b/judy/Week3/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/Week3/Movie/src/components/movieList/Pagination.tsx b/judy/Week3/Movie/src/components/movieList/Pagination.tsx
new file mode 100644
index 00000000..e748e7ec
--- /dev/null
+++ b/judy/Week3/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/Week3/Movie/src/index.css b/judy/Week3/Movie/src/index.css
new file mode 100644
index 00000000..f1d8c73c
--- /dev/null
+++ b/judy/Week3/Movie/src/index.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/judy/Week3/Movie/src/layout/Navbar.tsx b/judy/Week3/Movie/src/layout/Navbar.tsx
new file mode 100644
index 00000000..0a7a4997
--- /dev/null
+++ b/judy/Week3/Movie/src/layout/Navbar.tsx
@@ -0,0 +1,57 @@
+import clsx from "clsx";
+import { useNavigate } from "react-router-dom";
+
+export const Navbar = () => {
+ const navigate = useNavigate();
+ const pathname = window.location.pathname;
+
+ return (
+
+ );
+};
diff --git a/judy/Week3/Movie/src/layout/root-layout.tsx b/judy/Week3/Movie/src/layout/root-layout.tsx
new file mode 100644
index 00000000..3e3bb2ea
--- /dev/null
+++ b/judy/Week3/Movie/src/layout/root-layout.tsx
@@ -0,0 +1,11 @@
+import { Outlet } from "react-router-dom";
+import { Navbar } from "./Navbar";
+
+export const RootLayout = () => {
+ return (
+ <>
+ {page} 페이지
+
+ HomePage
;
+};
diff --git a/judy/Week3/Movie/src/page/MovieDetailPage.tsx b/judy/Week3/Movie/src/page/MovieDetailPage.tsx
new file mode 100644
index 00000000..9fa39e84
--- /dev/null
+++ b/judy/Week3/Movie/src/page/MovieDetailPage.tsx
@@ -0,0 +1,151 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { IFCredits, IFmovieInfo } from "../types/movieDetailType";
+import { ErrorPage } from "../components/common/ErrorPage";
+import { LoadingPage } from "../components/common/LoadingPage";
+
+export const MovieDetailPage = () => {
+ const [movie, setMovie] = useState
+
+ )}
+
+ );
+};
diff --git a/judy/Week3/Movie/src/page/MovieListPage.tsx b/judy/Week3/Movie/src/page/MovieListPage.tsx
new file mode 100644
index 00000000..a693aff7
--- /dev/null
+++ b/judy/Week3/Movie/src/page/MovieListPage.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { Movie, 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";
+
+export const MovieListPage = () => {
+ const [page, setPage] = useState
+ 
+
+
+
+
+ {/* 제목 */}
+
+ {movie?.original_title}
+ {/* 내용 */} +
+ {movie?.overview}
+
+ {/* 평점 */}
+
+ 평점:{" "}
+ {movie?.vote_average.toFixed(2)}
+
+ {/* 출연진 */}
+
+
+
+ {/* 제작진 */}
+ 출연진
+
+ {credit?.cast.map((actor) => (
+ <>
+ {actor.profile_path && (
+
+
+ 
+
+ )}
+
+ ))}
+
+
+ {actor.name.length > 10
+ ? actor.name.substring(0, 12) + "..."
+ : actor.name}
+
+
+
+
+ 제작진
+
+ {credit?.crew.map((cr) => (
+ <>
+ {cr.profile_path && (
+
+
+ 
+
+ )}
+
+ ))}
+
+
+ {cr.name.length > 10
+ ? cr.name.substring(0, 10) + "..."
+ : cr.name}
+
+
+
+ 제작회사
+
+ {movie?.production_companies.map((company) => (
+
+
+ 
+
+ ))}
+
+ {company.name}
+
+
+ {movies?.map((movie) => (
+
+
+ )}
+
+ );
+};
diff --git a/judy/Week3/Movie/src/types/movieDetailType.ts b/judy/Week3/Movie/src/types/movieDetailType.ts
new file mode 100644
index 00000000..ab31d7af
--- /dev/null
+++ b/judy/Week3/Movie/src/types/movieDetailType.ts
@@ -0,0 +1,59 @@
+export interface IFmovieGenres {
+ id: number;
+ name: string;
+}
+
+export interface IFmovieCompany {
+ id: number;
+ logo_path: string;
+ name: string;
+ origin_country: string;
+}
+
+export interface IFmovieInfo {
+ id: number;
+ backdrop_path: string;
+ genres: IFmovieGenres[];
+ original_title: string;
+ title: string;
+ overview: string;
+ poster_path: string;
+ release_date: string;
+ production_companies: IFmovieCompany[];
+ vote_average: number;
+}
+
+export 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;
+}
+
+export interface IFCrew {
+ adult: boolean;
+ credit_id: string;
+ department: string;
+ gender: number;
+ id: number;
+ job: string;
+ known_for_department: string;
+ name: string;
+ original_name: string;
+ popularity: number;
+ profile_path: string;
+}
+
+export interface IFCredits {
+ id: number;
+ cast: IFCast[];
+ crew: IFCrew[];
+}
diff --git a/judy/Week3/Movie/src/types/movieType.ts b/judy/Week3/Movie/src/types/movieType.ts
new file mode 100644
index 00000000..9c69fbbd
--- /dev/null
+++ b/judy/Week3/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/Week3/Movie/src/vite-env.d.ts b/judy/Week3/Movie/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/judy/Week3/Movie/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+ 
+ 구글로그인
+
+
+
+ {/* 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 @@
+///
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 회원가입 입력 */}
+ OR
+
+
+
+ {errors.email && (
+
+
+ );
+};
diff --git a/judy/Week5/LP/src/components/signup/PasswordInput.tsx b/judy/Week5/LP/src/components/signup/PasswordInput.tsx
new file mode 100644
index 00000000..0383acc9
--- /dev/null
+++ b/judy/Week5/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/Week5/LP/src/components/signup/ProfileInput.tsx b/judy/Week5/LP/src/components/signup/ProfileInput.tsx
new file mode 100644
index 00000000..f9484ea7
--- /dev/null
+++ b/judy/Week5/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/Week5/LP/src/context/SignupFormContext.tsx b/judy/Week5/LP/src/context/SignupFormContext.tsx
new file mode 100644
index 00000000..d91c8e33
--- /dev/null
+++ b/judy/Week5/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/Week5/LP/src/layout/ProtectedLayout.tsx b/judy/Week5/LP/src/layout/ProtectedLayout.tsx
new file mode 100644
index 00000000..6835ec61
--- /dev/null
+++ b/judy/Week5/LP/src/layout/ProtectedLayout.tsx
@@ -0,0 +1,16 @@
+import { Navigate, Outlet } from "react-router-dom";
+import { NavBar } from "./NavBar";
+
+export const ProtectedLayout = () => {
+ const accessToken = window.localStorage.getItem("accessToken");
+
+ if (!accessToken) {
+ return 돌려돌려LP판
+
+ {isLogin ? (
+ <>
+
+ 마이페이지
+
+
+ ) : (
+ <>
+
+ 로그인
+
+
+ 회원가입
+
+
+ )}
+
+ 로그인 중...
;
+};
diff --git a/judy/Week5/LP/src/pages/HomePage.tsx b/judy/Week5/LP/src/pages/HomePage.tsx
new file mode 100644
index 00000000..5665664a
--- /dev/null
+++ b/judy/Week5/LP/src/pages/HomePage.tsx
@@ -0,0 +1,3 @@
+export const HomePage = () => {
+ return 홈페이지
;
+};
diff --git a/judy/Week5/LP/src/pages/LoginPage.tsx b/judy/Week5/LP/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..04e1dd45
--- /dev/null
+++ b/judy/Week5/LP/src/pages/LoginPage.tsx
@@ -0,0 +1,119 @@
+import clsx from "clsx";
+
+import { IoIosArrowBack } from "react-icons/io";
+import { Link, useNavigate } from "react-router-dom";
+import { UserSigninInfomation, validateSignin } from "../utils/regex";
+import useForm from "../hooks/useForm";
+import { apiClient } from "../api/apiClient";
+import { LoginRequest } from "../types/LoginType";
+import { useEffect } from "react";
+
+export const LoginPage = () => {
+ const navigate = useNavigate();
+ const accessToken = window.localStorage.getItem("accessToken");
+ const { values, errors, touched, getInputProps } =
+ useForm
+
+ );
+};
diff --git a/judy/Week5/LP/src/pages/MyPage.tsx b/judy/Week5/LP/src/pages/MyPage.tsx
new file mode 100644
index 00000000..472905ab
--- /dev/null
+++ b/judy/Week5/LP/src/pages/MyPage.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { FaUserCircle } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+interface IFMyInfo {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+}
+
+interface IFLogout {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: null;
+}
+
+export const MyPage = () => {
+ const [myInfo, setMyInfo] = useState
+ {/* 로그인 header */}
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 소셜 로그인 */}
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 로그인 입력 */}
+ OR
+
+
+
+ {errors?.email && touched?.email && (
+
+ {errors?.email}
+ )}
+
+ {errors?.password && touched?.password && (
+ {errors?.password}
+ )}
+
+
+
+ );
+};
diff --git a/judy/Week5/LP/src/pages/SignupPage.tsx b/judy/Week5/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6fe5e2e9
--- /dev/null
+++ b/judy/Week5/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 */}
+ setStep("password")} />
+ )}
+ {step === "password" && (
+ setStep("profile")} />
+ )}
+ {step === "profile" &&
+
+
+
+ {/* 이메일 입력 */}
+ {step === "email" && (
+
+ {commentContent.author.avatar ? (
+ 
+ ) : (
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/LpDetail/CommentList.tsx b/judy/Week6/LP/src/components/LpDetail/CommentList.tsx
new file mode 100644
index 00000000..f0a1c972
--- /dev/null
+++ b/judy/Week6/LP/src/components/LpDetail/CommentList.tsx
@@ -0,0 +1,137 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
+import { apiClient } from "../../api/apiClient";
+import { CommentSkeleton } from "./CommentSkeleton";
+import { Comment } from "./Comment";
+
+export const CommentList = () => {
+ const pathname = window.location.pathname;
+ const lpId = pathname.split("/")[2];
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const commentContainerRef = useRef
+
+ {commentContent.author.name}
+ {commentContent.content}
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/LpDetail/CommentSkeleton.tsx b/judy/Week6/LP/src/components/LpDetail/CommentSkeleton.tsx
new file mode 100644
index 00000000..4ecfa5cb
--- /dev/null
+++ b/judy/Week6/LP/src/components/LpDetail/CommentSkeleton.tsx
@@ -0,0 +1,12 @@
+export const CommentSkeleton = () => {
+ return (
+
+
+
+ {/* 댓글 입력란 */}
+ 댓글
+
+ {
+ if (order !== "asc") {
+ setOrder("asc");
+ }
+ }}
+ >
+ 오래된 순
+ {" "}
+ {
+ if (order !== "desc") {
+ setOrder("desc");
+ }
+ }}
+ >
+ 최신순
+
+
+
+
+
+
+
+ {/* 댓글 목록 */}
+
+ {!data || isLoading
+ ? Array.from({ length: 10 }).map((_, i) => (
+
+
+
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/homePage/LpCard.tsx b/judy/Week6/LP/src/components/homePage/LpCard.tsx
new file mode 100644
index 00000000..a50c1be7
--- /dev/null
+++ b/judy/Week6/LP/src/components/homePage/LpCard.tsx
@@ -0,0 +1,40 @@
+import { FaHeart } from "react-icons/fa";
+import { IFLpContent } from "../../pages/HomePage";
+import { formatDistanceToNow } from "date-fns";
+import { useNavigate } from "react-router-dom";
+
+interface Props {
+ content: IFLpContent;
+}
+
+export const LpCard = ({ content }: Props) => {
+ const navigate = useNavigate();
+ const timeAgo = formatDistanceToNow(content.created, {
+ addSuffix: true,
+ });
+ return (
+
+
+
+
+ navigate(`/lp/${content.id}`)}
+ >
+ {/* 배경 흐림 */}
+
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/homePage/LpCardSkeleton.tsx b/judy/Week6/LP/src/components/homePage/LpCardSkeleton.tsx
new file mode 100644
index 00000000..15a2c6b6
--- /dev/null
+++ b/judy/Week6/LP/src/components/homePage/LpCardSkeleton.tsx
@@ -0,0 +1,3 @@
+export const LpCardSkeleton = () => {
+ return ;
+};
diff --git a/judy/Week6/LP/src/components/navBar/IsGuestNav.tsx b/judy/Week6/LP/src/components/navBar/IsGuestNav.tsx
new file mode 100644
index 00000000..8d41d8d6
--- /dev/null
+++ b/judy/Week6/LP/src/components/navBar/IsGuestNav.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+export const IsGuestNav = () => {
+ return (
+ <>
+
+ 로그인
+
+
+ 회원가입
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/navBar/IsLoginNav.tsx b/judy/Week6/LP/src/components/navBar/IsLoginNav.tsx
new file mode 100644
index 00000000..7e14959a
--- /dev/null
+++ b/judy/Week6/LP/src/components/navBar/IsLoginNav.tsx
@@ -0,0 +1,41 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../api/apiClient";
+import { useNavigate } from "react-router-dom";
+
+export const IsLoginNav = () => {
+ const navigate = useNavigate();
+
+ const getUserInfo = async () => {
+ const response = await apiClient.get("/users/me");
+ return response.data;
+ };
+
+ const userLogout = async () => {
+ try {
+ const response = await apiClient.post("/auth/signout");
+ if (response.data.statusCode === 201) {
+ window.localStorage.removeItem("accessToken");
+ window.localStorage.removeItem("refreshToken");
+ alert("로그아웃이 되었습니다.");
+ navigate("/login");
+ }
+ return response.data;
+ } catch (error) {
+ console.error("Logout error: ", error);
+ }
+ };
+
+ const { data } = useQuery({
+ queryKey: ["userInfo"],
+ queryFn: getUserInfo,
+ });
+
+ return (
+ <>
+ {`${data?.data.name}님 반갑습니다.`}
+
+ 로그아웃
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/signup/EmailInput.tsx b/judy/Week6/LP/src/components/signup/EmailInput.tsx
new file mode 100644
index 00000000..e921f83c
--- /dev/null
+++ b/judy/Week6/LP/src/components/signup/EmailInput.tsx
@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+
+interface Props {
+ nextStep: () => void;
+}
+
+export const EmailInput = ({ nextStep }: Props) => {
+ const {
+ register,
+ watch,
+ formState: { errors },
+ } = useFormContext
+
+
+
+ {content.title}
+ {timeAgo}
+
+
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 회원가입 입력 */}
+ OR
+
+
+
+ {errors.email && (
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/components/signup/PasswordInput.tsx b/judy/Week6/LP/src/components/signup/PasswordInput.tsx
new file mode 100644
index 00000000..0383acc9
--- /dev/null
+++ b/judy/Week6/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/Week6/LP/src/components/signup/ProfileInput.tsx b/judy/Week6/LP/src/components/signup/ProfileInput.tsx
new file mode 100644
index 00000000..f9484ea7
--- /dev/null
+++ b/judy/Week6/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/Week6/LP/src/context/SignupFormContext.tsx b/judy/Week6/LP/src/context/SignupFormContext.tsx
new file mode 100644
index 00000000..d91c8e33
--- /dev/null
+++ b/judy/Week6/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/Week6/LP/src/layout/ProtectedLayout.tsx b/judy/Week6/LP/src/layout/ProtectedLayout.tsx
new file mode 100644
index 00000000..e86bc779
--- /dev/null
+++ b/judy/Week6/LP/src/layout/ProtectedLayout.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from "react-router-dom";
+
+export const ProtectedLayout = () => {
+ const accessToken = window.localStorage.getItem("accessToken");
+
+ if (!accessToken) {
+ alert("로그인이 필요한 서비스입니다. 로그인을 해주세요!");
+ return
+
+
+
+
+ 돌려돌려LP판
+
+ {isLogin ?
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/layout/root-layout.tsx b/judy/Week6/LP/src/layout/root-layout.tsx
new file mode 100644
index 00000000..c6a5f539
--- /dev/null
+++ b/judy/Week6/LP/src/layout/root-layout.tsx
@@ -0,0 +1,21 @@
+import { Outlet, useLocation } from "react-router-dom";
+import { NavBar } from "./NavBar";
+import { SideBar } from "./SideBar";
+import { useState } from "react";
+
+export const RootLayout = () => {
+ const location = useLocation();
+ const pathname = location.pathname;
+ const [open, setOpen] = useState(true);
+ return (
+
+
+
+
+
+
+
+
+ 탈퇴하기
+
+ setOpen(!open)} />
+
+ );
+};
diff --git a/judy/Week6/LP/src/main.tsx b/judy/Week6/LP/src/main.tsx
new file mode 100644
index 00000000..048b00cb
--- /dev/null
+++ b/judy/Week6/LP/src/main.tsx
@@ -0,0 +1,9 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ <>
+
+ {pathname !== "/login" && pathname !== "/signup" && open &&
+
+
+ 로그인 중...
;
+};
diff --git a/judy/Week6/LP/src/pages/HomePage.tsx b/judy/Week6/LP/src/pages/HomePage.tsx
new file mode 100644
index 00000000..80724d26
--- /dev/null
+++ b/judy/Week6/LP/src/pages/HomePage.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { LpCard } from "../components/homePage/LpCard";
+import { LpCardSkeleton } from "../components/homePage/LpCardSkeleton";
+
+export interface IFLpContent {
+ id: number;
+ content: string;
+ thumbnail: string;
+ title: string;
+ likeCount: number;
+ created: string;
+}
+
+export const HomePage = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const [isScrollAtBottom, setIsScrollAtBottom] = useState(false);
+
+ const getLpList = async ({ pageParam = 0 }) => {
+ const response = await apiClient.get("/lps", {
+ params: {
+ cursor: pageParam,
+ limit: 25,
+ order,
+ },
+ });
+ return response.data;
+ };
+
+ const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ useInfiniteQuery({
+ queryKey: ["lpList", order],
+ queryFn: getLpList,
+ initialPageParam: 0,
+ getNextPageParam: (lastPage) =>
+ lastPage.data.hasNext ? lastPage.data.nextCursor : undefined,
+ });
+
+ // 스크롤 이벤트
+ useEffect(() => {
+ const handleScroll = () => {
+ // 화면 높이 + 스크롤된 높이가 전체 문서 높이에 가까우면
+ const isBottom =
+ window.innerHeight + window.scrollY >=
+ document.documentElement.scrollHeight - 100;
+
+ setIsScrollAtBottom(isBottom);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ // 스크롤이 하단에 도달하면 다음 페이지 로드
+ useEffect(() => {
+ if (isScrollAtBottom && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ // 페이지 로드 시작 후 상태 초기화
+ setIsScrollAtBottom(false);
+ }
+ }, [isScrollAtBottom, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ return (
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/pages/LoginPage.tsx b/judy/Week6/LP/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..c6ab3356
--- /dev/null
+++ b/judy/Week6/LP/src/pages/LoginPage.tsx
@@ -0,0 +1,119 @@
+import clsx from "clsx";
+
+import { IoIosArrowBack } from "react-icons/io";
+import { Link, useNavigate } from "react-router-dom";
+import { UserSigninInfomation, validateSignin } from "../utils/regex";
+import useForm from "../hooks/useForm";
+import { apiClient } from "../api/apiClient";
+import { LoginRequest } from "../types/LoginType";
+import { useEffect } from "react";
+
+export const LoginPage = () => {
+ const navigate = useNavigate();
+ const accessToken = window.localStorage.getItem("accessToken");
+ const { values, errors, touched, getInputProps } =
+ useForm
+ {
+ if (order !== "asc") {
+ setOrder("asc");
+ }
+ }}
+ >
+ 오래된 순
+ {" "}
+ {
+ if (order !== "desc") {
+ setOrder("desc");
+ }
+ }}
+ >
+ 최신순
+
+
+
+ {!data
+ ? Array.from({ length: 20 }).map((_, i) =>
+
+ {isFetchingNextPage && (
+
+ {Array.from({ length: 10 }).map((_, i) => (
+
+ )}
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/pages/LpDetail.tsx b/judy/Week6/LP/src/pages/LpDetail.tsx
new file mode 100644
index 00000000..88d5eb40
--- /dev/null
+++ b/judy/Week6/LP/src/pages/LpDetail.tsx
@@ -0,0 +1,79 @@
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "../api/apiClient";
+import { formatDistanceToNow } from "date-fns";
+import { FaHeart, FaPen, FaTrashAlt } from "react-icons/fa";
+import { CommentList } from "../components/LpDetail/CommentList";
+
+export const LpDetail = () => {
+ const pathname = window.location.pathname;
+ const lpId = pathname.split("/")[2];
+
+ const getLpDetail = async () => {
+ const response = await apiClient.get(`/lps/${lpId}`);
+ return response.data;
+ };
+
+ const { data, isLoading } = useQuery({
+ queryKey: ["lpDetail", lpId],
+ queryFn: getLpDetail,
+ });
+
+ if (isLoading) {
+ return
+ {/* 로그인 header */}
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 소셜 로그인 */}
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 로그인 입력 */}
+ OR
+
+
+
+ {errors?.email && touched?.email && (
+
+ {errors?.email}
+ )}
+
+ {errors?.password && touched?.password && (
+ {errors?.password}
+ )}
+
+ Loading...
;
+ }
+
+ const lpInfo = data.data;
+ console.log(lpInfo);
+
+ const timeAgo = formatDistanceToNow(lpInfo.author.createdAt, {
+ addSuffix: true,
+ });
+
+ return (
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/pages/MyPage.tsx b/judy/Week6/LP/src/pages/MyPage.tsx
new file mode 100644
index 00000000..472905ab
--- /dev/null
+++ b/judy/Week6/LP/src/pages/MyPage.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { FaUserCircle } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+interface IFMyInfo {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+}
+
+interface IFLogout {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: null;
+}
+
+export const MyPage = () => {
+ const [myInfo, setMyInfo] = useState
+ {/* 이름, 기간 */}
+
+
+
+
+ {/* 제목, 수정, 삭제 버튼 */}
+
+ 
+ {lpInfo.author.name}
+
+ {timeAgo}
+
+ {lpInfo.title}
+
+
+
+ {/* LP판 */}
+
+
+
+
+
+ {/* LP 설명 */}
+
+ 
+
+
+ {lpInfo.content}
+
+ {/* 태그 */}
+
+ {/* 좋아요 */}
+
+
+
+
+ );
+};
diff --git a/judy/Week6/LP/src/pages/SignupPage.tsx b/judy/Week6/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6fe5e2e9
--- /dev/null
+++ b/judy/Week6/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 */}
+ setStep("password")} />
+ )}
+ {step === "password" && (
+ setStep("profile")} />
+ )}
+ {step === "profile" &&
+
+
+
+ {/* 이메일 입력 */}
+ {step === "email" && (
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/LpDetail/CommentList.tsx b/judy/Week7/LP/src/components/LpDetail/CommentList.tsx
new file mode 100644
index 00000000..9a95b616
--- /dev/null
+++ b/judy/Week7/LP/src/components/LpDetail/CommentList.tsx
@@ -0,0 +1,189 @@
+import {
+ useInfiniteQuery,
+ useMutation,
+ useQueryClient,
+} from "@tanstack/react-query";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { apiClient } from "../../api/apiClient";
+import { CommentSkeleton } from "./CommentSkeleton";
+import { Comment } from "./Comment";
+
+export const CommentList = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const [comment, setComment] = useState
+ {commentContent.author.avatar ? (
+
+ ) : (
+
+
+ {isUserComment && (
+
+
+ {commentContent.author.name}
+
+ {modify ? (
+
+ ) : (
+ newComment
+ )}
+
+
+ {modify ? (
+ setMore(!more)}
+ />
+ )}
+
+ {more && (
+
+ )}
+
+ {
+ setModify(true);
+ setMore(false);
+ }}
+ />
+
+
+ )}
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/LpDetail/CommentSkeleton.tsx b/judy/Week7/LP/src/components/LpDetail/CommentSkeleton.tsx
new file mode 100644
index 00000000..4ecfa5cb
--- /dev/null
+++ b/judy/Week7/LP/src/components/LpDetail/CommentSkeleton.tsx
@@ -0,0 +1,12 @@
+export const CommentSkeleton = () => {
+ return (
+
+
+
+ {/* 댓글 입력란 */}
+ 댓글
+
+ {
+ if (order !== "asc") {
+ setOrder("asc");
+ }
+ }}
+ >
+ 오래된 순
+ {" "}
+ {
+ if (order !== "desc") {
+ setOrder("desc");
+ }
+ }}
+ >
+ 최신순
+
+
+
+
+
+
+
+ {/* 댓글 목록 */}
+
+ {!data || isLoading
+ ? Array.from({ length: 10 }).map((_, i) => (
+
+
+
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/common/BackgroundBlur.tsx b/judy/Week7/LP/src/components/common/BackgroundBlur.tsx
new file mode 100644
index 00000000..f43b7fb6
--- /dev/null
+++ b/judy/Week7/LP/src/components/common/BackgroundBlur.tsx
@@ -0,0 +1,11 @@
+interface Props {
+ children: React.ReactNode;
+}
+
+export const BackgroundBlur = ({ children }: Props) => {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/homePage/LpCard.tsx b/judy/Week7/LP/src/components/homePage/LpCard.tsx
new file mode 100644
index 00000000..a50c1be7
--- /dev/null
+++ b/judy/Week7/LP/src/components/homePage/LpCard.tsx
@@ -0,0 +1,40 @@
+import { FaHeart } from "react-icons/fa";
+import { IFLpContent } from "../../pages/HomePage";
+import { formatDistanceToNow } from "date-fns";
+import { useNavigate } from "react-router-dom";
+
+interface Props {
+ content: IFLpContent;
+}
+
+export const LpCard = ({ content }: Props) => {
+ const navigate = useNavigate();
+ const timeAgo = formatDistanceToNow(content.created, {
+ addSuffix: true,
+ });
+ return (
+ navigate(`/lp/${content.id}`)}
+ >
+ {/* 배경 흐림 */}
+
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/homePage/LpCardSkeleton.tsx b/judy/Week7/LP/src/components/homePage/LpCardSkeleton.tsx
new file mode 100644
index 00000000..15a2c6b6
--- /dev/null
+++ b/judy/Week7/LP/src/components/homePage/LpCardSkeleton.tsx
@@ -0,0 +1,3 @@
+export const LpCardSkeleton = () => {
+ return ;
+};
diff --git a/judy/Week7/LP/src/components/homePage/PostButton.tsx b/judy/Week7/LP/src/components/homePage/PostButton.tsx
new file mode 100644
index 00000000..c55d3267
--- /dev/null
+++ b/judy/Week7/LP/src/components/homePage/PostButton.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { BackgroundBlur } from "../common/BackgroundBlur";
+import { PostModal } from "./PostModal";
+
+export const PostButton = () => {
+ const [openModal, setOpenModal] = useState
+
+
+
+ {content.title}
+ {timeAgo}
+
+
+ setOpenModal(true)}
+ >
+ +
+
+
+ {openModal && (
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/homePage/Tag.tsx b/judy/Week7/LP/src/components/homePage/Tag.tsx
new file mode 100644
index 00000000..e0f23c60
--- /dev/null
+++ b/judy/Week7/LP/src/components/homePage/Tag.tsx
@@ -0,0 +1,15 @@
+import { IoClose } from "react-icons/io5";
+
+interface Props {
+ tag: string;
+ onRemove: () => void;
+}
+
+export const Tag = ({ tag, onRemove }: Props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {tag}
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/navBar/IsGuestNav.tsx b/judy/Week7/LP/src/components/navBar/IsGuestNav.tsx
new file mode 100644
index 00000000..8d41d8d6
--- /dev/null
+++ b/judy/Week7/LP/src/components/navBar/IsGuestNav.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+export const IsGuestNav = () => {
+ return (
+ <>
+
+ 로그인
+
+
+ 회원가입
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/navBar/IsLoginNav.tsx b/judy/Week7/LP/src/components/navBar/IsLoginNav.tsx
new file mode 100644
index 00000000..a3811fa9
--- /dev/null
+++ b/judy/Week7/LP/src/components/navBar/IsLoginNav.tsx
@@ -0,0 +1,46 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../api/apiClient";
+import { useNavigate } from "react-router-dom";
+
+export const IsLoginNav = () => {
+ const navigate = useNavigate();
+
+ const getUserInfo = async () => {
+ const response = await apiClient.get("/users/me");
+ return response.data;
+ };
+
+ const LogoutMutation = useMutation({
+ mutationFn: async () => {
+ await apiClient.post("/auth/signout");
+ },
+ onSuccess: () => {
+ localStorage.removeItem("accessToken");
+ localStorage.removeItem("refreshToken");
+ localStorage.removeItem("id");
+ navigate("/login");
+ },
+ onError: (err) => {
+ console.error(err);
+ alert("로그아웃에 실패했습니다.");
+ },
+ });
+
+ const userLogout = async () => {
+ LogoutMutation.mutate();
+ };
+
+ const { data } = useQuery({
+ queryKey: ["userInfo"],
+ queryFn: getUserInfo,
+ });
+
+ return (
+ <>
+ {`${data?.data.name}님 반갑습니다.`}
+
+ 로그아웃
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/sideBar/WithdrawalModal.tsx b/judy/Week7/LP/src/components/sideBar/WithdrawalModal.tsx
new file mode 100644
index 00000000..f05e5ee0
--- /dev/null
+++ b/judy/Week7/LP/src/components/sideBar/WithdrawalModal.tsx
@@ -0,0 +1,47 @@
+import { IoClose } from "react-icons/io5";
+import { withdrawalUser } from "../../api/userApi";
+
+interface Props {
+ handleClose: () => void;
+}
+
+export const WithdrawalModal = ({ handleClose }: Props) => {
+ const handleWithdrawal = async () => {
+ try {
+ await withdrawalUser();
+ console.log("회원탈퇴 완료");
+ localStorage.removeItem("accessToken");
+ localStorage.removeItem("refreshToken");
+ window.location.href = "/login";
+ } catch (err) {
+ console.log(err);
+ alert("탈퇴 중 오류가 발생했습니다.");
+ }
+ };
+ return (
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/signup/EmailInput.tsx b/judy/Week7/LP/src/components/signup/EmailInput.tsx
new file mode 100644
index 00000000..e921f83c
--- /dev/null
+++ b/judy/Week7/LP/src/components/signup/EmailInput.tsx
@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+
+interface Props {
+ nextStep: () => void;
+}
+
+export const EmailInput = ({ nextStep }: Props) => {
+ const {
+ register,
+ watch,
+ formState: { errors },
+ } = useFormContext
+
+
+
+
+ 정말 탈퇴하시겠습니까?
+
+
+
+
+
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 회원가입 입력 */}
+ OR
+
+
+
+ {errors.email && (
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/components/signup/PasswordInput.tsx b/judy/Week7/LP/src/components/signup/PasswordInput.tsx
new file mode 100644
index 00000000..0383acc9
--- /dev/null
+++ b/judy/Week7/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/Week7/LP/src/components/signup/ProfileInput.tsx b/judy/Week7/LP/src/components/signup/ProfileInput.tsx
new file mode 100644
index 00000000..f9484ea7
--- /dev/null
+++ b/judy/Week7/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/Week7/LP/src/context/SignupFormContext.tsx b/judy/Week7/LP/src/context/SignupFormContext.tsx
new file mode 100644
index 00000000..d91c8e33
--- /dev/null
+++ b/judy/Week7/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/Week7/LP/src/layout/ProtectedLayout.tsx b/judy/Week7/LP/src/layout/ProtectedLayout.tsx
new file mode 100644
index 00000000..e86bc779
--- /dev/null
+++ b/judy/Week7/LP/src/layout/ProtectedLayout.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from "react-router-dom";
+
+export const ProtectedLayout = () => {
+ const accessToken = window.localStorage.getItem("accessToken");
+
+ if (!accessToken) {
+ alert("로그인이 필요한 서비스입니다. 로그인을 해주세요!");
+ return
+
+
+
+
+ navigate("/")} + > + 돌려돌려LP판 +
+
+ {isLogin ?
+
+
+
+ {isWithdrawalModalOpen && (
+
+
+
+
+
+
+
+
+ setIsWithdrawalModalOpen(true)}
+ >
+ 탈퇴하기
+
+
+ setOpen(!open)} />
+
+ );
+};
diff --git a/judy/Week7/LP/src/main.tsx b/judy/Week7/LP/src/main.tsx
new file mode 100644
index 00000000..048b00cb
--- /dev/null
+++ b/judy/Week7/LP/src/main.tsx
@@ -0,0 +1,9 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ <>
+
+ {pathname !== "/login" && pathname !== "/signup" && open &&
+
+
+ 로그인 중...
;
+};
diff --git a/judy/Week7/LP/src/pages/HomePage.tsx b/judy/Week7/LP/src/pages/HomePage.tsx
new file mode 100644
index 00000000..b75a8039
--- /dev/null
+++ b/judy/Week7/LP/src/pages/HomePage.tsx
@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { LpCard } from "../components/homePage/LpCard";
+import { LpCardSkeleton } from "../components/homePage/LpCardSkeleton";
+import { PostButton } from "../components/homePage/PostButton";
+
+export interface IFLpContent {
+ id: number;
+ content: string;
+ thumbnail: string;
+ title: string;
+ likeCount: number;
+ created: string;
+}
+
+export const HomePage = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const [isScrollAtBottom, setIsScrollAtBottom] = useState(false);
+
+ const getLpList = async ({ pageParam = 0 }) => {
+ const response = await apiClient.get("/lps", {
+ params: {
+ cursor: pageParam,
+ limit: 25,
+ order,
+ },
+ });
+ return response.data;
+ };
+
+ const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ useInfiniteQuery({
+ queryKey: ["lpList", order],
+ queryFn: getLpList,
+ initialPageParam: 0,
+ getNextPageParam: (lastPage) =>
+ lastPage.data.hasNext ? lastPage.data.nextCursor : undefined,
+ });
+
+ // 스크롤 이벤트
+ useEffect(() => {
+ const handleScroll = () => {
+ // 화면 높이 + 스크롤된 높이가 전체 문서 높이에 가까우면
+ const isBottom =
+ window.innerHeight + window.scrollY >=
+ document.documentElement.scrollHeight - 100;
+
+ setIsScrollAtBottom(isBottom);
+ };
+
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, []);
+
+ // 스크롤이 하단에 도달하면 다음 페이지 로드
+ useEffect(() => {
+ if (isScrollAtBottom && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ // 페이지 로드 시작 후 상태 초기화
+ setIsScrollAtBottom(false);
+ }
+ }, [isScrollAtBottom, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ return (
+ <>
+
+
+
+
+ {
+ if (order !== "asc") {
+ setOrder("asc");
+ }
+ }}
+ >
+ 오래된 순
+ {" "}
+ {
+ if (order !== "desc") {
+ setOrder("desc");
+ }
+ }}
+ >
+ 최신순
+
+
+
+ {!data
+ ? Array.from({ length: 20 }).map((_, i) => (
+
+
+ {isFetchingNextPage && (
+
+ {Array.from({ length: 10 }).map((_, i) => (
+
+ )}
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/pages/LpDetail.tsx b/judy/Week7/LP/src/pages/LpDetail.tsx
new file mode 100644
index 00000000..6f9b5a0d
--- /dev/null
+++ b/judy/Week7/LP/src/pages/LpDetail.tsx
@@ -0,0 +1,306 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "../api/apiClient";
+import { formatDistanceToNow } from "date-fns";
+import { FaHeart, FaPen, FaRegHeart, FaTrashAlt } from "react-icons/fa";
+import { CommentList } from "../components/LpDetail/CommentList";
+import { ChangeEvent, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface UpdateRequest {
+ title: string;
+ content: string;
+ thumbnail: string;
+ tags: string[];
+ published: boolean;
+}
+
+export const LpDetail = () => {
+ const [modify, setModify] = useState
+ {/* 로그인 header */}
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 소셜 로그인 */}
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 로그인 입력 */}
+ OR
+
+
+
+ {errors?.email && touched?.email && (
+
+ {errors?.email}
+ )}
+
+ {errors?.password && touched?.password && (
+ {errors?.password}
+ )}
+
+ Loading...
;
+ }
+
+ const lpInfo = data.data;
+ console.log(lpInfo);
+
+ const timeAgo = formatDistanceToNow(lpInfo.createdAt, {
+ addSuffix: true,
+ });
+
+ return (
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/pages/MyPage.tsx b/judy/Week7/LP/src/pages/MyPage.tsx
new file mode 100644
index 00000000..85e0187c
--- /dev/null
+++ b/judy/Week7/LP/src/pages/MyPage.tsx
@@ -0,0 +1,248 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { FaCheck, FaUserCircle } from "react-icons/fa";
+import { TiPencil } from "react-icons/ti";
+import { useNavigate } from "react-router-dom";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface IFMyInfo {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+}
+
+interface IFLogout {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: null;
+}
+
+interface UserRequest {
+ name: string;
+ bio: string | null;
+ avatar: string | null;
+}
+
+export const MyPage = () => {
+ const [myInfo, setMyInfo] = useState
+ {/* 이름, 기간 */}
+
+
+
+
+ {/* 제목, 수정, 삭제 버튼 */}
+
+
+ {lpInfo.author.name}
+
+ {timeAgo}
+
+ {modify ? (
+
+ ) : (
+ {lpInfo.title}
+ )}
+
+ {Number(userId) === lpInfo.authorId && modify ? (
+
+
+ {/* LP판 */}
+
+ 수정
+
+ ) : (
+
+ setModify(true)}
+ />
+
+ )}
+
+
+
+ {/* LP 설명 */}
+ {modify ? (
+
+ ) : (
+
+
+
+
+ {lpInfo.content}
+ )}
+
+ {/* 태그 */}
+
+ {lpInfo.tags.map((lp: { id: number; name: string }) => (
+
+
+ {/* 좋아요 */}
+
+ # {lp.name}
+
+ ))}
+
+ {like ? (
+
+
+
+ );
+};
diff --git a/judy/Week7/LP/src/pages/SignupPage.tsx b/judy/Week7/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6fe5e2e9
--- /dev/null
+++ b/judy/Week7/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 (
+
+
+
+
+
+
+ {modify ? (
+ <>
+
+
+
+ ) : (
+ <>
+ {myInfo?.avatar ? (
+ 
+ ) : (
+
+
+
+
+ {modify ? (
+
+ ) : (
+ myInfo?.name
+ )}
+
+
+ {modify ? (
+
+ ) : (
+ myInfo?.bio || ""
+ )}
+
+ 이메일: {myInfo?.email}
+
+
+
+ 로그아웃
+
+
+
+
+ {/* 회원가입 header */}
+ setStep("password")} />
+ )}
+ {step === "password" && (
+ setStep("profile")} />
+ )}
+ {step === "profile" &&
+
+
+
+ {/* 이메일 입력 */}
+ {step === "email" && (
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/LpDetail/CommentList.tsx b/judy/Week8/LP/src/components/LpDetail/CommentList.tsx
new file mode 100644
index 00000000..9a95b616
--- /dev/null
+++ b/judy/Week8/LP/src/components/LpDetail/CommentList.tsx
@@ -0,0 +1,189 @@
+import {
+ useInfiniteQuery,
+ useMutation,
+ useQueryClient,
+} from "@tanstack/react-query";
+import { ChangeEvent, useEffect, useRef, useState } from "react";
+import { apiClient } from "../../api/apiClient";
+import { CommentSkeleton } from "./CommentSkeleton";
+import { Comment } from "./Comment";
+
+export const CommentList = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const [comment, setComment] = useState
+ {commentContent.author.avatar ? (
+
+ ) : (
+
+
+ {isUserComment && (
+
+
+ {commentContent.author.name}
+
+ {modify ? (
+
+ ) : (
+ newComment
+ )}
+
+
+ {modify ? (
+ setMore(!more)}
+ />
+ )}
+
+ {more && (
+
+ )}
+
+ {
+ setModify(true);
+ setMore(false);
+ }}
+ />
+
+
+ )}
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/LpDetail/CommentSkeleton.tsx b/judy/Week8/LP/src/components/LpDetail/CommentSkeleton.tsx
new file mode 100644
index 00000000..4ecfa5cb
--- /dev/null
+++ b/judy/Week8/LP/src/components/LpDetail/CommentSkeleton.tsx
@@ -0,0 +1,12 @@
+export const CommentSkeleton = () => {
+ return (
+
+
+
+ {/* 댓글 입력란 */}
+ 댓글
+
+ {
+ if (order !== "asc") {
+ setOrder("asc");
+ }
+ }}
+ >
+ 오래된 순
+ {" "}
+ {
+ if (order !== "desc") {
+ setOrder("desc");
+ }
+ }}
+ >
+ 최신순
+
+
+
+
+
+
+
+ {/* 댓글 목록 */}
+
+ {!data || isLoading
+ ? Array.from({ length: 10 }).map((_, i) => (
+
+
+
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/common/BackgroundBlur.tsx b/judy/Week8/LP/src/components/common/BackgroundBlur.tsx
new file mode 100644
index 00000000..f43b7fb6
--- /dev/null
+++ b/judy/Week8/LP/src/components/common/BackgroundBlur.tsx
@@ -0,0 +1,11 @@
+interface Props {
+ children: React.ReactNode;
+}
+
+export const BackgroundBlur = ({ children }: Props) => {
+ return (
+
+
+
+
+
+ {children}
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/homePage/LpCard.tsx b/judy/Week8/LP/src/components/homePage/LpCard.tsx
new file mode 100644
index 00000000..c769d0eb
--- /dev/null
+++ b/judy/Week8/LP/src/components/homePage/LpCard.tsx
@@ -0,0 +1,40 @@
+import { FaHeart } from "react-icons/fa";
+import { IFLpContent } from "../../pages/HomePage";
+import { formatDistanceToNow } from "date-fns";
+import { useNavigate } from "react-router-dom";
+
+interface Props {
+ content: IFLpContent;
+}
+
+export const LpCard = ({ content }: Props) => {
+ const navigate = useNavigate();
+ const timeAgo = formatDistanceToNow(content.created, {
+ addSuffix: true,
+ });
+ return (
+ navigate(`/lp/${content.id}`)}
+ >
+ {/* 배경 흐림 */}
+
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/homePage/LpCardSkeleton.tsx b/judy/Week8/LP/src/components/homePage/LpCardSkeleton.tsx
new file mode 100644
index 00000000..15a2c6b6
--- /dev/null
+++ b/judy/Week8/LP/src/components/homePage/LpCardSkeleton.tsx
@@ -0,0 +1,3 @@
+export const LpCardSkeleton = () => {
+ return ;
+};
diff --git a/judy/Week8/LP/src/components/homePage/PostButton.tsx b/judy/Week8/LP/src/components/homePage/PostButton.tsx
new file mode 100644
index 00000000..c55d3267
--- /dev/null
+++ b/judy/Week8/LP/src/components/homePage/PostButton.tsx
@@ -0,0 +1,23 @@
+import { useState } from "react";
+import { BackgroundBlur } from "../common/BackgroundBlur";
+import { PostModal } from "./PostModal";
+
+export const PostButton = () => {
+ const [openModal, setOpenModal] = useState
+
+
+
+ {content.title}
+ {timeAgo}
+
+
+ setOpenModal(true)}
+ >
+ +
+
+
+ {openModal && (
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/homePage/Tag.tsx b/judy/Week8/LP/src/components/homePage/Tag.tsx
new file mode 100644
index 00000000..e0f23c60
--- /dev/null
+++ b/judy/Week8/LP/src/components/homePage/Tag.tsx
@@ -0,0 +1,15 @@
+import { IoClose } from "react-icons/io5";
+
+interface Props {
+ tag: string;
+ onRemove: () => void;
+}
+
+export const Tag = ({ tag, onRemove }: Props) => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {tag}
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/navBar/IsGuestNav.tsx b/judy/Week8/LP/src/components/navBar/IsGuestNav.tsx
new file mode 100644
index 00000000..8d41d8d6
--- /dev/null
+++ b/judy/Week8/LP/src/components/navBar/IsGuestNav.tsx
@@ -0,0 +1,20 @@
+import { Link } from "react-router-dom";
+
+export const IsGuestNav = () => {
+ return (
+ <>
+
+ 로그인
+
+
+ 회원가입
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/navBar/IsLoginNav.tsx b/judy/Week8/LP/src/components/navBar/IsLoginNav.tsx
new file mode 100644
index 00000000..a3811fa9
--- /dev/null
+++ b/judy/Week8/LP/src/components/navBar/IsLoginNav.tsx
@@ -0,0 +1,46 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { apiClient } from "../../api/apiClient";
+import { useNavigate } from "react-router-dom";
+
+export const IsLoginNav = () => {
+ const navigate = useNavigate();
+
+ const getUserInfo = async () => {
+ const response = await apiClient.get("/users/me");
+ return response.data;
+ };
+
+ const LogoutMutation = useMutation({
+ mutationFn: async () => {
+ await apiClient.post("/auth/signout");
+ },
+ onSuccess: () => {
+ localStorage.removeItem("accessToken");
+ localStorage.removeItem("refreshToken");
+ localStorage.removeItem("id");
+ navigate("/login");
+ },
+ onError: (err) => {
+ console.error(err);
+ alert("로그아웃에 실패했습니다.");
+ },
+ });
+
+ const userLogout = async () => {
+ LogoutMutation.mutate();
+ };
+
+ const { data } = useQuery({
+ queryKey: ["userInfo"],
+ queryFn: getUserInfo,
+ });
+
+ return (
+ <>
+ {`${data?.data.name}님 반갑습니다.`}
+
+ 로그아웃
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/sideBar/WithdrawalModal.tsx b/judy/Week8/LP/src/components/sideBar/WithdrawalModal.tsx
new file mode 100644
index 00000000..f05e5ee0
--- /dev/null
+++ b/judy/Week8/LP/src/components/sideBar/WithdrawalModal.tsx
@@ -0,0 +1,47 @@
+import { IoClose } from "react-icons/io5";
+import { withdrawalUser } from "../../api/userApi";
+
+interface Props {
+ handleClose: () => void;
+}
+
+export const WithdrawalModal = ({ handleClose }: Props) => {
+ const handleWithdrawal = async () => {
+ try {
+ await withdrawalUser();
+ console.log("회원탈퇴 완료");
+ localStorage.removeItem("accessToken");
+ localStorage.removeItem("refreshToken");
+ window.location.href = "/login";
+ } catch (err) {
+ console.log(err);
+ alert("탈퇴 중 오류가 발생했습니다.");
+ }
+ };
+ return (
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/signup/EmailInput.tsx b/judy/Week8/LP/src/components/signup/EmailInput.tsx
new file mode 100644
index 00000000..e921f83c
--- /dev/null
+++ b/judy/Week8/LP/src/components/signup/EmailInput.tsx
@@ -0,0 +1,66 @@
+import clsx from "clsx";
+import { useFormContext } from "react-hook-form";
+import { FormFields } from "../../context/SignupFormContext";
+
+interface Props {
+ nextStep: () => void;
+}
+
+export const EmailInput = ({ nextStep }: Props) => {
+ const {
+ register,
+ watch,
+ formState: { errors },
+ } = useFormContext
+
+
+
+
+ 정말 탈퇴하시겠습니까?
+
+
+
+
+
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+ 구글로그인
+
+
+
+
+
+ {/* 회원가입 입력 */}
+ OR
+
+
+
+ {errors.email && (
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/components/signup/PasswordInput.tsx b/judy/Week8/LP/src/components/signup/PasswordInput.tsx
new file mode 100644
index 00000000..0383acc9
--- /dev/null
+++ b/judy/Week8/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/Week8/LP/src/components/signup/ProfileInput.tsx b/judy/Week8/LP/src/components/signup/ProfileInput.tsx
new file mode 100644
index 00000000..f9484ea7
--- /dev/null
+++ b/judy/Week8/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/Week8/LP/src/context/SignupFormContext.tsx b/judy/Week8/LP/src/context/SignupFormContext.tsx
new file mode 100644
index 00000000..d91c8e33
--- /dev/null
+++ b/judy/Week8/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/Week8/LP/src/layout/ProtectedLayout.tsx b/judy/Week8/LP/src/layout/ProtectedLayout.tsx
new file mode 100644
index 00000000..e86bc779
--- /dev/null
+++ b/judy/Week8/LP/src/layout/ProtectedLayout.tsx
@@ -0,0 +1,12 @@
+import { Navigate, Outlet } from "react-router-dom";
+
+export const ProtectedLayout = () => {
+ const accessToken = window.localStorage.getItem("accessToken");
+
+ if (!accessToken) {
+ alert("로그인이 필요한 서비스입니다. 로그인을 해주세요!");
+ return
+
+
+
+
+ navigate("/")} + > + 돌려돌려LP판 +
+
+ {isLogin ?
+
+
+
+ {isWithdrawalModalOpen && (
+
+
+
+ navigate("/search")}
+ >
+
+
+
+
+ setIsWithdrawalModalOpen(true)}
+ >
+ 탈퇴하기
+
+
+ setOpen(!open)} />
+
+ );
+};
diff --git a/judy/Week8/LP/src/main.tsx b/judy/Week8/LP/src/main.tsx
new file mode 100644
index 00000000..048b00cb
--- /dev/null
+++ b/judy/Week8/LP/src/main.tsx
@@ -0,0 +1,9 @@
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+ <>
+
+ {pathname !== "/login" && pathname !== "/signup" && open &&
+
+
+ 로그인 중...
;
+};
diff --git a/judy/Week8/LP/src/pages/HomePage.tsx b/judy/Week8/LP/src/pages/HomePage.tsx
new file mode 100644
index 00000000..a31a7a02
--- /dev/null
+++ b/judy/Week8/LP/src/pages/HomePage.tsx
@@ -0,0 +1,127 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { LpCard } from "../components/homePage/LpCard";
+import { LpCardSkeleton } from "../components/homePage/LpCardSkeleton";
+import { PostButton } from "../components/homePage/PostButton";
+import useThrottleCallback from "../hooks/useThrottleCallback";
+
+export interface IFLpContent {
+ id: number;
+ content: string;
+ thumbnail: string;
+ title: string;
+ likeCount: number;
+ created: string;
+}
+
+export const HomePage = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const [isScrollAtBottom, setIsScrollAtBottom] = useState(false);
+
+ const getLpList = async ({ pageParam = 0 }) => {
+ const response = await apiClient.get("/lps", {
+ params: {
+ cursor: pageParam,
+ limit: 25,
+ order,
+ },
+ });
+ return response.data;
+ };
+
+ const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+ useInfiniteQuery({
+ queryKey: ["lpList", order],
+ queryFn: getLpList,
+ initialPageParam: 0,
+ getNextPageParam: (lastPage) =>
+ lastPage.data.hasNext ? lastPage.data.nextCursor : undefined,
+ });
+
+ const handleScroll = useThrottleCallback(() => {
+ console.log("시작");
+
+ const isBottom =
+ window.innerHeight + window.scrollY >=
+ document.documentElement.scrollHeight - 100;
+
+ setIsScrollAtBottom(isBottom);
+ }, 2000);
+
+ useEffect(() => {
+ window.addEventListener("scroll", handleScroll);
+ return () => window.removeEventListener("scroll", handleScroll);
+ }, [handleScroll]);
+
+ // 스크롤이 하단에 도달하면 다음 페이지 로드
+ useEffect(() => {
+ if (isScrollAtBottom && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ // 페이지 로드 시작 후 상태 초기화
+ setIsScrollAtBottom(false);
+ }
+ }, [isScrollAtBottom, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ return (
+ <>
+
+
+
+
+ {
+ if (order !== "asc") {
+ setOrder("asc");
+ }
+ }}
+ >
+ 오래된 순
+ {" "}
+ {
+ if (order !== "desc") {
+ setOrder("desc");
+ }
+ }}
+ >
+ 최신순
+
+
+
+ {!data
+ ? Array.from({ length: 20 }).map((_, i) => (
+
+
+ {isFetchingNextPage && (
+
+ {Array.from({ length: 10 }).map((_, i) => (
+
+ )}
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/pages/LpDetail.tsx b/judy/Week8/LP/src/pages/LpDetail.tsx
new file mode 100644
index 00000000..846b3754
--- /dev/null
+++ b/judy/Week8/LP/src/pages/LpDetail.tsx
@@ -0,0 +1,306 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { apiClient } from "../api/apiClient";
+import { formatDistanceToNow } from "date-fns";
+import { FaHeart, FaPen, FaRegHeart, FaTrashAlt } from "react-icons/fa";
+import { CommentList } from "../components/LpDetail/CommentList";
+import { ChangeEvent, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+interface UpdateRequest {
+ title: string;
+ content: string;
+ thumbnail: string;
+ tags: string[];
+ published: boolean;
+}
+
+export const LpDetail = () => {
+ const [modify, setModify] = useState
+ {/* 로그인 header */}
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 소셜 로그인 */}
+
+
+ 구글로그인
+
+
+
+ {/* OR */}
+
+
+
+
+ {/* 로그인 입력 */}
+ OR
+
+
+
+ {errors?.email && touched?.email && (
+
+ {errors?.email}
+ )}
+
+ {errors?.password && touched?.password && (
+ {errors?.password}
+ )}
+
+ Loading...
;
+ }
+
+ const lpInfo = data.data;
+ console.log(lpInfo);
+
+ const timeAgo = formatDistanceToNow(lpInfo.createdAt, {
+ addSuffix: true,
+ });
+
+ return (
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/pages/MyPage.tsx b/judy/Week8/LP/src/pages/MyPage.tsx
new file mode 100644
index 00000000..56300c85
--- /dev/null
+++ b/judy/Week8/LP/src/pages/MyPage.tsx
@@ -0,0 +1,251 @@
+import { ChangeEvent, useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import { FaCheck, FaUserCircle } from "react-icons/fa";
+import { TiPencil } from "react-icons/ti";
+import { useNavigate } from "react-router-dom";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+interface IFMyInfo {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null;
+ createdAt: string;
+ updatedAt: string;
+ };
+}
+
+interface IFLogout {
+ status: boolean;
+ statusCode: number;
+ message: string;
+ data: null;
+}
+
+interface UserRequest {
+ name: string;
+ bio: string | null;
+ avatar: string | null;
+}
+
+export const MyPage = () => {
+ const [myInfo, setMyInfo] = useState
+ {/* 이름, 기간 */}
+
+
+
+
+ {/* 제목, 수정, 삭제 버튼 */}
+
+
+ {lpInfo.author.name}
+
+ {timeAgo}
+
+ {modify ? (
+
+ ) : (
+ {newTitle}
+ )}
+
+ {Number(userId) === lpInfo.authorId && modify ? (
+
+
+ {/* LP판 */}
+
+ 수정
+
+ ) : (
+
+ setModify(true)}
+ />
+
+ )}
+
+
+
+ {/* LP 설명 */}
+ {modify ? (
+
+ ) : (
+
+
+
+
+ {newContent}
+ )}
+
+ {/* 태그 */}
+
+ {lpInfo.tags.map((lp: { id: number; name: string }) => (
+
+
+ {/* 좋아요 */}
+
+ # {lp.name}
+
+ ))}
+
+ {like ? (
+
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/pages/SearchPage.tsx b/judy/Week8/LP/src/pages/SearchPage.tsx
new file mode 100644
index 00000000..2d70053c
--- /dev/null
+++ b/judy/Week8/LP/src/pages/SearchPage.tsx
@@ -0,0 +1,94 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../api/apiClient";
+import useDebounce from "../hooks/useDeboune";
+import { LpCardSkeleton } from "../components/homePage/LpCardSkeleton";
+import { LpCard } from "../components/homePage/LpCard";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import useThrottle from "../hooks/useThrottle";
+
+export const SearchPage = () => {
+ const [search, setSearch] = useState
+
+
+
+
+
+ {modify ? (
+ <>
+
+
+
+ ) : (
+ <>
+ {newImg ? (
+ 
+ ) : (
+
+
+
+
+ {modify ? (
+
+ ) : (
+ newName
+ )}
+
+
+ {modify ? (
+
+ ) : (
+ newBio || ""
+ )}
+
+ 이메일: {myInfo?.email}
+
+
+
+ 로그아웃
+
+
+ setSearch(e.target.value)}
+ />
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/pages/SignupPage.tsx b/judy/Week8/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6fe5e2e9
--- /dev/null
+++ b/judy/Week8/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 (
+
+ {!data && debounceValue
+ ? Array.from({ length: 20 }).map((_, i) =>
+
+ {isFetchingNextPage && (
+
+ {Array.from({ length: 10 }).map((_, i) => (
+
+ )}
+
+
+
+ {/* 회원가입 header */}
+ setStep("password")} />
+ )}
+ {step === "password" && (
+ setStep("profile")} />
+ )}
+ {step === "profile" &&
+
+
+
+ {/* 이메일 입력 */}
+ {step === "email" && (
+
+
+ );
+};
diff --git a/judy/Week8/LP/src/schema/lp.scheam.ts b/judy/Week8/LP/src/schema/lp.scheam.ts
new file mode 100644
index 00000000..85740d1b
--- /dev/null
+++ b/judy/Week8/LP/src/schema/lp.scheam.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const lpSchema = z.object({
+ name: z.string().min(1, "LP 이름을 입력해주세요."),
+ content: z.string().min(1, "LP 내용을 입력해주세요."),
+ tags: z.array(z.string()),
+});
+
+export type LpFormData = z.infer
+
+ 쓰로틀링이 무엇일까요?
+ScrollY: {scrollY}px
+