@jk-core/components 1.1.1 → 1.1.3

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

@@ -9,9 +9,20 @@ interface SegmentButtonProps {
      * true로 설정하면 버튼이 부모 요소의 너비를 채웁니다.
      */
     stretch?: boolean;
+    /**
+     * 현재 세그먼트 버튼에서 선택된 인덱스입니다.
+     * 값을 설정시, 해당 인덱스의 버튼이 선택된 상태로 표시됩니다.
+     * 기본값은 0입니다.
+     */
+    selected?: number;
     /**
      * 세그먼트 버튼의 옵션을 설정합니다.
      * 각 옵션은 텍스트와 클릭 이벤트 핸들러를 포함합니다.
+     * 예시:
+     * ```ts
+     * option: [
+     *   { text: '오늘', onClick: () => setDate(new Date()) },
+     *   { text: '내일', onClick: () => setDate(new Date(Date.now() + 24 * 60 * 60 * 1000)) },
      */
     option: Array<{
         text: string;
@@ -22,5 +33,5 @@ interface SegmentButtonProps {
  * 세그먼트 버튼 컴포넌트는 여러 개의 버튼을 세그먼트 형태로 표시합니다.
  * 각 버튼은 클릭 시 지정된 함수를 실행합니다.
  */
-export default function SegmentButton({ width, stretch, option }: SegmentButtonProps): import("react/jsx-runtime").JSX.Element;
+export default function SegmentButton({ width, stretch, option, selected }: SegmentButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -0,0 +1,46 @@
+interface TableHeaderType {
+    label: string;
+    width?: string;
+    subWidth?: string[];
+    subLabel?: string[];
+}
+interface TableBodyType {
+    head?: string;
+    labels: string[];
+}
+interface TableProps {
+    /**
+     * 테이블 헤더 설정
+     * - `label`: 헤더의 라벨 텍스트
+     * - `width`: 헤더의 너비, subWidth가 있을 경우 무시됨 (선택적)
+     * - `subWidth`: 서브 헤더의 너비 배열 (선택적)
+     * - `subLabel`: 서브 헤더의 라벨 배열 (선택적
+     */
+    header: TableHeaderType[];
+    /**
+     * 테이블 바디 설정
+     * - `head`: 바디의 헤더 텍스트 (선택적)
+     * - `labels`: 각 행의 라벨 배열
+     */
+    body: TableBodyType[];
+    /**
+     * 테이블의 모서리를 둥글게 처리할지 여부
+     * - `rounded`: true일 경우 모서리가 둥글게 처리됨
+     */
+    rounded?: boolean;
+    /**
+     * 테이블의 테두리 표시 여부
+     * - `border`: true일 경우 테이블에 테두리가 표시됨
+     */
+    border?: boolean;
+}
+/**
+ * 테이블 컴포넌트
+ * 헤더와 바디를 설정하여 테이블을 렌더링합니다.
+ * - `header`: 테이블의 헤더 설정
+ * - `body`: 테이블의 바디 설정
+ * - `rounded`: 테이블의 모서리를 둥글게 처리할지 여부
+ * - `border`: 테이블에 테두리를 표시할지 여부
+ */
+export default function Table({ header, body, rounded, border }: TableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/index.d.ts

@@ -3,11 +3,12 @@ import { default as Button } from './common/Button';
 import { default as Pagination } from './common/Pagination';
 import { default as Skeleton } from './common/Skeleton';
 import { default as SwitchButton } from './common/SwitchButton';
+import { default as Table } from './common/Table';
 import { default as Calendar } from './Calendar';
 import { CalendarRange, CalendarView } from './Calendar/type';
 import { default as Accordion } from './common/Accordion';
 import { default as Card } from './common/Card';
 import { default as DropDown } from './common/DropDown';
 import { default as SegmentButton } from './common/SegmentButton';
-export { Calendar, Accordion, Breadcrumbs, Button, Pagination, Skeleton, SwitchButton, Card, DropDown, SegmentButton, BreadcrumbsItem, };
+export { Calendar, Accordion, Breadcrumbs, Button, Pagination, Skeleton, SwitchButton, Card, DropDown, SegmentButton, BreadcrumbsItem, Table, };
 export type { CalendarView, CalendarRange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jk-core/components",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",

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

@@ -66,7 +66,6 @@
 
     &:hover {
       background-color: var(--G-5);
-      border-color: var(--G-80);
     }
 
     &:active {

package/src/common/SegmentButton/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { cn } from '@jk-core/utils';
 import styles from './SegmentButton.module.scss';
 
@@ -13,9 +13,21 @@ interface SegmentButtonProps {
    * true로 설정하면 버튼이 부모 요소의 너비를 채웁니다.
    */
   stretch?: boolean;
+
+  /**
+   * 현재 세그먼트 버튼에서 선택된 인덱스입니다.
+   * 값을 설정시, 해당 인덱스의 버튼이 선택된 상태로 표시됩니다.
+   * 기본값은 0입니다.
+   */
+  selected?: number;
   /**
    * 세그먼트 버튼의 옵션을 설정합니다.
    * 각 옵션은 텍스트와 클릭 이벤트 핸들러를 포함합니다.
+   * 예시:
+   * ```ts
+   * option: [
+   *   { text: '오늘', onClick: () => setDate(new Date()) },
+   *   { text: '내일', onClick: () => setDate(new Date(Date.now() + 24 * 60 * 60 * 1000)) },
    */
   option:Array<{ text: string; onClick: () => void }>;
 }
@@ -24,8 +36,10 @@ interface SegmentButtonProps {
  * 세그먼트 버튼 컴포넌트는 여러 개의 버튼을 세그먼트 형태로 표시합니다.
  * 각 버튼은 클릭 시 지정된 함수를 실행합니다.
  */
-export default function SegmentButton({ width, stretch, option }: SegmentButtonProps) {
-  const [selected, setSelected] = useState(0);
+export default function SegmentButton({ width, stretch, option, selected }: SegmentButtonProps) {
+  const [index, setIndex] = useState(selected ?? 0);
+
+  const selectedIndex = useMemo(() => selected ?? index, [index, selected]);
 
   return (
     <div
@@ -39,21 +53,21 @@ export default function SegmentButton({ width, stretch, option }: SegmentButtonP
         className={styles['segment--selector']}
         style={{
           width: `${100 / option.length}%`,
-          left: `${(selected * 100) / option.length}%`,
+          left: `${selectedIndex * 100 / option.length}%`,
         }}
       />
-      {option.map((item, index) => (
+      {option.map((item, optionIndex) => (
         <button
           className={cn({
             [styles.button]: true,
-            [styles['button--selected']]: index === selected,
+            [styles['button--selected']]: optionIndex === selected,
           })}
           key={item.text}
           type="button"
           style={{ width: stretch ? 'auto' : (width || 'auto') }}
           onClick={() => {
-            setSelected(index);
             item.onClick();
+            setIndex(optionIndex);
           }}
         >
           <div>

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

@@ -0,0 +1,59 @@
+.wrapper {
+  width: 100%;
+  max-height: 60dvh;
+  border: 1px solid var(--G-30);
+  overflow: auto;
+
+  &__rounded {
+    border-radius: 10px;
+  }
+}
+
+.table {
+  width: max-content;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed; // 이 줄을 추가하세요!
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  thead > tr > th:last-child,
+  tbody > tr > td:last-child {
+    border-right: none;
+  }
+
+  th {
+    flex-shrink: 0;
+    background-color: var(--G-5);
+    padding: 10px;
+    border-right: 1px solid var(--G-30);
+    border-bottom: 1px solid var(--G-30);
+  }
+
+  tbody > tr > th {
+    position: sticky;
+    left: 0;
+    white-space: pre-wrap;
+    max-width: 200px;
+  }
+
+  td {
+    padding: 10px;
+    background-color: var(--white);
+    word-break: break-all;
+    border-bottom: 1px solid var(--G-30);
+    border-right: 1px solid var(--G-30);
+  }
+}
+
+.fixed {
+  position: sticky;
+  left: 0;
+  top: 0;
+  background-color: var(--G-5);
+  z-index: 1;
+}

package/src/common/Table/index.tsx

@@ -0,0 +1,119 @@
+import { cn } from '@jk-core/utils';
+import styles from './Table.module.scss';
+
+interface TableHeaderType {
+  label: string;
+  width?: string;
+  subWidth?: string[];
+  subLabel?:string[];
+}
+
+interface TableBodyType{
+  head?: string;
+  labels: string[];
+}
+
+interface TableProps {
+  /**
+   * 테이블 헤더 설정
+   * - `label`: 헤더의 라벨 텍스트
+   * - `width`: 헤더의 너비, subWidth가 있을 경우 무시됨 (선택적)
+   * - `subWidth`: 서브 헤더의 너비 배열 (선택적)
+   * - `subLabel`: 서브 헤더의 라벨 배열 (선택적
+   */
+  header: TableHeaderType[];
+  /**
+   * 테이블 바디 설정
+   * - `head`: 바디의 헤더 텍스트 (선택적)
+   * - `labels`: 각 행의 라벨 배열
+   */
+  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}
+                rowSpan={col.subLabel ? 1 : 2}
+                colSpan={col.subLabel ? col.subLabel.length : undefined}
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+          {subLabels.length > 0 && (
+            <tr>
+              {subLabels.map((subLabel, index) => (
+                <th key={index}>{subLabel}</th>
+              ))}
+            </tr>
+          )}
+        </thead>
+        <tbody>
+          {body.map((row, rowIndex) => (
+            <tr key={rowIndex}>
+              {isBodyWithHead && <th>{row?.head || ''}</th>}
+              {row.labels.map((col, colIndex) => (
+                <td key={colIndex}>
+                  {col}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/index.tsx

@@ -3,6 +3,7 @@ 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';
@@ -13,7 +14,7 @@ import SegmentButton from './common/SegmentButton';
 export {
   Calendar, Accordion, Breadcrumbs, Button,
   Pagination, Skeleton, SwitchButton,
-  Card, DropDown, SegmentButton, BreadcrumbsItem,
+  Card, DropDown, SegmentButton, BreadcrumbsItem, Table,
 };
 
 export type { CalendarView, CalendarRange };