+ 
+
+ );
+};
+
+export default LpCard;
diff --git a/Week7/src/components/Cards/LpCardListSkeleton.tsx b/Week7/src/components/Cards/LpCardListSkeleton.tsx
new file mode 100644
index 00000000..e4e31a94
--- /dev/null
+++ b/Week7/src/components/Cards/LpCardListSkeleton.tsx
@@ -0,0 +1,17 @@
+import LpCardSkeleton from "./LpCardSkeleton";
+
+interface LpCardListSkeletonProps {
+ count: number;
+}
+
+const LpCardListSkeleton = ({ count }: LpCardListSkeletonProps) => {
+ return (
+ <>
+ {new Array(count).fill(0).map((_, idx) => (
+
+
+ {title}
+{updatedAt.slice(0, 10)}
+❤️ {likes.length}
+
+ {/* 이미지 영역 */}
+
+
+ {/* 텍스트 영역 */}
+
+ );
+};
+
+export default LpCardSkeleton;
diff --git a/Week7/src/components/Comment/CommentItem.tsx b/Week7/src/components/Comment/CommentItem.tsx
new file mode 100644
index 00000000..e3458709
--- /dev/null
+++ b/Week7/src/components/Comment/CommentItem.tsx
@@ -0,0 +1,34 @@
+import { commentDetailDto } from "../../types/lp";
+
+interface CommentItemProps {
+ comment: commentDetailDto;
+}
+
+const CommentItem = ({ comment }: CommentItemProps) => (
+
+
+
+
+
+
+
+
+ {comment.author.name}
+{comment.content}
+ + {new Date(comment.createdAt).toLocaleString()} + +
+
+
+ {/* 2. 입력창 + 전송 */}
+ 댓글
+
+
+
+
+
+ setInput(e.target.value)}
+ placeholder="댓글을 입력해주세요"
+ className="flex-1 bg-zinc-800 text-white placeholder-zinc-500 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+ />
+
+
+
+ {/* 3. 댓글 리스트 */}
+ -
+ {comments.map((c) => (
+
+
+
+
+
+
+
+ OR
+
+
+ );
+};
+
+export default Divider;
diff --git a/Week7/src/components/Footer/index.tsx b/Week7/src/components/Footer/index.tsx
new file mode 100644
index 00000000..88605b97
--- /dev/null
+++ b/Week7/src/components/Footer/index.tsx
@@ -0,0 +1,9 @@
+const Footer = () => {
+ return (
+
+ UMC - 8th Jett
+
+ );
+};
+
+export default Footer;
diff --git a/Week7/src/components/ImageUpLoader/index.tsx b/Week7/src/components/ImageUpLoader/index.tsx
new file mode 100644
index 00000000..c52df185
--- /dev/null
+++ b/Week7/src/components/ImageUpLoader/index.tsx
@@ -0,0 +1,35 @@
+type ImageUploadProps = {
+ previewUrl: string;
+ onImageChange: (file: File | null) => void;
+};
+
+const ImageUpload = ({ previewUrl, onImageChange }: ImageUploadProps) => {
+ const handleChange = (e: React.ChangeEvent
+
+
+
+ );
+};
+
+export default ImageUpload;
diff --git a/Week7/src/components/LoadingSpinner/index.tsx b/Week7/src/components/LoadingSpinner/index.tsx
new file mode 100644
index 00000000..2ee15060
--- /dev/null
+++ b/Week7/src/components/LoadingSpinner/index.tsx
@@ -0,0 +1,12 @@
+const LoadingSpinner = () => {
+ return (
+
+ 로딩 중...
+
+ );
+};
+
+export default LoadingSpinner;
diff --git a/Week7/src/components/Login/FieldErrorMessage/index.tsx b/Week7/src/components/Login/FieldErrorMessage/index.tsx
new file mode 100644
index 00000000..4fa305bc
--- /dev/null
+++ b/Week7/src/components/Login/FieldErrorMessage/index.tsx
@@ -0,0 +1,6 @@
+const FieldErrorMessage = ({ message }: { message: string }) => {
+ if (!message) return null;
+ return {message}
;
+};
+
+export default FieldErrorMessage;
diff --git a/Week7/src/components/Login/LoginForm/index.tsx b/Week7/src/components/Login/LoginForm/index.tsx
new file mode 100644
index 00000000..31263321
--- /dev/null
+++ b/Week7/src/components/Login/LoginForm/index.tsx
@@ -0,0 +1,62 @@
+import FieldErrorMessage from "../FieldErrorMessage";
+
+type Props
+
+ {touched.email &&
+ );
+};
+
+export default LoginForm;
diff --git a/Week7/src/components/Navigation/index.tsx b/Week7/src/components/Navigation/index.tsx
new file mode 100644
index 00000000..6cfca483
--- /dev/null
+++ b/Week7/src/components/Navigation/index.tsx
@@ -0,0 +1,79 @@
+import { NavLink } from "react-router-dom";
+import RoutePaths from "../../router/routePaths";
+import { useAuth } from "../../context/TokenContext/useAuth";
+import { SearchIcon } from "lucide-react";
+
+import { useGetMyInfo } from "../../hook/queries/User/useGetMyInfo";
+
+type NavbarProps = {
+ onSidebarToggle: () => void;
+};
+
+const Navbar = ({ onSidebarToggle }: NavbarProps) => {
+ const { logout, isLoggedIn, accessToken } = useAuth();
+ const { data } = useGetMyInfo(accessToken);
+
+ return (
+
+ );
+};
+
+export default Navbar;
diff --git a/Week7/src/components/SideBar/SideBar.tsx b/Week7/src/components/SideBar/SideBar.tsx
new file mode 100644
index 00000000..55d087dc
--- /dev/null
+++ b/Week7/src/components/SideBar/SideBar.tsx
@@ -0,0 +1,75 @@
+import { useRef, useEffect } from "react";
+import { NavLink } from "react-router-dom";
+import RoutePaths from "../../router/routePaths";
+
+type SidebarProps = {
+ isOpen: boolean;
+ onClose: () => void;
+};
+
+const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
+ const sidebarRef = useRef
+
+
+ );
+};
+
+export default Sidebar;
diff --git a/Week7/src/components/SignUp/StepEmail.tsx b/Week7/src/components/SignUp/StepEmail.tsx
new file mode 100644
index 00000000..3a69a670
--- /dev/null
+++ b/Week7/src/components/SignUp/StepEmail.tsx
@@ -0,0 +1,30 @@
+import SignUpNextButton from "../Buttons/SignUpNextButton";
+import { StepProps } from "../../types/auth";
+import { useFormContext } from "react-hook-form";
+
+const StepEmail = ({ onNext }: StepProps) => {
+ const {
+ register,
+ formState: { errors },
+ } = useFormContext();
+ return (
+ <>
+
+ {errors.email?.message && (
+
+
+
+ 🔍 찾기
+ 👤 마이페이지
+
+
+
+
+
+ {String(errors.email.message)}
+
+ )}
+
+
+ {String(errors.password.message)}
+
+ )}
+
+
+ {errors.passwordCheck?.message && (
+
+ {String(errors.passwordCheck.message)}
+
+ )}
+
+
+ );
+};
+
+export default StepProfile;
diff --git a/Week7/src/components/Titles/LoginTitle.tsx b/Week7/src/components/Titles/LoginTitle.tsx
new file mode 100644
index 00000000..852f1ccb
--- /dev/null
+++ b/Week7/src/components/Titles/LoginTitle.tsx
@@ -0,0 +1,25 @@
+import { ChevronLeft } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+
+type Props = {
+ text: string;
+};
+
+const LoginTitle = ({ text }: Props) => {
+ const navigate = useNavigate();
+
+ return (
+
+ {String(errors.name.message)}
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default LoginTitle;
diff --git a/Week7/src/constants/key.ts b/Week7/src/constants/key.ts
new file mode 100644
index 00000000..180b1836
--- /dev/null
+++ b/Week7/src/constants/key.ts
@@ -0,0 +1,10 @@
+export const LOCAL_STORAGE_KEY = {
+ accessToken: "accessToken",
+ refreshToken: "refreshToken",
+};
+
+export const QUERY_KEY = {
+ lps: "lps",
+ comment: "comment",
+ my: "my",
+};
diff --git a/Week7/src/context/TokenContext/AuthContext.tsx b/Week7/src/context/TokenContext/AuthContext.tsx
new file mode 100644
index 00000000..1a06e39c
--- /dev/null
+++ b/Week7/src/context/TokenContext/AuthContext.tsx
@@ -0,0 +1,18 @@
+import { createContext } from "react";
+import { RequestSignInDto } from "../../types/auth";
+
+interface AuthContextType {
+ accessToken: string | null;
+ refreshToken: string | null;
+ isLoggedIn: boolean;
+ login: (signInData: RequestSignInDto) => Promise{text}
+
+ {/* 상단 네비게이션 바 */}
+ setIsOpen(!isOpen)} />
+
+ {/* 하단 전체 영역: 사이드바 + 메인 콘텐츠 */}
+
+ );
+};
+
+export default ProtectedLayout;
diff --git a/Week7/src/layout/root-layout.tsx b/Week7/src/layout/root-layout.tsx
new file mode 100644
index 00000000..e6a53192
--- /dev/null
+++ b/Week7/src/layout/root-layout.tsx
@@ -0,0 +1,32 @@
+import { Outlet } from "react-router-dom";
+import Navbar from "../components/Navigation";
+import Footer from "../components/Footer";
+
+import { useState } from "react";
+import Sidebar from "../components/SideBar/SideBar";
+
+const RootLayout = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ {/* 왼쪽 사이드바 */}
+ setIsOpen(false)} />
+
+ {/* 메인 콘텐츠 */}
+
+
+
+
+
+
+ {/* 상단 네비게이션 바 */}
+ setIsOpen(!isOpen)} />
+
+ {/* 하단 전체 영역: 사이드바 + 메인 콘텐츠 */}
+
+ );
+};
+
+export default RootLayout;
diff --git a/Week7/src/main.tsx b/Week7/src/main.tsx
new file mode 100644
index 00000000..39748fd6
--- /dev/null
+++ b/Week7/src/main.tsx
@@ -0,0 +1,23 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+
+export const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: 3, // 쿼리 요청이 실패했을 때 자동으로 재시도할 횟수를 지정합니다.
+ },
+ },
+});
+
+createRoot(document.getElementById("root")!).render(
+
+ {/* 왼쪽 사이드바 */}
+ setIsOpen(false)} />
+
+ {/* 메인 콘텐츠 */}
+
+
+
+
+
+ Error페이지
;
+};
+
+export default ErrorPage;
diff --git a/Week7/src/pages/GoogleLoginRedirectPage.tsx b/Week7/src/pages/GoogleLoginRedirectPage.tsx
new file mode 100644
index 00000000..b0ae972e
--- /dev/null
+++ b/Week7/src/pages/GoogleLoginRedirectPage.tsx
@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+import { useLocalStorage } from "../hook/useLocalStorage";
+import { LOCAL_STORAGE_KEY } from "../constants/key";
+import RoutePaths from "../router/routePaths";
+import LoadingSpinner from "../components/LoadingSpinner";
+
+const GoogleLoginRedirectPage = () => {
+ const { setItem: setAccessToken } = useLocalStorage(
+ LOCAL_STORAGE_KEY.accessToken
+ );
+ const { setItem: setRefreshToken } = useLocalStorage(
+ LOCAL_STORAGE_KEY.refreshToken
+ );
+ useEffect(() => {
+ const urlParams = new URLSearchParams(window.location.search);
+ const accessToken = urlParams.get("accessToken");
+ const refreshToken = urlParams.get("refreshToken");
+
+ if (accessToken) {
+ setAccessToken(accessToken);
+ setRefreshToken(refreshToken);
+ window.location.href = RoutePaths.MYPAGE;
+ }
+ }, [setAccessToken, setRefreshToken]);
+ return (
+
+
+ );
+};
+
+export default GoogleLoginRedirectPage;
diff --git a/Week7/src/pages/HomePage.tsx b/Week7/src/pages/HomePage.tsx
new file mode 100644
index 00000000..6c8896d7
--- /dev/null
+++ b/Week7/src/pages/HomePage.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import LpCard from "../components/Cards/LpCard";
+import { PAGINATION_ORDER } from "../enums/pagination";
+import useGetInfiniteLpList from "../hook/queries/Lp/useGetInfiniteLpList";
+import { useInView } from "react-intersection-observer";
+import LoadingSpinner from "../components/LoadingSpinner";
+import LpCardListSkeleton from "../components/Cards/LpCardListSkeleton";
+
+const HomePage = () => {
+ const [search] = useState("");
+ const [sortOrder, setSortOrder] = useState<
+ PAGINATION_ORDER.asc | PAGINATION_ORDER.desc
+ >(PAGINATION_ORDER.asc);
+
+ const {
+ data: infiniteData,
+ isFetching,
+ isPending,
+ hasNextPage,
+ isError,
+ fetchNextPage,
+ } = useGetInfiniteLpList(20, search, sortOrder);
+
+ // ref, InView
+ // ref => 특정한 HTML 요소를 감시할 수 있다.
+ // inView => 그 요소가 화면에 보이면 true, 아니면 false
+ const { ref, inView } = useInView({
+ threshold: 0,
+ });
+
+ useEffect(() => {
+ if (inView) {
+ if (!isFetching && hasNextPage) {
+ fetchNextPage();
+ }
+ }
+ }, [inView, isFetching, hasNextPage, fetchNextPage]);
+
+ if (isError) {
+ return 에러
;
+ }
+ return (
+ <>
+ {/* 정렬 버튼 */}
+
+
+
+
+
+ {isPending &&
+
+ {isFetching && (
+
+
+ );
+};
+
+export default HomePage;
diff --git a/Week7/src/pages/LoginPage.tsx b/Week7/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..15060839
--- /dev/null
+++ b/Week7/src/pages/LoginPage.tsx
@@ -0,0 +1,75 @@
+import { useNavigate } from "react-router-dom";
+import GoogleLoginButton from "../components/Buttons/GoogleLoginButton";
+import Divider from "../components/Divider";
+import LoginForm from "../components/Login/LoginForm";
+import LoginTitle from "../components/Titles/LoginTitle";
+import { useAuth } from "../context/TokenContext/useAuth";
+import useForm from "../hook/useForm";
+
+import { UserSignInformation, validateLogin } from "../utils/validate";
+import { useEffect } from "react";
+import RoutePaths from "../router/routePaths";
+
+const LoginPage = () => {
+ const { login, isLoggedIn } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (isLoggedIn) {
+ navigate("/");
+ }
+ }, [isLoggedIn, navigate]);
+
+ const { values, errors, touched, getInputProps } =
+ useForm
+
+ )}
+
+
+ );
+};
+
+export default LoginPage;
diff --git a/Week7/src/pages/Mypage.tsx b/Week7/src/pages/Mypage.tsx
new file mode 100644
index 00000000..e5e33c75
--- /dev/null
+++ b/Week7/src/pages/Mypage.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+import { getMyInfo } from "../api/Get/users";
+import { ResponseMyInfoDto } from "../types/auth";
+
+const Mypage = () => {
+ const [data, setData] = useState
+
+ );
+};
+
+export default Mypage;
diff --git a/Week7/src/pages/SignUpPage.tsx b/Week7/src/pages/SignUpPage.tsx
new file mode 100644
index 00000000..f84b9b45
--- /dev/null
+++ b/Week7/src/pages/SignUpPage.tsx
@@ -0,0 +1,119 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+import { z } from "zod";
+import { postSignUp } from "../api/Post/auth";
+import { useState } from "react";
+import StepEmail from "../components/SignUp/StepEmail";
+import StepPassword from "../components/SignUp/StepPassword";
+import StepProfile from "../components/SignUp/StepProfile";
+import { uploadAvatar } from "../api/Post/upload";
+import LoginTitle from "../components/Titles/LoginTitle";
+import GoogleLoginButton from "../components/Buttons/GoogleLoginButton";
+import Divider from "../components/Divider";
+import { useNavigate } from "react-router-dom";
+import RoutePaths from "../router/routePaths";
+
+const schema = z
+ .object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다." }),
+ password: z
+ .string()
+ .min(8, { message: "비밀번호는 8자 이상이어야합니다." })
+ .max(20, { message: "비밀번호는 20자 이하여야합니다." }),
+ passwordCheck: z
+ .string()
+ .min(8, { message: "비밀번호는 8자 이상이어야합니다." })
+ .max(20, { message: "비밀번호는 20자 이하여야합니다." }),
+ name: z.string().min(1, { message: "이름을 입력해주세요." }),
+ })
+ .refine((data) => data.password === data.passwordCheck, {
+ message: "비밀번호가 일치하지 않습니다.",
+ path: ["passwordCheck"],
+ });
+
+export type FormFields = z.infer
+ 
+
+
+ {data?.data.name}
+