@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Cascader/Cascader.context.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+export type CascaderOption = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  role?: "title" | "divider";
+  children?: CascaderOption[];
+  [key: string]: unknown;
+};
+
+export type OnSelectProps = {
+  option: CascaderOption;
+  level: number;
+};
+
+type CascaderContextType = {
+  options: CascaderOption[];
+  activeOptions?: CascaderOption[];
+  selectedOptions?: CascaderOption[][];
+  showChildrenCount?: boolean;
+  columnPositionFromParent?: boolean;
+  columnOpenAnimation?: boolean;
+  maxColumnView?: number;
+  onSelect?: (props: OnSelectProps) => void;
+
+  // private
+  selectedOptionTop?: number[];
+  setSelectedOptionTop?: React.Dispatch<React.SetStateAction<number[]>>;
+};
+
+const initialState: CascaderContextType = {
+  options: [],
+  showChildrenCount: false,
+  columnPositionFromParent: false,
+  columnOpenAnimation: false,
+  maxColumnView: 6,
+};
+
+export const CascaderContext =
+  React.createContext<CascaderContextType>(initialState);
+
+export type CascaderProviderProps = React.PropsWithChildren<
+  CascaderContextType & {
+    className?: string;
+  }
+>;
+
+export const CascaderProvider = (props: CascaderProviderProps) => {
+  const { children } = props;
+
+  return (
+    <CascaderContext.Provider
+      value={{
+        ...props,
+      }}
+    >
+      {children}
+    </CascaderContext.Provider>
+  );
+};

package/src/components/Cascader/Cascader.hook.ts

