From fdf9fbec4a11537ba27bd60b3038bac24e6e08f3 Mon Sep 17 00:00:00 2001
From: SeoHyun Kim <seobbangway@naver.com>
Date: Fri, 4 Oct 2024 09:38:43 +0900
Subject: [PATCH] Fix: qa (#82)

---
 src/components/BottomSheet.tsx                    |  1 -
 src/views/Detail/components/Review.tsx            |  2 --
 .../components/review/CategoryBottomSheet.tsx     |  8 +++++++-
 src/views/Detail/components/review/Guide.tsx      | 15 ++++++++++++++-
 src/views/Map/components/BottomSheetContent.tsx   |  1 +
 .../components/Search/FilterBottomSheet.tsx       |  8 +++++++-
 6 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/components/BottomSheet.tsx b/src/components/BottomSheet.tsx
index c060925..89d45ed 100644
--- a/src/components/BottomSheet.tsx
+++ b/src/components/BottomSheet.tsx
@@ -110,7 +110,6 @@ const backgroundCss = css`
 const containerCss = (height: string) => css`
   position: absolute;
   bottom: 0;
-  overflow: auto;
 
   width: 100dvw;
   height: ${height};
diff --git a/src/views/Detail/components/Review.tsx b/src/views/Detail/components/Review.tsx
index a0f245d..3aae208 100644
--- a/src/views/Detail/components/Review.tsx
+++ b/src/views/Detail/components/Review.tsx
@@ -49,7 +49,6 @@ const Review = () => {
 
   const handleSetShowGuide = (value: boolean) => {
     setShowGuide(value);
-    document.body.style.overflow = '';
   };
 
   const handleFilterState = (category: category, facility: string) => {
@@ -71,7 +70,6 @@ const Review = () => {
   const selectedFilterList = getFilterList(filterState);
 
   useEffect(() => {
-    if (showGuide) document.body.style.overflow = 'hidden';
     if (sessionStorage.getItem(STORAGE_KEY.successToast)) {
       setToast(true);
       sessionStorage.removeItem(STORAGE_KEY.successToast);
diff --git a/src/views/Detail/components/review/CategoryBottomSheet.tsx b/src/views/Detail/components/review/CategoryBottomSheet.tsx
index a6d8eb7..6c9865e 100644
--- a/src/views/Detail/components/review/CategoryBottomSheet.tsx
+++ b/src/views/Detail/components/review/CategoryBottomSheet.tsx
@@ -43,7 +43,7 @@ const CategoryBottomSheet = (props: CategoryBottomSheetProps) => {
       <header css={titleCss}>
         <h3>리뷰 필터</h3>
       </header>
-      <ul>
+      <ul css={listContainerCss}>
         {['physical', 'visual', 'hearing', 'infant'].map((category) => (
           <CategoryList
             key={category}
@@ -65,3 +65,9 @@ const titleCss = css`
   color: ${COLORS.brand1};
   ${FONTS.H4};
 `;
+
+const listContainerCss = css`
+  overflow: auto;
+
+  height: calc(100% - 4rem);
+`;
diff --git a/src/views/Detail/components/review/Guide.tsx b/src/views/Detail/components/review/Guide.tsx
index e1ad97b..d3e5780 100644
--- a/src/views/Detail/components/review/Guide.tsx
+++ b/src/views/Detail/components/review/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';
@@ -16,15 +17,27 @@ const Guide = (props: GuideProps) => {
   const hideGuideForADay = () => {
     setStorageHideGuide(STORAGE_KEY.hideReviewFilterGuide);
     handleSetShowGuide(false);
+    document.body.style.overflow = 'auto';
   };
 
+  useEffect(() => {
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.body.style.overflow = 'auto';
+    };
+  });
+
   return (
     <div css={containerCss}>
       <div css={section1Css}>
         <button
           type="button"
           css={buttonCss}
-          onClick={() => handleSetShowGuide(false)}>
+          onClick={() => {
+            handleSetShowGuide(false);
+            document.body.style.overflow = 'auto';
+          }}>
           <XMonoIcon />
         </button>
         <p css={textCss}>
diff --git a/src/views/Map/components/BottomSheetContent.tsx b/src/views/Map/components/BottomSheetContent.tsx
index ce9ed10..4651c5d 100644
--- a/src/views/Map/components/BottomSheetContent.tsx
+++ b/src/views/Map/components/BottomSheetContent.tsx
@@ -21,6 +21,7 @@ const BottomSheetContent = (props: contentProps) => {
 
   const onClickContent = () => {
     navigate(`/${contentId}`);
+    document.body.style.overflow = 'auto';
   };
 
   return (
diff --git a/src/views/Search/components/Search/FilterBottomSheet.tsx b/src/views/Search/components/Search/FilterBottomSheet.tsx
index a30d96c..fd5d839 100644
--- a/src/views/Search/components/Search/FilterBottomSheet.tsx
+++ b/src/views/Search/components/Search/FilterBottomSheet.tsx
@@ -42,7 +42,7 @@ const FilterBottomSheet = (props: FilterBottomSheetProps) => {
       <header css={titleCss}>
         <h3>필터 상세 설정</h3>
       </header>
-      <ul>
+      <ul css={listContainerCss}>
         <FacilitiesAccordian
           category={'physical'}
           filterState={selectedFilterState}
@@ -83,3 +83,9 @@ const titleCss = css`
 const lineCss = css`
   border-top: 1px solid rgb(241 241 241 / 100%);
 `;
+
+const listContainerCss = css`
+  overflow: auto;
+
+  height: calc(100% - 4rem);
+`;