♻️ props를 통해 댓글 작성자 정보 전달

dnd-side-project · Mar 8, 2024 · c6b9088 · c6b9088
1 parent deca200
commit c6b9088
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/src/app/vote/[slug]/_component/Replies.tsx b/src/app/vote/[slug]/_component/Replies.tsx
@@ -8,6 +8,7 @@ import { Reply } from '@/components/features/vote';
 import { Notice, ReplyInput } from '@/components/shared';
 import { REPLY_SORT_OPTIONS, ReplySortOptions } from '@/constants/options';
 import { Typography } from '@/foundations/typography';
+import { useGetUser } from '@/hooks/auth';
 import {
   useCreateVoteReplyMutation,
   useDeleteVoteReplyMutation,
@@ -21,6 +22,7 @@ type Props = {
 };
 
 const Replies = ({ voteId }: Props) => {
+  const { data: user } = useGetUser();
   const { status, data: replies } = useGetVoteReplies({ voteId });
   const { mutateAsync: createVoteReplyAsync } = useCreateVoteReplyMutation();
   const { mutate: deleteVoteReply } = useDeleteVoteReplyMutation();
@@ -75,6 +77,7 @@ const Replies = ({ voteId }: Props) => {
                   voteId: reply.voteId,
                 })
               }
+              isWrittenByCurrentUser={reply.userId === user?.userId}
             />
           ))}
         </ul>

diff --git a/src/components/features/vote/reply/Reply.stories.tsx b/src/components/features/vote/reply/Reply.stories.tsx
@@ -43,6 +43,7 @@ export const Basic: Story = {
         }}
         onDelete={() => {}}
         onLikeToggle={() => {}}
+        isWrittenByCurrentUser={true}
       />
       <Reply
         reply={{
@@ -59,6 +60,7 @@ export const Basic: Story = {
         }}
         onDelete={() => {}}
         onLikeToggle={() => {}}
+        isWrittenByCurrentUser={false}
       />
       <Reply
         reply={{
@@ -75,6 +77,7 @@ export const Basic: Story = {
         }}
         onDelete={() => {}}
         onLikeToggle={() => {}}
+        isWrittenByCurrentUser={false}
       />
     </>
   ),

diff --git a/src/components/features/vote/reply/Reply.tsx b/src/components/features/vote/reply/Reply.tsx
@@ -3,23 +3,22 @@ import { useState } from 'react';
 import { Button } from '@/components/common/button';
 import { ConfirmBottomSheet, LikeButton, OptionBottomSheet, Profile } from '@/components/shared';
 import { Typography } from '@/foundations/typography';
-import { useGetUser } from '@/hooks/auth';
 import { VoteReplyType } from '@/types/vote';
 import { fromNowOf } from '@/utils/dates';
 
 type Props = {
   reply: VoteReplyType; // NOTE: 다른 피쳐에서 댓글 사용 시 변경 필요
+  isWrittenByCurrentUser: boolean;
   onLikeToggle: () => void;
   onDelete: () => void;
 };
 
 type BottomSheetType = 'askDelete' | 'replyOption';
 
-const Reply = ({ reply, onLikeToggle, onDelete }: Props) => {
-  const { data: user } = useGetUser();
+const Reply = ({ reply, onLikeToggle, onDelete, isWrittenByCurrentUser }: Props) => {
   const [openedSheet, setOpenedSheet] = useState<BottomSheetType | null>(null);
 
-  const { nickname, createdAt, content, likes, status, userId } = reply;
+  const { nickname, createdAt, content, likes, status } = reply;
 
   return (
     <>
@@ -28,7 +27,7 @@ const Reply = ({ reply, onLikeToggle, onDelete }: Props) => {
           nickname={nickname}
           subText={fromNowOf(+createdAt)}
           actionButton={
-            user?.userId === userId && (
+            isWrittenByCurrentUser && (
               <Button
                 variant="empty"
                 iconOnly