[FEAT] 댓글 등록 중 유저 닉네임 노출 (#214)

src/api/vote/types.ts

@@ -1,4 +1,5 @@
 import { Pages } from '@/types/response';
+import { UserInfo } from '@/types/user';
 import { SelectionType, VoteReplyType, VoteType } from '@/types/vote';
 
 export type GetVoteByIdRequest = {
@@ -21,7 +22,11 @@ export interface VoteFormData extends FormData {
   append(name: 'voteRequestDto' | 'images', value: string | Blob): void;
 }
 
-export type PostVoteReplyRequest = { voteId: VoteType['id']; content: VoteReplyType['content'] };
+export type PostVoteReplyRequest = {
+  voteId: VoteType['id'];
+  content: VoteReplyType['content'];
+  user: UserInfo;
+};
 
 export type DeleteVoteRequest = {
   voteId: VoteType['id'];

src/app/vote/[slug]/_component/Replies.tsx

@@ -24,7 +24,7 @@ type Props = {
 const Replies = ({ voteId }: Props) => {
   const { data: user } = useGetUser();
   const { data: replies } = useGetVoteReplies({ voteId });
-  const { mutateAsync: createVoteReplyAsync } = useCreateVoteReplyMutation();
+  const { mutate: createVoteReply } = useCreateVoteReplyMutation();
   const { mutate: deleteVoteReply } = useDeleteVoteReplyMutation();
   const { mutate: toggleLikeVoteReply } = useLikeVoteReplyMutation();
 
@@ -81,8 +81,8 @@ const Replies = ({ voteId }: Props) => {
       </Suspense>
 
       <ReplyInput
-        onSubmit={async (content) => {
-          await createVoteReplyAsync({ voteId, content });
+        onSubmit={(content) => {
+          createVoteReply({ voteId, content, user: user! });
           scrollToBottom();
         }}
       />

src/components/shared/replyInput/ReplyInput.tsx

@@ -10,7 +10,7 @@ import { replyReducer } from './helper/replyReducer';
 
 type Props = {
   initialInput?: string;
-  onSubmit: (content: string) => Promise<unknown>;
+  onSubmit: (content: string) => void;
 };
 
 const ReplyInput = ({ initialInput, onSubmit }: Props) => {

src/hooks/auth/useUpdateNicknameMutation.ts

@@ -12,6 +12,7 @@ const useUpdateNicknameMutation = () => {
     mutationFn: donworryApi.auth.patchNickname,
     onSuccess: async () => {
       await queryClient.invalidateQueries({ queryKey: queryKey.auth.user, refetchType: 'all' });
+      queryClient.invalidateQueries({ queryKey: queryKey.vote.all, refetchType: 'all' });
       toast({ message: 'CHANGE_NICKNAME_SUCCESS' });
     },
     onError: () => {

src/hooks/vote/useCreateVoteReplyMutation.ts

@@ -13,13 +13,13 @@ const useCreateVoteReplyMutation = () => {
 
   return useMutation({
     mutationFn: donworryApi.vote.postVoteReply,
-    onMutate: async ({ voteId, content }) => {
+    onMutate: async ({ voteId, content, user }) => {
       await queryClient.cancelQueries({ queryKey: queryKey.vote.reply(voteId) });
       const previousVoteReplies = queryClient.getQueryData<VoteReplyType[]>(
         queryKey.vote.reply(voteId),
       );
       queryClient.setQueryData(queryKey.vote.reply(voteId), (oldVoteReplies: VoteReplyType[]) =>
-        getOptimisticUpdatedVoteRepliesData(oldVoteReplies, { voteId, content }),
+        getOptimisticUpdatedVoteRepliesData(oldVoteReplies, { voteId, content, user }),
       );
       return { previousVoteReplies, voteId };
     },
@@ -29,24 +29,26 @@ const useCreateVoteReplyMutation = () => {
     },
     onSettled: (data, error, { voteId }) => {
       queryClient.invalidateQueries({ queryKey: queryKey.vote.reply(voteId) });
+    },
+    onSuccess: () => {
       toast({ message: 'REPLY_REGISTER_SUCCESS', above: 'input' });
     },
   });
 };
 
 const getOptimisticUpdatedVoteRepliesData = (
   oldData: VoteReplyType[],
-  { voteId, content }: PostVoteReplyRequest,
+  { voteId, content, user }: PostVoteReplyRequest,
 ) => {
   return produce(oldData, (draft) => {
     draft.push({
       voteId,
       content,
       commentId: -1,
-      userId: 0,
-      nickname: '등록중...', // TODO 사용자 닉네임
+      userId: user.userId,
+      nickname: user.nickname,
       status: false,
-      avatar: '',
+      avatar: user.avatar,
       likes: 0,
       createdAt: Date.now().toString(),
       modifiedAt: Date.now().toString(),