+
+
+
+ {/* 오른쪽: 검색 + 로그인 영역 */}
+ navigate("/")} + className="text-pink-500 font-bold text-2xl cursor-pointer" + > + 돌려돌려LP판 +
+
+ {/* 검색 아이콘 */}
+
+
+ 
+
+ );
+};
+
+export default LPCard;
\ No newline at end of file
diff --git a/LP/src/components/ProtectedRoute.tsx b/LP/src/components/ProtectedRoute.tsx
new file mode 100644
index 00000000..325df737
--- /dev/null
+++ b/LP/src/components/ProtectedRoute.tsx
@@ -0,0 +1,22 @@
+import { Navigate } from "react-router-dom";
+import { useAuthContext } from "../context/AuthContext";
+import { ReactNode } from "react";
+
+const ProtectedRoute = ({ children }: { children: ReactNode }) => {
+ const { isLoggedIn, isLoading } = useAuthContext();
+
+ if (isLoading) {
+ // 초기화 중일 땐 아무것도 렌더링하지 않음 (또는 Loading 컴포넌트)
+ return null;
+ }
+
+ if (!isLoggedIn) {
+ return
+
+ {title}
+{new Date(createdAt).toLocaleDateString()}
+❤️ {likeCount}
+
+ setIsSidebarOpen(false)} />
+
+ {/* Main content */}
+
+ );
+};
+
+export default HomeLayout;
\ No newline at end of file
diff --git a/LP/src/main.tsx b/LP/src/main.tsx
new file mode 100644
index 00000000..eff7ccc6
--- /dev/null
+++ b/LP/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+
+ setIsSidebarOpen((prev) => !prev)} />
+
+
+
+
+
+
+
+ 구글 로그인 처리 중입니다...
;
+};
+
+export default GoogleCallback;
\ No newline at end of file
diff --git a/LP/src/pages/HomePage.tsx b/LP/src/pages/HomePage.tsx
new file mode 100644
index 00000000..0646940e
--- /dev/null
+++ b/LP/src/pages/HomePage.tsx
@@ -0,0 +1,142 @@
+import { useState, useRef, useEffect } from "react";
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import { useAuthContext } from "../context/AuthContext";
+import api from "../api/axios";
+import LPCard from "../components/LPCard";
+
+// LP 리스트 요청 함수
+const fetchLps = async ({ pageParam = 0, order }: { pageParam?: number; order: "asc" | "desc" }) => {
+ const res = await api.get("lps", {
+ params: {
+ order,
+ cursor: pageParam,
+ limit: 20,
+ },
+ });
+
+ const result = res.data.data;
+
+ await new Promise((resolve) => setTimeout(resolve, 500)); //지연 로딩효과 확인용
+ return {
+ items: Array.isArray(result?.data) ? result.data : [],
+ nextCursor: result?.hasNext ? result.nextCursor : null,
+ };
+};
+
+const HomePage = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const { isLoggedIn } = useAuthContext();
+ const navigate = useNavigate();
+ const loadMoreRef = useRef(null);
+
+ const {
+ data,
+ fetchNextPage,
+ hasNextPage,
+ isFetchingNextPage,
+ isLoading,
+ } = useInfiniteQuery({
+ queryKey: ["lps", order],
+ queryFn: ({ pageParam = 0 }) => fetchLps({ pageParam, order }),
+ getNextPageParam: (lastPage) => lastPage.nextCursor,
+ initialPageParam: 0,
+ });
+
+ const handleCardClick = (id: number) => {
+ if (!isLoggedIn) {
+ const shouldLogin = window.confirm("로그인이 필요한 서비스입니다. 로그인 해주세요!");
+ if (shouldLogin) navigate("/login");
+ return;
+ }
+ navigate(`/lp/${id}`);
+ };
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ (entries) => {
+ if (entries[0].isIntersecting && hasNextPage) {
+ fetchNextPage();
+ }
+ },
+ { threshold: 1.0 }
+ );
+ if (loadMoreRef.current) observer.observe(loadMoreRef.current);
+ return () => {
+ if (loadMoreRef.current) observer.unobserve(loadMoreRef.current);
+ };
+ }, [hasNextPage, fetchNextPage]);
+
+ console.log("data:", data);
+
+ return (
+
+
+ );
+};
+
+export default HomePage;
\ No newline at end of file
diff --git a/LP/src/pages/LPDetail.tsx b/LP/src/pages/LPDetail.tsx
new file mode 100644
index 00000000..244802c8
--- /dev/null
+++ b/LP/src/pages/LPDetail.tsx
@@ -0,0 +1,214 @@
+// NOTE: clsx가 설치되어 있지 않다면 'npm install clsx' 또는 'yarn add clsx' 필요
+import { useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { fetchLpDetail } from "../api/lp";
+import { useState, useEffect, useRef } from "react";
+import { useAuthContext } from "../context/AuthContext";
+import clsx from "clsx";
+import { useComments } from "../hooks/useComments";
+
+const LPDetail = () => {
+ const { LPid } = useParams();
+ const { user } = useAuthContext();
+ const [liked, setLiked] = useState(false);
+ const [likeCount, setLikeCount] = useState(0);
+
+ const {
+ data: lp,
+ isLoading,
+ isError,
+ } = useQuery({
+ queryKey: ["lpDetail", LPid],
+ queryFn: () => fetchLpDetail(LPid!),
+ enabled: !!LPid,
+ onSuccess: (data) => {
+ setLiked(data.likes.some((like) => like.userId === user?.id));
+ setLikeCount(data.likes.length);
+ },
+ });
+
+ const handleLike = () => {
+ setLiked((prev) => !prev);
+ setLikeCount((prev) => (liked ? prev - 1 : prev + 1));
+ // TODO: 실제 서버에 좋아요 요청 보내기
+ };
+
+ const isAuthor = user?.id === lp?.author?.id;
+
+ const [order, setOrder] = useState<'asc' | 'desc'>('desc');
+ const { data: comments, fetchNextPage, hasNextPage, isLoading: isLoadingComments, isFetchingNextPage } = useComments(Number(LPid), order);
+
+ const loaderRef = useRef
+
+
+
+
+
+
+
+ {isLoading
+ ? Array.from({ length: 8 }).map((_, i) => (
+ handleCardClick(lp.id)}
+ />
+ ))
+ )}
+
+
+ {isFetchingNextPage && (
+
+
+
+
+
+ ))
+ : data?.pages.flatMap((page) =>
+ page.items.map((lp: {
+ id: number;
+ thumbnail: string;
+ title: string;
+ createdAt: string;
+ likeCount?: number;
+ }) => (
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+ )}
+
+
+
+
+
+
+
+ ))}
+ 로딩 중...
; + } + + if (isError || !lp) { + returnLP 정보를 불러올 수 없습니다.
; + } + + return ( +
+
+
+
+ );
+};
+
+export default LPDetail;
\ No newline at end of file
diff --git a/LP/src/pages/LoginPage.tsx b/LP/src/pages/LoginPage.tsx
new file mode 100644
index 00000000..8acb2166
--- /dev/null
+++ b/LP/src/pages/LoginPage.tsx
@@ -0,0 +1,137 @@
+import { Link, useLocation } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signin } from "../api/auth";
+import { useNavigate } from "react-router-dom";
+import { useAuthContext } from "../context/AuthContext";
+
+const loginSchema = z.object({
+ email: z.string().email("유효한 이메일을 입력해주세요."),
+ password: z.string().min(6, "비밀번호는 최소 6자 이상이어야 합니다."),
+});
+
+type LoginForm = z.infer
+
+
+ 🟢 {lp.author.name}
+
+ {new Date(lp.createdAt).toLocaleDateString("ko-KR")}
+
+
+
+ {lp.title}
+ +
+
+
+
+ 
+
+
+
+ {lp.content}
+ +
+ {lp.tags.map((tag) => (
+
+ #{tag.name}
+
+ ))}
+
+
+
+ {isAuthor && (
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isLoadingComments && !isFetchingNextPage ? (
+
+ {Array.from({ length: 4 }).map((_, idx) => (
+
+ ) : (
+
+
+
+ ))}
+
+
+
+
+
+ {comments?.pages.map((page) =>
+ page.data.map((comment) => (
+
+ )}
+ {isFetchingNextPage && (
+
+
+ ))
+ )}
+ {hasNextPage && }
+
+ {comment.author.avatar ? (
+ 
+ ) : (
+
+
+ {comment.author.name.charAt(0)}
+
+ )}
+
+
+
+ {comment.author.name}
+
+ {new Date(comment.createdAt).toLocaleString()}
+
+
+ {comment.content}
+
+ {Array.from({ length: 2 }).map((_, idx) => (
+
+ )}
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+};
+export default LoginPage;
diff --git a/LP/src/pages/MyPage.tsx b/LP/src/pages/MyPage.tsx
new file mode 100644
index 00000000..8accbfc7
--- /dev/null
+++ b/LP/src/pages/MyPage.tsx
@@ -0,0 +1,69 @@
+import { useEffect, useState } from "react";
+import api from "../api/axios";
+import { useAuthContext } from "../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+
+interface UserInfo {
+ id: number;
+ name: string;
+ email: string;
+}
+
+const Mypage = () => {
+ const [user, setUser] = useState
+
+
+ 돌려돌려LP판
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Mypage;
\ No newline at end of file
diff --git a/LP/src/pages/NotFoundPage.tsx b/LP/src/pages/NotFoundPage.tsx
new file mode 100644
index 00000000..58001c3e
--- /dev/null
+++ b/LP/src/pages/NotFoundPage.tsx
@@ -0,0 +1,9 @@
+const NotFoundPage = () => {
+ return (
+ 마이페이지
+ {user ? ( + <> +이름: {user.name}
+이메일: {user.email}
+ + ) : ( +로딩 중...
+ )} + +
+
+
+
+
+
+
+ );
+};
+export default NotFoundPage;
diff --git a/LP/src/pages/SignupPage.tsx b/LP/src/pages/SignupPage.tsx
new file mode 100644
index 00000000..5e1a6079
--- /dev/null
+++ b/LP/src/pages/SignupPage.tsx
@@ -0,0 +1,311 @@
+import { useState, useEffect } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signup } from "../api/auth";
+
+function useLocalStorage404
+Page Not Found
+
+
+ );
+};
+
+export default SignupPage;
diff --git a/LP/src/types/comments.ts b/LP/src/types/comments.ts
new file mode 100644
index 00000000..87330db8
--- /dev/null
+++ b/LP/src/types/comments.ts
@@ -0,0 +1,22 @@
+export interface Author {
+ id: number;
+ name: string;
+ email: string;
+ avatar: string | null;
+ }
+
+ export interface Comment {
+ id: number;
+ content: string;
+ lpId: number;
+ authorId: number;
+ createdAt: string;
+ updatedAt: string;
+ author: Author;
+ }
+
+ export interface CommentPage {
+ data: Comment[];
+ nextCursor: number;
+ hasNext: boolean;
+ }
\ No newline at end of file
diff --git a/LP/src/types/lp.ts b/LP/src/types/lp.ts
new file mode 100644
index 00000000..e386aa26
--- /dev/null
+++ b/LP/src/types/lp.ts
@@ -0,0 +1,22 @@
+// src/types/lp.ts
+export interface Lp {
+ id: number;
+ title: string;
+ content: string;
+ thumbnail: string;
+ published: boolean;
+ authorId: number;
+ createdAt: string;
+ updatedAt: string;
+ tags: Tag[];
+ likes: {
+ id: number;
+ userId: number;
+ lpId: number;
+ }[];
+ }
+
+export interface Tag {
+ id: number;
+ name: string;
+ }
\ No newline at end of file
diff --git a/LP/src/utils/logout.ts b/LP/src/utils/logout.ts
new file mode 100644
index 00000000..0001ab14
--- /dev/null
+++ b/LP/src/utils/logout.ts
@@ -0,0 +1,5 @@
+export function logoutUser() {
+ localStorage.removeItem("accessToken");
+ localStorage.removeItem("refreshToken");
+ window.location.href = "/login";
+ }
\ No newline at end of file
diff --git a/LP/src/utils/validate.ts b/LP/src/utils/validate.ts
new file mode 100644
index 00000000..3408521a
--- /dev/null
+++ b/LP/src/utils/validate.ts
@@ -0,0 +1,34 @@
+export type UserSignInformation = {
+ email: string;
+ password: string;
+};
+
+function validateUser(values: UserSignInformation) {
+ const errors: Partial
+
+
+ 돌려돌려LP판
+
+
+
+
+
+
+
+
+
+
+
+ {
+ if (step > 1) {
+ setStep(step - 1);
+ } else {
+ window.history.back();
+ }
+ }}
+ >
+ <
+
+
+
+ {step === 1 && (
+ <>
+
+
+ 회원가입
+
+
+ OR
+
+
+
+
+ {!!errors.email && !!touchedFields.email && (
+ {errors.email.message}
+ )}
+
+
+
+ )}
+
+ {step === 2 && (
+ <>
+
+ {getValues("email") ?? ""}
+
+
+
+
+
+
+ {!!errors.password && !!touchedFields.password && (
+ {errors.password.message}
+ )}
+
+
+ {
+ setConfirmPassword(e.target.value);
+ if (
+ getValues("password") &&
+ e.target.value &&
+ getValues("password").trim() !== e.target.value.trim()
+ ) {
+ setConfirmError("비밀번호가 일치하지 않습니다.");
+ } else {
+ setConfirmError("");
+ }
+ }}
+ placeholder="비밀번호를 다시 한 번 입력해주세요!"
+ className={`bg-black border w-full p-[10px] text-white placeholder-gray-400 focus:border-[#8072ff] rounded-sm ${
+ confirmError
+ ? "border-red-500 bg-red-200 text-black"
+ : "border-[#ccc]"
+ }`}
+ />
+
+
+ {confirmError && (
+ {confirmError}
+ )}
+
+
+
+ )}
+
+ {step === 3 && (
+ <>
+
+ {getValues("email") ?? ""}
+
+ setNickname(e.target.value)}
+ placeholder="닉네임을 입력해주세요!"
+ className="bg-black border w-full p-[10px] text-white placeholder-gray-400 focus:border-[#8072ff] rounded-sm border-[#ccc]"
+ />
+
+
+ )}
+