feat: 반응형 NavigationBar 컴포넌트를 추가한다 (#585)

* refactor: 모바일, 웹 용 네비게이터 컴포넌트 분리 [#395] * refactor: 모바일 breakpoint에 따라 네비게이터 컴포넌트를 다르게 렌더링하도록 수정 [#395] * refactor: 모바일 네비게이션 바 레이아웃 적용 [#395] * refactor: 프로필 메뉴 웹, 모바일에서 위치 다르게 보이도록 수정 [#395] * refactor: MapController 컴포넌트 위치 수정 [#395] * design: 검색창, 필터 모바일 레이아웃 적용 [#395] * design: 클라이언트 필터링 레이아웃 수정 [#395] * design: 충전소 세부 정보창 모바일 레이아웃 추가 [#395] * design: 필터링 옵션 모바일 레이아웃 추가 [#395] * design: 필터링 옵션 스켈레톤 모바일 레이아웃 추가 [#395] * fix: 런타임 에러 수정 [#395] * refactor: 네비게이션 컴포넌트 분리 취소 [#395] * fix: 충전소 검색창에 생기던 밑줄 제거 [#395] * design: 충전소 리스트 모바일 레이아웃 추가 [#395] * fix: 네비게이션 바 간격 수정 [#395] * chore: 스토리북 빌드 폴더 gitignore 추가 [#395] * fix: 스토리북 빌드 오류 수정 [#395]
woowacourse-teams · Aug 17, 2023 · 9b0570e · 9b0570e
1 parent 706dfe1
commit 9b0570e
Show file tree

Hide file tree

Showing 29 changed files with 336 additions and 84 deletions.
diff --git a/frontend/.gitignore b/frontend/.gitignore
@@ -3,3 +3,4 @@
 .env
 .husky
 yarn-error.log
+/storybook-static/
diff --git a/frontend/src/components/common/Box/Box.tsx b/frontend/src/components/common/Box/Box.tsx
@@ -1,7 +1,8 @@
 import type { CSSProp } from 'styled-components';
 import styled from 'styled-components';
 
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { Ref } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
 
 import type { SpacingProps } from '@common/systems';
 import { spacing } from '@common/systems';
@@ -50,8 +51,12 @@ const BoxWrapper = styled.div<BoxProps>`
   ${({ css }) => css};
 `;
 
-const Box = ({ children, ...props }: BoxProps) => {
-  return <BoxWrapper {...props}>{children}</BoxWrapper>;
+const Box = ({ children, ...props }: BoxProps, ref: Ref<HTMLDivElement>) => {
+  return (
+    <BoxWrapper ref={ref} {...props}>
+      {children}
+    </BoxWrapper>
+  );
 };
 
-export default Box;
+export default forwardRef(Box);
diff --git a/frontend/src/components/google-maps/map/CarFfeineMap.tsx b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
@@ -20,7 +20,7 @@ import ClientStationFilters from '@ui/ClientStationFilters';
 import MapController from '@ui/MapController';
 import ModalContainer from '@ui/ModalContainer';
 import ModalSecondaryContainer from '@ui/ModalSecondaryContainer';
-import NavigationBar from '@ui/NavigationBar';
+import Navigator from '@ui/Navigator';
 import StationMarkerLoadingSpinner from '@ui/StationMarkerLoadingSpinner';
 
 import { INITIAL_ZOOM_SIZE } from '@constants/googleMaps';
@@ -35,7 +35,7 @@ const CarFfeineMap = () => {
       <ToastContainer />
       <ModalContainer />
       <ModalSecondaryContainer />
-      <NavigationBar />
+      <Navigator />
       <ClientStationFilters />
       <MapController />
       <StationMarkersContainer />

diff --git a/frontend/src/components/ui/ClientStationFilters.tsx b/frontend/src/components/ui/ClientStationFilters.tsx
@@ -5,9 +5,15 @@ import { useExternalState, useExternalValue } from '@utils/external-state';
 import { navigationBarPanelStore } from '@stores/layout/navigationBarPanelStore';
 import { clientStationFiltersStore } from '@stores/station-filters/clientStationFiltersStore';
 
-import { NAVIGATOR_PANEL_WIDTH } from '@constants';
+import FlexBox from '@common/FlexBox';
+
+import { displayNoneInWeb } from '@style/mediaQuery';
+
+import { MOBILE_BREAKPOINT, NAVIGATOR_PANEL_WIDTH } from '@constants';
 import { CHARGING_SPEED } from '@constants/chargers';
 
+import StationSearchBar from './StationSearchWindow/StationSearchBar';
+
 const ClientStationFilters = () => {
   const [
     {
@@ -56,27 +62,35 @@ const ClientStationFilters = () => {
 
   return (
     <Container left={navigationComponentWidth}>
-      <ClientFilterButton
-        onClick={toggleAvailableStation}
-        isChecked={isAvailableStationFilterSelected}
-      >
-        현재 사용 가능
-      </ClientFilterButton>
-      <ClientFilterButton
-        onClick={toggleParkingFreeStation}
-        isChecked={isParkingFreeStationFilterSelected}
-      >
-        주차 무료
-      </ClientFilterButton>
-      <ClientFilterButton
-        onClick={toggleFastChargeStation}
-        isChecked={isFastChargeStationFilterSelected}
-      >
-        {CHARGING_SPEED.quick}
-      </ClientFilterButton>
-      <ClientFilterButton onClick={togglePrivateStation} isChecked={isPrivateStationFilterSelected}>
-        외부인 개방
-      </ClientFilterButton>
+      <FlexBox css={displayNoneInWeb}>
+        <StationSearchBar />
+      </FlexBox>
+      <FlexBox>
+        <ClientFilterButton
+          onClick={toggleAvailableStation}
+          isChecked={isAvailableStationFilterSelected}
+        >
+          현재 사용 가능
+        </ClientFilterButton>
+        <ClientFilterButton
+          onClick={toggleParkingFreeStation}
+          isChecked={isParkingFreeStationFilterSelected}
+        >
+          주차 무료
+        </ClientFilterButton>
+        <ClientFilterButton
+          onClick={toggleFastChargeStation}
+          isChecked={isFastChargeStationFilterSelected}
+        >
+          {CHARGING_SPEED.quick}
+        </ClientFilterButton>
+        <ClientFilterButton
+          onClick={togglePrivateStation}
+          isChecked={isPrivateStationFilterSelected}
+        >
+          외부인 개방
+        </ClientFilterButton>
+      </FlexBox>
     </Container>
   );
 };
@@ -89,7 +103,13 @@ const Container = styled.div<{ left: number }>`
   padding: 10px;
 
   display: flex;
+  flex-direction: row;
   gap: 10px;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    flex-direction: column;
+    left: 0;
+  }
 `;
 
 const ClientFilterButton = styled.button<{ isChecked: boolean }>`
@@ -102,4 +122,13 @@ const ClientFilterButton = styled.button<{ isChecked: boolean }>`
   border-radius: 16px;
 `;
 
+// const mobileFilterContainerCss = css`
+//   gap: 1rem;
+
+//   @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+//     justify-content: space-between;
+//     width: calc(100vw - 2rem);
+//   }
+// `;
+
 export default ClientStationFilters;
diff --git a/frontend/src/components/ui/DevelopmentServerControlButton.tsx b/frontend/src/components/ui/DevelopmentServerControlButton.tsx
@@ -4,6 +4,8 @@ import { serverActions, serverStore } from '@stores/config/serverStore';
 
 import ButtonNext from '@common/ButtonNext';
 
+import { displayNoneInMobile } from '@style/mediaQuery';
+
 const DevelopmentServerControlButton = () => {
   const currentServer = useExternalValue(serverStore);
 
@@ -17,6 +19,7 @@ const DevelopmentServerControlButton = () => {
       color={currentServer === 'localhost' ? 'secondary' : 'success'}
       size="xs"
       onClick={handleClickDevelopmentServerControlButton}
+      css={displayNoneInMobile}
     >
       서버
       <br />

diff --git a/frontend/src/components/ui/MapController.tsx b/frontend/src/components/ui/MapController.tsx
@@ -11,6 +11,7 @@ import { useCurrentPosition } from '@hooks/google-maps/useCurrentPosition';
 import Box from '@common/Box';
 import Button from '@common/Button';
 
+import { MOBILE_BREAKPOINT } from '@constants';
 import { INITIAL_ZOOM_SIZE } from '@constants/googleMaps';
 
 const MapController = () => {
@@ -31,7 +32,7 @@ const MapController = () => {
   };
 
   return (
-    <Box position="fixed" bottom={5} right={2} css={{ zIndex: 999 }}>
+    <Box css={containerCss}>
       <Button
         outlined
         css={[buttonCss, currentPositionIconCss]}
@@ -69,6 +70,19 @@ const MapController = () => {
   );
 };
 
+const containerCss = css`
+  z-index: 99;
+
+  position: fixed;
+  bottom: 3.2rem;
+  right: 0.8rem;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    bottom: 8rem;
+    right: 0.8rem;
+  }
+`;
+
 const buttonCss = css`
   display: flex;
   padding: 8px;

diff --git a/frontend/src/components/ui/MswControlButton.tsx b/frontend/src/components/ui/MswControlButton.tsx
@@ -1,5 +1,3 @@
-import { useState } from 'react';
-
 import { useExternalState, useSetExternalState } from '@utils/external-state';
 import { getAPIEndPoint } from '@utils/login';
 
@@ -11,6 +9,8 @@ import Text from '@common/Text';
 
 import DevelopmentServerControlButton from '@ui/DevelopmentServerControlButton';
 
+import { displayNoneInMobile } from '@style/mediaQuery';
+
 const MswControlButton = () => {
   const [isMswMode, setIsMswMode] = useExternalState(mswModeStore);
   const setDevelopmentServer = useSetExternalState(serverStore);
@@ -29,6 +29,7 @@ const MswControlButton = () => {
       <ButtonNext
         variant="text"
         color={isMswMode ? 'primary' : 'error'}
+        css={displayNoneInMobile}
         onClick={() => switchMswMode()}
       >
         <>

diff --git a/frontend/src/components/ui/NavigationBar/index.ts b/frontend/src/components/ui/NavigationBar/index.ts
diff --git a/...onents/ui/NavigationBar/NavigationBar.tsx → ...src/components/ui/Navigator/Navigator.tsx b/...onents/ui/NavigationBar/NavigationBar.tsx → ...src/components/ui/Navigator/Navigator.tsx
diff --git a/frontend/src/components/ui/Navigator/index.tsx b/frontend/src/components/ui/Navigator/index.tsx
@@ -0,0 +1,3 @@
+import Navigator from './Navigator';
+
+export default Navigator;
diff --git a/frontend/src/components/ui/ServerStationFilters/FilterOption.tsx b/frontend/src/components/ui/ServerStationFilters/FilterOption.tsx
@@ -4,6 +4,8 @@ import ButtonNext from '@common/ButtonNext';
 import FlexBox from '@common/FlexBox';
 import Text from '@common/Text';
 
+import { MOBILE_BREAKPOINT } from '@constants';
+
 import type { Capacity, ConnectorTypeName } from '@type/chargers';
 import type { CapaCityBigDecimal, CompanyKey, ConnectorTypeKey } from '@type/serverStationFilter';
 import type { CompanyName } from '@type/stations';
@@ -26,13 +28,7 @@ const FilterSection = ({
   getIsFilterSelected,
 }: FilterSectionProps) => {
   return (
-    <FlexBox
-      width={30}
-      direction={'column'}
-      css={css`
-        margin-bottom: 4.8rem;
-      `}
-    >
+    <FlexBox width={30} direction="column" mb={6} css={containerCss}>
       <FlexBox justifyContent="between">
         <Text variant={'h6'} mb={2}>
           {title}
@@ -55,4 +51,11 @@ const FilterSection = ({
     </FlexBox>
   );
 };
+
+const containerCss = css`
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    width: calc(100vw - 6rem);
+  }
+`;
+
 export default FilterSection;
diff --git a/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx b/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeftIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { ArrowPathIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
 import { memberTokenStore } from '@stores/login/memberTokenStore';
@@ -14,7 +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 { MOBILE_BREAKPOINT, NAVIGATOR_PANEL_WIDTH } from '@constants';
 import { CONNECTOR_TYPES, COMPANIES } from '@constants/chargers';
 
 import type { Capacity } from '@type';
@@ -54,25 +54,16 @@ const ServerStationFilters = () => {
   };
 
   return (
-    <FlexBox
-      width={NAVIGATOR_PANEL_WIDTH}
-      height="100vh"
-      alignItems="center"
-      direction="column"
-      background="white"
-      css={[overFlowCss, borderCss]}
-      nowrap
-      noRadius="all"
-    >
+    <FlexBox css={[overFlowCss, borderCss, containerCss]} nowrap={true} noRadius={'all'}>
       <FlexBox
         width={NAVIGATOR_PANEL_WIDTH}
         height={8}
         justifyContent="between"
         alignItems="center"
-        css={filterHeaderCss}
+        css={[filterHeaderCss, filterContainerCss]}
       >
         <ButtonNext onClick={closeBasePanel} noTheme aria-label="필터 선택창 닫기">
-          <ArrowLeftIcon width="2.8rem" stroke="#333" />
+          <XMarkIcon width="2.8rem" stroke="#333" />
         </ButtonNext>
         <Text variant="h5">필터</Text>
         <ButtonNext onClick={resetAllFilters} noTheme aria-label="모든 필터 지우기 버튼">
@@ -113,6 +104,31 @@ const ServerStationFilters = () => {
   );
 };
 
+export const containerCss = css`
+  width: ${NAVIGATOR_PANEL_WIDTH}rem;
+  height: 100vh;
+  align-items: center;
+  flex-direction: column;
+  background-color: #fff;
+
+  z-index: 9999;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    width: 100vw;
+  }
+`;
+
+export const filterContainerCss = css`
+  width: ${NAVIGATOR_PANEL_WIDTH};
+  height: 8rem;
+  justify-content: space-between;
+  align-items: center;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    width: calc(100vw - 2rem);
+  }
+`;
+
 export const overFlowCss = css`
   overflow-y: scroll;
   overflow-x: hidden;

diff --git a/frontend/src/components/ui/ServerStationFilters/ServerStationFiltersSkeleton.tsx b/frontend/src/components/ui/ServerStationFilters/ServerStationFiltersSkeleton.tsx
@@ -4,6 +4,7 @@ import Skeleton from '@common/Skeleton';
 import FilterOptionSkeleton from '@ui/ServerStationFilters/FilterOptionSkeleton';
 import {
   borderCss,
+  containerCss,
   filterHeaderCss,
   overFlowCss,
 } from '@ui/ServerStationFilters/ServerStationFilters';
@@ -16,7 +17,7 @@ const ServerStationFiltersSkeleton = () => {
       alignItems={'center'}
       direction={'column'}
       background={'white'}
-      css={[overFlowCss, borderCss]}
+      css={[overFlowCss, borderCss, containerCss]}
       nowrap={true}
       noRadius={'all'}
     >