@jk-core/components 1.1.8 → 1.1.10

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

@@ -16,7 +16,7 @@ interface BreadcrumbsItemProps {
      * BreadcrumbsItem의 자식 요소로 표시될 텍스트입니다.
      * 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
      */
-    children?: React.ReactNode;
+    children: React.ReactNode;
     /**
      * BreadcrumbsItem이 클릭되었을 때 이동할 경로입니다.
      * 기본값은 '/'로 설정되어 있습니다.

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

@@ -0,0 +1,8 @@
+interface DividerProps {
+    children?: React.ReactNode;
+    textAlign?: 'left' | 'center' | 'right';
+    variant?: 'full' | 'middle' | 'short';
+    orientation?: 'horizontal' | 'vertical';
+}
+export default function Divider({ children, textAlign, variant, orientation, }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export {};

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.8",
+  "version": "1.1.10",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "types": "./dist/index.d.ts",

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/Breadcrumbs/Breadcrumbs.module.scss

@@ -13,6 +13,7 @@
 .item {
   display: flex;
   align-items: center;
+  gap: 5px;
   color: var(--G-60);
   font-size: 15px;
   font-weight: 500;

package/src/common/Breadcrumbs/index.tsx

@@ -20,14 +20,15 @@ export default function Breadcrumbs({ children }: BreadcumbsProps) {
     <div className={styles.breadcrumbs}>
       {Array.isArray(children)
         ? children.map((child, idx) => (
-          <Fragment key={idx}>
-            {idx > 0 && (
-              <div className={styles.separator}>
-                {'>'}
-              </div>
-            )}
-            {child}
-          </Fragment>
+          (!!child &&
+            <Fragment key={idx}>
+              {idx > 0 && (
+                <div className={styles.separator}>
+                  {'>'}
+                </div>
+              )}
+              {child}
+            </Fragment>)
         ))
         : children}
     </div>
@@ -39,7 +40,7 @@ interface BreadcrumbsItemProps {
    * BreadcrumbsItem의 자식 요소로 표시될 텍스트입니다.
    * 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
    */
-  children?: React.ReactNode;
+  children: React.ReactNode;
   /**
    * BreadcrumbsItem이 클릭되었을 때 이동할 경로입니다.
    * 기본값은 '/'로 설정되어 있습니다.

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/Button/index.tsx

@@ -34,7 +34,6 @@ export default function Button({
   return (
     <button
       className={cn({
-        [className]: !!className,
         [styles.button]: true,
         [styles.button__loading]: isLoading,
         [styles.button__disabled]: !!disabled,
@@ -42,6 +41,7 @@ export default function Button({
         [styles.button__secondary]: grade === 'secondary',
         [styles.button__primary]: grade === 'primary',
         [styles.button__cancel]: grade === 'cancel',
+        [className]: !!className,
       })}
       type="button"
       disabled={disabled}

package/src/common/Divider/Divider.module.scss

@@ -0,0 +1,101 @@
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 16px 0;
+  align-self: center;
+  justify-self: center;
+
+  &.vertical {
+    flex-direction: column;
+    height: 100px;
+    width: auto;
+    margin: 0 16px;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background-color: var(--G-30);
+  }
+
+  .vertical & {
+    flex-direction: column;
+    height: 100%;
+    width: auto;
+
+    &::before,
+    &::after {
+      width: 1px;
+      height: auto;
+      flex: 1;
+    }
+  }
+}
+
+.text {
+  padding: 0 16px;
+  color: var(--G-70);
+  font-size: 14px;
+  white-space: nowrap;
+
+  .vertical & {
+    padding: 16px 0;
+    writing-mode: vertical-rl;
+  }
+}
+
+// 텍스트가 없을 때는 전체 라인만 표시
+.noText .content {
+  &::before {
+    flex: 1;
+  }
+
+  &::after {
+    display: none;
+  }
+}
+
+// 정렬 옵션
+.left .content::before {
+  flex: 0.2;
+}
+
+.right .content::after {
+  flex: 0.2;
+}
+
+.center .content::before,
+.center .content::after {
+  flex: 1;
+}
+
+.full {
+  width: 100%;
+  height: 100%;
+}
+
+.middle {
+  width: 80%;
+  height: 80%;
+}
+
+.short {
+  width: 50%;
+  height: 50%;
+}
+
+.horizontal {
+  height: 1px !important;
+}
+
+.vertical {
+  width: 1px !important;
+}

package/src/common/Divider/index.tsx

@@ -0,0 +1,25 @@
+import styles from './Divider.module.scss';
+
+interface DividerProps {
+  children?: React.ReactNode;
+  textAlign?: 'left' | 'center' | 'right';
+  variant?: 'full' | 'middle' | 'short';
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export default function Divider({
+  children,
+  textAlign = 'center',
+  variant = 'full',
+  orientation = 'horizontal',
+}: DividerProps) {
+  const hasText = Boolean(children);
+
+  return (
+    <div className={`${styles.divider} ${styles[variant]} ${styles[textAlign]} ${styles[orientation]} ${!hasText ? styles.noText : ''}`}>
+      <div className={styles.content}>
+        {children && <span className={styles.text}>{children}</span>}
+      </div>
+    </div>
+  );
+}

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>