feat: 검색창 닫아도 지도 위에 검색바 보이는 기능 구현

[#637]

frontend/src/components/ui/ClientStationFilters.tsx

@@ -2,13 +2,13 @@ import { css, styled } from 'styled-components';
 
 import { useExternalState, useExternalValue } from '@utils/external-state';
 
+import type { Panels } from '@stores/layout/navigationBarPanelStore';
 import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore';
 import { clientStationFiltersStore } from '@stores/station-filters/clientStationFiltersStore';
 
-import Box from '@common/Box';
-import FlexBox from '@common/FlexBox';
+import useMediaQueries from '@hooks/useMediaQueries';
 
-import { displayNoneInWeb } from '@style/mediaQuery';
+import FlexBox from '@common/FlexBox';
 
 import { MOBILE_BREAKPOINT, NAVIGATOR_PANEL_WIDTH } from '@constants';
 import { CHARGING_SPEED } from '@constants/chargers';
@@ -61,11 +61,11 @@ const ClientStationFilters = () => {
     }));
   };
 
+  const screen = useMediaQueries();
+
   return (
-    <Container left={navigationComponentWidth}>
-      <Box css={displayNoneInWeb}>
-        <StationSearchBar />
-      </Box>
+    <Container left={navigationComponentWidth} basePanel={basePanel}>
+      {screen.get('isMobile') ? <StationSearchBar /> : !basePanel && <StationSearchBar />}
       <FlexBox css={mobileFilterContainerCss}>
         <ClientFilterButton
           onClick={toggleAvailableStation}
@@ -96,18 +96,22 @@ const ClientStationFilters = () => {
   );
 };
 
-const Container = styled.div<{ left: number }>`
+const Container = styled.div<{ left: number; basePanel: Panels['basePanel'] }>`
   position: fixed;
-  top: 14px;
+  top: ${({ basePanel }) => (basePanel ? '16.5px' : '14px')};
   left: ${({ left }) => left}rem;
   z-index: 998;
   padding: 10px;
 
+  display: flex;
+  align-items: center;
+  column-gap: 40px;
+
   @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
     left: 0;
-    display: flex;
-    flex-direction: column;
     gap: 10px;
+    flex-direction: column;
+    width: 100%;
   }
 `;
 
@@ -122,6 +126,8 @@ const ClientFilterButton = styled.button<{ isChecked: boolean }>`
 `;
 
 const mobileFilterContainerCss = css`
+  margin-top: 4px;
+
   @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
     row-gap: 10px;
   }

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

@@ -38,6 +38,7 @@ const SearchResult = (props: SearchResultProps) => {
           <Button
             width="100%"
             noRadius="all"
+            background="transparent"
             onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
           >
             <Text variant="h6" align="left" title={stationName} lineClamp={1}>
@@ -81,6 +82,10 @@ export const searchResultList = css`
 
 export const foundStationList = css`
   padding: 0.8rem 1.2rem;
+
+  &:hover {
+    background: #f5f5f5;
+  }
 `;
 
 export const noSearchResult = css`

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

@@ -9,6 +9,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useExternalValue, useSetExternalState } from '@utils/external-state';
 
 import { getGoogleMapStore } from '@stores/google-maps/googleMapStore';
+import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore';
 import { searchWordStore } from '@stores/searchWordStore';
 import { selectedStationIdStore } from '@stores/selectedStationStore';
 
@@ -18,24 +19,26 @@ import { useDebounce } from '@hooks/useDebounce';
 import Button from '@common/Button';
 import Loader from '@common/Loader';
 
-import StationDetailsWindow from '@ui/StationDetailsWindow';
 import { useNavigationBar } from '@ui/compound/NavigationBar/hooks/useNavigationBar';
 
 import { pillStyle } from '@style';
 
+import { MOBILE_BREAKPOINT } from '@constants';
 import { INITIAL_ZOOM_SIZE } from '@constants/googleMaps';
 import { QUERY_KEY_SEARCHED_STATION, QUERY_KEY_STATIONS } from '@constants/queryKeys';
 
 import type { StationPosition } from '@type/stations';
 
 import SearchResult from './SearchResult';
+import StationSearchWindow from './StationSearchWindow';
 
 const StationSearchBar = () => {
   const [isFocused, setIsFocused] = useState(false);
   const googleMap = useExternalValue(getGoogleMapStore());
   const setSelectedStationId = useSetExternalState(selectedStationIdStore);
 
-  const { openLastPanel } = useNavigationBar();
+  const { basePanel } = useExternalValue(navigationBarPanelStore);
+  const { openBasePanel } = useNavigationBar();
 
   const [inputValue, setInputValue] = useState('');
   const setSearchWord = useSetExternalState(searchWordStore);
@@ -68,7 +71,7 @@ const StationSearchBar = () => {
 
     queryClient.invalidateQueries({ queryKey: [QUERY_KEY_STATIONS] });
     setSelectedStationId(stationId);
-    openLastPanel(<StationDetailsWindow />);
+    !basePanel && openBasePanel(<StationSearchWindow />);
   };
 
   const handleRequestSearchResult = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
@@ -78,7 +81,7 @@ const StationSearchBar = () => {
   };
 
   return (
-    <>
+    <S.Container>
       <S.Form role="search" onSubmit={handleSubmitSearchWord}>
         <S.Search
           type="search"
@@ -107,11 +110,19 @@ const StationSearchBar = () => {
           showStationDetails={showStationDetails}
         />
       )}
-    </>
+    </S.Container>
   );
 };
 
 const S = {
+  Container: styled.div`
+    width: 30rem;
+
+    @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+      width: 100%;
+    }
+  `,
+
   Form: styled.form`
     position: relative;
   `,

frontend/src/stores/layout/navigationBarPanelStore.tsx

@@ -4,7 +4,7 @@ import { store } from '@utils/external-state';
 
 import StationSearchWindow from '@ui/StationSearchWindow';
 
-interface Panels {
+export interface Panels {
   basePanel: ReactElement | null;
   lastPanel: ReactElement | null;
 }