Merge pull request #80 from DevKor-github/feat/#77/drawer

[#77] 바텀시트 구현구현 !

Author: halionaz

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.9.0",
     "date-fns": "^4.1.0",
     "mingcute_icon": "^2.9.6",
+    "motion": "^12.23.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.6.3",

panda.config.ts

@@ -44,6 +44,8 @@ export default defineConfig({
         },
         zIndex: {
           navigator: { value: 500 },
+          drawerBackLayer: { value: 600 },
+          drawerBody: { value: 700 },
         },
         sizes: PANDA_CSS_CONSTANTS,
         spacing: PANDA_CSS_CONSTANTS,

src/common/components/Drawer/BackLayer.tsx

@@ -0,0 +1,25 @@
+import { motion } from 'motion/react';
+
+import * as s from './style.css';
+
+interface BackLayerProps {
+  close: () => void;
+  hasBackdrop: boolean;
+}
+const BackLayer = ({ close, hasBackdrop }: BackLayerProps) => {
+  return (
+    <motion.div
+      className={s.BackLayerStyle}
+      variants={{
+        opened: { opacity: hasBackdrop ? 1 : 0 },
+        closed: { opacity: 0 },
+      }}
+      initial={'closed'}
+      animate={'opened'}
+      exit={'closed'}
+      onClick={close}
+    />
+  );
+};
+
+export default BackLayer;

src/common/components/Drawer/DrawerBody.tsx

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';
+import { cx } from '@styled-system/css';
+import { motion, type PanInfo } from 'framer-motion';
+
+import * as s from './style.css';
+
+interface DrawerBodyProps extends PropsWithChildren {
+  title: string;
+  description?: string;
+  close: () => void;
+}
+
+const DrawerBody = ({ children, title, description, close }: DrawerBodyProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    // UI 페인팅 이후 계산
+    if (contentRef.current) {
+      setHeight(Math.min(contentRef.current.clientHeight, window.innerHeight));
+    }
+  }, [children]);
+
+  const onDragEnd = useCallback(
+    (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+      const offsetThreshold = 150;
+      const deltaThreshold = 5;
+
+      const isOverOffsetThreshold = Math.abs(info.offset.y) > offsetThreshold;
+      const isOverDeltaThreshold = Math.abs(info.delta.y) > deltaThreshold;
+
+      const isOverThreshold = isOverOffsetThreshold || isOverDeltaThreshold;
+
+      if (!isOverThreshold) return;
+
+      if (info.offset.y >= 0) close();
+    },
+    [close],
+  );
+
+  return (
+    <motion.div
+      key="drawer_body"
+      className={s.Container}
+      drag={'y'}
+      dragConstraints={{ top: 0, bottom: 0 }}
+      transition={{ duration: 0.2 }}
+      dragElastic={0.4}
+      variants={{
+        opened: { top: `calc(100dvh - ${height}px)` },
+        closed: { top: '100dvh' },
+      }}
+      initial={'closed'}
+      animate={'opened'}
+      exit={'closed'}
+      onDragEnd={onDragEnd}
+    >
+      <header className={s.Header}>
+        <div className={s.HeaderTitle}>
+          <span className={s.Title}>{title}</span>
+          {description && <span className={s.Description}>{description}</span>}
+        </div>
+        <button className={cx('mgc_close_line', s.CloseButton)} onClick={close} />
+      </header>
+      <div ref={contentRef} className={s.Content}>
+        {children}
+      </div>
+    </motion.div>
+  );
+};
+
+export default DrawerBody;

src/common/components/Drawer/index.tsx

