๊ฐœ๋ฐœ/Next.js

nextjs shadcn/ui Drawer ๋ฐฉํ–ฅ ์ „ํ™˜ํ•˜๊ธฐ

๋ฐ(Ming) ๐Ÿˆ‍โฌ› 2024. 6. 13. 14:42
728x90
๋ฐ˜์‘ํ˜•

 

shadcn ui ์—์„œ ์ œ๊ณตํ•˜๋Š” Drawer 

 

Drawer

A drawer component for React.

ui.shadcn.com

 

 

shadcn ui ์—์„œ ์ œ๊ณตํ•˜๋Š” Drawer ์˜ ๋ฐฉํ–ฅ์€ ์•„๋ž˜์—์„œ ์œ„๋กœ ์˜ฌ๋ผ์˜จ๋‹ค. 

 


ํŒ์—… ํ˜•ํƒœ๋กœ ๋„์šฐ๋Š” ๊ฒƒ๋„ ์˜ˆ์‹œ๋กœ ๋ณด์—ฌ์ฃผ๊ธฐ๋Š” ํ•˜์ง€๋งŒ ๋‚˜๋Š” ์ปค์Šคํ…€ํ•ด์„œ ์˜ค๋ฅธ์ชฝ์— ์Šค๋ฌด์Šค~ ํ•˜๊ฒŒ ๋‚˜์˜ค๊ฒŒ ๊ตฌํ˜„ํ•ด์•ผํ•˜๋Š” ์ƒํ™ฉ์ด์˜€๋‹ค. 

๊ทธ๋ฆฌ๊ณ  ํ˜„์žฌ ์ƒํ™ฉ์—์„œ๋Š” ์˜ค๋ฅธ์ชฝ์—์„œ ๋‚˜์˜ค๋Š”๊ฑฐ์ง€๋งŒ ๋””์ž์ธ์ด ๋ฐ”๋€Œ๋ฉด ๋˜ ์–ด๋–ป๊ฒŒ ๋ ์ง€ ๋ชจ๋ฅด๋Š” ์ƒํ™ฉ์ด๊ธฐ ๋•Œ๋ฌธ์— direction์„ ๋ณ€์ˆ˜๋กœ ๋„ฃ์–ด์„œ

๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉํ–ฅ์„ ์ฐพ์•˜๋‹ค. 

 

 

shadcn/ui๋Š” ๋ฒˆ๋“ค๋˜์ง€ ์•Š์€ ์ปดํฌ๋„ŒํŠธ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ํ”„๋กœ์ ํŠธ์— ์˜์กด์„ฑ์œผ๋กœ ์ถ”๊ฐ€ํ•˜์ง€ ์•Š๊ณ , ๋ง ๊ทธ๋Œ€๋กœ ๋ณต๋ถ™ํ•ด์„œ ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ๋ฅผ ์˜จ์ „ํžˆ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด ํฌ์ธํŠธ๊ฐ€ ์ค‘์š”ํ•˜๋‹ค. ๋””ํŽœ๋˜์‹œ์— ๋“ค์–ด๊ฐ€๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ in Project๊ฐ€ ๋˜๊ธฐ๋•Œ๋ฌธ์— components ๋””๋ ‰ํ† ๋ฆฌ๊ฐ€ ์ƒ๊ธฐ๊ณ  ๊ทธ ์•ˆ์— drawer ํŒŒ์ผ์„ ์ฐพ์„ ์ˆ˜ ์žˆ๋‹ค. ์ปค์Šคํ…€ํ•˜๊ธฐ ์ข‹๋‹ค! 

 

 

direction ์ด๋ผ๋Š” props๋ฅผ ๋งŒ๋“ค์–ด์„œ ๋„˜๊ฒจ์ฃผ๋Š” ๋ฐฉ์‹์œผ๋กœ ์‚ฌ์šฉํ•  ๊ฒƒ์ด๊ธฐ๋•Œ๋ฌธ์— context๋ฅผ ์ƒ์„ฑํ•ด์ค€๋‹ค

// drawer.ts

const DrawerContext = React.createContext<{direction?: "top" | "bottom" | "right" | "left"
}>({});

 

