@jk-core/components 1.1.17 → 1.1.18

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

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