Merge pull request #218 from epigram5-9/merge/FE-29

FE-29 🔀 브랜치 최신화
epigram5-9 · Aug 6, 2024 · c13d755 · c13d755
2 parents 836580d + 447e450
commit c13d755
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 118 deletions.
diff --git a/src/apis/user.ts b/src/apis/user.ts
@@ -27,13 +27,15 @@ export const createPresignedUrl = async (request: PostPresignedUrlRequestType):
 export const getMyContentCount = async (request: GetUserRequestType): Promise<GetMyContentCountType> => {
   const { id } = request;
 
-  // 에피그램 카운트
-  const epigram = await httpClient.get(`/epigrams`, { params: { limit: 1, cursor: 0, writerId: id } });
+  // Promise.all을 사용하여 병렬 요청 실행
+  const [epigramResponse, commentResponse] = await Promise.all([
+    httpClient.get(`/epigrams`, { params: { limit: 1, cursor: 0, writerId: id } }),
+    httpClient.get(`/users/${id}/comments`, { params: { limit: 1, cursor: 0 } }),
+  ]);
 
-  // 댓글 카운트
-  const comment = await httpClient.get(`/users/${id}/comments`, { params: { limit: 1, cursor: 0 } });
+  // 결과
+  const epigramCount = epigramResponse.data.totalCount;
+  const commentCount = commentResponse.data.totalCount;
 
-  const response = { epigramCount: epigram.data.totalCount, commentCount: comment.data.totalCount };
-
-  return response;
+  return { epigramCount, commentCount };
 };
diff --git a/src/components/Header/NewHeader.tsx b/src/components/Header/NewHeader.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import Image from 'next/image';
 import { useQuery } from '@tanstack/react-query';
 import queries from '@/apis/queries';
+import { logout } from '@/apis';
 import LOGO_ICON from '../../../public/epigram-icon.png';
 import PROFILE_ICON from '../../../public/icon/user-icon.svg';
 import MENU_ICON from '../../../public/icon/menu-icon.svg';
