From 4397c8e1a418c19f4c013b01e33e63b58beccac6 Mon Sep 17 00:00:00 2001
From: cccwon2 <cccwon2@naver.com>
Date: Thu, 26 Dec 2024 17:09:48 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=A7=88=EC=9D=B4=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20>=20=EB=82=B4=EA=B0=80=20=EC=93=B4=20=EA=B8=80,=20?=
 =?UTF-8?q?=EB=82=B4=EA=B0=80=20=EC=93=B4=20=EB=8C=93=EA=B8=80=20=EC=BC=80?=
 =?UTF-8?q?=EB=B0=A5=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95=20=EB=93=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/mypage/page.tsx               | 17 ++--
 .../components/card/board/BoardComment.tsx    | 55 +++++------
 .../components/card/board/BoardPostItem.tsx   | 93 ++++++++++---------
 3 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/src/app/(pages)/mypage/page.tsx b/src/app/(pages)/mypage/page.tsx
index f17c7a5b..c8dec036 100644
--- a/src/app/(pages)/mypage/page.tsx
+++ b/src/app/(pages)/mypage/page.tsx
@@ -6,14 +6,12 @@ import CommentsSection from "./components/sections/CommentsSection";
 import ScrapsSection from "./components/sections/ScrapsSection";
 import { userRoles } from "@/constants/userRoles";
 import { useUser } from "@/hooks/queries/user/me/useUser";
