@jk-core/components 1.1.17 → 1.1.19

package/src/common/DropDown/DropDown.module.scss

@@ -1,135 +1,135 @@
-@use "@/styles/scrollbar.scss" as scrollbar;
-
-.wrapper {
-  position: relative;
-  width: fit-content;
-}
-
-.title {
-  width: 180px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: var(--white);
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 10px;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.icon {
-  width: 15px;
-  height: 15px;
-  stroke: var(--G-60);
-  transition: transform 0.25s;
-
-  &--up {
-    transform: rotate(180deg);
-  }
-}
-
-.list-portal {
-  display: contents;
-}
-
-.list-wrapper {
-  height: 0;
-  position: absolute;
-  isolation: isolate;
-  background-color: var(--white);
-  transition: height 0.25s;
-  overflow: hidden;
-  border: 1px solid var(--G-30);
-  z-index: 10000;
-
-  &--up {
-    border-radius: 0 0 5px 5px;
-    box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
-  }
-
-  &--down {
-    border-radius: 5px 5px 0 0;
-    box-shadow: 0 -2px 10px 2px rgba(0, 0, 0, 0.2);
-  }
-}
-
-.list {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow-y: scroll;
-  max-height: 300px;
-
-  @include scrollbar.custom-scrollbar($background: var(--G-10), $color: var(--G-50));
-
-  &__search {
-    position: sticky;
-    top: 0;
-    width: 100%;
-    height: 40px;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    border: none;
-    border-bottom: 1px solid var(--G-20);
-    font-size: 16px;
-    outline: none;
-    box-sizing: border-box;
-    padding: 8px;
-    border-radius: 5px 5px 0 0;
-    background-color: var(--white);
-
-    &:focus-within {
-      outline: 2px solid var(--P-20);
-      outline-offset: -2px;
-    }
-
-    & > svg {
-      width: 11px;
-      height: 11px;
-      flex-shrink: 0;
-    }
-
-    & > input {
-      border: none;
-      outline: none;
-      background-color: transparent;
-    }
-  }
-
-  &__item {
-    min-height: 50px;
-    padding: 8px;
-
-    & + & {
-      border-top: 1px solid var(--G-20);
-    }
-
-    &:hover {
-      background-color: var(--G-5);
-    }
-
-    &--selected {
-      background-color: var(--G-20);
-      font-weight: 600;
-
-      &:hover {
-        background-color: var(--G-20);
-      }
-    }
-  }
-
-  &__empty {
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    text-align: center;
-    color: var(--G-50);
-    font-size: 16px;
-  }
-}
+@use "@/styles/scrollbar.scss" as scrollbar;
+
+.wrapper {
+  position: relative;
+  width: fit-content;
+}
+
+.title {
+  width: 180px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: var(--white);
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+.icon {
+  width: 15px;
+  height: 15px;
+  stroke: var(--G-60);
+  transition: transform 0.25s;
+
+  &--up {
+    transform: rotate(180deg);
+  }
+}
+
+.list-portal {
+  display: contents;
+}
+
+.list-wrapper {
+  height: 0;
+  position: absolute;
+  isolation: isolate;
+  background-color: var(--white);
+  transition: height 0.25s;
+  overflow: hidden;
+  border: 1px solid var(--G-30);
+  z-index: 10000;
+
+  &--up {
+    border-radius: 0 0 5px 5px;
+    box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.2);
+  }
+
+  &--down {
+    border-radius: 5px 5px 0 0;
+    box-shadow: 0 -2px 10px 2px rgba(0, 0, 0, 0.2);
+  }
+}
+
+.list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+  max-height: 300px;
+
+  @include scrollbar.custom-scrollbar($background: var(--G-10), $color: var(--G-50));
+
+  &__search {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    height: 40px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    border: none;
+    border-bottom: 1px solid var(--G-20);
+    font-size: 16px;
+    outline: none;
+    box-sizing: border-box;
+    padding: 8px;
+    border-radius: 5px 5px 0 0;
+    background-color: var(--white);
+
+    &:focus-within {
+      outline: 2px solid var(--P-20);
+      outline-offset: -2px;
+    }
+
+    & > svg {
+      width: 11px;
+      height: 11px;
+      flex-shrink: 0;
+    }
+
+    & > input {
+      border: none;
+      outline: none;
+      background-color: transparent;
+    }
+  }
+
+  &__item {
+    min-height: 50px;
+    padding: 8px;
+
+    & + & {
+      border-top: 1px solid var(--G-20);
+    }
+
+    &:hover {
+      background-color: var(--G-5);
+    }
+
+    &--selected {
+      background-color: var(--G-20);
+      font-weight: 600;
+
+      &:hover {
+        background-color: var(--G-20);
+      }
+    }
+  }
+
+  &__empty {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    text-align: center;
+    color: var(--G-50);
+    font-size: 16px;
+  }
+}

