@jk-core/components 1.1.17 → 1.1.19

package/src/assets/arrow.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="64px" height="64px" viewBox="0 0 24 24" fill="#0F0F0F" xmlns="http://www.w3.org/2000/svg">
-
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier"> <path d="M16.1795 3.26875C15.7889 2.87823 15.1558 2.87823 14.7652 3.26875L8.12078 9.91322C6.94952 11.0845 6.94916 12.9833 8.11996 14.155L14.6903 20.7304C15.0808 21.121 15.714 21.121 16.1045 20.7304C16.495 20.3399 16.495 19.7067 16.1045 19.3162L9.53246 12.7442C9.14194 12.3536 9.14194 11.7205 9.53246 11.33L16.1795 4.68297C16.57 4.29244 16.57 3.65928 16.1795 3.26875Z"/> </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="64px" height="64px" viewBox="0 0 24 24" fill="#0F0F0F" xmlns="http://www.w3.org/2000/svg">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M16.1795 3.26875C15.7889 2.87823 15.1558 2.87823 14.7652 3.26875L8.12078 9.91322C6.94952 11.0845 6.94916 12.9833 8.11996 14.155L14.6903 20.7304C15.0808 21.121 15.714 21.121 16.1045 20.7304C16.495 20.3399 16.495 19.7067 16.1045 19.3162L9.53246 12.7442C9.14194 12.3536 9.14194 11.7205 9.53246 11.33L16.1795 4.68297C16.57 4.29244 16.57 3.65928 16.1795 3.26875Z"/> </g>
+
 </svg>

package/src/assets/close.svg

@@ -1,16 +1,16 @@
-<!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="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="#000000" stroke-width="0.696">
-
-<g id="SVGRepo_bgCarrier" stroke-width="0"/>
-
-<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
-
-<g id="SVGRepo_iconCarrier">
-
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z" />
-
-</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="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" fill="#000000" stroke-width="0.696">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier">
+
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.207 6.207a1 1 0 0 0-1.414-1.414L12 10.586 6.207 4.793a1 1 0 0 0-1.414 1.414L10.586 12l-5.793 5.793a1 1 0 1 0 1.414 1.414L12 13.414l5.793 5.793a1 1 0 0 0 1.414-1.414L13.414 12l5.793-5.793z" />
+
+</g>
+
 </svg>

package/src/assets/drop-arrow.svg

@@ -1,3 +1,3 @@
-<svg width="25" height="25" viewBox="0 0 20 20" fill="none"  stroke="#2D2D2D" xmlns="http://www.w3.org/2000/svg">
-<path d="M5 7.5L10 13L15 7.5" stroke-width="1.4" stroke-linecap="round"/>
-</svg>
+<svg width="25" height="25" viewBox="0 0 20 20" fill="none"  stroke="#2D2D2D" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 7.5L10 13L15 7.5" stroke-width="1.4" stroke-linecap="round"/>
+</svg>

package/src/common/Accordion/Accordion.module.scss

