refactor: 홈 페이지 성능 개선

src/pages/Home/components/FloatingLetters.tsx

@@ -1,10 +1,10 @@
 import gsap from 'gsap';
 import { useEffect, useRef } from 'react';
 
-import letter1 from '@/assets/images/letter-1.png';
-import letter2 from '@/assets/images/letter-2.png';
-import letter3 from '@/assets/images/letter-3.png';
-import letter4 from '@/assets/images/letter-4.png';
+import letter1 from '@/assets/images/letter-1.webp';
+import letter2 from '@/assets/images/letter-2.webp';
+import letter3 from '@/assets/images/letter-3.webp';
+import letter4 from '@/assets/images/letter-4.webp';
 
 const images = [letter1, letter2, letter3, letter4];
 

src/pages/Home/components/GoToLetterBoard.tsx

@@ -1,21 +1,20 @@
 import { Link } from 'react-router';
 
-import goToLetterBoard from '@/assets/images/go-to-letter-board.png';
+import goToLetterBoard from '@/assets/images/go-to-letter-board.webp';
 
 const GoToLetterBoard = () => {
   return (
-    <div className="absolute right-[-56%] bottom-[28%] z-9 flex w-full md:right-[-42%] lg:right-[-20%]">
-      <div className="text-left">
-        <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">게시판</p>
-        <Link to="/board/letter">
-          <img
-            src={goToLetterBoard}
-            alt="go to letter board"
-            className="w-[160px] sm:w-[200px] md:w-[240px]"
-          />
-        </Link>
-      </div>
-    </div>
+    <Link
+      to="/board/letter"
+      className="absolute right-[-56%] bottom-[28%] z-9 w-full flex-col md:right-[-42%] lg:right-[-20%]"
+    >
+      <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">게시판</p>
+      <img
+        src={goToLetterBoard}
+        alt="go to letter board"
+        className="h-auto w-[160px] sm:w-[200px] md:w-[240px]"
+      />
+    </Link>
   );
 };
 

src/pages/Home/components/GoToLetterBox.tsx

@@ -2,8 +2,8 @@ import { useState, useEffect } from 'react';
 import { Link } from 'react-router';
 
 import { getUnreadLettersCount } from '@/apis/unreadLetters';
-import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.png';
-import goToLetterBox from '@/assets/images/go-to-letter-box.png';
+import goToLetterBoxNewLetters from '@/assets/images/go-to-letter-box-new-letters.webp';
+import goToLetterBox from '@/assets/images/go-to-letter-box.webp';
 import useToastStore from '@/stores/toastStore';
 
 const GoToLetterBox = () => {
@@ -28,18 +28,14 @@ const GoToLetterBox = () => {
   }, []);
 
   return (
-    <div className="absolute bottom-[11%] left-5 z-9 flex">
-      <div className="text-left">
-        <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">내 편지함</p>
-        <Link to="/letter/box">
-          <img
-            src={arrivedCount ? goToLetterBoxNewLetters : goToLetterBox}
-            alt="go to letter box"
-            className="w-[190px] sm:w-[210px] md:w-[240px]"
-          />
-        </Link>
-      </div>
-    </div>
+    <Link to="/letter/box" className="absolute bottom-[11%] left-5 z-9 flex-col">
+      <p className="text-gray-60 body-r mb-1 ml-2 dark:text-white">내 편지함</p>
+      <img
+        src={arrivedCount ? goToLetterBoxNewLetters : goToLetterBox}
+        alt={arrivedCount ? '새로운 편지가 있는 내 편지함' : '빈 내 편지함'}
+        className="h-auto w-[190px] sm:w-[210px] md:w-[240px]"
+      />
+    </Link>
   );
 };
 

src/pages/Home/components/GoToRandomLetter.tsx

@@ -4,16 +4,12 @@ import goToRandomLetter from '@/assets/images/go-to-random-letter.webp';
 
 const GoToRandomLetter = () => {
   return (
-    <>
-      <div className="z-20 h-fit w-fit">
-        <p className="text-gray-60 body-r mb-1 ml-5 rotate-[-5.277deg] dark:text-white">
-          고민편지 보러가기
-        </p>
-        <Link to={'/letter/random'}>
-          <img src={goToRandomLetter} alt="go to random letter" className="h-45 translate-x-5" />
-        </Link>
-      </div>
-    </>
+    <Link to="/letter/random" className="z-20 h-fit w-fit">
+      <p className="text-gray-60 body-r mb-1 ml-5 rotate-[-5.277deg] dark:text-white">
+        고민편지 보러가기
+      </p>
+      <img src={goToRandomLetter} alt="go to random letter" className="h-45 w-auto translate-x-5" />
+    </Link>
   );
 };
 

src/pages/Home/components/GoToWrite.tsx

@@ -1,17 +1,15 @@
 import { Link } from 'react-router';
 
-import goToWrite from '@/assets/images/postoffice-letter.png';
+import goToWrite from '@/assets/images/postoffice-letter.webp';
 
 const GoToWrite = () => {
   return (
-    <div className="h-fit w-fit pl-[87px]">
+    <Link to="/letter/write" className="h-fit w-fit pl-[87px]">
       <p className="text-gray-60 body-r dark:body-b mb-1 rotate-[-5.277deg] dark:text-white">
         속마음 나누기
       </p>
-      <Link to={'/letter/write'}>
-        <img src={goToWrite} alt="go to write" />
-      </Link>
-    </div>
+      <img src={goToWrite} alt="go to write" className="h-auto w-auto" />
+    </Link>
   );
 };
 

