Radix UI

npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip

// MUI 스타일 - props가 많고 커스텀이 어렵다
<Dialog
  open={open}
  onClose={handleClose}
  title="삭제 확인"
  content="정말 삭제하시겠습니까?"
  actions={<Button onClick={handleDelete}>삭제</Button>}
  maxWidth="sm"
  fullWidth
  disableEscapeKeyDown
/>

import * as Dialog from "@radix-ui/react-dialog";

<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog.Trigger asChild>
    <button className="btn-danger">삭제</button>
  </Dialog.Trigger>

  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6 w-96">
      <Dialog.Title className="text-lg font-bold">
        삭제 확인
      </Dialog.Title>
      <Dialog.Description className="mt-2 text-gray-600">
        정말 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
      </Dialog.Description>

      <div className="mt-4 flex justify-end gap-2">
        <Dialog.Close asChild>
          <button className="btn-secondary">취소</button>
        </Dialog.Close>
        <button className="btn-danger" onClick={handleDelete}>
          삭제
        </button>
      </div>

      <Dialog.Close asChild>
        <button className="absolute top-2 right-2" aria-label="닫기">
          ✕
        </button>
      </Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

// <button> 태그가 렌더링됨
<Dialog.Trigger>열기</Dialog.Trigger>

// asChild로 자식 요소에 Radix의 동작을 위임
<Dialog.Trigger asChild>
  <Button variant="primary" size="lg">열기</Button>
</Dialog.Trigger>

// Slot의 동작 원리 (단순화)
function Slot({ children, ...slotProps }) {
  // 자식 요소에 slotProps를 병합해서 렌더링
  return cloneElement(children, mergeProps(slotProps, children.props));
}

// ❌ 잘못된 사용
<Dialog.Trigger asChild>
  <Icon />
  <span>열기</span>
</Dialog.Trigger>

// ✅ 하나의 요소로 감싸기
<Dialog.Trigger asChild>
  <button>
    <Icon />
    <span>열기</span>
  </button>
</Dialog.Trigger>

<Dialog.Content>
  <Dialog.Title>설정</Dialog.Title>
  <Dialog.Description>앱 설정을 변경합니다.</Dialog.Description>
</Dialog.Content>

<Dialog.Content
  onOpenAutoFocus={(e) => {
    // 기본 포커스 동작 변경 가능
    e.preventDefault();
    emailInputRef.current?.focus();
  }}
  onCloseAutoFocus={(e) => {
    // 닫힐 때 포커스 대상 변경
    e.preventDefault();
    triggerRef.current?.focus();
  }}
>

// 비제어 - 기본값만 설정하면 Radix가 알아서 관리
<Dialog.Root defaultOpen={false}>
  <Dialog.Trigger>열기</Dialog.Trigger>
  <Dialog.Content>내용</Dialog.Content>
</Dialog.Root>

<Accordion.Root type="single" defaultValue="item-1">
  <Accordion.Item value="item-1">...</Accordion.Item>
  <Accordion.Item value="item-2">...</Accordion.Item>
</Accordion.Root>

const [open, setOpen] = useState(false);

// 제어 - 상태를 직접 관리
<Dialog.Root open={open} onOpenChange={setOpen}>
  <Dialog.Trigger>열기</Dialog.Trigger>
  <Dialog.Content>
    <form onSubmit={(e) => {
      e.preventDefault();
      submitForm();
      setOpen(false); // 폼 제출 후 수동으로 닫기
    }}>
      ...
    </form>
  </Dialog.Content>
</Dialog.Root>

<Dialog.Portal>
  <Dialog.Overlay />
  <Dialog.Content>...</Dialog.Content>
</Dialog.Portal>

<Dialog.Portal container={customContainerRef.current}>
  ...
</Dialog.Portal>

/* Dialog Overlay */
.dialog-overlay[data-state="open"] {
  animation: fadeIn 200ms ease-out;
}
.dialog-overlay[data-state="closed"] {
  animation: fadeOut 200ms ease-in;
}

/* Dialog Content */
.dialog-content[data-state="open"] {
  animation: slideIn 200ms ease-out;
}
.dialog-content[data-state="closed"] {
  animation: slideOut 200ms ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideIn {
  from { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

<Dialog.Overlay className="
  fixed inset-0 bg-black/50
  data-[state=open]:animate-fadeIn
  data-[state=closed]:animate-fadeOut
" />

<Dialog.Content className="
  fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
  bg-white rounded-lg p-6
  data-[state=open]:animate-contentShow
  data-[state=closed]:animate-contentHide
" />

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        fadeIn: {
          from: { opacity: "0" },
          to: { opacity: "1" },
        },
        contentShow: {
          from: {
            opacity: "0",
            transform: "translate(-50%, -48%) scale(0.96)",
          },
          to: {
            opacity: "1",
            transform: "translate(-50%, -50%) scale(1)",
          },
        },
      },
      animation: {
        fadeIn: "fadeIn 200ms ease-out",
        contentShow: "contentShow 200ms ease-out",
      },
    },
  },
};

<Dialog.Portal forceMount>
  <Dialog.Overlay
    className={cn(
      "fixed inset-0 bg-black/50",
      open ? "animate-fadeIn" : "animate-fadeOut"
    )}
  />
  <Dialog.Content
    className={cn(
      "fixed ...",
      open ? "animate-slideIn" : "animate-slideOut"
    )}
  />
</Dialog.Portal>

import { AnimatePresence, motion } from "framer-motion";

<Dialog.Root open={open} onOpenChange={setOpen}>
  <AnimatePresence>
    {open && (
      <Dialog.Portal forceMount>
        <Dialog.Overlay asChild forceMount>
          <motion.div
            className="fixed inset-0 bg-black/50"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          />
        </Dialog.Overlay>
        <Dialog.Content asChild forceMount>
          <motion.div
            className="fixed top-1/2 left-1/2 ..."
            initial={{ opacity: 0, scale: 0.95, x: "-50%", y: "-48%" }}
            animate={{ opacity: 1, scale: 1, x: "-50%", y: "-50%" }}
            exit={{ opacity: 0, scale: 0.95, x: "-50%", y: "-48%" }}
          />
        </Dialog.Content>
      </Dialog.Portal>
    )}
  </AnimatePresence>
</Dialog.Root>

npx shadcn@latest add dialog

// components/ui/dialog.tsx (생성된 파일)
import * as DialogPrimitive from "@radix-ui/react-dialog";

const DialogOverlay = React.forwardRef<...>(({ className, ...props }, ref) => (
  <DialogPrimitive.Overlay
    ref={ref}
    className={cn(
      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in ...",
      className
    )}
    {...props}
  />
));

// Headless UI의 Transition
<Transition show={open} enter="transition-opacity" enterFrom="opacity-0" ...>
  <Dialog.Panel>...</Dialog.Panel>
</Transition>

// React Aria는 Hook 기반
const { buttonProps } = useButton(props, ref);
return <button {...buttonProps} ref={ref}>{children}</button>;

import * as Tooltip from "@radix-ui/react-tooltip";

function App() {
  return (
    <Tooltip.Provider delayDuration={300} skipDelayDuration={100}>
      {children}
    </Tooltip.Provider>
  );
}

<Dialog.Root>
  <Dialog.Content>
    {/* Dialog 안에서 AlertDialog */}
    <AlertDialog.Root>
      <AlertDialog.Trigger>삭제</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay className="z-[60]" />
        <AlertDialog.Content className="z-[60]">
          정말 삭제?
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  </Dialog.Content>
</Dialog.Root>