합성 컴포넌트 패턴을 응용하여 디자인 시스템 개선하기

// prop 전달 패턴
<Dialog
  title="Discard unsaved changes?"
  description="It looks like you have unsaved changes. Are you sure you want to leave now?"
  onClose={handleClose}
  onCancel={handleCancel}
  onConfirm={handleConfirm}
/>

// 합성 컴포넌트 패턴
<Dialog.Content>
  <Dialog.Title>Discard unsaved changes?</Dialog.Title>
  <Dialog.Description>It looks like you have unsaved changes. Are you sure you want to leave now?</Dialog.Description>
  <Dialog.CloseButton onClick={handleClose}>X</Dialog.CloseButton>
  <Dialog.CancelButton onClick={handleCancel}>Cancel</Dialog.CancelButton>
  <Dialog.ConfirmButton onClick={handleConfirm}>Confirm</Dialog.ConfirmButton>
</Dialog.Content>

<Dialog.Root>
  <Dialog.Trigger>
    <Button>Open dialog</Button>
  </Dialog.Trigger>
  <Dialog.Content {...props}>
    <Dialog.Header>
      <HFlexBox justifyContent="space-between">
        <Dialog.Title>Discard unsaved changes?</Dialog.Title>
        <Dialog.CloseButton>
          <CloseButton ref={closeButtonRef} />
        </Dialog.CloseButton>
      </HFlexBox>
      <Dialog.Description>
        It looks like you have unsaved changes. Are you sure you want to leave
        now?
      </Dialog.Description>
    </Dialog.Header>
    <Form>
      <Dialog.Body>
          <Input.Field>
            <Input.Label>Enter &apos;Leave anyway&apos;</Input.Label>
            <Input.TextInput ref={textInputRef} />
          </Input.Field>
      </Dialog.Body>
      <Dialog.Footer>
        <HFlexBox gap={8} justifyContent="flex-end">
          <Button onClick={closeModal}>
            Cancel
          </Button>
          <SubmitButton onClick={handleSubmit}>Confirm</SubmitButton>
        </HFlexBox>
      </Dialog.Footer>
    </Form>
  </Dialog.Content>
</Dialog.Root>

<DatePicker.Root {...props} value={value} onChange={setValue}> {/* Radix Popover API 사용 */}
  <DatePicker.Trigger
    placeholder="Select date and time"
    timeFormatOption={DateTime.DATETIME_MED}
  />
  <DatePicker.Content>
    <DatePicker.Calendar /> {/* shadcn/ui 스타일 참고 */}
    <VFlexBox gap={8}>
      <HFlexBox gap={8}>
        <DatePicker.DateDisplay />
        <DatePicker.TimeInput />
      </HFlexBox>
      <DatePicker.TimeZone />
    </VFlexBox>
  </DatePicker.Content>
</DatePicker.Root>

type SearchableDropdownMode = "sync" | "async";

type SearchableDropdownContextValue = {
  mode: SearchableDropdownMode;
  asyncSearchFn?: (value: string) => Promise<void>;
  asyncSearchFnIsLoading?: boolean;
}

const SearchableDropdownContext =
  React.createContext<SearchableDropdownValue | null>(null);

type Props = Popover.PopoverProps & SearchableDropdownContextValue

// 사용처에서 Root로 넘겨준 prop이 바로 Context에 반영된다.
export function Root({
  children,
  mode,
  asyncSearchFn,
  asyncSearchFnIsLoading,
  ...props,
}: Props) {
  const contextValue = useMemo<SearchableDropdownContextValue>(() => {
    return {
      mode,
      asyncSearchFn,
      asyncSearchFnIsLoading,
    };
  }, [
    mode,
    asyncSearchFn,
    asyncSearchFnIsLoading,
  ]);

  return (
    <Popover.Root {...props}>
      <SearchableDropdownContext.Provider value={contextValue}>
        {children}
      </SearchableDropdownContext.Provider>
    </Popover.Root>
  )
}

// 논리적으로는 말이 되지 않는 이런 유즈케이스를 막을 수 없다.
<SearchableDropdown.Root
  mode="sync"
  asyncSearchFn={asyncSearchFn}
  asyncSearchFnIsLoading={asyncSearchFnIsLoading}
>
  {/* ... */}
</SearchableDropdown.Root>

// 필요하지 않은 ContextProps는 제외한다.
type SyncRootProps = PropsWithChildren<
  Omit<
    ContextProps,
    "asyncSearchFn" | "asyncSearchFnIsLoading" | "mode"
  >
>;

export function SyncRoot(props: SyncRootProps): ReactElement {
  return <Context {...props} mode="sync" />;
}

// 필요하지 않은 ContextProps는 제외하고, 필수 요소는 필수로 명시한다.
type AsyncRootProps = PropsWithChildren<
  Omit<
    ContextProps,
    "asyncSearchFn" | "asyncSearchFnIsLoading" | "mode"
  > &
  Required<Pick<ContextProps, "asyncSearchFn" | "asyncSearchFnIsLoading">>
>;

export function AsyncRoot({
  asyncSearchFn,
  asyncSearchFnIsLoading,
  ...props
}: AsyncRootProps): ReactElement {
  return (
    <SearchableDropdownContextRootProvider
      {...props}
      asyncSearchFn={asyncSearchFn}
      asyncSearchFnIsLoading={asyncSearchFnIsLoading}
      mode="async"
    />
  );
}

type SearchableDropdownMode = "sync" | "async";

type SearchableDropdownContextValue = {
  mode: SearchableDropdownMode;
  asyncSearchFn?: (value: string) => Promise<void>;
  asyncSearchFnIsLoading?: boolean;
}

const SearchableDropdownContext =
  React.createContext<SearchableDropdownValue | null>(null);

type ContextProps = Popover.PopoverProps & SearchableDropdownContextValue;

// Context는 export되지 않고 사용처가 선택한 Root를 통해 케이스 별로 초기화된다.
function Context({
  children,
  mode,
  asyncSearchFn,
  asyncSearchFnIsLoading,
  ...props,
}: ContextProps) {
  const contextValue = useMemo<SearchableDropdownContextValue>(() => {
    return {
      mode,
      asyncSearchFn,
      asyncSearchFnIsLoading,
    };
  }, [
    mode,
    asyncSearchFn,
    asyncSearchFnIsLoading,
  ]);

  return (
    <Popover.Root {...props}>
      <SearchableDropdownContext.Provider value={contextValue}>
        {children}
      </SearchableDropdownContext.Provider>
    </Popover.Root>
  )
}

// 용도 별로 명확하게 구분하여 사용한다.
<SearchableDropdown.SyncRoot>
  {/* ... */}
</SearchableDropdown.SyncRoot>

<SearchableDropdown.AsyncRoot
  asyncSearchFn={asyncSearchFn}
  asyncSearchFnIsLoading={asyncSearchFnIsLoading}
>
  {/* ... */}
</SearchableDropdown.AsyncRoot>