Merge remote-tracking branch 'origin/develop' into refactor/914

woowacourse-teams · Nov 9, 2023 · d625ffd · d625ffd
2 parents d7b9e3e + 146c492
commit d625ffd
Show file tree

Hide file tree

Showing 13 changed files with 830 additions and 810 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/common/ListItem/ListItem.stories.tsx b/frontend/src/components/common/ListItem/ListItem.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react';
+import { Box } from 'car-ffeine-design-system';
 
 import List from '../List';
 import Text from '../Text';
@@ -43,7 +44,7 @@ export const Default = (args: ListItemProps) => {
 
 export const Menu = () => {
   return (
-    <div style={{ width: '150px' }}>
+    <Box css={{ width: '150px' }}>
       <List border>
         <ListItem>
           <Text variant="body">메뉴1</Text>
@@ -58,6 +59,6 @@ export const Menu = () => {
           <Text variant="body">로그아웃</Text>
         </ListItem>
       </List>
-    </div>
+    </Box>
   );
 };
diff --git a/frontend/src/components/common/Tab/Menu.tsx b/frontend/src/components/common/Tab/Menu.tsx
@@ -37,7 +37,7 @@ const Menu = ({ label, icon, index, iconPosition = 'left', onClick, ...attribute
       role="tab"
       id={`${id}-tab-${index}`}
       aria-controls={`${id}-panel-${index}`}
-      aria-selected={activeTab === `menu-${index}` ? true : false}
+      aria-selected={activeTab === `menu-${index}`}
       className={activeTab === `menu-${index}` ? 'active' : ''}
       title={label}
       icon={icon}

diff --git a/...nts/google-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarker.tsx b/...nts/google-maps/marker/components/MaxDeltaAreaMarkerContainer/components/RegionMarker.tsx
@@ -16,7 +16,7 @@ const RegionMarker = ({ count, regionName }: RegionMarkerProps) => {
       alignItems="center"
       gap={1}
       p={1}
-      style={{
+      css={{
         background: '#fff',
         borderRadius: '8px',
         border: '1px solid #2a6cd8',

diff --git a/frontend/src/components/ui/Navigator/NavigationBar/BasePanel.tsx b/frontend/src/components/ui/Navigator/NavigationBar/BasePanel.tsx
@@ -1,30 +1,25 @@
+import { Box } from 'car-ffeine-design-system';
 import { css } from 'styled-components';
 
 import type { ReactElement } from 'react';
 
-import FlexBox from '@common/FlexBox';
-
 import { MOBILE_BREAKPOINT } from '@constants';
 
 interface Props {
   component: ReactElement | null;
 }
 
 const BasePanel = ({ component }: Props) => {
-  return (
-    <FlexBox width="fit-content" css={containerCss}>
-      {component !== null && component}
-    </FlexBox>
-  );
+  return <Box css={containerCss}>{component !== null && component}</Box>;
 };
 
 const containerCss = css`
-  position: relative;
   margin-left: 7rem;
 
   @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
     margin-left: 0;
     position: absolute;
+    z-index: 99;
   }
 `;
 

diff --git a/frontend/src/components/ui/Navigator/NavigationBar/LastPanel.tsx b/frontend/src/components/ui/Navigator/NavigationBar/LastPanel.tsx
@@ -1,23 +1,17 @@
-import { css } from 'styled-components';
+import { Box } from 'car-ffeine-design-system';
 
 import type { ReactElement } from 'react';
 
-import FlexBox from '@common/FlexBox';
-
 interface Props {
   component: ReactElement | null;
 }
 
 const LastPanel = ({ component }: Props) => {
   return (
-    <FlexBox width="fit-content" css={containerCss}>
+    <Box position="relative" css={{ zIndex: 99 }}>
       {component !== null && <>{component}</>}
-    </FlexBox>
+    </Box>
   );
 };
 
-const containerCss = css`
-  position: relative;
-`;
-
 export default LastPanel;
diff --git a/frontend/src/components/ui/Navigator/NavigationBar/NavigationBar.stories.tsx b/frontend/src/components/ui/Navigator/NavigationBar/NavigationBar.stories.tsx
@@ -1,5 +1,6 @@
 import { ChevronLeftIcon } from '@heroicons/react/24/solid';
 import type { Meta } from '@storybook/react';
+import { FlexBox } from 'car-ffeine-design-system';
 import { styled } from 'styled-components';
 
 import type { ReactElement } from 'react';
@@ -40,14 +41,14 @@ export const Default = () => {
           <ChevronLeftIcon width="2.4rem" stroke="#9c9fa7" />
         </Button>
       </NavigationBar>
-      <div style={{ display: 'flex', flexDirection: 'column', position: 'fixed', right: 0 }}>
+      <FlexBox direction="column" position="fixed" right={0}>
         <ButtonNext onClick={() => setBasePanel(<BaseContainerBlue />)}>
           openBlueBasePanel
         </ButtonNext>
         <ButtonNext onClick={() => setBasePanel(<BaseContainerRed />)}>openRedBasePanel</ButtonNext>
         <ButtonNext onClick={() => setBasePanel(<BaseContainer />)}>openWhiteBasePanel</ButtonNext>
         <ButtonNext onClick={() => setLastPanel(<LastContainer />)}>openLastPanel</ButtonNext>
-      </div>
+      </FlexBox>
     </>
   );
 };

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/StationDetailsWindow/congestion/CongestionStatistics.tsx b/frontend/src/components/ui/StationDetailsWindow/congestion/CongestionStatistics.tsx
@@ -77,8 +77,8 @@ const CongestionStatistics = ({ stationId }: CongestionStatisticsProps) => {
         {isError ? (
           <Error
             title="앗"
-            message="데이터를 불러오는데 실패했어요."
-            subMessage="잠시 후 다시 시도해주세요."
+            message="데이터를 불러오는데 실패했어요"
+            subMessage="잠시 후 다시 시도해주세요"
             handleRetry={handleRetry}
             minHeight={40.4}
           />

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>
   );

diff --git a/frontend/src/components/ui/StationListWindow/StationList.tsx b/frontend/src/components/ui/StationListWindow/StationList.tsx
@@ -7,6 +7,8 @@ import { useStationMarkersQuery } from '@marker/components/SmallMediumDeltaAreaM
 import List from '@common/List';
 import Text from '@common/Text';
 
+import StationSummaryCard from '@ui/StationListWindow/StationSummaryCard';
+
 import { MOBILE_BREAKPOINT } from '@constants';
 
 import StationSummaryCardList from './StationSummaryCardList';
@@ -64,7 +66,7 @@ const StationList = () => {
 
     return (
       <>
-        <StationSummaryCardList cachedStationSummaries={cachedStationSummaries} data={data} />
+        <StationSummaryCardList data={data} />
         {isFetchingNextPage && <StationListSkeletons />}
         {canFetchNextPage && <div ref={loadMoreElementRef} />}
 
@@ -81,7 +83,14 @@ const StationList = () => {
     );
   };
 
-  return <List css={stationListCss}>{renderStationSummaryCards()}</List>;
+  return (
+    <List css={stationListCss}>
+      {cachedStationSummaries.map((stationSummary) => (
+        <StationSummaryCard key={stationSummary.stationId} station={stationSummary} />
+      ))}
+      {renderStationSummaryCards()}
+    </List>
+  );
 };
 
 export const stationListCss = css`

diff --git a/frontend/src/components/ui/StationListWindow/StationSummaryCardList.tsx b/frontend/src/components/ui/StationListWindow/StationSummaryCardList.tsx
@@ -2,22 +2,16 @@ import { Fragment } from 'react';
 
 import type { InfiniteData } from '@tanstack/react-query';
 
-import type { StationSummary } from '@type';
-
 import StationSummaryCard from './StationSummaryCard';
 import type { StationSummaryResponse } from './hooks/useInfiniteStationSummaries';
 
 export interface StationSummaryCardListProps {
-  cachedStationSummaries: StationSummary[];
   data: InfiniteData<StationSummaryResponse>;
 }
 
-const StationSummaryCardList = ({ cachedStationSummaries, data }: StationSummaryCardListProps) => {
+const StationSummaryCardList = ({ data }: StationSummaryCardListProps) => {
   return (
     <>
-      {cachedStationSummaries.map((stationSummary) => (
-        <StationSummaryCard key={stationSummary.stationId} station={stationSummary} />
-      ))}
       {data.pages.map((page) => (
         <Fragment key={page.nextPage}>
           {page.stations.map((stationSummary) => (