diff --git a/frontend/components/ui/badge.tsx b/frontend/components/ui/badge.tsx
index d3badbff..32a1629a 100644
--- a/frontend/components/ui/badge.tsx
+++ b/frontend/components/ui/badge.tsx
@@ -4,16 +4,18 @@ import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const badgeVariants = cva(
- "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+ "inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-semibold whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
{
variants: {
variant: {
- default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
- secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
- destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
- outline: "text-foreground",
- success: "border-transparent bg-green-500 text-white hover:bg-green-600",
- warning: "border-transparent bg-yellow-500 text-white hover:bg-yellow-600",
+ default: "bg-primary/12 text-primary",
+ solid: "bg-primary text-primary-foreground",
+ secondary: "bg-secondary text-secondary-foreground",
+ destructive: "bg-destructive/12 text-destructive",
+ outline: "border border-border text-foreground",
+ success: "bg-success/12 text-success",
+ warning: "bg-warning/12 text-warning",
+ info: "bg-info/12 text-info",
},
},
defaultVariants: {
diff --git a/frontend/components/ui/button.tsx b/frontend/components/ui/button.tsx
index 0ebd79de..9f2d112b 100644
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -17,10 +17,7 @@ const buttonVariants = cva(
secondary: "bg-secondary text-secondary-foreground shadow-xs 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",
- success:
- "bg-success text-success-foreground shadow-xs hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40",
- warning:
- "bg-warning text-warning-foreground shadow-xs hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40",
+ // success/warning buttons removed — 액션 의미가 아닌 상태는 사용
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
diff --git a/frontend/components/ui/dialog.tsx b/frontend/components/ui/dialog.tsx
index 2b9b7a02..7335813b 100644
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@@ -73,12 +73,21 @@ interface ScopedDialogContentProps
container?: HTMLElement | null;
/** 탭 비활성 시 포탈 내용 숨김 */
hidden?: boolean;
+ /** 모달 크기 — sm: 420, md: 560(default), lg: 720, xl: 960. className의 max-w-* 가 지정되면 그 값이 우선. */
+ size?: "sm" | "md" | "lg" | "xl";
}
+const dialogSizeClass = {
+ sm: "max-w-[420px]",
+ md: "max-w-[560px]",
+ lg: "max-w-[720px]",
+ xl: "max-w-[960px]",
+} as const;
+
const DialogContent = React.forwardRef<
React.ElementRef,
ScopedDialogContentProps
->(({ className, children, container: explicitContainer, hidden: hiddenProp, onInteractOutside, onFocusOutside, style, ...props }, ref) => {
+>(({ className, children, container: explicitContainer, hidden: hiddenProp, size = "md", onInteractOutside, onFocusOutside, style, ...props }, ref) => {
const autoContainer = useModalPortal();
const container = explicitContainer !== undefined ? explicitContainer : autoContainer;
const scoped = !!container;
@@ -143,8 +152,9 @@ const DialogContent = React.forwardRef<
onFocusOutside={handleFocusOutside}
className={cn(
scoped
- ? "bg-background relative z-1 flex w-full max-w-lg max-h-full flex-col gap-4 border p-6 shadow-lg sm:rounded-lg"
- : "bg-background fixed top-[50%] left-[50%] z-1000 flex w-full max-w-lg translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border p-6 shadow-lg sm:rounded-lg",
+ ? "bg-background relative z-1 flex w-full max-h-full flex-col gap-4 border p-6 shadow-lg sm:rounded-lg"
+ : "bg-background fixed top-[50%] left-[50%] z-1000 flex w-full translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border p-6 shadow-lg sm:rounded-lg",
+ dialogSizeClass[size],
className,
scoped && "max-h-full",
)}
diff --git a/frontend/components/ui/input.tsx b/frontend/components/ui/input.tsx
index f6c5e4ea..2a660dcf 100644
--- a/frontend/components/ui/input.tsx
+++ b/frontend/components/ui/input.tsx
@@ -55,7 +55,7 @@ const Input = React.forwardRef(
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 flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm 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",
+ "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm 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",
"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,
diff --git a/frontend/styles/v5-atomics.css b/frontend/styles/v5-atomics.css
index 5302fa4d..96b9e5f6 100644
--- a/frontend/styles/v5-atomics.css
+++ b/frontend/styles/v5-atomics.css
@@ -6,6 +6,21 @@
Concept: "Solid + Glow" (no blur on main app).
=================================================================== */
+/* ===================================================================
+ ⚠️ DEPRECATION NOTICE (2026-04-22)
+ -------------------------------------------------------------------
+ NEW CODE MUST USE shadcn components from @/components/ui/*:
+