src/pages/Home/components/RandomCheer.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
-import randomCheerBird from '@/assets/images/field-theme-asset-bird.png';
+import randomCheerBird from '@/assets/images/field-theme-asset-bird.webp';
 import randomCheerBirdDark from '@/assets/images/field-theme-asset-bird-dark.webp';
 
 import { RANDOM_CHEER_LIST } from '../constants';
@@ -15,11 +15,19 @@ const RandomCheer = () => {
 
   const [randomCheer, setRandomCheer] = useState(getRandomCheer());
 
+  useEffect(() => {
+    setRandomCheer(getRandomCheer());
+  }, []);
+
+  const handleClick = () => {
+    setRandomCheer(getRandomCheer());
+  };
+
   return (
     <div className="z-26 mr-20 flex flex-col items-end">
       <div
         className="relative mb-3 w-fit rounded-lg border-1 border-white bg-white px-6 py-[7px] text-center"
-        onClick={() => setRandomCheer(getRandomCheer())}
+        onClick={handleClick}
       >
         <p className="caption-m">{randomCheer}</p>
         <div className="absolute right-2 bottom-[-15px] -translate-x-1/2 transform border-x-[10px] border-t-[15px] border-x-transparent border-t-white"></div>
@@ -28,7 +36,7 @@ const RandomCheer = () => {
         src={theme === 'light' ? randomCheerBird : randomCheerBirdDark}
         alt="random cheer bird"
         className="h-[26.5px] w-[21px] opacity-80"
-        onClick={() => setRandomCheer(getRandomCheer())}
+        onClick={handleClick}
       />
     </div>
   );

src/pages/Login/components/Background.tsx

@@ -4,8 +4,8 @@ import FieldImg from '@/assets/images/home-left-mountain.webp';
 import FieldImgDark from '@/assets/images/home-left-mountain-dark.webp';
 
 import BlurImg from '@/assets/images/landing-blur.png';
-import EnvelopeImg from '@/assets/images/postoffice-letter.png';
-import PostofficeImg from '@/assets/images/postoffice.png';
+import EnvelopeImg from '@/assets/images/postoffice-letter.webp';
+import PostofficeImg from '@/assets/images/postoffice.webp';
 import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
 import useThemeStore from '@/stores/themeStore';
 

src/pages/Notifications/components/WarningModal.tsx

@@ -16,7 +16,7 @@ const WarningModal = ({ isOpen, reportContent, onClose }: WarningModalProps) =>
       <article
         className={twMerge(
           'relative w-77 overflow-hidden rounded-sm p-6',
-          'bg-accent-1 bg-[url("/src/assets/images/background-overlay.png")] bg-repeat bg-blend-overlay',
+          'bg-accent-1 bg-[url("/src/assets/images/background-overlay.webp")] bg-repeat bg-blend-overlay',
         )}
       >
         <div className="absolute inset-0 h-full w-full bg-white/90 blur-[25px]" />

src/pages/Share/index.tsx

@@ -22,6 +22,7 @@ const ShareApprovalPage = () => {
   const handleProposalApproval = async (action: 'approve' | 'reject') => {
     try {
       const result = await postShareProposalApproval(Number(shareProposalId), action);
+      console.log(result);
       if (action === 'approve') {
         setToastActive({
           toastType: 'Success',

src/styles/components.css

@@ -11,35 +11,35 @@
 
   .letter-receiver-bg {
     background:
-      url('/src/assets/images/background-overlay.png') repeat,
+      url('/src/assets/images/background-overlay.webp') repeat,
       linear-gradient(180deg, #ffb5ac 0%, #ffc1ba 28%, #ffd3ce 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
   .letter-sender-bg {
     background:
-      url('/src/assets/images/background-overlay.png') repeat,
+      url('/src/assets/images/background-overlay.webp') repeat,
       linear-gradient(180deg, #fad446 0%, #f8de8c 28%, #ffeab8 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
   .letter-disabled-bg {
     background:
-      url('/src/assets/images/background-overlay.png') repeat,
+      url('/src/assets/images/background-overlay.webp') repeat,
       linear-gradient(180deg, #c5c5c5 0%, #d8d8d8 28%, #d9d9d9 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
   .memo-sender-bg {
     background:
-      url('/src/assets/images/background-overlay.png') repeat,
+      url('/src/assets/images/background-overlay.webp') repeat,
       linear-gradient(180deg, #ffe89f 0%, #ffe8a1 28%, #fff2d4 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
   .letter-box-bg {
     background:
-      url('/src/assets/images/background-overlay.png') repeat,
+      url('/src/assets/images/background-overlay.webp') repeat,
       linear-gradient(180deg, #ffedae 0%, #eec297 100%);
     background-blend-mode: overlay, normal;
   }

src/styles/preflight.css

@@ -53,7 +53,7 @@
 @layer components {
   .mobile-bg {
     background:
-      url('/src/assets/images/background-overlay.png') repeat,
+      url('/src/assets/images/background-overlay.webp') repeat,
       linear-gradient(
           180deg,
           rgba(234, 191, 23, 0.5) 2.83%,