@@ -50,12 +51,17 @@ export default function NewHeader() {
             </button>
           </div>
         </div>
-        <button type='button' onClick={() => handleNavigateTo('/mypage')} className='flex items-center gap-1.5'>
-          <div className='w-4 h-4 lg:w-6 lg:h-6 relative'>
-            <Image src={PROFILE_ICON} alt='프로필 이미지' />
-          </div>
-          <div className='text-gray-300 text-[13px] lg:text-sm font-medium font-pretendard leading-snug'>{getNickName()}</div>
-        </button>
+        <div className='flex gap-3 items-center justify-center'>
+          <button type='button' onClick={() => handleNavigateTo('/mypage')} className='flex items-center gap-1.5'>
+            <div className='w-4 h-4 lg:w-6 lg:h-6 relative'>
+              <Image src={PROFILE_ICON} alt='프로필 이미지' />
+            </div>
+            <div className='text-gray-300 text-[13px] lg:text-sm font-medium font-pretendard leading-snug'>{getNickName()}</div>
+          </button>
+          <button type='button' onClick={logout} className='text-gray-200 text-[13px] lg:text-sm font-medium font-pretendard leading-snug border bg-background-100 rounded-lg py-1.5 px-3'>
+            로그아웃
+          </button>
+        </div>
       </div>
       <Sidebar isOpen={isSidebarOpen} toggleSidebar={() => setIsSidebarOpen(false)} />
     </div>

diff --git a/src/components/epigram/Comment/CommentItem.tsx b/src/components/epigram/Comment/CommentItem.tsx
@@ -52,12 +52,12 @@ function CommentItem({ comment, status, onEditComment, isEditing, epigramId }: C
         </UserProfileModal>
         <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
           <div className='justify-between items-center w-full inline-flex'>
-            <div className='justify-start items-start gap-2 flex'>
+            <div className='justify-start items-center gap-2 flex'>
               <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>{comment.writer.nickname}</div>
               <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
                 {getCustomRelativeTime(comment.createdAt)}
               </div>
-              <Image src={comment.isPrivate ? '/icon/privateIcon.png' : '/Icon/publicIcon.png'} width={16} height={16} alt={comment.isPrivate ? '비공개' : '공개'} />
+              {comment.isPrivate && <Image src='/icon/privateIcon.png' width={16} height={16} alt='비공개' />}
             </div>
             {status === 'edit' && (
               <div className='justify-start items-start gap-4 flex'>

diff --git a/src/components/mypage/MyComment.tsx b/src/components/mypage/MyComment.tsx
@@ -6,6 +6,7 @@ import { CommentType } from '@/schema/comment';
 import { Button } from '@/components/ui/button';
 import DeleteAlertModal from '@/components/epigram/DeleteAlertModal';
 import CommentTextarea from '@/components/epigram/Comment/CommentTextarea';
+import getCustomRelativeTime from '@/lib/dateUtils';
 import NONE_EPI from '../../../public/none-epi.svg';
 
 const sizeStyles = {
@@ -63,69 +64,68 @@ function MyComment({ comments, totalCount, onMoreEpigramLoad, onDeleteComment, o
 
   return totalCount > 0 ? (
     <div className='flex flex-col'>
-      {comments.map((comment) => {
-        const formattedDate = new Date(comment.createdAt).toLocaleString();
-
-        return (
-          <div
-            key={comment.id}
-            className={`bg-background-100 border-t border-slate-300 flex-col justify-start items-start gap-2.5 inline-flex ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}
-          >
-            <div className='justify-start items-start gap-4 inline-flex w-full'>
-              <div className='w-12 h-12 relative'>
-                <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center relative'>
-                  <Image src={comment.writer.image || '/ProfileTestImage.jpg'} alt='프로필 이미지' width={50} height={50} className='rounded-full' />
-                </div>
+      {comments.map((comment) => (
+        <div
+          key={comment.id}
+          className={`bg-background-100 border-t border-slate-300 flex-col justify-start items-start gap-2.5 inline-flex ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}
+        >
+          <div className='justify-start items-start gap-4 inline-flex w-full'>
+            <div className='w-12 h-12 relative'>
+              <div className='w-12 h-12 bg-zinc-300 rounded-full overflow-hidden flex items-center justify-center relative'>
+                <Image src={comment.writer.image || '/ProfileTestImage.jpg'} alt='프로필 이미지' width={50} height={50} className='rounded-full' />
               </div>
-              {editingCommentId === comment.id ? (
-                <div className='w-full mb-4'>
-                  <CommentTextarea epigramId={comment.epigramId} editingComment={comment} onEditComplete={handleEditComplete} />
-                </div>
-              ) : (
-                <div
-                  className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
-                >
-                  <div className='justify-between items-center w-full inline-flex'>
-                    <div className='justify-start items-start gap-2 flex'>
-                      <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
-                        {comment.writer.nickname}
-                      </div>
-                      <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>{formattedDate}</div>
+            </div>
+            {editingCommentId === comment.id ? (
+              <div className='w-full mb-4'>
+                <CommentTextarea epigramId={comment.epigramId} editingComment={comment} onEditComplete={handleEditComplete} />
+              </div>
+            ) : (
+              <div
+                className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
+              >
+                <div className='justify-between items-center w-full inline-flex'>
+                  <div className='justify-start items-center gap-2 flex'>
+                    <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
+                      {comment.writer.nickname}
                     </div>
-                    <div className='justify-start items-start gap-4 flex'>
-                      <Button
-                        onClick={() => handleEditComment(comment)}
-                        className={`text-neutral-700 underline leading-[18px] cursor-pointer p-0 ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}
-                      >
-                        수정
-                      </Button>
-                      <Button
-                        onClick={() => {
-                          setSelectedCommentId(comment.id);
-                          setIsDeleteModalOpen(true);
-                        }}
-                        type='button'
-                        className={`text-red-400 underline leading-[18px] cursor-pointer p-0 ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}
-                      >
-                        삭제
-                      </Button>
+                    <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
+                      {getCustomRelativeTime(comment.createdAt)}
                     </div>
+                    {comment.isPrivate && <Image src='/icon/privateIcon.png' width={16} height={16} alt='비공개' />}
                   </div>
-                  <div
-                    onClick={() => handleCommentClick(comment.epigramId)}
-                    onKeyDown={(event) => handleKeyDown(event, comment.epigramId)}
-                    role='button'
-                    tabIndex={0}
-                    className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
-                  >
-                    {comment.content}
+                  <div className='justify-start items-start gap-4 flex'>
+                    <Button
+                      onClick={() => handleEditComment(comment)}
+                      className={`text-neutral-700 underline leading-[18px] cursor-pointer p-0 ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}
+                    >
+                      수정
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        setSelectedCommentId(comment.id);
+                        setIsDeleteModalOpen(true);
+                      }}
+                      type='button'
+                      className={`text-red-400 underline leading-[18px] cursor-pointer p-0 ${textSizeStyles.sm.action} ${textSizeStyles.md.action} ${textSizeStyles.lg.action}`}
+                    >
+                      삭제
+                    </Button>
                   </div>
                 </div>
-              )}
-            </div>
+                <div
+                  onClick={() => handleCommentClick(comment.epigramId)}
+                  onKeyDown={(event) => handleKeyDown(event, comment.epigramId)}
+                  role='button'
+                  tabIndex={0}
+                  className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
+                >
+                  {comment.content}
+                </div>
+              </div>
+            )}
           </div>
-        );
-      })}
+        </div>
+      ))}
       {totalCount > comments.length && (
         <div className='w-full flex items-center justify-center'>
           <Button className='text-slate-400 border border-slate-300 rounded-[100px] py-[12px] px-[20px]' onClick={onMoreEpigramLoad}>

diff --git a/src/hooks/useCommentsHook.ts b/src/hooks/useCommentsHook.ts
@@ -2,6 +2,11 @@ import quries from '@/apis/queries';
 import { CommentRequestType } from '@/schema/comment';
 import { useQuery } from '@tanstack/react-query';
 
-const useCommentsHook = (requset: CommentRequestType) => useQuery(quries.epigramComment.getMyComments(requset));
+const useCommentsHook = (request: CommentRequestType) =>
+  useQuery({
+    ...quries.epigramComment.getMyComments(request),
+    refetchOnWindowFocus: false,
+    enabled: !!request,
+  });
 
 export default useCommentsHook;
diff --git a/src/hooks/useDeleteCommentHook.ts b/src/hooks/useDeleteCommentHook.ts
@@ -6,6 +6,7 @@ import queries from '@/apis/queries';
 interface DeleteCommentVariables {
   commentId: number;
   epigramId?: number;
+  userId?: number;
 }
 
 const useDeleteCommentMutation = (options?: { onSuccess?: (variables: DeleteCommentVariables) => void }) => {
@@ -19,6 +20,17 @@ const useDeleteCommentMutation = (options?: { onSuccess?: (variables: DeleteComm
           queryKey: queries.epigramComment.getComments(variables.epigramId).queryKey,
         });
       }
+
+      if (variables.userId) {
+        queryClient.invalidateQueries({
+          queryKey: queries.epigramComment.getMyComments({
+            id: variables.userId,
+            limit: 3,
+            cursor: 0,
+          }).queryKey,
+        });
+      }
+
       toast({
         title: '댓글이 삭제되었습니다.',
         variant: 'destructive',