design: 공통 컴포넌트 다크 테마 스타일 적용
This commit is contained in:
@@ -32,6 +32,10 @@
|
||||
--chart-5: #ff7865;
|
||||
--chart-6: #e65db5;
|
||||
--radius: 1rem;
|
||||
--field: #fff;
|
||||
--form: #fff;
|
||||
--container: #f1f6f9;
|
||||
--title: #4c5e6f;
|
||||
}
|
||||
[data-mode="dark"] {
|
||||
--background: #0a0a0a;
|
||||
@@ -62,5 +66,9 @@
|
||||
--chart-5: #ffbcad;
|
||||
--chart-6: #f4a0d3;
|
||||
--radius: 1rem;
|
||||
--field: #5b6269;
|
||||
--form: #1a1a1a;
|
||||
--container: #0a0a0a;
|
||||
--title: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 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 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{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" />
|
||||
<X className="size-6 text-muted-foreground" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
@@ -71,7 +71,7 @@ const DialogFooter = ({
|
||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||
<div
|
||||
className={cn(
|
||||
"-mx-6 flex flex-col-reverse border-t border-t-[#eaeef5] px-6 pt-6 sm:flex-row sm:justify-end sm:space-x-2",
|
||||
"-mx-6 flex flex-col-reverse border-t border-t-border px-6 pt-6 sm:flex-row sm:justify-end sm:space-x-2",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
|
||||
<DialogPrimitive.Title
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"-mx-6 border-b border-b-[#eaeef5] px-6 pb-6 text-[1.4rem] font-semibold leading-none tracking-tight",
|
||||
"-mx-6 border-b border-b-border px-6 pb-6 text-[1.4rem] font-semibold leading-none tracking-tight text-foreground",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -18,14 +18,16 @@ export function Header() {
|
||||
});
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border">
|
||||
<header className="sticky top-0 box-border flex h-[5rem] w-full items-center justify-between border-b border-solid border-border bg-background">
|
||||
<div className="flex items-center">
|
||||
<div className="MobMenuBtn">
|
||||
<img src={images.menuBtn} />
|
||||
</div>
|
||||
<h1 className="flex items-center gap-4">
|
||||
<img src={images.logo} className="h-[3rem]" alt="logo" />
|
||||
<span className="text-[1.8rem] font-semibold">통합플랫폼관리</span>
|
||||
<span className="text-[1.8rem] font-semibold text-foreground">
|
||||
통합플랫폼관리
|
||||
</span>
|
||||
</h1>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
|
||||
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
|
||||
<input
|
||||
type={type}
|
||||
className={cn(
|
||||
"placeholder:text-placeholder flex h-[3.2rem] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
"placeholder:text-placeholder bg-form flex h-[3.2rem] w-full rounded-md border border-input px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||
className,
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="flex h-[5rem] w-full shrink-0 items-center border-t border-solid border-border p-4">
|
||||
<p>© 2025 Ona And All. All Rights Reserved.</p>
|
||||
<footer className="flex h-[5rem] w-full shrink-0 items-center border-t border-solid border-border bg-background p-4">
|
||||
<p className="text-foreground">
|
||||
© 2025 Ona And All. All Rights Reserved.
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@ export function LNB() {
|
||||
return (
|
||||
<div
|
||||
id="lnb"
|
||||
className="!w-[22rem] overflow-auto border-r border-solid border-border"
|
||||
className="!w-[22rem] overflow-auto border-r border-solid border-border bg-background"
|
||||
>
|
||||
<ul>
|
||||
<li id="m_dashboard">
|
||||
|
||||
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
|
||||
<SelectPrimitive.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex h-[3.2rem] w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent px-4 py-2 text-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
|
||||
"bg-form flex h-[3.2rem] w-full items-center justify-between whitespace-nowrap rounded-sm border border-input px-4 py-2 text-[1.3rem] text-label ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -63,7 +63,7 @@ const TableRow = React.forwardRef<
|
||||
<tr
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"border-b bg-white transition-colors data-[state=selected]:bg-muted",
|
||||
"border-b bg-background transition-colors data-[state=selected]:bg-muted",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
@@ -89,7 +89,10 @@ const TableCell = React.forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<td
|
||||
ref={ref}
|
||||
className={cn("align-middle [&:has([role=checkbox])]:pr-0", className)}
|
||||
className={cn(
|
||||
"align-middle text-foreground [&:has([role=checkbox])]:pr-0",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
|
||||
@@ -1,22 +1,38 @@
|
||||
th {
|
||||
@tailwind components;
|
||||
|
||||
@layer components {
|
||||
th {
|
||||
@apply bg-[#5987bf] px-4 py-[1.2rem] text-[1.3rem] font-medium leading-[1.2] text-[#fff];
|
||||
}
|
||||
td {
|
||||
@apply border-b border-b-[#e0e6ea] px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-[#666];
|
||||
}
|
||||
}
|
||||
td {
|
||||
@apply border-b border-b-border px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2] text-[#666];
|
||||
}
|
||||
|
||||
.secondary th {
|
||||
@apply border border-[#e0e6ea] bg-[#eaf3fb] text-[#647784];
|
||||
}
|
||||
.secondary th {
|
||||
@apply border border-border bg-[#eaf3fb] text-[#647784];
|
||||
}
|
||||
|
||||
.secondary td {
|
||||
@apply border border-[#e0e6ea];
|
||||
}
|
||||
.secondary td {
|
||||
@apply border border-border;
|
||||
}
|
||||
|
||||
.line th {
|
||||
.line th {
|
||||
@apply border-0 border-b-2 border-t border-b-[#d4e0ea] border-t-[#d4e0ea] bg-[#fff] text-[#555];
|
||||
}
|
||||
}
|
||||
|
||||
.line td {
|
||||
@apply border-b border-b-[#e0e6ea];
|
||||
.line td {
|
||||
@apply border-b border-b-border;
|
||||
}
|
||||
|
||||
[data-mode="dark"] {
|
||||
th {
|
||||
@apply bg-[#5e7b9c] text-[#fff];
|
||||
}
|
||||
.secondary th {
|
||||
@apply bg-[#1a1c1d];
|
||||
}
|
||||
.line th {
|
||||
@apply bg-[#0a0a0a];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,6 +50,10 @@ export default {
|
||||
4: "var(--chart-4)",
|
||||
5: "var(--chart-5)",
|
||||
},
|
||||
field: "var(--field)",
|
||||
form: "var(--form)",
|
||||
container: "var(--container)",
|
||||
title: "var(--title)",
|
||||
},
|
||||
keyframes: {
|
||||
"accordion-down": {
|
||||
|
||||
Reference in New Issue
Block a user