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

Author: nirii00

src/pages/LetterBox/components/LetterBoxItem.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/index.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,7 +52,9 @@ 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

src/styles/utilities.css

@@ -87,4 +87,25 @@
   .letter-gradient {
     background: linear-gradient(to bottom, #ffffff, #f2f2f2);
   }
+
+  /* letter-box */
+  .window-bg {
+    background: linear-gradient(to bottom, #d5b695, #b3895d);
+  }
+
+  .window-top-checked {
+    background: linear-gradient(to bottom, #ffffff, #fff5ed);
+  }
+
+  .window-top-unChecked {
+    background: linear-gradient(to bottom, #ffffff, #fff4f2);
+  }
+
+  .window-bottom-checked {
+    background: linear-gradient(to bottom, #FFF7E3, #FFE197);
+  }
+
+  .window-bottom-unChecked {
+    background: linear-gradient(to bottom, #FFF4F2, #FFE6E3);
+  }
 }