+
+ );
+};
+
+export default CommentsSection;
diff --git a/Week8/ysh2002m/mission/src/components/googlelogin.tsx b/Week8/ysh2002m/mission/src/components/googlelogin.tsx
new file mode 100644
index 00000000..37d3484d
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/googlelogin.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+
+const OAuthCallbackPage = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+
+ useEffect(() => {
+ const searchParams = new URLSearchParams(location.search);
+ const accessToken = searchParams.get("accessToken");
+ const refreshToken = searchParams.get("refreshToken");
+ const nickname = searchParams.get("nickname");
+
+ if (accessToken) {
+ localStorage.setItem("accessToken", accessToken);
+ if (nickname) {
+ localStorage.setItem("nickname", nickname);
+ }
+ if (refreshToken) {
+ sessionStorage.setItem("refreshToken", refreshToken);
+ }
+
+ window.dispatchEvent(new Event("storage"));
+
+ navigate("/", { replace: true });
+ } else {
+ navigate("/login", { replace: true });
+ }
+ }, [location, navigate]);
+
+ return (
+
+ setNewComment(e.target.value)}
+ placeholder="댓글을 입력해주세요."
+ className="flex-1 bg-gray-800 text-white rounded-l-md px-4 py-2 focus:outline-none"
+ />
+
+
+
+
+
+
+
+
+ {(!showContent || isLoading) && (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+ )}
+
+ {showContent && !isLoading && comments.map(comment => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+ ))}
+
+ {isFetchingNextPage &&
+ {comment.author.avatar ? (
+ 
+ ) : (
+ comment.author.name.charAt(0)
+ )}
+
+
+
+
+ {comment.author.id === currentUserId && (
+ {comment.author.name}
+ {editingCommentId === comment.id ? ( +
+ setEditedContent(e.target.value)}
+ className="flex-1 bg-gray-700 text-white rounded px-2 py-1"
+ />
+
+
+ ) : (
+ {comment.content}
+ )} +
+
+ {menuOpenId === comment.id && (
+
+ )}
+
+
+
+
+ )}
+ 불러오는 중...
} + +
+
+ );
+};
+
+export default OAuthCallbackPage;
diff --git a/Week8/ysh2002m/mission/src/components/lp-detail/credit.tsx b/Week8/ysh2002m/mission/src/components/lp-detail/credit.tsx
new file mode 100644
index 00000000..d1522fa4
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/lp-detail/credit.tsx
@@ -0,0 +1,13 @@
+import type { TagType } from "../../types/lp";
+
+interface Props {
+ tag: TagType;
+}
+
+const TagItem = ({ tag }: Props) => (
+
+ #{tag.name}
+
+);
+
+export default TagItem;
diff --git a/Week8/ysh2002m/mission/src/components/lp-detail/detailcontent.tsx b/Week8/ysh2002m/mission/src/components/lp-detail/detailcontent.tsx
new file mode 100644
index 00000000..d80dd1fd
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/lp-detail/detailcontent.tsx
@@ -0,0 +1,146 @@
+import type { LpDetailDataType } from "../../types/lp";
+import TagItem from "./credit";
+import { formatDistanceToNow } from "date-fns";
+import { ko } from "date-fns/locale";
+import {
+ AiOutlineEdit,
+ AiOutlineDelete,
+ AiOutlineHeart,
+ AiFillHeart,
+} from "react-icons/ai";
+import { useNavigate } from "react-router-dom";
+import { useEditLp } from "../../hooks/lp/useeditlp";
+import { useDeleteLp } from "../../hooks/lp/usedeletelp";
+import { useLikeLp } from "../../hooks/lp/uselikelp";
+import { useUnlikeLp } from "../../hooks/lp/useunlikelp";
+import { useState } from "react";
+
+interface Props {
+ lp: LpDetailDataType;
+}
+
+const LPDetailContent = ({ lp }: Props) => {
+ const tags = lp.tags ?? [];
+ const timeAgo = formatDistanceToNow(new Date(lp.createdAt), {
+ addSuffix: true,
+ locale: ko,
+ });
+
+ const navigate = useNavigate();
+ const lpid = lp.id;
+
+ const { mutate: editLp } = useEditLp(lpid);
+ const { mutate: deleteLp } = useDeleteLp(lpid);
+ const { mutate: likeLp } = useLikeLp(lpid);
+ const { mutate: unlikeLp } = useUnlikeLp(lpid);
+
+ const [isEditing, setIsEditing] = useState(false);
+ const [editedTitle, setEditedTitle] = useState(lp.title);
+
+ const [isLiked, setIsLiked] = useState(lp.isLikedByCurrentUser);
+ const [likeCount, setLikeCount] = useState(lp.likes.length);
+
+ const handleEditToggle = () => {
+ if (isEditing) {
+ editLp({
+ title: editedTitle,
+ content: lp.content,
+ thumbnail: lp.thumbnail,
+ tags: lp.tags.map(tag => tag.name),
+ published: lp.published,
+ });
+ }
+ setIsEditing(!isEditing);
+ };
+
+ const handleDelete = () => {
+ if (confirm("정말 삭제하시겠습니까?")) {
+ deleteLp(undefined, {
+ onSuccess: () => navigate("/"),
+ });
+ }
+ };
+
+ const handleLikeToggle = () => {
+ if (isLiked) {
+ setLikeCount((prev) => prev - 1);
+ unlikeLp();
+ } else {
+ setLikeCount((prev) => prev + 1);
+ likeLp();
+ }
+ setIsLiked(!isLiked);
+ };
+
+ return (
+ 로그인 처리 중입니다...
+
+
+ );
+};
+
+export default LPDetailContent;
diff --git a/Week8/ysh2002m/mission/src/components/lp/lp-item.tsx b/Week8/ysh2002m/mission/src/components/lp/lp-item.tsx
new file mode 100644
index 00000000..69e6deea
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/lp/lp-item.tsx
@@ -0,0 +1,58 @@
+import { useNavigate } from "react-router-dom";
+import type { LpDataType } from "../../types/lp";
+import { formatDistanceToNow } from "date-fns";
+import { ko } from "date-fns/locale";
+import { AiOutlineHeart } from "react-icons/ai";
+
+type Props = {
+ lp: LpDataType;
+};
+
+const LPItem = ({ lp }: Props) => {
+ const navigate = useNavigate();
+ const accessToken = localStorage.getItem("accessToken");
+
+ const handleClick = () => {
+ if (!accessToken) {
+ alert("로그인을 해야 이용할 수 있습니다.");
+ navigate("/login");
+ return;
+ }
+ navigate(`/lp/${lp.id}`);
+ };
+
+ return (
+
+
+
+
+
+ {isEditing ? (
+ setEditedTitle(e.target.value)}
+ className="w-full mb-4 px-3 py-2 rounded border border-gray-600 bg-gray-700 text-white"
+ />
+ ) : (
+
+ {lp.author.avatar ? (
+ 
+ ) : (
+
+ )}
+ {lp.author.name}
+
+
+ {timeAgo}
+
+
+ {lp.title}
+ )} + +
+ 
+
+
+
+
+
+ {lp.content}
+ +
+ {tags.map((tag) => (
+
+
+
+ {isLiked ? (
+
+
+
+
+
+ );
+};
+
+export default LPItem;
diff --git a/Week8/ysh2002m/mission/src/components/lp/lp-list.tsx b/Week8/ysh2002m/mission/src/components/lp/lp-list.tsx
new file mode 100644
index 00000000..90da267b
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/lp/lp-list.tsx
@@ -0,0 +1,28 @@
+import type { LpDataType } from "../../types/lp";
+import LPItem from "./lp-item";
+
+type Props = {
+ lps: LpDataType[];
+ isLoading?: boolean;
+};
+
+const LPList = ({ lps, isLoading = false }: Props) => {
+ const skeletonArray = Array(12).fill(0);
+
+ return (
+
+
+ {lp.title}
++ {formatDistanceToNow(new Date(lp.createdAt), { + addSuffix: true, + locale: ko, + })} +
+
+
+
+
+
+
+ );
+};
+
+export default AddLpModal;
diff --git a/Week8/ysh2002m/mission/src/components/modal/lppicture.tsx b/Week8/ysh2002m/mission/src/components/modal/lppicture.tsx
new file mode 100644
index 00000000..30c585cd
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/modal/lppicture.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface Props {
+ thumbnailPreview: string;
+ fileInputRef: React.RefObject
+
+
+ fileInputRef.current?.click()} />
+
+
+
+ setTitle(e.target.value)}
+ onContentChange={(e) => setContent(e.target.value)}
+ />
+
+ setPublished(e.target.checked)} />
+
+
+
+
+
+
+
+ setTagInput(e.target.value)}
+ onAdd={handleAddTag}
+ />
+
+
+
+
+ {thumbnailPreview && (
+ 
+ )}
+
+);
+
+export default LpPicture;
diff --git a/Week8/ysh2002m/mission/src/components/modal/lptaginput.tsx b/Week8/ysh2002m/mission/src/components/modal/lptaginput.tsx
new file mode 100644
index 00000000..116c2892
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/modal/lptaginput.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface Props {
+ tags: string[];
+ value: string;
+ onChange: React.ChangeEventHandler
+
+);
+
+export default LpTagInput;
diff --git a/Week8/ysh2002m/mission/src/components/modal/lpvinysvg.tsx b/Week8/ysh2002m/mission/src/components/modal/lpvinysvg.tsx
new file mode 100644
index 00000000..c55fa05d
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/modal/lpvinysvg.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import lpImage from '../../assets/lp.png';
+
+interface Props {
+ thumbnailPreview: string;
+ onThumbnailClick: () => void;
+}
+
+const LpVinylSvg: React.FC
+
+
+
+
+ {tags.map((t, i) => (
+
+ {t}
+
+ ))}
+
+
+ {thumbnailPreview ? (
+
+ ) : (
+ 
+ )}
+
+);
+
+export default LpVinylSvg;
diff --git a/Week8/ysh2002m/mission/src/components/navbar/navbar.tsx b/Week8/ysh2002m/mission/src/components/navbar/navbar.tsx
new file mode 100644
index 00000000..a96dbeab
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/navbar/navbar.tsx
@@ -0,0 +1,96 @@
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import { HiOutlineMenu } from "react-icons/hi";
+import { AiOutlineSearch } from "react-icons/ai";
+import { useEffect, useState } from "react";
+import { useLogout } from "../../hooks/auth/uselogout";
+
+interface NavbarProps {
+ onToggleSidebar: () => void;
+}
+
+const Navbar = ({ onToggleSidebar }: NavbarProps) => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const [isLoggedIn, setIsLoggedIn] = useState(false);
+ const [nickname, setNickname] = useState
+ setIsModalOpen(false)} />}
+
+ );
+};
+
+export default Sidebar;
diff --git a/Week8/ysh2002m/mission/src/components/skeleton/skeleton.tsx b/Week8/ysh2002m/mission/src/components/skeleton/skeleton.tsx
new file mode 100644
index 00000000..b61dd07c
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/skeleton/skeleton.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface SkeletonGridProps {
+ count?: number;
+}
+
+const SkeletonGrid: React.FC
+
+
+ {isModalOpen &&
+
+
+
+
+
+
+ {Array.from({ length: count }).map((_, i) => (
+
+ ))}
+
+ );
+};
+
+export default SkeletonGrid;
diff --git a/Week8/ysh2002m/mission/src/components/spinner.tsx b/Week8/ysh2002m/mission/src/components/spinner.tsx
new file mode 100644
index 00000000..7dc543bc
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/spinner.tsx
@@ -0,0 +1,10 @@
+const Spinner = () => {
+ return (
+
+
+
+ );
+ };
+
+ export default Spinner;
+
\ No newline at end of file
diff --git a/Week8/ysh2002m/mission/src/components/withdrawmodal.tsx b/Week8/ysh2002m/mission/src/components/withdrawmodal.tsx
new file mode 100644
index 00000000..1bc67227
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/components/withdrawmodal.tsx
@@ -0,0 +1,43 @@
+import { useWithdrawUser } from "../hooks/auth/usewithdraw";
+
+interface WithdrawModalProps {
+ onClose: () => void;
+}
+
+const WithdrawModal: React.FC
+
+ );
+};
+
+export default WithdrawModal;
diff --git a/Week8/ysh2002m/mission/src/hooks/auth/uselocalstorage.ts b/Week8/ysh2002m/mission/src/hooks/auth/uselocalstorage.ts
new file mode 100644
index 00000000..fd66da6d
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/hooks/auth/uselocalstorage.ts
@@ -0,0 +1,14 @@
+import { useState, useEffect } from "react";
+
+export function useLocalStorage
+
+ 정말 탈퇴하시겠습니까?
+
+
+
+
+
+ setIsSidebarOpen((prev) => !prev)} />
+
+ );
+};
+
+export default Layout;
diff --git a/Week8/ysh2002m/mission/src/main.tsx b/Week8/ysh2002m/mission/src/main.tsx
new file mode 100644
index 00000000..3a9f5f03
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/main.tsx
@@ -0,0 +1,15 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import App from "./App.tsx";
+import "./index.css";
+
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
+
+ {!isAuthPage && isSidebarOpen &&
+
+
+
+ {/* 정렬 버튼 */}
+
+ {showInitialSkeleton ? (
+ initialSkeleton.map((_, i) => (
+
+ ))
+ ) : (
+ <>
+ {lps.map((lp) => (
+
+
+
+
+ {isModalOpen && setIsModalOpen(false)} />}
+
+
+
+ );
+};
+
+export default Home;
diff --git a/Week8/ysh2002m/mission/src/pages/login.tsx b/Week8/ysh2002m/mission/src/pages/login.tsx
new file mode 100644
index 00000000..43223856
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/pages/login.tsx
@@ -0,0 +1,86 @@
+import { useNavigate } from "react-router-dom";
+import { useLoginForm } from "../hooks/auth/useloginform";
+
+const LoginPage = () => {
+ const navigate = useNavigate();
+
+ const {
+ register,
+ handleSubmit,
+ errors,
+ isValid,
+ onSubmit,
+ } = useLoginForm();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LoginPage;
diff --git a/Week8/ysh2002m/mission/src/pages/lp-detail.tsx b/Week8/ysh2002m/mission/src/pages/lp-detail.tsx
new file mode 100644
index 00000000..8082f0f0
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/pages/lp-detail.tsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import axios from "../apis/axios";
+import Spinner from "../components/spinner";
+import LPDetailContent from "../components/lp-detail/detailcontent";
+import { AiOutlineComment } from "react-icons/ai";
+import CommentsSection from "../components/comments/comments";
+import { fetchCurrentUserInfo } from "../hooks/user/userinfo";
+import type { LpDetailDataType } from "../types/lp";
+
+const LPDetailPage: React.FC = () => {
+ const { Lpid } = useParams<{ Lpid: string }>();
+ const [lp, setLp] = useState+ LP 정보를 불러오는 중 에러가 발생했습니다. +
+ ); + + return ( +
+
+ );
+};
+
+export default LPDetailPage;
diff --git a/Week8/ysh2002m/mission/src/pages/mypage.tsx b/Week8/ysh2002m/mission/src/pages/mypage.tsx
new file mode 100644
index 00000000..3becbe75
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/pages/mypage.tsx
@@ -0,0 +1,105 @@
+import { useState, useEffect, useRef } from "react";
+import { useUpdateUserProfile } from "../hooks/user/useupdateprofile";
+import axios from "../apis/axios";
+
+const MyPage = () => {
+ const [name, setName] = useState("");
+ const [bio, setBio] = useState("");
+ const [avatar, setAvatar] = useState("");
+ const [email, setEmail] = useState("");
+ const [isEditing, setIsEditing] = useState(false);
+ const fileInputRef = useRef
+
+
+ {showComments && currentUserId !== null && (
+
+
+ )}
+
+
+ );
+};
+
+export default MyPage;
diff --git a/Week8/ysh2002m/mission/src/pages/not-found.tsx b/Week8/ysh2002m/mission/src/pages/not-found.tsx
new file mode 100644
index 00000000..d099349e
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/pages/not-found.tsx
@@ -0,0 +1,5 @@
+const NotFound = () => {
+ return
+ {/* 프로필 이미지 */}
+
+ isEditing && fileInputRef.current?.click()}
+ >
+ {avatar && (
+ 
+ )}
+
+
+
+ {/* 오른쪽 정보 */}
+
+ {isEditing ? (
+ <>
+ setName(e.target.value)}
+ className="w-full mb-2 px-3 py-1 rounded border border-gray-600 bg-gray-700 text-white"
+ />
+ setBio(e.target.value)}
+ className="w-full mb-2 px-3 py-1 rounded border border-gray-600 bg-gray-700 text-white"
+ />
+
+ ) : (
+ <>
+
+
+ {/* 수정/완료 버튼 */}
+
+ {name}
+{bio}
+ + )} +{email}
+페이지가 읽히지 않습니다.
;
+};
+
+export default NotFound;
diff --git a/Week8/ysh2002m/mission/src/pages/search.tsx b/Week8/ysh2002m/mission/src/pages/search.tsx
new file mode 100644
index 00000000..905428be
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/pages/search.tsx
@@ -0,0 +1,135 @@
+import { useState, useRef, useEffect } from "react";
+import Select from "react-select";
+import LPList from "../components/lp/lp-list";
+import { useDebounce } from "../hooks/utils/usedebounce";
+import { useInfiniteSearchLps } from "../hooks/search/useinfinitesearchlp";
+import { useInfiniteTagSearchLps } from "../hooks/search/useinfinitetagsearchlp";
+import { useThrottle } from "../hooks/utils/usethrottle";
+
+const SearchPage = () => {
+ const [order, setOrder] = useState<"asc" | "desc">("desc");
+ const [keyword, setKeyword] = useState("");
+ const [searchType, setSearchType] = useState({ value: "title", label: "제목" });
+
+ const debouncedKeyword = useDebounce(keyword, 500);
+
+ const searchLpsResult = useInfiniteSearchLps({
+ searchType: "title",
+ keyword: debouncedKeyword,
+ order,
+ });
+
+ const tagLpsResult = useInfiniteTagSearchLps({
+ tagName: debouncedKeyword,
+ order,
+ });
+
+ const result = searchType.value === "tag" ? tagLpsResult : searchLpsResult;
+
+ const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = result;
+
+ const observerRef = useRef
+
+ );
+};
+
+export default SearchPage;
diff --git a/Week8/ysh2002m/mission/src/pages/signup.tsx b/Week8/ysh2002m/mission/src/pages/signup.tsx
new file mode 100644
index 00000000..4427d845
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/pages/signup.tsx
@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Eye, EyeOff } from "lucide-react";
+import { useSignupForm } from "../hooks/auth/usesignupform";
+
+const SignUpPage = () => {
+ const navigate = useNavigate();
+ const [step, setStep] = useState(1);
+ const [showPassword, setShowPassword] = useState(false);
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+ const {
+ emailValue,
+ setEmailValue,
+ registerEmail,
+ handleEmailSubmit,
+ emailErrors,
+ isEmailValid,
+ registerPassword,
+ handlePasswordSubmit,
+ pwErrors,
+ isPasswordValid,
+ registerNickname,
+ onNicknameSubmit,
+ nicknameErrors,
+ isNicknameValid,
+ } = useSignupForm();
+
+ const onEmailSubmit = handleEmailSubmit((data) => {
+ setEmailValue(data.email);
+ setStep(2);
+ });
+
+ const onPasswordSubmit = handlePasswordSubmit(() => setStep(3));
+
+ const goBack = () => {
+ if (step === 1) navigate(-1);
+ else setStep(step - 1);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default SignUpPage;
diff --git a/Week8/ysh2002m/mission/src/routes/routes.tsx b/Week8/ysh2002m/mission/src/routes/routes.tsx
new file mode 100644
index 00000000..6d605d4a
--- /dev/null
+++ b/Week8/ysh2002m/mission/src/routes/routes.tsx
@@ -0,0 +1,29 @@
+import { createBrowserRouter } from "react-router-dom";
+import Home from "../pages/home";
+import NotFound from "../pages/not-found";
+import Layout from "../layout/root-layout";
+import LoginPage from "../pages/login";
+import SignUpPage from "../pages/signup";
+import OAuthCallbackPage from "../components/googlelogin";
+import LPDetailPage from "../pages/lp-detail";
+import MyPage from "../pages/mypage";
+import SearchPage from "../pages/search";
+
+const router = createBrowserRouter([
+ {
+ path: "/",
+ element: