refactor: 충전소 검색창에 임의로 디자인된 주변 충전소 목록을 추가한다 (#313)

* design: 아코디언 버튼 디자인 변경 [#312] * refactor: 검색창에 주변 충전소 목록 추가 [#312] * design: 버튼 디자인 수정 [#312] * refactor: 필요없는 코드 제거 [#312]
woowacourse-teams · Aug 2, 2023 · b2e17df · b2e17df
1 parent f837efb
commit b2e17df
Show file tree

Hide file tree

Showing 12 changed files with 183 additions and 97 deletions.
diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
@@ -84,12 +84,12 @@ const S = {
 const labelButtonStyle = css`
   position: absolute;
   top: 1.2rem;
-  right: -3.4rem;
+  right: -3.37rem;
   height: 6.2rem;
   padding: 0 0.6rem 0 0.2rem;
   background: #fcfcfc;
   border: 1.5px solid #e1e4eb;
-  border-left: none;
+  border-left: 0.2px solid #e1e4eb;
 
   ${borderRadius('left')}
 `;

diff --git a/frontend/src/components/ui/Accordion/BasePanel.tsx b/frontend/src/components/ui/Accordion/BasePanel.tsx
@@ -1,11 +1,11 @@
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
 import type { ReactNode } from 'react';
 import { useContext } from 'react';
 
 import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
-import Text from '@common/Text';
 
 import type { BasePanelType } from '.';
 import { AccordionContext } from '.';
@@ -25,8 +25,8 @@ const BasePanel = ({ render }: Props) => {
     <FlexBox width="fit-content" css={containerCss}>
       {isBasePanelOpen && render(basePanelType)}
       {canViewCloseButton && (
-        <Button css={closeAllPanelButtonCss} onClick={handleCloseAllPanel}>
-          <Text>{'<'}</Text>
+        <Button variant="label" aria-label="검색창 닫기" onClick={handleCloseAllPanel}>
+          <ChevronLeftIcon width="2.4rem" stroke="#9c9fa7" />
         </Button>
       )}
     </FlexBox>
@@ -38,20 +38,4 @@ const containerCss = css`
   margin-left: 7rem;
 `;
 
-export const closeAllPanelButtonCss = css`
-  width: 2rem;
-  height: 3rem;
-
-  border: 1px solid lightgrey;
-  border-left: 0;
-  border-radius: 0;
-
-  position: absolute;
-  top: 50%;
-  right: -2rem;
-
-  background-color: white;
-  color: black;
-`;
-
 export default BasePanel;
diff --git a/frontend/src/components/ui/Accordion/LastPanel.tsx b/frontend/src/components/ui/Accordion/LastPanel.tsx
@@ -1,34 +1,30 @@
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
 import type { ReactNode } from 'react';
 import { useContext } from 'react';
 
 import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
-import Text from '@common/Text';
 
 import { AccordionContext } from '.';
-import { closeAllPanelButtonCss } from './BasePanel';
 import { useAccordionAction } from './hooks/useAccordionAction';
 
 interface Props {
   render: () => ReactNode;
 }
 
 const LastPanel = ({ render }: Props) => {
-  const { handleCloseAllPanel, handleCloseLastPanel } = useAccordionAction();
+  const { handleCloseLastPanel } = useAccordionAction();
   const { isLastPanelOpen, isBasePanelOpen } = useContext(AccordionContext);
 
   return (
     <FlexBox width="fit-content" css={containerCss}>
       {isLastPanelOpen && isBasePanelOpen && (
         <>
           {render()}
-          <Button css={closeAllPanelButtonCss} onClick={handleCloseAllPanel}>
-            <Text>{'<'}</Text>
-          </Button>
-          <Button css={closeLastPanelButtonCss} onClick={handleCloseLastPanel}>
-            <Text>{'X'}</Text>
+          <Button variant="label" aria-label="검색창 닫기" onClick={handleCloseLastPanel}>
+            <ChevronLeftIcon width="2.4rem" stroke="#9c9fa7" />
           </Button>
         </>
       )}
@@ -40,20 +36,4 @@ const containerCss = css`
   position: relative;
 `;
 
-const closeLastPanelButtonCss = css`
-  width: 3rem;
-  height: 3rem;
-
-  border: 1px solid lightgrey;
-  border-left: 0;
-  border-radius: 0;
-
-  position: absolute;
-  top: 0;
-  right: -3rem;
-
-  background-color: white;
-  color: black;
-`;
-
 export default LastPanel;
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -8,7 +8,6 @@ import Alert from '@common/Alert';
 import Box from '@common/Box';
 import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
-import Text from '@common/Text';
 
 import ChargerCard from '@ui/DetailedStationInfo/ChargerCard';
 import ChargerReportConfirmation from '@ui/DetailedStationInfo/ChargerReportConfirmation';
@@ -78,7 +77,8 @@ const containerCss = css`
   height: 100vh;
   background-color: white;
   box-shadow: 1px 1px 2px gray;
-
+  border-left: 0.5px solid #e1e4eb;
+  border-right: 0.5px solid #e1e4eb;
   overflow: scroll;
 `;
 

diff --git a/frontend/src/components/ui/Navigator/Navigator.tsx b/frontend/src/components/ui/Navigator/Navigator.tsx
@@ -2,7 +2,7 @@ import type { BasePanelType } from '@ui/Accordion';
 import Accordion from '@ui/Accordion';
 import DetailedStationInfo from '@ui/DetailedStationInfo';
 import ServerStationFilters from '@ui/ServerStationFilters';
-import StationList from '@ui/StationList/StationList';
+import StationListWindow from '@ui/StationList/StationListWindow';
 import StationSearchWindow from '@ui/StationSearchWindow';
 
 const Navigator = () => {
@@ -13,7 +13,7 @@ const Navigator = () => {
       case 'serverStationFilters':
         return <ServerStationFilters />;
       case 'stationList':
-        return <StationList />;
+        return <StationListWindow />;
     }
   };
 

diff --git a/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx b/frontend/src/components/ui/ServerStationFilters/ServerStationFilters.tsx
@@ -27,7 +27,7 @@ const overFlowCss = css`
 `;
 
 const borderCss = css`
-  border-right: 0.1rem solid \#dddddd;
+  outline: 1.5px solid #e1e4eb;
 `;
 
 const buttonCss = css`

diff --git a/frontend/src/components/ui/StationList/StationList.tsx b/frontend/src/components/ui/StationList/StationList.tsx
@@ -10,14 +10,16 @@ import { selectedStationIdStore } from '@stores/selectedStationStore';
 import { useStations } from '@hooks/useStations';
 import { useUpdateStations } from '@hooks/useUpdateStations';
 
+import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
 import List from '@common/List';
 import ListItem from '@common/ListItem';
+import Text from '@common/Text';
 
 import { useAccordionAction } from '@ui/Accordion/hooks/useAccordionAction';
+import ChargingSpeedIcon from '@ui/ChargingSpeedIcon';
 
 import BriefStationInfo from '../BriefStationInfo';
-import StationCard from './StationCard';
 
 import type { StationSummary } from 'types';
 
@@ -57,48 +59,129 @@ const StationList = () => {
   };
 
   return (
-    <FlexBox width={34} height="100vh" css={containerCss}>
-      {isSuccess && (
-        <List css={listContainer}>
-          {stations.map((station) => {
-            const { stationId } = station;
-
-            return (
-              <ListItem key={stationId} css={noPadding}>
-                <StationCard
-                  station={station}
-                  onClick={() => {
-                    handleBriefStationInfoOpen(station);
-                    handleStationDetailsOpen(stationId);
-                  }}
-                />
-              </ListItem>
-            );
-          })}
-        </List>
-      )}
-    </FlexBox>
+    isSuccess && (
+      <List css={searchResultList}>
+        {stations.map((station) => {
+          const {
+            stationId,
+            stationName,
+            address,
+            companyName,
+            isPrivate,
+            isParkingFree,
+            operatingTime,
+            chargers,
+          } = station;
+          const chargerCount = chargers.length;
+          const fastChargerCount = chargers.filter(({ capacity }) => capacity >= 50).length;
+          const slowChargerCount = chargerCount - fastChargerCount;
+
+          return (
+            <ListItem key={stationId}>
+              <Button
+                width="100%"
+                shadow
+                css={foundStationButton}
+                onClick={() => {
+                  handleBriefStationInfoOpen(station);
+                  handleStationDetailsOpen(stationId);
+                }}
+              >
+                <FlexBox alignItems="start" justifyContent="between" nowrap columnGap={2.8}>
+                  <article>
+                    <Text
+                      tag="h4"
+                      align="left"
+                      variant="subtitle"
+                      title={stationName}
+                      lineClamp={1}
+                      css={companyNameText}
+                    >
+                      {companyName}
+                    </Text>
+                    <Text tag="h3" align="left" variant="h5" title={stationName} lineClamp={1}>
+                      {stationName}
+                    </Text>
+                    <Text variant="body" align="left" lineClamp={1} mb={1} color="#585858">
+                      {address || '주소를 직접 알아내자'}
+                    </Text>
+                    <Text variant="caption" align="left" lineClamp={1} mb={3} color="#585858">
+                      {operatingTime}
+                    </Text>
+                    <FlexBox
+                      columnGap={3}
+                      css={css`
+                        margin-bottom: 1.2rem;
+                      `}
+                    >
+                      <Text variant="label" align="left" color="#4b4b4b" css={labelStyle}>
+                        {isPrivate ? '이용제한구역' : '공공 충전소'}
+                      </Text>
+                      <Text variant="label" align="left" color="#4b4b4b" css={labelStyle}>
+                        {isParkingFree ? '무료 주차' : '유료 주차'}
+                      </Text>
+                    </FlexBox>
+                  </article>
+                  {fastChargerCount !== 0 && <ChargingSpeedIcon />}
+                </FlexBox>
+                <FlexBox nowrap rowGap={2} columnGap={3} justifyContent="between">
+                  <Text variant="label" align="left" color="#4b4b4b" css={chargerTypeStyle}>
+                    <Text tag="span" weight="bold">
+                      급속
+                    </Text>
+                    {fastChargerCount}
+                  </Text>
+                  <Text variant="label" align="left" color="#4b4b4b" css={chargerTypeStyle}>
+                    <Text tag="span" weight="bold">
+                      완속
+                    </Text>
+                    {slowChargerCount}
+                  </Text>
+                </FlexBox>
+              </Button>
+            </ListItem>
+          );
+        })}
+      </List>
+    )
   );
 };
 
-const containerCss = css`
-  padding: 2rem;
+const searchResultList = css`
+  position: fixed;
+  left: 7rem;
+  bottom: 0;
+  width: 34rem;
+  height: calc(100vh - 16rem);
+  border-top: 2.4rem solid var(--lighter-color);
+  border-bottom: 4rem solid var(--lighter-color);
+  border-top-left-radius: 30px;
+  border-top-right-radius: 30px;
+  background: var(--lighter-color);
+  overflow: auto;
+`;
 
-  background-color: white;
+const companyNameText = css`
+  font-size: 1.3rem;
+`;
 
-  border-right: 1px solid #ddd;
-  border-radius: 0;
+const foundStationButton = css`
+  padding: 1.4rem 1.2rem 1.8rem;
+  box-shadow: 0 0.3rem 0.8rem 0 var(--gray-200-color);
+  border-radius: 1.2rem;
 `;
 
-const noPadding = css`
-  padding: 0;
+const labelStyle = css`
+  padding: 0.2rem 1rem;
+  background: var(--light-color);
+  border-radius: 0.8rem;
 `;
 
-const listContainer = css`
+const chargerTypeStyle = css`
   width: 100%;
-  height: 100%;
-
-  overflow: scroll;
+  padding: 0.4rem 2rem;
+  border: 1.5px solid #e5e5e5;
+  border-radius: 0.8rem;
 `;
 
 export default StationList;
diff --git a/frontend/src/components/ui/StationList/StationListWindow.tsx b/frontend/src/components/ui/StationList/StationListWindow.tsx
@@ -0,0 +1,36 @@
+import { css, styled } from 'styled-components';
+
+import Text from '@common/Text';
+
+import StationList from './StationList';
+
+const StationListWindow = () => {
+  return (
+    <S.Container>
+      <Text tag="h2" fontSize={1.7} weight="bold" css={labelText}>
+        주변 충전소
+      </Text>
+      <StationList />
+    </S.Container>
+  );
+};
+
+const S = {
+  Container: styled.section`
+    width: 34rem;
+    height: 100vh;
+    background: #fcfcfc;
+    outline: 1.5px solid #e1e4eb;
+    padding: 2.8rem 2.2rem 5.2rem;
+
+    & > ul {
+      height: calc(100vh - 7.8rem);
+    }
+  `,
+};
+
+const labelText = css`
+  padding: 0.8rem 0 2.2rem;
+`;
+
+export default StationListWindow;
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -60,9 +60,10 @@ const SearchResult = (props: SearchResultProps) => {
 
 export const searchResultList = css`
   position: absolute;
-  width: 29.2rem;
-  max-height: 20rem;
-  margin-top: 2.2rem;
+  z-index: 9999;
+  width: 29.6rem;
+  max-height: 32rem;
+  margin-top: 2rem;
   overflow: auto;
   border: 1.5px solid #d9d9da;
   border-radius: 10px;