@jk-core/components 1.1.17 → 1.1.19

package/src/common/SwitchButton/index.tsx

@@ -1,57 +1,57 @@
-import { useState } from 'react';
-import { cn } from '@jk-core/utils';
-import styles from './SwitchButton.module.scss';
-
-interface SwitchButtonProps {
-  /**
-   * 스위치 버튼의 상태를 나타냅니다.
-   * true이면 스위치가 켜진 상태, false이면 꺼진 상태입니다.
-   * 기본값은 false로 설정되어 있습니다.
-   */
-  checked?: boolean,
-  /**
-   * 스위치 버튼의 상태가 변경될 때 호출되는 함수입니다.
-   */
-  onChange?: (value: boolean) => void
-}
-
-/**
- * SwitchButton 컴포넌트
- * 스위치 버튼을 표시하며, 클릭 시 상태가 변경됩니다.
- * checked 속성으로 초기 상태를 설정할 수 있으며, onChange 함수를 통해 상태 변경을 처리할 수 있습니다.
- */
-export default function SwitchButton({ checked = false, onChange = () => { } }: SwitchButtonProps) {
-  const [isChecked, setIsChecked] = useState(checked);
-
-  return (
-    <button
-      className={styles.button}
-      type="button"
-      onClick={(e) => {
-        e.stopPropagation();
-        setIsChecked(!isChecked);
-        onChange(!isChecked);
-      }}
-    >
-      <div
-        className={cn({
-          [styles.switch]: true,
-          [styles.switch__off]: checked,
-        })}
-      >
-        <div className={cn({
-          [styles.switch__button]: true,
-          [styles['switch__button--off']]: !checked,
-          [styles['switch__button--on']]: checked,
-        })}
-        >
-          <div className={cn({
-            [styles['switch__button--circle']]: true,
-            [styles['switch__button--circle-on']]: checked,
-          })}
-          />
-        </div>
-      </div>
-    </button>
-  );
-}
+import { useState } from 'react';
+import { cn } from '@jk-core/utils';
+import styles from './SwitchButton.module.scss';
+
+interface SwitchButtonProps {
+  /**
+   * 스위치 버튼의 상태를 나타냅니다.
+   * true이면 스위치가 켜진 상태, false이면 꺼진 상태입니다.
+   * 기본값은 false로 설정되어 있습니다.
+   */
+  checked?: boolean,
+  /**
+   * 스위치 버튼의 상태가 변경될 때 호출되는 함수입니다.
+   */
+  onChange?: (value: boolean) => void
+}
+
+/**
+ * SwitchButton 컴포넌트
+ * 스위치 버튼을 표시하며, 클릭 시 상태가 변경됩니다.
+ * checked 속성으로 초기 상태를 설정할 수 있으며, onChange 함수를 통해 상태 변경을 처리할 수 있습니다.
+ */
+export default function SwitchButton({ checked = false, onChange = () => { } }: SwitchButtonProps) {
+  const [isChecked, setIsChecked] = useState(checked);
+
+  return (
+    <button
+      className={styles.button}
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        setIsChecked(!isChecked);
+        onChange(!isChecked);
+      }}
+    >
+      <div
+        className={cn({
+          [styles.switch]: true,
+          [styles.switch__off]: checked,
+        })}
+      >
+        <div className={cn({
+          [styles.switch__button]: true,
+          [styles['switch__button--off']]: !checked,
+          [styles['switch__button--on']]: checked,
+        })}
+        >
+          <div className={cn({
+            [styles['switch__button--circle']]: true,
+            [styles['switch__button--circle-on']]: checked,
+          })}
+          />
+        </div>
+      </div>
+    </button>
+  );
+}

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

@@ -1,70 +1,70 @@
-.wrapper {
-  width: 100%;
-  max-height: 60dvh;
-  overflow: auto;
-
-  &__rounded {
-    border-radius: 10px;
-  }
-
-  &__border {
-    border: 1px solid var(--G-30);
-  }
-}
-
-.table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  table-layout: fixed; // 이 줄을 추가하세요!
-
-  thead {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  }
-
-  tbody > tr > td:last-child {
-    border-right: none;
-  }
-
-  th {
-    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);
-    border-bottom: 1px solid var(--G-30);
-  }
-
-  tr {
-    min-width: 100%;
-  }
-
-  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;
-    color: var(--G-80);
-    font-weight: 400;
-    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;
-}
+.wrapper {
+  width: 100%;
+  max-height: 60dvh;
+  overflow: auto;
+
+  &__rounded {
+    border-radius: 10px;
+  }
+
+  &__border {
+    border: 1px solid var(--G-30);
+  }
+}
+
+.table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed; // 이 줄을 추가하세요!
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  tbody > tr > td:last-child {
+    border-right: none;
+  }
+
+  th {
+    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);
+    border-bottom: 1px solid var(--G-30);
+  }
+
+  tr {
+    min-width: 100%;
+  }
+
+  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;
+    color: var(--G-80);
+    font-weight: 400;
+    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

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