Skip to content

fix: 마이페이지 > 내가 쓴 글, 내가 쓴 댓글 케밥 드롭다운 버그 수정 등 #261

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cccwon2 merged 1 commit into from
Dec 26, 2024
Merged

fix: 마이페이지 > 내가 쓴 글, 내가 쓴 댓글 케밥 드롭다운 버그 수정 등 #261

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions src/app/(pages)/mypage/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -22,10 +20,15 @@ export default function MyPage() {
...(isApplicant && { scrap: <ScrapsSection /> }),
}[currentTab];

if (!user) {
toast.error("로그인이 필요한 페이지입니다.");
router.push("/login");
if (isLoading) {
Copy link
Collaborator

@hongggyelim hongggyelim Dec 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

로딩을 해줘야하는거였군요!!

return (
<div className="flex h-[calc(100vh-80px)] items-center justify-center">
<DotLoadingSpinner />
</div>
);
}

if (!user) return null;

return TabContent;
}
55 changes: 29 additions & 26 deletions src/app/components/card/board/BoardComment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 밖으로 이동 */}
Copy link
Collaborator

@hongggyelim hongggyelim Dec 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

<div className="absolute right-6 top-6 size-9 bg-white text-center">
{isAuthor && <KebabDropdown options={dropdownOptions} />}
</div>
</Link>
</div>
);
};

Expand Down
93 changes: 48 additions & 45 deletions src/app/components/card/board/BoardPostItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ({
Expand All @@ -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();

Expand All @@ -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 }] });
Expand All @@ -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;
Loading