fix: 요일 변할 때마다 버튼이 없어졌다 나타나는 문제 개선

[#863]
woowacourse-teams · Oct 16, 2023 · 9954895 · 9954895
1 parent f8bf883
commit 9954895
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 49 deletions.
diff --git a/frontend/src/components/ui/StationDetailsWindow/StationDetailsView.tsx b/frontend/src/components/ui/StationDetailsWindow/StationDetailsView.tsx
@@ -53,7 +53,7 @@ const StationDetailsView = ({ station }: StationDetailsViewProps) => {
 
       <ChargerList chargers={chargers} stationId={stationId} reportCount={reportCount} />
 
-      <CongestionStatistics stationId={stationId} />
+      <CongestionStatistics stationId={stationId} chargers={chargers} />
 
       <ReviewPreview stationId={stationId} />
     </Box>

diff --git a/frontend/src/components/ui/StationDetailsWindow/congestion/ChargingSpeedButtons.tsx b/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'}

diff --git a/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx b/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx
@@ -1,3 +1,5 @@
+import { getChargerCountsAndAvailability } from 'tools/getChargerCountsAndAvailability';
+
 import { useState } from 'react';
 
 import { useStationCongestionStatistics } from '@hooks/tanstack-query/station-details/useStationCongestionStatistics';
@@ -7,19 +9,22 @@ 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 type { Charger, EnglishDaysOfWeek } from '@type';
 
+import ChargingSpeedButtons from './ChargingSpeedButtons';
 import StatisticsContent from './StatisticsContent';
 import Title from './Title';
 import BarsSkeleton from './bar/BarsSkeleton';
 
 interface CongestionStatisticsProps {
   stationId: string;
+  chargers: Charger[];
 }
 
-const CongestionStatistics = ({ stationId }: CongestionStatisticsProps) => {
+const CongestionStatistics = ({ stationId, chargers }: CongestionStatisticsProps) => {
   const todayIndex = (new Date().getDay() + 6) % 7; // 월요일 0 ~ 일요일 6
 
   const [dayOfWeek, setDayOfWeek] = useState<EnglishDaysOfWeek>(ENGLISH_DAYS_OF_WEEK[todayIndex]);
@@ -39,6 +44,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 +79,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>

diff --git a/frontend/src/components/ui/StationDetailsWindow/congestion/StatisticsContent.tsx b/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>
   );
 };