@@ -1,53 +1,53 @@
-.accordion {
-  width: 500px;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border: 1px solid var(--G-20);
-  transition: margin-bottom 0.25s;
-  border-radius: 5px;
-  font-size: 1em;
-
-  &--visible {
-    margin-bottom: 10px;
-  }
-}
-
-.button {
-  width: 100%;
-  background-color: white;
-  transition: padding 0.25s;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px 10px;
-  font-size: 1.5em;
-  font-weight: 500;
-
-  &__arrow {
-    width: 15px;
-    height: 15px;
-    stroke: var(--G-50);
-    transition: transform 0.25s;
-
-    &--up {
-      transform: rotate(180deg);
-    }
-  }
-
-  &--visible {
-    padding: 30px 10px;
-  }
-}
-
-.wrapper {
-  overflow: hidden;
-  transition: height 0.25s;
-  background-color: white;
-}
-
-.content {
-  white-space: pre-wrap;
-  font-size: 1em;
-  padding: 20px;
-}
+.accordion {
+  width: 500px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--G-20);
+  transition: margin-bottom 0.25s;
+  border-radius: 5px;
+  font-size: 1em;
+
+  &--visible {
+    margin-bottom: 10px;
+  }
+}
+
+.button {
+  width: 100%;
+  background-color: white;
+  transition: padding 0.25s;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 10px;
+  font-size: 1.5em;
+  font-weight: 500;
+
+  &__arrow {
+    width: 15px;
+    height: 15px;
+    stroke: var(--G-50);
+    transition: transform 0.25s;
+
+    &--up {
+      transform: rotate(180deg);
+    }
+  }
+
+  &--visible {
+    padding: 30px 10px;
+  }
+}
+
+.wrapper {
+  overflow: hidden;
+  transition: height 0.25s;
+  background-color: white;
+}
+
+.content {
+  white-space: pre-wrap;
+  font-size: 1em;
+  padding: 20px;
+}

package/src/common/Accordion/arrow-down.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="9" viewBox="0 0 12 9" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 1.5L6 7L11 1.5" stroke-width="1.4" stroke-linecap="round"/>
-</svg>
+<svg width="12" height="9" viewBox="0 0 12 9" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.5L6 7L11 1.5" stroke-width="1.4" stroke-linecap="round"/>
+</svg>

package/src/common/Accordion/arrow-up.svg

@@ -1,3 +1,3 @@
-<svg width="12" height="9" viewBox="0 0 12 9" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11 7.5L6 2L1 7.5" stroke-width="1.4" stroke-linecap="round"/>
-</svg>
+<svg width="12" height="9" viewBox="0 0 12 9" stroke="black" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 7.5L6 2L1 7.5" stroke-width="1.4" stroke-linecap="round"/>
+</svg>

package/src/common/Accordion/index.tsx

