navigate(`/lps/${lp.id}`)}
+ className="group cursor-pointer flex flex-col bg-white border border-[#ccc] rounded-sm transition-all hover:border-[#807bff] hover:shadow-sm overflow-hidden">
+
+ );
+};
+
+export default LpChip;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/component/Navbar.tsx b/week06/eru/6nd-mission1/src/component/Navbar.tsx
new file mode 100644
index 0000000..bf48a70
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/component/Navbar.tsx
@@ -0,0 +1,27 @@
+import { NavLink } from "react-router-dom"
+
+const LINKS = [
+ { to: "/" , label:"홈" },
+ { to: "/login" , label:"로그인" },
+ { to: "/signup" , label:"회원가입" },
+]
+
+const Navbar = () => {
+ return (
+
+ );
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/component/SideBar.tsx b/week06/eru/6nd-mission1/src/component/SideBar.tsx
new file mode 100644
index 0000000..097d1bf
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/component/SideBar.tsx
@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+interface SidebarProps {
+ isOpen: boolean;
+ onClose: () => void;
+ isStatic?: boolean;
+}
+
+const Sidebar = ({ isOpen, onClose, isStatic = false }: SidebarProps) => {
+ const navigate = useNavigate();
+ const { user, logout } = useAuth();
+ const [search, setSearch] = useState('');
+
+ const handleNavigate = (path: string) => {
+ navigate(path);
+ if (!isStatic) onClose();
+ };
+
+ const handleSearch = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (search.trim()) {
+ navigate(`/?search=${search}`);
+ if (!isStatic) onClose();
+ }
+ };
+
+ const content = (
+
+ 
+
+
+
+
+ 좋아요 {lp.likes?.length ?? 0}
+
+
+
+ + {lp.title} +
+ + +
+ {lp.tags?.slice(0, 2).map((tag) => (
+
+ #{tag.name}
+
+ ))}
+
+ + {new Date(lp.createdAt).toLocaleDateString('ko-KR')} +
+
+
+
+ );
+
+ if (isStatic) {
+ return ;
+ }
+
+ return (
+ <>
+ {isOpen && (
+
+ )}
+
+
+
+ );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/component/SkeletonCard.tsx b/week06/eru/6nd-mission1/src/component/SkeletonCard.tsx
new file mode 100644
index 0000000..44aa2b0
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/component/SkeletonCard.tsx
@@ -0,0 +1,27 @@
+const SkeletonCard = () => {
+ return (
+
+
+
+
+
+
+
+ {user ? (
+
+
+
+ ) : (
+
+
+ {user.name}님
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default SkeletonCard;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/constants/key.ts b/week06/eru/6nd-mission1/src/constants/key.ts
new file mode 100644
index 0000000..e1eb0f3
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/constants/key.ts
@@ -0,0 +1,5 @@
+export const LOCAL_STORAGE_KEY = {
+ accessToken: "accessToken",
+ refreshToken: "refreshToken",
+ user: "user",
+}
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/context/AuthContext.tsx b/week06/eru/6nd-mission1/src/context/AuthContext.tsx
new file mode 100644
index 0000000..428d23f
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/context/AuthContext.tsx
@@ -0,0 +1,112 @@
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { LOCAL_STORAGE_KEY } from '../constants/key';
+import { postLogout, signin } from '../apis/auth';
+import type { RequestSignIn } from '../types/authType';
+
+interface User {
+ id: number
+ email: string;
+ name: string;
+}
+
+interface AuthContextType {
+ user: User | null;
+ accessToken: string | null;
+ isAuthenticated: boolean;
+ isLoading: boolean;
+ login: (signInData: RequestSignIn) => Promise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setIsSidebarOpen(false)}
+ isStatic={false}
+ />
+
+
+ );
+};
+
+export default HomeLayout;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/layouts/ProtectedLayout.tsx b/week06/eru/6nd-mission1/src/layouts/ProtectedLayout.tsx
new file mode 100644
index 0000000..4f3ba2b
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/layouts/ProtectedLayout.tsx
@@ -0,0 +1,34 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import { useEffect, useState } from "react";
+
+const ProtectedLayout = () => {
+ const { accessToken, isLoading } = useAuth();
+ const location = useLocation();
+ const [isReadyToRedirect, setIsReadyToRedirect] = useState(false);
+
+ useEffect(() => {
+ if (!isLoading && !accessToken) {
+ alert("로그인이 필요한 서비스입니다.");
+ setIsReadyToRedirect(true);
+ }
+ }, [accessToken, isLoading]);
+
+ if (isLoading) {
+ return null;
+ }
+
+ if (!accessToken && isReadyToRedirect) {
+ return (
+
+ {}} isStatic={true} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ navigate('/')} + className="text-lg font-black tracking-tighter cursor-pointer hover:text-[#807bff] transition-colors"> + LP PROJECT +
+
+ {user ? (
+
+
+
+ {user.name}님 반갑습니다.
+
+
+ ) : (
+
+ )}
+
+
+ )
+}
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/pages/GoogleLoginRedirectPage.tsx b/week06/eru/6nd-mission1/src/pages/GoogleLoginRedirectPage.tsx
new file mode 100644
index 0000000..bcdec55
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/GoogleLoginRedirectPage.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+import { useLocalStorage } from "../hooks/useLocalStorage"
+import { LOCAL_STORAGE_KEY } from "../constants/key"
+
+export const GoogleLoginRedirectPage = () => {
+ const {setItem:setAccessToken} = useLocalStorage(LOCAL_STORAGE_KEY.accessToken)
+ const {setItem:setRefreshToken} = useLocalStorage(LOCAL_STORAGE_KEY.refreshToken)
+ useEffect(()=>{
+ const urlParams = new URLSearchParams(window.location.search)
+ const accessToken = urlParams.get(LOCAL_STORAGE_KEY.accessToken)
+ const refreshToken = urlParams.get(LOCAL_STORAGE_KEY.refreshToken)
+ if(accessToken){
+ setAccessToken(accessToken)
+ setRefreshToken(refreshToken)
+ window.location.href = "/me"
+ }
+
+ },[setRefreshToken, setAccessToken])
+ return (
+ 어라 서버 통신 중 에러가 발생 했습니다 홈으로 돌아가시겠어요?
+ 홈으로 +GoogleLoginRedirectPage
+ )
+}
diff --git a/week06/eru/6nd-mission1/src/pages/Home.tsx b/week06/eru/6nd-mission1/src/pages/Home.tsx
new file mode 100644
index 0000000..7a13935
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/Home.tsx
@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { getLps } from '../apis/lpApi';
+import LpCard from '../component/LpChip';
+import SkeletonCard from '../component/SkeletonCard';
+import type { Lp } from '../types/common';
+
+const Home = () => {
+ const [order, setOrder] = useState<'desc' | 'asc'>('desc');
+
+
+ const { data, isLoading, isError, refetch } = useQuery({
+ queryKey: ['lps', { order }],
+ queryFn: () => getLps(order, 0, 20),
+ staleTime: 1000 * 60,
+ placeholderData: keepPreviousData,
+ });
+
+ const lpItems = data?.data || [];
+
+
+ if (isError) {
+ return (
+
+
+ );
+ }
+
+ return (
+ 데이터를 불러오는 중 오류가 발생했습니다.
+ +
+
+
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/pages/LogInPage.tsx b/week06/eru/6nd-mission1/src/pages/LogInPage.tsx
new file mode 100644
index 0000000..42bec5e
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/LogInPage.tsx
@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+import { useAuth } from "../context/AuthContext";
+import useForm from "../hooks/useForm";
+import { validateSignIn, type UserSignIninformation } from "../utils/validate";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const LogInPage = () => {
+ const { login, accessToken } = useAuth();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+
+ const from = location.state?.from || "/";
+
+ useEffect(() => {
+
+ if (accessToken) {
+ navigate(from, { replace: true });
+ }
+ }, [navigate, accessToken, from]);
+
+ const { values, errors, touched, getInputProps } = useForm
+
+
+
+
+
+
+
+ EXPLORE
++ Curated LP Archive +
+
+ {(['desc', 'asc'] as const).map((type) => (
+
+ ))}
+
+
+ {isLoading ? (
+
+ Array.from({ length: 8 }).map((_, i) =>
+
+ {!isLoading && lpItems.length === 0 && (
+
+
+ )}
+ NO RECORDS FOUND.
+
+
+
+
+ );
+};
+
+export default LogInPage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/pages/LpDetail.tsx b/week06/eru/6nd-mission1/src/pages/LpDetail.tsx
new file mode 100644
index 0000000..1bbfb6e
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/LpDetail.tsx
@@ -0,0 +1,63 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import useLpDetail from '../hooks/useLpDetail';
+import { useAuth } from '../context/AuthContext';
+import { likeLp, deleteLp } from '../apis/lpApi';
+import { useMemo } from 'react';
+
+const LpDetailPage = () => {
+ const { lpId } = useParams();
+ const navigate = useNavigate();
+ const { user } = useAuth();
+ const { data: lp, isLoading, isError, refetch } = useLpDetail(Number(lpId));
+
+ const isOwner = useMemo(() => {
+ if (!user || !lp || !lp.author) return false;
+ return user.id === lp.author.id;
+ }, [user, lp]);
+
+ if (isLoading) return
+
+
+
+ {errors?.email && touched?.email && (
+
+
+ {errors.email}
+ )}
+
+
+ {errors?.password && touched?.password && (
+
+
+ {errors.password}
+ )}
+
+
+
+
+
+
+ + 계정이 없으신가요?{" "} + navigate("/signup")} + className="text-[#807bff] cursor-pointer underline underline-offset-2" + > + 회원가입 + +
+LOADING...
;
+ if (isError || !lp) return RECORD NOT FOUND.
;
+
+ return (
+
+
+ );
+};
+
+export default LpDetailPage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/pages/Mypage.tsx b/week06/eru/6nd-mission1/src/pages/Mypage.tsx
new file mode 100644
index 0000000..aa3e874
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/Mypage.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { getMyInfo } from "../apis/auth";
+import type { ResponseMyInfo } from "../types/authType";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+
+const Mypage = () => {
+ const navigate = useNavigate();
+ const { logout, isAuthenticated, isLoading: isAuthLoading } = useAuth();
+
+ const [data, setData] = useState
+
+
+
+
+
+
+
+ {lp.title}
+ {isOwner && ( +
+
+
+
+ )}
+ {lp.content}
+ +
+ {lp.tags.map(tag => #{tag.name})}
+
+
+
+
+
+ );
+ }
+
+
+ if (!data || !data.data) {
+ return (
+ + LOADING USER DATA... +
+
+
+ );
+ }
+
+
+ return (
+ USER NOT FOUND.
+
+
+ );
+};
+
+export default Mypage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/pages/NotFound.tsx b/week06/eru/6nd-mission1/src/pages/NotFound.tsx
new file mode 100644
index 0000000..0e5d1bd
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/NotFound.tsx
@@ -0,0 +1,9 @@
+
+
+export function NotFound() {
+ return (
+
+
+
+
+ {data.data.name[0].toUpperCase()}
+
+
+
+ + {data.data.name} +
++ {data.data.email} +
+ + + + +
+
+ );
+}
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/pages/SignUpPage.tsx b/week06/eru/6nd-mission1/src/pages/SignUpPage.tsx
new file mode 100644
index 0000000..1d0c877
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/pages/SignUpPage.tsx
@@ -0,0 +1,88 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {useForm, type SubmitHandler} from "react-hook-form"
+import { useState } from "react"
+import { useNavigate } from "react-router-dom";
+import {z} from "zod"
+import { signup } from "../apis/auth";
+const schema = z.object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다" }),
+ password: z
+ .string()
+ .min(6, {
+ message: "비밀번호는 6자 이상이어야 합니다",
+ }),
+ passwordCheck:z
+ .string()
+ .min(6, {
+ message: "비밀번호는 6자 이상이어야 합니다",
+ }),
+ name: z
+ .string()
+ .min(1, {message:"이름을 입력해 주세요"})
+})
+.refine((data) => data.password === data.passwordCheck, {
+ message:"비밀번호가 일치하지 않습니다.",
+ path:["passwordCheck"]})
+
+type FormFields = z.infer404 - 페이지를 찾을 수 없습니다
+
+
+
+
+ );
+};
+
+export default SignUpPage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission1/src/types/authType.ts b/week06/eru/6nd-mission1/src/types/authType.ts
new file mode 100644
index 0000000..8822451
--- /dev/null
+++ b/week06/eru/6nd-mission1/src/types/authType.ts
@@ -0,0 +1,42 @@
+import type { CommonResponse } from "./common";
+
+// 1. 공통 유저 정보 인터페이스 (중복 제거)
+export interface UserInfo {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null; // avator -> avatar 오타 수정
+ createdAt: string;
+ updatedAt: string; // updatedAT -> updatedAt 오타 수정
+}
+
+// 2. 회원가입 관련 타입
+export type RequestSignUpUser = {
+ name: string;
+ email: string;
+ bio?: string;
+ avatar?: string;
+ password: string;
+};
+
+// UserInfo를 재사용하여 응답 타입 정의
+export type ResponseSignUp = CommonResponse
+ {step === 1 && (
+ <>
+
+ {errors.email &&
+ {errors.email.message}
}
+
+
+ )}
+ {step === 2 && (
+ <>
+
+ {errors.password && {errors.password.message}
}
+
+ {errors.passwordCheck && {errors.passwordCheck.message}
}
+
+
+ )}
+ {step === 3 && (
+ <>
+
+ {errors.name && {errors.name.message}
}
+
+
+ )}
+
+
+
+ );
+};
+
+export default CommentSkeleton;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/component/LpChip.tsx b/week06/eru/6nd-mission2/src/component/LpChip.tsx
new file mode 100644
index 0000000..e7c0b5d
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/component/LpChip.tsx
@@ -0,0 +1,51 @@
+import { useNavigate } from 'react-router-dom';
+import type { Lp } from '../types/common';
+
+interface LpCardProps {
+ lp: Lp;
+}
+
+const LpChip = ({ lp }: LpCardProps) => {
+ const navigate = useNavigate();
+
+ return (
+
+
+
+
+
+
+
+
+
+ navigate(`/lps/${lp.id}`)}
+ className="group cursor-pointer flex flex-col bg-white border border-[#ccc] rounded-sm transition-all hover:border-[#807bff] hover:shadow-sm overflow-hidden">
+
+ );
+};
+
+export default LpChip;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/component/Navbar.tsx b/week06/eru/6nd-mission2/src/component/Navbar.tsx
new file mode 100644
index 0000000..bf48a70
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/component/Navbar.tsx
@@ -0,0 +1,27 @@
+import { NavLink } from "react-router-dom"
+
+const LINKS = [
+ { to: "/" , label:"홈" },
+ { to: "/login" , label:"로그인" },
+ { to: "/signup" , label:"회원가입" },
+]
+
+const Navbar = () => {
+ return (
+
+ );
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/component/SideBar.tsx b/week06/eru/6nd-mission2/src/component/SideBar.tsx
new file mode 100644
index 0000000..097d1bf
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/component/SideBar.tsx
@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+interface SidebarProps {
+ isOpen: boolean;
+ onClose: () => void;
+ isStatic?: boolean;
+}
+
+const Sidebar = ({ isOpen, onClose, isStatic = false }: SidebarProps) => {
+ const navigate = useNavigate();
+ const { user, logout } = useAuth();
+ const [search, setSearch] = useState('');
+
+ const handleNavigate = (path: string) => {
+ navigate(path);
+ if (!isStatic) onClose();
+ };
+
+ const handleSearch = (e: React.FormEvent) => {
+ e.preventDefault();
+ if (search.trim()) {
+ navigate(`/?search=${search}`);
+ if (!isStatic) onClose();
+ }
+ };
+
+ const content = (
+
+
+
+
+
+
+ 좋아요 {lp.likes?.length ?? 0}
+
+
+
+ + {lp.title} +
+ + +
+ {lp.tags?.slice(0, 2).map((tag) => (
+
+ #{tag.name}
+
+ ))}
+
+ + {new Date(lp.createdAt).toLocaleDateString('ko-KR')} +
+
+
+
+ );
+
+ if (isStatic) {
+ return ;
+ }
+
+ return (
+ <>
+ {isOpen && (
+
+ )}
+
+
+
+ );
+};
+
+export default Sidebar;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/component/SkeletonCard.tsx b/week06/eru/6nd-mission2/src/component/SkeletonCard.tsx
new file mode 100644
index 0000000..6c35a64
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/component/SkeletonCard.tsx
@@ -0,0 +1,28 @@
+const SkeletonCard = () => {
+ return (
+
+
+
+
+
+
+
+ {user ? (
+
+
+
+ ) : (
+
+
+ {user.name}님
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default SkeletonCard;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/constants/key.ts b/week06/eru/6nd-mission2/src/constants/key.ts
new file mode 100644
index 0000000..e1eb0f3
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/constants/key.ts
@@ -0,0 +1,5 @@
+export const LOCAL_STORAGE_KEY = {
+ accessToken: "accessToken",
+ refreshToken: "refreshToken",
+ user: "user",
+}
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/context/AuthContext.tsx b/week06/eru/6nd-mission2/src/context/AuthContext.tsx
new file mode 100644
index 0000000..11fa161
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/context/AuthContext.tsx
@@ -0,0 +1,125 @@
+import { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { LOCAL_STORAGE_KEY } from '../constants/key';
+import { postLogout, signin } from '../apis/auth';
+import type { RequestSignIn } from '../types/authType';
+
+// 1. 유저 정보 인터페이스 (서버 응답 명세에 맞춰 name 사용)
+interface User {
+ id: number;
+ email: string;
+ name: string;
+}
+
+interface AuthContextType {
+ user: User | null;
+ accessToken: string | null;
+ isAuthenticated: boolean;
+ isLoading: boolean;
+ login: (signInData: RequestSignIn) => Promise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setIsSidebarOpen(false)}
+ isStatic={false}
+ />
+
+
+ );
+};
+
+export default HomeLayout;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/layouts/ProtectedLayout.tsx b/week06/eru/6nd-mission2/src/layouts/ProtectedLayout.tsx
new file mode 100644
index 0000000..4f3ba2b
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/layouts/ProtectedLayout.tsx
@@ -0,0 +1,34 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import { useEffect, useState } from "react";
+
+const ProtectedLayout = () => {
+ const { accessToken, isLoading } = useAuth();
+ const location = useLocation();
+ const [isReadyToRedirect, setIsReadyToRedirect] = useState(false);
+
+ useEffect(() => {
+ if (!isLoading && !accessToken) {
+ alert("로그인이 필요한 서비스입니다.");
+ setIsReadyToRedirect(true);
+ }
+ }, [accessToken, isLoading]);
+
+ if (isLoading) {
+ return null;
+ }
+
+ if (!accessToken && isReadyToRedirect) {
+ return (
+
+ {}} isStatic={true} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ navigate('/')} + className="text-lg font-black tracking-tighter cursor-pointer hover:text-[#807bff] transition-colors"> + LP PROJECT +
+
+ {user ? (
+
+
+
+ {user.name}님 반갑습니다.
+
+
+ ) : (
+
+ )}
+
+
+ )
+}
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/pages/GoogleLoginRedirectPage.tsx b/week06/eru/6nd-mission2/src/pages/GoogleLoginRedirectPage.tsx
new file mode 100644
index 0000000..bcdec55
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/GoogleLoginRedirectPage.tsx
@@ -0,0 +1,22 @@
+import { useEffect } from "react"
+import { useLocalStorage } from "../hooks/useLocalStorage"
+import { LOCAL_STORAGE_KEY } from "../constants/key"
+
+export const GoogleLoginRedirectPage = () => {
+ const {setItem:setAccessToken} = useLocalStorage(LOCAL_STORAGE_KEY.accessToken)
+ const {setItem:setRefreshToken} = useLocalStorage(LOCAL_STORAGE_KEY.refreshToken)
+ useEffect(()=>{
+ const urlParams = new URLSearchParams(window.location.search)
+ const accessToken = urlParams.get(LOCAL_STORAGE_KEY.accessToken)
+ const refreshToken = urlParams.get(LOCAL_STORAGE_KEY.refreshToken)
+ if(accessToken){
+ setAccessToken(accessToken)
+ setRefreshToken(refreshToken)
+ window.location.href = "/me"
+ }
+
+ },[setRefreshToken, setAccessToken])
+ return (
+ 어라 서버 통신 중 에러가 발생 했습니다 홈으로 돌아가시겠어요?
+ 홈으로 +GoogleLoginRedirectPage
+ )
+}
diff --git a/week06/eru/6nd-mission2/src/pages/Home.tsx b/week06/eru/6nd-mission2/src/pages/Home.tsx
new file mode 100644
index 0000000..314f5a4
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/Home.tsx
@@ -0,0 +1,128 @@
+import { useState, useEffect } from 'react';
+import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import { useInView } from 'react-intersection-observer';
+import { getLps } from '../apis/lpApi';
+import LpCard from '../component/LpChip';
+import SkeletonCard from '../component/SkeletonCard';
+import type { Lp } from '../types/common';
+
+const Home = () => {
+ const [order, setOrder] = useState<'desc' | 'asc'>('desc');
+
+ // 무한 스크롤 트리거를 위한 hook
+ const { ref, inView } = useInView({
+ threshold: 0.5, // 대상이 50% 정도 보였을 때 감지
+ });
+
+ // 1. useInfiniteQuery로 전환
+ const {
+ data,
+ isLoading,
+ isError,
+ refetch,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ } = useInfiniteQuery({
+ queryKey: ['lps', { order }],
+ queryFn: ({ pageParam = 0 }) => getLps(order, pageParam as number, 12),
+ getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.nextCursor : undefined),
+ initialPageParam: 0,
+ staleTime: 1000 * 60,
+ placeholderData: keepPreviousData,
+ });
+
+ // 2. 스크롤 감지 시 다음 페이지 호출
+ useEffect(() => {
+ if (inView && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ }
+ }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ // 3. 2차원 배열인 pages 데이터를 1차원 리스트로 평탄화
+ const allLps = data?.pages.flatMap((page) => page.data) || [];
+
+ if (isError) {
+ return (
+
+
+ );
+ }
+
+ return (
+ 데이터를 불러오는 중 오류가 발생했습니다.
+ +
+ {/* 목록 헤더 및 정렬 섹션 */}
+
+ );
+};
+
+export default Home;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/pages/LogInPage.tsx b/week06/eru/6nd-mission2/src/pages/LogInPage.tsx
new file mode 100644
index 0000000..42bec5e
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/LogInPage.tsx
@@ -0,0 +1,115 @@
+import { useEffect } from "react";
+import { useAuth } from "../context/AuthContext";
+import useForm from "../hooks/useForm";
+import { validateSignIn, type UserSignIninformation } from "../utils/validate";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const LogInPage = () => {
+ const { login, accessToken } = useAuth();
+ const navigate = useNavigate();
+ const location = useLocation();
+
+
+ const from = location.state?.from || "/";
+
+ useEffect(() => {
+
+ if (accessToken) {
+ navigate(from, { replace: true });
+ }
+ }, [navigate, accessToken, from]);
+
+ const { values, errors, touched, getInputProps } = useForm
+
+
+ {/* 목록 그리드 */}
+
+
+
+ {/* 정렬 버튼 */}
+ EXPLORE
++ Curated LP Archive +
+
+ {(['desc', 'asc'] as const).map((type) => (
+
+ ))}
+
+
+ {isLoading ? (
+ // 초기 전체 로딩 시 스켈레톤
+ Array.from({ length: 12 }).map((_, i) =>
+
+ {/* 무한 스크롤 감지 트리거 지점 */}
+
+ {hasNextPage && !isFetchingNextPage && (
+
+
+ {/* 빈 상태 처리 */}
+ {!isLoading && allLps.length === 0 && (
+ + SCROLL TO LOAD MORE +
+ )} +
+
+ )}
+ NO RECORDS FOUND.
+
+
+
+
+ );
+};
+
+export default LogInPage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/pages/LpDetail.tsx b/week06/eru/6nd-mission2/src/pages/LpDetail.tsx
new file mode 100644
index 0000000..fe75c67
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/LpDetail.tsx
@@ -0,0 +1,152 @@
+import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useInView } from 'react-intersection-observer';
+import useLpDetail from '../hooks/useLpDetail';
+import { useAuth } from '../context/AuthContext';
+import { likeLp, deleteLp, getLpComments } from '../apis/lpApi';
+import CommentSkeleton from '../component/CommentSkeleton';
+
+const LpDetailPage = () => {
+ const { lpId } = useParams();
+ const navigate = useNavigate();
+ const { user } = useAuth();
+ const { ref, inView } = useInView();
+
+ const [searchParams, setSearchParams] = useSearchParams();
+ const order = (searchParams.get('order') as 'desc' | 'asc') || 'desc';
+
+ const setOrder = (newOrder: 'desc' | 'asc') => {
+ setSearchParams({ order: newOrder });
+ };
+
+ const { data: lp, isLoading, isError, refetch } = useLpDetail(Number(lpId));
+
+ const {
+ data: commentData,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ isLoading: isCommentsLoading,
+ } = useInfiniteQuery({
+ queryKey: ['lpComments', lpId, order],
+ queryFn: ({ pageParam = 0 }) => getLpComments(Number(lpId), order, pageParam as number),
+ getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.nextCursor : undefined),
+ initialPageParam: 0,
+ enabled: !!lpId,
+ });
+
+ useEffect(() => {
+ if (inView && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ }
+ }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+ const allComments = commentData?.pages.flatMap((page) => page.data) || [];
+
+ const isOwner = useMemo(() => {
+ if (!user || !lp || !lp.author) return false;
+ return user.id === lp.author.id;
+ }, [user, lp]);
+
+ if (isLoading) return
+
+
+
+ {errors?.email && touched?.email && (
+
+
+ {errors.email}
+ )}
+
+
+ {errors?.password && touched?.password && (
+
+
+ {errors.password}
+ )}
+
+
+
+
+
+
+ + 계정이 없으신가요?{" "} + navigate("/signup")} + className="text-[#807bff] cursor-pointer underline underline-offset-2" + > + 회원가입 + +
+LOADING...
;
+ if (isError || !lp) return RECORD NOT FOUND.
;
+
+ return (
+
+
+ );
+};
+
+export default LpDetailPage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/pages/Mypage.tsx b/week06/eru/6nd-mission2/src/pages/Mypage.tsx
new file mode 100644
index 0000000..aa3e874
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/Mypage.tsx
@@ -0,0 +1,97 @@
+import { useEffect, useState } from "react";
+import { getMyInfo } from "../apis/auth";
+import type { ResponseMyInfo } from "../types/authType";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+
+const Mypage = () => {
+ const navigate = useNavigate();
+ const { logout, isAuthenticated, isLoading: isAuthLoading } = useAuth();
+
+ const [data, setData] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+ {lp.title}
+ {isOwner && ( +
+
+
+
+ )}
+
+
+
+ {lp.artist}
+{lp.content}
+
+ {lp.tags.map(tag => #{tag.name})}
+
+
+
+
+
+
+ Comment
+
+
+
+
+ 내용을 입력해주세요.
+
+
+
+ ARCHIVE ({allComments.length})
+
+
+
+
+
+
+
+ {isCommentsLoading ? (
+ Array.from({ length: 3 }).map((_, i) => (
+
+
+
+
+
+ ))}
+
+ {isFetchingNextPage &&
+ {comment.user?.name || 'Anonymous'}
+ {new Date(comment.createdAt).toLocaleDateString()}
+
+ {comment.content}
+
+
+ );
+ }
+
+
+ if (!data || !data.data) {
+ return (
+ + LOADING USER DATA... +
+
+
+ );
+ }
+
+
+ return (
+ USER NOT FOUND.
+
+
+ );
+};
+
+export default Mypage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/pages/NotFound.tsx b/week06/eru/6nd-mission2/src/pages/NotFound.tsx
new file mode 100644
index 0000000..0e5d1bd
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/NotFound.tsx
@@ -0,0 +1,9 @@
+
+
+export function NotFound() {
+ return (
+
+
+
+
+ {data.data.name[0].toUpperCase()}
+
+
+
+ + {data.data.name} +
++ {data.data.email} +
+ + + + +
+
+ );
+}
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/pages/SignUpPage.tsx b/week06/eru/6nd-mission2/src/pages/SignUpPage.tsx
new file mode 100644
index 0000000..1d0c877
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/pages/SignUpPage.tsx
@@ -0,0 +1,88 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import {useForm, type SubmitHandler} from "react-hook-form"
+import { useState } from "react"
+import { useNavigate } from "react-router-dom";
+import {z} from "zod"
+import { signup } from "../apis/auth";
+const schema = z.object({
+ email: z.string().email({ message: "올바른 이메일 형식이 아닙니다" }),
+ password: z
+ .string()
+ .min(6, {
+ message: "비밀번호는 6자 이상이어야 합니다",
+ }),
+ passwordCheck:z
+ .string()
+ .min(6, {
+ message: "비밀번호는 6자 이상이어야 합니다",
+ }),
+ name: z
+ .string()
+ .min(1, {message:"이름을 입력해 주세요"})
+})
+.refine((data) => data.password === data.passwordCheck, {
+ message:"비밀번호가 일치하지 않습니다.",
+ path:["passwordCheck"]})
+
+type FormFields = z.infer404 - 페이지를 찾을 수 없습니다
+
+
+
+
+ );
+};
+
+export default SignUpPage;
\ No newline at end of file
diff --git a/week06/eru/6nd-mission2/src/types/authType.ts b/week06/eru/6nd-mission2/src/types/authType.ts
new file mode 100644
index 0000000..8822451
--- /dev/null
+++ b/week06/eru/6nd-mission2/src/types/authType.ts
@@ -0,0 +1,42 @@
+import type { CommonResponse } from "./common";
+
+// 1. 공통 유저 정보 인터페이스 (중복 제거)
+export interface UserInfo {
+ id: number;
+ name: string;
+ email: string;
+ bio: string | null;
+ avatar: string | null; // avator -> avatar 오타 수정
+ createdAt: string;
+ updatedAt: string; // updatedAT -> updatedAt 오타 수정
+}
+
+// 2. 회원가입 관련 타입
+export type RequestSignUpUser = {
+ name: string;
+ email: string;
+ bio?: string;
+ avatar?: string;
+ password: string;
+};
+
+// UserInfo를 재사용하여 응답 타입 정의
+export type ResponseSignUp = CommonResponse
+ {step === 1 && (
+ <>
+
+ {errors.email &&
+ {errors.email.message}
}
+
+
+ )}
+ {step === 2 && (
+ <>
+
+ {errors.password && {errors.password.message}
}
+
+ {errors.passwordCheck && {errors.passwordCheck.message}
}
+
+
+ )}
+ {step === 3 && (
+ <>
+
+ {errors.name && {errors.name.message}
}
+
+
+ )}
+