๊ทธ๋ฆฌ๊ณ  ์ƒ์„ฑํ•œ context provider๋กœ root๋ฅผ ๊ฐ์‹ผ๋‹ค

// drawer.ts

const Drawer = ({
  shouldScaleBackground = true,
  ...props
}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (

/////////// ์š”๊ธฐ์— ๋„ฃ์–ด์ฃผ์„ธ์š”~ //////////
  <DrawerContext.Provider value={{direction: props.direction}}>
  <DrawerPrimitive.Root
    shouldScaleBackground={shouldScaleBackground}
    {...props}
  />
  </DrawerContext.Provider>
)

 

drawer.ts ์ฝ”๋“œ๋ฅผ ์ฐฌ์ฐฌํžˆ ๋ณด๋ฉด DrawerContent ๋ถ€๋ถ„ ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค. 

useContext๋ฅผ ์‚ฌ์šฉํ•ด์„œ dirction์„ ์ƒ์„ฑํ•ด์ฃผ๊ณ  

ui ๋ถ€๋ถ„์ธ className ๋ถ€๋ถ„์— dirction์— ๋”ฐ๋ผ์„œ ๋ณ€๊ฒฝ ๋  UI ์„ค์ •์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค. 

css๋Š” tailwind css ๋ฒ•์น™์„ ๋”ฐ๋ฅธ๋‹ค๋Š” ๊ฑธ ์žŠ์ง€ ๋ง์ž! 

 

๊ณตํ†ต์ ์œผ๋กœ ๋“ค์–ด๊ฐ€๋Š” ๊ฑฐ ๋ง๊ณ  bottm-0์œผ๋กœ ์‹œ์ž‘ํ•˜๋Š”๊ฒŒ ์•„๋ž˜์—์„œ ์‹œ์ž‘๋˜๋Š” ๊ฒƒ!

๊ทธ๋ฆฌ๊ณ  ๋ฐฉํ–ฅ์ด ์˜ค๋ฅธ์ชฝ / ์™ผ์ชฝ ๋“ค์–ด๊ฐ€๋ฉด h์ด full์ด ๋˜์–ด์•ผ ํ™”๋ฉด์— ๋‹ค ๋“ค์–ด์ฐฌ๋‹ค. ๊ทธ ์  ์žŠ์ง€ ๋ง์ž! 

const DrawerContent = React.forwardRef<
  React.ElementRef<typeof DrawerPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
>(({ className, children, ...props }, ref) => {
// ์š”๊ธฐ 
  const { direction } = React.useContext(DrawerContext);
  return (
  <DrawerPortal>
    <DrawerOverlay />
    <DrawerPrimitive.Content
      ref={ref}
      ///// ์š”๊ธฐ 
      className={cn(
        "fixed z-50 flex h-auto flex-col border bg-background",
        (!direction || direction === "bottom" ) && "inset-x-0 bottom-0 mt-24 rounded-t-[10px]",
        direction === "right" && "top-0 right-0 w-screen max-w-80 h-full",
        direction === "left" && "top-0 left-0 w-screen max-w-80 h-full",
        direction === "top" && "inset-x-0 top-0",
        className
      )}
      {...props}
    >
      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
      {children}
    </DrawerPrimitive.Content>
  </DrawerPortal>
)})
DrawerContent.displayName = "DrawerContent"

 

๊ทธ๋Ÿฌ๋ฉด ์ด์ œ ์ค€๋น„์™„๋ฃŒ๋‹ค 

Drawer์„ ์‹ค์ œ๋กœ ์“ฐ๋Š” ๊ณณ์— ๊ฐ€์„œ dirction์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค! 

         <Drawer direction="right">
            <DrawerTrigger>
              <Menu />
            </DrawerTrigger>
            <DrawerContent>
              <NavigationMenu orientation="vertical" className="items-start">
                <NavigationMenuList className="h-full flex-col items-start space-x-0">
                  {menuDisplay(menuList)}
                </NavigationMenuList>
              </NavigationMenu>
            </DrawerContent>
          </Drawer>

 

 

 

 

 

 

 

 

 

 

 

 

728x90