Merge branch 'dev' of https://github.com/FE9-2/workroot into design/landing-fix

Author: yyezzzy

src/app/(pages)/mypage/components/sections/CommentsSection.tsx

@@ -9,6 +9,7 @@ import ContentSection from "@/app/components/layout/ContentSection";
 import useWidth from "@/hooks/useWidth";
 import ScrollTopButton from "@/app/components/button/default/ScrollTopButton";
 import SamllLoadingSpinner from "@/app/components/loading-spinner/SmallLoadingSpinner";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
 
 export default function CommentsSection() {
   const [currentPage, setCurrentPage] = useState(1);
@@ -43,6 +44,10 @@ export default function CommentsSection() {
     window.scrollTo(0, 0);
   };
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-300px)] items-center justify-center">

src/app/(pages)/mypage/components/sections/PostsSection.tsx

@@ -11,6 +11,8 @@ import ScrollTopButton from "@/app/components/button/default/ScrollTopButton";
 import BoardPostItem from "@/app/components/card/board/BoardPostItem";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
 import SamllLoadingSpinner from "@/app/components/loading-spinner/SmallLoadingSpinner";
+import LoadingSpinner from "@/app/components/loading-spinner/LoadingSpinner";
+import { useUser } from "@/hooks/queries/user/me/useUser";
 
 export default function PostsSection() {
   const { orderBy } = useMySortStore();
@@ -36,7 +38,7 @@ export default function PostsSection() {
     limit: postsPerPage,
     orderBy: orderBy.posts,
   });
-
+  const { user } = useUser();
   useEffect(() => {
     if (inView && hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
@@ -51,6 +53,10 @@ export default function PostsSection() {
     );
   }
 
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
+
   return (
     <div className="flex flex-col items-center">
       {/* 메인 콘텐츠 영역 */}
@@ -70,7 +76,13 @@ export default function PostsSection() {
                 {data.pages.map((page) => (
                   <React.Fragment key={page.nextCursor}>
                     {page.data.map((post) => (
-                      <BoardPostItem post={post} key={post.id} />
+                      <BoardPostItem
+                        post={post}
+                        key={post.id}
+                        isAuthor={!!(post.writer.id === user?.id)}
+                        limit={postsPerPage}
+                        orderBy={orderBy.posts}
+                      />
                     ))}
                   </React.Fragment>
                 ))}

src/app/(pages)/mypage/page.tsx

@@ -6,10 +6,13 @@ 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";
 
 export default function MyPage() {
   const searchParams = useSearchParams();
   const currentTab = searchParams.get("tab") || "posts";
+  const router = useRouter();
   const { user } = useUser();
   const isApplicant = user?.role === userRoles.APPLICANT;
 
@@ -19,5 +22,10 @@ export default function MyPage() {
     ...(isApplicant && { scrap: <ScrapsSection /> }),
   }[currentTab];
 
+  if (!user) {
+    toast.error("로그인이 필요한 페이지입니다.");
+    router.push("/login");
+  }
+
   return TabContent;
 }

src/app/components/button/dropdown/KebabDropdown.tsx

@@ -29,11 +29,14 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
     <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
       <button
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        className="rounded-full hover:bg-grayscale-50"
+        onClick={(e) => {
+          setIsOpen(!isOpen);
+          e.stopPropagation();
+        }}
+        className="rounded-full transition-transform hover:scale-125 hover:bg-grayscale-50"
         aria-label="메뉴 더보기"
       >
-        <BsThreeDotsVertical className="text-sm text-grayscale-200 lg:text-xl" />
+        <BsThreeDotsVertical className="text-md text-grayscale-200 lg:text-xl" />
       </button>
 
       {isOpen && (
@@ -42,7 +45,8 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
             <button
               type="button"
               key={`${index}-${option.label}`}
-              onClick={() => {
+              onClick={(e) => {
+                e.stopPropagation();
                 option.onClick();
                 setIsOpen(false);
               }}

src/app/components/card/board/BoardComment.tsx

@@ -67,7 +67,7 @@ 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 md:w-[600px] lg:h-[264px] lg:w-full">
+      <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">

src/app/components/card/board/BoardPostItem.tsx

@@ -1,17 +1,71 @@
+"use client";
 import { PostListType } from "@/types/response/post";
 import { formatLocalDate } from "@/utils/workDayFormatter";
 import Image from "next/image";
 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 { useQueryClient } from "@tanstack/react-query";
+
+const BoardPostItem = ({
+  post,
+  isAuthor,
+  limit,
+  orderBy,
+}: {
+  post: PostListType;
+  isAuthor: boolean;
+  limit: number;
+  orderBy: string;
+}) => {
+  const router = useRouter();
+  const deleteComment = useDeleteComment(String(post.id));
+  const queryClient = useQueryClient();
+  const { openModal, closeModal } = useModalStore();
+
+  const handleDelete = () => {
+    openModal("customForm", {
+      isOpen: true,
+      title: "게시글을 삭제할까요?",
+      content: "삭제된 게시글은 복구할 수 없습니다.",
+      confirmText: "삭제하기",
+      cancelText: "취소",
+      onConfirm: () => {
+        deleteComment.mutate(undefined, {
+          onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["post"] });
+            await queryClient.invalidateQueries({ queryKey: ["myPosts", { limit, orderBy }] });
+            closeModal();
+          },
+        });
+      },
+      onCancel: () => {
+        closeModal();
+      },
+    });
+  };
+
+  const dropdownOptions = [
+    {
+      label: "수정하기",
+      onClick: () => router.push(`/work-talk/${post.id}/edit`),
+    },
+    {
+      label: "삭제하기",
+      onClick: handleDelete,
+    },
+  ];
 
-const BoardPostItem = ({ post }: { post: PostListType }) => {
   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="text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
+          <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>
 
@@ -48,6 +102,9 @@ const BoardPostItem = ({ post }: { post: PostListType }) => {
             </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>
       </div>
     </Link>
   );

src/app/components/card/cardList/AlbaListItem.tsx

@@ -195,7 +195,7 @@ const AlbaListItem = ({
                   <BsThreeDotsVertical className="h-6 w-6" />
                 </button>
                 {showDropdown && (
-                  <div className="absolute right-0 top-8 z-10 w-32 rounded-lg border border-grayscale-200 bg-white py-2 shadow-lg">
+                  <div className="absolute right-0 top-8 z-10 w-32 overflow-hidden rounded-lg border border-grayscale-200 bg-white shadow-lg">
                     {isApplicant ? (
                       <>
                         <button

src/app/components/card/cardList/apply/MyApplicationListItem.tsx

@@ -53,7 +53,7 @@ const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }
           </div>
 
           {/* 공고 제목 */}
-          <div className="text-grayscale-900 text-lg font-bold md:text-xl">{form.title}</div>
+          <div className="text-grayscale-900 line-clamp-1 text-lg font-bold md:text-xl">{form.title}</div>
 
           {/* 공고 설명 (2줄 제한) */}
           <p className="text-grayscale-600 line-clamp-2 h-[48px] text-sm md:line-clamp-2 md:text-base">

src/app/stories/design-system/components/card/cardList/BoardPostItem.stories.tsx

@@ -29,5 +29,5 @@ const post = {
   createdAt: new Date(),
 };
 export const Default: Story = {
-  args: { post },
+  args: { post, isAuthor: true, limit: 10, orderBy: "최신순" },
 };