Perf: 내 편지함 탄스택 쿼리 적용 (#50)

* fix: 모바일에서 gradient 보이지 않는 문제 해결

* refactor: 내 편지함 및 상세 querykey 적용
- useState을 삭제 하고 데이터 관리 및 성능 최적화를 위해 tanstack query 적용

* fix: 편지 상세 무한 스크롤 오류 수정
- 마지막 편지 보일 시 새로 페이징 하는 로직을 response data에 맞게 수정
- react-intersection-observer 라이브러리를 이용하여 마지막 요소가 view에 들어오는지 확인

* fix: 내 편지함 디자인 보이지 않는 문제 해결
- gradietn class에 !important를 적용

---------

Co-authored-by: nirii00 <[email protected]>

Author: nirii00

package.json

@@ -22,6 +22,7 @@
     "immer": "^10.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.15.1",
     "react-router": "^7.1.5",
     "swiper": "^11.2.4",
     "tailwind-merge": "^3.0.1",

pnpm-lock.yaml

@@ -10,9 +10,11 @@ export const getMailbox = async () => {
   }
 };
 
-export const getMailboxDetail = async (id: number) => {
+export const getMailboxDetail = async (id: number, pageParam: number) => {
   try {
-    const response = await client.get(`/api/mailbox/${id}`);
+    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) {

src/apis/mailBox.ts

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface LetterWrapperProps {
@@ -7,20 +8,23 @@ interface LetterWrapperProps {
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
-const LetterWrapper = ({ isSender = false, className, children, onClick }: LetterWrapperProps) => {
-  return (
-    <article
-      className={twMerge(
-        'relative flex overflow-hidden rounded-sm p-4',
-        isSender ? 'letter-sender-bg' : 'letter-receiver-bg',
-        className,
-      )}
-      onClick={onClick}
-    >
-      <div className="z-10 w-full">{children}</div>
-      <div className="absolute inset-0 z-0 bg-white/50 blur-xl" />
-    </article>
-  );
-};
+const LetterWrapper = forwardRef<HTMLDivElement, LetterWrapperProps>(
+  ({ isSender = false, className, children, onClick }, ref) => {
+    return (
+      <article
+        className={twMerge(
+          'relative flex overflow-hidden rounded-sm p-4',
+          isSender ? 'letter-sender-bg' : 'letter-receiver-bg',
+          className,
+        )}
+        onClick={onClick}
+        ref={ref}
+      >
+        <div className="z-10 w-full">{children}</div>
+        <div className="absolute inset-0 z-0 bg-white/50 blur-xl" />
+      </article>
+    );
+  },
+);
 
 export default LetterWrapper;

src/components/LetterWrapper.tsx

@@ -30,14 +30,15 @@ const LetterBoxItem = ({
       className="flex h-fit w-fit flex-col items-center"
       onClick={() => handleClickItem(boxId)}
     >
-      <div className="text-gray-70 flex h-25 w-20 flex-col gap-1.5 bg-linear-to-b from-[#D5B695] to-[#B3895D] p-1.5">
+      <div className="text-gray-70 window-bg flex h-25 w-20 flex-col gap-1.5 bg-linear-to-b p-1.5">
         <p
           className={twMerge(
             'body-m from-white px-1',
             isClosed
               ? 'bg-[repeating-linear-gradient(#D9D9D9,#D9D9D9_17px,#C2C2C2_17px,#C2C2C2_23px)]'
-              : 'bg-linear-to-b',
-            isChecked ? 'to-[#FFF5ED]' : 'to-[#FFF4F2]',
+              : isChecked
+                ? 'window-top-checked'
+                : 'window-top-unChecked',
           )}
         >
           {zipCode}
@@ -48,7 +49,7 @@ const LetterBoxItem = ({
           <div
             className={twMerge(
               'flex grow flex-col bg-linear-to-b',
-              isChecked ? 'from-[#FFF7E3] to-[#FFE197]' : 'from-[#FFF4F2] to-[#FFE6E3]',
+              isChecked ? 'window-bottom-checked' : 'window-bottom-unChecked',
             )}
           >
             <p className="body-r mt-auto mr-[1px] text-right">{letterCount}통</p>

src/pages/LetterBox/components/LetterBoxItem.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
 
 import { getMailbox } from '@/apis/mailBox';
 import DoorImg from '@/assets/images/door.png';
@@ -13,25 +14,34 @@ interface LetterBoxData {
   oppositeZipCode: string;
   active: boolean;
   oppositeRead: boolean;
-  // totalLetters: number;
+  letterCount: number;
 }
+
+const fetchMailLists = async () => {
+  const response = await getMailbox();
+  if (!response) throw new Error();
+  const data: LetterBoxData[] = response.data;
+  // 정렬?
+  return data;
+};
+
 const LetterBoxPage = () => {
-  const [letterBox, setLetterBox] = useState<LetterBoxData[]>([]);
+  const {
+    data: letterBox = [],
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['mailbox'],
+    queryFn: fetchMailLists,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+
+  const navigate = useNavigate();
 
-  const fetchMailLists = async () => {
-    try {
-      const response = await getMailbox();
-      if (!response) throw new Error();
-      const data: LetterBoxData[] = response.data;
-      // 정렬?
-      setLetterBox(data);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  useEffect(() => {
-    fetchMailLists();
-  }, []);
+  if (isError) {
+    navigate('/NotFound');
+  }
 
   return (
     <main className="flex grow flex-col items-center px-5 pt-20">
@@ -42,14 +52,16 @@ const LetterBoxPage = () => {
         </p>
         <section className="letter-box-bg flex grow flex-col items-center px-4 pt-5">
           <div className="flex w-full flex-col gap-5">
-            {letterBox.length > 0 ? (
+            {isLoading ? (
+              <p className="body-m text-gray-60 text-center">로딩중..</p>
+            ) : letterBox.length > 0 ? (
               chunkBox(
                 letterBox.map((data: LetterBoxData, index) => (
                   <LetterBoxItem
                     boxId={data.letterMatchingId}
                     key={index}
                     zipCode={data.oppositeZipCode}
-                    letterCount={90}
+                    letterCount={data.letterCount}
                     isChecked={data.oppositeRead}
                     isClosed={data.active}
                   />

src/pages/LetterBox/index.tsx

@@ -1,6 +1,8 @@
+import { forwardRef } from 'react';
 import { useNavigate } from 'react-router';
 
 import LetterWrapper from '@/components/LetterWrapper';
+import formatDate from '@/utils/formatDate';
 
 interface LetterPreviewProps {
   id: number;
@@ -13,18 +15,18 @@ interface LetterPreviewProps {
   isClosed: boolean;
   zipCode: string;
 }
-const LetterPreview = ({
-  id,
-  date,
-  title,
-  isSend,
-  checked,
-  isShareMode = false,
-  onToggle,
-  isClosed,
-  zipCode,
-}: LetterPreviewProps) => {
-  // 차단된 편지인경우 편지 보내기 disable
+const LetterPreview = forwardRef<HTMLDivElement, LetterPreviewProps>((props, ref) => {
+  const {
+    id,
+    date,
+    title,
+    isSend,
+    checked,
+    isShareMode = false,
+    onToggle,
+    isClosed,
+    zipCode,
+  } = props;
   const navigate = useNavigate();
 
   const handleItemClick = (id: number) => {
@@ -39,9 +41,9 @@ const LetterPreview = ({
 
   if (isShareMode)
     return (
-      <LetterWrapper isSender={isSend}>
+      <LetterWrapper isSender={isSend} ref={ref}>
         <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}`}
@@ -58,11 +60,11 @@ const LetterPreview = ({
     );
 
   return (
-    <LetterWrapper isSender={isSend} onClick={() => handleItemClick(id)}>
+    <LetterWrapper isSender={isSend} onClick={() => handleItemClick(id)} ref={ref}>
       <p className="body-r text-gray-80 mb-3">{date}</p>
       <p className="body-m text-gray-80 line-clamp-1 break-all">{title}</p>
     </LetterWrapper>
   );
-};
+});
 
 export default LetterPreview;