@jk-core/components 1.1.9 → 1.1.11

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>
+  );
 }