UI 컴포넌트 개선: DialogV2 Size 체계 재설계 및 Tailwind 마이그레이션

.gitignore

@@ -78,3 +78,4 @@ apps/admin-main/.env.local
 apps/admin-main/docs/superpowers
 .omc
 
+docs/superpowers

apps/web/src/app/globals.css

@@ -32,7 +32,7 @@
 
   button {
     cursor: pointer;
-    border: transparent;
+    border-color: transparent;
     background-color: transparent;
     padding: 0;
     outline: none;

apps/webview/src/index.css

@@ -31,7 +31,7 @@
 
   button {
     cursor: pointer;
-    border: transparent;
+    border-color: transparent;
     background-color: transparent;
     padding: 0;
     outline: none;

packages/ui/tailwind/.storybook/globals.css

@@ -15,7 +15,7 @@
 
   button {
     cursor: pointer;
-    border: transparent;
+    border-color: transparent;
     background-color: transparent;
     padding: 0;
     outline: none;

packages/ui/tailwind/src/components/ui/alert-dialog-v2.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AlertDialogV2 } from './alert-dialog-v2';
+
+const meta: Meta<typeof AlertDialogV2> = {
+  title: 'UI/AlertDialogV2',
+  component: AlertDialogV2,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  args: {
+    isOpen: true,
+    onClose: () => {},
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    closeText: { control: 'text' },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'full'] },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Notice',
+    description: 'Your pet has leveled up!',
+    closeText: 'OK',
+  },
+};
+
+export const ErrorAlert: Story = {
+  args: {
+    title: 'Error',
+    description: 'Failed to complete the action. Please try again later.',
+    closeText: 'Close',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    title: 'Monthly Summary',
+    description: 'Here is your activity for this month:',
+    closeText: 'Got it',
+    children: (
+      <ul className="text-white/70 list-disc pl-4 space-y-1">
+        <li>Contribution streak: 30 days</li>
+        <li>Pets earned: 3</li>
+        <li>Total points: 1,500</li>
+      </ul>
+    ),
+  },
+};
+
+export const MediumSize: Story = {
+  args: {
+    title: 'Update Available',
+    description: 'A new version is ready. Please review the changelog below.',
+    closeText: 'Dismiss',
+    size: 'md',
+    children: (
+      <div className="bg-white/10 text-white rounded-md p-3 space-y-1 text-sm">
+        <p>- Improved pet animation performance</p>
+        <p>- Fixed streak calculation bug</p>
+        <p>- Added new pet skins for top contributors</p>
+      </div>
+    ),
+  },
+};

packages/ui/tailwind/src/components/ui/alert-dialog-v2.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { DialogV2, type DialogV2Size } from './dialog-v2';
+import { Button } from './button';
+
+export interface AlertDialogV2Props {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: ReactNode;
+  closeText?: string;
+  children?: ReactNode;
+  size?: DialogV2Size;
+}
+
+export function AlertDialogV2({
+  isOpen,
+  onClose,
+  title,
+  description,
+  closeText = 'Close',
+  children,
+  size = 'sm',
+}: AlertDialogV2Props) {
+  const buttonSize = size === 'sm' ? 's' : size === 'full' ? 'l' : 'm';
+
+  return (
+    <DialogV2 open={isOpen} onOpenChange={onClose}>
+      <DialogV2.Content size={size}>
+        <DialogV2.Title>{title}</DialogV2.Title>
+        {description && <DialogV2.Description>{description}</DialogV2.Description>}
+        {children && <div className="w-full">{children}</div>}
+        <DialogV2.Footer>
+          <Button onClick={onClose} variant="primary" size={buttonSize}>
+            {closeText}
+          </Button>
+        </DialogV2.Footer>
+      </DialogV2.Content>
+    </DialogV2>
+  );
+}

packages/ui/tailwind/src/components/ui/checkbox.tsx

@@ -18,13 +18,11 @@ const Checkbox = React.forwardRef<
       'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/25 focus-visible:ring-offset-2',
       'disabled:cursor-not-allowed disabled:opacity-50',
       'data-[state=checked]:bg-[#fafafa] data-[state=checked]:text-black',
-      className
+      className,
     )}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-      className={cn('flex items-center justify-center text-current')}
-    >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>

packages/ui/tailwind/src/components/ui/confirm-dialog-v2.stories.tsx

