컴파운드 패턴으로 Dropdown Component 만들기

const Dropdown = ({ options, selectedValue, onChange }) => {
  const [isOpen, setIsOpen] = useState(false);
 
  return (
    <div>
      <button onClick={() => setIsOpen((prev) => !prev)}>
        {selectedValue || "선택하세요."}
      </button>
      {isOpen && (
        <ul>
          {options.map((option) => (
            <li key={option} onClick={() => onChange(option)}>
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

const Dropdown = ({ options, selectedValues, onChange, multiple = false }) => {
  const [isOpen, setIsOpen] = useState(false);
 
  const handleSelect = (option) => {
    if (multiple) {
      if (selectedValues.includes(option)) {
        onChange(selectedValues.filter((item) => item !== option));
      } else {
        onChange([...selectedValues, option]);
      }
    } else {
      onChange(option);
    }
  };
 
  return (
    <div>
      <button onClick={() => setIsOpen((prev) => !prev)}>
        {multiple
          ? selectedValues.length > 0
            ? selectedValues.join(", ")
            : "선택하세요."
          : selectedValues || "선택하세요."}
      </button>
      {isOpen && (
        <ul>
          {options.map((option) => (
            <li key={option} onClick={() => handleSelect(option)}>
              {option} {multiple && selectedValues.includes(option) ? "✔" : ""}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
 

export const Dropdown = <T extends string = DefaultDropdownValue>({
  children,
  onChange,
  disabled = false,
  multiple = false,
  isOpen, // 외부에서 드롭다운 상태 제어
  onClose, // 닫힘 콜백
}: DropdownProps<T>) => {
  const triggerRef = useRef<HTMLElement>(null);
  const optionListRef = useRef<HTMLUListElement>(null);
 
  const [container, setContainer] = useState<DropdownTypes['container']>(null);
  const isControlled = typeof isOpen === 'boolean'; // 외부에서 제어되는지 확인
  const expanded = isControlled ? isOpen : container !== null; // 내부 상태와 props 결합
 
  const uniqueId = useMemo(() => generateUniqueId(), []);
 
  const open = () => {
    if (isControlled) return;
    const newContainer = document.createElement('div');
    newContainer.id = uniqueId;
    document.body.appendChild(newContainer);
    setContainer(newContainer);
  };
 
  const close = () => {
    if (isControlled) {
      onClose?.();
      return;
    }
    const container = document.getElementById(uniqueId);
    container?.remove();
    setContainer(null);
  };
 
  const toggle = () => {
    expanded ? close() : open();
  };
 
  
  return (
    <DropdownContext.Provider
      value={{ container, triggerRef, optionListRef, expanded, disabled, close, onChange }}
    >
      {children}
    </DropdownContext.Provider>
  );
};
 

Dropdown.Trigger = ({ children }: { children: React.ReactElement }) => {
  const { triggerRef, expanded, disabled } = useContext(DropdownContext);
 
  return React.cloneElement(children, { ...children.props, 'data-expanded': expanded, disabled, ref: triggerRef });
};

Dropdown.Bar = React.forwardRef(
  (
    { value, placeholder, disabled = false, suffixForId, ...props }: DropdownBarProps,
    ref: ForwardedRef<HTMLDivElement>,
  ) => {
    const uniqueId = useMemo(() => suffixForId ?? generateUniqueId(), [suffixForId]);
 
    return (
      <Bar 
        ref={ref} 
        role="button" 
        tabIndex={disabled ? -1 : 0} 
        aria-disabled={disabled} 
        {...props}
      >
        <span aria-placeholder={value ? undefined : placeholder}>{value || placeholder}</span>
        <ChevronDownIcon size={12} className="arrowIcon" suffixForId={`dropdown-arrow-icon__${uniqueId}`} />
      </Bar>
    );
  },
);
 

Dropdown.OptionList = ({ children, zIndex = overHeaderZIndex, ...props }: OptionListProps) => {
  const { container, optionListRef } = useContext(DropdownContext);
 
  return (
    <Portal container={container}>
      <OptionList role="listbox" ref={optionListRef} style={{ zIndex }} {...props}>
        {children}
      </OptionList>
    </Portal>
  );
};

Dropdown.Option = ({ value, label, selected = false, disabled = false, ...props }: OptionProps) => {
  return (
    <Option
      role="option"
      data-value={value}
      key={value}
      aria-disabled={disabled}
      aria-selected={selected}
      tabIndex={selected ? 0 : -1}
      {...props}
    >
      {label ?? value}
    </Option>
  );
};

const Example = () => {
  const [selected, setSelected] = useState(null);
 
  return (
    <Dropdown onChange={setSelected}>
      <Dropdown.Trigger>
        <button>{selected || "옵션 선택"}</button>
      </Dropdown.Trigger>
      <Dropdown.OptionList>
        <Dropdown.Option value="apple" label="사과" />
        <Dropdown.Option value="banana" label="바나나" />
        <Dropdown.Option value="grape" label="포도" />
      </Dropdown.OptionList>
    </Dropdown>
  );
};
 

export const useClick = <T extends string>({
  triggerRef,
  optionListRef,
  expanded,
  close,
  toggle,
  onChange,
  disabled,
  multiple,
}: DropdownEventParams<T>) => {
  useEffect(() => {
    function handleClick(e: MouseEvent) {
      // 드롭다운이 비활성화( disabled = true )이면 아무 동작도 하지 않음
      if (disabled) return;
 
      // 마우스로 클릭한 요소(target)
      const target = e.target as HTMLElement;
 
      // 트리거 영역과 옵션 목록 영역을 구분하기 위한 ref
      const triggerElement = triggerRef?.current;
      const optionListElement = optionListRef?.current;
 
      const isTriggerClick = triggerElement && triggerElement.contains(target);
      const isOptionClick = optionListElement && optionListElement.contains(target);
 
      // (트리거도 아니고, 옵션 영역도 아니면) → 드롭다운 닫기
      if (!isTriggerClick && !isOptionClick) {
        close();
 
      // 이미 열려있으면 닫고, 닫혀있으면 열기
      else if (isTriggerClick) {
        toggle();
      }
      // 3) 옵션 목록을 클릭한 경우
      else if (isOptionClick) {
        const clickedOption = (Array.from(optionListElement.children) as HTMLLIElement[])
          .filter((el) => el.ariaDisabled !== 'true') // 비활성화된 옵션은 제외
          .find((el) => el.contains(target));         // 실제 클릭한 옵션 찾기
 
        if (clickedOption) {
          // data-value에 옵션 값이 들어있음
          const value = clickedOption.dataset.value as T;
          if (!value) return;
 
          // 옵션 선택 로직
          onChange(e, value);
 
          // multiple이 false면(단일 선택) 옵션 클릭 후 드롭다운 닫기
          if (!multiple) {
            close();
          }
        }
      }
    }
 
    document.addEventListener('click', handleClick);
 
    return () => {
      document.removeEventListener('click', handleClick);
    };
  });
};

export const useOptionListPosition = ({
  container,
  triggerRef,
  optionListRef,
}: Pick<DropdownTypes, 'container' | 'triggerRef' | 'optionListRef'>) => {
  const changeOptionListPosition = useCallback(() => {
    const triggerElement = triggerRef?.current;
    const optionListElement = optionListRef?.current;
 
    if (triggerElement && optionListElement) {
      const rect = triggerElement.getBoundingClientRect();
      const scrollX = window.scrollX;
      const scrollY = window.scrollY;
      const bodyWidth = document.body.scrollWidth;
 
      // 옵션 목록 최소너비 = 트리거의 너비
      optionListElement.style.minWidth = `${rect.width}px`;
      // Y 좌표는 트리거 아래로 약간의 간격 주기 (예: 8px)
      optionListElement.style.top = `${scrollY + rect.bottom + 8}px`;
      // X 좌표는 트리거의 left
      optionListElement.style.left = `${scrollX + rect.left}px`;
 
      // 화면 오른쪽 경계를 넘어간다면 위치 보정
      const optionRect = optionListElement.getBoundingClientRect();
      if (scrollX + optionRect.right > bodyWidth) {
        optionListElement.style.left = `${rect.right - optionListElement.offsetWidth}px`;
      }
 
      // 애니메이션 효과 (살짝 팝업되도록)
      optionListElement.style.transform = 'scale(1)';
      optionListElement.style.opacity = '1';
    }
  }, [triggerRef, optionListRef]);
 
  useEffect(() => {
    // container가 존재한다는 것은 드롭다운이 열렸다는 뜻
    if (container) {
      changeOptionListPosition();
    }
  }, [container, changeOptionListPosition]);
 
  // 창 크기가 바뀔 때마다 위치 재계산
  useEffect(() => {
    window.addEventListener('resize', changeOptionListPosition);
    return () => {
      window.removeEventListener('resize', changeOptionListPosition);
    };
  }, [changeOptionListPosition]);
};
 

export const useOptionListPosition = ({
  container,
  triggerRef,
  optionListRef,
}: Pick<DropdownTypes, 'container' | 'triggerRef' | 'optionListRef'>) => {
  const changeOptionListPosition = useCallback(() => {
    const triggerElement = triggerRef?.current;
    const optionListElement = optionListRef?.current;
 
    if (triggerElement && optionListElement) {
      const rect = triggerElement.getBoundingClientRect();
      const scrollX = window.scrollX;
      const scrollY = window.scrollY;
      const bodyWidth = document.body.scrollWidth;
 
      // 옵션 목록 최소너비 = 트리거의 너비
      optionListElement.style.minWidth = `${rect.width}px`;
      // Y 좌표는 트리거 아래로 약간의 간격 주기 (예: 8px)
      optionListElement.style.top = `${scrollY + rect.bottom + 8}px`;
      // X 좌표는 트리거의 left
      optionListElement.style.left = `${scrollX + rect.left}px`;
 
      // 화면 오른쪽 경계를 넘어간다면 위치 보정
      const optionRect = optionListElement.getBoundingClientRect();
      if (scrollX + optionRect.right > bodyWidth) {
        optionListElement.style.left = `${rect.right - optionListElement.offsetWidth}px`;
      }
 
      // 애니메이션 효과 (예: 살짝 팝업되도록)
      optionListElement.style.transform = 'scale(1)';
      optionListElement.style.opacity = '1';
    }
  }, [triggerRef, optionListRef]);
 
  useEffect(() => {
    // container가 존재한다는 것은 드롭다운이 열렸다는 뜻
    if (container) {
      changeOptionListPosition();
    }
  }, [container, changeOptionListPosition]);
 
  // 창 크기가 바뀔 때마다 위치 재계산
  useEffect(() => {
    window.addEventListener('resize', changeOptionListPosition);
    return () => {
      window.removeEventListener('resize', changeOptionListPosition);
    };
  }, [changeOptionListPosition]);
};