package/src/common/DropDown/List.tsx

@@ -1,157 +1,157 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { cn } from '@jk-core/utils';
-import styles from './DropDown.module.scss';
-import SearchIcon from './search.svg';
-
-interface ListProps {
-  selectedItem?: string;
-  list: string[];
-  filteredList: string[];
-  parent: React.RefObject<HTMLDivElement | null>;
-  onSelect: (item: string, index: number) => void;
-  setFilteredList?: React.Dispatch<React.SetStateAction<string[]>>
-  ;
-}
-
-interface Position {
-  top?: number;
-  left?: number;
-  bottom?: number;
-  height: number;
-}
-
-export default function List({ parent, selectedItem, list, filteredList, onSelect, setFilteredList }: ListProps) {
-  const listHeight = useMemo(() => {
-    if (setFilteredList) {
-      return Math.min((filteredList.length * 50) + 40, 300);
-    }
-    return Math.min(list.length * 50, 300);
-  }, [filteredList.length, list.length, setFilteredList]);
-
-  const listRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<Position>(() => {
-    if (!parent || !parent.current) {
-      return { top: 0, left: 0, bottom: 0, height: 0 };
-    }
-    const rect = parent.current.getBoundingClientRect();
-
-    const spaceBelow = window.innerHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    if (spaceBelow < listHeight && spaceAbove > listHeight) {
-      // 위에 열림: bottom 사용, top은 undefined
-      return {
-        top: undefined,
-        left: rect.left + window.scrollX,
-        bottom: window.innerHeight - rect.top - window.scrollY,
-        height: 0,
-      };
-    }
-    // 아래에 열림: top 사용, bottom은 undefined
-    return {
-      top: rect.bottom + window.scrollY,
-      left: rect.left + window.scrollX,
-      bottom: undefined,
-      height: 0,
-      scroll: window.scrollY,
-    };
-  });
-
-  useEffect(() => {
-    function updatePosition() {
-      setPosition(prev => ({
-        ...prev,
-        height: listHeight,
-      }));
-    }
-
-    updatePosition();
-
-    window.addEventListener('resize', updatePosition);
-
-    return () => {
-      window.removeEventListener('resize', updatePosition);
-    };
-  }, [listHeight]);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (!parent || !parent.current) return;
-      const rect = parent.current.getBoundingClientRect();
-      const spaceBelow = window.innerHeight - rect.bottom;
-      const spaceAbove = rect.top;
-      if (spaceBelow < listHeight && spaceAbove > listHeight) {
-      // 위에 열림
-        setPosition({
-          top: undefined,
-          left: rect.left + window.scrollX,
-          bottom: window.innerHeight - rect.top - window.scrollY,
-          height: listHeight,
-        });
-      } else {
-      // 아래에 열림
-        setPosition({
-          top: rect.bottom + window.scrollY,
-          left: rect.left + window.scrollX,
-          bottom: undefined,
-          height: listHeight,
-        });
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll, true);
-    window.addEventListener('resize', handleScroll, true);
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll, true);
-      window.removeEventListener('resize', handleScroll, true);
-    };
-  }, [listHeight, parent, position.height]);
-
-  return (
-    <div
-      className={cn({
-        [styles['list-wrapper']]: true,
-        [styles['list-wrapper--up']]: position.bottom === undefined,
-        [styles['list-wrapper--down']]: position.top === undefined,
-      })}
-      style={{
-        width: parent?.current?.offsetWidth,
-        height: position.height,
-        top: position.top,
-        left: position.left,
-        bottom: position.bottom,
-      }}
-    >
-      <div className={styles.list} ref={listRef}>
-        {setFilteredList && (
-          <label className={styles.list__search}>
-            <SearchIcon />
-            <input
-              type="text"
-              placeholder="검색"
-              onChange={(e) => setFilteredList(list.filter((item) => item.includes(e.target.value)))}
-            />
-          </label>
-        )}
-        {filteredList.length === 0 && (
-          <div className={styles.list__empty}>
-            검색 결과가 없습니다.
-          </div>
-        )}
-        {filteredList.map((item, index) => (
-          <button
-            className={cn({
-              [styles.list__item]: true,
-              [styles['list__item--selected']]: item === selectedItem,
-            })}
-            type="button"
-            key={item + index}
-            onClick={() => onSelect(item, index)}
-          >
-            {item}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '@jk-core/utils';
+import styles from './DropDown.module.scss';
+import SearchIcon from './search.svg';
+
+interface ListProps {
+  selectedItem?: string;
+  list: string[];
+  filteredList: string[];
+  parent: React.RefObject<HTMLDivElement | null>;
+  onSelect: (item: string, index: number) => void;
+  setFilteredList?: React.Dispatch<React.SetStateAction<string[]>>
+  ;
+}
+
+interface Position {
+  top?: number;
+  left?: number;
+  bottom?: number;
+  height: number;
+}
+
+export default function List({ parent, selectedItem, list, filteredList, onSelect, setFilteredList }: ListProps) {
+  const listHeight = useMemo(() => {
+    if (setFilteredList) {
+      return Math.min((filteredList.length * 50) + 40, 300);
+    }
+    return Math.min(list.length * 50, 300);
+  }, [filteredList.length, list.length, setFilteredList]);
+
+  const listRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<Position>(() => {
+    if (!parent || !parent.current) {
+      return { top: 0, left: 0, bottom: 0, height: 0 };
+    }
+    const rect = parent.current.getBoundingClientRect();
+
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    if (spaceBelow < listHeight && spaceAbove > listHeight) {
+      // 위에 열림: bottom 사용, top은 undefined
+      return {
+        top: undefined,
+        left: rect.left + window.scrollX,
+        bottom: window.innerHeight - rect.top - window.scrollY,
+        height: 0,
+      };
+    }
+    // 아래에 열림: top 사용, bottom은 undefined
+    return {
+      top: rect.bottom + window.scrollY,
+      left: rect.left + window.scrollX,
+      bottom: undefined,
+      height: 0,
+      scroll: window.scrollY,
+    };
+  });
+
+  useEffect(() => {
+    function updatePosition() {
+      setPosition(prev => ({
+        ...prev,
+        height: listHeight,
+      }));
+    }
+
+    updatePosition();
+
+    window.addEventListener('resize', updatePosition);
+
+    return () => {
+      window.removeEventListener('resize', updatePosition);
+    };
+  }, [listHeight]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (!parent || !parent.current) return;
+      const rect = parent.current.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      if (spaceBelow < listHeight && spaceAbove > listHeight) {
+      // 위에 열림
+        setPosition({
+          top: undefined,
+          left: rect.left + window.scrollX,
+          bottom: window.innerHeight - rect.top - window.scrollY,
+          height: listHeight,
+        });
+      } else {
+      // 아래에 열림
+        setPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left + window.scrollX,
+          bottom: undefined,
+          height: listHeight,
+        });
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll, true);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleScroll, true);
+    };
+  }, [listHeight, parent, position.height]);
+
+  return (
+    <div
+      className={cn({
+        [styles['list-wrapper']]: true,
+        [styles['list-wrapper--up']]: position.bottom === undefined,
+        [styles['list-wrapper--down']]: position.top === undefined,
+      })}
+      style={{
+        width: parent?.current?.offsetWidth,
+        height: position.height,
+        top: position.top,
+        left: position.left,
+        bottom: position.bottom,
+      }}
+    >
+      <div className={styles.list} ref={listRef}>
+        {setFilteredList && (
+          <label className={styles.list__search}>
+            <SearchIcon />
+            <input
+              type="text"
+              placeholder="검색"
+              onChange={(e) => setFilteredList(list.filter((item) => item.includes(e.target.value)))}
+            />
+          </label>
+        )}
+        {filteredList.length === 0 && (
+          <div className={styles.list__empty}>
+            검색 결과가 없습니다.
+          </div>
+        )}
+        {filteredList.map((item, index) => (
+          <button
+            className={cn({
+              [styles.list__item]: true,
+              [styles['list__item--selected']]: item === selectedItem,
+            })}
+            type="button"
+            key={item + index}
+            onClick={() => onSelect(item, index)}
+          >
+            {item}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
 }

package/src/common/DropDown/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>