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

skin 및 레이아웃 작업

Browse Source
This commit is contained in:
jcchoi
2026-10-12 17:22:37 +09:00
parent f816bf005e
commit b96b78fa0b
9 changed files with 174 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/assets/src/styles/base.css
+15 -13
View File
@@ -46,29 +46,31 @@
--container: #f1f6f9;
--title: #4c5e6f;
}
/* 블랙 테마: onasys 디자인(design/c) common.css 기준 색상 */
[data-theme="black"] {
--background: #0a0a0a;
--background: #292929;
--foreground: #fafafa;
--card: #0a0a0a;
--card: #353638;
--card-foreground: #fafafa;
--popover: #0a0a0a;
--popover: #4e5154;
--popover-foreground: #fafafa;
--primary: #2094fa;
--primary-foreground: #171717;
/* 버튼 글자색 (onasys 디자인: button { color: #fff }) */
--primary-foreground: #ffffff;
--primary-transparent: rgba(32, 148, 250, 0.1);
--secondary: #262626;
--secondary: #353638;
--secondary-foreground: #fafafa;
--muted: #262626;
--muted: #3a3a3a;
--muted-foreground: #a2a2a2;
--accent: #262626;
--accent: #383b3e;
--accent-foreground: #fafafa;
--destructive: #d23c3c;
--destructive-foreground: #fafafa;
--border: #262626;
--input: #262626;
--border: #404244;
--input: #5e6165;
--label: #f1f1f1;
--placeholder: #c4c4c4;
--ring: #d4d4d4;
--placeholder: #888888;
--ring: #727c8a;
--chart-1: #66b3ff;
--chart-2: #66f0f2;
--chart-3: #66f9b8;
@@ -85,8 +87,8 @@
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--field: #5b6269;
--form: #1a1a1a;
--container: #0a0a0a;
--form: #3a3a3a;
--container: #292929;
--title: #fff;
}
[data-theme="red"] {
packages/common/assets/src/styles/components.css
+13 -2
View File
@@ -75,13 +75,24 @@
padding-bottom: 1rem;
}
/* 블랙 테마 */
/* 블랙 테마 (onasys 디자인 design/c common.css 의 .card / .card_border / .card_title 기준) */
[data-theme="black"] {
.card {
color: #dcdcdc;
}
.card-border {
border-color: #3f4042;
border-color: #38383a;
background-color: rgba(255, 255, 255, 0.065);
box-shadow: 0 0 10px -7px #000000;
}
.card-header {
border-bottom-color: #3f4042;
}
.card-footer {
border-top-color: #3f4042;
}
.bottomline {
border-bottom-color: #3f4042;
background: transparent;
}
}
packages/common/components/src/ui/button/button.css
+21 -11
View File
@@ -1,37 +1,47 @@
@tailwind components;
@layer components {
button[role="button"] {
button[data-slot="button"] {
@apply text-[1.3rem] transition-opacity hover:opacity-90;
}
button[role="button"].primary {
button[data-slot="button"].primary {
@apply bg-primary;
}
button[role="button"].green {
button[data-slot="button"].green {
@apply bg-[#179d5b];
}
button[role="button"].sky {
button[data-slot="button"].sky {
@apply bg-[rgba(50,154,203,1)];
}
button[role="button"].yellow {
button[data-slot="button"].yellow {
@apply bg-[rgba(243,201,0,1)] text-[#1e1e1e];
}
button[role="button"].orange {
button[data-slot="button"].orange {
@apply bg-[#c97600];
}
button[role="button"].emerald {
button[data-slot="button"].emerald {
@apply bg-[#0691d1];
}
button[role="button"].white {
button[data-slot="button"].white {
@apply border border-border bg-[rgba(255,255,255,1)] text-[#666];
}
button[role="button"].red {
button[data-slot="button"].red {
@apply bg-destructive;
}
button[role="button"].gray {
button[data-slot="button"].gray {
@apply bg-[#8a8a8a];
}
button[role="button"].lightGray {
button[data-slot="button"].lightGray {
@apply bg-[rgba(235,235,235,1)] text-[#707070];
}
/* 블랙 테마 버튼 글자색 (onasys 디자인 design/c: 기본 #fff, btn_white #666, btn_gray2 #9e9e9e) */
[data-theme="black"] {
button[data-slot="button"].yellow {
@apply text-[#ffffff];
}
button[data-slot="button"].lightGray {
@apply text-[#9e9e9e];
}
}
}
packages/common/components/src/ui/button/index.tsx
+1
View File
@@ -61,6 +61,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(buttonVariants({ variant, size, className }), color)}
ref={ref}
{...props}
packages/common/components/src/ui/dialog/index.tsx
+1 -1
View File
@@ -37,7 +37,7 @@ 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 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-&lsqb;state=closed&rsqb;:slide-out-to-top-&lsqb;48%&rsqb; data-[state=open]:slide-in-from-left-1/2 data-&lsqb;state=open&rsqb;:slide-in-from-top-&lsqb;48%&rsqb; sm:rounded-lg",
"dialog-content 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-&lsqb;state=closed&rsqb;:slide-out-to-top-&lsqb;48%&rsqb; data-[state=open]:slide-in-from-left-1/2 data-&lsqb;state=open&rsqb;:slide-in-from-top-&lsqb;48%&rsqb; sm:rounded-lg",
className,
)}
{...props}
packages/common/components/src/ui/layout/common.css
+9 -114
View File
@@ -92,120 +92,7 @@
letter-spacing: -2px;
background: #d71a21;
}
#lnb > ul {
position: relative;
}
#lnb > ul > li {
position: relative;
padding: 0px 0;
width: 93%;
margin: 0 3.5%;
}
#lnb > ul > li.on.noDepth a {
color: #ffffff;
background: #0589ff;
border-radius: 5px;
}
#lnb > ul > li.on > a {
background: #ffffff;
color: #3a8bdd;
}
#lnb > ul > li > a {
display: block;
width: 100%;
padding: 14px 0;
margin: 0 auto;
font-family: "Noto Sans KR", sans-serif;
font-size: 14px;
font-weight: 500;
background: #ffffff;
border-radius: 5px;
text-indent: 7px;
color: #777777;
transition: all 0.1s ease-in-out;
white-space: nowrap;
line-height: 16px;
vertical-align: middle;
}
#lnb > ul > li > a i.arrow {
position: absolute;
top: 16px;
left: auto;
right: 8px;
font-size: 14px;
text-indent: 0;
color: #c5c5c5;
}
#lnb > ul > li a:hover {
color: #277cc7;
background: #edf4fb;
}
#lnb > ul > li.on a i.arrow {
transform: rotate(-180deg);
margin-top: 0px;
}
#lnb > ul > li .mnicon_1 {
position: relative;
top: 1px;
transition: all 0.1s ease-in-out;
font-size: 15px;
padding: 0 8px 0 0;
opacity: 0.7;
}
#lnb > ul > li > ul {
display: none;
background: #eaf5ff;
border-radius: 5px;
}
#lnb > ul > li > ul > li {
position: relative;
cursor: pointer;
}
#lnb > ul > li > ul > li > a {
display: block;
padding: 10px 0;
font-size: 13px;
text-indent: 30px;
font-weight: 400;
color: #6387ad;
background-color: #eaf5ff;
border-radius: 5px;
letter-spacing: -0.02em;
}
#lnb > ul > li > ul > li > a i {
font-size: 16px;
padding: 0 10px 0 0;
position: relative;
top: 3px;
}
#lnb > ul > li > ul > li > a i.right {
font-size: 11px;
padding: 0 0 0 2px;
position: relative;
top: 1px;
}
#lnb > ul > li > ul > li .mnicon_1 {
position: absolute;
top: 11px;
left: 37px;
width: 23px;
height: 23px;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
#lnb > ul > li > ul > li.on a {
color: #ffffff;
background: #2c94ff;
}
#lnb > ul > li > ul > li a:hover {
color: #227fd2;
background: #deeefd;
}
#lnb > ul > li > ul > li.on a:hover {
color: #ffffff;
background: #0589ff;
}
/* 구 LNB 마크업(#lnb > ul > li > a …)용 규칙 제거: 현재 LNB(Sidebar 기반)의 단일 메뉴에만 적용되어 정렬·롤오버가 하위메뉴 있는 메뉴와 달라지는 문제 발생 */
[data-theme="blue"] {
footer {
@@ -224,3 +111,11 @@
color: #fff;
}
}
/* 블랙 테마 팝업 (onasys 디자인 .popup_content 기준) */
[data-theme="black"] {
.dialog-content {
background: #404244;
border-color: #4e5154;
}
}
packages/common/components/src/ui/lnb/index.tsx
+24 -6
View File
@@ -36,6 +36,18 @@ const appConfig = getConfig();
const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
const isLoggedIn = !!userId;
/** 1뎁스 메뉴 아이콘 영역: 아이콘 글리프 폭과 무관하게 동일한 너비로 고정해 아이콘·메뉴명 좌측 라인을 맞춤 */
const TOP_MENU_ICON_CLASS = "inline-flex w-[2rem] shrink-0 items-center justify-center";
/**
* 메뉴 롤오버: 하위 메뉴 유무와 관계없이 동일하게 테마 주 색상(--primary) 계열로 표시
* - white: 연한 파랑 배경 + 파랑 글자 / red: 연한 빨강 + 빨강 / black: 어두운 배경 위 주 색상
* - blue·green 은 sidebar.css 의 테마 전용 규칙(!important)이 우선 적용됨
*/
const MENU_HOVER_CLASS = "group/menu-button hover:bg-primary-transparent";
/** 롤오버 시 아이콘·메뉴명 색상 (버튼 hover 를 group 으로 받아 자식 요소에 적용) */
const MENU_HOVER_TEXT_CLASS = "group-hover/menu-button:text-primary";
export function LNB({
viewOnly,
currentPath,
@@ -251,7 +263,9 @@ export function LNB({
onClick: handleClick,
};
const menuClassName = cn(
"h-auto cursor-pointer py-4 text-[1.4rem] text-label transition-colors hover:bg-accent focus-visible:ring-inset",
"h-auto cursor-pointer py-4 text-[1.4rem] text-label transition-colors focus-visible:ring-inset",
MENU_HOVER_CLASS,
!isMatched && "hover:text-primary",
isMatched && "bg-accent !text-primary",
!isSidebarOpen && "justify-center",
);
@@ -285,17 +299,16 @@ export function LNB({
<i
className={cn(
"diveicon",
TOP_MENU_ICON_CLASS,
`di-${item.iconNm}`,
isMatched ? "text-primary" : "text-label",
isMatched ? "text-primary" : cn("text-label", MENU_HOVER_TEXT_CLASS),
!hideLabel && "ml-2",
)}
/>
<span
className={cn(
"whitespace-nowrap",
isMatched
? "text-primary"
: "text-label group-hover/menu-button:text-foreground",
isMatched ? "text-primary" : cn("text-label", MENU_HOVER_TEXT_CLASS),
hideLabel && "hidden",
)}
>
@@ -335,6 +348,7 @@ export function LNB({
<SidebarMenuButton
className={cn(
"flex h-auto items-center py-4 pr-2 text-[1.4rem] focus-visible:ring-inset",
MENU_HOVER_CLASS,
isOpen && "bg-transparent",
!isSidebarOpen && "justify-center",
)}
@@ -345,13 +359,16 @@ export function LNB({
<i
className={cn(
"diveicon text-label",
MENU_HOVER_TEXT_CLASS,
TOP_MENU_ICON_CLASS,
`di-${item.iconNm}`,
!hideLabel && "ml-2",
)}
/>
<span
className={cn(
"whitespace-nowrap text-label group-hover/menu-button:text-foreground",
"whitespace-nowrap text-label",
MENU_HOVER_TEXT_CLASS,
hideLabel && "hidden",
)}
>
@@ -364,6 +381,7 @@ export function LNB({
<ChevronRight
className={cn(
"ml-auto !size-6 text-label transition-transform",
MENU_HOVER_TEXT_CLASS,
isOpen && "rotate-90",
hideLabel && "hidden",
)}
packages/common/components/src/ui/sidebar/sidebar.css
+76 -4
View File
@@ -37,11 +37,11 @@
color: #fff !important;
}
[data-radix-popper-content-wrapper] > * {
color: #0a0a0a !important;
color: #292929 !important;
background: #fff !important;
}
[data-radix-popper-content-wrapper] > *:hover {
color: #0a0a0a !important;
color: #292929 !important;
background: #fff !important;
}
}
@@ -52,6 +52,78 @@
}
}
/* 블랙 테마 LNB (참고: onasys design/c/dashboard/basic.html 의 #lnb) */
[data-theme="black"] {
[data-sidebar="sidebar-wrapper"] {
background: #292929 !important;
/* 콘텐츠 영역(#292929)과 구분되는 우측 경계선 (참고: .left_menu border-right) */
border-color: #3a3d3e !important;
}
[data-sidebar="sidebar"],
[data-sidebar="sidebar"] > [data-sidebar="content"],
[data-sidebar="sidebar-wrapper"] [data-sidebar="sidebar"] {
background: #292929 !important;
}
/* 1뎁스 메뉴 */
[data-sidebar="menu-button"] {
background: #292929 !important;
border-radius: 0 !important;
}
[data-sidebar="menu-button"],
[data-sidebar="menu-button"] * {
color: #dadada !important;
}
/* 롤오버: 흰색 좌측 바 + 어두운 배경 */
[data-sidebar="menu-button"]:hover {
background: linear-gradient(to right, #ffffff 1.5%, #303233 2%) !important;
}
[data-sidebar="menu-button"]:hover,
[data-sidebar="menu-button"]:hover * {
color: #ffffff !important;
}
/* 현재 메뉴 */
[data-sidebar="menu-button"][data-matched="true"] {
background: #555555 !important;
}
[data-sidebar="menu-button"][data-matched="true"],
[data-sidebar="menu-button"][data-matched="true"] * {
color: #ffffff !important;
}
/* 2뎁스(하위) 메뉴 */
[data-sidebar="menu-sub"] {
background: #292929 !important;
border-color: #292929 !important;
}
[data-sidebar="menu-sub-button"] {
background: #292929 !important;
border-radius: 0 !important;
}
[data-sidebar="menu-sub-button"],
[data-sidebar="menu-sub-button"] * {
color: #dadada !important;
}
[data-sidebar="menu-sub-button"]:hover {
background: #303233 !important;
}
[data-sidebar="menu-sub-button"][data-matched="true"],
[data-sidebar="menu-sub-button"][data-matched="true"]:hover {
background: #555555 !important;
}
[data-sidebar="menu-sub-button"]:hover,
[data-sidebar="menu-sub-button"]:hover *,
[data-sidebar="menu-sub-button"][data-matched="true"],
[data-sidebar="menu-sub-button"][data-matched="true"] * {
color: #ffffff !important;
}
/* LNB 접기/펼치기 버튼 */
[data-sidebar="trigger"] > svg {
color: #dadada !important;
}
}
[data-theme="green"] {
[data-sidebar="sidebar-wrapper"] {
background: none;
@@ -87,11 +159,11 @@
color: #fff !important;
}
[data-radix-popper-content-wrapper] > * {
color: #0a0a0a !important;
color: #292929 !important;
background: #fff !important;
}
[data-radix-popper-content-wrapper] > *:hover {
color: #0a0a0a !important;
color: #292929 !important;
background: #fff !important;
}
}
packages/common/components/src/ui/table/table.css
+14 -11
View File
@@ -45,21 +45,24 @@
@apply border-b-2 border-[#d4e0ea] text-[#555];
}
/*
* 블랙 테마 표: onasys 디자인 tableStyle_D 기준 (default·secondary·line 공통)
* - 열 제목(th scope=col): 배경 #565a5d / 글자 #fff / 테두리 #404244
* - 행 제목(th scope=row): 배경 #565a5d / 글자 #f7f7f7 / 테두리 #464b4e
* - 내용(td): 배경 #464849 / 글자 #dadada / 테두리 #595e61
*/
[data-theme="black"] {
.table-ui.default tr {
@apply bg-[#545556];
.table-ui tr {
@apply bg-transparent;
}
.table-ui.default th {
@apply bg-[#62686d];
.table-ui th {
@apply border border-[#404244] bg-[#565a5d] font-medium text-[#fff];
}
.table-ui.secondary tr {
@apply bg-[#565b5f];
.table-ui th[scope="row"] {
@apply border-[#464b4e] font-normal text-[#f7f7f7];
}
.table-ui.secondary th {
@apply bg-[#5e7b9c] text-[#fff];
}
.table-ui.line th {
@apply text-[#fff];
.table-ui td {
@apply border border-[#595e61] bg-[#464849] text-[#dadada];
}
}