@@ -0,0 +1,502 @@
+import React from "react";
+import type { OnSelectProps, CascaderOption } from "./Cascader";
+
+interface UseCascaderProps {
+  options: CascaderOption[];
+  multiple?: boolean;
+}
+
+export interface UseCascaderReturn {
+  /**
+   * 활성화(active)된 옵션들
+   */
+  activeOptions: CascaderOption[];
+
+  /**
+   * 선택된 옵션들
+   */
+  selectedOptions: CascaderOption[][];
+
+  /**
+   * 활성화(active)된 옵션들을 기반으로 각 레벨별 선택 가능한 옵션들의 배열을 생성합니다.
+   *
+   * returns 
+   * 
+   * - 각 레벨별 옵션 배열을 포함하는 2차원 배열
+   * 
+   * - 첫 번째 레벨(index 0)은 항상 최상위 옵션들을 포함
+   * 
+   * - 이후 레벨들은 활성화된 옵션의 자식들을 순차적으로 포함
+   *
+   */
+  columns: CascaderOption[][];
+
+  /**
+   * 선택된 옵션들 중 자식이 없는 최종 옵션들만 필터링하여 반환
+   *
+   * returns: [{ id: "gangnam", ... }, { id: "yeoksam1", ... }, { id: "yeoksam2", ... }]
+   */
+  selectedResult: CascaderOption[];
+
+  /**
+   * 옵션 클릭 시 처리하는 핸들러
+   *
+   * 해당 메소드를 Cascader.Root에 전달하여 사용합니다.
+   *
+   * params - 클릭된 옵션과 레벨 정보 { option: CascaderOption, level: number }
+   *
+   * example - selectHandler({ option: { id: "korea", ... }, level: 0 })
+   */
+  selectHandler: (params: OnSelectProps) => void;
+
+  /**
+   * 특정 옵션을 선택하는 핸들러
+   *
+   * 해당 옵션을 통해 선택하면 해당 옵션과 그 부모 옵션들을 선택하거나 해제합니다.
+   *
+   * 만약 해당 옵션을 제거했을때 선택된 부모까지 전부 체크해서 선택되어있는 최종옵션이 없으면 상위의 부모옵션도 선택을 해제합니다.
+   *
+   * 토글식으로 작동됩니다.
+   *
+   *  params - 선택할 옵션의 ID { id: string }
+   *
+   * example - selectByIdHandler({ id: "gangnam" })
+   */
+  selectByIdHandler: (params: { id: string }) => void;
+
+  /**
+   * 모든 옵션을 초기화하는 핸들러
+   *
+   * params - 초기화할 옵션 종류 { active: boolean, selected: boolean }
+   *
+   * example - resetAll({ active: true, selected: true })
+   */
+  resetAll: (params?: { active?: boolean; selected?: boolean }) => void;
+
+  /**
+   * 특정 옵션과 해당 특정옵션의 자식중 선택되어 있는 옵션을 초기화하는 핸들러
+   *
+   * 해당 옵션을 초기화했을때 부모옵션까지 탐색해서 선택된 자식이 없을 경우 부모옵션도 초기화합니다.
+   *
+   * params - 초기화할 옵션의 ID { id: string }
+   *
+   * example - resetSelectedById({ id: "gangnam" })
+   */
+  resetSelectedById: (params: { id: string }) => void;
+
+  /**
+   * 특정 레벨까지 활성화(active)된 옵션들을 초기화하는 핸들러
+   *
+   * params - 초기화할 레벨 { level: number }
+   *
+   * example - resetActiveOptions({ level: 1 })
+   */
+  resetActiveOptions: (params?: { level?: number }) => void;
+}
+
+export function useCascader(props: UseCascaderProps): UseCascaderReturn {
+  const { options, multiple = false } = props;
+
+  // 현재 활성화된(열려있는) 옵션 상태
+  const [activeOptions, setActiveOptions] = React.useState<CascaderOption[]>(
+    []
+  );
+
+  // 현재 선택된 옵션 상태
+  const [selectedOptions, setSelectedOptions] = React.useState<
+    CascaderOption[][]
+  >([]);
+
+  // 옵션과 부모를 찾는 재귀 함수
+  interface FindOptionWithParentsProps {
+    options: CascaderOption[];
+    targetId: string;
+    parents?: CascaderOption[];
+  }
+  const findOptionWithParents = React.useCallback(
+    ({
+      options,
+      targetId,
+      parents = [],
+    }: FindOptionWithParentsProps): {
+      parent: CascaderOption;
+      target: CascaderOption;
+    } | null => {
+      // 모든 옵션을 순회하며 검색
+      for (const option of options) {
+        // 찾고자 하는 ID와 일치하는 옵션을 찾은 경우
+        if (option.id === targetId) {
+          // children이 있는 옵션은 중간 노드이므로 무시
+          if (option.children?.length) {
+            return null;
+          }
+          // 최종 옵션인 경우 마지막 부모와 함께 반환
+          return {
+            parent: parents[parents.length - 1],
+            target: option,
+          };
+        }
+
+        // 현재 옵션에 자식이 있는 경우 재귀적으로 검색
+        if (option.children?.length) {
+          const result = findOptionWithParents({
+            options: option.children,
+            targetId,
+            parents: [...parents, option],
+          });
+          if (result) return result;
+        }
+      }
+      // 찾지 못한 경우 null 반환
+      return null;
+    },
+    []
+  );
+
+  const columns = React.useMemo(() => {
+    const result: CascaderOption[][] = [];
+    result[0] = options;
+    // activeOptions가 있는 경우에만 실행
+    if (activeOptions.length > 0) {
+      // 현재 레벨의 옵션들을 저장하는 변수, 초기값은 최상위 옵션들
+      let currentLevelOptions = options;
+
+      // activeOptions를 순회하면서 각 레벨의 옵션들을 result 배열에 추가
+      activeOptions.forEach((active, index) => {
+        // 현재 레벨에서 active한 옵션을 찾음
+        const found = currentLevelOptions.find((opt) => opt.id === active.id);
+        // 찾은 옵션에 자식이 있는 경우
+        if (found?.children && found.children.length > 0) {
+          // 다음 레벨 탐색을 위해 현재 레벨의 옵션을 자식으로 업데이트
+          currentLevelOptions = found.children;
+          // 결과 배열의 다음 인덱스에 자식 옵션들을 저장
+          result[index + 1] = currentLevelOptions;
+        }
+      });
+    }
+
+    return result;
+  }, [activeOptions, options]);
+
+  const selectedResult = React.useMemo(() => {
+    // 선택된 옵션들 중 자식이 없는 최종 옵션들만 필터링하여 반환
+    return selectedOptions.reduce<CascaderOption[]>((acc, levelOptions) => {
+      // 현재 레벨의 옵션들 중 자식이 없는 옵션들만 필터링
+      const result = levelOptions.filter((option) => !option.children?.length);
+      // 누적된 결과와 현재 레벨의 결과를 합침
+      return [...acc, ...result];
+    }, []);
+  }, [selectedOptions]);
+
+  const selectHandler = (params: OnSelectProps) => {
+    const { option, level } = params;
+
+    const optionWithParent = {
+      ...option,
+      parentId: level > 0 ? activeOptions[level - 1]?.id : undefined,
+    };
+
+    const isSelected = selectedOptions[level]?.some(
+      (opt) => opt.id === option.id
+    );
+
+    if (isSelected) {
+      // 옵션이 선택되어 있지만 활성화되지 않은 상태이고, 자식이 있는 경우를 체크
+      const isSelectedButNotActive =
+        selectedOptions[level]?.some((opt) => opt.id === option.id) &&
+        activeOptions[level]?.id !== option.id &&
+        (option.children?.length ?? 0) > 0;
+
+      if (isSelectedButNotActive) {
+        // 선택되었지만 활성화되지 않은 옵션을 활성화
+        setActiveOptions((curr) => {
+          const newActive = [...curr];
+
+          // 현재 레벨의 옵션을 활성화하고 그 이후 레벨은 제거
+          newActive[level] = optionWithParent;
+          newActive.splice(level + 1);
+
+          return newActive;
+        });
+
+        return;
+      }
+      // 자식이 없는 최종 노드인 경우
+      if (!option.children?.length) {
+        setSelectedOptions((prev) => {
+          const newSelected = [...prev];
+          // 현재 레벨에서 선택된 옵션만 제거
+          newSelected[level] = newSelected[level].filter(
+            (opt) => opt.id !== option.id
+          );
+
+          // 특정 옵션 트리에서 선택된 최종 노드가 있는지 확인하는 재귀 함수
+          const hasSelectedEndNode = (options: CascaderOption[]): boolean => {
+            return options.some(
+              (opt) =>
+                (!opt.children?.length &&
+                  newSelected.some((level) =>
+                    level.some((selected) => selected.id === opt.id)
+                  )) ||
+                (opt.children?.length && hasSelectedEndNode(opt.children))
+            );
+          };
+
+          // 현재 레벨부터 상위 레벨로 올라가면서 유효하지 않은 부모 옵션 제거
+          for (let i = level - 1; i >= 0; i--) {
+            if (newSelected[i]) {
+              newSelected[i] = newSelected[i].filter((opt) =>
+                opt.children?.length ? hasSelectedEndNode(opt.children) : true
+              );
+            }
+          }
+
+          // 선택된 옵션이 없는 빈 레벨 제거
+          return newSelected.filter((level) => level.length > 0);
+        });
+      }
+    }
+
+    // 활성화된 옵션 상태 업데이트
+    setActiveOptions((curr) => {
+      const newActive = [...curr];
+
+      // 이미 활성화되어 있거나 선택된 옵션인 경우 해당 레벨부터 제거
+      if (curr[level]?.id === option.id || isSelected) {
+        newActive.splice(level);
+      } else {
+        // 새로운 옵션을 활성화하고 그 이후 레벨은 제거
+        newActive[level] = optionWithParent;
+        newActive.splice(level + 1);
+      }
+
+      return newActive;
+    });
+  };
+
+  interface SelectByIdHandlerProps {
+    id: string;
+  }
+
+  const selectByIdHandler = React.useCallback(
+    (params: SelectByIdHandlerProps) => {
+      const { id } = params;
+
+      setSelectedOptions((prev) => {
+        // 이미 선택된 옵션인지 확인
+        const isAlreadySelected = prev.some((level) =>
+          level.some((opt) => opt.id === id)
+        );
+
+        if (isAlreadySelected) {
+          // 선택 해제 로직
+          return prev.filter((level) => !level.some((opt) => opt.id === id));
+        } else {
+          // 새로운 옵션 선택 로직
+          const result = findOptionWithParents({ options, targetId: id });
+          if (!result) return prev;
+
+          // 부모가 이미 있는지 확인
+          const parentExists = prev[0]?.some(
+            (opt) => opt.id === result.parent.id
+          );
+
+          if (parentExists) {
+            // 부모가 이미 있으면 자식만 추가
+            return [prev[0], [...(prev[1] || []), result.target]];
+          } else {
+            // 부모가 없으면 새로운 배열 생성
+            return [[result.parent], [...(prev[1] || []), result.target]];
+          }
+        }
+      });
+    },
+    [options, findOptionWithParents]
+  );
+
+  interface ResetAllHandlerProps {
+    active?: boolean;
+    selected?: boolean;
+  }
+
+  const resetAll = React.useCallback((params?: ResetAllHandlerProps) => {
+    const { active = true, selected = true } = params ?? {};
+
+    if (active) {
+      setActiveOptions([]);
+    }
+    if (selected) {
+      setSelectedOptions([]);
+    }
+  }, []);
+
+  interface ResetSelectedByIdHandlerProps {
+    id: string;
+  }
+
+  const resetSelectedById = React.useCallback(
+    (params: ResetSelectedByIdHandlerProps) => {
+      const { id } = params;
+
+      setSelectedOptions((prev) => {
+        const newSelected = [...prev];
+
+        // 일치하는 id를 가진 옵션의 레벨과 인덱스 찾기
+        let targetLevel = -1;
+        let targetIndex = -1;
+
+        // 모든 레벨을 순회하면서 target의 위치 찾기
+        newSelected.forEach((levelOptions, level) => {
+          const foundIndex = levelOptions.findIndex((opt) => opt.id === id);
+          if (foundIndex !== -1) {
+            targetLevel = level;
+            targetIndex = foundIndex;
+          }
+        });
+
+        if (targetLevel !== -1) {
+          // 찾은 target 옵션 제거
+          const targetOption = newSelected[targetLevel][targetIndex];
+          newSelected[targetLevel].splice(targetIndex, 1);
+
+          // target의 자식 옵션들을 재귀적으로 제거하는 함수
+          const removeChildrenRecursive = (
+            parentId: string,
+            fromLevel: number
+          ) => {
+            // fromLevel부터 끝까지 순회하면서 자식 옵션들 제거
+            for (let level = fromLevel; level < newSelected.length; level++) {
+              newSelected[level] = newSelected[level].filter((opt) => {
+                const isChild =
+                  findOptionWithParents({ options, targetId: opt.id })?.parent
+                    .id !== parentId;
+                return isChild;
+              });
+            }
+          };
+
+          // target의 자식들 제거 실행
+          removeChildrenRecursive(targetOption.id, targetLevel + 1);
+
+          // 자식이 없는 부모 옵션들을 제거하는 재귀 함수
+          const removeParentIfNoChildren = (currentLevel: number) => {
+            if (currentLevel < 0) return;
+
+            const parentOptions = newSelected[currentLevel];
+            if (!parentOptions) return;
+
+            // 현재 레벨의 부모들 중 자식이 없는 옵션 제거
+            newSelected[currentLevel] = parentOptions.filter((parentOpt) => {
+              // 해당 부모의 자식이 있는지 확인
+              const hasSelectedChildren = newSelected
+                .slice(currentLevel + 1)
+                .some((levelOpts) =>
+                  levelOpts.some(
+                    (opt) =>
+                      findOptionWithParents({ options, targetId: opt.id })
+                        ?.parent.id === parentOpt.id
+                  )
+                );
+              return hasSelectedChildren;
+            });
+
+            // 상위 레벨로 올라가면서 재귀 실행
+            removeParentIfNoChildren(currentLevel - 1);
+          };
+
+          // 자식이 없는 부모 제거 실행
+          removeParentIfNoChildren(targetLevel - 1);
+
+          // 옵션이 없는 빈 레벨은 제거하고 반환
+          return newSelected.filter((level) => level.length > 0);
+        }
+
+        return newSelected;
+      });
+    },
+    [options, findOptionWithParents]
+  );
+
+  interface resetActiveOptionsHandlerProps {
+    level?: number;
+  }
+
+  const resetActiveOptions = React.useCallback(
+    (params?: resetActiveOptionsHandlerProps) => {
+      const { level = 0 } = params || {};
+
+      setActiveOptions((curr) => {
+        const newActive = [...curr];
+        newActive.splice(level, newActive.length - level);
+        return newActive;
+      });
+    },
+    []
+  );
+
+  // 선택된 옵션 추
+  React.useEffect(() => {
+    if (!multiple) {
+      const newSelected = activeOptions.map((option) => [option]);
+      setSelectedOptions(newSelected);
+      return;
+    }
+
+    // 활성화된 옵션 중 마지막 옵션 가져오기
+    const lastOption = activeOptions.at(-1);
+    // 마지막 옵션이 자식이 없는 경우에만 선택 처리
+    if (!lastOption?.children || lastOption.children?.length === 0) {
+      setSelectedOptions((prev) => {
+        const newSelected = [...prev];
+
+        // 마지막 옵션이 이미 선택되어 있는지 확인
+        const hasLastOption = prev.some((levelOptions) =>
+          levelOptions.some((opt) => opt.id === lastOption?.id)
+        );
+
+        // 활성화된 옵션들을 순회하면서 선택 상태 업데이트
+        activeOptions.forEach((active, index) => {
+          // 해당 레벨의 배열이 없으면 생성
+          if (!newSelected[index]) {
+            newSelected[index] = [];
+          }
+
+          // 마지막 레벨의 옵션 처리
+          if (index === activeOptions.length - 1) {
+            if (hasLastOption) {
+              // 이미 선택된 경우 제거
+              newSelected[index] = newSelected[index].filter(
+                (opt) => opt.id !== active.id
+              );
+            } else {
+              // 선택되지 않은 경우 추가
+              newSelected[index].push(active);
+            }
+          } else {
+            // 중간 레벨의 옵션들은 중복되지 않게 추가
+            if (!newSelected[index].some((opt) => opt.id === active.id)) {
+              newSelected[index].push(active);
+            }
+          }
+        });
+
+        // 빈 레벨 제거 후 반환
+        return newSelected.filter((level) => level.length > 0);
+      });
+    }
+  }, [activeOptions, multiple]);
+
+  const result = {
+    activeOptions,
+    selectedOptions,
+    columns,
+    selectedResult,
+    selectHandler,
+    selectByIdHandler,
+    resetAll,
+    resetSelectedById,
+    resetActiveOptions,
+  };
+
+  return result;
+}

