+ 
+ 구글로그인
+
+
+
+ {/* 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" && (
+