fix: 데스크톱 모드에서 충전소 상세정보 보기 버튼이 항상 보여지는 문제를 수정한다 (#917)

woowacourse-teams · Oct 31, 2023 · 857ded2 · 857ded2
1 parent f765cf0
commit 857ded2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts b/frontend/src/components/ui/Navigator/NavigationBar/hooks/useNavigationBar.ts
@@ -46,6 +46,7 @@ export const useNavigationBar = () => {
   };
 
   return {
+    navigationBarPanel,
     toggleBasePanel,
     openLastPanel,
     closeBasePanel,

diff --git a/frontend/src/components/ui/StationInfoWindow/StationInfo.tsx b/frontend/src/components/ui/StationInfoWindow/StationInfo.tsx
@@ -11,6 +11,8 @@ import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
 import Text from '@common/Text';
 
+import { useNavigationBar } from '@ui/Navigator/NavigationBar/hooks/useNavigationBar';
+
 import type { StationDetails } from '@type';
 
 import PathFinding from './PathFinding';
@@ -46,6 +48,8 @@ const StationInfo = ({
     quickChargerCount,
   } = getChargerCountsAndAvailability(chargers);
 
+  const { navigationBarPanel } = useNavigationBar();
+
   const availabilityColor = MARKER_COLORS[isAvailable ? 'available' : 'noAvailable'];
 
   return (
@@ -102,16 +106,17 @@ const StationInfo = ({
         </Text>
       </FlexBox>
 
-      <FlexBox mt={3} justifyContent="between">
-        <Button onClick={handleOpenStationDetail} hover>
-          <FlexBox alignItems="center">
-            <Text variant="label" mb={0.75}>
-              상세 정보 보기
-            </Text>
-            <HiChevronRight />
-          </FlexBox>
-        </Button>
+      <FlexBox mt={3} justifyContent="between" mb={0.75}>
         <PathFinding address={address} latitude={latitude} longitude={longitude} />
+
+        {navigationBarPanel.lastPanel === null && (
+          <Button onClick={handleOpenStationDetail} hover>
+            <FlexBox alignItems="center">
+              <Text variant="label">상세 정보 보기</Text>
+              <HiChevronRight />
+            </FlexBox>
+          </Button>
+        )}
       </FlexBox>
     </Box>
   );