Fix: qa (#82)

TEAM-UNITRIP · Oct 4, 2024 · fdf9fbe · fdf9fbe
1 parent e41100e
commit fdf9fbe
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+`;