team-offonoff · chaeyoung103 · Oct 11, 2023 · Oct 4, 2023 · Oct 4, 2023 · Oct 4, 2023
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="portal-root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@types/styled-components": "^5.1.28",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",

diff --git a/src/components/BottomSheet/BottomSheet.stories.tsx b/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import BottomSheet from './BottomSheet';
+
+const meta = {
+  title: 'BottomSheet',
+  component: BottomSheet,
+  parameters: {
+    // layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    // backgroundColor: { control: 'color' },
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    // primary: true,
+    // label: 'Button',`
+  },
+};
diff --git a/src/components/BottomSheet/BottomSheet.styles.tsx b/src/components/BottomSheet/BottomSheet.styles.tsx
@@ -0,0 +1,35 @@
+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;
+`;
+
+// display: "inline-block",
+// backgroundColor: "white",
+// width: 320,
+// height: 768,
+// border: "1px solid #E0E0E0",
+// boxShadow:
+//   "0px 2px 5px rgba(0, 0, 0, 0.06), 0px 2px 13px rgba(0, 0, 0, 0.12)",
+// borderRadius: "13px 13px 0px 0px",
+// overflow: "hidden",
+// zIndex: 1000
+
+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;
+  box-shadow:
+    0 2px 5px rgb(0 0 0 / 6%),
+    0 2px 13px rgb(0 0 0 / 12%);
+`;
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,65 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { motion, PanInfo, useAnimation, useDragControls, useMotionValue } from 'framer-motion';
+
+import ReactPortal from '@components/Portal/Portal';
+
+import { SheetContainer, Sheet } from './BottomSheet.styles';
+
+interface BottomSheetProps {
+  open: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  children: React.ReactNode;
+}
+
+const BottomSheet = ({ open, setIsOpen, children }: BottomSheetProps) => {
+  const hiddenHeight = 240;
+
+  const constraintsRef = useRef(null);
+  const animationControls = useAnimation();
+  const y = useMotionValue(0);
+
+  const onClose = () => setIsOpen(false);
+
+  const onOpen = () => setIsOpen(true);
+
+  const onDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    console.log('🚀 ~ file: BottomSheet.tsx:26 ~ onDragEnd ~ info:', info);
+    if (info.velocity.y < 0) {
+      animationControls.start('visible');
+    } else {
+      animationControls.start('hidden');
+    }
+  };
+
+  return (
+    <ReactPortal>
+      <SheetContainer ref={constraintsRef}>
+        <Sheet
+          layout
+          drag="y"
+          dragConstraints={{ top: 0 }}
+          dragElastic={0}
+          onDragEnd={onDragEnd}
+          initial="hidden"
+          animate={animationControls}
+          transition={{
+            type: 'spring',
+            damping: 40,
+            stiffness: 400,
+            bounce: 0,
+          }}
+          variants={{
+            visible: { y: 100 },
+            hidden: { y: `calc(100% - ${hiddenHeight}px)` },
+            // closed: { y: '100%' },
+          }}
+          style={{ y }}
+        >
+          {children}
+        </Sheet>
+      </SheetContainer>
+    </ReactPortal>
+  );
+};
+
+export default BottomSheet;
diff --git a/src/components/Layout/Layout.styles.tsx b/src/components/Layout/Layout.styles.tsx
@@ -2,6 +2,8 @@ import { styled } from 'styled-components';
 
 export const Main = styled.main`
   position: relative;
+  display: flex;
+  flex-direction: column;
   max-width: 512px;
   height: 100vh;
   margin: 0 auto;
@@ -26,12 +28,13 @@ export const Header = styled.header`
 export const HeaderSection = styled.div``;
 
 export const OutletContainer = styled.div`
-  height: 100%;
+  flex: 1;
 `;
 
 export const NavigationContainer = styled.div`
   position: fixed;
   bottom: 0;
+  z-index: 1200;
   width: 100%;
   max-width: 512px;
   margin: 0 auto;

diff --git a/src/components/Portal/Portal.tsx b/src/components/Portal/Portal.tsx
@@ -0,0 +1,16 @@
+import * as ReactDOM from 'react-dom';
+import { styled } from 'styled-components';
+
+const PortalContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  overflow: hidden;
+`;
+
+const ReactPortal = ({ children }: { children: React.ReactNode }) => {
+  const rootElement = document.getElementById('portal-root') as HTMLElement;
+  return ReactDOM.createPortal(<PortalContainer>{children}</PortalContainer>, rootElement);
+};
+
+export default ReactPortal;
diff --git a/src/routes/Home/Home.styles.tsx b/src/routes/Home/Home.styles.tsx
@@ -51,7 +51,7 @@ export const NavigateButton = styled.button`
   background-color: transparent;
 `;
 
-export const SkipButtonContainer = styled.button`
+export const SkipButtonContainer = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/src/routes/Home/Home.tsx b/src/routes/Home/Home.tsx
@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 
+import BottomSheet from '@components/BottomSheet/BottomSheet';
+
 import {
   BestTopicCotainer,
   BestTopicTitle,
@@ -21,6 +23,8 @@ import { NextIcon } from '@icons/index';
 import useTimer from '@hooks/useTimer';
 
 const Home = () => {
+  const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(true);
+
   const profileName = '체리체리체리체리';
 
   const topic = '10년전 또는 후로 갈 수 있다면?';
@@ -66,6 +70,9 @@ const Home = () => {
           <b>{profileName}</b> 님의 토픽
         </UserProfileName>
       </UserInfoContainer>
+      <BottomSheet open={isOpenBottomSheet} setIsOpen={setIsOpenBottomSheet}>
+        <div style={{ backgroundColor: 'white', height: '100%' }}>I'm BottomSheet</div>
+      </BottomSheet>
     </Container>
   );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -1174,13 +1174,25 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
 "@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
+"@emotion/[email protected]":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
@@ -4950,6 +4962,15 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
+framer-motion@^10.16.4:
+  version "10.16.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.4.tgz#30279ef5499b8d85db3a298ee25c83429933e9f8"
+  integrity sha512-p9V9nGomS3m6/CALXqv6nFGMuFOxbWsmaOrdmhyQimMIlLl3LC7h7l86wge/Js/8cRu5ktutS/zlzgR7eBOtFA==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 [email protected]:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"