@jk-core/components 1.1.17 → 1.1.19

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

@@ -1,45 +1,46 @@
-.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-size: 1em;
+  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>
+  );
 }

package/src/common/Skeleton/Skeleton.module.scss

@@ -1,80 +1,80 @@
-$color: #eeeeee;
-$shadow: #e5e5e5;
-
-@keyframes skeleton-blink {
-  0% {
-    left: -100%;
-  }
-  99.9% {
-    left: 100%;
-  }
-  100% {
-    left: -100%;
-  }
-}
-
-@keyframes skeleton-glow {
-  0% {
-    background-color: $color;
-  }
-  50% {
-    background-color: $shadow;
-  }
-  100% {
-    background-color: $color;
-  }
-}
-
-.skeleton-circle {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: $color;
-  border-radius: 100%;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.skeleton-round {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: $color;
-  border-radius: 10px;
-  overflow: hidden;
-  flex-shrink: 0;
-}
-
-.skeleton-rectangle {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: $color;
-  flex-shrink: 0;
-  overflow: hidden;
-}
-
-.skeleton--glow {
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    animation: skeleton-glow 2s infinite;
-  }
-}
-
-.skeleton--blink {
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(to right, transparent, $shadow, transparent);
-    animation: skeleton-blink 3s infinite;
-  }
-}
+$color: #eeeeee;
+$shadow: #e5e5e5;
+
+@keyframes skeleton-blink {
+  0% {
+    left: -100%;
+  }
+  99.9% {
+    left: 100%;
+  }
+  100% {
+    left: -100%;
+  }
+}
+
+@keyframes skeleton-glow {
+  0% {
+    background-color: $color;
+  }
+  50% {
+    background-color: $shadow;
+  }
+  100% {
+    background-color: $color;
+  }
+}
+
+.skeleton-circle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: $color;
+  border-radius: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.skeleton-round {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: $color;
+  border-radius: 10px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.skeleton-rectangle {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: $color;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.skeleton--glow {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    animation: skeleton-glow 2s infinite;
+  }
+}
+
+.skeleton--blink {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, transparent, $shadow, transparent);
+    animation: skeleton-blink 3s infinite;
+  }
+}

package/src/common/Skeleton/index.tsx

