Responsive Dialog

모바일에서는 Drawer로, 데스크톱에서는 Dialog로 자동 전환되는 반응형 대화상자 컴포넌트입니다.

examples/responsive-dialog.tsx

"use client";import { useState } from "react";import { Input } from "@/components/ui/input";import { Button } from "@/components/ui/button";import { ResponsiveDialog } from "@/registry/default/components/responsive-dialog";export function ResponsiveDialogExample() {  const [open, setOpen] = useState(false);  return (    <>      <Button onClick={() => setOpen(true)}>프로필 수정하기</Button>      <ResponsiveDialog        isOpen={open}        setIsOpen={setOpen}        title="프로필 수정하기"        description="프로필 정보를 수정하고 저장하세요."      >        <div className="flex flex-col gap-4">          <Input placeholder="이름" />          <Input placeholder="이메일" />          <Button>저장</Button>        </div>      </ResponsiveDialog>    </>  );}

설치

pnpm

pnpm dlx shadcn@latest add @chaesunbak/responsive-dialog

npm

npx shadcn@latest add @chaesunbak/responsive-dialog

다음 코드를 프로젝트에 복사/붙혀넣기 하세요.

components/responsive-dialog.tsx

import type { ReactNode, Dispatch, SetStateAction } from "react";import { Button } from "@/components/ui/button";import {  Dialog,  DialogContent,  DialogDescription,  DialogHeader,  DialogTitle,} from "@/components/ui/dialog";import {  Drawer,  DrawerClose,  DrawerContent,  DrawerFooter,  DrawerHeader,  DrawerTitle,} from "@/components/ui/drawer";import { useIsMobile } from "@/hooks/use-mobile";export function ResponsiveDialog({  children,  isOpen,  setIsOpen,  title,  description,}: {  children: ReactNode;  isOpen: boolean;  setIsOpen: Dispatch<SetStateAction<boolean>>;  title: string;  description?: string;}) {  const isMobile = useIsMobile();  if (isMobile) {    return (      <Drawer open={isOpen} onOpenChange={setIsOpen}>        <DrawerContent>          <DrawerHeader className="text-left">            <DrawerTitle>{title}</DrawerTitle>            {description && (              <DialogDescription>{description}</DialogDescription>            )}          </DrawerHeader>          <div className="px-4">{children}</div>          <DrawerFooter className="pt-2">            <DrawerClose asChild>              <Button variant="outline">닫기</Button>            </DrawerClose>          </DrawerFooter>        </DrawerContent>      </Drawer>    );  }  return (    <Dialog open={isOpen} onOpenChange={setIsOpen}>      <DialogContent className="sm:max-w-[425px]">        <DialogHeader>          <DialogTitle>{title}</DialogTitle>          {description && <DialogDescription>{description}</DialogDescription>}        </DialogHeader>        {children}      </DialogContent>    </Dialog>  );}

사용법

import { ResponsiveDialog } from "@/components/responsive-dialog";

<ResponsiveDialog
  isOpen={open}
  setIsOpen={setOpen}
  title="Edit profile"
  description="Make changes to your profile here. Click save when you're done."
>
  <button>open dialog</button>
</ResponsiveDialog>

인터페이스

ResponsiveDialog

속성	타입	기본값	설명
`isOpen`	`boolean`	-	대화상자의 열림 상태입니다.
`setIsOpen`	`Dispatch<SetStateAction<boolean>>`	-	대화상자의 열림 상태를 변경하는 함수입니다.
`title`	`string`	-	대화상자의 제목입니다.
`description`	`string`	`undefined`	대화상자의 설명입니다.
`children`	`ReactNode`	-	대화상자 내부에 렌더링할 요소입니다.

설치

사용법

인터페이스

ResponsiveDialog

On this page