@@ -1,55 +1,55 @@
-import { useRef, useState } from 'react';
-import { cn } from '@jk-core/utils';
-import styles from './Accordion.module.scss';
-import DownIcon from './arrow-down.svg';
-
-interface AccordionProps {
-  /**
-   * 아코디언의 내용
-   */
-  children: React.ReactNode;
-}
-
-/**
- * 아코디언 컴포넌트
- * 클릭 시 내용이 확장되거나 축소되는 UI 컴포넌트입니다.
- */
-export default function Accordion({ children }: AccordionProps) {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-
-  return (
-    <div className={cn({
-      [styles.accordion]: true,
-      [styles['accordion--visible']]: visible,
-    })}
-    >
-      <button
-        className={cn({
-          [styles.button]: true,
-          [styles['button--visible']]: visible,
-        })}
-        type="button"
-        onClick={() => setVisible(!visible)}
-      >
-        Accordion
-        <DownIcon className={cn({
-          [styles.button__arrow]: true,
-          [styles['button__arrow--up']]: visible,
-        })}
-        />
-      </button>
-      <div
-        className={cn({
-          [styles.wrapper]: true,
-          [styles['wrapper--visible']]: visible,
-        })}
-        style={{ height: visible ? ((contentRef.current?.scrollHeight ?? 0)) : '0px' }}
-      >
-        <div className={styles.content} ref={contentRef}>
-          {children}
-        </div>
-      </div>
-    </div>
-  );
+import { useRef, useState } from 'react';
+import { cn } from '@jk-core/utils';
+import styles from './Accordion.module.scss';
+import DownIcon from './arrow-down.svg';
+
+interface AccordionProps {
+  /**
+   * 아코디언의 내용
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * 아코디언 컴포넌트
+ * 클릭 시 내용이 확장되거나 축소되는 UI 컴포넌트입니다.
+ */
+export default function Accordion({ children }: AccordionProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <div className={cn({
+      [styles.accordion]: true,
+      [styles['accordion--visible']]: visible,
+    })}
+    >
+      <button
+        className={cn({
+          [styles.button]: true,
+          [styles['button--visible']]: visible,
+        })}
+        type="button"
+        onClick={() => setVisible(!visible)}
+      >
+        Accordion
+        <DownIcon className={cn({
+          [styles.button__arrow]: true,
+          [styles['button__arrow--up']]: visible,
+        })}
+        />
+      </button>
+      <div
+        className={cn({
+          [styles.wrapper]: true,
+          [styles['wrapper--visible']]: visible,
+        })}
+        style={{ height: visible ? ((contentRef.current?.scrollHeight ?? 0)) : '0px' }}
+      >
+        <div className={styles.content} ref={contentRef}>
+          {children}
+        </div>
+      </div>
+    </div>
+  );
 }

package/src/common/Breadcrumbs/Breadcrumbs.module.scss

@@ -1,46 +1,46 @@
-.breadcrumbs {
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--G-60);
-}
-
-.separator {
-  font-size: 12px;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: var(--G-60);
-  font-size: 15px;
-  font-weight: 500;
-
-  & > svg {
-    width: 16px;
-    height: 16px;
-    stroke: var(--G-60);
-  }
-
-  &:hover {
-    text-decoration: underline;
-
-    &:hover > svg {
-      stroke: var(--G-80);
-    }
-  }
-
-  &:last-child {
-    color: var(--G-80);
-
-    & > svg {
-      stroke: var(--G-80);
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
+.breadcrumbs {
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--G-60);
+}
+
+.separator {
+  font-size: 12px;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--G-60);
+  font-size: 15px;
+  font-weight: 500;
+
+  & > svg {
+    width: 16px;
+    height: 16px;
+    stroke: var(--G-60);
+  }
+
+  &:hover {
+    text-decoration: underline;
+
+    &:hover > svg {
+      stroke: var(--G-80);
+    }
+  }
+
+  &:last-child {
+    color: var(--G-80);
+
+    & > svg {
+      stroke: var(--G-80);
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

package/src/common/Breadcrumbs/home.svg

@@ -1,5 +1,5 @@
-<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
-<path d="M4 5.5V14.5H14V5.5" stroke-width="1.2"/>
-<path d="M6.5 12H11.5" stroke-width="1.2"/>
-<path d="M1 8L9 1L17 8" stroke-width="1.2"/>
-</svg>
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="black">
+<path d="M4 5.5V14.5H14V5.5" stroke-width="1.2"/>
+<path d="M6.5 12H11.5" stroke-width="1.2"/>
+<path d="M1 8L9 1L17 8" stroke-width="1.2"/>
+</svg>

package/src/common/Breadcrumbs/index.tsx

@@ -1,83 +1,83 @@
-import { Fragment } from 'react/jsx-runtime';
-import styles from './Breadcrumbs.module.scss';
-import HomeIcon from './home.svg';
-
-interface BreadcumbsProps {
-  /**
-   * 자식 요소로 BreadcrumbsItem 컴포넌트를 받습니다.
-   * 각 BreadcrumbsItem은 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
-   */
-  children: React.ReactNode;
-}
-
-/**
- * Breadcrumbs 컴포넌트
- * 여러 개의 ```<BreadcrumbsItem />```을 자식으로 받아 경로를 표시합니다.
- * 각 ```BreadcrumbsItem```은 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
- */
-export default function Breadcrumbs({ children }: BreadcumbsProps) {
-  return (
-    <div className={styles.breadcrumbs}>
-      {Array.isArray(children)
-        ? children.map((child, idx) => (
-          (!!child &&
-            <Fragment key={idx}>
-              {idx > 0 && (
-                <div className={styles.separator}>
-                  {'>'}
-                </div>
-              )}
-              {child}
-            </Fragment>)
-        ))
-        : children}
-    </div>
-  );
-}
-
-interface BreadcrumbsItemProps {
-  /**
-   * BreadcrumbsItem의 자식 요소로 표시될 텍스트입니다.
-   * 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
-   */
-  children: React.ReactNode;
-  /**
-   * BreadcrumbsItem이 클릭되었을 때 이동할 경로입니다.
-   * 기본값은 '/'로 설정되어 있습니다.
-   *
-   */
-  path: string;
-  /**
-   * BreadcrumbsItem이 홈 아이콘을 표시할지 여부입니다.
-   * 기본값은 false로 설정되어 있습니다.
-   * true로 설정하면 홈 아이콘이 표시됩니다.
-   */
-  root?: boolean;
-}
-
-/**
- * BreadcrumbsItem 컴포넌트
- * Breadcrumbs 컴포넌트의 자식으로 사용되며, 경로를 나타냅니다.
- * 클릭 시 해당 경로로 이동합니다.
- * 기본적으로 홈 아이콘과 함께 표시됩니다.
- */
-export function BreadcrumbsItem({ children, path, root }: BreadcrumbsItemProps) {
-  return (
-    <button
-      className={styles.item}
-      type="button"
-      onClick={() => {
-        window.location.assign(path);
-      }}
-    >
-      {root
-        ? (
-          <>
-            <HomeIcon className={styles.icon} />
-            {children}
-          </>
-        )
-        : children}
-    </button>
-  );
+import { Fragment } from 'react/jsx-runtime';
+import styles from './Breadcrumbs.module.scss';
+import HomeIcon from './home.svg';
+
+interface BreadcumbsProps {
+  /**
+   * 자식 요소로 BreadcrumbsItem 컴포넌트를 받습니다.
+   * 각 BreadcrumbsItem은 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Breadcrumbs 컴포넌트
+ * 여러 개의 ```<BreadcrumbsItem />```을 자식으로 받아 경로를 표시합니다.
+ * 각 ```BreadcrumbsItem```은 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
+ */
+export default function Breadcrumbs({ children }: BreadcumbsProps) {
+  return (
+    <div className={styles.breadcrumbs}>
+      {Array.isArray(children)
+        ? children.map((child, idx) => (
+          (!!child &&
+            <Fragment key={idx}>
+              {idx > 0 && (
+                <div className={styles.separator}>
+                  {'>'}
+                </div>
+              )}
+              {child}
+            </Fragment>)
+        ))
+        : children}
+    </div>
+  );
+}
+
+interface BreadcrumbsItemProps {
+  /**
+   * BreadcrumbsItem의 자식 요소로 표시될 텍스트입니다.
+   * 경로를 나타내며, 클릭 시 해당 경로로 이동합니다.
+   */
+  children: React.ReactNode;
+  /**
+   * BreadcrumbsItem이 클릭되었을 때 이동할 경로입니다.
+   * 기본값은 '/'로 설정되어 있습니다.
+   *
+   */
+  path: string;
+  /**
+   * BreadcrumbsItem이 홈 아이콘을 표시할지 여부입니다.
+   * 기본값은 false로 설정되어 있습니다.
+   * true로 설정하면 홈 아이콘이 표시됩니다.
+   */
+  root?: boolean;
+}
+
+/**
+ * BreadcrumbsItem 컴포넌트
+ * Breadcrumbs 컴포넌트의 자식으로 사용되며, 경로를 나타냅니다.
+ * 클릭 시 해당 경로로 이동합니다.
+ * 기본적으로 홈 아이콘과 함께 표시됩니다.
+ */
+export function BreadcrumbsItem({ children, path, root }: BreadcrumbsItemProps) {
+  return (
+    <button
+      className={styles.item}
+      type="button"
+      onClick={() => {
+        window.location.assign(path);
+      }}
+    >
+      {root
+        ? (
+          <>
+            <HomeIcon className={styles.icon} />
+            {children}
+          </>
+        )
+        : children}
+    </button>
+  );
 }