Skip to content

Commit 4397c8e

Browse files
cccwon2cccwon2
committed
fix: 마이페이지 > 내가 쓴 글, 내가 쓴 댓글 케밥 드롭다운 버그 수정 등
1 parent 9d10d13 commit 4397c8e

File tree

3 files changed

+87
-78
lines changed

3 files changed

+87
-78
lines changed

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

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,12 @@ import CommentsSection from "./components/sections/CommentsSection";
66
import ScrapsSection from "./components/sections/ScrapsSection";
77
import { userRoles } from "@/constants/userRoles";
88
import { useUser } from "@/hooks/queries/user/me/useUser";
9-
import toast from "react-hot-toast";
10-
import { useRouter } from "next/navigation";
9+
import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
1110

1211
export default function MyPage() {
1312
const searchParams = useSearchParams();
1413
const currentTab = searchParams.get("tab") || "posts";
15-
const router = useRouter();
16-
const { user } = useUser();
14+
const { user, isLoading } = useUser();
1715
const isApplicant = user?.role === userRoles.APPLICANT;
1816

1917
const TabContent = {
@@ -22,10 +20,15 @@ export default function MyPage() {
2220
...(isApplicant && { scrap: <ScrapsSection /> }),
2321
}[currentTab];
2422

25-
if (!user) {
26-
toast.error("로그인이 필요한 페이지입니다.");
27-
router.push("/login");
23+
if (isLoading) {
24+
return (
25+
<div className="flex h-[calc(100vh-80px)] items-center justify-center">
26+
<DotLoadingSpinner />
27+
</div>
28+
);
2829
}
2930

31+
if (!user) return null;
32+
3033
return TabContent;
3134
}

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

Lines changed: 29 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -66,37 +66,40 @@ const BoardComment = ({
6666
];
6767

6868
return (
69-
<Link href={`work-talk/${postId}`}>
70-
<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">
71-
{/* Post Section */}
72-
<div className="flex w-full flex-col gap-4 border-b border-line-100 pb-2 lg:pb-4">
73-
<div className="flex items-center gap-[6px] lg:gap-2">
74-
<Image
75-
src="/icons/document/document.svg"
76-
alt="Icon"
77-
className="size-6 rounded-full lg:size-9"
78-
width={24}
79-
height={24}
80-
/>
81-
<span className="text-[12px] text-black-100 lg:text-[16px]">{postTitle}</span>
69+
<div className="relative">
70+
<Link href={`work-talk/${postId}`}>
71+
<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">
72+
{/* Post Section */}
73+
<div className="flex w-full flex-col gap-4 border-b border-line-100 pb-2 lg:pb-4">
74+
<div className="flex items-center gap-[6px] lg:gap-2">
75+
<Image
76+
src="/icons/document/document.svg"
77+
alt="Icon"
78+
className="size-6 rounded-full lg:size-9"
79+
width={24}
80+
height={24}
81+
/>
82+
<span className="text-[12px] text-black-100 lg:text-[16px]">{postTitle}</span>
83+
</div>
84+
<p className="text-[12px] text-grayscale-500 lg:text-[16px]">{postContent}</p>
8285
</div>
83-
<p className="text-[12px] text-grayscale-500 lg:text-[16px]">{postContent}</p>
84-
</div>
8586

86-
{/* Comment Section */}
87-
<div className="flex flex-col gap-3 py-1 lg:py-4">
88-
<div className="line-clamp-2 overflow-hidden text-[14px] font-semibold md:h-[50px] lg:text-[18px]">
89-
{comment}
90-
</div>
91-
<div className="line-clamp-2 text-[12px] font-medium text-grayscale-500 lg:text-[16px]">
92-
{formatLocalDate(updatedAt)}
87+
{/* Comment Section */}
88+
<div className="flex flex-col gap-3 py-1 lg:py-4">
89+
<div className="line-clamp-2 overflow-hidden text-[14px] font-semibold md:h-[50px] lg:text-[18px]">
90+
{comment}
91+
</div>
92+
<div className="line-clamp-2 text-[12px] font-medium text-grayscale-500 lg:text-[16px]">
93+
{formatLocalDate(updatedAt)}
94+
</div>
9395
</div>
9496
</div>
95-
<div className="absolute right-6 flex items-center justify-center">
96-
{isAuthor && <KebabDropdown options={dropdownOptions} />}
97-
</div>
97+
</Link>
98+
{/* 케밥 메뉴를 Link 밖으로 이동 */}
99+
<div className="absolute right-6 top-6 size-9 bg-white text-center">
100+
{isAuthor && <KebabDropdown options={dropdownOptions} />}
98101
</div>
99-
</Link>
102+
</div>
100103
);
101104
};
102105

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

Lines changed: 48 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Link from "next/link";
66
import KebabDropdown from "../../button/dropdown/KebabDropdown";
77
import { useRouter } from "next/navigation";
88
import useModalStore from "@/store/modalStore";
9-
import { useDeleteComment } from "@/hooks/queries/post/comment/useDeleteComment";
9+
import { useDeletePost } from "@/hooks/queries/post/useDeletePost";
1010
import { useQueryClient } from "@tanstack/react-query";
1111

1212
const BoardPostItem = ({
@@ -21,7 +21,7 @@ const BoardPostItem = ({
2121
orderBy: string;
2222
}) => {
2323
const router = useRouter();
24-
const deleteComment = useDeleteComment(String(post.id));
24+
const deletePost = useDeletePost(String(post.id));
2525
const queryClient = useQueryClient();
2626
const { openModal, closeModal } = useModalStore();
2727

@@ -33,7 +33,7 @@ const BoardPostItem = ({
3333
confirmText: "삭제하기",
3434
cancelText: "취소",
3535
onConfirm: () => {
36-
deleteComment.mutate(undefined, {
36+
deletePost.mutate(undefined, {
3737
onSuccess: async () => {
3838
await queryClient.invalidateQueries({ queryKey: ["post"] });
3939
await queryClient.invalidateQueries({ queryKey: ["myPosts", { limit, orderBy }] });
@@ -59,54 +59,57 @@ const BoardPostItem = ({
5959
];
6060

6161
return (
62-
<Link
63-
href={`/work-talk/${post.id}`}
64-
className="block cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
65-
>
66-
<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">
67-
<div className="flex flex-col gap-2">
68-
<h3 className="line-clamp-1 text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
69-
<p className="line-clamp-3 overflow-hidden text-[14px] text-grayscale-500 lg:text-[18px]">{post.content}</p>
70-
</div>
71-
72-
{/* 하단 정보 */}
73-
<div className="flex items-center justify-between">
74-
<div className="flex items-center gap-2">
75-
<div className="flex items-center gap-1">
76-
<Image
77-
src={post.writer.imageUrl || "/icons/user/user-profile-md.svg"}
78-
alt={post.writer.nickname}
79-
width={24}
80-
height={24}
81-
className="size-6 overflow-hidden rounded-full lg:size-[26px]"
82-
/>
83-
<span className="text-xs font-medium text-gray-500 lg:text-[16px]">{post.writer.nickname}</span>
84-
</div>
85-
<span className="text-line-200">|</span>
86-
<span className="text-xs text-grayscale-400 lg:text-[16px]">{formatLocalDate(post.updatedAt)}</span>
62+
<div className="relative">
63+
<Link
64+
href={`/work-talk/${post.id}`}
65+
className="block cursor-pointer transition-transform duration-300 hover:scale-[1.02]"
66+
>
67+
<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">
68+
<div className="flex flex-col gap-2">
69+
<h3 className="line-clamp-1 text-[16px] font-semibold text-black-400 lg:text-[20px]">{post.title}</h3>
70+
<p className="line-clamp-3 overflow-hidden text-[14px] text-grayscale-500 lg:text-[18px]">{post.content}</p>
8771
</div>
88-
<div className="ml-3 flex items-center gap-2">
89-
<div className="flex items-center">
90-
<Image
91-
src="/icons/comment/comment-md.svg"
92-
alt="댓글"
93-
width={20}
94-
height={20}
95-
className="size-6 lg:size-9"
96-
/>
97-
<span className="text-xs text-grayscale-400 lg:text-[16px]">{post.commentCount}</span>
72+
73+
{/* 하단 정보 */}
74+
<div className="flex items-center justify-between">
75+
<div className="flex items-center gap-2">
76+
<div className="flex items-center gap-1">
77+
<Image
78+
src={post.writer.imageUrl || "/icons/user/user-profile-md.svg"}
79+
alt={post.writer.nickname}
80+
width={24}
81+
height={24}
82+
className="size-6 overflow-hidden rounded-full lg:size-[26px]"
83+
/>
84+
<span className="text-xs font-medium text-gray-500 lg:text-[16px]">{post.writer.nickname}</span>
85+
</div>
86+
<span className="text-line-200">|</span>
87+
<span className="text-xs text-grayscale-400 lg:text-[16px]">{formatLocalDate(post.updatedAt)}</span>
9888
</div>
99-
<div className="flex items-center">
100-
<Image src="/icons/like/like-md.svg" alt="좋아요" width={20} height={20} className="size-6 lg:size-9" />
101-
<span className="text-xs text-grayscale-400 lg:text-[16px]">{post.likeCount}</span>
89+
<div className="ml-3 flex items-center gap-2">
90+
<div className="flex items-center">
91+
<Image
92+
src="/icons/comment/comment-md.svg"
93+
alt="댓글"
94+
width={20}
95+
height={20}
96+
className="size-6 lg:size-9"
97+
/>
98+
<span className="text-xs text-grayscale-400 lg:text-[16px]">{post.commentCount}</span>
99+
</div>
100+
<div className="flex items-center">
101+
<Image src="/icons/like/like-md.svg" alt="좋아요" width={20} height={20} className="size-6 lg:size-9" />
102+
<span className="text-xs text-grayscale-400 lg:text-[16px]">{post.likeCount}</span>
103+
</div>
102104
</div>
103105
</div>
104106
</div>
105-
<div className="absolute right-3 top-6 size-9 bg-white text-center" onClick={(e) => e.stopPropagation()}>
106-
{isAuthor && <KebabDropdown options={dropdownOptions} />}
107-
</div>
107+
</Link>
108+
<div className="absolute right-3 top-6 size-9 bg-white text-center">
109+
{isAuthor && <KebabDropdown options={dropdownOptions} />}
108110
</div>
109-
</Link>
111+
</div>
110112
);
111113
};
114+
112115
export default BoardPostItem;

0 commit comments

Comments
 (0)