nextjs shadcn/ui Drawer 방향 전환하기

 

shadcn ui 에서 제공하는 Drawer 

Drawer

 

 

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>