-import toast from "react-hot-toast";
-import { useRouter } from "next/navigation";
+import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 
 export default function MyPage() {
   const searchParams = useSearchParams();
   const currentTab = searchParams.get("tab") || "posts";
-  const router = useRouter();
-  const { user } = useUser();
+  const { user, isLoading } = useUser();
   const isApplicant = user?.role === userRoles.APPLICANT;
 
   const TabContent = {
@@ -22,10 +20,15 @@ export default function MyPage() {
     ...(isApplicant && { scrap: <ScrapsSection /> }),
   }[currentTab];
 
-  if (!user) {
-    toast.error("로그인이 필요한 페이지입니다.");
-    router.push("/login");
+  if (isLoading) {
+    return (
+      <div className="flex h-[calc(100vh-80px)] items-center justify-center">
+        <DotLoadingSpinner />
+      </div>
+    );
   }
 
+  if (!user) return null;
+
   return TabContent;
 }
diff --git a/src/app/components/card/board/BoardComment.tsx b/src/app/components/card/board/BoardComment.tsx
index d6c943af..d92640d5 100644
--- a/src/app/components/card/board/BoardComment.tsx
+++ b/src/app/components/card/board/BoardComment.tsx
@@ -66,37 +66,40 @@ const BoardComment = ({
   ];
 
   return (
-    <Link href={`work-talk/${postId}`}>
-      <div className="relative flex h-[202px] w-[327px] flex-col gap-2 rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md transition-transform hover:scale-105 md:w-[600px] lg:h-[264px] lg:w-full">
-        {/* Post Section */}
-        <div className="flex w-full flex-col gap-4 border-b border-line-100 pb-2 lg:pb-4">
-          <div className="flex items-center gap-[6px] lg:gap-2">
-            <Image
-              src="/icons/document/document.svg"
-              alt="Icon"
-              className="size-6 rounded-full lg:size-9"
-              width={24}
-              height={24}
-            />
-            <span className="text-[12px] text-black-100 lg:text-[16px]">{postTitle}</span>
+    <div className="relative">
+      <Link href={`work-talk/${postId}`}>
+        <div className="relative flex h-[202px] w-[327px] flex-col gap-2 rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md transition-transform hover:scale-105 md:w-[600px] lg:h-[264px] lg:w-full">
+          {/* Post Section */}
+          <div className="flex w-full flex-col gap-4 border-b border-line-100 pb-2 lg:pb-4">
+            <div className="flex items-center gap-[6px] lg:gap-2">
+              <Image
+                src="/icons/document/document.svg"
+                alt="Icon"
+                className="size-6 rounded-full lg:size-9"
+                width={24}
+                height={24}
+              />
+              <span className="text-[12px] text-black-100 lg:text-[16px]">{postTitle}</span>
+            </div>
+            <p className="text-[12px] text-grayscale-500 lg:text-[16px]">{postContent}</p>
           </div>
-          <p className="text-[12px] text-grayscale-500 lg:text-[16px]">{postContent}</p>
-        </div>
 
-        {/* Comment Section */}
-        <div className="flex flex-col gap-3 py-1 lg:py-4">
-          <div className="line-clamp-2 overflow-hidden text-[14px] font-semibold md:h-[50px] lg:text-[18px]">
-            {comment}
-          </div>
-          <div className="line-clamp-2 text-[12px] font-medium text-grayscale-500 lg:text-[16px]">
-            {formatLocalDate(updatedAt)}
+          {/* Comment Section */}
+          <div className="flex flex-col gap-3 py-1 lg:py-4">
+            <div className="line-clamp-2 overflow-hidden text-[14px] font-semibold md:h-[50px] lg:text-[18px]">
+              {comment}
+            </div>
+            <div className="line-clamp-2 text-[12px] font-medium text-grayscale-500 lg:text-[16px]">
+              {formatLocalDate(updatedAt)}
+            </div>
           </div>
         </div>
-        <div className="absolute right-6 flex items-center justify-center">
-          {isAuthor && <KebabDropdown options={dropdownOptions} />}
-        </div>
+      </Link>
+      {/* 케밥 메뉴를 Link 밖으로 이동 */}
+      <div className="absolute right-6 top-6 size-9 bg-white text-center">
+        {isAuthor && <KebabDropdown options={dropdownOptions} />}
       </div>
-    </Link>
+    </div>
   );
 };
 
diff --git a/src/app/components/card/board/BoardPostItem.tsx b/src/app/components/card/board/BoardPostItem.tsx
index 46ee1cea..5fa678c6 100644
--- a/src/app/components/card/board/BoardPostItem.tsx
+++ b/src/app/components/card/board/BoardPostItem.tsx
@@ -6,7 +6,7 @@ import Link from "next/link";
 import KebabDropdown from "../../button/dropdown/KebabDropdown";
 import { useRouter } from "next/navigation";
 import useModalStore from "@/store/modalStore";
-import { useDeleteComment } from "@/hooks/queries/post/comment/useDeleteComment";
+import { useDeletePost } from "@/hooks/queries/post/useDeletePost";
 import { useQueryClient } from "@tanstack/react-query";
 
 const BoardPostItem = ({
@@ -21,7 +21,7 @@ const BoardPostItem = ({
   orderBy: string;
 }) => {
   const router = useRouter();
-  const deleteComment = useDeleteComment(String(post.id));
+  const deletePost = useDeletePost(String(post.id));
   const queryClient = useQueryClient();
   const { openModal, closeModal } = useModalStore();
 
@@ -33,7 +33,7 @@ const BoardPostItem = ({
       confirmText: "삭제하기",
       cancelText: "취소",
       onConfirm: () => {
-        deleteComment.mutate(undefined, {
+        deletePost.mutate(undefined, {
           onSuccess: async () => {
             await queryClient.invalidateQueries({ queryKey: ["post"] });
             await queryClient.invalidateQueries({ queryKey: ["myPosts", { limit, orderBy }] });
@@ -59,54 +59,57 @@ const BoardPostItem = ({
   ];
 
   return (
-    <Link
-      href={`/work-talk/${post.id}`}
-      className="block cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
-    >
-      <div className="relative flex h-[202px] min-w-[327px] flex-col justify-between rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md md:w-[600px] lg:h-[264px] lg:w-full">
-        <div className="flex flex-col gap-2">
-          <h3 className="line-clamp-1 text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
-          <p className="line-clamp-3 overflow-hidden text-[14px] text-grayscale-500 lg:text-[18px]">{post.content}</p>
-        </div>
-
-        {/* 하단 정보 */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <div className="flex items-center gap-1">
-              <Image
-                src={post.writer.imageUrl || "/icons/user/user-profile-md.svg"}
-                alt={post.writer.nickname}
-                width={24}
-                height={24}
-                className="size-6 overflow-hidden rounded-full lg:size-[26px]"
-              />
-              <span className="text-xs font-medium text-gray-500 lg:text-[16px]">{post.writer.nickname}</span>
-            </div>
-            <span className="text-line-200">|</span>
-            <span className="text-xs text-grayscale-400 lg:text-[16px]">{formatLocalDate(post.updatedAt)}</span>
+    <div className="relative">
+      <Link
+        href={`/work-talk/${post.id}`}
+        className="block cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
+      >
+        <div className="relative flex h-[202px] min-w-[327px] flex-col justify-between rounded-[16px] border border-line-200 bg-grayscale-50 p-6 shadow-md md:w-[600px] lg:h-[264px] lg:w-full">
+          <div className="flex flex-col gap-2">
+            <h3 className="line-clamp-1 text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
+            <p className="line-clamp-3 overflow-hidden text-[14px] text-grayscale-500 lg:text-[18px]">{post.content}</p>
           </div>
-          <div className="ml-3 flex items-center gap-2">
-            <div className="flex items-center">
-              <Image
-                src="/icons/comment/comment-md.svg"
-                alt="댓글"
-                width={20}
-                height={20}
-                className="size-6 lg:size-9"
-              />
-              <span className="text-xs text-grayscale-400 lg:text-[16px]">{post.commentCount}</span>
+
+          {/* 하단 정보 */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <div className="flex items-center gap-1">
+                <Image
+                  src={post.writer.imageUrl || "/icons/user/user-profile-md.svg"}
+                  alt={post.writer.nickname}
+                  width={24}
+                  height={24}
+                  className="size-6 overflow-hidden rounded-full lg:size-[26px]"
+                />
+                <span className="text-xs font-medium text-gray-500 lg:text-[16px]">{post.writer.nickname}</span>
+              </div>
+              <span className="text-line-200">|</span>
+              <span className="text-xs text-grayscale-400 lg:text-[16px]">{formatLocalDate(post.updatedAt)}</span>
             </div>
-            <div className="flex items-center">
-              <Image src="/icons/like/like-md.svg" alt="좋아요" width={20} height={20} className="size-6 lg:size-9" />
-              <span className="text-xs text-grayscale-400 lg:text-[16px]">{post.likeCount}</span>
+            <div className="ml-3 flex items-center gap-2">
+              <div className="flex items-center">
+                <Image
+                  src="/icons/comment/comment-md.svg"
+                  alt="댓글"
+                  width={20}
+                  height={20}
+                  className="size-6 lg:size-9"
+                />
+                <span className="text-xs text-grayscale-400 lg:text-[16px]">{post.commentCount}</span>
+              </div>
+              <div className="flex items-center">
+                <Image src="/icons/like/like-md.svg" alt="좋아요" width={20} height={20} className="size-6 lg:size-9" />
+                <span className="text-xs text-grayscale-400 lg:text-[16px]">{post.likeCount}</span>
+              </div>
             </div>
           </div>
         </div>
-        <div className="absolute right-3 top-6 size-9 bg-white text-center" onClick={(e) => e.stopPropagation()}>
-          {isAuthor && <KebabDropdown options={dropdownOptions} />}
-        </div>
+      </Link>
+      <div className="absolute right-3 top-6 size-9 bg-white text-center">
+        {isAuthor && <KebabDropdown options={dropdownOptions} />}
       </div>
-    </Link>
+    </div>
   );
 };
+
 export default BoardPostItem;