+ 
+
+ )
+}
+
+export default LpCard
\ No newline at end of file
diff --git a/week6/src/components/LpCard/LpCardSkeleton.tsx b/week6/src/components/LpCard/LpCardSkeleton.tsx
new file mode 100644
index 00000000..3fb5b98d
--- /dev/null
+++ b/week6/src/components/LpCard/LpCardSkeleton.tsx
@@ -0,0 +1,13 @@
+
+const LpCardSkeleton = () => {
+ return (
+
+
+ + {lp.title} +
+
+
+
+ )
+}
+
+export default LpCardSkeleton
\ No newline at end of file
diff --git a/week6/src/components/LpCard/LpCardSkeletonList.tsx b/week6/src/components/LpCard/LpCardSkeletonList.tsx
new file mode 100644
index 00000000..95f843ae
--- /dev/null
+++ b/week6/src/components/LpCard/LpCardSkeletonList.tsx
@@ -0,0 +1,17 @@
+import LpCardSkeleton from './LpCardSkeleton';
+
+interface LpCardSkeletonListProps{
+ count: number;
+}
+
+const LpCardSkeletonList = ({count}:LpCardSkeletonListProps) => {
+ return (
+ <>
+ {new Array(count).fill(0).map((_, idx)=>(
+
+
+
+
+
+
+
+
+ );
+}
+export default HomeLayout;
\ No newline at end of file
diff --git a/week6/src/layouts/ProtectedLayout.tsx b/week6/src/layouts/ProtectedLayout.tsx
new file mode 100644
index 00000000..f4b26487
--- /dev/null
+++ b/week6/src/layouts/ProtectedLayout.tsx
@@ -0,0 +1,26 @@
+
+import { Navigate, Outlet, useLocation } from 'react-router-dom'
+import { useAuth } from '../context/AuthContext'
+import Navbar from '../components/Navbar'
+import Footer from '../components/Footer'
+
+
+export const ProtectedLayout = () => {
+ const { accessToken } = useAuth()
+ const location = useLocation()
+
+ if(!accessToken){
+ alert("로그인 후 사용가능합니다.")
+ return
+
+
+
+
)
+}
+
+export default ProtectedLayout
\ No newline at end of file
diff --git a/week6/src/main.tsx b/week6/src/main.tsx
new file mode 100644
index 00000000..a8f0f10d
--- /dev/null
+++ b/week6/src/main.tsx
@@ -0,0 +1,12 @@
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ )
+}
+
+export default GoogleLoginRedirectPage
\ No newline at end of file
diff --git a/week6/src/pages/HomePage.tsx b/week6/src/pages/HomePage.tsx
new file mode 100644
index 00000000..50855930
--- /dev/null
+++ b/week6/src/pages/HomePage.tsx
@@ -0,0 +1,59 @@
+
+import LpCard from '../components/LpCard/LpCard';
+import LpCardSkeletonList from '../components/LpCard/LpCardSkeletonList';
+import { PAGNATION_ORDER } from '../enums/common';
+import useGetInfiniteLpList from '../hooks/queries/useGetInfiniteLpList';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+
+const HomePage = () => {
+
+ const[search,setSearch] = useState('')
+ // const {data,isPending,isError} = useGetLpList({
+ // search,
+ // limit: 50,
+ // })
+
+ const {
+ data:lps,
+ isFetching,
+ hasNextPage,
+ isPending,
+ fetchNextPage,
+ isError
+ } = useGetInfiniteLpList(10, search, PAGNATION_ORDER.ASC)
+
+ //react-intersection-observer에서 제공
+ //ref -> 특정한 HTML요소 감시할 수 있음
+ //inView -> 그 요소가 화면에 보이면 true
+ const {ref, inView} = useInView({
+ threshold: 0,
+ })
+
+ useEffect(() => {
+ if(inView) {
+ !isFetching && hasNextPage && fetchNextPage()
+ }
+ },[inView,isFetching,hasNextPage,fetchNextPage])
+
+ if(isError) return 구글 로그인 중입니다...
+
+ 
+
+
+ 에러가 발생했습니다.
+ + + return ( +
+ setSearch(e.target.value)} />
+
+
+ );
+}
+export default HomePage;
+
diff --git a/week6/src/pages/LoginPage.tsx b/week6/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..ab21ac6f
--- /dev/null
+++ b/week6/src/pages/LoginPage.tsx
@@ -0,0 +1,90 @@
+import { useEffect } from 'react';
+import { useAuth } from '../context/AuthContext';
+import useForm from '../hooks/useForm';
+import { UserSigninInformation, validateSignin } from '../utils/validate';
+import { useNavigate } from 'react-router-dom';
+
+
+
+const LoginPage = () => {
+ const{login,accessToken} = useAuth()
+ const navigate = useNavigate()
+
+ useEffect(() => {
+ if(accessToken){
+ navigate('/')
+ }
+ }, [accessToken, navigate])
+
+
+ const {values, errors,touched, getInputProps} = useForm
+ {(isFetching || isPending) && }
+ {lps?.pages
+ ?.map((page)=>page.data.data)
+ ?.flat()
+ ?.map((lp) => )}
+
+
+
+
+ );
+}
+export default LoginPage;
\ No newline at end of file
diff --git a/week6/src/pages/MyPage.tsx b/week6/src/pages/MyPage.tsx
new file mode 100644
index 00000000..4391ec47
--- /dev/null
+++ b/week6/src/pages/MyPage.tsx
@@ -0,0 +1,40 @@
+import { useEffect } from 'react'
+import { getMyInfo } from '../apis/auth'
+import { useState } from 'react'
+import { ResponseMyInfoDto } from '../types/auth'
+import { useAuth } from '../context/AuthContext'
+import { useNavigate } from 'react-router-dom'
+
+const MyPage = () => {
+ const navigate = useNavigate()
+ const {logout} = useAuth()
+ const [data,setData] = useState
+
+ {errors?.email &&touched?.email &&(
+ {errors.email}
)}
+
+
+ {errors?.password &&touched?.password &&({errors.password}
)}
+
+
+
+
+
+ 
+
+ )
+}
+
+export default MyPage
\ No newline at end of file
diff --git a/week6/src/pages/NotFoundPage.tsx b/week6/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..a5f13852
--- /dev/null
+++ b/week6/src/pages/NotFoundPage.tsx
@@ -0,0 +1,8 @@
+const NotFoundPage = () => {
+ return (
+ {data?.data.name}님 환영합니다.
+{data?.data.email}
+ + +
+ Not found
+
+ );
+}
+export default NotFoundPage;
diff --git a/week6/src/pages/SignupPage.tsx b/week6/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..6d9c389a
--- /dev/null
+++ b/week6/src/pages/SignupPage.tsx
@@ -0,0 +1,95 @@
+import { z } from 'zod'
+import { SubmitHandler, useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod';
+import { postSignup } from '../apis/auth';
+
+
+
+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']})
+
+type FormFields = z.infer
+
+ )
+}
+export default SignupPage
+
+
diff --git a/week6/src/types/auth.ts b/week6/src/types/auth.ts
new file mode 100644
index 00000000..ef2cb4fd
--- /dev/null
+++ b/week6/src/types/auth.ts
@@ -0,0 +1,44 @@
+import { CommonResponse } from './common';
+
+//회원가입 관련
+export type RequestSignupDto = {
+ email: string;
+ password: string;
+ name: string;
+ bio?: string;
+ avatar?: string;
+}
+
+export type ResponseSignupDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string|null;
+ avatar: string|null;
+ createdAt: Date
+ updatedAt: Date
+}>
+
+//로그인 관련
+export type RequestSigninDto = {
+ email: string;
+ password: string;
+}
+
+export type ResponseSigninDto = CommonResponse<{
+ id: number;
+ name: string;
+ accessToken: string;
+ refreshToken: string;
+}>
+
+//내정보 조회
+export type ResponseMyInfoDto = CommonResponse<{
+ id: number;
+ name: string;
+ email: string;
+ bio: string|null;
+ avatar: string|null;
+ createdAt: Date
+ updatedAt: Date
+}>
diff --git a/week6/src/types/common.ts b/week6/src/types/common.ts
new file mode 100644
index 00000000..43f74700
--- /dev/null
+++ b/week6/src/types/common.ts
@@ -0,0 +1,22 @@
+import { PAGNATION_ORDER } from "../enums/common";
+
+export type CommonResponse
+
+ {errors?.email && (
+ {errors.email?.message}
)}
+
+
+ {errors?.password && ({errors.password?.message}
)}
+
+
+ {errors?.passwordCheck && ({errors.password?.message}
)}
+
+
+ {errors?.name && ({errors.name?.message}
)}
+
+
+