From 689744e9d7d1240f7754c2faa0ad02e761f407e4 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 14:51:30 +0900
Subject: [PATCH 01/35] =?UTF-8?q?refactor:=20StationSearchBar=EC=9D=98=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=ED=8C=8C=EC=9D=BC=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../StationSearchBar.style.ts                 | 45 ++++++++++++++
 .../StationSearchWindow/StationSearchBar.tsx  | 58 ++-----------------
 2 files changed, 51 insertions(+), 52 deletions(-)
 create mode 100644 frontend/src/components/ui/StationSearchWindow/StationSearchBar.style.ts

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.style.ts b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.style.ts
new file mode 100644
index 000000000..5662b850f
--- /dev/null
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.style.ts
@@ -0,0 +1,45 @@
+import styled from 'styled-components';
+
+import { pillStyle } from '@style';
+
+import { MOBILE_BREAKPOINT } from '@constants';
+
+export const StyledContainer = styled.div`
+  width: 30rem;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    width: 100%;
+  }
+`;
+
+export const StyledForm = styled.form`
+  position: relative;
+  min-width: 30rem;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    min-width: 100%;
+  }
+`;
+
+export const StyledSearch = styled.input`
+  ${pillStyle};
+
+  background: #fcfcfc;
+  border: 1px solid #d0d2d8;
+
+  width: 100%;
+  padding: 1.9rem 4.6rem 2rem 1.8rem;
+  font-size: 1.3rem;
+
+  & + button {
+    position: absolute;
+    right: 2rem;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:focus {
+    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
+    outline: 0;
+  }
+`;
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 705154a17..39229ca5b 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -1,5 +1,4 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
-import { styled } from 'styled-components';
 
 import { useState } from 'react';
 
@@ -9,11 +8,8 @@ import { useDebounce } from '@hooks/useDebounce';
 import Button from '@common/Button';
 import Loader from '@common/Loader';
 
-import { pillStyle } from '@style';
-
-import { MOBILE_BREAKPOINT } from '@constants';
-
 import SearchResult from './SearchResult';
