design: 충전소 간단 정보창 상세보기 버튼 모바일에서만 보이도록 개선한다 (#748)

* design: 충전소 간단 정보창 상세보기 버튼 모바일에서만 보이도록 개선 - 충전소 간단 정보창 버튼 컴포넌트 분리 [#747] * test: `autodocs` 삭제 [#747]
woowacourse-teams · Sep 15, 2023 · 4819297 · 4819297
1 parent 0ebdc55
commit 4819297
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 35 deletions.
diff --git a/frontend/src/components/common/ButtonNext/ButtonNext.tsx b/frontend/src/components/common/ButtonNext/ButtonNext.tsx
@@ -34,8 +34,6 @@ const ButtonNext = ({ children, noTheme, ...props }: ButtonNextProps) => {
 
 const S = {
   Button: styled.button<ButtonNextProps>`
-    margin: 1px;
-
     border-radius: 6px;
     ${({ pill }) => pill && 'border-radius: 20px;'}
 
@@ -45,7 +43,7 @@ const S = {
       switch (variant) {
         case 'text':
           return css`
-            color: ${disabled ? '#a0a0a0' : color === 'light' ? '#000000' : getColor(color)};
+            color: ${disabled ? '#a0a0a0' : color === 'light' ? '#000' : getColor(color)};
             background: transparent;
             border: none;
 
@@ -55,19 +53,19 @@ const S = {
           `;
         case 'outlined':
           return css`
-            color: ${disabled ? '#a0a0a0' : color === 'light' ? '#000' : getColor(color)};
+            color: ${disabled ? '#a0a0a0' : color === 'light' ? '#333' : getColor(color)};
             background: transparent;
             border: 1.5px solid ${disabled ? '#a0a0a0' : getColor(color)};
 
             &:hover {
-              color: ${disabled ? '#a0a0a0' : '#fff'};
+              color: ${disabled ? '#a0a0a0' : color === 'light' ? '#333' : '#fff'};
               background: ${disabled ? 'transparent' : getHoverColor(color)};
             }
           `;
         case 'contained':
         default:
           return css`
-            color: ${disabled ? '#a0a0a0' : color === 'light' ? '#000000' : '#ffffff'};
+            color: ${disabled ? '#a0a0a0' : color === 'light' ? '#000' : '#ffffff'};
             background: ${disabled ? '#e0e0e0' : getColor(color)};
             border: 1.5px solid ${disabled ? '#e0e0e0' : getColor(color)};
 

diff --git a/...rc/components/ui/StationSummaryWindow.tsx → ...ionSummaryWindow/StationSummaryWindow.tsx b/...rc/components/ui/StationSummaryWindow.tsx → ...ionSummaryWindow/StationSummaryWindow.tsx
@@ -10,21 +10,21 @@ import { selectedStationIdStore } from '@stores/selectedStationStore';
 import { useFetchStationSummary } from '@hooks/fetch/useFetchStationSummary';
 
 import Button from '@common/Button';
-import ButtonNext from '@common/ButtonNext';
 import FlexBox from '@common/FlexBox';
 import ListItem from '@common/ListItem';
 import Loader from '@common/Loader';
 import Text from '@common/Text';
 
-import ChargingSpeedIcon from './ChargingSpeedIcon';
-import StationDetailsWindow from './StationDetailsWindow';
-import { useNavigationBar } from './compound/NavigationBar/hooks/useNavigationBar';
+import ChargingSpeedIcon from '../ChargingSpeedIcon';
+import StationDetailsWindow from '../StationDetailsWindow';
+import { useNavigationBar } from '../compound/NavigationBar/hooks/useNavigationBar';
+import SummaryButtons from './SummaryButtons';
 
-interface Props {
+export interface StationSummaryProps {
   stationId: string;
 }
 
-const StationSummaryWindow = ({ stationId }: Props) => {
+const StationSummaryWindow = ({ stationId }: StationSummaryProps) => {
   const infoWindowInstance = useExternalValue(getStationSummaryWindowStore());
   const setSelectedStationId = useSetExternalState(selectedStationIdStore);
   const { openLastPanel } = useNavigationBar();
@@ -79,40 +79,23 @@ const StationSummaryWindow = ({ stationId }: Props) => {
           {quickChargerCount !== 0 && <ChargingSpeedIcon />}
         </FlexBox>
       </Button>
-      <FlexBox direction="row" justifyContent="between" mb={1.8}>
-        <ButtonNext
-          variant="outlined"
-          size="xs"
-          color="secondary"
-          css={{ width: '28%' }}
-          onClick={handleCloseStationSummary}
-        >
-          닫기
-        </ButtonNext>
-        <ButtonNext
-          variant="contained"
-          size="xs"
-          color="dark"
-          css={{ width: '68%' }}
-          onClick={handleOpenStationDetail}
-        >
-          상세보기
-        </ButtonNext>
-      </FlexBox>
+      <SummaryButtons
+        handleCloseStationSummary={handleCloseStationSummary}
+        handleOpenStationDetail={handleOpenStationDetail}
+      />
     </ListItem>
   );
 };
 
 const padding = css`
-  padding: 1.2rem;
+  padding: 2.4rem 2.4rem 1.8rem;
 `;
 
 const companyNameText = css`
   font-size: 1.3rem;
 `;
 
 const foundStationButton = css`
-  padding: 1.2rem 1.2rem 1.4rem;
   box-shadow: none;
 `;
 

diff --git a/frontend/src/components/ui/StationSummaryWindow/SummaryButtons.stories.tsx b/frontend/src/components/ui/StationSummaryWindow/SummaryButtons.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta } from '@storybook/react';
+import styled from 'styled-components';
+
+import type { SummaryButtonsProps } from './SummaryButtons';
+import SummaryButtons from './SummaryButtons';
+
+const meta = {
+  title: 'UI/StationSummaryWindow/Buttons',
+  component: SummaryButtons,
+  args: {
+    handleCloseStationSummary: () => {
+      alert('충전소 간단 정보창이 닫혔습니다.');
+    },
+    handleOpenStationDetail: () => {
+      alert('충전소 상세 정보창이 열렸습니다.');
+    },
+  },
+  argTypes: {
+    handleCloseStationSummary: {
+      description: '충전소 간단 정보창을 닫을 수 있습니다.',
+    },
+    handleOpenStationDetail: {
+      description: '충전소 상세 정보창을 열 수 있습니다. 모바일에서만 보이는 버튼입니다.',
+    },
+  },
+} satisfies Meta<typeof SummaryButtons>;
+
+export default meta;
+
+export const Default = (args: SummaryButtonsProps) => {
+  return (
+    <Container>
+      <SummaryButtons {...args} />
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 32rem;
+`;
diff --git a/frontend/src/components/ui/StationSummaryWindow/SummaryButtons.tsx b/frontend/src/components/ui/StationSummaryWindow/SummaryButtons.tsx
@@ -0,0 +1,66 @@
+import { css } from 'styled-components';
+
+import type { MouseEvent } from 'react';
+
+import useMediaQueries from '@hooks/useMediaQueries';
+
+import ButtonNext from '@common/ButtonNext';
+import FlexBox from '@common/FlexBox';
+
+import { MOBILE_BREAKPOINT } from '@constants';
+
+export interface SummaryButtonsProps {
+  handleCloseStationSummary: (event: MouseEvent<HTMLButtonElement>) => void;
+  handleOpenStationDetail: () => void;
+}
+
+const SummaryButtons = ({
+  handleCloseStationSummary,
+  handleOpenStationDetail,
+}: SummaryButtonsProps) => {
+  const screen = useMediaQueries();
+
+  return (
+    <FlexBox
+      nowrap
+      direction="row"
+      justifyContent="between"
+      mt={2.5}
+      mb={screen.get('isMobile') ? 1 : 0}
+    >
+      <ButtonNext
+        variant="outlined"
+        size="xs"
+        color="secondary"
+        css={closeButtonCss}
+        onClick={handleCloseStationSummary}
+      >
+        닫기
+      </ButtonNext>
+      {screen.get('isMobile') && (
+        <ButtonNext
+          variant="contained"
+          size="xs"
+          color="dark"
+          css={{ width: '68%' }}
+          onClick={handleOpenStationDetail}
+        >
+          상세보기
+        </ButtonNext>
+      )}
+    </FlexBox>
+  );
+};
+
+const closeButtonCss = css`
+  width: 20%;
+  margin-left: auto;
+  border-color: #4d5053bf;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    width: 28%;
+    margin-left: 0;
+  }
+`;
+
+export default SummaryButtons;
diff --git a/frontend/src/components/ui/StationSummaryWindow/index.tsx b/frontend/src/components/ui/StationSummaryWindow/index.tsx
@@ -0,0 +1,3 @@
+import StationSummaryWindow from './StationSummaryWindow';
+
+export default StationSummaryWindow;
diff --git a/frontend/src/style/index.ts b/frontend/src/style/index.ts
@@ -66,7 +66,7 @@ export const getHoverColor = (color?: Color) => {
     case 'info':
       return '#0da8d6';
     case 'light':
-      return '#e2e6ea';
+      return '#f8f9fa';
     case 'disable':
       return '#9a9a9a';
     case 'dark':