package/src/components/Cascader/Cascader.module.scss

@@ -0,0 +1,143 @@
+.Root {
+  position: relative;
+  display: inline-flex;
+}
+
+.Menu {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  border-radius: 4px;
+  align-items: flex-start;
+}
+
+.Column {
+  --selected-option-top: 0;
+  --max-column-view: 6;
+  position: relative;
+  left: 0;
+  top: 0;
+  translate: 0 var(--selected-option-top);
+  min-width: 180px;
+  max-height: calc(40px * var(--max-column-view));
+  overflow: auto;
+  box-sizing: border-box;
+  border: 1px solid #e8e8e9;
+  background: #fff;
+  margin-left: -1px;
+  display: flex;
+  flex-direction: column;
+  overscroll-behavior: contain;
+
+  &.columnOpenAnimation {
+    transition: translate 0.2s ease-in-out;
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #e8e8e9;
+    border-radius: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #d1d1d1;
+  }
+
+  &:first-child {
+    border-radius: 4px 0 0 4px;
+    margin-left: 0;
+  }
+
+  &:last-child {
+    border-radius: 0 4px 4px 0;
+  }
+}
+
+.Item {
+  --item-height: 40px;
+
+  height: var(--item-height);
+  box-sizing: border-box;
+  padding: 8px 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  &.title {
+    font-weight: bold;
+    cursor: default;
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &.divider {
+    height: 1px;
+    background-color: #e8e8e9;
+    cursor: default;
+    padding: 0;
+    margin: 8px 0;
+    flex-shrink: 0;
+
+    &:hover {
+      background-color: #e8e8e9;
+    }
+  }
+
+  &.isSelected {
+    font-weight: 500;
+    color: #688dee;
+    .GoNext {
+      & > path {
+        fill: #688dee;
+      }
+    }
+  }
+
+  &.disabled {
+    color: #ccc;
+    cursor: not-allowed;
+    .GoNext {
+      & > path {
+        fill: #ccc;
+      }
+    }
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  .ItemText {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: calc(180px - 56px);
+    flex-shrink: 0;
+  }
+}
+
+.GoNext {
+  flex-shrink: 0;
+
+  &.isSelected {
+    path {
+      fill: #688dee;
+    }
+  }
+}