fix: 바텀시트 ui 약간 수정

team-offonoff · Oct 18, 2023 · a111395 · a111395
1 parent b2de73e
commit a111395
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/BottomSheet/BottomSheet.styles.tsx b/src/components/BottomSheet/BottomSheet.styles.tsx
@@ -2,14 +2,13 @@ import { motion } from 'framer-motion';
 import { styled } from 'styled-components';
 
 export const SheetContainer = styled.div`
-  position: fixed;
-  inset: 0 0 0 calc((100vw - 512px) / 2);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   width: 100%;
   max-width: 512px;
-  overflow: hidden;
+  padding: 100px 0 0;
+  margin: 0 auto;
 `;
 
 // display: "inline-block",
@@ -27,8 +26,9 @@ export const Sheet = styled(motion.div)`
   z-index: 1000;
   display: inline-block;
   height: calc(100vh - 100px);
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
+  background-color: #3c3457;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
   box-shadow:
     0 2px 5px rgb(0 0 0 / 6%),
     0 2px 13px rgb(0 0 0 / 12%);

diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
@@ -71,7 +71,7 @@ const Home = () => {
         </UserProfileName>
       </UserInfoContainer>
       <BottomSheet open={isOpenBottomSheet} setIsOpen={setIsOpenBottomSheet}>
-        <div style={{ backgroundColor: 'white', height: '100%' }}>I'm BottomSheet</div>
+        <div style={{ backgroundColor: 'transparent', height: '100%' }}>I'm BottomSheet</div>
       </BottomSheet>
     </Container>
   );