refactor: 디자인을 일부 개선한다 (#596)

* refactor: 스피너 위치 수정 [#595] * refactor: 충전소 목록 디자인 개선 [#595] * fix: 잘못된 css 적용 수정 [#595]
woowacourse-teams · Aug 18, 2023 · 5af3628 · 5af3628
1 parent 446c111
commit 5af3628
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/frontend/src/components/ui/MapController.tsx b/frontend/src/components/ui/MapController.tsx
@@ -7,16 +7,19 @@ import { useExternalValue } from '@utils/external-state';
 import { getGoogleMapStore, googleMapActions } from '@stores/google-maps/googleMapStore';
 
 import { useCurrentPosition } from '@hooks/google-maps/useCurrentPosition';
+import { useStations } from '@hooks/tanstack-query/station-markers/useStations';
 
 import Box from '@common/Box';
 import Button from '@common/Button';
+import Loader from '@common/Loader';
 
 import { MOBILE_BREAKPOINT } from '@constants';
 import { INITIAL_ZOOM_SIZE } from '@constants/googleMaps';
 
 const MapController = () => {
   const position = useCurrentPosition();
   const googleMap = useExternalValue(getGoogleMapStore());
+  const { isFetching } = useStations();
 
   const handleCurrentPositionButton = () => {
     googleMap.panTo({ lat: position.lat, lng: position.lng });
@@ -33,19 +36,25 @@ const MapController = () => {
 
   return (
     <Box css={containerCss}>
-      <Button
-        outlined
-        css={[buttonCss, currentPositionIconCss]}
-        onClick={handleCurrentPositionButton}
-      >
-        <MapPinIcon
-          width={24}
-          fill="#0054ff"
-          stroke="#333"
-          type="button"
-          aria-label="내 위치로 이동"
-        />
-      </Button>
+      {isFetching ? (
+        <Button outlined css={[buttonCss, currentPositionIconCss]}>
+          <Loader css={{ borderBottomColor: 'blue' }} />
+        </Button>
+      ) : (
+        <Button
+          outlined
+          css={[buttonCss, currentPositionIconCss]}
+          onClick={handleCurrentPositionButton}
+        >
+          <MapPinIcon
+            width={24}
+            fill="#0054ff"
+            stroke="#333"
+            type="button"
+            aria-label="내 위치로 이동"
+          />
+        </Button>
+      )}
       <Button
         outlined
         noRadius="bottom"

diff --git a/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx b/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
@@ -54,7 +54,11 @@ const ServerStationFilters = () => {
   };
 
   return (
-    <FlexBox css={[overFlowCss, borderCss, containerCss]} nowrap={true} noRadius={'all'}>
+    <FlexBox
+      css={[overFlowCss, borderCss, containerCss, paddingBottomCss]}
+      nowrap={true}
+      noRadius={'all'}
+    >
       <FlexBox
         width={NAVIGATOR_PANEL_WIDTH}
         height={8}
@@ -129,6 +133,10 @@ export const filterContainerCss = css`
   }
 `;
 
+const paddingBottomCss = css`
+  padding-bottom: 12rem;
+`;
+
 export const overFlowCss = css`
   overflow-y: scroll;
   overflow-x: hidden;

diff --git a/frontend/src/components/ui/StationList/StationList.tsx b/frontend/src/components/ui/StationList/StationList.tsx
@@ -51,6 +51,7 @@ const searchResultList = css`
 
   @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
     width: calc(100vw - 6rem);
+    height: 100vh;
   }
 `;
 

diff --git a/frontend/src/components/ui/StationList/StationListWindow.tsx b/frontend/src/components/ui/StationList/StationListWindow.tsx
@@ -23,7 +23,7 @@ const StationListWindow = () => {
   }
 
   return (
-    <FlexBox css={[containerCss]}>
+    <FlexBox css={[containerCss]} nowrap>
       <Button css={xIconCss} onClick={closeBasePanel}>
         <XMarkIcon width={32} />
       </Button>

diff --git a/frontend/src/components/ui/StationMarkerLoadingSpinner.tsx b/frontend/src/components/ui/StationMarkerLoadingSpinner.tsx
@@ -9,13 +9,13 @@ import Loader from '@common/Loader';
 import { MOBILE_BREAKPOINT } from '@constants';
 
 const StationMarkerLoadingSpinner = () => {
-  const navigationComponentWidth = getNavigationComponentWidth();
-
-  const { isFetching } = useStations();
-
-  if (isFetching) {
-    return <Loader size="10rem" border={6} css={positionCss(navigationComponentWidth)} />;
-  }
+  // const navigationComponentWidth = getNavigationComponentWidth();
+  //
+  // const { isFetching } = useStations();
+  //
+  // if (isFetching) {
+  //   return <Loader size="10rem" border={6} css={positionCss(navigationComponentWidth)} />;
+  // }
 
   return <></>;
 };