@jk-core/components 1.1.7 → 1.1.9

package/dist/src/common/Table/index.d.ts

@@ -1,26 +1,30 @@
+interface TableLabelType {
+    text: string | number;
+    align?: 'left' | 'center' | 'right';
+}
 interface TableHeaderType {
-    label: string;
+    label: TableLabelType;
     width?: string;
     subWidth?: string[];
-    subLabel?: string[];
+    subLabel?: TableLabelType[];
 }
 interface TableBodyType {
-    head?: string;
-    labels: string[];
+    head?: TableLabelType;
+    labels: TableLabelType[];
 }
 interface TableProps {
     /**
      * 테이블 헤더 설정
-     * - `label`: 헤더의 라벨 텍스트
+     * - `label`: 헤더의 라벨 텍스트, text와 align 속성을 포함한 객체
      * - `width`: 헤더의 너비, subWidth가 있을 경우 무시됨 (선택적)
      * - `subWidth`: 서브 헤더의 너비 배열 (선택적)
-     * - `subLabel`: 서브 헤더의 라벨 배열 (선택적
+     * - `subLabel`: 서브 헤더의 라벨, text와 align 속성을 포함한 객체 배열 (선택적)
      */
     header: TableHeaderType[];
     /**
      * 테이블 바디 설정
-     * - `head`: 바디의 헤더 텍스트 (선택적)
-     * - `labels`: 각 행의 라벨 배열
+     * - `head`: 바디의 헤더 텍스트, text와 align 속성을 포함한 객체 (선택적)
+     * - `labels`: 각 행의 라벨 배열, text와 align 속성을 포함한 객체 배열
      */
     body: TableBodyType[];
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",
@@ -41,7 +41,9 @@
   },
   "scripts": {
     "build": "yarn clean && vite build",
-    "clean": "rm -rf dist",
+    "clean:win": "if exist dist rmdir /S /Q dist",
+    "clean:unix": "rm -rf dist",
+    "clean": "node -e \"require('child_process').execSync(process.platform === 'win32' ? 'npm run clean:win' : 'npm run clean:unix', {stdio: 'inherit'})\"",
     "lint": "yarn lint:eslint && yarn lint:stylelint",
     "lint:fix": "yarn lint:eslint --fix && yarn lint:stylelint --fix",
     "lint:eslint": "eslint src",

package/src/common/Accordion/Accordion.module.scss

@@ -6,6 +6,7 @@
   border: 1px solid var(--G-20);
   transition: margin-bottom 0.25s;
   border-radius: 5px;
+  font-size: 1em;
 
   &--visible {
     margin-bottom: 10px;
@@ -20,7 +21,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 20px 10px;
-  font-size: 18px;
+  font-size: 1.5em;
   font-weight: 500;
 
   &__arrow {
@@ -47,6 +48,6 @@
 
 .content {
   white-space: pre-wrap;
-  font-size: 16px;
+  font-size: 1em;
   padding: 20px;
 }

package/src/common/Button/Button.module.scss

@@ -41,12 +41,10 @@
 
 .button {
   position: relative;
-  width: fit-content;
   border-radius: 8px;
   padding: 10px 24px;
   transition: background-color 0.1s;
-  font-size: 17px;
-  font-weight: 500;
+  font-size: 1em;
 
   &__loading {
     color: transparent !important;

package/src/common/Card/Card.module.scss

@@ -1,4 +1,5 @@
 .card {
+  position: relative;
   width: 100%;
   background-color: var(--white);
   border-radius: 5px;

package/src/common/SegmentButton/SegmentButton.module.scss

@@ -6,6 +6,7 @@
   border-radius: 8px;
   z-index: 0;
   overflow: hidden;
+  font-size: 1em;
 
   &--selector {
     position: absolute;
@@ -28,7 +29,6 @@
   padding: 8px 5px;
   color: var(--G-40);
   transition: color 0.2s;
-  font-size: 17px;
   font-weight: 500;
 
   & > div {

package/src/common/Table/Table.module.scss

@@ -24,7 +24,6 @@
     z-index: 1;
   }
 
-  thead > tr > th:last-child,
   tbody > tr > td:last-child {
     border-right: none;
   }
@@ -33,6 +32,7 @@
     flex-shrink: 0;
     background-color: var(--G-5);
     padding: 10px;
+    font-size: 1em;
     font-weight: 600;
     color: var(--G-80);
     border-right: 1px solid var(--G-30);

package/src/common/Table/index.tsx

@@ -1,31 +1,35 @@
 import { cn } from '@jk-core/utils';
 import styles from './Table.module.scss';
 
+interface TableLabelType{
+  text: string | number;
+  align?: 'left' | 'center' | 'right';
+}
 interface TableHeaderType {
-  label: string;
+  label: TableLabelType;
   width?: string;
   subWidth?: string[];
-  subLabel?:string[];
+  subLabel?:TableLabelType[];
 }
 
 interface TableBodyType{
-  head?: string;
-  labels: string[];
+  head?: TableLabelType;
+  labels: TableLabelType[];
 }
 
 interface TableProps {
   /**
    * 테이블 헤더 설정
-   * - `label`: 헤더의 라벨 텍스트
+   * - `label`: 헤더의 라벨 텍스트, text와 align 속성을 포함한 객체
    * - `width`: 헤더의 너비, subWidth가 있을 경우 무시됨 (선택적)
    * - `subWidth`: 서브 헤더의 너비 배열 (선택적)
-   * - `subLabel`: 서브 헤더의 라벨 배열 (선택적
+   * - `subLabel`: 서브 헤더의 라벨, text와 align 속성을 포함한 객체 배열 (선택적)
    */
   header: TableHeaderType[];
   /**
    * 테이블 바디 설정
-   * - `head`: 바디의 헤더 텍스트 (선택적)
-   * - `labels`: 각 행의 라벨 배열
+   * - `head`: 바디의 헤더 텍스트, text와 align 속성을 포함한 객체 (선택적)
+   * - `labels`: 각 행의 라벨 배열, text와 align 속성을 포함한 객체 배열
    */
   body: TableBodyType[];
   /**
@@ -86,17 +90,22 @@ export default function Table({ header, body, rounded, border }: TableProps) {
             {header.map((col, index) => (
               <th
                 key={index}
+                style={{ textAlign: col.label.align || 'left' }}
                 rowSpan={col.subLabel ? 1 : 2}
                 colSpan={col.subLabel ? col.subLabel.length : undefined}
               >
-                {col.label}
+                {col.label.text}
               </th>
             ))}
           </tr>
           {subLabels.length > 0 && (
             <tr>
               {subLabels.map((subLabel, index) => (
-                <th key={index}>{subLabel}</th>
+                <th
+                  style={{ textAlign: subLabel.align || 'left' }}
+                  key={index}
+                >{subLabel.text}
+                </th>
               ))}
             </tr>
           )}
@@ -104,10 +113,10 @@ export default function Table({ header, body, rounded, border }: TableProps) {
         <tbody>
           {body.map((row, rowIndex) => (
             <tr key={rowIndex}>
-              {isBodyWithHead && <th>{row?.head || ''}</th>}
+              {isBodyWithHead && <th style={{ textAlign: row?.head?.align || 'left' }}>{row?.head?.text || ''}</th>}
               {row.labels.map((col, colIndex) => (
-                <td key={colIndex}>
-                  {col}
+                <td style={{ textAlign: col.align || 'left' }} key={colIndex}>
+                  {col.text}
                 </td>
               ))}
             </tr>