+import { StyledContainer, StyledForm, StyledSearch } from './StationSearchBar.style';
 import { useStationSearchWindow } from './hooks/useStationSearchWindow';
 
 const StationSearchBar = () => {
@@ -39,10 +35,10 @@ const StationSearchBar = () => {
   const { data: stations, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
 
   return (
-    <S.Container>
-      <S.Form role="search" onSubmit={handleSubmitSearchWord}>
+    <StyledContainer>
+      <StyledForm role="search" onSubmit={handleSubmitSearchWord}>
         <label htmlFor="station-search-bar" aria-hidden>
-          <S.Search
+          <StyledSearch
             id="station-search-bar"
             type="search"
             role="searchbox"
@@ -60,7 +56,7 @@ const StationSearchBar = () => {
             )}
           </Button>
         </label>
-      </S.Form>
+      </StyledForm>
       {isFocused && stations && (
         <SearchResult
           stations={stations}
@@ -70,50 +66,8 @@ const StationSearchBar = () => {
           closeResult={handleCloseResult}
         />
       )}
-    </S.Container>
+    </StyledContainer>
   );
 };
 
-const S = {
-  Container: styled.div`
-    width: 30rem;
-
-    @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
-      width: 100%;
-    }
-  `,
-
-  Form: styled.form`
-    position: relative;
-    min-width: 30rem;
-
-    @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
-      min-width: 100%;
-    }
-  `,
-
-  Search: styled.input`
-    ${pillStyle}
-
-    background: #fcfcfc;
-    border: 1px solid #d0d2d8;
-
-    width: 100%;
-    padding: 1.9rem 4.6rem 2rem 1.8rem;
-    font-size: 1.3rem;
-
-    & + button {
-      position: absolute;
-      right: 2rem;
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    &:focus {
-      box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.2);
-      outline: 0;
-    }
-  `,
-};
-
 export default StationSearchBar;

From 3e5753cea1c844d0d1a96ed58328f56f2881dc48 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 15:23:08 +0900
Subject: [PATCH 02/35] =?UTF-8?q?refactor:=20fetchSearchedStations=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=99=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/StationSearchBar.tsx      |  6 +++---
 .../src/hooks/tanstack-query/useSearchStations.ts    | 12 +++++-------
 frontend/src/types/stations.ts                       |  9 +++++++--
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 39229ca5b..f0e4119e9 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -32,7 +32,7 @@ const StationSearchBar = () => {
     400
   );
 
-  const { data: stations, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
+  const { data, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
 
   return (
     <StyledContainer>
@@ -57,9 +57,9 @@ const StationSearchBar = () => {
           </Button>
         </label>
       </StyledForm>
-      {isFocused && stations && (
+      {isFocused && data?.stations && (
         <SearchResult
-          stations={stations}
+          stations={data.stations}
           isLoading={isLoading}
           isError={isError}
           showStationDetails={showStationDetails}
diff --git a/frontend/src/hooks/tanstack-query/useSearchStations.ts b/frontend/src/hooks/tanstack-query/useSearchStations.ts
index c2b7adc98..3fe53e91d 100644
--- a/frontend/src/hooks/tanstack-query/useSearchStations.ts
+++ b/frontend/src/hooks/tanstack-query/useSearchStations.ts
@@ -5,26 +5,24 @@ import { QUERY_KEY_SEARCHED_STATION } from '@constants/queryKeys';
 import { SERVER_URL } from '@constants/server';
 import { SEARCH_SCOPE } from '@constants/stationSearch';
 
-import type { SearchedStation } from '@type/stations';
+import type { SearchedRegion, SearchedStation } from '@type/stations';
 
 interface SearchedStationResponse {
   stations: SearchedStation[];
+  regions: SearchedRegion[];
 }
 
 export const fetchSearchedStations = async (searchWord: string) => {
   const searchedStations = await fetch(
-    `${SERVER_URL}/stations/search?q=${searchWord}${SEARCH_SCOPE}`,
-    {
-      method: 'GET',
-    }
-  ).then<SearchedStation[]>(async (response) => {
+    `${SERVER_URL}/stations/search?q=${searchWord}${SEARCH_SCOPE}`
+  ).then<SearchedStationResponse>(async (response) => {
     if (!response.ok) {
       throw new Error(ERROR_MESSAGES.NO_SEARCH_RESULT);
     }
 
     const data: SearchedStationResponse = await response.json();
 
-    return data.stations;
+    return data;
   });
 
   return searchedStations;
diff --git a/frontend/src/types/stations.ts b/frontend/src/types/stations.ts
index ef8581db0..8bd3eaa59 100644
--- a/frontend/src/types/stations.ts
+++ b/frontend/src/types/stations.ts
@@ -1,5 +1,4 @@
-import type { CHARGING_SPEED, COMPANIES } from '@constants/chargers';
-import type { CONNECTOR_TYPES } from '@constants/chargers';
+import type { CHARGING_SPEED, COMPANIES, CONNECTOR_TYPES } from '@constants/chargers';
 
 import type { Capacity, ChargerMethodType, ChargerStateType } from '@type/chargers';
 
@@ -90,6 +89,12 @@ export interface SearchedStation
   speed: keyof typeof CHARGING_SPEED;
 }
 
+export interface SearchedRegion {
+  regionName: string;
+  latitude: number;
+  longitude: number;
+}
+
 export type StationPosition = Pick<Station, 'stationId' | 'longitude' | 'latitude'>;
 
 export type StationDetailsWithoutChargers = Omit<StationDetails, 'chargers'>;

From e16d29921aba26071ab8b3153b2f89012109b34e Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 15:27:11 +0900
Subject: [PATCH 03/35] =?UTF-8?q?refactor:=20fetchSearchedStations=20?=
 =?UTF-8?q?=EC=8A=A4=ED=8E=99=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../StationSearchBar.stories.tsx                   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
index c2612a9e8..6ea2c6202 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
@@ -53,7 +53,7 @@ export const Default = () => {
     400
   );
 
-  const { data: stations, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
+  const { data, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
 
   const handleOpenResult = (event: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>) => {
     event.stopPropagation();
@@ -68,10 +68,10 @@ export const Default = () => {
     event.preventDefault();
     handleCloseResult();
 
-    const searchedStations = await fetchSearchedStations(searchWord);
+    const { stations } = await fetchSearchedStations(searchWord);
 
-    if (searchedStations !== undefined && searchedStations.length > 0) {
-      const [{ stationId, latitude, longitude }] = searchedStations;
+    if (stations !== undefined && stations.length > 0) {
+      const [{ stationId, latitude, longitude }] = stations;
       showStationDetails({ stationId, latitude, longitude });
     }
 
@@ -113,9 +113,9 @@ export const Default = () => {
           </Button>
         </label>
       </S.Form>
-      {isFocused && stations && (
+      {isFocused && data?.stations && (
         <SearchResult
-          stations={stations}
+          stations={data.stations}
           isLoading={isLoading}
           isError={isError}
           showStationDetails={showStationDetails}
@@ -145,7 +145,7 @@ const S = {
   `,
 
   Search: styled.input`
-    ${pillStyle}
+    ${pillStyle};
 
     background: #fcfcfc;
     border: 1px solid #d0d2d8;

From 9c154354a6ed0a41202563c036e1bdbc37b60f60 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 16:04:53 +0900
Subject: [PATCH 04/35] =?UTF-8?q?refactor:=20SearchResult=20=EC=8A=A4?=
 =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../StationSearchWindow/SearchResult.style.ts | 34 +++++++++++++++
 .../ui/StationSearchWindow/SearchResult.tsx   | 43 +++----------------
 2 files changed, 39 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts b/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts
new file mode 100644
index 000000000..4be48d905
--- /dev/null
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts
@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+import { MOBILE_BREAKPOINT } from '@constants';
+
+export const searchResultListCss = css`
+  position: absolute;
+  z-index: 9999;
+  width: 29.6rem;
+  max-height: 46rem;
+  overflow: auto;
+  border: 1.5px solid #d9d9da;
+  border-radius: 10px;
+  background: #fcfcfc;
+  box-shadow: 0 3px 10px 0 #d9d9da;
+  font-size: 1.5rem;
+  line-height: 2;
+
+  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
+    width: calc(100vw - 2rem);
+
+    max-height: 22.6rem;
+  }
+`;
+
+export const foundStationListCss = css`
+  &:hover {
+    background: #f5f5f5;
+  }
+`;
+
+export const noSearchResultCss = css`
+  font-size: 1.8rem;
+  font-weight: 600;
+`;
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 8e10fe1a6..20d167d65 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -1,5 +1,3 @@
-import { css } from 'styled-components';
-
 import { useEffect } from 'react';
 
 import Button from '@common/Button';
@@ -9,10 +7,10 @@ import Text from '@common/Text';
 
 import Error from '@ui/Error';
 
-import { MOBILE_BREAKPOINT } from '@constants';
-
 import type { SearchedStation, StationPosition } from '@type/stations';
 
+import { foundStationListCss, noSearchResultCss, searchResultListCss } from './SearchResult.style';
+
 export interface SearchResultProps {
   stations: SearchedStation[];
   isLoading: boolean;
@@ -51,10 +49,10 @@ const SearchResult = (props: SearchResultProps) => {
     );
 
   return (
-    <List aria-live="assertive" mt={1} css={searchResultList}>
+    <List aria-live="assertive" mt={1} css={searchResultListCss}>
       {stations.length ? (
         stations.map(({ stationId, stationName, address, latitude, longitude }) => (
-          <ListItem divider NoLastDivider key={stationId} pt={2} pb={3} css={foundStationList}>
+          <ListItem divider NoLastDivider key={stationId} pt={2} pb={3} css={foundStationListCss}>
             <Button
               width="100%"
               noRadius="all"
@@ -72,7 +70,7 @@ const SearchResult = (props: SearchResultProps) => {
         ))
       ) : (
         <>
-          <ListItem mt={3} css={noSearchResult} pb={0}>
+          <ListItem mt={3} css={noSearchResultCss} pb={0}>
             검색 결과가 없습니다.
           </ListItem>
           <ListItem mt={1} mb={5}>
@@ -88,35 +86,4 @@ const SearchResult = (props: SearchResultProps) => {
   );
 };
 
-export const searchResultList = css`
-  position: absolute;
-  z-index: 9999;
-  width: 29.6rem;
-  max-height: 46rem;
-  overflow: auto;
-  border: 1.5px solid #d9d9da;
-  border-radius: 10px;
-  background: #fcfcfc;
-  box-shadow: 0 3px 10px 0 #d9d9da;
-  font-size: 1.5rem;
-  line-height: 2;
-
-  @media screen and (max-width: ${MOBILE_BREAKPOINT}px) {
-    width: calc(100vw - 2rem);
-
-    max-height: 22.6rem;
-  }
-`;
-
-export const foundStationList = css`
-  &:hover {
-    background: #f5f5f5;
-  }
-`;
-
-export const noSearchResult = css`
-  font-size: 1.8rem;
-  font-weight: 600;
-`;
-
 export default SearchResult;

From a89de5049abef213e8235eadab4d763982fe625b Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 16:25:37 +0900
Subject: [PATCH 05/35] =?UTF-8?q?feat:=20regions=EC=9D=84=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EA=B2=B0=EA=B3=BC=EC=97=90=20=ED=8F=AC=ED=95=A8?=
 =?UTF-8?q?=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8A=94=20=ED=94=84=EB=A1=AD?=
 =?UTF-8?q?=20=EC=A0=84=EB=8B=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx   | 67 ++++++++++++-------
 .../StationSearchWindow/StationSearchBar.tsx  |  3 +-
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 20d167d65..f06070a17 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -7,11 +7,12 @@ import Text from '@common/Text';
 
 import Error from '@ui/Error';
 
-import type { SearchedStation, StationPosition } from '@type/stations';
+import type { SearchedRegion, SearchedStation, StationPosition } from '@type/stations';
 
 import { foundStationListCss, noSearchResultCss, searchResultListCss } from './SearchResult.style';
 
 export interface SearchResultProps {
+  regions: SearchedRegion[];
   stations: SearchedStation[];
   isLoading: boolean;
   isError: boolean;
@@ -19,12 +20,15 @@ export interface SearchResultProps {
   closeResult: () => void;
 }
 
-const SearchResult = (props: SearchResultProps) => {
-  const { stations, isLoading, isError, showStationDetails, closeResult } = props;
-
-  const handleShowStationDetails = (handlerProps: StationPosition) => {
-    const { stationId, latitude, longitude } = handlerProps;
-
+const SearchResult = ({
+  regions,
+  stations,
+  isLoading,
+  isError,
+  showStationDetails,
+  closeResult,
+}: SearchResultProps) => {
+  const handleShowStationDetails = ({ stationId, latitude, longitude }: StationPosition) => {
     showStationDetails({ stationId, latitude, longitude });
   };
 
@@ -36,7 +40,9 @@ const SearchResult = (props: SearchResultProps) => {
     };
   }, []);
 
-  if (isLoading) return <></>;
+  if (isLoading) {
+    return <></>;
+  }
 
   if (isError)
     return (
@@ -51,23 +57,34 @@ const SearchResult = (props: SearchResultProps) => {
   return (
     <List aria-live="assertive" mt={1} css={searchResultListCss}>
       {stations.length ? (
-        stations.map(({ stationId, stationName, address, latitude, longitude }) => (
-          <ListItem divider NoLastDivider key={stationId} pt={2} pb={3} css={foundStationListCss}>
-            <Button
-              width="100%"
-              noRadius="all"
-              background="transparent"
-              onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
-            >
-              <Text variant="h6" align="left" title={stationName} lineClamp={1}>
-                {stationName}
-              </Text>
-              <Text variant="label" align="left" lineClamp={1} color="#585858">
-                {address || '주소 미확인'}
-              </Text>
-            </Button>
-          </ListItem>
-        ))
+        <>
+          <>
+            {stations.map(({ stationId, stationName, address, latitude, longitude }) => (
+              <ListItem
+                divider
+                NoLastDivider
+                key={stationId}
+                pt={2}
+                pb={3}
+                css={foundStationListCss}
+              >
+                <Button
+                  width="100%"
+                  noRadius="all"
+                  background="transparent"
+                  onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
+                >
+                  <Text variant="h6" align="left" title={stationName} lineClamp={1}>
+                    {stationName}
+                  </Text>
+                  <Text variant="label" align="left" lineClamp={1} color="#585858">
+                    {address || '주소 미확인'}
+                  </Text>
+                </Button>
+              </ListItem>
+            ))}
+          </>
+        </>
       ) : (
         <>
           <ListItem mt={3} css={noSearchResultCss} pb={0}>
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index f0e4119e9..7b5853cf8 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -57,8 +57,9 @@ const StationSearchBar = () => {
           </Button>
         </label>
       </StyledForm>
-      {isFocused && data?.stations && (
+      {isFocused && data && (
         <SearchResult
+          regions={data.regions}
           stations={data.stations}
           isLoading={isLoading}
           isError={isError}

From 400bdd0c0d1bcd4f3b3627b335c1c5da7b1daa93 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 16:50:19 +0900
Subject: [PATCH 06/35] =?UTF-8?q?refactor:=20SearchedStationCard=20?=
 =?UTF-8?q?=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx   | 33 +++++------------
 .../SearchedStationCard.tsx                   | 36 +++++++++++++++++++
 .../hooks/useStationSearchWindow.tsx          |  4 +--
 3 files changed, 46 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index f06070a17..826a7d5e7 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -1,15 +1,15 @@
 import { useEffect } from 'react';
 
-import Button from '@common/Button';
 import List from '@common/List';
 import ListItem from '@common/ListItem';
 import Text from '@common/Text';
 
 import Error from '@ui/Error';
+import SearchedStationCard from '@ui/StationSearchWindow/SearchedStationCard';
 
 import type { SearchedRegion, SearchedStation, StationPosition } from '@type/stations';
 
-import { foundStationListCss, noSearchResultCss, searchResultListCss } from './SearchResult.style';
+import { noSearchResultCss, searchResultListCss } from './SearchResult.style';
 
 export interface SearchResultProps {
   regions: SearchedRegion[];
@@ -59,29 +59,12 @@ const SearchResult = ({
       {stations.length ? (
         <>
           <>
-            {stations.map(({ stationId, stationName, address, latitude, longitude }) => (
-              <ListItem
-                divider
-                NoLastDivider
-                key={stationId}
-                pt={2}
-                pb={3}
-                css={foundStationListCss}
-              >
-                <Button
-                  width="100%"
-                  noRadius="all"
-                  background="transparent"
-                  onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
-                >
-                  <Text variant="h6" align="left" title={stationName} lineClamp={1}>
-                    {stationName}
-                  </Text>
-                  <Text variant="label" align="left" lineClamp={1} color="#585858">
-                    {address || '주소 미확인'}
-                  </Text>
-                </Button>
-              </ListItem>
+            {stations.map((station) => (
+              <SearchedStationCard
+                station={station}
+                handleShowStationDetails={handleShowStationDetails}
+                key={station.stationId}
+              />
             ))}
           </>
         </>
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
new file mode 100644
index 000000000..7b9a8c669
--- /dev/null
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -0,0 +1,36 @@
+import Button from '@common/Button';
+import ListItem from '@common/ListItem';
+import Text from '@common/Text';
+
+import { foundStationListCss } from '@ui/StationSearchWindow/SearchResult.style';
+
+import type { SearchedStation, StationPosition } from '@type';
+
+export interface SearchedStationCardProps {
+  station: SearchedStation;
+  handleShowStationDetails: (props: StationPosition) => void;
+}
+
+const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStationCardProps) => {
+  const { stationId, stationName, address, latitude, longitude } = station;
+
+  return (
+    <ListItem divider NoLastDivider key={stationId} pt={2} pb={3} css={foundStationListCss}>
+      <Button
+        width="100%"
+        noRadius="all"
+        background="transparent"
+        onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
+      >
+        <Text variant="h6" align="left" title={stationName} lineClamp={1}>
+          {stationName}
+        </Text>
+        <Text variant="label" align="left" lineClamp={1} color="#585858">
+          {address || '주소 미확인'}
+        </Text>
+      </Button>
+    </ListItem>
+  );
+};
+
+export default SearchedStationCard;
diff --git a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
index fb5b523fa..8b8b00aef 100644
--- a/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/hooks/useStationSearchWindow.tsx
@@ -57,8 +57,8 @@ export const useStationSearchWindow = () => {
 
     const searchedStations = await fetchSearchedStations(searchWord);
 
-    if (searchedStations !== undefined && searchedStations.length > 0) {
-      const [{ stationId, latitude, longitude }] = searchedStations;
+    if (searchedStations !== undefined && searchedStations.stations.length > 0) {
+      const [{ stationId, latitude, longitude }] = searchedStations.stations;
       showStationDetails({ stationId, latitude, longitude });
     }
 

From 77b28bb4dc996e2ca99a3c47f14ed88dd82fede9 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 16:53:53 +0900
Subject: [PATCH 07/35] =?UTF-8?q?refactor:=20NoResult=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/NoResult.tsx       | 23 +++++++++++++++++++
 .../ui/StationSearchWindow/SearchResult.tsx   | 20 ++++------------
 2 files changed, 27 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/components/ui/StationSearchWindow/NoResult.tsx

diff --git a/frontend/src/components/ui/StationSearchWindow/NoResult.tsx b/frontend/src/components/ui/StationSearchWindow/NoResult.tsx
new file mode 100644
index 000000000..95b330de3
--- /dev/null
+++ b/frontend/src/components/ui/StationSearchWindow/NoResult.tsx
@@ -0,0 +1,23 @@
+import ListItem from '@common/ListItem';
+import Text from '@common/Text';
+
+import { noSearchResultCss } from '@ui/StationSearchWindow/SearchResult.style';
+
+const NoResult = () => {
+  return (
+    <>
+      <ListItem mt={3} css={noSearchResultCss} pb={0}>
+        검색 결과가 없습니다.
+      </ListItem>
+      <ListItem mt={1} mb={5}>
+        <Text variant="subtitle">검색어를 다시 한 번 확인해 주세요.</Text>
+        <Text tag="span" css={{ display: 'block' }}>
+          ·&nbsp; 오타는 없나요?
+        </Text>
+        <Text tag="span">·&nbsp; 띄어쓰기가 잘못되진 않았나요?</Text>
+      </ListItem>
+    </>
+  );
+};
+
+export default NoResult;
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 826a7d5e7..e058c5dd3 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -1,15 +1,14 @@
 import { useEffect } from 'react';
 
 import List from '@common/List';
-import ListItem from '@common/ListItem';
-import Text from '@common/Text';
 
 import Error from '@ui/Error';
-import SearchedStationCard from '@ui/StationSearchWindow/SearchedStationCard';
 
 import type { SearchedRegion, SearchedStation, StationPosition } from '@type/stations';
 
-import { noSearchResultCss, searchResultListCss } from './SearchResult.style';
+import NoResult from './NoResult';
+import { searchResultListCss } from './SearchResult.style';
+import SearchedStationCard from './SearchedStationCard';
 
 export interface SearchResultProps {
   regions: SearchedRegion[];
@@ -69,18 +68,7 @@ const SearchResult = ({
           </>
         </>
       ) : (
-        <>
-          <ListItem mt={3} css={noSearchResultCss} pb={0}>
-            검색 결과가 없습니다.
-          </ListItem>
-          <ListItem mt={1} mb={5}>
-            <Text variant="subtitle">검색어를 다시 한 번 확인해 주세요.</Text>
-            <Text tag="span" css={{ display: 'block' }}>
-              ·&nbsp; 오타는 없나요?
-            </Text>
-            <Text tag="span">·&nbsp; 띄어쓰기가 잘못되진 않았나요?</Text>
-          </ListItem>
-        </>
+        <NoResult />
       )}
     </List>
   );

From f418431714684cd260a6f6b0164eb9e4101cf3b3 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:00:23 +0900
Subject: [PATCH 08/35] =?UTF-8?q?refactor:=20SearchedRegionCard=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../SearchedRegionCard.tsx                    | 32 +++++++++++++++++++
 .../SearchedStationCard.tsx                   |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
new file mode 100644
index 000000000..3bf781510
--- /dev/null
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
@@ -0,0 +1,32 @@
+import Button from '@common/Button';
+import ListItem from '@common/ListItem';
+import Text from '@common/Text';
+
+import { foundStationListCss } from '@ui/StationSearchWindow/SearchResult.style';
+
+import type { SearchedRegion } from '@type';
+
+export interface SearchedRegionCardProps {
+  region: SearchedRegion;
+}
+
+const SearchedRegionCard = ({ region }: SearchedRegionCardProps) => {
+  const { regionName, latitude, longitude } = region;
+
+  return (
+    <ListItem divider NoLastDivider pt={2} pb={3} css={foundStationListCss}>
+      <Button
+        width="100%"
+        noRadius="all"
+        background="transparent"
+        onMouseDown={() => alert(`${regionName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
+      >
+        <Text variant="h6" align="left" title={regionName} lineClamp={1}>
+          {regionName}
+        </Text>
+      </Button>
+    </ListItem>
+  );
+};
+
+export default SearchedRegionCard;
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index 7b9a8c669..a2864c709 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -15,7 +15,7 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
   const { stationId, stationName, address, latitude, longitude } = station;
 
   return (
-    <ListItem divider NoLastDivider key={stationId} pt={2} pb={3} css={foundStationListCss}>
+    <ListItem divider NoLastDivider pt={2} pb={3} css={foundStationListCss}>
       <Button
         width="100%"
         noRadius="all"

From c5a1d60378471767fef19c94a952893d3bf3e67b Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:10:41 +0900
Subject: [PATCH 09/35] =?UTF-8?q?feat:=20SearchedRegionCard=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx   |  8 +++++
 .../SearchedRegionCard.tsx                    | 35 ++++++++++++-------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index e058c5dd3..b8e34da1f 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -3,6 +3,7 @@ import { useEffect } from 'react';
 import List from '@common/List';
 
 import Error from '@ui/Error';
+import SearchedRegionCard from '@ui/StationSearchWindow/SearchedRegionCard';
 
 import type { SearchedRegion, SearchedStation, StationPosition } from '@type/stations';
 
@@ -57,6 +58,13 @@ const SearchResult = ({
     <List aria-live="assertive" mt={1} css={searchResultListCss}>
       {stations.length ? (
         <>
+          <SearchedRegionCard
+            region={{
+              regionName: '경기도 하남시',
+              latitude: 37.539,
+              longitude: 127.214,
+            }}
+          />
           <>
             {stations.map((station) => (
               <SearchedStationCard
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
index 3bf781510..5b7d2a9e6 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
@@ -1,9 +1,10 @@
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+
 import Button from '@common/Button';
+import FlexBox from '@common/FlexBox';
 import ListItem from '@common/ListItem';
 import Text from '@common/Text';
 
-import { foundStationListCss } from '@ui/StationSearchWindow/SearchResult.style';
-
 import type { SearchedRegion } from '@type';
 
 export interface SearchedRegionCardProps {
@@ -14,17 +15,25 @@ const SearchedRegionCard = ({ region }: SearchedRegionCardProps) => {
   const { regionName, latitude, longitude } = region;
 
   return (
-    <ListItem divider NoLastDivider pt={2} pb={3} css={foundStationListCss}>
-      <Button
-        width="100%"
-        noRadius="all"
-        background="transparent"
-        onMouseDown={() => alert(`${regionName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
-      >
-        <Text variant="h6" align="left" title={regionName} lineClamp={1}>
-          {regionName}
-        </Text>
-      </Button>
+    <ListItem divider>
+      <FlexBox alignItems="center">
+        <Button
+          width="100%"
+          noRadius="all"
+          background="transparent"
+          onMouseDown={() => alert(`${regionName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
+        >
+          <FlexBox justifyContent="between" alignItems="center">
+            <FlexBox alignItems="center">
+              <MagnifyingGlassIcon width="1.6rem" stroke="#767676" />
+              <Text title={regionName}>{regionName}</Text>
+            </FlexBox>
+            <Text variant="caption" color="#585858">
+              이동하기
+            </Text>
+          </FlexBox>
+        </Button>
+      </FlexBox>
     </ListItem>
   );
 };

From 047ab4fe9e25fffe3320698f722662839688d3c3 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:22:16 +0900
Subject: [PATCH 10/35] =?UTF-8?q?refactor:=20SearchedRegionCard=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchedRegionCard.tsx      | 10 ++++++----
 .../StationSearchWindow/StationSearchBar.stories.tsx   |  3 ++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
index 5b7d2a9e6..677f18510 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
@@ -1,4 +1,4 @@
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { MapPinIcon } from '@heroicons/react/24/outline';
 
 import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
@@ -24,9 +24,11 @@ const SearchedRegionCard = ({ region }: SearchedRegionCardProps) => {
           onMouseDown={() => alert(`${regionName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
         >
           <FlexBox justifyContent="between" alignItems="center">
-            <FlexBox alignItems="center">
-              <MagnifyingGlassIcon width="1.6rem" stroke="#767676" />
-              <Text title={regionName}>{regionName}</Text>
+            <FlexBox alignItems="center" gap={2}>
+              <MapPinIcon width="1.6rem" stroke="#767676" />
+              <Text title={regionName} mb={0.5}>
+                {regionName}
+              </Text>
             </FlexBox>
             <Text variant="caption" color="#585858">
               이동하기
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
index 6ea2c6202..e5065f09d 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
@@ -113,8 +113,9 @@ export const Default = () => {
           </Button>
         </label>
       </S.Form>
-      {isFocused && data?.stations && (
+      {isFocused && data && (
         <SearchResult
+          regions={data.regions}
           stations={data.stations}
           isLoading={isLoading}
           isError={isError}

From fb384bf43ccee4922d1f8d9160ac67ba00bbef8b Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:31:57 +0900
Subject: [PATCH 11/35] rename: region ==> city

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx      | 12 ++++++------
 ...archedRegionCard.tsx => SearchedCityCard.tsx} | 16 ++++++++--------
 .../StationSearchBar.stories.tsx                 |  2 +-
 .../ui/StationSearchWindow/StationSearchBar.tsx  |  2 +-
 .../hooks/tanstack-query/useSearchStations.ts    |  4 ++--
 frontend/src/types/stations.ts                   |  4 ++--
 6 files changed, 20 insertions(+), 20 deletions(-)
 rename frontend/src/components/ui/StationSearchWindow/{SearchedRegionCard.tsx => SearchedCityCard.tsx} (67%)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index b8e34da1f..7a6c76bd3 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -3,16 +3,16 @@ import { useEffect } from 'react';
 import List from '@common/List';
 
 import Error from '@ui/Error';
-import SearchedRegionCard from '@ui/StationSearchWindow/SearchedRegionCard';
+import SearchedCityCard from '@ui/StationSearchWindow/SearchedCityCard';
 
-import type { SearchedRegion, SearchedStation, StationPosition } from '@type/stations';
+import type { SearchedCity, SearchedStation, StationPosition } from '@type/stations';
 
 import NoResult from './NoResult';
 import { searchResultListCss } from './SearchResult.style';
 import SearchedStationCard from './SearchedStationCard';
 
 export interface SearchResultProps {
-  regions: SearchedRegion[];
+  regions: SearchedCity[];
   stations: SearchedStation[];
   isLoading: boolean;
   isError: boolean;
@@ -58,9 +58,9 @@ const SearchResult = ({
     <List aria-live="assertive" mt={1} css={searchResultListCss}>
       {stations.length ? (
         <>
-          <SearchedRegionCard
-            region={{
-              regionName: '경기도 하남시',
+          <SearchedCityCard
+            city={{
+              cityName: '경기도 하남시',
               latitude: 37.539,
               longitude: 127.214,
             }}
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
similarity index 67%
rename from frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
rename to frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 677f18510..3353f1024 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedRegionCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -5,14 +5,14 @@ import FlexBox from '@common/FlexBox';
 import ListItem from '@common/ListItem';
 import Text from '@common/Text';
 
-import type { SearchedRegion } from '@type';
+import type { SearchedCity } from '@type';
 
 export interface SearchedRegionCardProps {
-  region: SearchedRegion;
+  city: SearchedCity;
 }
 
-const SearchedRegionCard = ({ region }: SearchedRegionCardProps) => {
-  const { regionName, latitude, longitude } = region;
+const SearchedCityCard = ({ city }: SearchedRegionCardProps) => {
+  const { cityName, latitude, longitude } = city;
 
   return (
     <ListItem divider>
@@ -21,13 +21,13 @@ const SearchedRegionCard = ({ region }: SearchedRegionCardProps) => {
           width="100%"
           noRadius="all"
           background="transparent"
-          onMouseDown={() => alert(`${regionName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
+          onMouseDown={() => alert(`${cityName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
         >
           <FlexBox justifyContent="between" alignItems="center">
             <FlexBox alignItems="center" gap={2}>
               <MapPinIcon width="1.6rem" stroke="#767676" />
-              <Text title={regionName} mb={0.5}>
-                {regionName}
+              <Text title={cityName} mb={0.5}>
+                {cityName}
               </Text>
             </FlexBox>
             <Text variant="caption" color="#585858">
@@ -40,4 +40,4 @@ const SearchedRegionCard = ({ region }: SearchedRegionCardProps) => {
   );
 };
 
-export default SearchedRegionCard;
+export default SearchedCityCard;
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
index e5065f09d..8485865e5 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
@@ -115,7 +115,7 @@ export const Default = () => {
       </S.Form>
       {isFocused && data && (
         <SearchResult
-          regions={data.regions}
+          regions={data.cities}
           stations={data.stations}
           isLoading={isLoading}
           isError={isError}
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 7b5853cf8..139d72318 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -59,7 +59,7 @@ const StationSearchBar = () => {
       </StyledForm>
       {isFocused && data && (
         <SearchResult
-          regions={data.regions}
+          regions={data.cities}
           stations={data.stations}
           isLoading={isLoading}
           isError={isError}
diff --git a/frontend/src/hooks/tanstack-query/useSearchStations.ts b/frontend/src/hooks/tanstack-query/useSearchStations.ts
index 3fe53e91d..51ec9129f 100644
--- a/frontend/src/hooks/tanstack-query/useSearchStations.ts
+++ b/frontend/src/hooks/tanstack-query/useSearchStations.ts
@@ -5,11 +5,11 @@ import { QUERY_KEY_SEARCHED_STATION } from '@constants/queryKeys';
 import { SERVER_URL } from '@constants/server';
 import { SEARCH_SCOPE } from '@constants/stationSearch';
 
-import type { SearchedRegion, SearchedStation } from '@type/stations';
+import type { SearchedCity, SearchedStation } from '@type/stations';
 
 interface SearchedStationResponse {
   stations: SearchedStation[];
-  regions: SearchedRegion[];
+  cities: SearchedCity[];
 }
 
 export const fetchSearchedStations = async (searchWord: string) => {
diff --git a/frontend/src/types/stations.ts b/frontend/src/types/stations.ts
index 8bd3eaa59..413364829 100644
--- a/frontend/src/types/stations.ts
+++ b/frontend/src/types/stations.ts
@@ -89,8 +89,8 @@ export interface SearchedStation
   speed: keyof typeof CHARGING_SPEED;
 }
 
-export interface SearchedRegion {
-  regionName: string;
+export interface SearchedCity {
+  cityName: string;
   latitude: number;
   longitude: number;
 }

From c68611845d062a4e7af5e704cd1f8824c1927f2a Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:36:11 +0900
Subject: [PATCH 12/35] rename: region ==> city

[#834]
---
 .../src/components/ui/StationSearchWindow/SearchResult.tsx    | 4 ++--
 .../components/ui/StationSearchWindow/SearchedCityCard.tsx    | 4 ++--
 .../ui/StationSearchWindow/StationSearchBar.stories.tsx       | 2 +-
 .../components/ui/StationSearchWindow/StationSearchBar.tsx    | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 7a6c76bd3..217486157 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -12,7 +12,7 @@ import { searchResultListCss } from './SearchResult.style';
 import SearchedStationCard from './SearchedStationCard';
 
 export interface SearchResultProps {
-  regions: SearchedCity[];
+  cities: SearchedCity[];
   stations: SearchedStation[];
   isLoading: boolean;
   isError: boolean;
@@ -21,7 +21,7 @@ export interface SearchResultProps {
 }
 
 const SearchResult = ({
-  regions,
+  cities,
   stations,
   isLoading,
   isError,
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 3353f1024..40e1c40eb 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -7,11 +7,11 @@ import Text from '@common/Text';
 
 import type { SearchedCity } from '@type';
 
-export interface SearchedRegionCardProps {
+export interface SearchedCityCardProps {
   city: SearchedCity;
 }
 
-const SearchedCityCard = ({ city }: SearchedRegionCardProps) => {
+const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
   const { cityName, latitude, longitude } = city;
 
   return (
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
index 8485865e5..94afcf55a 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
@@ -115,7 +115,7 @@ export const Default = () => {
       </S.Form>
       {isFocused && data && (
         <SearchResult
-          regions={data.cities}
+          cities={data.cities}
           stations={data.stations}
           isLoading={isLoading}
           isError={isError}
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 139d72318..78bdf5148 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -59,7 +59,7 @@ const StationSearchBar = () => {
       </StyledForm>
       {isFocused && data && (
         <SearchResult
-          regions={data.cities}
+          cities={data.cities}
           stations={data.stations}
           isLoading={isLoading}
           isError={isError}

From bc3aabc81c2e77da6a8860e2b9312ef7b12e39a8 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:47:27 +0900
Subject: [PATCH 13/35] =?UTF-8?q?feat:=20/stations/search=20=EC=97=90=20?=
 =?UTF-8?q?=EB=8F=84=EC=8B=9C=20=EA=B2=80=EC=83=89=20=EA=B2=B0=EA=B3=BC=20?=
 =?UTF-8?q?=ED=8F=AC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 frontend/src/mocks/data.ts                    | 65 +++++++++++++++++++
 .../mocks/handlers/stationSearchHandlers.ts   |  5 +-
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 07fdcfcf0..172180698 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -375,3 +375,68 @@ export const getRegionName = (regionName: string): RegionName | undefined => {
       return undefined;
   }
 };
+
+export const getCities = () => {
+  return [
+    {
+      name: '서울특별시',
+      latitude: 37.5666103,
+      longitude: 126.9783882,
+    },
+    {
+      name: '서울특별시 강동구',
+      latitude: 37.530126,
+      longitude: 127.1237708,
+    },
+    {
+      name: '서울특별시 강동구 천호동',
+      latitude: 37.5450159,
+      longitude: 127.1368066,
+    },
+    {
+      name: '경기도 하남시 미사동',
+      latitude: 37.560359,
+      longitude: 127.1888042,
+    },
+    {
+      name: '경기도 하남시 망월동',
+      latitude: 37.5696083,
+      longitude: 127.1880625,
+    },
+    {
+      name: '경상남도 진주시 신안동',
+      latitude: 35.1844853,
+      longitude: 128.0689824,
+    },
+    {
+      name: '경상남도 진주시',
+      latitude: 35.180325,
+      longitude: 128.107646,
+    },
+    {
+      name: '경기도 안산시 단원구 선부동',
+      latitude: 37.3342173,
+      longitude: 126.8044133,
+    },
+    {
+      name: '경기도 오산시 부산동',
+      latitude: 37.1527237,
+      longitude: 127.088125,
+    },
+    {
+      name: '부산광역시',
+      latitude: 35.179816,
+      longitude: 129.0750223,
+    },
+    {
+      name: '부산광역시 기장군',
+      latitude: 35.244498,
+      longitude: 129.222312,
+    },
+    {
+      name: '부산광역시 기장군 철마면',
+      latitude: 35.2752833,
+      longitude: 129.1497125,
+    },
+  ];
+};
diff --git a/frontend/src/mocks/handlers/stationSearchHandlers.ts b/frontend/src/mocks/handlers/stationSearchHandlers.ts
index b29c22cb7..8bfd4e07e 100644
--- a/frontend/src/mocks/handlers/stationSearchHandlers.ts
+++ b/frontend/src/mocks/handlers/stationSearchHandlers.ts
@@ -1,4 +1,4 @@
-import { getSearchedStations, stations } from '@mocks/data';
+import { getCities, getSearchedStations, stations } from '@mocks/data';
 import { rest } from 'msw';
 
 import { ERROR_MESSAGES } from '@constants/errorMessages';
@@ -13,6 +13,9 @@ export const stationSearchHandlers = [
     }
 
     const searchResult = {
+      cities: getCities()
+        .filter((city) => city.name.includes(searchWord))
+        .slice(0, 3),
       stations: getSearchedStations(searchWord),
     };
 

From 5869797a45980882158fa4f910d2bb33d13a0f8c Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:53:59 +0900
Subject: [PATCH 14/35] =?UTF-8?q?feat:=20=EB=8F=84=EC=8B=9C=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EA=B2=B0=EA=B3=BC=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx   | 12 ++++------
 frontend/src/mocks/data.ts                    | 24 +++++++++----------
 .../mocks/handlers/stationSearchHandlers.ts   |  2 +-
 3 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 217486157..33c141381 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -56,15 +56,11 @@ const SearchResult = ({
 
   return (
     <List aria-live="assertive" mt={1} css={searchResultListCss}>
-      {stations.length ? (
+      {stations.length !== 0 || cities.length !== 0 ? (
         <>
-          <SearchedCityCard
-            city={{
-              cityName: '경기도 하남시',
-              latitude: 37.539,
-              longitude: 127.214,
-            }}
-          />
+          {cities.map((city) => (
+            <SearchedCityCard city={city} key={city.cityName} />
+          ))}
           <>
             {stations.map((station) => (
               <SearchedStationCard
diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 172180698..a5ae0004d 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -379,62 +379,62 @@ export const getRegionName = (regionName: string): RegionName | undefined => {
 export const getCities = () => {
   return [
     {
-      name: '서울특별시',
+      cityName: '서울특별시',
       latitude: 37.5666103,
       longitude: 126.9783882,
     },
     {
-      name: '서울특별시 강동구',
+      cityName: '서울특별시 강동구',
       latitude: 37.530126,
       longitude: 127.1237708,
     },
     {
-      name: '서울특별시 강동구 천호동',
+      cityName: '서울특별시 강동구 천호동',
       latitude: 37.5450159,
       longitude: 127.1368066,
     },
     {
-      name: '경기도 하남시 미사동',
+      cityName: '경기도 하남시 미사동',
       latitude: 37.560359,
       longitude: 127.1888042,
     },
     {
-      name: '경기도 하남시 망월동',
+      cityName: '경기도 하남시 망월동',
       latitude: 37.5696083,
       longitude: 127.1880625,
     },
     {
-      name: '경상남도 진주시 신안동',
+      cityName: '경상남도 진주시 신안동',
       latitude: 35.1844853,
       longitude: 128.0689824,
     },
     {
-      name: '경상남도 진주시',
+      cityName: '경상남도 진주시',
       latitude: 35.180325,
       longitude: 128.107646,
     },
     {
-      name: '경기도 안산시 단원구 선부동',
+      cityName: '경기도 안산시 단원구 선부동',
       latitude: 37.3342173,
       longitude: 126.8044133,
     },
     {
-      name: '경기도 오산시 부산동',
+      cityName: '경기도 오산시 부산동',
       latitude: 37.1527237,
       longitude: 127.088125,
     },
     {
-      name: '부산광역시',
+      cityName: '부산광역시',
       latitude: 35.179816,
       longitude: 129.0750223,
     },
     {
-      name: '부산광역시 기장군',
+      cityName: '부산광역시 기장군',
       latitude: 35.244498,
       longitude: 129.222312,
     },
     {
-      name: '부산광역시 기장군 철마면',
+      cityName: '부산광역시 기장군 철마면',
       latitude: 35.2752833,
       longitude: 129.1497125,
     },
diff --git a/frontend/src/mocks/handlers/stationSearchHandlers.ts b/frontend/src/mocks/handlers/stationSearchHandlers.ts
index 8bfd4e07e..b9a902dd5 100644
--- a/frontend/src/mocks/handlers/stationSearchHandlers.ts
+++ b/frontend/src/mocks/handlers/stationSearchHandlers.ts
@@ -14,7 +14,7 @@ export const stationSearchHandlers = [
 
     const searchResult = {
       cities: getCities()
-        .filter((city) => city.name.includes(searchWord))
+        .filter((city) => city.cityName.includes(searchWord))
         .slice(0, 3),
       stations: getSearchedStations(searchWord),
     };

From d53670ec765cf7443ddca2b3068a726e2cabcb67 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:55:56 +0900
Subject: [PATCH 15/35] =?UTF-8?q?feat:=20=EB=8F=84=EC=8B=9C=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EA=B2=B0=EA=B3=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?=
 =?UTF-8?q?=20=ED=95=B4=EB=8B=B9=20=EC=A7=80=EC=97=AD=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=8F=99=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../components/ui/StationSearchWindow/SearchedCityCard.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 40e1c40eb..9062567d8 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -1,5 +1,7 @@
 import { MapPinIcon } from '@heroicons/react/24/outline';
 
+import { googleMapActions } from '@stores/google-maps/googleMapStore';
+
 import Button from '@common/Button';
 import FlexBox from '@common/FlexBox';
 import ListItem from '@common/ListItem';
@@ -21,7 +23,7 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
           width="100%"
           noRadius="all"
           background="transparent"
-          onMouseDown={() => alert(`${cityName}(으)로 이동합니다. ${latitude}, ${longitude}`)}
+          onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
         >
           <FlexBox justifyContent="between" alignItems="center">
             <FlexBox alignItems="center" gap={2}>

From 8c04c6d0629c22403efebc0560b4657c51db62bf Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Fri, 6 Oct 2023 17:58:51 +0900
Subject: [PATCH 16/35] =?UTF-8?q?refactor:=20fragment=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../components/ui/StationSearchWindow/SearchResult.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 33c141381..b353e1e28 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -58,9 +58,11 @@ const SearchResult = ({
     <List aria-live="assertive" mt={1} css={searchResultListCss}>
       {stations.length !== 0 || cities.length !== 0 ? (
         <>
-          {cities.map((city) => (
-            <SearchedCityCard city={city} key={city.cityName} />
-          ))}
+          <>
+            {cities.map((city) => (
+              <SearchedCityCard city={city} key={city.cityName} />
+            ))}
+          </>
           <>
             {stations.map((station) => (
               <SearchedStationCard

From 2a06e622682f0b686f4b2c0314097c08212d1de6 Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Fri, 6 Oct 2023 23:56:06 +0900
Subject: [PATCH 17/35] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EB=B0=94=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 frontend/src/components/common/Button/Button.style.ts     | 8 +++++---
 .../ui/StationSearchWindow/SearchedCityCard.tsx           | 6 +++---
 .../ui/StationSearchWindow/StationSearchBar.tsx           | 2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/common/Button/Button.style.ts b/frontend/src/components/common/Button/Button.style.ts
index 4a5fb91a7..d73e6b4a1 100644
--- a/frontend/src/components/common/Button/Button.style.ts
+++ b/frontend/src/components/common/Button/Button.style.ts
@@ -2,8 +2,9 @@ import styled, { css } from 'styled-components';
 
 import type { ButtonProps } from '@common/Button/Button';
 import { spacing } from '@common/styles/spacing';
+import { addUnit } from '@common/utils/addUnit';
 
-import { borderRadius, getSize, pillStyle } from '@style';
+import { borderRadius, pillStyle } from '@style';
 
 import type { BorderRadiusDirectionType } from '@type';
 
@@ -28,8 +29,9 @@ export type StyledButtonType = Omit<ButtonProps, 'noRadius'> & {
 };
 
 export const StyledButton = styled.button<StyledButtonType>`
-  width: ${({ width }) => getSize(width)};
-  height: ${({ height }) => getSize(height)};
+  ${({ width }) => width !== undefined && `width: ${addUnit(width)}`};
+  ${({ height }) => height !== undefined && `height: ${addUnit(height)}`};
+
   padding: ${({ size }) => BUTTON_PADDING_SIZE[size] || 0};
   background: ${({ background }) => background || '#fff'};
   border: ${({ outlined }) => (outlined ? '0.15rem solid #000' : 'none')};
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 9062567d8..9c6e70cf6 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -1,4 +1,4 @@
-import { MapPinIcon } from '@heroicons/react/24/outline';
+import { MapPinIcon } from '@heroicons/react/24/solid';
 
 import { googleMapActions } from '@stores/google-maps/googleMapStore';
 
@@ -27,8 +27,8 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
         >
           <FlexBox justifyContent="between" alignItems="center">
             <FlexBox alignItems="center" gap={2}>
-              <MapPinIcon width="1.6rem" stroke="#767676" />
-              <Text title={cityName} mb={0.5}>
+              <MapPinIcon width="1.6rem" fill="#888" />
+              <Text title={cityName} fontSize={1.3} mb={0.25} color="4b4b4b">
                 {cityName}
               </Text>
             </FlexBox>
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index 78bdf5148..cc33f3cdb 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -48,7 +48,7 @@ const StationSearchBar = () => {
             onFocus={handleOpenResult}
             onClick={handleOpenResult}
           />
-          <Button type="submit" aria-label="검색하기">
+          <Button type="submit" aria-label="검색하기" height={2.4}>
             {isFetching ? (
               <Loader size="md" />
             ) : (

From aea43ea091e417770d4f4c0c058e0b28402ab990 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 05:22:07 +0900
Subject: [PATCH 18/35] =?UTF-8?q?fix:=20msw=EC=97=90=EC=84=9C=20=EC=B6=A9?=
 =?UTF-8?q?=EC=A0=84=EC=86=8C=20=EA=B2=80=EC=83=89=20=EC=8B=9C=20=EC=A3=BC?=
 =?UTF-8?q?=EC=86=8C=EA=B0=80=20=EA=B3=A0=EB=A0=A4=EB=90=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 frontend/src/mocks/data.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index a5ae0004d..505a3f4c8 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -106,7 +106,9 @@ export const getSearchedStations = (searchWord: string) => {
   });
 
   return searchApiStations
-    .filter((station) => station.stationName.includes(searchWord))
+    .filter(
+      (station) => station.stationName.includes(searchWord) || station.address.includes(searchWord)
+    )
     .slice(0, MAX_SEARCH_RESULTS);
 };
 

From f8cae0922bca366ca1cad54b0895e625168f60b1 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 05:34:07 +0900
Subject: [PATCH 19/35] =?UTF-8?q?refactor:=20=EB=8F=84=EC=8B=9C=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=EC=8B=9C=20=EC=9D=B4=EB=8F=99=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0=20=EB=AC=B8=EA=B5=AC=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchedCityCard.tsx     | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 9062567d8..7c5452562 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -25,15 +25,10 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
           background="transparent"
           onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
         >
-          <FlexBox justifyContent="between" alignItems="center">
-            <FlexBox alignItems="center" gap={2}>
-              <MapPinIcon width="1.6rem" stroke="#767676" />
-              <Text title={cityName} mb={0.5}>
-                {cityName}
-              </Text>
-            </FlexBox>
-            <Text variant="caption" color="#585858">
-              이동하기
+          <FlexBox alignItems="center" gap={2}>
+            <MapPinIcon width="1.6rem" stroke="#767676" />
+            <Text title={cityName} mb={0.5} lineClamp={1}>
+              {cityName}
             </Text>
           </FlexBox>
         </Button>

From 53889e86cf494ff81f133577cec5b61c688c9cd3 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 07:03:59 +0900
Subject: [PATCH 20/35] =?UTF-8?q?refactor:=20SearchResult=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx   | 35 ++++++++-----------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index b353e1e28..b138c2dbd 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -3,12 +3,12 @@ import { useEffect } from 'react';
 import List from '@common/List';
 
 import Error from '@ui/Error';
-import SearchedCityCard from '@ui/StationSearchWindow/SearchedCityCard';
 
 import type { SearchedCity, SearchedStation, StationPosition } from '@type/stations';
 
 import NoResult from './NoResult';
 import { searchResultListCss } from './SearchResult.style';
+import SearchedCityCard from './SearchedCityCard';
 import SearchedStationCard from './SearchedStationCard';
 
 export interface SearchResultProps {
@@ -28,6 +28,18 @@ const SearchResult = ({
   showStationDetails,
   closeResult,
 }: SearchResultProps) => {
+  const isExistResults = stations.length !== 0 || cities.length !== 0;
+  const renderResults = [
+    ...cities.map((city) => <SearchedCityCard city={city} key={city.cityName} />),
+    ...stations.map((station) => (
+      <SearchedStationCard
+        station={station}
+        handleShowStationDetails={handleShowStationDetails}
+        key={station.stationId}
+      />
+    )),
+  ];
+
   const handleShowStationDetails = ({ stationId, latitude, longitude }: StationPosition) => {
     showStationDetails({ stationId, latitude, longitude });
   };
@@ -56,26 +68,7 @@ const SearchResult = ({
 
   return (
     <List aria-live="assertive" mt={1} css={searchResultListCss}>
-      {stations.length !== 0 || cities.length !== 0 ? (
-        <>
-          <>
-            {cities.map((city) => (
-              <SearchedCityCard city={city} key={city.cityName} />
-            ))}
-          </>
-          <>
-            {stations.map((station) => (
-              <SearchedStationCard
-                station={station}
-                handleShowStationDetails={handleShowStationDetails}
-                key={station.stationId}
-              />
-            ))}
-          </>
-        </>
-      ) : (
-        <NoResult />
-      )}
+      {isExistResults ? renderResults : <NoResult />}
     </List>
   );
 };

From a10e3d8a0fd691300c4de17e5fbeb1dbc3500afb Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 07:17:52 +0900
Subject: [PATCH 21/35] =?UTF-8?q?fix:=20handleShowStationDetails=20?=
 =?UTF-8?q?=EC=84=A0=EC=96=B8=20=EC=88=9C=EC=84=9C=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.tsx   | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index b138c2dbd..3611abb3b 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -28,18 +28,6 @@ const SearchResult = ({
   showStationDetails,
   closeResult,
 }: SearchResultProps) => {
-  const isExistResults = stations.length !== 0 || cities.length !== 0;
-  const renderResults = [
-    ...cities.map((city) => <SearchedCityCard city={city} key={city.cityName} />),
-    ...stations.map((station) => (
-      <SearchedStationCard
-        station={station}
-        handleShowStationDetails={handleShowStationDetails}
-        key={station.stationId}
-      />
-    )),
-  ];
-
   const handleShowStationDetails = ({ stationId, latitude, longitude }: StationPosition) => {
     showStationDetails({ stationId, latitude, longitude });
   };
@@ -52,6 +40,18 @@ const SearchResult = ({
     };
   }, []);
 
+  const isExistResults = stations.length !== 0 || cities.length !== 0;
+  const renderResults = [
+    ...cities.map((city) => <SearchedCityCard city={city} key={city.cityName} />),
+    ...stations.map((station) => (
+      <SearchedStationCard
+        station={station}
+        handleShowStationDetails={handleShowStationDetails}
+        key={station.stationId}
+      />
+    )),
+  ];
+
   if (isLoading) {
     return <></>;
   }

From 2e5928c587fd14f96fb95f3ffda69f4a5dc64b04 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 07:24:26 +0900
Subject: [PATCH 22/35] =?UTF-8?q?fix:=20storybook=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../components/ui/StationSearchWindow/SearchResult.stories.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
index 100c88700..9c0adecb9 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
@@ -66,6 +66,7 @@ export const NoResult = () => {
   return (
     <SubContainer>
       <SearchResult
+        cities={[]}
         stations={[]}
         closeResult={() => null}
         isError={false}
@@ -80,6 +81,7 @@ export const Error = () => {
   return (
     <Container>
       <SearchResult
+        cities={[]}
         stations={[]}
         closeResult={() => null}
         isError={true}

From 4681d864650c39b2f950cf259767c327649f6c4d Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 07:27:38 +0900
Subject: [PATCH 23/35] =?UTF-8?q?fix:=20storybook=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchResult.stories.tsx  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
index 9c0adecb9..ec0ca4b59 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
@@ -9,6 +9,18 @@ const meta = {
   tags: ['autodocs'],
   component: SearchResult,
   args: {
+    cities: [
+      {
+        cityName: '서울특별시 강동구 천호동',
+        latitude: 1,
+        longitude: 1,
+      },
+      {
+        cityName: '서울특별시 강동구 명일동',
+        latitude: 1,
+        longitude: 1,
+      },
+    ],
     stations: [
       {
         stationId: '0',

From 0dbb3c3788cf83bd04d0fa7a7ae9cae4b21e562e Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 09:48:46 +0900
Subject: [PATCH 24/35] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=EB=B0=94=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=20=EB=8F=8B=EB=B3=B4=EA=B8=B0=EB=9E=91=20?=
 =?UTF-8?q?=EB=A1=9C=EB=8D=94=20=EA=B0=80=EC=9A=B4=EB=8D=B0=EB=A1=9C=20?=
 =?UTF-8?q?=EC=98=A4=EA=B2=8C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 frontend/src/components/common/FlexBox/FlexBox.tsx   |  4 ++--
 .../ui/StationSearchWindow/StationSearchBar.tsx      | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/common/FlexBox/FlexBox.tsx b/frontend/src/components/common/FlexBox/FlexBox.tsx
index 4109755a2..6e0a21148 100644
--- a/frontend/src/components/common/FlexBox/FlexBox.tsx
+++ b/frontend/src/components/common/FlexBox/FlexBox.tsx
@@ -1,6 +1,6 @@
 import type { CSSProp } from 'styled-components';
 
-import { type HTMLAttributes, type ReactNode } from 'react';
+import type { ReactNode, ComponentPropsWithoutRef, ElementType } from 'react';
 
 import type { SpacingProps } from '@common/styles/spacing';
 
@@ -9,7 +9,7 @@ import type { AxisType, BorderRadiusDirectionType } from '@type/style';
 import type { FLEX_BOX_ITEM_POSITION } from './FlexBox.style';
 import { StyledFlexBox } from './FlexBox.style';
 
-export interface FlexBoxProps extends HTMLAttributes<HTMLDivElement>, SpacingProps {
+export interface FlexBoxProps extends ComponentPropsWithoutRef<ElementType>, SpacingProps {
   tag?: string;
   height?: number | string;
   minHeight?: number | string;
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index cc33f3cdb..b51517983 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { useSearchStations } from '@hooks/tanstack-query/useSearchStations';
 import { useDebounce } from '@hooks/useDebounce';
 
-import Button from '@common/Button';
+import FlexBox from '@common/FlexBox';
 import Loader from '@common/Loader';
 
 import SearchResult from './SearchResult';
@@ -48,13 +48,19 @@ const StationSearchBar = () => {
             onFocus={handleOpenResult}
             onClick={handleOpenResult}
           />
-          <Button type="submit" aria-label="검색하기" height={2.4}>
+          <FlexBox
+            tag="button"
+            type="submit"
+            aria-label="검색하기"
+            height={2.4}
+            alignItems="center"
+          >
             {isFetching ? (
               <Loader size="md" />
             ) : (
               <MagnifyingGlassIcon width="2.4rem" stroke="#767676" />
             )}
-          </Button>
+          </FlexBox>
         </label>
       </StyledForm>
       {isFocused && data && (

From 3042c69c0eda505133e555032a389d55d011bc96 Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 09:49:29 +0900
Subject: [PATCH 25/35] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/NoResult.tsx       | 22 ++++++++-----------
 .../StationSearchWindow/SearchResult.style.ts |  7 ++----
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/NoResult.tsx b/frontend/src/components/ui/StationSearchWindow/NoResult.tsx
index 95b330de3..072e91105 100644
--- a/frontend/src/components/ui/StationSearchWindow/NoResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/NoResult.tsx
@@ -1,22 +1,18 @@
 import ListItem from '@common/ListItem';
 import Text from '@common/Text';
 
-import { noSearchResultCss } from '@ui/StationSearchWindow/SearchResult.style';
-
 const NoResult = () => {
   return (
-    <>
-      <ListItem mt={3} css={noSearchResultCss} pb={0}>
+    <ListItem>
+      <Text mt={3} fontSize={1.8} weight="bold">
         검색 결과가 없습니다.
-      </ListItem>
-      <ListItem mt={1} mb={5}>
-        <Text variant="subtitle">검색어를 다시 한 번 확인해 주세요.</Text>
-        <Text tag="span" css={{ display: 'block' }}>
-          ·&nbsp; 오타는 없나요?
-        </Text>
-        <Text tag="span">·&nbsp; 띄어쓰기가 잘못되진 않았나요?</Text>
-      </ListItem>
-    </>
+      </Text>
+      <Text variant="subtitle" mt={1}>
+        검색어를 다시 한 번 확인해 주세요.
+      </Text>
+      <Text>·&nbsp; 오타는 없나요?</Text>
+      <Text mb={5}>·&nbsp; 띄어쓰기가 잘못되진 않았나요?</Text>
+    </ListItem>
   );
 };
 
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts b/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts
index 4be48d905..86b496928 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.style.ts
@@ -23,12 +23,9 @@ export const searchResultListCss = css`
 `;
 
 export const foundStationListCss = css`
+  display: flex;
+
   &:hover {
     background: #f5f5f5;
   }
 `;
-
-export const noSearchResultCss = css`
-  font-size: 1.8rem;
-  font-weight: 600;
-`;

From 5aeca43326533ebdfc04832e5b6e6a3eebd606d3 Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 10:46:40 +0900
Subject: [PATCH 26/35] =?UTF-8?q?refactor:=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 frontend/src/components/ui/Error.tsx             | 14 ++++++++------
 .../ui/StationSearchWindow/SearchResult.tsx      | 16 ++++++++++------
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/Error.tsx b/frontend/src/components/ui/Error.tsx
index db9502c60..48d8fac4c 100644
--- a/frontend/src/components/ui/Error.tsx
+++ b/frontend/src/components/ui/Error.tsx
@@ -1,34 +1,34 @@
 import Box from '@common/Box';
 import ButtonNext from '@common/ButtonNext';
 import FlexBox from '@common/FlexBox';
+import type { FlexBoxProps } from '@common/FlexBox/FlexBox';
 import Text from '@common/Text';
 
-export interface ErrorProps {
+export interface ErrorProps extends Partial<FlexBoxProps> {
   fontSize?: number | string;
   title: string;
   message: string;
   subMessage?: string;
   handleRetry?: () => void;
-  minHeight?: string | number;
 }
 
-const Error = ({ title, message, subMessage, handleRetry, fontSize, minHeight }: ErrorProps) => {
+const Error = ({ title, message, subMessage, handleRetry, fontSize, ...props }: ErrorProps) => {
   return (
     <FlexBox
       width="100%"
       height="100%"
       justifyContent="center"
       alignItems="center"
-      minHeight={minHeight}
+      {...props}
       css={{
         fontSize: typeof fontSize === 'string' ? fontSize : `${fontSize}rem`,
       }}
     >
       <Box css={{ wordBreak: 'keep-all' }}>
-        <Text align="center" css={{ fontSize: '10em', fontWeight: 'bold' }} mb={7}>
+        <Text align="center" weight="bold" css={{ fontSize: '10em' }} mb={7}>
           {title}
         </Text>
-        <Text align="center" mb={2}>
+        <Text align="center" mb={1}>
           {message}
         </Text>
         <Text align="center">{subMessage}</Text>
@@ -39,8 +39,10 @@ const Error = ({ title, message, subMessage, handleRetry, fontSize, minHeight }:
             variant="outlined"
             color="dark"
             size="xs"
+            fullWidth
             mt={6}
             mb={8}
+            py={1}
           >
             다시 시도하기
           </ButtonNext>
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 3611abb3b..3b9b5620c 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -58,12 +58,16 @@ const SearchResult = ({
 
   if (isError)
     return (
-      <Error
-        title="문제가 발생했어요!"
-        message="예상하지 못한 오류로"
-        subMessage="검색 결과를 가져오지 못했습니다."
-        fontSize="40%"
-      />
+      <List aria-live="assertive" mt={1} css={searchResultListCss}>
+        <Error
+          title="문제가 발생했어요!"
+          message="예상하지 못한 오류로"
+          subMessage="검색 결과를 가져오지 못했습니다."
+          fontSize="20%"
+          pt={6}
+          pb={3}
+        />
+      </List>
     );
 
   return (

From a8d348f30bc1e8e4c5e3f35f42d5990a53536511 Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 10:47:38 +0900
Subject: [PATCH 27/35] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/StationSearchBar.tsx           | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index b51517983..db912b881 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -48,13 +48,7 @@ const StationSearchBar = () => {
             onFocus={handleOpenResult}
             onClick={handleOpenResult}
           />
-          <FlexBox
-            tag="button"
-            type="submit"
-            aria-label="검색하기"
-            height={2.4}
-            alignItems="center"
-          >
+          <FlexBox tag="button" aria-label="검색하기" height={2.4} alignItems="center">
             {isFetching ? (
               <Loader size="md" />
             ) : (

From ed40b7e3929b631797c58e2082c3367724d1077e Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 10:49:54 +0900
Subject: [PATCH 28/35] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EB=B6=80=EB=B6=84=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../StationSearchWindow/SearchedCityCard.tsx  | 34 +++++++++---------
 .../SearchedStationCard.tsx                   | 35 +++++++++++++------
 2 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 660f259dc..a8700ff71 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -9,6 +9,8 @@ import Text from '@common/Text';
 
 import type { SearchedCity } from '@type';
 
+import { foundStationListCss } from './SearchResult.style';
+
 export interface SearchedCityCardProps {
   city: SearchedCity;
 }
@@ -17,24 +19,20 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
   const { cityName, latitude, longitude } = city;
 
   return (
-    <ListItem divider>
-      <FlexBox alignItems="center">
-        <Button
-          width="100%"
-          noRadius="all"
-          background="transparent"
-          onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
-        >
-          <FlexBox justifyContent="between" alignItems="center">
-            <FlexBox alignItems="center" gap={2}>
-              <MapPinIcon width="1.6rem" fill="#888" />
-              <Text title={cityName} fontSize={1.3} mb={0.25} color="4b4b4b">
-                {cityName}
-              </Text>
-            </FlexBox>
-          </FlexBox>
-        </Button>
-      </FlexBox>
+    <ListItem divider NoLastDivider css={foundStationListCss}>
+      <Button
+        width="100%"
+        noRadius="all"
+        background="transparent"
+        onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
+      >
+        <FlexBox alignItems="center" rowGap={2}>
+          <MapPinIcon width="1.6rem" fill="#888" />
+          <Text title={cityName} fontSize={1.3} mb={0.25} color="#585858">
+            {cityName}
+          </Text>
+        </FlexBox>
+      </Button>
     </ListItem>
   );
 };
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index a2864c709..fba63daf3 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -1,4 +1,8 @@
-import Button from '@common/Button';
+import { css } from 'styled-components';
+
+import { RiChargingPile2Fill } from 'react-icons/ri';
+
+import FlexBox from '@common/FlexBox';
 import ListItem from '@common/ListItem';
 import Text from '@common/Text';
 
@@ -15,20 +19,31 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
   const { stationId, stationName, address, latitude, longitude } = station;
 
   return (
-    <ListItem divider NoLastDivider pt={2} pb={3} css={foundStationListCss}>
-      <Button
+    <ListItem divider NoLastDivider pb={3} css={foundStationListCss}>
+      <FlexBox
+        tag="button"
+        type="button"
         width="100%"
         noRadius="all"
         background="transparent"
+        rowGap={2}
         onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
+        css={css`
+          & > svg {
+            margin-top: 4px;
+          }
+        `}
       >
-        <Text variant="h6" align="left" title={stationName} lineClamp={1}>
-          {stationName}
-        </Text>
-        <Text variant="label" align="left" lineClamp={1} color="#585858">
-          {address || '주소 미확인'}
-        </Text>
-      </Button>
+        <RiChargingPile2Fill width="1.6rem" fill="#585858" />
+        <div>
+          <Text weight="regular" align="left" title={stationName} lineClamp={1}>
+            {stationName}
+          </Text>
+          <Text fontSize={1.3} align="left" lineClamp={1} color="#585858">
+            {address || '주소 미확인'}
+          </Text>
+        </div>
+      </FlexBox>
     </ListItem>
   );
 };

From ed7888b6e93677f2d1d1e25f4bac1936f4db1948 Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 10:58:58 +0900
Subject: [PATCH 29/35] =?UTF-8?q?refactor:=20api=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EC=A3=BC=EC=86=8C=EA=B0=80=20'null'=EC=9D=B8=20=EA=B2=BD?=
 =?UTF-8?q?=EC=9A=B0=EB=8F=84=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../components/ui/StationSearchWindow/SearchedStationCard.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index fba63daf3..3d5809dc0 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -40,7 +40,7 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
             {stationName}
           </Text>
           <Text fontSize={1.3} align="left" lineClamp={1} color="#585858">
-            {address || '주소 미확인'}
+            {address === 'null' || !address ? '주소 미확인' : address}
           </Text>
         </div>
       </FlexBox>

From 964409750eb11738f8cbcdf3cc7f14d878f7d5b4 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 12:31:59 +0900
Subject: [PATCH 30/35] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=EC=9D=98=20rowGap=20->=20columnGap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../src/components/ui/StationSearchWindow/SearchedCityCard.tsx  | 2 +-
 .../components/ui/StationSearchWindow/SearchedStationCard.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index a8700ff71..bb21b98dc 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -26,7 +26,7 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
         background="transparent"
         onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
       >
-        <FlexBox alignItems="center" rowGap={2}>
+        <FlexBox alignItems="center" columnGap={2}>
           <MapPinIcon width="1.6rem" fill="#888" />
           <Text title={cityName} fontSize={1.3} mb={0.25} color="#585858">
             {cityName}
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index 3d5809dc0..2931037de 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -26,7 +26,7 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
         width="100%"
         noRadius="all"
         background="transparent"
-        rowGap={2}
+        columnGap={2}
         onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
         css={css`
           & > svg {

From d698820ce9d2d417d2d1456fe081de24714f0302 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 14:22:05 +0900
Subject: [PATCH 31/35] =?UTF-8?q?fix:=20=EC=98=A4=EB=A5=98=20=EB=B0=A9?=
 =?UTF-8?q?=EC=A7=80=20=EB=B0=B0=EC=97=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../src/components/ui/StationSearchWindow/SearchResult.tsx    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
index 3b9b5620c..675b66205 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.tsx
@@ -21,8 +21,8 @@ export interface SearchResultProps {
 }
 
 const SearchResult = ({
-  cities,
-  stations,
+  cities = [],
+  stations = [],
   isLoading,
   isError,
   showStationDetails,

From 03f0c08b1bab59ea8d3f5c8288ed155988c61a1d Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 7 Oct 2023 14:28:58 +0900
Subject: [PATCH 32/35] =?UTF-8?q?fix:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EB=84=88?=
 =?UTF-8?q?=EB=AC=B4=20=EA=B8=B4=20=EA=B2=BD=EC=9A=B0=EB=A5=BC=20=EB=8C=80?=
 =?UTF-8?q?=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../src/components/ui/StationSearchWindow/SearchedCityCard.tsx  | 2 +-
 .../components/ui/StationSearchWindow/SearchedStationCard.tsx   | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index bb21b98dc..479ff9711 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -26,7 +26,7 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
         background="transparent"
         onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
       >
-        <FlexBox alignItems="center" columnGap={2}>
+        <FlexBox alignItems="center" columnGap={2} nowrap>
           <MapPinIcon width="1.6rem" fill="#888" />
           <Text title={cityName} fontSize={1.3} mb={0.25} color="#585858">
             {cityName}
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index 2931037de..c09b9fe6b 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -28,6 +28,7 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
         background="transparent"
         columnGap={2}
         onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
+        nowrap
         css={css`
           & > svg {
             margin-top: 4px;

From 16a175d319b118f1b36a1a18efeb6561da3d4a4b Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 15:38:39 +0900
Subject: [PATCH 33/35] =?UTF-8?q?fix:=20=EC=B6=A9=EC=A0=84=EC=86=8C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=EC=9D=B4=20=EA=B8=B8=EC=96=B4=EC=A7=80?=
 =?UTF-8?q?=EB=A9=B4=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=A4=84=EC=96=B4?=
 =?UTF-8?q?=EB=93=9C=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../ui/StationSearchWindow/SearchedStationCard.tsx  | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index c09b9fe6b..6e8cb6e8e 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -29,11 +29,7 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
         columnGap={2}
         onMouseDown={() => handleShowStationDetails({ stationId, latitude, longitude })}
         nowrap
-        css={css`
-          & > svg {
-            margin-top: 4px;
-          }
-        `}
+        css={iconCss}
       >
         <RiChargingPile2Fill width="1.6rem" fill="#585858" />
         <div>
@@ -49,4 +45,11 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
   );
 };
 
+const iconCss = css`
+  & > svg {
+    margin-top: 0.4rem;
+    flex-shrink: 0;
+  }
+`;
+
 export default SearchedStationCard;

From 225e175a974f63c2f918c2190a1434cd28c4634b Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 15:55:28 +0900
Subject: [PATCH 34/35] =?UTF-8?q?fix:=20=EC=A3=BC=EC=86=8C=EA=B0=80=201?=
 =?UTF-8?q?=EC=A4=84=EB=A1=9C=EB=A7=8C=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0=20=EB=B0=8F=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../SearchResult.stories.tsx                   | 13 +++++++++++++
 .../StationSearchWindow/SearchedCityCard.tsx   | 18 ++++++++++++++++--
 .../SearchedStationCard.tsx                    |  2 +-
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx b/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
index ec0ca4b59..906666e08 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchResult.stories.tsx
@@ -20,6 +20,11 @@ const meta = {
         latitude: 1,
         longitude: 1,
       },
+      {
+        cityName: '서울특별시 강동구 명일동 413-12번지 카페인 빌딩',
+        latitude: 1,
+        longitude: 1,
+      },
     ],
     stations: [
       {
@@ -38,6 +43,14 @@ const meta = {
         latitude: 1,
         longitude: 1,
       },
+      {
+        stationId: '2',
+        stationName: '완전 엄청나게 이름이 긴 충전소를 테스트',
+        speed: 'standard',
+        address: '서울시 강남구 테헤란로 411 천호빌딩 지하 14층',
+        latitude: 1,
+        longitude: 1,
+      },
     ],
     isLoading: false,
     isError: false,
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
index 479ff9711..c3d735f48 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedCityCard.tsx
@@ -1,4 +1,5 @@
 import { MapPinIcon } from '@heroicons/react/24/solid';
+import { css } from 'styled-components';
 
 import { googleMapActions } from '@stores/google-maps/googleMapStore';
 
@@ -26,9 +27,16 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
         background="transparent"
         onMouseDown={() => googleMapActions.moveTo({ lat: latitude, lng: longitude }, 14)}
       >
-        <FlexBox alignItems="center" columnGap={2} nowrap>
+        <FlexBox alignItems="center" columnGap={2} nowrap css={iconCss}>
           <MapPinIcon width="1.6rem" fill="#888" />
-          <Text title={cityName} fontSize={1.3} mb={0.25} color="#585858">
+          <Text
+            title={cityName}
+            align="left"
+            lineClamp={1}
+            fontSize={1.3}
+            mb={0.25}
+            color="#585858"
+          >
             {cityName}
           </Text>
         </FlexBox>
@@ -37,4 +45,10 @@ const SearchedCityCard = ({ city }: SearchedCityCardProps) => {
   );
 };
 
+const iconCss = css`
+  & > svg {
+    flex-shrink: 0;
+  }
+`;
+
 export default SearchedCityCard;
diff --git a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
index 6e8cb6e8e..b181ac395 100644
--- a/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/SearchedStationCard.tsx
@@ -31,7 +31,7 @@ const SearchedStationCard = ({ station, handleShowStationDetails }: SearchedStat
         nowrap
         css={iconCss}
       >
-        <RiChargingPile2Fill width="1.6rem" fill="#585858" />
+        <RiChargingPile2Fill size={16} fill="#585858" />
         <div>
           <Text weight="regular" align="left" title={stationName} lineClamp={1}>
             {stationName}

From 51efce6d84bf9f4333de703ce377de4ee559d9c3 Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sat, 7 Oct 2023 16:03:33 +0900
Subject: [PATCH 35/35] =?UTF-8?q?refactor:=20=EB=B3=80=EC=88=98=EB=AA=85?=
 =?UTF-8?q?=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#834]
---
 .../StationSearchBar.stories.tsx                    | 13 +++++++++----
 .../ui/StationSearchWindow/StationSearchBar.tsx     | 13 +++++++++----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
index 94afcf55a..a07d0d683 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.stories.tsx
@@ -53,7 +53,12 @@ export const Default = () => {
     400
   );
 
-  const { data, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
+  const {
+    data: searchResult,
+    isLoading,
+    isError,
+    isFetching,
+  } = useSearchStations(debouncedSearchWord);
 
   const handleOpenResult = (event: MouseEvent<HTMLInputElement> | FocusEvent<HTMLInputElement>) => {
     event.stopPropagation();
@@ -113,10 +118,10 @@ export const Default = () => {
           </Button>
         </label>
       </S.Form>
-      {isFocused && data && (
+      {isFocused && searchResult && (
         <SearchResult
-          cities={data.cities}
-          stations={data.stations}
+          cities={searchResult.cities}
+          stations={searchResult.stations}
           isLoading={isLoading}
           isError={isError}
           showStationDetails={showStationDetails}
diff --git a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
index db912b881..5540ea4b6 100644
--- a/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
+++ b/frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx
@@ -32,7 +32,12 @@ const StationSearchBar = () => {
     400
   );
 
-  const { data, isLoading, isError, isFetching } = useSearchStations(debouncedSearchWord);
+  const {
+    data: searchResult,
+    isLoading,
+    isError,
+    isFetching,
+  } = useSearchStations(debouncedSearchWord);
 
   return (
     <StyledContainer>
@@ -57,10 +62,10 @@ const StationSearchBar = () => {
           </FlexBox>
         </label>
       </StyledForm>
-      {isFocused && data && (
+      {isFocused && searchResult && (
         <SearchResult
-          cities={data.cities}
-          stations={data.stations}
+          cities={searchResult.cities}
+          stations={searchResult.stations}
           isLoading={isLoading}
           isError={isError}
           showStationDetails={showStationDetails}