feat: shadcn 라이브러리를 사용하여 모달 생성

components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package.json

@@ -9,9 +9,14 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
     "next": "16.1.6",
+    "radix-ui": "^1.4.3",
     "react": "19.2.3",
-    "react-dom": "19.2.3"
+    "react-dom": "19.2.3",
+    "tailwind-merge": "^3.4.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
@@ -21,6 +26,7 @@
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^5"
   }
 }

src/app/globals.css

@@ -1,26 +1,125 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
-@media (prefers-color-scheme: dark) {
 :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.129 0.042 264.695);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.129 0.042 264.695);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(15.152% 0.01301 277.362);
+  --primary: oklch(0.208 0.042 265.755);
+  --primary-foreground: oklch(0.984 0.003 247.858);
+  --secondary: oklch(0.968 0.007 247.896);
+  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --muted: oklch(0.968 0.007 247.896);
+  --muted-foreground: oklch(0.554 0.046 257.417);
+  --accent: oklch(0.968 0.007 247.896);
+  --accent-foreground: oklch(0.208 0.042 265.755);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.929 0.013 255.508);
+  --input: oklch(0.929 0.013 255.508);
+  --ring: oklch(0.704 0.04 256.788);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.984 0.003 247.858);
+  --sidebar-foreground: oklch(0.129 0.042 264.695);
+  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+  --sidebar-border: oklch(0.929 0.013 255.508);
+  --sidebar-ring: oklch(0.704 0.04 256.788);
 }
 
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+.dark {
+  --background: oklch(0.129 0.042 264.695);
+  --foreground: oklch(0.984 0.003 247.858);
+  --card: oklch(0.208 0.042 265.755);
+  --card-foreground: oklch(0.984 0.003 247.858);
+  --popover: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.929 0.013 255.508);
+  --primary-foreground: oklch(0.208 0.042 265.755);
+  --secondary: oklch(0.279 0.041 260.031);
+  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --muted: oklch(0.279 0.041 260.031);
+  --muted-foreground: oklch(0.704 0.04 256.788);
+  --accent: oklch(0.279 0.041 260.031);
+  --accent-foreground: oklch(0.984 0.003 247.858);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.208 0.042 265.755);
+  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

src/app/page.tsx

