refactor: 클라이언트 필터링 컴포넌트를 개선한다

frontend/src/components/ui/ClientStationFilters.tsx

@@ -1,11 +1,13 @@
 import { styled } from 'styled-components';
 
-import { useExternalState } from '@utils/external-state';
+import { useExternalState, useExternalValue } from '@utils/external-state';
 
+import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore';
 import { clientStationFiltersStore } from '@stores/station-filters/clientStationFiltersStore';
 
 import ButtonNext from '@common/ButtonNext';
 
+import { NAVIGATOR_PANEL_WIDTH } from '@constants';
 import { CHARGING_SPEED } from '@constants/chargers';
 
 const ClientStationFilters = () => {
@@ -19,6 +21,12 @@ const ClientStationFilters = () => {
     setFilterOption,
   ] = useExternalState(clientStationFiltersStore);
 
+  const { basePanel, lastPanel } = useExternalValue(navigationBarPanelStore);
+  const navigationComponentWidth =
+    (basePanel === null ? 0 : NAVIGATOR_PANEL_WIDTH) +
+    (lastPanel === null ? 0 : NAVIGATOR_PANEL_WIDTH) +
+    10;
+
   const toggleAvailableStation = () => {
     setFilterOption((prev) => ({
       ...prev,
@@ -48,7 +56,7 @@ const ClientStationFilters = () => {
   };
 
   return (
-    <Container>
+    <Container left={navigationComponentWidth}>
       <ButtonNext
         onClick={toggleAvailableStation}
         variant={isAvailableStationFilterSelected ? 'contained' : 'outlined'}
@@ -85,10 +93,10 @@ const ClientStationFilters = () => {
   );
 };
 
-const Container = styled.div`
+const Container = styled.div<{ left: number }>`
   position: fixed;
   top: 10px;
-  left: 180px;
+  left: ${(props) => props.left}rem;
   z-index: 998;
   padding: 10px;
   background-color: white;

frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx

@@ -2,7 +2,6 @@ import { ArrowLeftIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
 import { memberTokenStore } from '@stores/login/memberTokenStore';
-import { serverStationFilterAction } from '@stores/station-filters/serverStationFiltersStore';
 
 import { useServerStationFilters } from '@hooks/tanstack-query/station-filters/useServerStationFilters';
 import { useServerStationFilterStoreActions } from '@hooks/useServerStationFilterActions';
@@ -15,6 +14,7 @@ import Text from '@common/Text';
 import ServerStationFiltersSkeleton from '@ui/ServerStationFilters/ServerStationFiltersSkeleton';
 import { useNavigationBar } from '@ui/compound/NavigationBar/hooks/useNavigationBar';
 
+import { NAVIGATOR_PANEL_WIDTH } from '@constants';
 import { CONNECTOR_TYPES, COMPANIES } from '@constants/chargers';
 
 import type { Capacity } from '@type';
@@ -55,7 +55,7 @@ const ServerStationFilters = () => {
 
   return (
     <FlexBox
-      width={34}
+      width={NAVIGATOR_PANEL_WIDTH}
       height={'100vh'}
       alignItems={'center'}
       direction={'column'}
@@ -65,7 +65,7 @@ const ServerStationFilters = () => {
       noRadius={'all'}
     >
       <FlexBox
-        width={34}
+        width={NAVIGATOR_PANEL_WIDTH}
         height={8}
         justifyContent="between"
         alignItems="center"

frontend/src/components/ui/StationDetailsWindow/StationDetailsView.tsx

@@ -8,6 +8,8 @@ import StationReportButton from '@ui/StationDetailsWindow/reports/station/Statio
 import ReviewPreview from '@ui/StationDetailsWindow/reviews/previews/ReviewPreview';
 import StationInformation from '@ui/StationDetailsWindow/station/StationInformation';
 
+import { NAVIGATOR_PANEL_WIDTH } from '@constants';
+
 import type { StationDetails } from '@type';
 
 import CongestionStatistics from './congestion/CongestionStatistics';
@@ -35,7 +37,7 @@ const StationDetailsView = ({ station }: StationDetailsViewProps) => {
 };
 
 export const stationDetailsViewContainerCss = css`
-  width: 34rem;
+  width: ${NAVIGATOR_PANEL_WIDTH}rem;
   height: 100vh;
   background-color: white;
   box-shadow: 1px 1px 2px gray;

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

@@ -1,5 +1,9 @@
 import { css } from 'styled-components';
 
+import { useExternalValue } from '@utils/external-state';
+
+import { selectedStationIdStore } from '@stores/selectedStationStore';
+
 import { useStationDetails } from '@hooks/tanstack-query/station-details/useStationDetails';
 
 import Box from '@common/Box';
@@ -8,6 +12,8 @@ import StationDetailsView from '@ui/StationDetailsWindow/StationDetailsView';
 import StationDetailsViewSkeleton from '@ui/StationDetailsWindow/StationDetailsViewSkeleton';
 import { useNavigationBar } from '@ui/compound/NavigationBar/hooks/useNavigationBar';
 
+import { NAVIGATOR_PANEL_WIDTH } from '@constants';
+
 const StationDetailsWindow = () => {
   const {
     data: selectedStation,
@@ -16,8 +22,9 @@ const StationDetailsWindow = () => {
     isFetching,
   } = useStationDetails();
   const { handleClosePanel } = useNavigationBar();
+  const selectedStationId = useExternalValue(selectedStationIdStore);
 
-  if (!isFetching && selectedStation === undefined) {
+  if (selectedStationId === null || (!isFetching && selectedStation === null)) {
     handleClosePanel();
   }
 
@@ -37,7 +44,7 @@ const StationDetailsWindow = () => {
 };
 
 const stationDetailsWindowCss = css`
-  width: 34rem;
+  width: ${NAVIGATOR_PANEL_WIDTH}rem;
   height: 100vh;
   z-index: 999;
   overflow: scroll;

frontend/src/components/ui/StationSearchWindow/StationSearchWindow.tsx

@@ -4,6 +4,8 @@ import Text from '@common/Text';
 
 import StationList from '@ui/StationList/StationList';
 
+import { NAVIGATOR_PANEL_WIDTH } from '@constants';
+
 import StationSearchBar from './StationSearchBar';
 
 const StationSearchWindow = () => {
@@ -23,7 +25,7 @@ const StationSearchWindow = () => {
 
 const S = {
   Container: styled.article`
-    width: 34rem;
+    width: ${NAVIGATOR_PANEL_WIDTH}rem;
     height: 100vh;
     background: #fcfcfc;
     outline: 1.5px solid #e1e4eb;

frontend/src/components/ui/compound/NavigationBar/CloseButton.tsx

@@ -5,18 +5,23 @@ import Button from '@common/Button';
 import { useNavigationBar } from './hooks/useNavigationBar';
 
 interface Props {
-  canDisplay: boolean
+  canDisplay: boolean;
 }
 
 const CloseButton = ({ canDisplay }: Props) => {
   const { handleClosePanel } = useNavigationBar();
 
-  if(!canDisplay) {
-    return <></>
+  if (!canDisplay) {
+    return <></>;
   }
 
   return (
-    <Button variant="label" aria-label="검색창 닫기" onClick={handleClosePanel}>
+    <Button
+      css={{ top: '50%', transform: 'translate(0, -50%);' }}
+      variant="label"
+      aria-label="검색창 닫기"
+      onClick={handleClosePanel}
+    >
       <ChevronLeftIcon width="2.4rem" stroke="#9c9fa7" />
     </Button>
   );

frontend/src/components/ui/compound/NavigationBar/index.tsx

@@ -1,15 +1,6 @@
 import { css } from 'styled-components';
 
 import type { PropsWithChildren } from 'react';
-import { useEffect, useRef } from 'react';
-
-import { useExternalValue, useSetExternalState } from '@utils/external-state';
-
-import {
-  browserWidthStore,
-  navigatorAccordionWidthStore,
-} from '@stores/layout/componentWidthStore';
-import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore';
 
 import FlexBox from '@common/FlexBox';
 
@@ -21,24 +12,8 @@ import Menu from './Menu';
 export type BasePanelType = 'searchWindow' | 'stationList' | 'serverStationFilters' | null;
 
 const NavigationBar = ({ children }: PropsWithChildren) => {
-  const accordionContainerRef = useRef(null);
-
-  const { basePanel, lastPanel } = useExternalValue(navigationBarPanelStore);
-  const setNavigatorAccordionWidth = useSetExternalState(navigatorAccordionWidthStore);
-  const setBrowserWidth = useSetExternalState(browserWidthStore);
-
-  useEffect(() => {
-    setNavigatorAccordionWidth(accordionContainerRef.current.offsetWidth);
-    setBrowserWidth((prev) => {
-      if (prev === null) {
-        return document.body.offsetWidth;
-      }
-      return prev;
-    });
-  }, [basePanel, lastPanel]);
-
   return (
-    <FlexBox gap={0} nowrap css={accordionContainerCss} ref={accordionContainerRef}>
+    <FlexBox gap={0} nowrap css={accordionContainerCss}>
       {children}
     </FlexBox>
   );

frontend/src/constants/index.ts

@@ -18,3 +18,6 @@ export const FORM_PRIVATE_REASON_LENGTH_LIMIT = 100;
 
 export const MIN_REVIEW_CONTENT_LENGTH = 10;
 export const MAX_REVIEW_CONTENT_LENGTH = 100;
+
+export const BROWSER_WIDTH = document.body.offsetWidth;
+export const NAVIGATOR_PANEL_WIDTH = 34;

frontend/src/hooks/google-maps/useStationSummary.tsx

@@ -1,4 +1,5 @@
 import { useExternalValue, useSetExternalState } from '@utils/external-state';
+import { getCalculatedMapDelta } from '@utils/google-maps/getCalculatedMapDelta';
 
 import { getGoogleMapStore } from '@stores/google-maps/googleMapStore';
 import { markerInstanceStore } from '@stores/google-maps/markerInstanceStore';
@@ -9,13 +10,10 @@ import StationSummaryWindow from '@ui/StationSummaryWindow';
 
 import type { StationSummary } from '@type';
 
-import { useCalculatedMapDelta } from './useCalculatedMapDelta';
-
 export const useStationSummary = () => {
   const googleMap = useExternalValue(getGoogleMapStore());
   const infoWindowInstance = useExternalValue(getStationSummaryWindowStore());
   const stationMarkers = useExternalValue(markerInstanceStore);
-  const calculatedMapDelta = useCalculatedMapDelta();
   const setSelectedStationId = useSetExternalState(selectedStationIdStore);
 
   const openStationSummary = (
@@ -28,6 +26,7 @@ export const useStationSummary = () => {
     );
     const markerInstance = stationMarkerInstance ?? stationMarker.markerInstance;
     const { lat, lng } = markerInstance.position as google.maps.LatLngLiteral;
+    const calculatedMapDelta = getCalculatedMapDelta();
 
     setSelectedStationId(stationId);
 

frontend/src/hooks/tanstack-query/station-details/useStationDetails.ts

@@ -27,15 +27,6 @@ export const fetchStationDetails = async (selectedStationId: string) => {
 
     const data: StationDetails = await response.json();
     return data;
-    // const changedDataList = Object.entries(data).map(([key, value]) => {
-    //   if (INVALID_VALUE_LIST.includes(String(value))) {
-    //     return [key, null];
-    //   }
-    //
-    //   return [key, value];
-    // });
-    //
-    // return Object.fromEntries(changedDataList);
   });
 
   return stationDetails;

frontend/src/utils/google-maps/getCalculatedMapDelta.ts

@@ -0,0 +1,28 @@
+import { getGoogleMapStore } from '@stores/google-maps/googleMapStore';
+import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore';
+
+import { BROWSER_WIDTH, NAVIGATOR_PANEL_WIDTH } from '@constants';
+
+import { getDisplayPosition } from '.';
+
+export const getCalculatedMapDelta = () => {
+  const navigationComponentWidth = getNavigationComponentWidth();
+  const browserWidth = BROWSER_WIDTH;
+  const googleMap = getGoogleMapStore().getState();
+
+  const navigatorAccordionWidthRatio = (navigationComponentWidth * 10) / browserWidth;
+  const calculatedMapDelta =
+    getDisplayPosition(googleMap).longitudeDelta * 2 * navigatorAccordionWidthRatio;
+
+  return calculatedMapDelta;
+};
+
+export const getNavigationComponentWidth = () => {
+  const { basePanel, lastPanel } = navigationBarPanelStore.getState();
+  const navigationComponentWidth =
+    (basePanel === null ? 0 : NAVIGATOR_PANEL_WIDTH) +
+    (lastPanel === null ? 0 : NAVIGATOR_PANEL_WIDTH) +
+    10;
+
+  return navigationComponentWidth;
+};