수정된 디자인시스템 컴포넌트 서비스 코드 반영 (Toggle)

[dladncks1217]

📄 Summary

수정된 디자인시스템 컴포넌트 소스코드 반영

기존코드 - 특정 훅에 의존적, 명령적인 로직 전개 필요, 불필요한 props drilling 빈번하게 발생.

아래처럼 토글 선택할때마다 useSelect불러와서 상태 값 및 핸들러 각 컴포넌트에 주입, 선택된 값에 따라 명령적으로 UI로직을 전개해야 했음.

const ExpenseListSection = ({ tripId, tripType }: ExpenseListProps) => {
  const isMobile = useRecoilValue(mediaQueryMobileState);

  const { selected: selectedFilter, handleSelectClick: handleFilterSelectClick } = useSelect(
    EXPENSE_LIST_FILTERS.DAY_LOG
  );

  return (
    <section css={containerStyling}>
      <Flex styles={{ justify: isMobile ? 'space-between' : 'flex-end' }}>
        {isMobile && <Heading size="xSmall">경비 상세 정보</Heading>}
        <ToggleGroup css={toggleGroupStyling}>
          <Toggle
            text={EXPENSE_LIST_FILTERS.DAY_LOG}
            toggleId={EXPENSE_LIST_FILTERS.DAY_LOG}
            selectedId={selectedFilter}
            changeSelect={handleFilterSelectClick}
            aria-label="날짜 필터"
          />
          <Toggle
            text={EXPENSE_LIST_FILTERS.CATEGORY}
            toggleId={EXPENSE_LIST_FILTERS.CATEGORY}
            selectedId={selectedFilter}
            changeSelect={handleFilterSelectClick}
            aria-label="카테고리 필터"
          />
        </ToggleGroup>
      </Flex>
      {selectedFilter === EXPENSE_LIST_FILTERS.DAY_LOG ? (
        <ExpenseDates tripId={tripId} tripType={tripType} />
      ) : (
        <ExpenseCategories tripId={tripId} tripType={tripType} />
      )}
    </section>

아래와 같이 컴포넌트가 UI로직만 담을 수 있도록 리팩토링

   <Toggle initialSelect={EXPENSE_LIST_FILTERS.DAY_LOG}>
      <section css={containerStyling}>
        <Flex styles={{ justify: isMobile ? 'space-between' : 'flex-end' }}>
          {isMobile && <Heading size="xSmall">경비 상세 정보</Heading>}
          <Flex css={toggleGroupStyling}>
            <Toggle.List
              text={EXPENSE_LIST_FILTERS.DAY_LOG}
              toggleKey={EXPENSE_LIST_FILTERS.DAY_LOG}
              aria-label="날짜 필터"
            />
            <Toggle.List
              text={EXPENSE_LIST_FILTERS.CATEGORY}
              toggleKey={EXPENSE_LIST_FILTERS.CATEGORY}
              aria-label="카테고리 필터"
            />
          </Flex>
        </Flex>
        <Toggle.Item toggleKey={EXPENSE_LIST_FILTERS.DAY_LOG}>
          <ExpenseDates tripId={tripId} tripType={tripType} />
        </Toggle.Item>
        <Toggle.Item toggleKey={EXPENSE_LIST_FILTERS.CATEGORY}>
          <ExpenseCategories tripId={tripId} tripType={tripType} />
        </Toggle.Item>
      </section>
    </Toggle>

#792

[LJW25]

완 벽 한 리 더 슬 링 키