Refactor: 검색/필터링 기능 최적화 (#86)

* refactor: useEffect 제거

* refactor: 불필요 useEffect 삭제 및 컴포넌트 분리

* feat: useAsyncEffect deps 옵셔널로 변경

* refactor: 불필요 useEffect 제거

* refactor: useEffect 로 body overflow 관리하기

* refactor: 필요 없는 옵셔널체이닝 제거

* chore: hook 관련 eslint 추가

* refactor: 검색 필터링 방식 변경

* chore: typescript 버전 업

* refactor: 리렌더링 최적화

* refactor: 중복된 setState 함수 호출 리팩토링

* feat: 이미지 배경색상 핑크 없애기

* feat: place card image lazy loading 추가

* refactor: 컴포넌트 분리

* fix: filterIndexInfo 유지되는 문제 해결

.eslintrc.cjs

@@ -13,6 +13,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react/recommended',
     'prettier',
+    'plugin:react-hooks/recommended',
   ],
   overrides: [
     {

package.json

@@ -50,7 +50,7 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
     "terser": "^5.31.1",
-    "typescript": "^5.2.2",
+    "typescript": "^5.5.4",
     "vite": "^5.3.1",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2"

src/components/MenuBar.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import {
@@ -20,7 +20,7 @@ const PATH_MATCH = [
   { url: '/mypage', name: '마이', icon: <UserMonoIcon /> },
 ];
 
-const MenuBar = () => {
+const MenuBar = memo(() => {
   const { pathname } = useLocation();
   const firstPathname = `/${pathname.split('/')[1]}`;
   const navigate = useNavigate();
@@ -67,14 +67,17 @@ const MenuBar = () => {
       {activateModal && <LoginModal onClick={closeModal} />}
     </>
   );
-};
+});
+
+MenuBar.displayName = 'MenuBar';
 
 export default MenuBar;
 
 const navCss = css`
   display: flex;
   position: fixed;
   bottom: 1.6rem;
+  z-index: 999;
 
   width: 100vw;
 `;

src/components/PageLoading.tsx

@@ -1,18 +1,9 @@
 import { css } from '@emotion/react';
-import { useEffect } from 'react';
 
 import { WhiteSpinnerGIF } from '@/assets/image';
 import { COLORS, FONTS } from '@/styles/constants';
 
 const PageLoading = () => {
-  useEffect(() => {
-    // 스크롤 방지
-    document.body.style.overflow = 'hidden';
-
-    return () => {
-      document.body.style.overflow = 'auto';
-    };
-  }, []);
   return (
     <div css={dataContainer}>
       <img css={img} src={WhiteSpinnerGIF} alt="spinner" />
@@ -32,10 +23,10 @@ const dataContainer = css`
   top: 0;
   z-index: 999;
 
-  width: 100dvw;
   width: 100%;
-  height: 100dvh;
+  width: 100dvw;
   height: 100%;
+  height: 100dvh;
 
   background-color: rgb(82 82 82 / 72%);
 `;

src/components/PlaceCard.tsx

@@ -10,6 +10,7 @@ import {
 import { COLORS, FONTS } from '@/styles/constants';
 
 interface PlaceCardProps {
+  idx: number;
   placeName: string;
   address: string;
   imgSrc: string;
@@ -30,6 +31,7 @@ interface PlaceCardProps {
 
 const PlaceCard = (props: PlaceCardProps) => {
   const {
+    idx,
     placeName,
     address,
     imgSrc,
@@ -47,7 +49,13 @@ const PlaceCard = (props: PlaceCardProps) => {
   };
 
   return (
-    <Link to={`/${contentid}`} css={cardContainerCss(imgSrc, placeName)}>
+    <Link to={`/${contentid}`} css={cardContainerCss(placeName)}>
+      <img
+        src={imgSrc}
+        alt=""
+        loading={idx > 10 ? 'lazy' : 'eager'}
+        css={imgCss}
+      />
       <div css={backgroundCss}>
         <button
           type="button"
@@ -73,7 +81,7 @@ const PlaceCard = (props: PlaceCardProps) => {
 
 export default PlaceCard;
 
-const cardContainerCss = (imgSrc: string, placeName: string) => css`
+const cardContainerCss = (placeName: string) => css`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -83,15 +91,26 @@ const cardContainerCss = (imgSrc: string, placeName: string) => css`
   border-radius: 1.2rem;
 
   background-color: ${placeName ? COLORS.gray4 : COLORS.gray2};
-  background-position: center center;
-  background-size: cover;
-  background-image: url(${imgSrc});
+`;
+
+const imgCss = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+
+  width: 100%;
+  height: 16.8rem;
+  border-radius: 1.2rem;
+
+  object-fit: cover;
 `;
 
 const backgroundCss = css`
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 2;
 
   width: 100%;
   height: 16.8rem;

src/constants/facilities.tsx

@@ -88,7 +88,7 @@ import {
   WheelChairInAcitveIcon,
   WheelChairSelectedIcon,
 } from '@/assets/icon';
-import { BarrierFreeItem } from '@/types/search';
+import { FilterFacilities } from '@/views/Search/types/category';
 
 export interface Facility {
   name: string;
@@ -264,7 +264,7 @@ export const INFANT_FACILITIES: Facility[] = [
   },
 ];
 
-export const MAP_FACILITIES_API_KEY: Record<string, keyof BarrierFreeItem> = {
+export const MAP_FACILITIES_API_KEY: Record<string, FilterFacilities> = {
   휠체어: 'wheelchair',
   출입통로: 'exit',
   엘리베이터: 'elevator',

src/hooks/use-async-effect.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const useAsyncEffect = (effect: () => Promise<void>, deps: any[]) => {
+export const useAsyncEffect = (effect: () => Promise<void>, deps?: any[]) => {
   useEffect(() => {
     effect();
   }, deps);

src/hooks/use-infinite-scroll.ts

@@ -38,6 +38,7 @@ export const useInfiniteScroll = ({
     target.current && observer.observe(target.current);
 
     return () => {
+      //주시 종료
       target.current && observer.unobserve(target.current);
     };
   }, deps);

src/views/Detail/components/Review.tsx

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 
 import getReviews from '@/apis/supabase/getReviews';
@@ -67,14 +67,12 @@ const Review = () => {
     setFilterState(value);
   };
 
-  const selectedFilterList = getFilterList(filterState);
+  if (sessionStorage.getItem(STORAGE_KEY.successToast)) {
+    setToast(true);
+    sessionStorage.removeItem(STORAGE_KEY.successToast);
+  }
 
-  useEffect(() => {
-    if (sessionStorage.getItem(STORAGE_KEY.successToast)) {
-      setToast(true);
-      sessionStorage.removeItem(STORAGE_KEY.successToast);
-    }
-  }, []);
+  const selectedFilterList = getFilterList(filterState);
 
   useAsyncEffect(async () => {
     setLoading(true);

src/views/Detail/components/review/Guide.tsx

@@ -17,7 +17,6 @@ const Guide = (props: GuideProps) => {
   const hideGuideForADay = () => {
     setStorageHideGuide(STORAGE_KEY.hideReviewFilterGuide);
     handleSetShowGuide(false);
-    document.body.style.overflow = 'auto';
   };
 
   useEffect(() => {
@@ -26,7 +25,7 @@ const Guide = (props: GuideProps) => {
     return () => {
       document.body.style.overflow = 'auto';
     };
-  });
+  }, []);
 
   return (
     <div css={containerCss}>
@@ -36,7 +35,6 @@ const Guide = (props: GuideProps) => {
           css={buttonCss}
           onClick={() => {
             handleSetShowGuide(false);
-            document.body.style.overflow = 'auto';
           }}>
           <XMonoIcon />
         </button>
@@ -83,7 +81,7 @@ const section2Css = css`
 `;
 
 const buttonCss = css`
-  position: absolute;
+  position: fixed;
   top: 2.5rem;
   right: 2.4rem;
 

src/views/Detail/components/review/ReviewCard.tsx

@@ -21,10 +21,10 @@ const ReviewCard = (props: ReviewResponse) => {
   const descriptionRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
+    if (!descriptionRef.current) return;
+
     if (
-      descriptionRef.current &&
-      descriptionRef.current?.scrollHeight >
-        descriptionRef.current?.offsetHeight
+      descriptionRef.current.scrollHeight > descriptionRef.current.offsetHeight
     ) {
       setIsMoreButton(true);
     }

src/views/Main/components/ReviewCard.tsx

@@ -60,8 +60,6 @@ const card = css`
 const placeImg = css`
   height: 16.4rem;
 
-  background-color: pink;
-
   border-top-left-radius: 1.2rem;
   border-top-right-radius: 1.2rem;
 `;

src/views/Mypage/components/FavoritePlaceList.tsx

@@ -24,9 +24,10 @@ const FavoritePlaceList = (props: placeListProps) => {
 
   return (
     <ul css={listContainer}>
-      {cardInfoList.map((item) => (
+      {cardInfoList.map((item, idx) => (
         <li key={item.contentId} css={itemContainer}>
           <PlaceCard
+            idx={idx}
             placeName={item.title}
             address={item.address}
             imgSrc={item.image || DefaultImage}

src/views/Search/components/Result/Guide.tsx

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { useEffect } from 'react';
 
 import { CheckFillIcon, XMonoIcon } from '@/assets/icon';
 import { COLORS, FONTS } from '@/styles/constants';
@@ -18,6 +19,14 @@ const Guide = (props: GuideProps) => {
     handleSetShowGuide(false);
   };
 
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  }, []);
+
   return (
     <div css={containerCss}>
       <div css={section1Css}>