Modal Patterns

import { useDialog } from "@vortex/ui-icignal"
 
function Example() {
  const { alert, confirm, toast } = useDialog()
 
  const handleDelete = async () => {
    const result = await confirm({
      title: "삭제 확인",
      description: "정말 삭제하시겠습니까?",
      confirmText: "삭제",
      confirmVariant: "destructive",
    })
 
    if (result) {
      // 삭제 로직
      toast("삭제되었습니다")
    }
  }
 
  return <button onClick={handleDelete}>삭제</button>
}

// 개별 다이얼로그에서 제어
const result = await confirm({
  title: "저장 확인",
  description: "변경사항을 저장하시겠습니까?",
  buttonOrder: "confirm-cancel", // 확인 | 취소
})
 
// 전역 기본값 설정 (DialogProvider)
<DialogProvider buttonOrder="confirm-cancel">
  {children}
</DialogProvider>

import { useState } from "react"
import { Modal, Button } from "@vortex/ui-foundation"
 
function Example() {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <Button onClick={() => setOpen(true)}>열기</Button>
      <Modal
        open={open}
        onOpenChange={setOpen}
        title="모달 제목"
        description="모달 설명"
        footer={<Button onClick={() => setOpen(false)}>닫기</Button>}
      >
        <p>모달 내용</p>
      </Modal>
    </>
  )
}

<Modal
  open={open}
  onOpenChange={setOpen}
  title="닫기 버튼이 있는 모달"
  showCloseButton
>
  <p>X 버튼으로 닫을 수 있습니다.</p>
</Modal>

overlay z-index = 40 + stackIndex × 20
content z-index = 50 + stackIndex × 20

modal[i].stackIndex   = i                                    // visibleModalItems 내 순번
lookup[i].stackIndex  = visibleModalItems.length + i         // modal 위에 항상 쌓임
alert/confirm[i]      = visibleModalItems.length + visibleLookupItems.length + i
loading               = 9999 (최상단 고정)

[detail-modal: 직접 <Modal>로 띄움 → store에 없음]
└── [lookup1: useDialog().lookup() 호출]
    ├── i.length=0, c=0 → stackIndex=0
    ├── overlay z=40, content z=50  ← 부모와 같은 층!
    └── 결과: lookup의 dim이 부모 modal 박스에 가려서 화면 가운데에서 안 보임
              부모 trigger가 클릭 가능해 lookup이 중복 호출됨

// page.tsx - 부모 모달을 직접 <Modal>로 그린 상태에서
//            그 안에서 useDialog().lookup() 호출
function DetailPage() {
  const [open, setOpen] = useState(false)
  const { lookup } = useDialog()
 
  return (
    <>
      <Button onClick={() => setOpen(true)}>상세 보기</Button>
      <Modal open={open} onOpenChange={setOpen} title="상세">
        <Button
          onClick={async () => {
            // ⚠️ 이 lookup은 부모 modal을 인식하지 못해 z-index가 어긋남
            const user = await lookup({ ... })
          }}
        >
          담당자 선택
        </Button>
      </Modal>
    </>
  )
}

function DetailPage() {
  const { modal, lookup } = useDialog()
 
  const openDetail = () =>
    modal({
      title: "상세",
      content: ({ close }) => (
        <Button
          onClick={async () => {
            const user = await lookup({ ... })
            // ...
          }}
        >
          담당자 선택
        </Button>
      ),
    })
 
  return <Button onClick={openDetail}>상세 보기</Button>
}

// Before — useState로 open 토글 + 직접 <Modal>
function DetailPage({ rid }: { rid: string }) {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <Button onClick={() => setOpen(true)}>상세 보기</Button>
      <Modal
        open={open}
        onOpenChange={setOpen}
        type="center"
        title="상세"
        description="레코드를 확인하세요"
        showCloseButton
        footer={
          <Button onClick={() => setOpen(false)}>닫기</Button>
        }
      >
        <DetailContent rid={rid} />
      </Modal>
    </>
  )
}

// After — modal() 명령형 호출
function DetailPage({ rid }: { rid: string }) {
  const { modal } = useDialog()
 
  const openDetail = () =>
    modal({
      type: "center",
      title: "상세",
      description: "레코드를 확인하세요",
      showCloseButton: true,
      content: <DetailContent rid={rid} />,
      footer: ({ close }) => <Button onClick={close}>닫기</Button>,
    })
 
  return <Button onClick={openDetail}>상세 보기</Button>
}

