공통 테마 적용

apps/cm/src/app/styles/components.css

@@ -1,151 +1,13 @@
-.card {
-  position: relative;
-  margin: 0.6rem;
-  box-sizing: border-box;
-  min-height: 2rem;
-  border-radius: 0.5rem;
-  padding: 0.6rem;
-  font-size: 1.3rem;
-  color: #666;
-}
-
-.card_width10 {
-  width: calc(10% - 12px);
-}
-
-.card_width20 {
-  width: calc(20% - 12px);
-}
-
-.card_width25 {
-  width: calc(25% - 12px);
-}
-
-.card_width30 {
-  width: calc(30% - 12px);
-}
-
-.card_width33 {
-  width: calc(33.333% - 12px);
-}
-
-.card_width40 {
-  width: calc(40% - 12px);
-}
-
-.card_width45 {
-  width: calc(45% - 12px);
-}
-
-.card_width50 {
-  width: calc(50% - 12px);
-}
-
-.card_width60 {
-  width: calc(60% - 12px);
-}
-
-.card_width66 {
-  width: calc(66.666% - 12px);
-}
-
-.card_width70 {
-  width: calc(70% - 12px);
-}
-
-.card_width75 {
-  width: calc(75% - 12px);
-}
-
-.card_width80 {
-  width: calc(80% - 12px);
-}
-
-.card_width90 {
-  width: calc(90% - 12px);
-}
-
-.card_width100 {
-  width: calc(100% - 12px);
-}
-
-.card_nopadding {
-  padding: 0 !important;
-}
-
-.card_paddingnone {
-  padding: 0 !important;
-}
-
-.card_nomargin {
-  width: 100%;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.card_title {
-  padding: 1rem;
-  margin-bottom: 1rem;
-}
-
-.card_title .leftArea {
-  display: flex;
-  align-items: center;
-}
-
-.card_title h4 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 600;
-}
-
-.topline {
-  border-top: 1px solid #ccc;
-}
-
-.bottomline {
-  border-bottom: 1px solid #e6eef3;
-  background: #fff;
-}
-
-.card-border {
-  border: 1px solid #dbe2e6;
-  background-color: rgba(255, 255, 255, 0.6);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
+/*
+ * 카드 관련 클래스(.card, .card-border, .card-header, .card-footer, .card_width*, .card_nopadding,
+ * .card_paddingnone, .card_nomargin, .card_title, .topline, .bottomline)와 테마 색상은
+ * 공통 @common/components/index.css(layout/common.css) + @common/assets base.css 변수에서 관리.
+ * 이 파일에는 앱 전용 레이아웃 차이와 페이지 전용 스타일만 둔다.
+ */
 
+/* 앱 레이아웃 차이: 카드 헤더를 카드 상단 끝까지 붙임 (공통 .card-header 에 추가) */
 .card-header {
   margin-top: -0.6rem;
-  margin-left: -0.6rem;
-  margin-right: -0.6rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e1e7eb;
-  padding: 1rem;
-}
-
-.card-footer {
-  margin-left: -0.6rem;
-  margin-right: -0.6rem;
-  margin-top: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid #e1e7eb;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-/* 블랙 테마 */
-[data-theme="black"] {
-  .card-border {
-    background-color: rgba(255, 255, 255, 0.065);
-    border-color: #38383a;
-  }
-  .card-header {
-    border-bottom-color: #3f4042;
-  }
 }
 
 /* 자료현황 스타일 */

apps/cs/src/app/styles/components.css

@@ -1,129 +1,11 @@
-.card {
-  position: relative;
-  margin: 0.6rem;
-  box-sizing: border-box;
-  min-height: 2rem;
-  border-radius: 0.5rem;
-  padding: 0.6rem;
-  font-size: 1.3rem;
-  color: #666;
-}
-
-.card_width10 {
-  width: calc(10% - 12px);
-}
-
-.card_width20 {
-  width: calc(20% - 12px);
-}
-
-.card_width25 {
-  width: calc(25% - 12px);
-}
-
-.card_width30 {
-  width: calc(30% - 12px);
-}
-
-.card_width33 {
-  width: calc(33.333% - 12px);
-}
-
-.card_width40 {
-  width: calc(40% - 12px);
-}
-
-.card_width45 {
-  width: calc(45% - 12px);
-}
-
-.card_width50 {
-  width: calc(50% - 12px);
-}
-
-.card_width60 {
-  width: calc(60% - 12px);
-}
-
-.card_width66 {
-  width: calc(66.666% - 12px);
-}
-
-.card_width70 {
-  width: calc(70% - 12px);
-}
-
-.card_width75 {
-  width: calc(75% - 12px);
-}
-
-.card_width80 {
-  width: calc(80% - 12px);
-}
-
-.card_width90 {
-  width: calc(90% - 12px);
-}
-
-.card_width100 {
-  width: calc(100% - 12px);
-}
-
-.card_nopadding {
-  padding: 0 !important;
-}
-
-.card_nomargin {
-  width: 100%;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-.topline {
-  border-top: 1px solid #ccc;
-}
-
-.bottomline {
-  border-bottom: 1px solid #e6eef3;
-  background: #fff;
-}
-
-.card-border {
-  border: 1px solid #dbe2e6;
-  background-color: rgba(255, 255, 255, 0.6);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
+/*
+ * 카드 관련 클래스(.card, .card-border, .card-header, .card-footer, .card_width*, .card_nopadding,
+ * .card_paddingnone, .card_nomargin, .card_title, .topline, .bottomline)와 테마 색상은
+ * 공통 @common/components/index.css(layout/common.css) + @common/assets base.css 변수에서 관리.
+ * 이 파일에는 앱 전용 레이아웃 차이와 페이지 전용 스타일만 둔다.
+ */
 
+/* 앱 레이아웃 차이: 카드 헤더를 카드 상단 끝까지 붙임 (공통 .card-header 에 추가) */
 .card-header {
   margin-top: -0.6rem;
-  margin-left: -0.6rem;
-  margin-right: -0.6rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e1e7eb;
-  padding: 1rem;
-}
-
-.card-footer {
-  margin-left: -0.6rem;
-  margin-right: -0.6rem;
-  margin-top: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid #e1e7eb;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-/* 블랙 테마 */
-[data-theme="black"] {
-  .card-border {
-    background-color: rgba(255, 255, 255, 0.065);
-    border-color: #38383a;
-  }
-  .card-header {
-    border-bottom-color: #3f4042;
-  }
 }

packages/common/assets/src/styles/base.css

@@ -45,6 +45,36 @@
     --form: #fff;
     --container: #f1f6f9;
     --title: #4c5e6f;
+
+    /*
+     * ── 공통 컴포넌트 색상 토큰 ──
+     * 카드·팝업·표는 components 패키지 CSS 에서 아래 변수만 사용한다.
+     * 테마별 색 변경은 이 파일의 [data-theme] 블록에서 변수 값만 바꾼다.
+     */
+    /* 카드 (.card / .card-border / .card-header / .card-footer) */
+    --card-text: #666666;
+    --card-surface: rgba(255, 255, 255, 0.6);
+    --card-border-color: #dbe2e6;
+    --card-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.06);
+    --card-divider: #e1e7eb;
+    /* 구분선 보조 클래스 (.topline / .bottomline) */
+    --line-top: #cccccc;
+    --line-bottom: #e6eef3;
+    --line-bottom-bg: #ffffff;
+    /* 팝업 (Dialog) */
+    --dialog-bg: var(--background);
+    --dialog-border: var(--border);
+    /* 표 (.table-ui) - default: 목록형 / secondary: 상세·입력형 / line: 선형 */
+    --table-th-bg: #5987bf;
+    --table-th-fg: #ffffff;
+    --table-td-bg: transparent;
+    --table-td-fg: var(--label);
+    --table-sub-th-bg: #eaf3fb;
+    --table-sub-th-fg: #647784;
+    --table-sub-td-fg: var(--foreground);
+    --table-line-border: #d4e0ea;
+    --table-line-th-bg: transparent;
+    --table-line-th-fg: #555555;
   }
   /* 블랙 테마: onasys 디자인(design/c) common.css 기준 색상 */
   [data-theme="black"] {
@@ -90,14 +120,50 @@
     --form: #3a3a3a;
     --container: #292929;
     --title: #fff;
+
+    /* 카드 (onasys 디자인 .card / .card_border) */
+    --card-text: #dcdcdc;
+    --card-surface: rgba(255, 255, 255, 0.065);
+    --card-border-color: #38383a;
+    --card-shadow: 0 0 10px -7px #000000;
+    --card-divider: #3f4042;
+    /* 구분선 (.bottomline) */
+    --line-top: #3f4042;
+    --line-bottom: #3f4042;
+    --line-bottom-bg: transparent;
+    /* 팝업 (.popup_content) */
+    --dialog-bg: #404244;
+    --dialog-border: #4e5154;
+    /* 표 (tableStyle_D) */
+    --table-th-bg: #565a5d;
+    --table-th-fg: #ffffff;
+    --table-td-bg: #464849;
+    --table-td-fg: #dadada;
+    --table-sub-th-bg: #565a5d;
+    --table-sub-th-fg: #ffffff;
+    --table-sub-td-fg: #dadada;
+    --table-line-border: #595e61;
+    --table-line-th-bg: #565a5d;
+    --table-line-th-fg: #ffffff;
+    /* 블랙 전용: 모든 셀 테두리 (table.css 의 블랙 구조 규칙에서 사용) */
+    --table-th-border: #404244;
+    --table-row-th-border: #464b4e;
+    --table-row-th-fg: #f7f7f7;
+    --table-cell-border: #595e61;
   }
   [data-theme="red"] {
     --primary: #ff4040;
     --destructive: #7388ec;
     --container: #f6f6f9;
+    --table-th-bg: #8d8d94;
+    --table-sub-th-bg: #f6f6f9;
+    --table-sub-th-fg: #808080;
   }
   [data-theme="green"] {
     --primary: #009a9a;
     --container: #f2f2f3;
+    --table-th-bg: #6bafae;
+    --table-sub-th-bg: #ebf7f7;
+    --table-sub-th-fg: #64908f;
   }
 }

packages/common/assets/src/styles/components.css

@@ -1,98 +1,7 @@
-.card {
-  position: relative;
-  margin: 0.6rem;
-  box-sizing: border-box;
-  min-height: 2rem;
-  border-radius: 0.5rem;
-  padding: 0.6rem;
-  font-size: 1.3rem;
-  color: #666;
-}
-
-.card_width10 {width:calc(10% - 12px);}
-
-.card_width20 {width:calc(20% - 12px);}
-
-.card_width25 {width:calc(25% - 12px);}
-
-.card_width30 {width:calc(30% - 12px);}
-
-.card_width33 {width:calc(33.333% - 12px);}
-
-.card_width40 {width:calc(40% - 12px);}
-
-.card_width45 {width:calc(45% - 12px);}
-
-.card_width50 {width:calc(50% - 12px);}
-
-.card_width60 {width:calc(60% - 12px);}
-
-.card_width66 {width:calc(66.666% - 12px);}
-
-.card_width70 {width:calc(70% - 12px);}
-
-.card_width75 {width:calc(75% - 12px);}
-
-.card_width80 {width:calc(80% - 12px);}
-
-.card_width90 {width:calc(90% - 12px);}
-
-.card_width100 {width:calc(100% - 12px);}
-
-.card_nopadding {padding:0 !important;}
-
-.card_nomargin {width:100%;margin:0 !important;padding:0 !important;}
-
-.topline {border-top: 1px solid #ccc;}
-
-.bottomline {border-bottom: 1px solid #e6eef3;background: #fff;}
-
-.card-border {
-  border: 1px solid #dbe2e6;
-  background-color: rgba(255, 255, 255, 0.6);
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
-.card-header {
-  margin-left: -0.6rem;
-  margin-right: -0.6rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e1e7eb;
-  padding: 1rem;
-}
-
-.card-footer {
-  margin-left: -0.6rem;
-  margin-right: -0.6rem;
-  margin-top: 0.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid #e1e7eb;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-/* 블랙 테마 (onasys 디자인 design/c common.css 의 .card / .card_border / .card_title 기준) */
-[data-theme="black"] {
-  .card {
-    color: #dcdcdc;
-  }
-  .card-border {
-    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;
-  }
-}
+/*
+ * 카드 관련 공통 클래스는 @common/components/index.css (components 패키지 ui/layout/common.css)로 통합되었다.
+ *   - .card / .card-border / .card-header / .card-footer
+ *   - .card_width* / .card_nopadding / .card_paddingnone / .card_nomargin / .card_title / .topline / .bottomline
+ * 테마별 색상은 이 패키지의 base.css 테마 변수(--card-*, --line-*)에서 관리한다.
+ * (styles/index.ts 및 패키지 exports 의 경로 호환을 위해 파일만 유지)
+ */

packages/common/components/src/ui/dialog/index.tsx

@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "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",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-[var(--dialog-border)] bg-[var(--dialog-bg)] 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

@@ -37,13 +37,14 @@
   border-radius: 0.5rem;
   padding: 0.6rem;
   font-size: 1.3rem;
-  color: #666;
+  /* 카드 색상은 테마 변수(@common/assets/styles/base.css 의 --card-*)로만 지정 */
+  color: var(--card-text, #666);
 }
 
 .card-border {
-  box-shadow: 0 0 10px -1px rgba(0, 0, 0, 0.06);
-  border: 1px solid #dbe2e6;
-  background-color: rgba(255, 255, 255, 0.6);
+  box-shadow: var(--card-shadow, 0 0 10px -1px rgba(0, 0, 0, 0.06));
+  border: 1px solid var(--card-border-color, #dbe2e6);
+  background-color: var(--card-surface, rgba(255, 255, 255, 0.6));
 }
 
 .card-header {
@@ -52,7 +53,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  border-bottom: 1px solid #e1e7eb;
+  border-bottom: 1px solid var(--card-divider, #e1e7eb);
   padding: 1rem;
 }
 
@@ -63,11 +64,111 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-top: 1px solid #e1e7eb;
+  border-top: 1px solid var(--card-divider, #e1e7eb);
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
 
+/*
+ * ── 카드 보조 클래스 (앱별 components.css 사본에서 통합) ──
+ * 색상은 테마 변수(@common/assets/styles/base.css)를 사용한다.
+ */
+.card_width10 {
+  width: calc(10% - 12px);
+}
+
+.card_width20 {
+  width: calc(20% - 12px);
+}
+
+.card_width25 {
+  width: calc(25% - 12px);
+}
+
+.card_width30 {
+  width: calc(30% - 12px);
+}
+
+.card_width33 {
+  width: calc(33.333% - 12px);
+}
+
+.card_width40 {
+  width: calc(40% - 12px);
+}
+
+.card_width45 {
+  width: calc(45% - 12px);
+}
+
+.card_width50 {
+  width: calc(50% - 12px);
+}
+
+.card_width60 {
+  width: calc(60% - 12px);
+}
+
+.card_width66 {
+  width: calc(66.666% - 12px);
+}
+
+.card_width70 {
+  width: calc(70% - 12px);
+}
+
+.card_width75 {
+  width: calc(75% - 12px);
+}
+
+.card_width80 {
+  width: calc(80% - 12px);
+}
+
+.card_width90 {
+  width: calc(90% - 12px);
+}
+
+.card_width100 {
+  width: calc(100% - 12px);
+}
+
+.card_nopadding,
+.card_paddingnone {
+  padding: 0 !important;
+}
+
+.card_nomargin {
+  width: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.card_title {
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.card_title .leftArea {
+  display: flex;
+  align-items: center;
+}
+
+.card_title h4 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+.topline {
+  border-top: 1px solid var(--line-top, #ccc);
+}
+
+.bottomline {
+  border-bottom: 1px solid var(--line-bottom, #e6eef3);
+  background: var(--line-bottom-bg, #fff);
+}
+
 #lnb {
   position: relative;
   width: 100%;
@@ -112,10 +213,4 @@
   }
 }
 
-/* 블랙 테마 팝업 (onasys 디자인 .popup_content 기준) */
-[data-theme="black"] {
-  .dialog-content {
-    background: #404244;
-    border-color: #4e5154;
-  }
-}
+/* 팝업 색상은 테마 변수(--dialog-bg / --dialog-border)로 지정 (Dialog 컴포넌트에서 사용) */

packages/common/components/src/ui/table/table.css

@@ -14,8 +14,13 @@
     @apply px-2 py-[1.2rem] text-[1.3rem] font-normal leading-[1.2];
   }
 
+  /*
+   * 색상은 테마 변수(@common/assets/styles/base.css)만 사용한다.
+   * 테마별 색 변경은 base.css 의 [data-theme] 블록에서 --table-* 값만 바꾼다.
+   */
   .table-ui.default th {
-    @apply bg-[#5987bf] text-[#fff];
+    background-color: var(--table-th-bg);
+    color: var(--table-th-fg);
   }
   .table-ui th.data-table-group-header {
     background-image: linear-gradient(
@@ -30,57 +35,53 @@
     background-size: 100% 1px;
   }
   .table-ui.default td {
-    @apply border-b border-b-border text-label;
+    @apply border-b border-b-border;
+    background-color: var(--table-td-bg);
+    color: var(--table-td-fg);
   }
   .table-ui.secondary th {
-    @apply border border-border bg-[#eaf3fb] text-[#647784];
+    @apply border border-border;
+    background-color: var(--table-sub-th-bg);
+    color: var(--table-sub-th-fg);
   }
   .table-ui.secondary td {
     @apply border border-border;
+    background-color: var(--table-td-bg);
+    color: var(--table-sub-td-fg);
   }
   .table-ui.line tr {
-    @apply border-b border-t border-[#d4e0ea] bg-transparent;
+    @apply border-b border-t bg-transparent;
+    border-color: var(--table-line-border);
   }
   .table-ui.line th {
-    @apply border-b-2 border-[#d4e0ea] text-[#555];
+    @apply border-b-2;
+    border-color: var(--table-line-border);
+    background-color: var(--table-line-th-bg);
+    color: var(--table-line-th-fg);
+  }
+  .table-ui.line td {
+    background-color: var(--table-td-bg);
+    color: var(--table-sub-td-fg);
   }
 
   /*
-   * 블랙 테마 표: onasys 디자인 tableStyle_D 기준 (default·secondary·line 공통)
-   * - 열 제목(th scope=col): 배경 #565a5d / 글자 #fff / 테두리 #404244
-   * - 행 제목(th scope=row): 배경 #565a5d / 글자 #f7f7f7 / 테두리 #464b4e
-   * - 내용(td): 배경 #464849 / 글자 #dadada / 테두리 #595e61
+   * 블랙 테마 구조 규칙 (onasys 디자인 tableStyle_D): 모든 셀에 테두리 표시.
+   * 색상은 변수 사용 - 값은 base.css 의 [data-theme="black"] 에서 관리.
    */
   [data-theme="black"] {
     .table-ui tr {
       @apply bg-transparent;
     }
     .table-ui th {
-      @apply border border-[#404244] bg-[#565a5d] font-medium text-[#fff];
+      border: 1px solid var(--table-th-border);
     }
     .table-ui th[scope="row"] {
-      @apply border-[#464b4e] font-normal text-[#f7f7f7];
+      border-color: var(--table-row-th-border);
+      font-weight: 400;
+      color: var(--table-row-th-fg);
     }
     .table-ui td {
-      @apply border border-[#595e61] bg-[#464849] text-[#dadada];
-    }
-  }
-
-  [data-theme="red"] {
-    .table-ui.default th {
-      @apply bg-[#8d8d94];
-    }
-    .table-ui.secondary th {
-      @apply bg-[#f6f6f9] text-[#808080];
-    }
-  }
-
-  [data-theme="green"] {
-    .table-ui.default th {
-      @apply bg-[#6bafae];
-    }
-    .table-ui.secondary th {
-      @apply bg-[#ebf7f7] text-[#64908f];
+      border: 1px solid var(--table-cell-border);
     }
   }
 }