ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: 컴포넌트 스타일 수정

Browse Source
This commit is contained in:
chanii8
2025-03-14 18:13:25 +09:00
parent 9277ffbde9
commit 5505838bc5
10 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/cs/src/pages/site/ui/domain-management-dialog.tsx
+2 -2
View File
@@ -107,7 +107,7 @@ function DomainManagementDialog({
<DialogTrigger asChild> <DialogTrigger asChild>
<Button disabled={triggerDisabled}>도메인 관리</Button> <Button disabled={triggerDisabled}>도메인 관리</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[600px]"> <DialogContent className="sm:max-w-[60rem]">
<DialogHeader> <DialogHeader>
<DialogTitle>도메인 관리</DialogTitle> <DialogTitle>도메인 관리</DialogTitle>
</DialogHeader> </DialogHeader>
@@ -176,7 +176,7 @@ function DomainManagementDialog({
handleActiveChange(row.id, value) handleActiveChange(row.id, value)
} }
> >
<SelectTrigger className="mx-auto w-[100px]"> <SelectTrigger className="mx-auto w-[10rem]">
<SelectValue placeholder="선택" /> <SelectValue placeholder="선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
apps/cs/src/pages/site/ui/ip-management-dialog.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ function IPManagementDialog({ triggerDisabled }: IPManagementDialogProps) {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button disabled={triggerDisabled}>IP 관리</Button> <Button disabled={triggerDisabled}>IP 관리</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[600px]"> <DialogContent className="sm:max-w-[60rem]">
<DialogHeader> <DialogHeader>
<DialogTitle>IP 관리</DialogTitle> <DialogTitle>IP 관리</DialogTitle>
</DialogHeader> </DialogHeader>
packages/common/components/package.json
+1
View File
@@ -39,6 +39,7 @@
"@radix-ui/react-slot": "^1.1.2", "@radix-ui/react-slot": "^1.1.2",
"@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-switch": "^1.1.3",
"@radix-ui/react-tabs": "^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-query": "^5.67.1",
"@tanstack/react-table": "^8.21.2", "@tanstack/react-table": "^8.21.2",
"@types/js-cookie": "^3.0.6", "@types/js-cookie": "^3.0.6",
packages/common/components/src/ui/dialog/dialog.stories.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export const Default: Story = {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button>다이얼로그 열기</Button> <Button>다이얼로그 열기</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[425px]"> <DialogContent className="sm:max-w-[42.5rem]">
<DialogHeader> <DialogHeader>
<DialogTitle>다이얼로그 제목</DialogTitle> <DialogTitle>다이얼로그 제목</DialogTitle>
</DialogHeader> </DialogHeader>
packages/common/components/src/ui/dialog/index.tsx
+4
View File
@@ -1,5 +1,6 @@
import * as React from "react"; import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog"; import * as DialogPrimitive from "@radix-ui/react-dialog";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { X } from "lucide-react"; import { X } from "lucide-react";
import { cn } from "../../lib/utils"; import { cn } from "../../lib/utils";
@@ -41,6 +42,9 @@ const DialogContent = React.forwardRef<
)} )}
{...props} {...props}
> >
<VisuallyHidden asChild>
<DialogTitle>Dialog</DialogTitle>
</VisuallyHidden>
{children} {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"> <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" /> <X className="size-6 text-muted-foreground" />
packages/common/components/src/ui/layout/layout.stories.tsx
+1 -1
View File
@@ -348,7 +348,7 @@ function IPManagementDialog() {
<DialogTrigger asChild> <DialogTrigger asChild>
<Button>IP 관리</Button> <Button>IP 관리</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent className="sm:max-w-[600px]"> <DialogContent className="sm:max-w-[60rem]">
<DialogHeader> <DialogHeader>
<DialogTitle>IP 관리</DialogTitle> <DialogTitle>IP 관리</DialogTitle>
</DialogHeader> </DialogHeader>
packages/common/components/src/ui/radio-group/radio-group.css
+1 -1
View File
@@ -5,7 +5,7 @@
@apply flex flex-row gap-4 data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:gap-2; @apply flex flex-row gap-4 data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:gap-2;
} }
button[role="radio"] { 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 { button[role="radio"] + label {
@apply text-[1.3rem] font-medium text-label; @apply text-[1.3rem] font-medium text-label;
packages/common/components/src/ui/select/select.stories.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ type Story = StoryObj<typeof Select>;
export const Default: Story = { export const Default: Story = {
render: () => ( render: () => (
<Select> <Select>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-[18rem]">
<SelectValue placeholder="선택하세요" /> <SelectValue placeholder="선택하세요" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
packages/common/components/src/ui/tabs/tabs.stories.tsx
+3 -3
View File
@@ -21,7 +21,7 @@ type Story = StoryObj<typeof Tabs>;
export const Default: Story = { export const Default: Story = {
render: () => ( render: () => (
<Tabs defaultValue="account" className="w-[400px]"> <Tabs defaultValue="account" className="w-[40rem]">
<TabsList> <TabsList>
<TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger>
@@ -38,7 +38,7 @@ export const Default: Story = {
export const Underline: Story = { export const Underline: Story = {
render: () => ( render: () => (
<Tabs defaultValue="account" className="w-[400px]" variant="underline"> <Tabs defaultValue="account" className="w-[40rem]" variant="underline">
<TabsList> <TabsList>
<TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger>
@@ -55,7 +55,7 @@ export const Underline: Story = {
export const Outline: Story = { export const Outline: Story = {
render: () => ( render: () => (
<Tabs defaultValue="account" className="w-[400px]" variant="outline"> <Tabs defaultValue="account" className="w-[40rem]" variant="outline">
<TabsList> <TabsList>
<TabsTrigger value="account">Account</TabsTrigger> <TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="password">Password</TabsTrigger> <TabsTrigger value="password">Password</TabsTrigger>
pnpm-lock.yaml
Generated
+3
View File
@@ -181,6 +181,9 @@ importers:
'@radix-ui/react-tabs': '@radix-ui/react-tabs':
specifier: ^1.1.3 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) 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': '@tanstack/react-query':
specifier: ^5.67.1 specifier: ^5.67.1
version: 5.67.1(react@18.3.1) version: 5.67.1(react@18.3.1)