@@ -1,48 +1,48 @@
-import styles from './Skeleton.module.scss';
-
-interface SkeletonProps {
-  /**
-   * 스켈레톤의 모양을 지정합니다. 'circle', 'rectangle', 'round' 중 하나를 선택할 수 있습니다.
-   * 기본값은 'rectangle'입니다.
-   */
-  shape?: 'circle' | 'rectangle' | 'round';
-  /**
-   * 스켈레톤의 너비를 지정합니다. 기본값은 '100%'입니다.
-   * 'auto'로 설정하면 콘텐츠에 맞게 자동으로 조정됩니다.
-   */
-  width?: string | number;
-  /**
-   * 스켈레톤의 높이를 지정합니다. 기본값은 '20px'입니다.
-   * 'auto'로 설정하면 콘텐츠에 맞게 자동으로 조정됩니다.
-   */
-  height?: string | number;
-  /**
-   * 스켈레톤 애니메이션 효과를 지정합니다. 'glow' 또는 'blink' 중 하나를 선택할 수 있습니다.
-   * 기본값은 'glow'입니다.
-   */
-  animation?: 'glow' | 'blink';
-}
-
-/**
- * 스켈레톤 컴포넌트는 로딩 상태를 나타내기 위해 사용됩니다.
- * 다양한 모양과 크기를 지원하며, 애니메이션 효과를 적용할 수 있습니다.
- */
-export default function Skeleton({ shape, width, height, animation = 'glow' }: SkeletonProps) {
-  const animationClass = animation === 'glow' ? styles['skeleton--glow'] : styles['skeleton--blink'];
-
-  if (shape === 'circle') {
-    return (
-      <div className={`${styles['skeleton-circle']} ${animationClass}`} style={{ width, height }} />
-    );
-  }
-
-  if (shape === 'round') {
-    return (
-      <div className={`${styles['skeleton-round']} ${animationClass}`} style={{ width, height }} />
-    );
-  }
-
-  return (
-    <div className={`${styles['skeleton-rectangle']} ${animationClass}`} style={{ width, height }} />
-  );
+import styles from './Skeleton.module.scss';
+
+interface SkeletonProps {
+  /**
+   * 스켈레톤의 모양을 지정합니다. 'circle', 'rectangle', 'round' 중 하나를 선택할 수 있습니다.
+   * 기본값은 'rectangle'입니다.
+   */
+  shape?: 'circle' | 'rectangle' | 'round';
+  /**
+   * 스켈레톤의 너비를 지정합니다. 기본값은 '100%'입니다.
+   * 'auto'로 설정하면 콘텐츠에 맞게 자동으로 조정됩니다.
+   */
+  width?: string | number;
+  /**
+   * 스켈레톤의 높이를 지정합니다. 기본값은 '20px'입니다.
+   * 'auto'로 설정하면 콘텐츠에 맞게 자동으로 조정됩니다.
+   */
+  height?: string | number;
+  /**
+   * 스켈레톤 애니메이션 효과를 지정합니다. 'glow' 또는 'blink' 중 하나를 선택할 수 있습니다.
+   * 기본값은 'glow'입니다.
+   */
+  animation?: 'glow' | 'blink';
+}
+
+/**
+ * 스켈레톤 컴포넌트는 로딩 상태를 나타내기 위해 사용됩니다.
+ * 다양한 모양과 크기를 지원하며, 애니메이션 효과를 적용할 수 있습니다.
+ */
+export default function Skeleton({ shape, width, height, animation = 'glow' }: SkeletonProps) {
+  const animationClass = animation === 'glow' ? styles['skeleton--glow'] : styles['skeleton--blink'];
+
+  if (shape === 'circle') {
+    return (
+      <div className={`${styles['skeleton-circle']} ${animationClass}`} style={{ width, height }} />
+    );
+  }
+
+  if (shape === 'round') {
+    return (
+      <div className={`${styles['skeleton-round']} ${animationClass}`} style={{ width, height }} />
+    );
+  }
+
+  return (
+    <div className={`${styles['skeleton-rectangle']} ${animationClass}`} style={{ width, height }} />
+  );
 }

package/src/common/SwitchButton/SwitchButton.module.scss

@@ -1,65 +1,65 @@
-$main: #246beb;
-$main-shadow: #113475;
-$background: #eeeeee;
-$shadow: #bcbcbc;
-
-.button {
-	display: flex;
-	align-items: center;
-	height: 20px;
-	border: none;
-	background-color: transparent;
-	margin: 0 5px;
-	cursor: pointer;
-}
-
-.switch {
-	position: relative;
-	display: flex;
-	align-items: center;
-	width: 50px;
-	height: 25px;
-	border-radius: 100px;
-	background-color: $background;
-	box-shadow: inset 0 0 3px 1px $shadow;
-	transition: background-color 0.2s;
-
-	&__off {
-		background-color: $main;
-		border-color: $main;
-		box-shadow: inset 0 0 3px 1px $main-shadow;
-	}
-
-	&__button {
-		position: absolute;
-		width: 25px;
-		height: 25px;
-		border-radius: 100px;
-		transition: 0.2s;
-		padding: 2px;
-		overflow: hidden;
-
-		&--circle {
-			width: 100%;
-			height: 100%;
-			background-color: #ffffff;
-			border-radius: 100%;
-			box-shadow: 0 0 5px 1px $shadow;
-		}
-
-		&--circle-on {
-			box-shadow: none;
-		}
-
-		&--off {
-			left: 0px;
-			transition: 0.2s;
-		}
-
-		&--on {
-			left: 25px;
-			transition: 0.2s;
-			border-color: $main;
-		}
-	}
-}
+$main: #246beb;
+$main-shadow: #113475;
+$background: #eeeeee;
+$shadow: #bcbcbc;
+
+.button {
+	display: flex;
+	align-items: center;
+	height: 20px;
+	border: none;
+	background-color: transparent;
+	margin: 0 5px;
+	cursor: pointer;
+}
+
+.switch {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 50px;
+	height: 25px;
+	border-radius: 100px;
+	background-color: $background;
+	box-shadow: inset 0 0 3px 1px $shadow;
+	transition: background-color 0.2s;
+
+	&__off {
+		background-color: $main;
+		border-color: $main;
+		box-shadow: inset 0 0 3px 1px $main-shadow;
+	}
+
+	&__button {
+		position: absolute;
+		width: 25px;
+		height: 25px;
+		border-radius: 100px;
+		transition: 0.2s;
+		padding: 2px;
+		overflow: hidden;
+
+		&--circle {
+			width: 100%;
+			height: 100%;
+			background-color: #ffffff;
+			border-radius: 100%;
+			box-shadow: 0 0 5px 1px $shadow;
+		}
+
+		&--circle-on {
+			box-shadow: none;
+		}
+
+		&--off {
+			left: 0px;
+			transition: 0.2s;
+		}
+
+		&--on {
+			left: 25px;
+			transition: 0.2s;
+			border-color: $main;
+		}
+	}
+}