// scope로 그룹 묶고 외부에서 일괄 닫기
modal({
  scope: "wizard-step-2",
  title: "2단계",
  content: <Step2 />,
})
 
// 다른 곳에서
useDialog.getState().closeScope("wizard-step-2")

// React Router
import { useLocation } from "react-router"
import { DialogProvider } from "@vortex/ui-icignal"
 
function AppProviders({ children }: { children: React.ReactNode }) {
  const { pathname } = useLocation()
  return <DialogProvider currentScope={pathname}>{children}</DialogProvider>
}

const setCurrentScope = useDialog((s) => s.setCurrentScope)
 
useEffect(() => {
  setCurrentScope(pathname)
}, [pathname, setCurrentScope])

const { modal, lookup } = useDialog()
 
// 현재 탭(path)에 바인딩 — 탭 이동 시 숨김, 복귀 시 재노출
modal({
  title: "편집",
  scope: "path",
  content: ({ close }) => <EditorView onDone={close} />,
})
 
lookup({
  title: "사용자 선택",
  scope: "path",
  content: ({ select, cancel }) => <UserTable onSelect={select} onCancel={cancel} />,
})
 
// 명시적 path에 바인딩 — 해당 경로로 이동해야만 보임
modal({
  title: "알림",
  scope: "/users/detail",
  content: <p>Users 상세 페이지 전용 모달</p>,
})
 
// 논리 scope (탭/path와 무관한 그룹)
modal({
  title: "마법사 2단계",
  scope: "wizard-checkout",
  content: <Step2 />,
})

const { closeAllModals, closeAllLookups, closeScope } = useDialog()
 
// 특정 scope의 모달만
closeAllModals({ scope: "/users/detail" })
 
// 특정 scope의 modal / lookup 전부 (alert / confirm 은 제외)
closeScope("/users/detail")
 
// scope 생략 시 현재 scope(= 현재 pathname)에 속한 모든 다이얼로그
closeScope()
 
// 인자 없이 전체 닫기 (기존 동작과 호환)
closeAllModals()

// 탭 A(/orders)에서 아래처럼 연 경우:
const user = await lookup<User>({
  title: "담당자 선택",
  scope: "path",
  content: ({ select, cancel }) => <UserTable onSelect={select} onCancel={cancel} />,
})
 
// 사용자가 아직 선택하기 전에 탭을 닫으면:
// → user === null (cancel) 로 resolve 되어 후속 로직이 안전하게 진행

// 이 모달은 탭 이동 후 복귀해도 입력값, 드래그 위치가 그대로 유지된다.
modal({
  title: "편집",
  scope: "path",
  draggable: true,
  resizable: true,
  content: ({ close }) => <EditorWithInputs onDone={close} />,
})

const { setConfig, resetConfig } = useDialog()
 
// 부분 업데이트 — 변경한 필드만 localStorage 에 반영
setConfig({ dim: false, allowInteraction: true, buttonOrder: "confirm-cancel" })
 
// 기본값으로 복원
resetConfig()

// 앱 기본값을 지정하고 싶을 때:
<DialogProvider dim={false} allowInteraction={true}>
  ...
</DialogProvider>
// 사용자가 나중에 setConfig({ dim: true }) 를 호출하면
// 이후 새로고침에서도 dim=true 가 유지됨 (prop 은 무시됨).

import { useState } from "react"
import { useQuery } from "@tanstack/react-query"
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogBody,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Button,
  Skeleton,
} from "@vortex/ui-foundation"
 
function useUser(id?: number) {
  return useQuery({
    queryKey: ["user", id],
    queryFn: () => fetch(`/api/users/${id}`).then((res) => res.json()),
    enabled: !!id,
  })
}
 
