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

woowacourse-teams · Feb 18, 2024 · c9b25f1 · c9b25f1
1 parent cdaa039
commit c9b25f1
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 76 deletions.
diff --git a/frontend-monorepo/packages/hanglog-service/src/components/common/DayLogItem/DayLogItem.tsx b/frontend-monorepo/packages/hanglog-service/src/components/common/DayLogItem/DayLogItem.tsx
@@ -1,13 +1,14 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { Box, Flex, Heading, Toggle, ToggleGroup, useSelect } from 'hang-log-design-system';
+import { Box, Flex, Heading, NewToggle as Toggle } from 'hang-log-design-system';
 
 import { containerStyling, headerStyling } from '@components/common/DayLogItem/DayLogItem.style';
 import TitleInput from '@components/common/DayLogItem/TitleInput/TitleInput';
 import TripItemList from '@components/common/TripItemList/TripItemList';
 
 import type { DayLogData } from '@type/dayLog';
 import type { TripTypeData } from '@type/trip';
+import { TripItemData } from '@type/tripItem';
 
 import { DAY_LOG_ITEM_FILTERS, TRIP_TYPE } from '@constants/trip';
 
@@ -25,18 +26,20 @@ const DayLogItem = ({
   openAddModal,
   ...information
 }: DayLogItemProps) => {
-  const { selected: selectedFilter, handleSelectClick: handleFilterSelectClick } = useSelect(
-    DAY_LOG_ITEM_FILTERS.ALL
-  );
+  const [dayLogLists, setDayLogLists] = useState<TripItemData[]>([]);
+
+  const handleChangeSelect = (key: number | string) => {
+    const resultList =
+      key === DAY_LOG_ITEM_FILTERS.SPOT
+        ? information.items.filter((item) => item.itemType === true)
+        : information.items;
 
-  const selectedTripItemList =
-    selectedFilter === DAY_LOG_ITEM_FILTERS.SPOT
-      ? information.items.filter((item) => item.itemType === true)
-      : information.items;
+    setDayLogLists(resultList);
+  };
 
   useEffect(() => {
-    handleFilterSelectClick(DAY_LOG_ITEM_FILTERS.ALL);
-  }, [handleFilterSelectClick, information.items]);
+    setDayLogLists(information.items);
+  }, [information.id, information.items.length]);
 
   return (
     <Box tag="section" css={containerStyling}>
@@ -47,25 +50,25 @@ const DayLogItem = ({
           <Heading size="xSmall">{information.title}</Heading>
         )}
         {!isEditable && (
-          <ToggleGroup>
-            {[DAY_LOG_ITEM_FILTERS.ALL, DAY_LOG_ITEM_FILTERS.SPOT].map((filter) => (
-              <Toggle
-                key={filter}
-                text={filter}
-                toggleId={filter}
-                selectedId={selectedFilter}
-                changeSelect={handleFilterSelectClick}
-                aria-label={`${filter} 필터`}
-              />
-            ))}
-          </ToggleGroup>
+          <Toggle initialSelect={DAY_LOG_ITEM_FILTERS.ALL} additinalFunc={handleChangeSelect}>
+            <Flex>
+              {[DAY_LOG_ITEM_FILTERS.ALL, DAY_LOG_ITEM_FILTERS.SPOT].map((filter) => (
+                <Toggle.List
+                  key={filter}
+                  text={filter}
+                  toggleKey={filter}
+                  aria-label={`${filter} 필터`}
+                />
+              ))}
+            </Flex>
+          </Toggle>
         )}
       </Flex>
-      {selectedTripItemList.length > 0 ? (
+      {dayLogLists.length > 0 ? (
         <TripItemList
           tripId={tripId}
           dayLogId={information.id}
-          tripItems={selectedTripItemList}
+          tripItems={dayLogLists}
           isEditable={isEditable}
         />
       ) : (

diff --git a/...packages/hanglog-service/src/components/expense/ExpenseListSection/ExpenseListSection.tsx b/...packages/hanglog-service/src/components/expense/ExpenseListSection/ExpenseListSection.tsx
@@ -1,6 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
-import { Flex, Heading, Toggle, ToggleGroup, useSelect } from 'hang-log-design-system';
+import { Flex, Heading, NewToggle as Toggle } from 'hang-log-design-system';
 
 import ExpenseCategories from '@components/expense/ExpenseCategories/ExpenseCategories';
 import ExpenseDates from '@components/expense/ExpenseDates/ExpenseDates';
@@ -23,37 +23,33 @@ interface ExpenseListProps {
 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>
+    <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>
   );
 };
 

diff --git a/...nd-monorepo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemList.tsx b/...nd-monorepo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemList.tsx
@@ -20,7 +20,7 @@ import type { TripsData } from '@type/trips';
 import { ORDER_BY_DATE, ORDER_BY_REGISTRATION } from '@constants/order';
 import { PATH } from '@constants/path';
 import { sortByNewest, sortByStartDate } from '@utils/sort';
-import { queryClient } from '@/hooks/api/queryClient';
+import { queryClient } from '@hooks/api/queryClient';
 
 const TripsItemList = () => {
   const tripsData = queryClient.getQueryData(['trips']) as TripsData[];

diff --git a/...epo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemListSkeleton.tsx b/...epo/packages/hanglog-service/src/components/trips/TripsItemList/TripsItemListSkeleton.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Toggle, ToggleGroup } from 'hang-log-design-system';
+import { Box, Flex, NewToggle as Toggle } from 'hang-log-design-system';
 
 import TripsItemSkeleton from '@components/trips/TripsItem/TripsItemSkeleton';
 import {
@@ -10,33 +10,21 @@ import { ORDER_BY_DATE, ORDER_BY_REGISTRATION } from '@constants/order';
 
 const TripsItemListSkeleton = () => {
   return (
-    <>
+    <Toggle initialSelect={ORDER_BY_REGISTRATION}>
       <Flex
         tag="section"
         styles={{ justify: 'right', paddingRight: '50px' }}
         css={toggleGroupStyling}
       >
-        <ToggleGroup>
-          <Toggle
-            text={ORDER_BY_REGISTRATION}
-            toggleId={ORDER_BY_REGISTRATION}
-            selectedId="등록순"
-            changeSelect={() => {}}
-          />
-          <Toggle
-            text={ORDER_BY_DATE}
-            toggleId={ORDER_BY_DATE}
-            selectedId="등록순"
-            changeSelect={() => {}}
-          />
-        </ToggleGroup>
+        <Toggle.List text={ORDER_BY_REGISTRATION} toggleKey={ORDER_BY_REGISTRATION} />
+        <Toggle.List text={ORDER_BY_DATE} toggleKey={ORDER_BY_DATE} />
       </Flex>
       <Box tag="ol" css={gridBoxStyling}>
         {Array.from({ length: 10 }, (_, index) => {
           return <TripsItemSkeleton key={index} />;
         })}
       </Box>
-    </>
+    </Toggle>
   );
 };
 

diff --git a/frontend-monorepo/packages/hanglog-service/src/hooks/api/useCommunityTripQuery.ts b/frontend-monorepo/packages/hanglog-service/src/hooks/api/useCommunityTripQuery.ts
@@ -1,4 +1,4 @@
-import { TRIP_TYPE } from '@/constants/trip';
+import { TRIP_TYPE } from '@constants/trip';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 

diff --git a/frontend-monorepo/packages/hanglog-service/src/hooks/api/useSharedTripQuery.ts b/frontend-monorepo/packages/hanglog-service/src/hooks/api/useSharedTripQuery.ts
@@ -1,4 +1,4 @@
-import { TRIP_TYPE } from '@/constants/trip';
+import { TRIP_TYPE } from '@constants/trip';
 
 import { useSuspenseQuery } from '@tanstack/react-query';