@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ConfirmDialogV2 } from './confirm-dialog-v2';
+
+const meta: Meta<typeof ConfirmDialogV2> = {
+  title: 'UI/ConfirmDialogV2',
+  component: ConfirmDialogV2,
+  parameters: { layout: 'centered' },
+  tags: ['autodocs'],
+  args: {
+    isOpen: true,
+    onClose: () => {},
+    onConfirm: () => {},
+  },
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    confirmText: { control: 'text' },
+    cancelText: { control: 'text' },
+    isLoading: { control: 'boolean' },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'full'] },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'Delete Item?',
+    description: 'Are you sure you want to delete this item? This action cannot be undone.',
+    confirmText: 'Delete',
+    cancelText: 'Cancel',
+  },
+};
+
+export const CustomButtonText: Story = {
+  args: {
+    title: 'Merge Pet?',
+    description: 'This will merge two pets into one stronger pet.',
+    confirmText: 'Yes, merge',
+    cancelText: 'No, keep them',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    title: 'Save Changes?',
+    description: 'Click confirm to save your changes.',
+    confirmText: 'Save',
+    cancelText: 'Discard',
+    isLoading: true,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    title: 'Sell this pet?',
+    description: 'The following pet will be sold:',
+    confirmText: 'Sell',
+    cancelText: 'Cancel',
+    children: (
+      <div className="bg-white/10 text-white rounded-md p-3 text-sm">
+        Pet: Golden Retriever (Lv.5)
+      </div>
+    ),
+  },
+};
+
+export const MediumSize: Story = {
+  args: {
+    title: 'Transfer Pet',
+    description: 'Select a user to transfer this pet to.',
+    confirmText: 'Transfer',
+    cancelText: 'Cancel',
+    size: 'md',
+    children: (
+      <div className="space-y-2">
+        <input
+          className="w-full bg-white/10 text-white rounded-md px-3 py-2 text-sm outline-none placeholder:text-white/40"
+          placeholder="Search users..."
+        />
+        <ul className="space-y-1">
+          <li className="bg-white/10 text-white rounded-md px-3 py-2 text-sm cursor-pointer hover:bg-white/20">
+            user_alpha
+          </li>
+          <li className="bg-white/10 text-white rounded-md px-3 py-2 text-sm cursor-pointer hover:bg-white/20">
+            user_beta
+          </li>
+          <li className="bg-white/10 text-white rounded-md px-3 py-2 text-sm cursor-pointer hover:bg-white/20">
+            user_gamma
+          </li>
+        </ul>
+      </div>
+    ),
+  },
+};

packages/ui/tailwind/src/components/ui/confirm-dialog-v2.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import { DialogV2, type DialogV2Size } from './dialog-v2';
+import { Button } from './button';
+
+export interface ConfirmDialogV2Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void | Promise<void>;
+  title: string;
+  description?: ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  isLoading?: boolean;
+  children?: ReactNode;
+  size?: DialogV2Size;
+}
+
+export function ConfirmDialogV2({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = 'Confirm',
+  cancelText = 'Cancel',
+  isLoading: externalLoading,
+  children,
+  size = 'sm',
+}: ConfirmDialogV2Props) {
+  const [internalLoading, setInternalLoading] = useState(false);
+  const isLoading = externalLoading ?? internalLoading;
+  const buttonSize = size === 'sm' ? 's' : size === 'full' ? 'l' : 'm';
+
+  const handleConfirm = async () => {
+    if (isLoading) return;
+    setInternalLoading(true);
+    try {
+      await onConfirm();
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+
+  return (
+    <DialogV2 open={isOpen} onOpenChange={onClose}>
+      <DialogV2.Content size={size}>
+        <DialogV2.Title>{title}</DialogV2.Title>
+        {description && <DialogV2.Description>{description}</DialogV2.Description>}
+        {children && <div className="w-full">{children}</div>}
+        <DialogV2.Footer>
+          <Button onClick={onClose} variant="secondary" size={buttonSize}>
+            {cancelText}
+          </Button>
+          <Button onClick={handleConfirm} variant="primary" size={buttonSize} disabled={isLoading}>
+            {confirmText}
+          </Button>
+        </DialogV2.Footer>
+      </DialogV2.Content>
+    </DialogV2>
+  );
+}