@jk-core/components 1.1.16 → 1.1.17

package/src/common/Pagination/arrow-right.svg

@@ -1,12 +1,12 @@
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
-<svg width="30px" height="30px" viewBox="0 0 24 24" fill="#000000" xmlns="http://www.w3.org/2000/svg">
-
-<g id="SVGRepo_bgCarrier"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier"> <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z"/> </g>
-
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="30px" height="30px" viewBox="0 0 24 24" fill="#000000" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z"/> </g>
+
 </svg>

package/src/common/Pagination/index.tsx

@@ -1,156 +1,156 @@
-
-import { useMemo, useState } from 'react';
-import LeftArrowIcon from './arrow-left.svg';
-import RightArrowIcon from './arrow-right.svg';
-import styles from './Pagination.module.scss';
-
-interface PaginationProps {
-  /**
-   * 총 페이지 수
-   */
-  totalPage: number;
-  /**
-   * 현재 페이지
-   */
-  currentPage: number;
-
-  /**
-   * 페이지 크기 (기본값: false)
-   * true로 설정하면 보여지는 페이지의 개수가 5개에서 7개로 늘어납니다.
-   */
-  large?: boolean;
-  /**
-   * 페이지 클릭 핸들러
-   */
-  onPageClick: (page: number) => void;
-}
-
-export default function Pagination({ totalPage, currentPage, onPageClick, large = false }: PaginationProps) {
-  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | 'tripleRight' | 'tripleLeft' | ''>('');
-  const [selectedPage, setSelectedPage] = useState(currentPage || 1);
-  const weight = useMemo(() => (large ? 2 : 0), [large]);
-
-  const pageArray = useMemo(() => {
-    if (!totalPage) return Array.from({ length: 9 + weight }).map((_, i) => (i === 2 ? 1 : null));
-
-    return Array.from({ length: 9 + weight }).map((_, i) => {
-      const pageIndex = selectedPage + i - 2 - (weight / 2) ;
-
-      if (pageIndex < 1 || pageIndex > totalPage) {
-        return null;
-      }
-      return pageIndex;
-    });
-  }, [selectedPage, totalPage, weight]);
-
-  const handlePageClick = (page: number) => {
-    if (page > totalPage || page < 1) return;
-    onPageClick(page);
-    if (page === null) return;
-    const diff = page - selectedPage;
-
-    switch (diff) {
-      case 1:
-        setAnimation('right');
-        break;
-      case -1:
-        setAnimation('left');
-        break;
-      case 2:
-        setAnimation('doubleRight');
-        break;
-      case -2:
-        setAnimation('doubleLeft');
-        break;
-      case 3:
-        setAnimation('tripleRight');
-        break;
-      case -3:
-        setAnimation('tripleLeft');
-        break;
-      default:
-        setAnimation('');
-    }
-
-    setSelectedPage(page);
-
-    setTimeout(() => {
-      setAnimation('');
-    }, 200);
-  };
-
-  return (
-    <div className={styles.pagination}>
-      <button
-        className={`${styles.arrow} ${selectedPage <= 1 ? styles['arrow--disabled'] : '' }`}
-        type="button"
-        onClick={() => handlePageClick(selectedPage - 1)}
-      >
-        <LeftArrowIcon />
-      </button>
-      <div
-        className={styles.slider}
-        style={{ width: `${(8 + weight) * 40}px` }}
-      >
-        <div
-          className={styles.track}
-        />
-        <div className={styles.portal}>
-          {selectedPage > (3 + weight / 2) && (
-            < >
-              <button
-                className={styles.page}
-                type="button"
-                onClick={() => handlePageClick(1)}
-              >1
-              </button>
-              <span className={styles.portal__ellipsis}>•••</span>
-            </>
-          )}
-        </div>
-        <div
-          className={styles.pages}
-          style={{ width: `${(5 + weight) * 40}px` }}
-        >
-          <div className={`${styles.pageWrapper} ${animation === 'left' ? styles.left : ''} ${styles[animation]}`}>
-            {pageArray.map((page, index) => (
-              <button
-                className={`${styles.page} ${selectedPage === page ? styles['page--selected'] : ''}`}
-                key={index}
-                type="button"
-                disabled={page === null}
-                onClick={() => {
-                  if (page !== null) {
-                    handlePageClick(page);
-                  }
-                }}
-              >
-                <span>{page}</span>
-              </button>
-            ))}
-          </div>
-        </div>
-        <div className={styles.portal}>
-          {selectedPage < totalPage - (2 + weight / 2) && (
-            <>
-              <span className={styles.portal__ellipsis}>•••</span>
-              <button
-                className={styles.page}
-                type="button"
-                onClick={() => handlePageClick(totalPage)}
-              >{totalPage}
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-      <button
-        className={`${styles.arrow} ${selectedPage >= totalPage ? styles['arrow--disabled'] : ''}`}
-        type="button"
-        onClick={() => handlePageClick(selectedPage + 1)}
-      >
-        <RightArrowIcon />
-      </button>
-    </div>
-  );
-}
+
+import { useMemo, useState } from 'react';
+import LeftArrowIcon from './arrow-left.svg';
+import RightArrowIcon from './arrow-right.svg';
+import styles from './Pagination.module.scss';
+
+interface PaginationProps {
+  /**
+   * 총 페이지 수
+   */
+  totalPage: number;
+  /**
+   * 현재 페이지
+   */
+  currentPage: number;
+
+  /**
+   * 페이지 크기 (기본값: false)
+   * true로 설정하면 보여지는 페이지의 개수가 5개에서 7개로 늘어납니다.
+   */
+  large?: boolean;
+  /**
+   * 페이지 클릭 핸들러
+   */
+  onPageClick: (page: number) => void;
+}
+
+export default function Pagination({ totalPage, currentPage, onPageClick, large = false }: PaginationProps) {
+  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | 'tripleRight' | 'tripleLeft' | ''>('');
+  const [selectedPage, setSelectedPage] = useState(currentPage || 1);
+  const weight = useMemo(() => (large ? 2 : 0), [large]);
+
+  const pageArray = useMemo(() => {
+    if (!totalPage) return Array.from({ length: 9 + weight }).map((_, i) => (i === 2 ? 1 : null));
+
+    return Array.from({ length: 9 + weight }).map((_, i) => {
+      const pageIndex = selectedPage + i - 2 - (weight / 2) ;
+
+      if (pageIndex < 1 || pageIndex > totalPage) {
+        return null;
+      }
+      return pageIndex;
+    });
+  }, [selectedPage, totalPage, weight]);
+
+  const handlePageClick = (page: number) => {
+    if (page > totalPage || page < 1) return;
+    onPageClick(page);
+    if (page === null) return;
+    const diff = page - selectedPage;
+
+    switch (diff) {
+      case 1:
+        setAnimation('right');
+        break;
+      case -1:
+        setAnimation('left');
+        break;
+      case 2:
+        setAnimation('doubleRight');
+        break;
+      case -2:
+        setAnimation('doubleLeft');
+        break;
+      case 3:
+        setAnimation('tripleRight');
+        break;
+      case -3:
+        setAnimation('tripleLeft');
+        break;
+      default:
+        setAnimation('');
+    }
+
+    setSelectedPage(page);
+
+    setTimeout(() => {
+      setAnimation('');
+    }, 200);
+  };
+
+  return (
+    <div className={styles.pagination}>
+      <button
+        className={`${styles.arrow} ${selectedPage <= 1 ? styles['arrow--disabled'] : '' }`}
+        type="button"
+        onClick={() => handlePageClick(selectedPage - 1)}
+      >
+        <LeftArrowIcon />
+      </button>
+      <div
+        className={styles.slider}
+        style={{ width: `${(8 + weight) * 40}px` }}
+      >
+        <div
+          className={styles.track}
+        />
+        <div className={styles.portal}>
+          {selectedPage > (3 + weight / 2) && (
+            < >
+              <button
+                className={styles.page}
+                type="button"
+                onClick={() => handlePageClick(1)}
+              >1
+              </button>
+              <span className={styles.portal__ellipsis}>•••</span>
+            </>
+          )}
+        </div>
+        <div
+          className={styles.pages}
+          style={{ width: `${(5 + weight) * 40}px` }}
+        >
+          <div className={`${styles.pageWrapper} ${animation === 'left' ? styles.left : ''} ${styles[animation]}`}>
+            {pageArray.map((page, index) => (
+              <button
+                className={`${styles.page} ${selectedPage === page ? styles['page--selected'] : ''}`}
+                key={index}
+                type="button"
+                disabled={page === null}
+                onClick={() => {
+                  if (page !== null) {
+                    handlePageClick(page);
+                  }
+                }}
+              >
+                <span>{page}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className={styles.portal}>
+          {selectedPage < totalPage - (2 + weight / 2) && (
+            <>
+              <span className={styles.portal__ellipsis}>•••</span>
+              <button
+                className={styles.page}
+                type="button"
+                onClick={() => handlePageClick(totalPage)}
+              >{totalPage}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+      <button
+        className={`${styles.arrow} ${selectedPage >= totalPage ? styles['arrow--disabled'] : ''}`}
+        type="button"
+        onClick={() => handlePageClick(selectedPage + 1)}
+      >
+        <RightArrowIcon />
+      </button>
+    </div>
+  );
+}

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

@@ -1,45 +1,45 @@
-.segment {
-  position: relative;
-  display: grid;
-  width: fit-content;
-  background-color: var(--G-10);
-  border-radius: 8px;
-  z-index: 0;
-  overflow: hidden;
-  font-size: 1em;
-
-  &--selector {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    background-color: var(--white);
-    border: 2px solid var(--G-10);
-    border-radius: 8px;
-    transition: all 0.2s;
-    z-index: 1;
-  }
-}
-
-.button {
-  height: 100%;
-  padding: 8px 5px;
-  color: var(--G-40);
-  transition: color 0.2s;
-  font-weight: 500;
-
-  & > div {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
-  }
-
-  &--selected {
-    color: var(--G-80);
-  }
-}
+.segment {
+  position: relative;
+  display: grid;
+  width: fit-content;
+  background-color: var(--G-10);
+  border-radius: 8px;
+  z-index: 0;
+  overflow: hidden;
+  font-size: 1em;
+
+  &--selector {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    background-color: var(--white);
+    border: 2px solid var(--G-10);
+    border-radius: 8px;
+    transition: all 0.2s;
+    z-index: 1;
+  }
+}
+
+.button {
+  height: 100%;
+  padding: 8px 5px;
+  color: var(--G-40);
+  transition: color 0.2s;
+  font-weight: 500;
+
+  & > div {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  &--selected {
+    color: var(--G-80);
+  }
+}

package/src/common/SegmentButton/index.tsx

@@ -1,80 +1,80 @@
-import { useMemo, useState } from 'react';
-import { cn } from '@jk-core/utils';
-import styles from './SegmentButton.module.scss';
-
-interface SegmentButtonProps {
-  /**
-   * 세그먼트 버튼의 너비를 지정합니다. 기본값은 'auto'입니다.
-   * 만약 stretch가 true로 설정되면, 너비는 'auto'로 설정됩니다.
-   */
-  width?: string;
-  /**
-   * 세그먼트 버튼이 전체 너비를 차지하도록 설정합니다.
-   * 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 }>;
-}
-
-/**
- * 세그먼트 버튼 컴포넌트는 여러 개의 버튼을 세그먼트 형태로 표시합니다.
- * 각 버튼은 클릭 시 지정된 함수를 실행합니다.
- */
-export default function SegmentButton({ width, stretch, option, selected }: SegmentButtonProps) {
-  const [index, setIndex] = useState(selected ?? 0);
-
-  const selectedIndex = useMemo(() => selected ?? index, [index, selected]);
-
-  return (
-    <div
-      className={styles.segment}
-      style={{
-        width: stretch ? '100%' : undefined,
-        gridTemplateColumns: `repeat(${option.length},1fr)`,
-      }}
-    >
-      <div
-        className={styles['segment--selector']}
-        style={{
-          width: `${100 / option.length}%`,
-          left: `${selectedIndex * 100 / option.length}%`,
-        }}
-      />
-      {option.map((item, optionIndex) => (
-        <button
-          className={cn({
-            [styles.button]: true,
-            [styles['button--selected']]: optionIndex === selectedIndex,
-          })}
-          key={item.text}
-          type="button"
-          style={{ width: stretch ? 'auto' : (width || 'auto') }}
-          onClick={() => {
-            item.onClick();
-            setIndex(optionIndex);
-          }}
-        >
-          <div>
-            {item.text}
-          </div>
-        </button>
-      ))}
-    </div>
-  );
+import { useMemo, useState } from 'react';
+import { cn } from '@jk-core/utils';
+import styles from './SegmentButton.module.scss';
+
+interface SegmentButtonProps {
+  /**
+   * 세그먼트 버튼의 너비를 지정합니다. 기본값은 'auto'입니다.
+   * 만약 stretch가 true로 설정되면, 너비는 'auto'로 설정됩니다.
+   */
+  width?: string;
+  /**
+   * 세그먼트 버튼이 전체 너비를 차지하도록 설정합니다.
+   * 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 }>;
+}
+
+/**
+ * 세그먼트 버튼 컴포넌트는 여러 개의 버튼을 세그먼트 형태로 표시합니다.
+ * 각 버튼은 클릭 시 지정된 함수를 실행합니다.
+ */
+export default function SegmentButton({ width, stretch, option, selected }: SegmentButtonProps) {
+  const [index, setIndex] = useState(selected ?? 0);
+
+  const selectedIndex = useMemo(() => selected ?? index, [index, selected]);
+
+  return (
+    <div
+      className={styles.segment}
+      style={{
+        width: stretch ? '100%' : undefined,
+        gridTemplateColumns: `repeat(${option.length},1fr)`,
+      }}
+    >
+      <div
+        className={styles['segment--selector']}
+        style={{
+          width: `${100 / option.length}%`,
+          left: `${selectedIndex * 100 / option.length}%`,
+        }}
+      />
+      {option.map((item, optionIndex) => (
+        <button
+          className={cn({
+            [styles.button]: true,
+            [styles['button--selected']]: optionIndex === selectedIndex,
+          })}
+          key={item.text}
+          type="button"
+          style={{ width: stretch ? 'auto' : (width || 'auto') }}
+          onClick={() => {
+            item.onClick();
+            setIndex(optionIndex);
+          }}
+        >
+          <div>
+            {item.text}
+          </div>
+        </button>
+      ))}
+    </div>
+  );
 }