export function UserDetailModal({ userId }: { userId: number }) {
  const [open, setOpen] = useState(false)
  const { data: user, isLoading, error } = useUser(open ? userId : undefined)
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="outline" size="sm">
          상세 보기
        </Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>사용자 상세 정보</DialogTitle>
          <DialogDescription>사용자 정보를 확인하세요</DialogDescription>
        </DialogHeader>
 
        <DialogBody>
          {isLoading ? (
            <div className="space-y-2">
              <Skeleton className="h-4 w-full" />
              <Skeleton className="h-4 w-3/4" />
              <Skeleton className="h-4 w-1/2" />
            </div>
          ) : error ? (
            <div className="text-destructive">에러: {error.message}</div>
          ) : (
            <div className="space-y-2">
              <p>
                <strong>ID:</strong> {user?.id}
              </p>
              <p>
                <strong>이름:</strong> {user?.name}
              </p>
              <p>
                <strong>이메일:</strong> {user?.email}
              </p>
              <p>
                <strong>역할:</strong> {user?.role}
              </p>
            </div>
          )}
        </DialogBody>
 
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">닫기</Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

pnpm add zustand sonner

// stores/dialog.ts
import { create } from "zustand"
import { toast, type ExternalToast } from "sonner"
import { type ReactNode } from "react"
 
// Alert/Confirm 아이템 타입
export interface AlertConfirmItem {
  id?: string
  type?: "alert" | "confirm"
  title?: string
  description?: string
  confirmText?: string
  cancelText?: string
  confirmVariant?: "default" | "outline" | "destructive"
  cancelVariant?: "default" | "outline" | "destructive"
  confirmSize?: "sm" | "default" | "lg"
  cancelSize?: "sm" | "default" | "lg"
  buttonOrder?: "cancel-confirm" | "confirm-cancel"
  onConfirm?: () => void
  onCancel?: () => void
}
 
// Toast 아이템 타입
export interface ToastItem extends ExternalToast {
  type?: "success" | "error" | "loading" | "info" | "warning"
  id?: string
  title?: string
  description?: ReactNode
  dismissible?: boolean
  position?:
    | "top-left"
    | "top-center"
    | "top-right"
    | "bottom-left"
    | "bottom-center"
    | "bottom-right"
  icon?: ReactNode
  confirmText?: string
  cancelText?: string
  onConfirm?: () => void
  onCancel?: () => void
}

// stores/dialog.ts (계속)
type State = {
  items: AlertConfirmItem[]
  loading?: boolean
  defaultToastPosition?: ToastItem["position"]
}
 
type Action = {
  alert: (item: AlertConfirmItem | string) => Promise<void>
  confirm: (item: AlertConfirmItem | string) => Promise<boolean>
  showLoading: () => void
  hideLoading: () => void
  toast: (item: ToastItem | string) => Promise<void>
  setDefaultToastPosition: (position: ToastItem["position"]) => void
}

// stores/dialog.ts (계속)
export const useDialog = create<State & Action>((set) => ({
  items: [],
  loading: false,
  defaultToastPosition: "top-right",
 
  // Alert: 알림만 표시 (확인 버튼만)
  alert: (item: AlertConfirmItem | string) =>
    new Promise((resolve) => {
      const id = Math.random().toString(36).substring(2, 9)
 
      function onConfirm() {
        resolve()
        set((state: State) => ({
          items: state.items.filter((i) => i.id !== id),
        }))
        if (typeof item !== "string") item.onConfirm?.()
      }
 
      function onCancel() {
        resolve()
        set((state: State) => ({
          items: state.items.filter((i) => i.id !== id),
        }))
        if (typeof item !== "string") item.onCancel?.()
      }
 
      const newItem: AlertConfirmItem =
        typeof item === "string"
          ? { title: item, type: "alert", id, onConfirm, onCancel }
          : { ...item, type: "alert", id, onConfirm, onCancel }
 
      set((state: State) => ({ items: [...state.items, newItem] }))
    }),
 
  // Confirm: 확인/취소 선택, boolean 반환
  confirm: (item: AlertConfirmItem | string) =>
    new Promise((resolve) => {
      const id = Math.random().toString(36).substring(2, 9)
 
      function onConfirm() {
        resolve(true)
        set((state: State) => ({
          items: state.items.filter((i) => i.id !== id),
        }))
        if (typeof item !== "string") item.onConfirm?.()
      }
 
      function onCancel() {
        resolve(false)
        set((state: State) => ({
          items: state.items.filter((i) => i.id !== id),
        }))
        if (typeof item !== "string") item.onCancel?.()
      }
 
      const newItem: AlertConfirmItem =
        typeof item === "string"
          ? { title: item, type: "confirm", id, onConfirm, onCancel }
          : { ...item, type: "confirm", id, onConfirm, onCancel }
 
      set((state: State) => ({ items: [...state.items, newItem] }))
    }),
 
  // 로딩 다이얼로그
  showLoading: () => set({ loading: true }),
  hideLoading: () => set({ loading: false }),
 
  // Toast 메시지 (sonner 사용)
  toast: (item: ToastItem | string) =>
    new Promise<void>((resolve) => {
      if (typeof item === "string") {
        toast(item, { onDismiss: () => resolve() })
        return
      }
 
      const method = item.type ? toast[item.type] : toast
 
      method(item.title, {
        ...item,
        onDismiss: () => resolve(),
        action: item.confirmText
          ? { label: item.confirmText, onClick: item.onConfirm }
          : undefined,
        cancel: item.cancelText
          ? { label: item.cancelText, onClick: item.onCancel }
          : undefined,
      })
    }),
 
  setDefaultToastPosition: (position) =>
    set({ defaultToastPosition: position }),
}))

// providers/dialog-provider.tsx
import { useDialog } from "@/stores/dialog"
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogCancel,
  AlertDialogAction,
} from "@vortex/ui-foundation"
import { Toaster } from "sonner"
import {
  CircleCheckIcon,
  InfoIcon,
  TriangleAlertIcon,
  OctagonXIcon,
  Loader2Icon,
} from "lucide-react"
 
