refactor: 내 편지함 및 상세 querykey 적용

nirii00 · nirii00 · commit 6d821aea3b59 · 2025-02-28T15:25:21.000+09:00
- useState을 삭제 하고 데이터 관리 및 성능 최적화를 위해 tanstack query 적용
diff --git a/src/apis/mailBox.ts b/src/apis/mailBox.ts
@@ -12,7 +12,9 @@ export const getMailbox = async () => {
 
 export const getMailboxDetail = async (id: number) => {
   try {
+    // const response = await client.get(`/api/mailbox/${id}/page=${pageParam}&size=20`);
     const response = await client.get(`/api/mailbox/${id}`);
+
     if (!response) throw new Error('error while fetching mailbox detail data');
     return response.data;
   } catch (error) {
diff --git a/src/pages/LetterBox/index.tsx b/src/pages/LetterBox/index.tsx
@@ -61,7 +61,7 @@ const LetterBoxPage = () => {
                     boxId={data.letterMatchingId}
                     key={index}
                     zipCode={data.oppositeZipCode}
-                    letterCount={90}
+                    letterCount={data.letterCount}
                     isChecked={data.oppositeRead}
                     isClosed={data.active}
                   />
diff --git a/src/pages/LetterBoxDetail/components/LetterPreview.tsx b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
@@ -1,6 +1,7 @@
 import { useNavigate } from 'react-router';
 
 import LetterWrapper from '@/components/LetterWrapper';
+import formatDate from '@/utils/formatDate';
 
 interface LetterPreviewProps {
   id: number;
@@ -41,7 +42,7 @@ const LetterPreview = ({
     return (
       <LetterWrapper isSender={isSend}>
         <div className="mb-3 flex items-center justify-between">
-          <p className="body-r text-gray-80">{date}</p>
+          <p className="body-r text-gray-80">{formatDate(date)}</p>
           <label htmlFor={`${id}`} className="relative">
             <input
               id={`${id}`}
diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
@@ -1,4 +1,5 @@
-import { ChangeEvent, useEffect, useState } from 'react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { ChangeEvent, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
 import { getMailboxDetail, postMailboxDisconnect } from '@/apis/mailBox';
@@ -10,19 +11,19 @@ import PageTitle from '@/components/PageTitle';
 import InformationTooltip from './components/InformationTooltip';
 import LetterPreview from './components/LetterPreview';
 
-const LetterBoxDetailPage = () => {
-  interface MailBoxDetailProps {
-    letterId: number;
-    title: string;
-    myLetter: boolean;
-    active: boolean;
-    // createdAt: date;
-  }
+// import useAuthStore from '@/stores/authStore';
+interface MailBoxDetailProps {
+  letterId: number;
+  title: string;
+  myLetter: boolean;
+  active: boolean;
+  createdAt: string;
+}
 
+const LetterBoxDetailPage = () => {
   const location = useLocation();
   const userInfo = { ...location.state };
-
-  const [mailLists, setMailLists] = useState<MailBoxDetailProps[] | []>([]);
+  // const {userId} = useAuthStore.getState();
 
   const [isShareMode, setShareMode] = useState(false);
   const [isOpenDisConnectModal, setIsOpenDisConnectModal] = useState(false);
@@ -32,20 +33,71 @@ const LetterBoxDetailPage = () => {
 
   const navigate = useNavigate();
 
-  const fetchData = async () => {
-    try {
-      const response = await getMailboxDetail(userInfo.id || '');
-      if (!response) throw new Error('LetterBoxDetailPage, fetchData error');
-      setMailLists(response.data);
+  // const {
+  //   data: mailLists = [],
+  //   isLoading,
+  //   isError,
+  //   fetchNextPage,
+  //   hasNextPage,
+  //   isFetchingNextPage,
+  // } = useInfiniteQuery({
+  //   queryKey: ['mailBoxDetail', userInfo.id],
+  //   queryFn: async ({ pageParam }) => {
+  //     const response = await getMailboxDetail(userInfo.id, pageParam);
+  //     console.log(response.data);
+  //     return response.data as MailBoxDetailProps[];
+  //   },
+  //   enabled: !!userInfo.id,
+  //   initialPageParam: 0,
+  //   getNextPageParam: (lastPage, allPages) => {
+  //     return lastPage?.length == 0 || !lastPage || lastPage?.length < 20
+  //       ? undefined
+  //       : allPages.length + 1;
+  //   },
+  //   staleTime: 1000 * 60 * 5,
+  //   gcTime: 1000 * 60 * 10,
+  // });
+
+  const {
+    data: mailLists = [],
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['mailBoxDetail', userInfo.id],
+    queryFn: async () => {
+      const response = await getMailboxDetail(userInfo.id);
       console.log(response.data);
-    } catch (error) {
+      return response.data as MailBoxDetailProps[];
+    },
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+
+  const disconnectMutation = useMutation({
+    mutationFn: async () => await postMailboxDisconnect(userInfo.id),
+    onSuccess: () => {
+      navigate(-1);
+    },
+    onError: (error) => {
+      // TODO: 차단 실패 toastUI 띄워주기
+      // 요청이 실패했어요 잠시 후에 다시 시도해주세요.
       console.error(error);
-    }
-  };
-
-  useEffect(() => {
-    fetchData();
-  }, []);
+    },
+  });
+
+  const shareMutation = useMutation({
+    // Todo : useAuthStore -> myId 대체
+    mutationFn: () => postShareProposals(selected, 1, userInfo.id, shareComment),
+    onSuccess: () => {
+      toggleShareMode();
+      setShareComment('');
+    },
+    onError: (error) => {
+      // TODO: 차단 실패 toastUI 띄워주기
+      // 요청이 실패했어요 잠시 후에 다시 시도해주세요.
+      console.error(error);
+    },
+  });
 
   const toggleShareMode = () => {
     if (isShareMode) {
@@ -66,27 +118,9 @@ const LetterBoxDetailPage = () => {
     setShareComment(e.target.value);
   };
 
-  const handleDisconnect = async () => {
-    try {
-      const response = await postMailboxDisconnect(userInfo.id);
-      if (!response) throw new Error('letterBoxDetail, disconnecting failed');
-      console.log(response);
-      navigate(-1);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const handleShare = async () => {
-    try {
-      // TODO: myId -> 전역객체에서 가져오기
-      const response = await postShareProposals(selected, 1, userInfo.id, shareComment);
-      if (!response) throw new Error(response);
-      console.log(response);
-    } catch (error) {
-      console.error(error);
-    }
-  };
+  if (isError) {
+    navigate('/NotFound');
+  }
 
   return (
     <>
@@ -99,7 +133,7 @@ const LetterBoxDetailPage = () => {
           onCancel={() => setIsOpenDisConnectModal(false)}
           onConfirm={() => {
             setIsOpenDisConnectModal(false);
-            handleDisconnect();
+            disconnectMutation.mutate();
           }}
         />
       )}
@@ -117,9 +151,7 @@ const LetterBoxDetailPage = () => {
           }}
           onComplete={() => {
             setIsOpenShareModal(false);
-            handleShare();
-            toggleShareMode();
-            setShareComment('');
+            shareMutation.mutate();
           }}
         >
           <p className="text-gray-70 body-m mt-1">상대방 동의 후에 게시글이 업로드 됩니다.</p>
@@ -136,30 +168,34 @@ const LetterBoxDetailPage = () => {
           <div className="flex items-center gap-0.5 underline">
             {!userInfo.isClosed && (
               <button type="button" onClick={toggleShareMode}>
-                {isShareMode ? '취소하기' : '편지 공유하기'}
+                {isLoading ? '' : isShareMode ? '취소하기' : '편지 공유하기'}
               </button>
             )}
-            {!isShareMode && !userInfo.isClosed && <InformationTooltip />}
+            {!isShareMode && !userInfo.isClosed && !isLoading && <InformationTooltip />}
           </div>
         </section>
         <section className="mb-5 flex flex-col gap-4">
-          {mailLists.map((letter) => (
-            <LetterPreview
-              key={letter.letterId}
-              id={letter.letterId}
-              // TODO: createdAt 추가해주시면 수정
-              date={'2025.01.01'}
-              title={letter.title}
-              isSend={letter.myLetter}
-              checked={selected.includes(letter.letterId)}
-              isShareMode={isShareMode}
-              isClosed={userInfo.isClosed}
-              onToggle={() => toggleSelected(letter.letterId)}
-              zipCode={userInfo.zipCode}
-            />
-          ))}
+          {isLoading ? (
+            //TODO: skeleton
+            <div>Loading</div>
+          ) : (
+            mailLists.map((letter) => (
+              <LetterPreview
+                key={letter.letterId}
+                id={letter.letterId}
+                date={letter.createdAt}
+                title={letter.title}
+                isSend={letter.myLetter}
+                checked={selected.includes(letter.letterId)}
+                isShareMode={isShareMode}
+                isClosed={userInfo.isClosed}
+                onToggle={() => toggleSelected(letter.letterId)}
+                zipCode={userInfo.zipCode}
+              />
+            ))
+          )}
         </section>
-        {!isShareMode && !userInfo.isClosed && (
+        {!isShareMode && !userInfo.isClosed && !isLoading && (
           <button
             type="button"
             className="body-sb text-gray-60 mt-auto text-left underline"
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
@@ -0,0 +1,11 @@
+const formatDate = (isoString: string) => {
+  const date = new Date(isoString);
+  return date
+    .toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    })
+    .replace(/-/g, '.');
+};
+export default formatDate;
