@jk-core/components 1.0.2 → 1.1.0

package/src/common/DropDown/List.tsx

@@ -0,0 +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,
+        bottom: window.innerHeight - rect.top - window.scrollY,
+        height: 0,
+      };
+    }
+    // 아래에 열림: top 사용, bottom은 undefined
+    return {
+      top: rect.bottom + window.scrollY,
+      left: rect.left,
+      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,
+          bottom: window.innerHeight - rect.top - window.scrollY,
+          height: listHeight,
+        });
+      } else {
+      // 아래에 열림
+        setPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left,
+          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

@@ -0,0 +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>

package/src/common/DropDown/index.tsx

@@ -0,0 +1,104 @@
+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>
+  );
+}

package/src/common/DropDown/search.svg

@@ -0,0 +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>

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

@@ -0,0 +1,177 @@
+$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);
+  }
+}
+
+.pagination {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 10px 0;
+}
+
+.arrow {
+  width: $size;
+  height: $size;
+  border-radius: 100%;
+  background-color: var(--G-20);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-drag: none;
+  pointer-events: auto;
+  transition: background-color 0.1s ease;
+
+  & > 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-20) !important;
+    cursor: default;
+
+    & > svg {
+      fill: var(--G-40) !important; // Gray color for disabled state
+    }
+  }
+}
+
+.slider {
+  position: relative;
+  width: $size * 8;
+  height: $size;
+  display: flex;
+  overflow: visible;
+  background-color: var(--G-20);
+  border-radius: 10px;
+}
+
+.track {
+  position: absolute;
+  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 {
+  width: $size * 5;
+  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;
+}
+
+.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

@@ -0,0 +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>
+
+</svg>

package/src/common/Pagination/arrow-right.svg

@@ -0,0 +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"/>
+
+<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
+<g id="SVGRepo_iconCarrier"> <path d="M7.82054 20.7313C8.21107 21.1218 8.84423 21.1218 9.23476 20.7313L15.8792 14.0868C17.0505 12.9155 17.0508 11.0167 15.88 9.84497L9.3097 3.26958C8.91918 2.87905 8.28601 2.87905 7.89549 3.26958C7.50497 3.6601 7.50497 4.29327 7.89549 4.68379L14.4675 11.2558C14.8581 11.6464 14.8581 12.2795 14.4675 12.67L7.82054 19.317C7.43002 19.7076 7.43002 20.3407 7.82054 20.7313Z"/> </g>
+
+</svg>

package/src/common/Pagination/index.tsx

@@ -0,0 +1,141 @@
+
+import { useMemo, useState } from 'react';
+import LeftArrowIcon from './arrow-left.svg';
+import RightArrowIcon from './arrow-right.svg';
+import styles from './Pagination.module.scss';
+
+interface PaginationProps {
+  /**
+   * 총 페이지 수
+   */
+  totalPage: number;
+  /**
+   * 현재 페이지
+   */
+  currentPage: number;
+
+  /**
+   * 페이지 클릭 핸들러
+   */
+  onPageClick: (page: number) => void;
+}
+
+export default function Pagination({ totalPage, currentPage, onPageClick }: PaginationProps) {
+  const [animation, setAnimation] = useState<'left' | 'right' | 'doubleRight' | 'doubleLeft' | ''>('');
+  const [selectedPage, setSelectedPage] = useState(currentPage || 1);
+
+  const pageArray = useMemo(() => {
+    if (!totalPage) return Array.from({ length: 9 }).map((_, i) => (i === 2 ? 1 : null));
+
+    return Array.from({ length: 9 }).map((_, i) => {
+      const pageIndex = selectedPage + i - 2;
+
+      if (pageIndex < 1 || pageIndex > totalPage) {
+        return null;
+      }
+      return pageIndex;
+    });
+  }, [selectedPage, totalPage]);
+
+  const handlePageClick = (page: number) => {
+    if (page > totalPage || page < 1) return;
+    onPageClick(page);
+    if (page === null) return;
+    const diff = page - selectedPage;
+
+    switch (diff) {
+      case 1:
+        setAnimation('right');
+        break;
+      case -1:
+        setAnimation('left');
+        break;
+      case 2:
+        setAnimation('doubleRight');
+        break;
+      case -2:
+        setAnimation('doubleLeft');
+        break;
+      default:
+        setAnimation('');
+    }
+
+    setSelectedPage(page);
+
+    setTimeout(() => {
+      setAnimation('');
+    }, 200);
+  };
+
+  return (
+    <div className={styles.pagination}>
+      <button
+        className={`${styles.arrow} ${selectedPage <= 1 ? styles['arrow--disabled'] : '' }`}
+        type="button"
+        onClick={() => handlePageClick(selectedPage - 1)}
+      >
+        <LeftArrowIcon />
+      </button>
+      <div className={styles.slider}>
+        <div
+          className={styles.track}
+          style={{
+            left: '140px',
+          }}
+        />
+        <div className={styles.portal}>
+          {selectedPage > 3 && (
+            < >
+              <button
+                className={styles.page}
+                type="button"
+                onClick={() => handlePageClick(1)}
+              >1
+              </button>
+              <span className={styles.portal__ellipsis}>•••</span>
+            </>
+          )}
+        </div>
+        <div className={styles.pages}>
+          <div className={`${styles.pageWrapper} ${animation === 'left' ? styles.left : ''} ${styles[animation]}`}>
+            {pageArray.map((page, index) => (
+              <button
+                className={`${styles.page} ${selectedPage === page ? styles['page--selected'] : ''}`}
+                key={index}
+                type="button"
+                disabled={page === null}
+                onClick={() => {
+                  if (page !== null) {
+                    handlePageClick(page);
+                  }
+                }}
+              >
+                <span>{page}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className={styles.portal}>
+          {selectedPage < totalPage - 2 && (
+            <>
+              <span className={styles.portal__ellipsis}>•••</span>
+              <button
+                className={styles.page}
+                type="button"
+                onClick={() => handlePageClick(totalPage)}
+              >{totalPage}
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+      <button
+        className={`${styles.arrow} ${selectedPage >= totalPage ? styles['arrow--disabled'] : ''}`}
+        type="button"
+        onClick={() => handlePageClick(selectedPage + 1)}
+      >
+        <RightArrowIcon />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+.segment {
+  position: relative;
+  display: grid;
+  width: fit-content;
+  background-color: var(--G-10);
+  border-radius: 8px;
+  z-index: 0;
+
+  &--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: 17px;
+  font-weight: 500;
+
+  & > div {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  &--selected {
+    color: var(--G-80);
+  }
+}