// 로딩 다이얼로그 컴포넌트
function LoadingDialog() {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
      <div className="rounded-lg bg-background p-6">
        <Loader2Icon className="h-8 w-8 animate-spin" />
      </div>
    </div>
  )
}
 
export function DialogProvider({ children }: { children: React.ReactNode }) {
  const { items, loading, defaultToastPosition } = useDialog()
 
  return (
    <>
      {children}
 
      {/* Alert/Confirm 다이얼로그 렌더링 */}
      {items.map((item) => (
        <AlertDialog key={item.id} open onOpenChange={item.onCancel}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>{item.title}</AlertDialogTitle>
              {item.description && (
                <AlertDialogDescription>
                  {item.description}
                </AlertDialogDescription>
              )}
            </AlertDialogHeader>
            <AlertDialogFooter>
              {item.type === "confirm" && (
                <AlertDialogCancel onClick={item.onCancel}>
                  {item.cancelText || "취소"}
                </AlertDialogCancel>
              )}
              <AlertDialogAction
                onClick={item.onConfirm}
                className={
                  item.confirmVariant === "destructive"
                    ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
                    : ""
                }
              >
                {item.confirmText || "확인"}
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      ))}
 
      {/* 로딩 다이얼로그 */}
      {loading && <LoadingDialog />}
 
      {/* Toast 컨테이너 */}
      <Toaster
        position={defaultToastPosition}
        richColors
        icons={{
          success: <CircleCheckIcon className="size-4" />,
          info: <InfoIcon className="size-4" />,
          warning: <TriangleAlertIcon className="size-4" />,
          error: <OctagonXIcon className="size-4" />,
          loading: <Loader2Icon className="size-4 animate-spin" />,
        }}
      />
    </>
  )
}

// main.tsx 또는 App.tsx
import { DialogProvider } from "@/providers/dialog-provider"
 
function App() {
  return (
    <DialogProvider>
      <Router />
    </DialogProvider>
  )
}

import { useDialog } from "@/stores/dialog"
 
export function UserList() {
  const { alert, confirm, toast, showLoading, hideLoading } = useDialog()
 
  const handleDelete = async (user: User) => {
    // 1. 확인 다이얼로그
    const result = await confirm({
      title: "사용자 삭제",
      description: `${user.name} 사용자를 삭제하시겠습니까?`,
      confirmText: "삭제",
      cancelText: "취소",
      confirmVariant: "destructive",
    })
 
    if (!result) return
 
    // 2. 로딩 표시
    showLoading()
 
    try {
      await deleteUser(user.id)
      hideLoading()
 
      // 3. 성공 토스트
      toast({ type: "success", title: "사용자가 삭제되었습니다" })
    } catch (error) {
      hideLoading()
 
      // 4. 에러 알림
      await alert({
        title: "삭제 실패",
        description: "사용자 삭제에 실패했습니다. 다시 시도해주세요.",
      })
    }
  }
 
  return <button onClick={() => handleDelete(user)}>삭제</button>
}

const { toast } = useDialog()
 
// 기본 토스트
toast("메시지")
 
// 성공 토스트
toast({ type: "success", title: "저장되었습니다" })
 
// 에러 토스트
toast({ type: "error", title: "오류가 발생했습니다" })
 
// 경고 토스트
toast({ type: "warning", title: "주의가 필요합니다" })
 
// 정보 토스트
toast({ type: "info", title: "알림", description: "추가 정보입니다" })
 
// 액션 버튼이 있는 토스트
toast({
  title: "변경사항이 있습니다",
  confirmText: "저장",
  cancelText: "취소",
  onConfirm: () => save(),
  onCancel: () => discard(),
})