From ea0f65a02b67174df1cc07e1f9769e8154bec0be Mon Sep 17 00:00:00 2001
From: Shinwoo PARK <shinwoo.park@psw.kr>
Date: Sun, 10 May 2026 10:25:34 +0900
Subject: [PATCH] fix: include tracked ui components for CI

---
 .gitignore                               |  1 -
 apps/web/src/App.tsx                     |  2 +-
 apps/web/src/components/ui/badge.tsx     | 14 +++++
 apps/web/src/components/ui/button.tsx    | 45 ++++++++++++++++
 apps/web/src/components/ui/card.tsx      | 30 +++++++++++
 apps/web/src/components/ui/dialog.tsx    | 66 ++++++++++++++++++++++++
 apps/web/src/components/ui/input.tsx     | 19 +++++++
 apps/web/src/components/ui/label.tsx     | 10 ++++
 apps/web/src/components/ui/progress.tsx  | 28 ++++++++++
 apps/web/src/components/ui/separator.tsx | 24 +++++++++
 apps/web/src/components/ui/tabs.tsx      | 43 +++++++++++++++
 11 files changed, 280 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/components/ui/badge.tsx
 create mode 100644 apps/web/src/components/ui/button.tsx
 create mode 100644 apps/web/src/components/ui/card.tsx
 create mode 100644 apps/web/src/components/ui/dialog.tsx
 create mode 100644 apps/web/src/components/ui/input.tsx
 create mode 100644 apps/web/src/components/ui/label.tsx
 create mode 100644 apps/web/src/components/ui/progress.tsx
 create mode 100644 apps/web/src/components/ui/separator.tsx
 create mode 100644 apps/web/src/components/ui/tabs.tsx

diff --git a/.gitignore b/.gitignore
index ccb709f..0f3dbb0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,4 +12,3 @@ apps/api/prisma/dev.db-journal
 apps/api/prisma/dev.db-shm
 apps/api/prisma/dev.db-wal
 apps/web/components.json
-apps/web/src/components/ui
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 6b9708d..273dfe0 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -384,7 +384,7 @@ function ConnectAccountDialog() {
   return (
     <Dialog
       open={open}
-      onOpenChange={(next) => {
+      onOpenChange={(next: boolean) => {
         setOpen(next);
         if (!next && isPendingAttempt && attemptId) {
           cancelMutation.mutate(attemptId);
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
new file mode 100644
index 0000000..4e68665
--- /dev/null
+++ b/apps/web/src/components/ui/badge.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export function Badge({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'inline-flex items-center rounded-full border border-white/10 bg-white/8 px-3 py-1 text-xs font-medium text-slate-200',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..c71ccb4
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,45 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot';
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:ring-2 focus-visible:ring-sky-400/70 h-10 px-4 py-2',
+  {
+    variants: {
+      variant: {
+        default: 'bg-sky-500 text-white shadow-lg shadow-sky-500/20 hover:bg-sky-400',
+        secondary: 'bg-white/10 text-slate-100 hover:bg-white/15',
+        ghost: 'text-slate-300 hover:bg-white/8 hover:text-white',
+        destructive: 'bg-rose-500 text-white hover:bg-rose-400',
+        outline: 'border border-white/10 bg-white/5 text-slate-100 hover:bg-white/10',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-lg px-3',
+        lg: 'h-11 rounded-xl px-5',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
new file mode 100644
index 0000000..da50224
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,30 @@
+import type { HTMLAttributes } from 'react';
+import { cn } from '@/lib/utils';
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'rounded-3xl border border-white/10 bg-slate-950/70 shadow-[0_24px_80px_rgba(15,23,42,0.45)] backdrop-blur-xl',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-2 p-6', className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('text-lg font-semibold text-white', className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-sm text-slate-400', className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('px-6 pb-6', className)} {...props} />;
+}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..30dc3d0
--- /dev/null
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn('fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-sm', className)}
+    {...props}
+  />
+));
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-1/2 top-1/2 z-50 w-[calc(100%-1.5rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-3xl border border-white/10 bg-slate-950/95 p-6 text-slate-100 shadow-2xl',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogClose className="absolute right-4 top-4 rounded-full p-2 text-slate-500 transition hover:bg-white/8 hover:text-white">
+        <X className="size-4" />
+      </DialogClose>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+
+function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('flex flex-col gap-2 text-left', className)} {...props} />;
+}
+
+function DialogTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h2 className={cn('text-xl font-semibold text-white', className)} {...props} />;
+}
+
+function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn('text-sm text-slate-400', className)} {...props} />;
+}
+
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..7398995
--- /dev/null
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(({ className, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        'flex h-11 w-full rounded-xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-white placeholder:text-slate-500 outline-none transition focus:border-sky-400/60 focus:bg-white/8',
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
new file mode 100644
index 0000000..ecb95c2
--- /dev/null
+++ b/apps/web/src/components/ui/label.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+const Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(({ className, ...props }, ref) => {
+  return <label ref={ref} className={cn('text-sm font-medium text-slate-200', className)} {...props} />;
+});
+
+Label.displayName = 'Label';
+
+export { Label };
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
new file mode 100644
index 0000000..640ffe2
--- /dev/null
+++ b/apps/web/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '@/lib/utils';
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+  }
+>(({ className, indicatorClassName, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn('relative h-2.5 w-full overflow-hidden rounded-full bg-white/8', className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(
+        'h-full w-full flex-1 bg-gradient-to-r from-sky-400 to-cyan-300 transition-all',
+        indicatorClassName,
+      )}
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
diff --git a/apps/web/src/components/ui/separator.tsx b/apps/web/src/components/ui/separator.tsx
new file mode 100644
index 0000000..ac0bec6
--- /dev/null
+++ b/apps/web/src/components/ui/separator.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@/lib/utils';
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-white/10',
+      orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+      className,
+    )}
+    {...props}
+  />
+));
+
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..4382ca5
--- /dev/null
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn('inline-flex h-11 items-center rounded-2xl bg-white/6 p-1 text-slate-400', className)}
+    {...props}
+  />
+));
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition data-[state=active]:bg-slate-900 data-[state=active]:text-white data-[state=active]:shadow-lg',
+      className,
+    )}
+    {...props}
+  />
+));
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn('mt-4 outline-none', className)} {...props} />
+));
+
+TabsList.displayName = TabsPrimitive.List.displayName;
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };