@jk-core/components 1.1.17 → 1.1.18

package/src/common/Table/index.tsx

@@ -1,128 +1,128 @@
-import { cn } from '@jk-core/utils';
-import styles from './Table.module.scss';
-
-interface TableLabelType{
-  text: string | number;
-  align?: 'left' | 'center' | 'right';
-}
-interface TableHeaderType {
-  label: TableLabelType;
-  width?: string;
-  subWidth?: string[];
-  subLabel?:TableLabelType[];
-}
-
-interface TableBodyType{
-  head?: TableLabelType;
-  labels: TableLabelType[];
-}
-
-interface TableProps {
-  /**
-   * 테이블 헤더 설정
-   * - `label`: 헤더의 라벨 텍스트, text와 align 속성을 포함한 객체
-   * - `width`: 헤더의 너비, subWidth가 있을 경우 무시됨 (선택적)
-   * - `subWidth`: 서브 헤더의 너비 배열 (선택적)
-   * - `subLabel`: 서브 헤더의 라벨, text와 align 속성을 포함한 객체 배열 (선택적)
-   */
-  header: TableHeaderType[];
-  /**
-   * 테이블 바디 설정
-   * - `head`: 바디의 헤더 텍스트, text와 align 속성을 포함한 객체 (선택적)
-   * - `labels`: 각 행의 라벨 배열, text와 align 속성을 포함한 객체 배열
-   */
-  body: TableBodyType[];
-  /**
-   * 테이블의 모서리를 둥글게 처리할지 여부
-   * - `rounded`: true일 경우 모서리가 둥글게 처리됨
-   */
-  rounded?: boolean;
-  /**
-   * 테이블의 테두리 표시 여부
-   * - `border`: true일 경우 테이블에 테두리가 표시됨
-   */
-  border?: boolean;
-}
-
-/**
- * 테이블 컴포넌트
- * 헤더와 바디를 설정하여 테이블을 렌더링합니다.
- * - `header`: 테이블의 헤더 설정
- * - `body`: 테이블의 바디 설정
- * - `rounded`: 테이블의 모서리를 둥글게 처리할지 여부
- * - `border`: 테이블에 테두리를 표시할지 여부
- */
-export default function Table({ header, body, rounded, border }: TableProps) {
-  const subLabels = header.flatMap(col => col.subLabel || []);
-  const isBodyWithHead = body.some(row => row.head);
-
-  return (
-    <div className={cn({
-      [styles.wrapper]: true,
-      [styles.wrapper__rounded]: !!rounded,
-      [styles.wrapper__border]: !!border,
-    })}
-    >
-
-      <table className={styles.table}>
-        <colgroup>
-          {isBodyWithHead && <col style={{ width: '100px' }} />}
-          {header.map((col, colIndex) =>
-            col.subLabel
-              ? col.subLabel.map((_, subIndex) => (
-                <col
-                  key={`col-${colIndex}-sub-${subIndex}`}
-                  style={{ width: col?.subWidth?.[subIndex] || 'auto' }}
-                />
-              ))
-              : (
-                <col
-                  key={`col-${colIndex}`}
-                  style={{ width: col.width || 'auto' }}
-                />
-              ),
-          )}
-
-        </colgroup>
-        <thead>
-          <tr>
-            {body.some(row => row.head) && <th className={styles.fixed} rowSpan={2} />}
-            {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.text}
-              </th>
-            ))}
-          </tr>
-          {subLabels.length > 0 && (
-            <tr>
-              {subLabels.map((subLabel, index) => (
-                <th
-                  style={{ textAlign: subLabel.align || 'left' }}
-                  key={index}
-                >{subLabel.text}
-                </th>
-              ))}
-            </tr>
-          )}
-        </thead>
-        <tbody>
-          {body.map((row, rowIndex) => (
-            <tr key={rowIndex}>
-              {isBodyWithHead && <th style={{ textAlign: row?.head?.align || 'left' }}>{row?.head?.text || ''}</th>}
-              {row.labels.map((col, colIndex) => (
-                <td style={{ textAlign: col.align || 'left' }} key={colIndex}>
-                  {col.text}
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
+import { cn } from '@jk-core/utils';
+import styles from './Table.module.scss';
+
+interface TableLabelType{
+  text: string | number;
+  align?: 'left' | 'center' | 'right';
+}
+interface TableHeaderType {
+  label: TableLabelType;
+  width?: string;
+  subWidth?: string[];
+  subLabel?:TableLabelType[];
+}
+
+interface TableBodyType{
+  head?: TableLabelType;
+  labels: TableLabelType[];
+}
+
+interface TableProps {
+  /**
+   * 테이블 헤더 설정
+   * - `label`: 헤더의 라벨 텍스트, text와 align 속성을 포함한 객체
+   * - `width`: 헤더의 너비, subWidth가 있을 경우 무시됨 (선택적)
+   * - `subWidth`: 서브 헤더의 너비 배열 (선택적)
+   * - `subLabel`: 서브 헤더의 라벨, text와 align 속성을 포함한 객체 배열 (선택적)
+   */
+  header: TableHeaderType[];
+  /**
+   * 테이블 바디 설정
+   * - `head`: 바디의 헤더 텍스트, text와 align 속성을 포함한 객체 (선택적)
+   * - `labels`: 각 행의 라벨 배열, text와 align 속성을 포함한 객체 배열
+   */
+  body: TableBodyType[];
+  /**
+   * 테이블의 모서리를 둥글게 처리할지 여부
+   * - `rounded`: true일 경우 모서리가 둥글게 처리됨
+   */
+  rounded?: boolean;
+  /**
+   * 테이블의 테두리 표시 여부
+   * - `border`: true일 경우 테이블에 테두리가 표시됨
+   */
+  border?: boolean;
+}
+
+/**
+ * 테이블 컴포넌트
+ * 헤더와 바디를 설정하여 테이블을 렌더링합니다.
+ * - `header`: 테이블의 헤더 설정
+ * - `body`: 테이블의 바디 설정
+ * - `rounded`: 테이블의 모서리를 둥글게 처리할지 여부
+ * - `border`: 테이블에 테두리를 표시할지 여부
+ */
+export default function Table({ header, body, rounded, border }: TableProps) {
+  const subLabels = header.flatMap(col => col.subLabel || []);
+  const isBodyWithHead = body.some(row => row.head);
+
+  return (
+    <div className={cn({
+      [styles.wrapper]: true,
+      [styles.wrapper__rounded]: !!rounded,
+      [styles.wrapper__border]: !!border,
+    })}
+    >
+
+      <table className={styles.table}>
+        <colgroup>
+          {isBodyWithHead && <col style={{ width: '100px' }} />}
+          {header.map((col, colIndex) =>
+            col.subLabel
+              ? col.subLabel.map((_, subIndex) => (
+                <col
+                  key={`col-${colIndex}-sub-${subIndex}`}
+                  style={{ width: col?.subWidth?.[subIndex] || 'auto' }}
+                />
+              ))
+              : (
+                <col
+                  key={`col-${colIndex}`}
+                  style={{ width: col.width || 'auto' }}
+                />
+              ),
+          )}
+
+        </colgroup>
+        <thead>
+          <tr>
+            {body.some(row => row.head) && <th className={styles.fixed} rowSpan={2} />}
+            {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.text}
+              </th>
+            ))}
+          </tr>
+          {subLabels.length > 0 && (
+            <tr>
+              {subLabels.map((subLabel, index) => (
+                <th
+                  style={{ textAlign: subLabel.align || 'left' }}
+                  key={index}
+                >{subLabel.text}
+                </th>
+              ))}
+            </tr>
+          )}
+        </thead>
+        <tbody>
+          {body.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              {isBodyWithHead && <th style={{ textAlign: row?.head?.align || 'left' }}>{row?.head?.text || ''}</th>}
+              {row.labels.map((col, colIndex) => (
+                <td style={{ textAlign: col.align || 'left' }} key={colIndex}>
+                  {col.text}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/index.scss

@@ -1 +1 @@
-@forward "@/styles/color";
+@forward "@/styles/color";

package/src/index.tsx

@@ -1,22 +1,22 @@
-import Breadcrumbs, { BreadcrumbsItem } from '@/common/Breadcrumbs';
-import Button from '@/common/Button';
-import Pagination from '@/common/Pagination';
-import Skeleton from '@/common/Skeleton';
-import SwitchButton from '@/common/SwitchButton';
-import Table from '@/common/Table';
-import Calendar from './Calendar';
-import { CalendarRange, CalendarView } from './Calendar/type';
-import Accordion from './common/Accordion';
-import Card from './common/Card';
-import DropDown from './common/DropDown';
-import SegmentButton from './common/SegmentButton';
-
-export {
-  Calendar, Accordion, Breadcrumbs, Button,
-  Pagination, Skeleton, SwitchButton,
-  Card, DropDown, SegmentButton, BreadcrumbsItem, Table,
-};
-
-export type { CalendarView, CalendarRange };
-
+import Breadcrumbs, { BreadcrumbsItem } from '@/common/Breadcrumbs';
+import Button from '@/common/Button';
+import Pagination from '@/common/Pagination';
+import Skeleton from '@/common/Skeleton';
+import SwitchButton from '@/common/SwitchButton';
+import Table from '@/common/Table';
+import Calendar from './Calendar';
+import { CalendarRange, CalendarView } from './Calendar/type';
+import Accordion from './common/Accordion';
+import Card from './common/Card';
+import DropDown from './common/DropDown';
+import SegmentButton from './common/SegmentButton';
+
+export {
+  Calendar, Accordion, Breadcrumbs, Button,
+  Pagination, Skeleton, SwitchButton,
+  Card, DropDown, SegmentButton, BreadcrumbsItem, Table,
+};
+
+export type { CalendarView, CalendarRange };
+
 import './index.scss';