design: 컴포넌트 스타일 수정
This commit is contained in:
@@ -107,7 +107,7 @@ function DomainManagementDialog({
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={triggerDisabled}>도메인 관리</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogContent className="sm:max-w-[60rem]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>도메인 관리</DialogTitle>
|
||||
</DialogHeader>
|
||||
@@ -176,7 +176,7 @@ function DomainManagementDialog({
|
||||
handleActiveChange(row.id, value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mx-auto w-[100px]">
|
||||
<SelectTrigger className="mx-auto w-[10rem]">
|
||||
<SelectValue placeholder="선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
@@ -78,7 +78,7 @@ function IPManagementDialog({ triggerDisabled }: IPManagementDialogProps) {
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={triggerDisabled}>IP 관리</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogContent className="sm:max-w-[60rem]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>IP 관리</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
"@radix-ui/react-slot": "^1.1.2",
|
||||
"@radix-ui/react-switch": "^1.1.3",
|
||||
"@radix-ui/react-tabs": "^1.1.3",
|
||||
"@radix-ui/react-visually-hidden": "^1.1.2",
|
||||
"@tanstack/react-query": "^5.67.1",
|
||||
"@tanstack/react-table": "^8.21.2",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
|
||||
@@ -26,7 +26,7 @@ export const Default: Story = {
|
||||
<DialogTrigger asChild>
|
||||
<Button>다이얼로그 열기</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogContent className="sm:max-w-[42.5rem]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>다이얼로그 제목</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as React from "react";
|
||||
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
||||
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
import { cn } from "../../lib/utils";
|
||||
@@ -41,6 +42,9 @@ const DialogContent = React.forwardRef<
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<VisuallyHidden asChild>
|
||||
<DialogTitle>Dialog</DialogTitle>
|
||||
</VisuallyHidden>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute right-6 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="size-6 text-muted-foreground" />
|
||||
|
||||
@@ -348,7 +348,7 @@ function IPManagementDialog() {
|
||||
<DialogTrigger asChild>
|
||||
<Button>IP 관리</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogContent className="sm:max-w-[60rem]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>IP 관리</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
@apply flex flex-row gap-4 data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:gap-2;
|
||||
}
|
||||
button[role="radio"] {
|
||||
@apply aspect-square size-[18px] rounded-full bg-[url(../../../public/assets/images/checkbox_off.png)] bg-contain text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[url(../../../public/assets/images/checkbox_on.png)];
|
||||
@apply aspect-square size-[1.8rem] rounded-full bg-[url(../../../public/assets/images/checkbox_off.png)] bg-contain text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[url(../../../public/assets/images/checkbox_on.png)];
|
||||
}
|
||||
button[role="radio"] + label {
|
||||
@apply text-[1.3rem] font-medium text-label;
|
||||
|
||||
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof Select>;
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Select>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectTrigger className="w-[18rem]">
|
||||
<SelectValue placeholder="선택하세요" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
||||
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof Tabs>;
|
||||
|
||||
export const Default: Story = {
|
||||
render: () => (
|
||||
<Tabs defaultValue="account" className="w-[400px]">
|
||||
<Tabs defaultValue="account" className="w-[40rem]">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
@@ -38,7 +38,7 @@ export const Default: Story = {
|
||||
|
||||
export const Underline: Story = {
|
||||
render: () => (
|
||||
<Tabs defaultValue="account" className="w-[400px]" variant="underline">
|
||||
<Tabs defaultValue="account" className="w-[40rem]" variant="underline">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
@@ -55,7 +55,7 @@ export const Underline: Story = {
|
||||
|
||||
export const Outline: Story = {
|
||||
render: () => (
|
||||
<Tabs defaultValue="account" className="w-[400px]" variant="outline">
|
||||
<Tabs defaultValue="account" className="w-[40rem]" variant="outline">
|
||||
<TabsList>
|
||||
<TabsTrigger value="account">Account</TabsTrigger>
|
||||
<TabsTrigger value="password">Password</TabsTrigger>
|
||||
|
||||
Generated
+3
@@ -181,6 +181,9 @@ importers:
|
||||
'@radix-ui/react-tabs':
|
||||
specifier: ^1.1.3
|
||||
version: 1.1.3(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
|
||||
'@radix-ui/react-visually-hidden':
|
||||
specifier: ^1.1.2
|
||||
version: 1.1.2(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.67.1
|
||||
version: 5.67.1(react@18.3.1)
|
||||
|
||||
Reference in New Issue
Block a user