From ac5d414fd04abbf8ceaf8eb9ea32c19347c4fcef Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 20 Feb 2024 04:33:29 +0900
Subject: [PATCH 01/11] =?UTF-8?q?fix:=20BottomSheet=20=EB=8D=B0=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=ED=83=91=EB=B7=B0=20=EB=84=88=EB=B9=84=20=EC=A0=9C?=
 =?UTF-8?q?=ED=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/List/FilterSheet.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/List/FilterSheet.tsx b/src/components/List/FilterSheet.tsx
index 740a951a..a10ab481 100644
--- a/src/components/List/FilterSheet.tsx
+++ b/src/components/List/FilterSheet.tsx
@@ -143,9 +143,13 @@ const St = {
   `,
   SheetWrapper: styled.div`
     .react-modal-sheet-backdrop {
+      max-width: 43rem !important;
+      left: auto !important;
       background-color: rgba(0, 0, 0, 0.6) !important;
     }
     .react-modal-sheet-container {
+      max-width: 43rem !important;
+      left: auto !important;
       border-radius: 1rem !important;
     }
     .react-modal-sheet-header {

From 2eb9f6ed03b94ca1311aa15a857d9861bb1252eb Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 20 Feb 2024 04:45:24 +0900
Subject: [PATCH 02/11] =?UTF-8?q?design:=20=EB=9D=BC=EC=9D=B4=EB=B8=8C?=
 =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20=EC=B5=9C=EC=83=81=EC=9C=84=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/List/FilterSheet.tsx | 1 +
 src/styles/GlobalStyle.ts           | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/List/FilterSheet.tsx b/src/components/List/FilterSheet.tsx
index a10ab481..f84fa487 100644
--- a/src/components/List/FilterSheet.tsx
+++ b/src/components/List/FilterSheet.tsx
@@ -56,6 +56,7 @@ const FilterSheet = ({ isSheetOpen, setSheetOpen, buttons, setButtons }: FilterS
   return (
     <St.Wrapper>
       <Sheet
+        className='react-modal-sheet-wrapper'
         isOpen={isSheetOpen !== -1}
         onClose={() => {
           setSheetOpen(-1);
diff --git a/src/styles/GlobalStyle.ts b/src/styles/GlobalStyle.ts
index 47796157..b73ca46f 100644
--- a/src/styles/GlobalStyle.ts
+++ b/src/styles/GlobalStyle.ts
@@ -190,6 +190,13 @@ input, textarea,button {
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
 }
+
+// react-modal-sheet 라이브러리 Sheet 컴포넌트 최상위 스타일 
+.react-modal-sheet-wrapper {
+  inset : 0px auto !important;
+  width: 100% !important;
+  overflow: visible !important;
+}
 `;
 
 export default GlobalStyle;

From c07777d03ee12495c549d1482eba2df781819661 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 20 Feb 2024 05:28:58 +0900
Subject: [PATCH 03/11] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20important=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/List/FilterSheet.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/List/FilterSheet.tsx b/src/components/List/FilterSheet.tsx
index f84fa487..183657a7 100644
--- a/src/components/List/FilterSheet.tsx
+++ b/src/components/List/FilterSheet.tsx
@@ -144,14 +144,13 @@ const St = {
   `,
   SheetWrapper: styled.div`
     .react-modal-sheet-backdrop {
-      max-width: 43rem !important;
+      max-width: 43rem;
       left: auto !important;
       background-color: rgba(0, 0, 0, 0.6) !important;
     }
     .react-modal-sheet-container {
-      max-width: 43rem !important;
-      left: auto !important;
-      border-radius: 1rem !important;
+      max-width: 43rem;
+      border-radius: 1rem;
     }
     .react-modal-sheet-header {
       height: 1.6rem !important;

From c63b48e33baf61d85aeb09afee7a2959ad2610d1 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Tue, 20 Feb 2024 05:47:54 +0900
Subject: [PATCH 04/11] =?UTF-8?q?design:=20BottomSheet=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20radius=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/List/FilterSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/List/FilterSheet.tsx b/src/components/List/FilterSheet.tsx
index 183657a7..9067f7d7 100644
--- a/src/components/List/FilterSheet.tsx
+++ b/src/components/List/FilterSheet.tsx
@@ -150,7 +150,7 @@ const St = {
     }
     .react-modal-sheet-container {
       max-width: 43rem;
-      border-radius: 1rem;
+      border-radius: 1rem 1rem 0 0;
     }
     .react-modal-sheet-header {
       height: 1.6rem !important;

From d22b87d9a5c6ff6ca11ebfe0b63239a77262467c Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Thu, 22 Feb 2024 14:18:13 +0900
Subject: [PATCH 05/11] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20BottomSheet?=
 =?UTF-8?q?=20=EC=83=9D=EC=84=B1=20=EB=B0=8F=20FilterSheet=EC=97=90=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/BottomSheet.tsx          | 65 +++++++++++++++++++++++++++++
 src/components/List/FilterSheet.tsx | 40 +++++-------------
 2 files changed, 76 insertions(+), 29 deletions(-)
 create mode 100644 src/common/BottomSheet.tsx

diff --git a/src/common/BottomSheet.tsx b/src/common/BottomSheet.tsx
new file mode 100644
index 00000000..0db7dd52
--- /dev/null
+++ b/src/common/BottomSheet.tsx
@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import Sheet from 'react-modal-sheet';
+import { SheetDetent } from 'react-modal-sheet/dist/types';
+import styled from 'styled-components';
+
+interface BottomSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+  detent: SheetDetent | undefined;
+  disableDrag: boolean;
+  children: ReactNode;
+}
+
+const Header = ({ disableDrag }: { disableDrag: boolean }) => {
+  return <Sheet.Header disableDrag={disableDrag}></Sheet.Header>;
+};
+const Content = ({ children }: { children: ReactNode }) => {
+  return <Sheet.Content>{children}</Sheet.Content>;
+};
+const Container = ({ children }: { children: ReactNode }) => {
+  return <Sheet.Container>{children}</Sheet.Container>;
+};
+const Backdrop = ({ onTap }: { onTap: () => void }) => {
+  return <Sheet.Backdrop onTap={onTap} />;
+};
+const BottomSheet = ({ isOpen, onClose, detent, disableDrag, children }: BottomSheetProps) => {
+  return (
+    <Sheet
+      className='react-modal-sheet-wrapper'
+      isOpen={isOpen}
+      onClose={onClose}
+      detent={detent}
+      disableDrag={disableDrag}
+    >
+      <St.SheetWrapper>{children}</St.SheetWrapper>
+    </Sheet>
+  );
+};
+
+export const CustomSheet = Object.assign(BottomSheet, {
+  Header,
+  Content,
+  Container,
+  Backdrop,
+});
+
+const St = {
+  SheetWrapper: styled.div`
+    .react-modal-sheet-backdrop {
+      max-width: 43rem;
+      left: auto !important;
+      background-color: rgba(0, 0, 0, 0.6) !important;
+    }
+    .react-modal-sheet-container {
+      max-width: 43rem;
+      border-radius: 1rem 1rem 0 0;
+    }
+    .react-modal-sheet-header {
+      height: 1.6rem !important;
+    }
+    .react-modal-sheet-drag-indicator {
+      display: none;
+    }
+  `,
+};
diff --git a/src/components/List/FilterSheet.tsx b/src/components/List/FilterSheet.tsx
index 9067f7d7..d3ef8d40 100644
--- a/src/components/List/FilterSheet.tsx
+++ b/src/components/List/FilterSheet.tsx
@@ -1,11 +1,11 @@
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
 import { useState, useEffect } from 'react';
 import useGetGenre, { GenreItemProps } from '../../libs/hooks/list/useGetGenre';
 import useGetStyle, { StyleItemProps } from '../../libs/hooks/list/useGetStyle';
 import { buttonType } from '../../page/ListPage';
 import { SORT_TAGS } from '../../constants/ListInfo';
 import { IcCheckSmallLight, IcCheckSmallPink } from '../../assets/icon';
+import { CustomSheet } from '../../common/BottomSheet';
 
 interface FilterSheetProps {
   isSheetOpen: number;
@@ -55,8 +55,7 @@ const FilterSheet = ({ isSheetOpen, setSheetOpen, buttons, setButtons }: FilterS
 
   return (
     <St.Wrapper>
-      <Sheet
-        className='react-modal-sheet-wrapper'
+      <CustomSheet
         isOpen={isSheetOpen !== -1}
         onClose={() => {
           setSheetOpen(-1);
@@ -64,10 +63,10 @@ const FilterSheet = ({ isSheetOpen, setSheetOpen, buttons, setButtons }: FilterS
         detent='content-height'
         disableDrag={true}
       >
-        <St.SheetWrapper>
-          <Sheet.Container>
-            <Sheet.Header disableDrag={true} />
-            <Sheet.Content>
+        <>
+          <CustomSheet.Container>
+            <CustomSheet.Header disableDrag={true} />
+            <CustomSheet.Content>
               {isSheetOpen !== -1 &&
                 tags[isSheetOpen].map((el) => (
                   <St.TagBox
@@ -86,15 +85,15 @@ const FilterSheet = ({ isSheetOpen, setSheetOpen, buttons, setButtons }: FilterS
                   적용하기
                 </St.Button>
               </St.Footer>
-            </Sheet.Content>
-          </Sheet.Container>
-          <Sheet.Backdrop
+            </CustomSheet.Content>
+          </CustomSheet.Container>
+          <CustomSheet.Backdrop
             onTap={() => {
               onTapBack();
             }}
           />
-        </St.SheetWrapper>
-      </Sheet>
+        </>
+      </CustomSheet>
     </St.Wrapper>
   );
 };
@@ -142,21 +141,4 @@ const St = {
     color: ${({ theme }) => theme.colors.white};
     ${({ theme }) => theme.fonts.title_semibold_18};
   `,
-  SheetWrapper: styled.div`
-    .react-modal-sheet-backdrop {
-      max-width: 43rem;
-      left: auto !important;
-      background-color: rgba(0, 0, 0, 0.6) !important;
-    }
-    .react-modal-sheet-container {
-      max-width: 43rem;
-      border-radius: 1rem 1rem 0 0;
-    }
-    .react-modal-sheet-header {
-      height: 1.6rem !important;
-    }
-    .react-modal-sheet-drag-indicator {
-      display: none;
-    }
-  `,
 };

From 9e185c5496dc872f7c7d855c8cb349a9cb11d2cb Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Thu, 22 Feb 2024 14:47:16 +0900
Subject: [PATCH 06/11] =?UTF-8?q?feat:=20PublicBottomSheet=EC=97=90=20Bott?=
 =?UTF-8?q?omSheet=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/BottomSheet.tsx                  | 26 +++++++++--
 src/components/Custom/PublicBottomSheet.tsx | 51 ++++-----------------
 2 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/src/common/BottomSheet.tsx b/src/common/BottomSheet.tsx
index 0db7dd52..47131d7a 100644
--- a/src/common/BottomSheet.tsx
+++ b/src/common/BottomSheet.tsx
@@ -6,19 +6,22 @@ import styled from 'styled-components';
 interface BottomSheetProps {
   isOpen: boolean;
   onClose: () => void;
-  detent: SheetDetent | undefined;
+  detent?: SheetDetent;
   disableDrag: boolean;
   children: ReactNode;
 }
 
-const Header = ({ disableDrag }: { disableDrag: boolean }) => {
-  return <Sheet.Header disableDrag={disableDrag}></Sheet.Header>;
+const Header = ({ disableDrag, children }: { disableDrag: boolean; children?: ReactNode }) => {
+  return <Sheet.Header disableDrag={disableDrag}>{children}</Sheet.Header>;
 };
 const Content = ({ children }: { children: ReactNode }) => {
   return <Sheet.Content>{children}</Sheet.Content>;
 };
-const Container = ({ children }: { children: ReactNode }) => {
-  return <Sheet.Container>{children}</Sheet.Container>;
+const Container = ({ children, className }: { children: ReactNode; className?: string }) => {
+  return <Sheet.Container className={className}>{children}</Sheet.Container>;
+};
+const Scroller = ({ children }: { children: ReactNode }) => {
+  return <Sheet.Scroller>{children}</Sheet.Scroller>;
 };
 const Backdrop = ({ onTap }: { onTap: () => void }) => {
   return <Sheet.Backdrop onTap={onTap} />;
@@ -42,6 +45,7 @@ export const CustomSheet = Object.assign(BottomSheet, {
   Content,
   Container,
   Backdrop,
+  Scroller,
 });
 
 const St = {
@@ -55,9 +59,21 @@ const St = {
       max-width: 43rem;
       border-radius: 1rem 1rem 0 0;
     }
+    .public-bottom-sheet {
+      padding: 2.5rem 2.4rem 0rem 2.4rem;
+      height: calc(100% - 10.6rem) !important;
+      left: initial !important;
+    }
     .react-modal-sheet-header {
       height: 1.6rem !important;
     }
+    .react-modal-sheet-container > div:first-child {
+      display: flex;
+      justify-content: space-between !important;
+    }
+    .react-modal-sheet-scroller {
+      padding-bottom: 6rem;
+    }
     .react-modal-sheet-drag-indicator {
       display: none;
     }
diff --git a/src/components/Custom/PublicBottomSheet.tsx b/src/components/Custom/PublicBottomSheet.tsx
index 9e29f827..51ee4590 100644
--- a/src/components/Custom/PublicBottomSheet.tsx
+++ b/src/components/Custom/PublicBottomSheet.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
 import { IcCancelDark } from '../../assets/icon';
 import { CUSTOM_COPYRIGHT_POLICY } from '../../assets/data/CUSTOM_COPYRIGHT_POLICY';
+import { CustomSheet } from '../../common/BottomSheet';
 
 interface PublicBottomProps {
   isSheetOpen: boolean;
@@ -11,18 +11,18 @@ interface PublicBottomProps {
 const PublicBottomSheet = ({ isSheetOpen, setSheetOpen }: PublicBottomProps) => {
   return (
     <CustomSheet isOpen={isSheetOpen} onClose={() => setSheetOpen(false)} disableDrag={true}>
-      <Sheet.Container>
-        <Sheet.Header disableDrag={false}>
+      <CustomSheet.Container className='public-bottom-sheet'>
+        <CustomSheet.Header disableDrag={false}>
           <St.Title>저작권 정책</St.Title>
           <IcCancelDark onClick={() => setSheetOpen(false)} />
-        </Sheet.Header>
-        <Sheet.Content>
-          <Sheet.Scroller>
+        </CustomSheet.Header>
+        <CustomSheet.Content>
+          <CustomSheet.Scroller>
             <St.Text>{CUSTOM_COPYRIGHT_POLICY}</St.Text>
-          </Sheet.Scroller>
-        </Sheet.Content>
-      </Sheet.Container>
-      <Sheet.Backdrop onTap={() => setSheetOpen(false)} />
+          </CustomSheet.Scroller>
+        </CustomSheet.Content>
+      </CustomSheet.Container>
+      <CustomSheet.Backdrop onTap={() => setSheetOpen(false)} />
     </CustomSheet>
   );
 };
@@ -42,34 +42,3 @@ const St = {
     white-space: pre-wrap;
   `,
 };
-
-const CustomSheet = styled(Sheet)`
-  display: flex;
-  justify-content: center;
-
-  .react-modal-sheet-backdrop {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .react-modal-sheet-container {
-    padding: 2.5rem 2.4rem 0rem 2.4rem;
-    // 모달 높이 낮추기
-    height: calc(100% - 10.6rem) !important;
-    left: initial !important;
-    max-width: 43rem;
-
-    border-radius: 1rem 1rem 0rem 0rem !important;
-  }
-
-  .react-modal-sheet-container > div {
-    display: flex;
-    justify-content: space-between !important;
-  }
-
-  .react-modal-sheet-scroller {
-    padding-bottom: 6rem;
-  }
-
-  .react-modal-sheet-drag-indicator {
-    display: none;
-  }
-`;

From f2a8eb65690976245aa0a0e75a9b52e9cca58186 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Thu, 22 Feb 2024 14:52:10 +0900
Subject: [PATCH 07/11] =?UTF-8?q?feat:=20SelectCustomPolicyBottom=EC=97=90?=
 =?UTF-8?q?=20BottomSheet=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/BottomSheet.tsx                    |  3 +-
 .../Select/SelectCustomPolicyBottom.tsx       | 50 ++++---------------
 src/components/Custom/PublicBottomSheet.tsx   |  2 +-
 3 files changed, 13 insertions(+), 42 deletions(-)

diff --git a/src/common/BottomSheet.tsx b/src/common/BottomSheet.tsx
index 47131d7a..e2dcffff 100644
--- a/src/common/BottomSheet.tsx
+++ b/src/common/BottomSheet.tsx
@@ -59,9 +59,10 @@ const St = {
       max-width: 43rem;
       border-radius: 1rem 1rem 0 0;
     }
-    .public-bottom-sheet {
+    .text-bottom-sheet {
       padding: 2.5rem 2.4rem 0rem 2.4rem;
       height: calc(100% - 10.6rem) !important;
+
       left: initial !important;
     }
     .react-modal-sheet-header {
diff --git a/src/components/Custom/Common/Select/SelectCustomPolicyBottom.tsx b/src/components/Custom/Common/Select/SelectCustomPolicyBottom.tsx
index 27e351cb..536a8194 100644
--- a/src/components/Custom/Common/Select/SelectCustomPolicyBottom.tsx
+++ b/src/components/Custom/Common/Select/SelectCustomPolicyBottom.tsx
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
-import Sheet from 'react-modal-sheet';
 import { IcCancelDark } from '../../../../assets/icon';
 import { REFUND_CUSTOM_POLICY } from '../../../../assets/data/REFUND_CUSTOM_POLICY';
+import { CustomSheet } from '../../../../common/BottomSheet';
 interface PrePointPolicyProps {
   isSheetOpen: boolean;
   setSheetOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -10,18 +10,18 @@ interface PrePointPolicyProps {
 const SelectCustomPolicyBottom = ({ isSheetOpen, setSheetOpen }: PrePointPolicyProps) => {
   return (
     <CustomSheet isOpen={isSheetOpen} onClose={() => setSheetOpen(false)} disableDrag={true}>
-      <Sheet.Container>
-        <Sheet.Header disableDrag={false}>
+      <CustomSheet.Container className='text-bottom-sheet'>
+        <CustomSheet.Header disableDrag={false}>
           <St.SheetTitle>커스텀 도안 환불 정책</St.SheetTitle>
           <IcCancelDark onClick={() => setSheetOpen(false)} />
-        </Sheet.Header>
-        <Sheet.Content>
-          <Sheet.Scroller>
+        </CustomSheet.Header>
+        <CustomSheet.Content>
+          <CustomSheet.Scroller>
             <St.SheetText> {REFUND_CUSTOM_POLICY}</St.SheetText>
-          </Sheet.Scroller>
-        </Sheet.Content>
-      </Sheet.Container>
-      <Sheet.Backdrop onTap={() => setSheetOpen(false)} />
+          </CustomSheet.Scroller>
+        </CustomSheet.Content>
+      </CustomSheet.Container>
+      <CustomSheet.Backdrop onTap={() => setSheetOpen(false)} />
     </CustomSheet>
   );
 };
@@ -43,33 +43,3 @@ const St = {
     white-space: pre-wrap;
   `,
 };
-
-const CustomSheet = styled(Sheet)`
-  display: flex;
-  justify-content: center;
-
-  .react-modal-sheet-backdrop {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .react-modal-sheet-container {
-    left: initial !important;
-    max-width: 43rem;
-    height: calc(90% - env(safe-area-inset-top) - 34px) !important;
-    padding: 2.5rem 2.4rem 0rem 2.4rem;
-    border-radius: 1rem 1rem 0rem 0rem !important;
-  }
-
-  // .react-modal-sheet-header
-  .react-modal-sheet-container > div {
-    display: flex;
-    justify-content: space-between !important;
-  }
-
-  .react-modal-sheet-scroller {
-    padding-bottom: 6rem;
-  }
-
-  .react-modal-sheet-drag-indicator {
-    display: none;
-  }
-`;
diff --git a/src/components/Custom/PublicBottomSheet.tsx b/src/components/Custom/PublicBottomSheet.tsx
index 51ee4590..8343313b 100644
--- a/src/components/Custom/PublicBottomSheet.tsx
+++ b/src/components/Custom/PublicBottomSheet.tsx
@@ -11,7 +11,7 @@ interface PublicBottomProps {
 const PublicBottomSheet = ({ isSheetOpen, setSheetOpen }: PublicBottomProps) => {
   return (
     <CustomSheet isOpen={isSheetOpen} onClose={() => setSheetOpen(false)} disableDrag={true}>
-      <CustomSheet.Container className='public-bottom-sheet'>
+      <CustomSheet.Container className='text-bottom-sheet'>
         <CustomSheet.Header disableDrag={false}>
           <St.Title>저작권 정책</St.Title>
           <IcCancelDark onClick={() => setSheetOpen(false)} />

From 21c9952d975573bfa9c5ca8f7c6b2fa602c2f60b Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Thu, 22 Feb 2024 15:06:17 +0900
Subject: [PATCH 08/11] =?UTF-8?q?feat:=20PainBottomSheet=EC=97=90=EC=97=90?=
 =?UTF-8?q?=20BottomSheet=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HaveDesign/Reference/PaintBottomSheet.tsx | 41 +++++++------------
 1 file changed, 15 insertions(+), 26 deletions(-)

diff --git a/src/components/Custom/HaveDesign/Reference/PaintBottomSheet.tsx b/src/components/Custom/HaveDesign/Reference/PaintBottomSheet.tsx
index 3aeb4bcf..0828a165 100644
--- a/src/components/Custom/HaveDesign/Reference/PaintBottomSheet.tsx
+++ b/src/components/Custom/HaveDesign/Reference/PaintBottomSheet.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
-import Sheet from 'react-modal-sheet';
 import { styled } from 'styled-components';
 import Canvas from './Canvas';
 import PaintBottomHeader from './PaintBottomHeader';
+import { CustomSheet } from '../../../../common/BottomSheet';
 
 interface PaintBottomProps {
   isBottomOpen: boolean;
@@ -12,6 +12,7 @@ interface PaintBottomProps {
 }
 
 const PaintBottomSheet = ({
+  isBottomOpen,
   setBottomOpen,
   setDrawingImageUrl,
   drawingImageUrl,
@@ -32,25 +33,30 @@ const PaintBottomSheet = ({
   };
 
   return (
-    <CustomSheet isOpen={true} onClose={closeBottom} detent='content-height' disableDrag={true}>
-      <Sheet.Container>
+    <CustomSheet
+      isOpen={isBottomOpen}
+      onClose={closeBottom}
+      detent='content-height'
+      disableDrag={true}
+    >
+      <CustomSheet.Container>
         <St.BottomSheetWrapper>
-          <Sheet.Header disableDrag={true}>
+          <CustomSheet.Header disableDrag={true}>
             <PaintBottomHeader onClose={closeBottom} />
-          </Sheet.Header>
-          <Sheet.Content>
+          </CustomSheet.Header>
+          <CustomSheet.Content>
             <St.ContentWrapper>
               <Canvas setCanvasState={setCanvasState} />
             </St.ContentWrapper>
-          </Sheet.Content>
+          </CustomSheet.Content>
         </St.BottomSheetWrapper>
         <St.Footer>
           <St.Button type='button' onClick={onClickSubmitImage}>
             레퍼런스로 제출하기
           </St.Button>
         </St.Footer>
-      </Sheet.Container>
-      <Sheet.Backdrop onTap={closeBottom} />
+      </CustomSheet.Container>
+      <CustomSheet.Backdrop onTap={closeBottom} />
     </CustomSheet>
   );
 };
@@ -81,21 +87,4 @@ const St = {
   `,
 };
 
-const CustomSheet = styled(Sheet)`
-  max-width: 43rem;
-  margin: 0 auto;
-  .react-modal-sheet-backdrop {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .react-modal-sheet-container {
-    border-radius: 1rem !important;
-  }
-  .react-modal-sheet-header {
-    height: 1.6rem !important;
-  }
-  .react-modal-sheet-drag-indicator {
-    display: none;
-  }
-`;
-
 export default PaintBottomSheet;

From 3836f873cf6596fb6160545313372945c6841e4e Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Thu, 22 Feb 2024 15:10:34 +0900
Subject: [PATCH 09/11] =?UTF-8?q?feat:=20DetailBottom=EC=97=90=20BottomShe?=
 =?UTF-8?q?et=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/BottomSheet.tsx             | 11 +++++
 src/components/Detail/DetailBottom.tsx | 65 +++++++++++++-------------
 2 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/common/BottomSheet.tsx b/src/common/BottomSheet.tsx
index e2dcffff..fcaf3c96 100644
--- a/src/common/BottomSheet.tsx
+++ b/src/common/BottomSheet.tsx
@@ -65,6 +65,17 @@ const St = {
 
       left: initial !important;
     }
+    .detail-bottom-sheet {
+      padding: 2.5rem 0rem 7rem 0rem;
+      left: initial !important;
+
+      & > div:first-child {
+        display: flex;
+        justify-content: space-between !important;
+        margin-bottom: 2.8rem;
+        padding: 0rem 2.4rem 0rem 2.4rem;
+      }
+    }
     .react-modal-sheet-header {
       height: 1.6rem !important;
     }
diff --git a/src/components/Detail/DetailBottom.tsx b/src/components/Detail/DetailBottom.tsx
index 5515f836..139d1c9d 100644
--- a/src/components/Detail/DetailBottom.tsx
+++ b/src/components/Detail/DetailBottom.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
 import { IcCancelDark, IcMinus, IcMinusOneunder, IcPlus } from '../../assets/icon';
 import DetailFooter from './DetailFooter';
 import { useEffect, useState } from 'react';
+import { CustomSheet } from '../../common/BottomSheet';
 
 interface DetailBottomProps {
   id: number;
@@ -38,13 +38,12 @@ const DetailBottom = ({
       detent='content-height'
       disableDrag={true}
     >
-      {}
-      <Sheet.Container>
-        <Sheet.Header disableDrag={true}>
+      <CustomSheet.Container className='detail-bottom-sheet'>
+        <CustomSheet.Header disableDrag={true}>
           <St.Title>수량</St.Title>
           <IcCancelDark onClick={() => setSheetOpen(false)} />
-        </Sheet.Header>
-        <Sheet.Content>
+        </CustomSheet.Header>
+        <CustomSheet.Content>
           <St.FullBox>
             <St.Wrapper>
               <St.Stepper>
@@ -81,9 +80,9 @@ const DetailBottom = ({
             shippingFee={3000} // 배송비도 여기에 추가하기
             setCartToast={setCartToast}
           />
-        </Sheet.Content>
-      </Sheet.Container>
-      <Sheet.Backdrop onTap={() => setSheetOpen(false)} />
+        </CustomSheet.Content>
+      </CustomSheet.Container>
+      <CustomSheet.Backdrop onTap={() => setSheetOpen(false)} />
     </CustomSheet>
   );
 };
@@ -164,28 +163,28 @@ const St = {
   `,
 };
 
-const CustomSheet = styled(Sheet)`
-  height: 100%;
-  display: flex;
-  justify-content: center;
+// const CustomSheet = styled(Sheet)`
+//   height: 100%;
+//   display: flex;
+//   justify-content: center;
 
-  .react-modal-sheet-backdrop {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .react-modal-sheet-container {
-    padding: 2.5rem 0rem 7rem 0rem;
-    border-radius: 1rem !important;
-    left: initial !important;
-    max-width: 43rem;
-  }
-  // .react-modal-sheet-header
-  .react-modal-sheet-container > div:nth-child(1) {
-    display: flex;
-    justify-content: space-between !important;
-    margin-bottom: 2.8rem;
-    padding: 0rem 2.4rem 0rem 2.4rem;
-  }
-  .react-modal-sheet-drag-indicator {
-    display: none;
-  }
-`;
+//   .react-modal-sheet-backdrop {
+//     background-color: rgba(0, 0, 0, 0.6) !important;
+//   }
+//   .react-modal-sheet-container {
+//     padding: 2.5rem 0rem 7rem 0rem;
+//     border-radius: 1rem !important;
+//     left: initial !important;
+//     max-width: 43rem;
+//   }
+//   // .react-modal-sheet-header
+//   .react-modal-sheet-container > div:nth-child(1) {
+//     display: flex;
+//     justify-content: space-between !important;
+//     margin-bottom: 2.8rem;
+//     padding: 0rem 2.4rem 0rem 2.4rem;
+//   }
+//   .react-modal-sheet-drag-indicator {
+//     display: none;
+//   }
+// `;

From 75c0e5d97b6788983230235884fc1dd71ad05bef Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Thu, 22 Feb 2024 15:13:24 +0900
Subject: [PATCH 10/11] =?UTF-8?q?feat:=20RefundBottom=EC=97=90=20BottomShe?=
 =?UTF-8?q?et=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/BottomSheet.tsx            |  9 ++---
 src/components/Order/RefundBottom.tsx | 51 ++++++---------------------
 2 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/common/BottomSheet.tsx b/src/common/BottomSheet.tsx
index fcaf3c96..c5a5f759 100644
--- a/src/common/BottomSheet.tsx
+++ b/src/common/BottomSheet.tsx
@@ -64,6 +64,11 @@ const St = {
       height: calc(100% - 10.6rem) !important;
 
       left: initial !important;
+
+      & > div:first-child {
+        display: flex;
+        justify-content: space-between !important;
+      }
     }
     .detail-bottom-sheet {
       padding: 2.5rem 0rem 7rem 0rem;
@@ -79,10 +84,6 @@ const St = {
     .react-modal-sheet-header {
       height: 1.6rem !important;
     }
-    .react-modal-sheet-container > div:first-child {
-      display: flex;
-      justify-content: space-between !important;
-    }
     .react-modal-sheet-scroller {
       padding-bottom: 6rem;
     }
diff --git a/src/components/Order/RefundBottom.tsx b/src/components/Order/RefundBottom.tsx
index c42955de..e7e18c6a 100644
--- a/src/components/Order/RefundBottom.tsx
+++ b/src/components/Order/RefundBottom.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
-import Sheet from 'react-modal-sheet';
 import { IcCancelDark } from '../../assets/icon';
 import { REFUND_ORDER_POLICY } from '../../assets/data/REFUND_ORDER_POLICY';
+import { CustomSheet } from '../../common/BottomSheet';
 
 interface RefundBottomProps {
   isSheetOpen: boolean;
@@ -11,18 +11,18 @@ interface RefundBottomProps {
 const RefundBottom = ({ isSheetOpen, setSheetOpen }: RefundBottomProps) => {
   return (
     <CustomSheet isOpen={isSheetOpen} onClose={() => setSheetOpen(false)} disableDrag={true}>
-      <Sheet.Container>
-        <Sheet.Header disableDrag={false}>
+      <CustomSheet.Container className='text-bottom-sheet'>
+        <CustomSheet.Header disableDrag={false}>
           <St.Title>환불 정책</St.Title>
           <IcCancelDark onClick={() => setSheetOpen(false)} />
-        </Sheet.Header>
-        <Sheet.Content>
-          <Sheet.Scroller>
+        </CustomSheet.Header>
+        <CustomSheet.Content>
+          <CustomSheet.Scroller>
             <St.Text>{REFUND_ORDER_POLICY}</St.Text>
-          </Sheet.Scroller>
-        </Sheet.Content>
-      </Sheet.Container>
-      <Sheet.Backdrop onTap={() => setSheetOpen(false)} />
+          </CustomSheet.Scroller>
+        </CustomSheet.Content>
+      </CustomSheet.Container>
+      <CustomSheet.Backdrop onTap={() => setSheetOpen(false)} />
     </CustomSheet>
   );
 };
@@ -42,34 +42,3 @@ const St = {
     white-space: pre-wrap;
   `,
 };
-
-const CustomSheet = styled(Sheet)`
-  display: flex;
-  justify-content: center;
-
-  .react-modal-sheet-backdrop {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-  }
-  .react-modal-sheet-container {
-    padding: 2.5rem 2.4rem 0rem 2.4rem;
-    // 모달 높이 낮추기
-    height: calc(100% - 10.6rem) !important;
-    left: initial !important;
-    max-width: 43rem;
-
-    border-radius: 1rem 1rem 0rem 0rem !important;
-  }
-
-  .react-modal-sheet-container > div {
-    display: flex;
-    justify-content: space-between !important;
-  }
-
-  .react-modal-sheet-scroller {
-    padding-bottom: 6rem;
-  }
-
-  .react-modal-sheet-drag-indicator {
-    display: none;
-  }
-`;

From 71625666824a8d10fe0b7045346071f9e9f9ebf9 Mon Sep 17 00:00:00 2001
From: lydiacho <sheecho0804@ewhain.net>
Date: Sat, 24 Feb 2024 20:44:03 +0900
Subject: [PATCH 11/11] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Detail/DetailBottom.tsx | 26 --------------------------
 1 file changed, 26 deletions(-)

diff --git a/src/components/Detail/DetailBottom.tsx b/src/components/Detail/DetailBottom.tsx
index 139d1c9d..4c1c6ac9 100644
--- a/src/components/Detail/DetailBottom.tsx
+++ b/src/components/Detail/DetailBottom.tsx
@@ -162,29 +162,3 @@ const St = {
     color: ${({ theme }) => theme.colors.gray7};
   `,
 };
-
-// const CustomSheet = styled(Sheet)`
-//   height: 100%;
-//   display: flex;
-//   justify-content: center;
-
-//   .react-modal-sheet-backdrop {
-//     background-color: rgba(0, 0, 0, 0.6) !important;
-//   }
-//   .react-modal-sheet-container {
-//     padding: 2.5rem 0rem 7rem 0rem;
-//     border-radius: 1rem !important;
-//     left: initial !important;
-//     max-width: 43rem;
-//   }
-//   // .react-modal-sheet-header
-//   .react-modal-sheet-container > div:nth-child(1) {
-//     display: flex;
-//     justify-content: space-between !important;
-//     margin-bottom: 2.8rem;
-//     padding: 0rem 2.4rem 0rem 2.4rem;
-//   }
-//   .react-modal-sheet-drag-indicator {
-//     display: none;
-//   }
-// `;