@@ -0,0 +1,29 @@
+import { AnimatePresence } from 'motion/react';
+import { type ReactNode } from 'react';
+
+import BackLayer from '@/common/components/Drawer/BackLayer';
+import DrawerBody from '@/common/components/Drawer/DrawerBody';
+import type { DrawerState } from '@/common/hooks/useDrawer';
+
+interface DrawerProps {
+  title: string;
+  description?: string;
+  drawerState: DrawerState;
+  children: ReactNode;
+}
+const Drawer = ({ drawerState, title, description, children }: DrawerProps) => {
+  return (
+    <AnimatePresence>
+      {drawerState.isOpen && (
+        <>
+          <BackLayer close={drawerState.close} hasBackdrop={drawerState.hasBackdrop} />
+          <DrawerBody close={drawerState.close} title={title} description={description}>
+            {children}
+          </DrawerBody>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Drawer;

src/common/components/Drawer/style.css.ts

@@ -0,0 +1,65 @@
+import { css } from '@styled-system/css';
+
+export const BackLayerStyle = css({
+  pos: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  bg: '#0000007D',
+  zIndex: 'drawerBackLayer',
+});
+
+export const Container = css({
+  pos: 'fixed',
+  top: '100dvh',
+  left: 0,
+  w: 'full',
+  h: '100dvh',
+  bgColor: 'systemGray6',
+  roundedTop: '10px',
+  willChange: 'transform',
+  zIndex: 'drawerBody',
+  display: 'flex',
+  flexDir: 'column',
+  borderTop: '1px solid {colors.systemGray4}',
+  boxShadow: '0px 0px 30px 0px rgba(0, 0, 0, 0.25)',
+  pt: '1.5rem',
+  pb: '2.625rem',
+});
+
+export const Header = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  px: '1rem',
+});
+
+export const HeaderTitle = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.625rem',
+  lineHeight: 'normal',
+});
+
+export const Title = css({
+  color: '100',
+  fontSize: '1rem',
+  fontWeight: 500,
+  letterSpacing: '-0.04rem',
+});
+
+export const Description = css({
+  color: '54',
+  fontSize: '0.875rem',
+  fontWeight: 400,
+  letterSpacing: '-0.035rem',
+});
+
+export const CloseButton = css({
+  fontSize: '1rem',
+  color: '80',
+  cursor: 'pointer',
+});
+
+export const Content = css({ w: 'full', h: 'fit-content' });

src/common/hooks/useDrawer.tsx

@@ -0,0 +1,37 @@
+import { useState } from 'react';
+
+interface DrawerOption {
+  hasBackdrop?: boolean;
+}
+
+export interface DrawerState {
+  isOpen: boolean;
+  close: () => void;
+  hasBackdrop: boolean;
+}
+
+/**
+ * 쓰고 싶다면 useDrawer에서 drawerState를 받아서
+ * Drawer 컴포넌트에 전달해주시면 되고
+ * 그담에 open(), close()로 제어하면 됨
+ */
+const useDrawer = (option: DrawerOption = {}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+
+  const drawerState: DrawerState = {
+    isOpen,
+    close,
+    hasBackdrop: option.hasBackdrop ?? true,
+  };
+
+  return {
+    open,
+    close,
+    drawerState,
+  };
+};
+
+export default useDrawer;

src/features/home/components/SearchControls/index.tsx

@@ -1,10 +1,15 @@
 import SelectButton from '@/common/components/SelectButton';
 import * as s from './style.css';
+import useDrawer from '@/common/hooks/useDrawer';
+import { css } from '@styled-system/css';
+import Drawer from '@/common/components/Drawer';
 
 interface Props {
   itemCounts: number;
 }
 const SearchControls = ({ itemCounts }: Props) => {
+  const { open, drawerState } = useDrawer();
+
   return (
     <div className={s.Container}>
       <div className={s.ResultBar}>
@@ -13,12 +18,22 @@ const SearchControls = ({ itemCounts }: Props) => {
       </div>
       <div className={s.SelectButtonContainer}>
         {/* TODO: 디자인 적용, 필터 로직 추가 */}
-        <SelectButton active={false}>종목</SelectButton>
+        <SelectButton
+          active={false}
+          onClick={() => {
+            open();
+          }}
+        >
+          종목
+        </SelectButton>
         <SelectButton active={false}>사이즈</SelectButton>
         <SelectButton active={false}>대여/판매</SelectButton>
         <SelectButton active={false}>가격순</SelectButton>
         <SelectButton active={false}>색상</SelectButton>
       </div>
+      <Drawer title="필터" description="필터를 선택해주삼" drawerState={drawerState}>
+        <div className={css({ height: '10rem', px: '1rem', pt: '1rem' })}>안녕하세요 호호</div>
+      </Drawer>
     </div>
   );
 };