fix: 사용량 통계 부분 렌더링을 개선한다

frontend/.storybook/main.ts

@@ -55,6 +55,7 @@ const config: StorybookConfig = {
         '@constants': path.resolve(__dirname, '../src/constants'),
         '@assets': path.resolve(__dirname, '../src/assets'),
         '@type': path.resolve(__dirname, '../src/types'),
+        '@tools': path.resolve(__dirname, '../src/tools'),
       };
     }
 

frontend/jest.config.json

@@ -15,7 +15,8 @@
     "^@constants": "<rootDir>/src/constants/index.ts",
     "^@constants/(.*)$": "<rootDir>/src/constants/$1",
     "^@assets/(.*)$": "<rootDir>/fileMock.ts",
-    "^@type/(.*)$": "<rootDir>/src/types/$1"
+    "^@type/(.*)$": "<rootDir>/src/types/$1",
+    "^@tools/(.*)$": "<rootDir>/src/tools/$1"
   },
   "setupFilesAfterEnv": ["<rootDir>/jest.setup.ts"]
 }

frontend/src/components/ui/StationDetailsWindow/congestion/ChargingSpeedButtons.tsx

@@ -12,7 +12,7 @@ interface ChargingSpeedButtonsProps {
 
 const ChargingSpeedButtons = ({ chargingSpeed, setChargingSpeed }: ChargingSpeedButtonsProps) => {
   return (
-    <FlexBox nowrap mt={4} columnGap={2}>
+    <FlexBox nowrap columnGap={2}>
       <Button
         aria-label="완속 충전기 기준 시간별 사용량 보기"
         variant={chargingSpeed === 'standard' ? 'contained' : 'outlined'}

frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx

@@ -1,16 +1,21 @@
+import { getChargerCountsAndAvailability } from '@tools/getChargerCountsAndAvailability';
+
 import { useState } from 'react';
 
 import { useStationCongestionStatistics } from '@hooks/tanstack-query/station-details/useStationCongestionStatistics';
+import { useStationDetails } from '@hooks/tanstack-query/station-details/useStationDetails';
 
 import Box from '@common/Box';
 import Tab from '@common/Tab';
 
 import Error from '@ui/Error';
 
+import type { CHARGING_SPEED } from '@constants/chargers';
 import { ENGLISH_DAYS_OF_WEEK, SHORT_KOREAN_DAYS_OF_WEEK } from '@constants/congestion';
 
 import type { EnglishDaysOfWeek } from '@type';
 
+import ChargingSpeedButtons from './ChargingSpeedButtons';
 import StatisticsContent from './StatisticsContent';
 import Title from './Title';
 import BarsSkeleton from './bar/BarsSkeleton';
@@ -31,6 +36,10 @@ const CongestionStatistics = ({ stationId }: CongestionStatisticsProps) => {
     refetch,
   } = useStationCongestionStatistics(stationId, dayOfWeek);
 
+  const {
+    data: { chargers },
+  } = useStationDetails(stationId);
+
   const handleRetry = () => {
     refetch();
   };
@@ -39,6 +48,17 @@ const CongestionStatistics = ({ stationId }: CongestionStatisticsProps) => {
     setDayOfWeek(ENGLISH_DAYS_OF_WEEK[index]);
   };
 
+  const { standardChargerCount, quickChargerCount } = getChargerCountsAndAvailability(chargers);
+
+  const hasOnlyStandardChargers = quickChargerCount === 0;
+  const hasOnlyQuickChargers = standardChargerCount === 0;
+
+  const hasOnlyOneChargerType = hasOnlyStandardChargers || hasOnlyQuickChargers;
+
+  const [chargingSpeed, setChargingSpeed] = useState<keyof typeof CHARGING_SPEED>(
+    hasOnlyStandardChargers ? 'standard' : 'quick'
+  );
+
   return (
     <Box my={5}>
       <Title />
@@ -63,15 +83,24 @@ const CongestionStatistics = ({ stationId }: CongestionStatisticsProps) => {
             minHeight={40.4}
           />
         ) : (
-          SHORT_KOREAN_DAYS_OF_WEEK.map((day, index) => (
-            <Tab.Content key={`${day}-statistics-content`} index={index} width="100%">
-              {isLoading ? (
-                <BarsSkeleton />
-              ) : (
-                <StatisticsContent congestionStatistics={congestionStatistics} />
-              )}
-            </Tab.Content>
-          ))
+          <>
+            {SHORT_KOREAN_DAYS_OF_WEEK.map((day, index) => (
+              <Tab.Content key={`${day}-statistics-content`} index={index} width="100%">
+                {isLoading ? (
+                  <BarsSkeleton />
+                ) : (
+                  <StatisticsContent congestion={congestionStatistics.congestion[chargingSpeed]} />
+                )}
+              </Tab.Content>
+            ))}
+
+            {!hasOnlyOneChargerType && (
+              <ChargingSpeedButtons
+                chargingSpeed={chargingSpeed}
+                setChargingSpeed={setChargingSpeed}
+              />
+            )}
+          </>
         )}
       </Tab>
     </Box>

frontend/src/components/ui/StationDetailsWindow/congestion/StatisticsContent.tsx

@@ -1,48 +1,20 @@
-import { useEffect, useState } from 'react';
-
 import FlexBox from '@common/FlexBox';
 
-import type { CHARGING_SPEED } from '@constants/chargers';
-import { NO_RATIO } from '@constants/congestion';
-
-import type { CongestionStatistics } from '@type';
+import type { Congestion } from '@type';
 
-import ChargingSpeedButtons from './ChargingSpeedButtons';
 import Bar from './bar/Bar';
 
 interface StatisticsContentProps {
-  congestionStatistics: CongestionStatistics;
+  congestion: Congestion[];
 }
 
-const StatisticsContent = ({ congestionStatistics }: StatisticsContentProps) => {
-  const hasOnlyStandardChargers = congestionStatistics?.congestion['quick'].every(
-    (congestion) => congestion.ratio === NO_RATIO
-  );
-  const hasOnlyQuickChargers = congestionStatistics?.congestion['standard'].every(
-    (congestion) => congestion.ratio === NO_RATIO
-  );
-  const hasOnlyOneChargerType = hasOnlyStandardChargers || hasOnlyQuickChargers;
-
-  const [chargingSpeed, setChargingSpeed] = useState<keyof typeof CHARGING_SPEED>('standard');
-
-  useEffect(() => {
-    if (hasOnlyQuickChargers) {
-      setChargingSpeed('quick');
-    }
-  }, [hasOnlyQuickChargers]);
-
+const StatisticsContent = ({ congestion }: StatisticsContentProps) => {
   return (
-    <>
-      <FlexBox tag="ul" direction="column" nowrap alignItems="start" width="100%" height="auto">
-        {congestionStatistics?.congestion[chargingSpeed].map(({ hour, ratio }) => (
-          <Bar key={`statistics-${hour}`} hour={`${hour + 1}`.padStart(2, '0')} ratio={ratio} />
-        ))}
-      </FlexBox>
-
-      {!hasOnlyOneChargerType && (
-        <ChargingSpeedButtons chargingSpeed={chargingSpeed} setChargingSpeed={setChargingSpeed} />
-      )}
-    </>
+    <FlexBox tag="ul" direction="column" nowrap alignItems="start" width="100%" height="auto">
+      {congestion.map(({ hour, ratio }) => (
+        <Bar key={`statistics-${hour}`} hour={`${hour + 1}`.padStart(2, '0')} ratio={ratio} />
+      ))}
+    </FlexBox>
   );
 };
 

frontend/src/components/ui/StationInfoWindow/StationInfo.tsx

@@ -1,4 +1,5 @@
 import { XMarkIcon } from '@heroicons/react/24/outline';
+import { getChargerCountsAndAvailability } from '@tools/getChargerCountsAndAvailability';
 
 import type { MouseEvent } from 'react';
 import { HiChevronRight } from 'react-icons/hi2';
@@ -10,45 +11,14 @@ import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
 import Text from '@common/Text';
 
-import { QUICK_CHARGER_CAPACITY_THRESHOLD } from '@constants/chargers';
-
-import type { Charger, StationDetails } from '@type';
+import type { StationDetails } from '@type';
 
 export interface StationInfoProps {
   stationDetails: StationDetails;
   handleOpenStationDetail: () => void;
   handleCloseStationWindow: (event: MouseEvent<HTMLButtonElement>) => void;
 }
 
-const getChargerCountsAndAvailability = (chargers: Charger[]) => {
-  const isAvailable = chargers.some(({ state }) => state === 'STANDBY');
-
-  const standardChargers = chargers.filter(
-    ({ capacity }) => capacity < QUICK_CHARGER_CAPACITY_THRESHOLD
-  );
-  const quickChargers = chargers.filter(
-    ({ capacity }) => capacity >= QUICK_CHARGER_CAPACITY_THRESHOLD
-  );
-
-  const availableStandardChargerCount = standardChargers.filter(
-    ({ state }) => state === 'STANDBY'
-  ).length;
-  const availableQuickChargerCount = quickChargers.filter(
-    ({ state }) => state === 'STANDBY'
-  ).length;
-
-  const standardChargerCount = standardChargers.length;
-  const quickChargerCount = quickChargers.length;
-
-  return {
-    isAvailable,
-    availableStandardChargerCount,
-    availableQuickChargerCount,
-    standardChargerCount,
-    quickChargerCount,
-  };
-};
-
 const StationInfo = ({
   stationDetails,
   handleOpenStationDetail,

frontend/src/tools/getChargerCountsAndAvailability.ts

@@ -0,0 +1,32 @@
+import { QUICK_CHARGER_CAPACITY_THRESHOLD } from '@constants/chargers';
+
+import type { Charger } from '@type';
+
+export const getChargerCountsAndAvailability = (chargers: Charger[]) => {
+  const isAvailable = chargers.some(({ state }) => state === 'STANDBY');
+
+  const standardChargers = chargers.filter(
+    ({ capacity }) => capacity < QUICK_CHARGER_CAPACITY_THRESHOLD
+  );
+  const quickChargers = chargers.filter(
+    ({ capacity }) => capacity >= QUICK_CHARGER_CAPACITY_THRESHOLD
+  );
+
+  const availableStandardChargerCount = standardChargers.filter(
+    ({ state }) => state === 'STANDBY'
+  ).length;
+  const availableQuickChargerCount = quickChargers.filter(
+    ({ state }) => state === 'STANDBY'
+  ).length;
+
+  const standardChargerCount = standardChargers.length;
+  const quickChargerCount = quickChargers.length;
+
+  return {
+    isAvailable,
+    availableStandardChargerCount,
+    availableQuickChargerCount,
+    standardChargerCount,
+    quickChargerCount,
+  };
+};

frontend/tsconfig.json

@@ -27,7 +27,8 @@
       "@style/*": ["style/*"],
       "@assets/*": ["assets/*"],
       "@type": ["types/index"],
-      "@type/*": ["types/*"]
+      "@type/*": ["types/*"],
+      "@tools/*": ["tools/*"]
     }
   }
 }

frontend/webpack.config.dev.js

@@ -60,6 +60,7 @@ module.exports = function () {
         '@assets': path.resolve(__dirname, './src/assets'),
         '@style': path.resolve(__dirname, './src/style'),
         '@type': path.resolve(__dirname, './src/types'),
+        '@tools': path.resolve(__dirname, './src/tools'),
       },
     },
     plugins: [