@jk-core/components 1.1.11 → 1.1.12

package/src/common/DropDown/index.tsx

@@ -1,104 +1,109 @@
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { cn } from '@jk-core/utils';
-import DownIcon from './arrow-down.svg';
-import styles from './DropDown.module.scss';
-import List from './List';
-
-interface DropDownProps {
-  /**
-   * 드롭다운 목록
-   */
-  list: string[];
-  /**
-   * 선택된 아이템을 처리하는 함수
-   */
-  onSelect: (item: string, index:number) => void;
-  /**
-   * 필터링 기능 활성화 여부
-   */
-  filter?: boolean;
-  /**
-   * 드롭다운의 플레이스홀더 텍스트
-   */
-  placeholder?: string;
-  /**
-   * 드롭다운의 스타일
-   */
-  style?: React.CSSProperties;
-}
-
-/**
- * 드롭다운 컴포넌트
- * 사용자가 선택할 수 있는 목록을 제공하며, 선택된 아이템을 표시합니다.
- * 필터링 기능을 활성화할 수 있으며, 플레이스홀더 텍스트를 설정할 수 있습니다.
- */
-export default function DropDown({
-  list = [], onSelect, filter,
-  placeholder, style }: DropDownProps) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  const [selectedItem, setSelectedItem] = useState<string>(placeholder || '선택하세요');
-  const [isOpen, setIsOpen] = useState(false);
-  const [filteredList, setFilteredList] = useState(list);
-
-  useEffect(() => {
-    if (!isOpen) {
-      setFilteredList(list);
-    }
-
-    function handleClick(event: MouseEvent) {
-      if (
-        wrapperRef.current &&
-        !wrapperRef.current.contains(event.target as Node) &&
-        listRef.current &&
-        !listRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener('mousedown', handleClick);
-    }
-    return () => {
-      document.removeEventListener('mousedown', handleClick);
-    };
-  }, [isOpen, list]);
-
-  return (
-    <div className={styles.wrapper} ref={wrapperRef}>
-      <button
-        className={styles.title}
-        type="button"
-        onClick={() => setIsOpen(!isOpen)}
-        style={style}
-      >
-        <span>{selectedItem}</span>
-        <DownIcon className={cn({
-          [styles.icon]: true,
-          [styles['icon--up']]: isOpen,
-        })}
-        />
-      </button>
-      {isOpen && (
-        createPortal(
-          <div ref={listRef} className={styles['list-portal']}>
-            <List
-              selectedItem={selectedItem}
-              list={list}
-              filteredList={filteredList}
-              parent={wrapperRef}
-              setFilteredList={filter ? setFilteredList : undefined}
-              onSelect={(item, index) => {
-                onSelect(item, index);
-                setSelectedItem(item);
-                setFilteredList(list);
-                setIsOpen(false);
-              }}
-            />
-          </div>, document.body)
-      )}
-    </div>
-  );
+import { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@jk-core/utils';
+import DownIcon from './arrow-down.svg';
+import styles from './DropDown.module.scss';
+import List from './List';
+
+interface DropDownProps {
+  /**
+   * 드롭다운 목록
+   */
+  list: string[];
+
+  /**
+   * 드롭다운 버튼에 표시될 내용
+   */
+  value?: string;
+  /**
+   * 선택된 아이템을 처리하는 함수
+   */
+  onSelect: (item: string, index:number) => void;
+  /**
+   * 필터링 기능 활성화 여부
+   */
+  filter?: boolean;
+  /**
+   * 드롭다운의 플레이스홀더 텍스트
+   */
+  placeholder?: string;
+  /**
+   * 드롭다운의 스타일
+   */
+  style?: React.CSSProperties;
+}
+
+/**
+ * 드롭다운 컴포넌트
+ * 사용자가 선택할 수 있는 목록을 제공하며, 선택된 아이템을 표시합니다.
+ * 필터링 기능을 활성화할 수 있으며, 플레이스홀더 텍스트를 설정할 수 있습니다.
+ */
+export default function DropDown({
+  list = [], value, onSelect, filter,
+  placeholder, style }: DropDownProps) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const listRef = useRef<HTMLDivElement>(null);
+  const [selectedItem, setSelectedItem] = useState<string>(placeholder || '선택하세요');
+  const [isOpen, setIsOpen] = useState(false);
+  const [filteredList, setFilteredList] = useState(list);
+
+  useEffect(() => {
+    if (!isOpen) {
+      setFilteredList(list);
+    }
+
+    function handleClick(event: MouseEvent) {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node) &&
+        listRef.current &&
+        !listRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClick);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [isOpen, list]);
+
+  return (
+    <div className={styles.wrapper} ref={wrapperRef}>
+      <button
+        className={styles.title}
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        style={style}
+      >
+        <span>{value || selectedItem}</span>
+        <DownIcon className={cn({
+          [styles.icon]: true,
+          [styles['icon--up']]: isOpen,
+        })}
+        />
+      </button>
+      {isOpen && (
+        createPortal(
+          <div ref={listRef} className={styles['list-portal']}>
+            <List
+              selectedItem={selectedItem}
+              list={list}
+              filteredList={filteredList}
+              parent={wrapperRef}
+              setFilteredList={filter ? setFilteredList : undefined}
+              onSelect={(item, index) => {
+                onSelect(item, index);
+                setSelectedItem(item);
+                setFilteredList(list);
+                setIsOpen(false);
+              }}
+            />
+          </div>, document.body)
+      )}
+    </div>
+  );
 }

package/src/common/DropDown/search.svg

@@ -1,4 +1,4 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.7" y="0.7" width="12.6" height="12.6" rx="6.3" stroke="#2D2D2D" stroke-width="1.4"/>
-<path d="M11.459 11.458L14.9945 14.9935" stroke="#2D2D2D" stroke-width="1.4" stroke-linecap="square"/>
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.7" y="0.7" width="12.6" height="12.6" rx="6.3" stroke="#2D2D2D" stroke-width="1.4"/>
+<path d="M11.459 11.458L14.9945 14.9935" stroke="#2D2D2D" stroke-width="1.4" stroke-linecap="square"/>
+</svg>

package/src/common/Pagination/Pagination.module.scss

@@ -1,210 +1,210 @@
-$delay: 0.2s;
-$size: 40px;
-
-@keyframes slideLeft {
-  from {
-    transform: translateX(-$size);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideRight {
-  from {
-    transform: translateX($size);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideDoubleLeft {
-  from {
-    transform: translateX(-$size * 2);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideDoubleRight {
-  from {
-    transform: translateX($size * 2);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes slideTripleLeft {
-  from {
-    transform: translateX(-$size * 3);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes slideTripleRight {
-  from {
-    transform: translateX($size * 3);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-.pagination {
-  position: relative;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  padding: 10px 0;
-
-  & > * {
-    user-select: none;
-  }
-}
-
-.arrow {
-  width: $size;
-  height: $size;
-  border-radius: 100%;
-  background-color: var(--G-10);
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-drag: none;
-  pointer-events: auto;
-  transition: background-color 0.1s ease;
-  flex-shrink: 0;
-
-  @media screen and (max-width: 500px) {
-    display: none;
-  }
-
-  & > svg {
-    width: 20px;
-    height: 20px;
-    fill: var(--G-80);
-    transition: fill 0.1s ease;
-  }
-
-  &:hover {
-    background-color: var(--P-50);
-
-    & > svg {
-      fill: var(--white);
-    }
-  }
-
-  &--disabled {
-    background-color: var(--G-10) !important;
-    cursor: default;
-
-    & > svg {
-      fill: var(--G-40) !important; // Gray color for disabled state
-    }
-  }
-}
-
-.slider {
-  position: relative;
-  height: $size;
-  display: flex;
-  overflow: visible;
-  background-color: var(--G-10);
-  border-radius: 10px;
-}
-
-.track {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: $size;
-  height: $size;
-  border-radius: 10px;
-  background: linear-gradient(135deg, var(--P-40) 0%, var(--P-60) 100%);
-  box-shadow: 0 0 7px 2px #3234bf56;
-  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 0;
-}
-
-.pages {
-  overflow: hidden visible;
-  display: flex;
-}
-
-.pageWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform $delay ease-in-out;
-  border-radius: 10px;
-}
-
-.page {
-  width: $size;
-  height: $size;
-  flex-shrink: 0;
-  z-index: 2;
-  color: #6b7280;
-  user-select: none;
-  font-size: 14px;
-  font-weight: 600;
-
-  &:disabled {
-    cursor: default;
-  }
-
-  &:hover {
-    color: var(--P-50);
-  }
-
-  &--selected {
-    transition: color $delay;
-    color: #ffffff !important;
-  }
-}
-
-.left {
-  animation: slideLeft $delay;
-}
-
-.right {
-  animation: slideRight $delay;
-}
-
-.doubleLeft {
-  animation: slideDoubleLeft $delay;
-}
-
-.doubleRight {
-  animation: slideDoubleRight $delay;
-}
-
-.tripleLeft {
-  animation: slideTripleLeft $delay;
-}
-
-.tripleRight {
-  animation: slideTripleRight $delay;
-}
-
-.portal {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  width: 60px;
-  height: $size;
-  flex-shrink: 0;
-  overflow: hidden;
-  z-index: 2;
-  font-size: 14px;
-  font-weight: 600;
-
-  &__ellipsis {
-    color: #6b7280;
-    font-size: 12px;
-  }
-}
+$delay: 0.2s;
+$size: 40px;
+
+@keyframes slideLeft {
+  from {
+    transform: translateX(-$size);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideRight {
+  from {
+    transform: translateX($size);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDoubleLeft {
+  from {
+    transform: translateX(-$size * 2);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideDoubleRight {
+  from {
+    transform: translateX($size * 2);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideTripleLeft {
+  from {
+    transform: translateX(-$size * 3);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes slideTripleRight {
+  from {
+    transform: translateX($size * 3);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.pagination {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px 0;
+
+  & > * {
+    user-select: none;
+  }
+}
+
+.arrow {
+  width: $size;
+  height: $size;
+  border-radius: 100%;
+  background-color: var(--G-10);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: auto;
+  transition: background-color 0.1s ease;
+  flex-shrink: 0;
+
+  @media screen and (max-width: 500px) {
+    display: none;
+  }
+
+  & > svg {
+    width: 20px;
+    height: 20px;
+    fill: var(--G-80);
+    transition: fill 0.1s ease;
+  }
+
+  &:hover {
+    background-color: var(--P-50);
+
+    & > svg {
+      fill: var(--white);
+    }
+  }
+
+  &--disabled {
+    background-color: var(--G-10) !important;
+    cursor: default;
+
+    & > svg {
+      fill: var(--G-40) !important; // Gray color for disabled state
+    }
+  }
+}
+
+.slider {
+  position: relative;
+  height: $size;
+  display: flex;
+  overflow: visible;
+  background-color: var(--G-10);
+  border-radius: 10px;
+}
+
+.track {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: $size;
+  height: $size;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--P-40) 0%, var(--P-60) 100%);
+  box-shadow: 0 0 7px 2px #3234bf56;
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 0;
+}
+
+.pages {
+  overflow: hidden visible;
+  display: flex;
+}
+
+.pageWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform $delay ease-in-out;
+  border-radius: 10px;
+}
+
+.page {
+  width: $size;
+  height: $size;
+  flex-shrink: 0;
+  z-index: 2;
+  color: #6b7280;
+  user-select: none;
+  font-size: 14px;
+  font-weight: 600;
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &:hover {
+    color: var(--P-50);
+  }
+
+  &--selected {
+    transition: color $delay;
+    color: #ffffff !important;
+  }
+}
+
+.left {
+  animation: slideLeft $delay;
+}
+
+.right {
+  animation: slideRight $delay;
+}
+
+.doubleLeft {
+  animation: slideDoubleLeft $delay;
+}
+
+.doubleRight {
+  animation: slideDoubleRight $delay;
+}
+
+.tripleLeft {
+  animation: slideTripleLeft $delay;
+}
+
+.tripleRight {
+  animation: slideTripleRight $delay;
+}
+
+.portal {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 60px;
+  height: $size;
+  flex-shrink: 0;
+  overflow: hidden;
+  z-index: 2;
+  font-size: 14px;
+  font-weight: 600;
+
+  &__ellipsis {
+    color: #6b7280;
+    font-size: 12px;
+  }
+}

package/src/common/Pagination/arrow-left.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" 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="30px" height="30px" viewBox="0 0 24 24" fill="#000000" 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>