refactor: 공통 UI 패키지 기반 구축

apps/admin/package.json

@@ -17,23 +17,18 @@
     "check": "biome check"
   },
   "dependencies": {
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.13",
     "@solid-connect/api-schema": "workspace:^",
+    "@solid-connect/ui": "workspace:^",
     "@stomp/stompjs": "^7.1.1",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.84.1",
     "axios": "^1.6.7",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.561.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "sockjs-client": "^1.6.1",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.6"
   },
   "devDependencies": {

apps/admin/src/components/ui/button.tsx

@@ -1,47 +1,2 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-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 typo-sb-11 transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-	{
-		variants: {
-			variant: {
-				default: "bg-primary text-k-0 shadow-sm hover:bg-primary-600",
-				destructive: "bg-[#E22A2D] text-k-0 shadow-sm hover:bg-[#BA1E21]",
-				outline: "border border-k-200 bg-k-0 text-k-700 shadow-sm hover:bg-k-50",
-				secondary: "bg-k-50 text-k-700 shadow-sm hover:bg-k-100",
-				ghost: "text-k-600 hover:bg-k-50 hover:text-k-800",
-				link: "text-primary underline-offset-4 hover:underline",
-			},
-			size: {
-				default: "h-9 px-4 py-2",
-				sm: "h-8 rounded-md px-3 text-xs",
-				lg: "h-10 rounded-md px-8",
-				icon: "h-9 w-9",
-			},
-		},
-		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 };
+export type { ButtonProps } from "@solid-connect/ui/button";
+export { Button, buttonVariants } from "@solid-connect/ui/button";

apps/admin/src/components/ui/card.tsx

@@ -1,41 +1 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
-	<div ref={ref} className={cn("rounded-xl border border-k-100 bg-k-0 text-k-800 shadow", className)} {...props} />
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-	),
-);
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("leading-none tracking-tight", className)} {...props} />
-	),
-);
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => <div ref={ref} className={cn("text-sm text-k-500", className)} {...props} />,
-);
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
-);
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-	),
-);
-CardFooter.displayName = "CardFooter";
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@solid-connect/ui/card";

apps/admin/src/components/ui/input.tsx

@@ -1,22 +1 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-	({ className, type, ...props }, ref) => {
-		return (
-			<input
-				type={type}
-				className={cn(
-					"flex h-9 w-full rounded-md border border-k-200 bg-k-0 px-3 py-1 typo-regular-4 text-k-700 shadow-sm transition-colors file:border-0 file:bg-transparent file:typo-medium-4 file:text-k-700 placeholder:text-k-400 focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Input.displayName = "Input";
-
-export { Input };
+export { Input } from "@solid-connect/ui/input";

apps/admin/src/components/ui/label.tsx

@@ -1,17 +1 @@
-import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-
-const Label = React.forwardRef<
-	React.ComponentRef<typeof LabelPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-	<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };
+export { Label } from "@solid-connect/ui/label";

apps/admin/src/components/ui/table.tsx

@@ -1,81 +1,10 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-	({ className, ...props }, ref) => (
-		<div className="relative w-full overflow-auto">
-			<table ref={ref} className={cn("w-full caption-bottom typo-regular-4 text-k-700", className)} {...props} />
-		</div>
-	),
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-	({ className, ...props }, ref) => (
-		<thead ref={ref} className={cn("bg-bg-50 [&_tr]:border-b [&_tr]:border-k-100", className)} {...props} />
-	),
-);
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-	({ className, ...props }, ref) => (
-		<tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-	),
-);
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-	({ className, ...props }, ref) => (
-		<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
-	),
-);
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-	({ className, ...props }, ref) => (
-		<tr
-			ref={ref}
-			className={cn("border-b border-k-100 transition-colors hover:bg-bg-50 data-[state=selected]:bg-bg-50", className)}
-			{...props}
-		/>
-	),
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-	({ className, ...props }, ref) => (
-		<th
-			ref={ref}
-			className={cn(
-				"h-10 px-2 text-left align-middle typo-sb-11 text-k-600 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-	({ className, ...props }, ref) => (
-		<td
-			ref={ref}
-			className={cn(
-				"p-2 align-middle typo-regular-4 text-k-700 [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-	({ className, ...props }, ref) => (
-		<caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
-	),
-);
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
+export {
+	Table,
+	TableBody,
+	TableCaption,
+	TableCell,
+	TableFooter,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@solid-connect/ui/table";

apps/admin/src/components/ui/tabs.tsx

@@ -1,43 +1 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-	React.ComponentRef<typeof TabsPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-	<TabsPrimitive.List
-		ref={ref}
-		className={cn("inline-flex h-9 items-center justify-center rounded-lg bg-k-50 p-1 text-k-500", className)}
-		{...props}
-	/>
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-	React.ComponentRef<typeof TabsPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-	<TabsPrimitive.Trigger
-		ref={ref}
-		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 typo-sb-11 transition-all focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-k-0 data-[state=active]:text-primary data-[state=active]:shadow",
-			className,
-		)}
-		{...props}
-	/>
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-	React.ComponentRef<typeof TabsPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-	<TabsPrimitive.Content ref={ref} className={cn("mt-2 focus-visible:outline-none", className)} {...props} />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "@solid-connect/ui/tabs";

apps/admin/src/components/ui/textarea.tsx

@@ -1,21 +1 @@
-import * as React from "react";
-
-import { cn } from "@/lib/utils";
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
-	({ className, ...props }, ref) => {
-		return (
-			<textarea
-				className={cn(
-					"flex min-h-24 w-full rounded-md border border-k-200 bg-k-0 px-3 py-2 typo-regular-4 text-k-700 shadow-sm transition-colors placeholder:text-k-400 focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-					className,
-				)}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-Textarea.displayName = "Textarea";
-
-export { Textarea };
+export { Textarea } from "@solid-connect/ui/textarea";

apps/admin/src/lib/utils/index.ts

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

apps/admin/src/styles.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@source "../../../packages/ui/src";
 
 body {
   @apply m-0;

packages/ui/biome.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.12/schema.json",
+  "extends": ["../config/biome/base.json"],
+  "vcs": {
+    "useIgnoreFile": false
+  },
+  "files": {
+    "includes": ["src/**/*", "package.json", "tsconfig.json"]
+  }
+}