@@ -2,18 +2,73 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useCallback } from "react";
+import { useCallback, useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
 
 type Mode = "freeflow" | "sprint" | "deepwork";
 
+function modeLabel(mode: Mode) {
+  switch (mode) {
+    case "freeflow":
+      return "프리플로우";
+    case "sprint":
+      return "스프린트";
+    case "deepwork":
+      return "딥워크";
+  }
+}
+
 export default function HomePage() {
   const router = useRouter();
 
+  const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<Mode | null>(null);
+  const [goal, setGoal] = useState("");
+
+  const meta = useMemo(() => {
+    if (!mode) return "";
+    if (mode === "freeflow") return "무제한";
+    if (mode === "sprint") return "25분";
+    return "90분";
+  }, [mode]);
+
   const go = useCallback(
-    (mode: Mode) => router.push(`/session?mode=${mode}`),
+    (mode: Mode, goal?: string) => {
+      const params = new URLSearchParams();
+      params.set("mode", mode);
+
+      if (goal && goal.trim().length > 0) {
+        localStorage.setItem("goal", goal.trim());
+      }
+
+      router.push(`/session?${params.toString()}`);
+    },
     [router],
   );
 
+  const openDialog = (mode: Mode) => {
+    setMode(mode);
+    setGoal("");
+    setOpen(true);
+  };
+
+  const start = () => {
+    if (!mode) return;
+    setOpen(false);
+    go(mode, goal);
+  };
+
   return (
     <main className="min-h-screen w-full bg-[#E9EEF6]">
       <header className="px-5 pt-6">
@@ -26,37 +81,60 @@ export default function HomePage() {
         <div className="mb-4">
           <div className="text-sm font-semibold text-slate-600">자유 세션</div>
           <div className="mt-1 text-base leading-relaxed text-slate-700">
-            시간 제한 없이, 원할 때 종료
+            시간 제한 없이, 원할 때 종료 (60분 마다 노크합니다.)
           </div>
         </div>
 
-        <button
+        <Button
           type="button"
-          onClick={() => go("freeflow")}
-          className="w-full rounded-3xl bg-[#2F6FED] px-8 py-6 text-left text-white shadow-sm transition active:scale-[0.99] hover:bg-[#295FD1]"
-          aria-label="프리플로우"
+          onClick={() => openDialog("freeflow")}
+          className="h-auto w-full items-start justify-start whitespace-normal rounded-3xl bg-[#2F6FED]
+             px-8 py-6 text-left text-white shadow-sm transition active:scale-[0.99] hover:bg-[#295FD1]"
         >
-          <div className="text-2xl font-semibold">프리플로우</div>
+          <div className="w-full">
+            <div className="text-2xl font-semibold leading-none">
+              프리플로우
+            </div>
             <div className="mt-2 text-lg opacity-90">무제한</div>
-        </button>
+          </div>
+        </Button>
 
         <div className="my-8 flex items-center gap-3">
-          <div className="h-px flex-1 bg-[#D7E0EE]" />
+          <Separator className="flex-1 bg-[#D7E0EE]" />
           <div className="text-sm font-semibold text-slate-600">
             시간 고정 세션
           </div>
-          <div className="h-px flex-1 bg-[#D7E0EE]" />
+          <Separator className="flex-1 bg-[#D7E0EE]" />
         </div>
 
         <div className="-mt-2 mb-5 text-base leading-relaxed text-slate-700">
           한 번 실행되고 끝나면 요약으로 이동
         </div>
 
+        {/* Sprint / Deepwork */}
         <div className="grid grid-cols-2 gap-4">
-          <ModeTile title="스프린트" meta="25분" onClick={() => go("sprint")} />
-          <ModeTile title="딥워크" meta="90분" onClick={() => go("deepwork")} />
+          <ModeTile
+            title="스프린트"
+            meta="25분"
+            onClick={() => openDialog("sprint")}
+          />
+          <ModeTile
+            title="딥워크"
+            meta="90분"
+            onClick={() => openDialog("deepwork")}
+          />
         </div>
       </section>
+
+      <SessionGoalDialog
+        open={open}
+        onOpenChange={setOpen}
+        mode={mode}
+        meta={meta}
+        goal={goal}
+        setGoal={setGoal}
+        onStart={start}
+      />
     </main>
   );
 }
@@ -71,16 +149,75 @@ function ModeTile({
   onClick: () => void;
 }) {
   return (
-    <button
+    <Card className="rounded-3xl border border-[#C9D7F5] bg-white shadow-sm transition hover:bg-[#F1F5FF]">
+      <Button
         type="button"
+        variant="ghost"
         onClick={onClick}
-      className="rounded-3xl border border-[#C9D7F5] bg-white px-7 py-5 text-left shadow-sm transition active:scale-[0.99] hover:bg-[#F1F5FF]"
-      aria-label={`${title} ${meta}`}
+        className="h-auto w-full rounded-3xl px-7 text-left active:scale-[0.99]"
       >
-      <div className="flex items-baseline justify-between">
+        <div className="flex w-full items-baseline justify-between">
           <div className="text-xl font-semibold text-slate-900">{title}</div>
           <div className="text-lg font-semibold text-blue-700">{meta}</div>
         </div>
-    </button>
+      </Button>
+    </Card>
+  );
+}
+
+function SessionGoalDialog({
+  open,
+  onOpenChange,
+  mode,
+  meta,
+  goal,
+  setGoal,
+  onStart,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  mode: Mode | null;
+  meta: string;
+  goal: string;
+  setGoal: (v: string) => void;
+  onStart: () => void;
+}) {
+  const title = mode ? `${modeLabel(mode)} · ${meta}` : "세션";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md rounded-2xl">
+        <DialogHeader>
+          <DialogTitle className="text-xl">세션 목표 설정</DialogTitle>
+          <div className="text-sm text-slate-600">{title}</div>
+        </DialogHeader>
+
+        <div className="space-y-2">
+          <Input
+            value={goal}
+            onChange={(e) => setGoal(e.target.value)}
+            placeholder="목표를 입력하세요"
+            className="text-lg border-[#2F6FED] focus-visible:ring-[#2F6FED] focus-visible:ring-1"
+            autoFocus
+          />
+          <div className="text-xs text-slate-500">
+            짧게 적을수록 좋아요. 예: “이력서 1페이지”, “문제 10개”
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-2">
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            취소
+          </Button>
+          <Button
+            onClick={onStart}
+            className="rounded-xl bg-[#2F6FED]"
+            disabled={!mode}
+          >
+            시작하기
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 }

src/app/session/page.tsx

@@ -45,17 +45,6 @@ function formatHHMMSS(totalSeconds: number) {
   return `${hh}:${mm}:${ss}`;
 }
 
-/**
- * 로컬 Presence (Supabase 교체 전용)
- * - 같은 브라우저에서 여러 탭/창을 열면 "인원 점"이 늘어남
- * - BroadcastChannel 미지원 환경은 localStorage 이벤트로 fallback
- *
- * 교체 포인트:
- *   const { participants } = useLocalPresence(roomKey, status)
- * 를
- *   const { participants } = useSupabasePresence(roomKey, status)
- * 같은 형태로 바꾸면 UI는 그대로 유지 가능
- */
 function useLocalPresence(roomKey: string, status: PresenceStatus) {
   const selfId = useMemo(() => {
     // 탭 단위 고유 ID
@@ -309,7 +298,6 @@ export default function SessionPage() {
     return formatHHMMSS(remaining);
   }, [elapsed, remaining, mode]);
 
-  const onCheckIn = () => showToast("체크인 기록됨");
   const onEnd = () =>
     router.push(`/session/end?mode=${mode}&elapsed=${elapsed}`);
 
@@ -321,13 +309,18 @@ export default function SessionPage() {
         </div>
       </header>
 
-      <section className="mx-auto flex min-h-[calc(100vh-64px)] max-w-lg flex-col px-5 pb-10 pt-6">
+      <section className="mx-auto justify-center flex min-h-[calc(100vh-64px)] max-w-lg flex-col px-5 pb-10 pt-6">
         {toast && (
           <div className="mb-4 rounded-2xl border border-[#D7E0EE] bg-white px-4 py-3 text-sm text-slate-700 shadow-sm">
             {toast}
           </div>
         )}
 
+        {/* Timer */}
+        <div
+          className="rounded-3xl border bg-white px-6 py-6 shadow-sm"
+          style={{ borderColor: BORDER }}
+        >
           <div className="mb-4">
             <div className="text-sm font-semibold text-slate-600">
               {modeLabel(mode)}
@@ -338,52 +331,13 @@ export default function SessionPage() {
                 : "한 번 실행되고 끝나면 요약으로 이동"}
             </div>
           </div>
-
-        {/* Timer */}
-        <div
-          className="rounded-3xl border bg-white px-6 py-6 shadow-sm"
-          style={{ borderColor: BORDER }}
-        >
           <div className="text-[44px] font-semibold leading-none text-slate-900 tabular-nums">
             {timeMain}
           </div>
-
-          <div className="mt-6">
-            <label className="text-sm font-semibold text-slate-600">
-              목표(선택)
-            </label>
-            <input
-              value={goal}
-              onChange={(e) => setGoal(e.target.value)}
-              placeholder="이번 세션 목표(선택)"
-              className="mt-2 w-full rounded-2xl border px-4 py-3 text-base text-slate-900 outline-none"
-              style={{ borderColor: BORDER }}
-            />
-          </div>
-        </div>
-
-        {/* Presence */}
-        <div
-          className="mt-4 rounded-3xl border bg-white px-6 py-5 shadow-sm"
-          style={{ borderColor: BORDER }}
-        >
-          <div className="flex items-center justify-between">
-            <div className="text-sm font-semibold text-slate-700">방</div>
-            <div className="text-sm text-slate-600">{roomKey}</div>
-          </div>
-
-          <div className="mt-4 flex items-center justify-between">
-            <div className="text-sm font-semibold text-slate-700">인원</div>
-            <div className="text-sm text-slate-600">{participants.length}</div>
-          </div>
-
-          <div className="mt-4">
-            <PresenceDots participants={participants} />
-          </div>
         </div>
 
         {/* Actions */}
-        <div className="mt-5 grid grid-cols-3 gap-3">
+        <div className="mt-5 grid grid-cols-2 gap-3">
           <button
             type="button"
             onClick={() => setIsAway((v) => !v)}
@@ -399,21 +353,6 @@ export default function SessionPage() {
             {isAway ? "복귀" : "자리비움"}
           </button>
 
-          <button
-            type="button"
-            onClick={onCheckIn}
-            className="rounded-3xl border bg-white px-4 py-4 text-base font-semibold text-slate-800 shadow-sm transition active:scale-[0.99]"
-            style={{ borderColor: BORDER }}
-            onMouseEnter={(e) =>
-              (e.currentTarget.style.backgroundColor = HOVER)
-            }
-            onMouseLeave={(e) =>
-              (e.currentTarget.style.backgroundColor = "#FFFFFF")
-            }
-          >
-            체크인
-          </button>
-
           <button
             type="button"
             onClick={onEnd}

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}

src/components/ui/dialog.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import { Separator as SeparatorPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}