Merge pull request #271 from ItRecode/FE-260

[FE-260] feat: 성능 최적화

Author: Seongtaek-H

src/components/BackButton.tsx

@@ -2,7 +2,11 @@ import React from 'react'
 import { ReactComponent as Back } from '@assets/back.svg'
 import { useNavigate } from 'react-router-dom'
 
-function BackButton({ onClick }: { onClick?: () => void }) {
+const BackButton = React.memo(function BackBtn({
+  onClick,
+}: {
+  onClick?: () => void
+}) {
   const navigate = useNavigate()
 
   const handleLocateBack = () => {
@@ -18,6 +22,6 @@ function BackButton({ onClick }: { onClick?: () => void }) {
   }
 
   return <Back className="cursor-pointer" onClick={handleLocateBack} />
-}
+})
 
 export default BackButton

src/components/Chip.tsx

@@ -48,7 +48,13 @@ function Chip({
       `}
     >
       {icon && (
-        <img className="mr-2 aspect-square w-[14px] object-cover" src={icon} />
+        <div className="mr-2 aspect-square w-[14px]">
+          <img
+            className="h-full w-full object-cover"
+            src={icon}
+            alt={message}
+          />
+        </div>
       )}
       <p className="flex items-center text-[14px] leading-none">{message}</p>
     </button>

src/components/Navbar.tsx

@@ -1,14 +1,17 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { ReactComponent as Record_icon } from '@assets/nav_icons/record_icon.svg'
 import { Outlet, useNavigate } from 'react-router-dom'
 import NavbarItem from './NavbarItem'
+import Loading from './Loading'
 
-export default function NavBar() {
+function NavBar() {
   const navigate = useNavigate()
 
   return (
     <>
-      <Outlet />
+      <Suspense fallback={<Loading />}>
+        <Outlet />
+      </Suspense>
       <nav className="fixed bottom-0 z-20 flex h-[60px] w-full max-w-[420px] justify-between rounded-t-xl border border-solid border-grey-3 bg-white px-3 pt-1.5">
         <nav className="left-3 flex">
           <NavbarItem pageName="홈" linkSrc="/" className="mr-5" />
@@ -30,3 +33,5 @@ export default function NavBar() {
     </>
   )
 }
+
+export const MemoizedNavbar = React.memo(NavBar)

src/components/NavbarItem.tsx

@@ -43,24 +43,28 @@ export default function NavbarItem({
         return (
           <Home_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
       case '/collect':
         return (
           <Rank_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
       case '/myrecord':
         return (
           <MyRecord_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
       case '/setting':
         return (
           <Setting_icon
             className={`${iconFormat} ${checkPathWithIconImg(linkSrc)}`}
+            aria-label={pageName}
           />
         )
     }

src/components/ParrentCategoryTab.tsx

@@ -2,7 +2,7 @@ import { CELEBRATION_ID, CONSOLATION_ID } from '@assets/constant/constant'
 import React, { Dispatch, SetStateAction } from 'react'
 import { parentCategoryID } from 'types/category'
 
-export default function ParentCategoryTab({
+const MemoizedParentCategoryTab = React.memo(function ParentCategoryTab({
   parentCategoryId,
   setParentCategoryId,
   isModify,
@@ -60,4 +60,6 @@ export default function ParentCategoryTab({
       <hr className="m-0 h-[1px] border-0 bg-grey-3" />
     </>
   )
-}
+})
+
+export default MemoizedParentCategoryTab

src/components/RecordCard.tsx

@@ -43,7 +43,9 @@ function RecordCard({
       } shrink-0 rounded-2xl ${ColorName} flex cursor-pointer flex-col items-center justify-center`}
       onClick={() => handleClickRecord(recordId)}
     >
-      <RecordIcon width={100} height={100} />
+      <div className="aspect-square w-[100px]">
+        <RecordIcon className="h-full w-full" />
+      </div>
       <div className="mt-4 w-full text-sm font-semibold text-grey-10">
         <p className="w-full truncate px-5 text-center">{title}</p>
       </div>

src/components/Spinner.tsx

@@ -5,7 +5,9 @@ interface ISpinnerProps {
   size?: 'small' | 'large' | 'button'
 }
 
-export default function Spinner({ size = 'small' }: ISpinnerProps) {
+const Spinner = React.memo(function SpinnerComponent({
+  size = 'small',
+}: ISpinnerProps) {
   const setSpinnerSize = (size: string) => {
     switch (size) {
       case 'small':
@@ -18,4 +20,6 @@ export default function Spinner({ size = 'small' }: ISpinnerProps) {
   }
 
   return <SpinnerIcon className={`z-10 animate-spin ${setSpinnerSize(size)}`} />
-}
+})
+
+export default Spinner

src/pages/AddRecord/AddRecord.tsx

@@ -18,10 +18,10 @@ import { useQuery } from '@tanstack/react-query'
 import Loading from '@components/Loading'
 import { parentCategoryID } from 'types/category'
 import { CELEBRATION_ID } from '@assets/constant/constant'
-import ParentCategoryTab from '@components/ParrentCategoryTab'
 import AddRecordTitle from './AddRecordTitle'
 import AddRecordInput from './AddRecordInput'
 import { useCheckMobile } from '@hooks/useCheckMobile'
+import MemoizedParentCategoryTab from '@components/ParrentCategoryTab'
 
 export type IsInputsHasValueType = {
   input: boolean
@@ -240,7 +240,7 @@ export default function AddRecord() {
               isModify && 'pointer-events-none'
             } sticky top-0 left-0 z-[5] bg-grey-1`}
           >
-            <ParentCategoryTab
+            <MemoizedParentCategoryTab
               parentCategoryId={parentCategoryId}
               setParentCategoryId={setParentCategoryId}
               isModify={isModify}

src/pages/AddRecord/AddRecordFile.tsx

@@ -144,8 +144,10 @@ function AddRecordFile({
     <div className="mb-8 flex items-center gap-2">
       {isToast && makeToast()}
       <label className="h-[66px] w-[66px]" htmlFor="file">
-        <div className="mr-4  flex h-[66px] w-[66px] flex-col items-center justify-center  rounded-2xl border-2 border-dashed border-grey-4 py-3 px-5">
-          <img className=" mb-1" src={Camera} alt="camera" />
+        <div className="mr-4 flex h-[66px] w-[66px] flex-col items-center justify-center  rounded-2xl border-2 border-dashed border-grey-4 py-3 px-5">
+          <div className="mb-1 h-[24px] w-[24px]">
+            <img className="h-full w-full" src={Camera} alt="camera" />
+          </div>
           <p className=" text-xs text-grey-4">
             <span
               className={`${!currentImg ? 'text-grey-4' : 'text-primary-2'}`}

src/pages/Collect/CollectRanking.tsx

@@ -1,6 +1,5 @@
 import { CELEBRATION_ID } from '@assets/constant/constant'
 import Category from '@components/Category'
-import ParentCategoryTab from '@components/ParrentCategoryTab'
 import React, { Dispatch, SetStateAction, useEffect, useState } from 'react'
 import { parentCategoryID } from 'types/category'
 import { ReactComponent as Collapse } from '@assets/collect_page_icon/collapse.svg'
@@ -17,6 +16,7 @@ import {
 } from '@store/collectPageAtom'
 import { checkFromDetailPage } from '@store/detailPageAtom'
 import RankingItemNoData from '@components/RankingItemNoData'
+import MemoizedParentCategoryTab from '@components/ParrentCategoryTab'
 
 export default function CollectRanking({
   setOpenModal,
@@ -100,7 +100,7 @@ export default function CollectRanking({
       </div>
 
       <section id="parentCategory" className="mt-[22px]">
-        <ParentCategoryTab
+        <MemoizedParentCategoryTab
           parentCategoryId={parentCategoryId}
           setParentCategoryId={setParentCategoryId}
         />