From 385111ac6da829f100c7a66ffee17635aa0b8b28 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 29 Jul 2023 20:33:31 +0900
Subject: [PATCH 01/27] =?UTF-8?q?feat:=20=EC=B6=A9=EC=A0=84=EC=86=8C=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=EC=A0=95=EB=B3=B4=20=EC=A1=B0=ED=9A=8C=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=88=84=EC=A0=81=20=EC=8B=A0=EA=B3=A0=20=ED=9A=9F?=
 =?UTF-8?q?=EC=88=98=EA=B0=80=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- reportCount 프로퍼티 추가
---
 frontend/src/components/ui/DetailedStationInfo.tsx | 3 +++
 frontend/src/mocks/data.ts                         | 1 +
 frontend/src/types/index.ts                        | 1 +
 3 files changed, 5 insertions(+)

diff --git a/frontend/src/components/ui/DetailedStationInfo.tsx b/frontend/src/components/ui/DetailedStationInfo.tsx
index f6bfd0c62..33f32c858 100644
--- a/frontend/src/components/ui/DetailedStationInfo.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo.tsx
@@ -21,6 +21,7 @@ const DetailedStationInfo = () => {
     isPrivate,
     stationState,
     privateReason,
+    reportCount,
   } = station;
 
   return (
@@ -51,6 +52,8 @@ const DetailedStationInfo = () => {
           </ChargerContainer>
         );
       })}
+
+      <div>누적 고장 신고 횟수: {reportCount}회</div>
     </Container>
   );
 };
diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index f535c3b27..5ec96da58 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -64,6 +64,7 @@ export const stations: MockStation[] = Array.from({ length: 3000 }).map((_, inde
     availableCount: generateRandomData<number>([0, 1, 2, 3]),
     stationState: generateRandomData(['yyyy-mm-dd일부터 충전소 공사합니다.', null]),
     privateReason: generateRandomData(['아파트', null]),
+    reportCount: generateRandomData([0, 0, 0, 0, Math.floor(Math.random() * 99)]),
   };
 });
 
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index f7e8c4e20..bc525ebe0 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -54,6 +54,7 @@ export interface StationDetails extends Station {
   chargers: ChargerDetails[];
   stationState: string | null;
   privateReason: string | null;
+  reportCount: number;
 }
 
 export interface MockStation extends StationDetails, ChargerCount {}

From 8a63d74b96b54db0426a0c852ecdfd47f90d8d78 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sat, 29 Jul 2023 21:03:51 +0900
Subject: [PATCH 02/27] =?UTF-8?q?refactor:=20=EC=B6=A9=EC=A0=84=EC=86=8C?=
 =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EC=9C=84=EC=B9=98?=
 =?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

---
 frontend/src/components/ui/ClientStationFilters.tsx | 2 +-
 frontend/src/components/ui/DetailedStationInfo.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/ClientStationFilters.tsx b/frontend/src/components/ui/ClientStationFilters.tsx
index 424031673..5085ae61c 100644
--- a/frontend/src/components/ui/ClientStationFilters.tsx
+++ b/frontend/src/components/ui/ClientStationFilters.tsx
@@ -91,7 +91,7 @@ const Container = styled.div`
   position: fixed;
   top: 10px;
   left: 180px;
-  z-index: 999;
+  z-index: 998;
   padding: 10px;
   background-color: white;
   box-shadow: 1px 1px 2px gray;
diff --git a/frontend/src/components/ui/DetailedStationInfo.tsx b/frontend/src/components/ui/DetailedStationInfo.tsx
index 33f32c858..3cba4e4ab 100644
--- a/frontend/src/components/ui/DetailedStationInfo.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo.tsx
@@ -60,8 +60,8 @@ const DetailedStationInfo = () => {
 
 const Container = styled.div`
   position: fixed;
-  top: 80px;
-  left: 180px;
+  left: 41rem;
+  width: 34rem;
   z-index: 999;
   padding: 10px;
   background-color: white;

From 20b269284a0f058b973e22d3a3e9ed00f434590c Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 00:04:53 +0900
Subject: [PATCH 03/27] =?UTF-8?q?refactor:=20=ED=8F=B4=EB=8D=94=20?=
 =?UTF-8?q?=EA=B5=AC=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

---
 frontend/src/components/google-maps/map/CarFfeineMap.tsx      | 4 ++--
 .../ui/{ => DetailedStationInfo}/DetailedStationInfo.tsx      | 3 ---
 frontend/src/components/ui/DetailedStationInfo/index.tsx      | 3 +++
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename frontend/src/components/ui/{ => DetailedStationInfo}/DetailedStationInfo.tsx (99%)
 create mode 100644 frontend/src/components/ui/DetailedStationInfo/index.tsx

diff --git a/frontend/src/components/google-maps/map/CarFfeineMap.tsx b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
index 7f2cc936e..c10279e6a 100644
--- a/frontend/src/components/google-maps/map/CarFfeineMap.tsx
+++ b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
@@ -10,7 +10,7 @@ import { getGoogleMapStore } from '@stores/googleMapStore';
 import { useUpdateStations } from '@hooks/useUpdateStations';
 
 import ClientStationFilters from '@ui/ClientStationFilters';
-import DetailedStationInfo from '@ui/DetailedStationInfo';
+import Index from '@ui/DetailedStationInfo/DetailedStationInfo';
 import MapController from '@ui/MapController';
 import Navigator from '@ui/Navigator';
 import ServerStationFilters from '@ui/ServerStationFilters';
@@ -25,7 +25,7 @@ const CarFfeineMap = () => {
       <CarFfeineMapListener />
       <StationMarkersContainer />
       <StationList />
-      <DetailedStationInfo />
+      <Index />
       <MapController />
       <ClientStationFilters />
       <Navigator />
diff --git a/frontend/src/components/ui/DetailedStationInfo.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
similarity index 99%
rename from frontend/src/components/ui/DetailedStationInfo.tsx
rename to frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
index 3cba4e4ab..7acc2e58b 100644
--- a/frontend/src/components/ui/DetailedStationInfo.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
@@ -57,7 +57,6 @@ const DetailedStationInfo = () => {
     </Container>
   );
 };
-
 const Container = styled.div`
   position: fixed;
   left: 41rem;
@@ -67,9 +66,7 @@ const Container = styled.div`
   background-color: white;
   box-shadow: 1px 1px 2px gray;
 `;
-
 const ChargerContainer = styled.ul`
   border: 1px solid #000;
 `;
-
 export default DetailedStationInfo;
diff --git a/frontend/src/components/ui/DetailedStationInfo/index.tsx b/frontend/src/components/ui/DetailedStationInfo/index.tsx
new file mode 100644
index 000000000..6ec23347c
--- /dev/null
+++ b/frontend/src/components/ui/DetailedStationInfo/index.tsx
@@ -0,0 +1,3 @@
+import DetailedStationInfo from './DetailedStationInfo';
+
+export default DetailedStationInfo;

From deff66101fbbd2df9428c85709a9bb9e24e8e539 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 00:05:25 +0900
Subject: [PATCH 04/27] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=88=EC=9E=90=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

---
 frontend/src/components/google-maps/map/CarFfeineMap.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/google-maps/map/CarFfeineMap.tsx b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
index c10279e6a..8d6dbf518 100644
--- a/frontend/src/components/google-maps/map/CarFfeineMap.tsx
+++ b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
@@ -10,7 +10,7 @@ import { getGoogleMapStore } from '@stores/googleMapStore';
 import { useUpdateStations } from '@hooks/useUpdateStations';
 
 import ClientStationFilters from '@ui/ClientStationFilters';
-import Index from '@ui/DetailedStationInfo/DetailedStationInfo';
+import DetailedStationInfo from '@ui/DetailedStationInfo/DetailedStationInfo';
 import MapController from '@ui/MapController';
 import Navigator from '@ui/Navigator';
 import ServerStationFilters from '@ui/ServerStationFilters';
@@ -25,7 +25,7 @@ const CarFfeineMap = () => {
       <CarFfeineMapListener />
       <StationMarkersContainer />
       <StationList />
-      <Index />
+      <DetailedStationInfo />
       <MapController />
       <ClientStationFilters />
       <Navigator />

From 8df9c21d7b8cdc1c528f968c1731f16d9d059583 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 00:05:44 +0900
Subject: [PATCH 05/27] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=88=EC=9E=90=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

---
 frontend/src/components/google-maps/map/CarFfeineMap.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/google-maps/map/CarFfeineMap.tsx b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
index 8d6dbf518..7f2cc936e 100644
--- a/frontend/src/components/google-maps/map/CarFfeineMap.tsx
+++ b/frontend/src/components/google-maps/map/CarFfeineMap.tsx
@@ -10,7 +10,7 @@ import { getGoogleMapStore } from '@stores/googleMapStore';
 import { useUpdateStations } from '@hooks/useUpdateStations';
 
 import ClientStationFilters from '@ui/ClientStationFilters';
-import DetailedStationInfo from '@ui/DetailedStationInfo/DetailedStationInfo';
+import DetailedStationInfo from '@ui/DetailedStationInfo';
 import MapController from '@ui/MapController';
 import Navigator from '@ui/Navigator';
 import ServerStationFilters from '@ui/ServerStationFilters';

From 12b6f82d817ca8697e1c557fd47ad32454363240 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 00:18:16 +0900
Subject: [PATCH 06/27] =?UTF-8?q?refactor:=20=ED=8C=8C=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B5=AC=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

---
 .../DetailedStationInfo/DetailedStation.tsx   | 73 +++++++++++++++++++
 .../DetailedStationInfo.tsx                   | 70 +++---------------
 2 files changed, 82 insertions(+), 61 deletions(-)
 create mode 100644 frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx

diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
new file mode 100644
index 000000000..309abe09f
--- /dev/null
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -0,0 +1,73 @@
+import { styled } from 'styled-components';
+
+import { CHARGER_TYPES } from '@constants';
+
+import type { StationDetails } from '../../../types';
+
+export interface DetailedStationProps {
+  station: StationDetails;
+}
+
+const DetailedStation = ({ station }: DetailedStationProps) => {
+  const {
+    stationName,
+    companyName,
+    contact,
+    chargers,
+    isParkingFree,
+    operatingTime,
+    address,
+    detailLocation,
+    isPrivate,
+    stationState,
+    privateReason,
+    reportCount,
+  } = station;
+
+  return (
+    <Container>
+      <h2>{stationName}</h2>
+      <p>{companyName}</p>
+      <p>{address}</p>
+      {detailLocation && <p>{detailLocation}</p>}
+      {operatingTime && <p>{operatingTime}</p>}
+      {stationState && <p>{stationState}</p>}
+      {contact && <p>{contact}</p>}
+      {privateReason && <p>{privateReason}</p>}
+      <div>
+        {isPrivate && <p>이용 제한</p>}
+        {isParkingFree && <p>주차무료</p>}
+      </div>
+      {chargers.map((data, index) => {
+        const { type, price, capacity, latestUpdateTime, state, method } = data;
+
+        return (
+          <ChargerContainer key={index}>
+            <li>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</li>
+            <li>가격: {price}</li>
+            <li>{capacity >= 50 ? '급속' : '완속'}</li>
+            {latestUpdateTime && <li>{String(latestUpdateTime)}</li>}
+            <li>충전기 상태: {state}</li>
+            {method && <li>{method}</li>}
+          </ChargerContainer>
+        );
+      })}
+
+      <div>누적 고장 신고 횟수: {reportCount}회</div>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  position: fixed;
+  left: 41rem;
+  width: 34rem;
+  z-index: 999;
+  padding: 10px;
+  background-color: white;
+  box-shadow: 1px 1px 2px gray;
+`;
+const ChargerContainer = styled.ul`
+  border: 1px solid #000;
+`;
+export default DetailedStation;
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
index 7acc2e58b..6f7a8191e 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
@@ -1,72 +1,20 @@
-import { styled } from 'styled-components';
-
 import { useSelectedStation } from '@hooks/useSelectedStation';
 
-import { CHARGER_TYPES } from '@constants';
+import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
+
+/**
+ * 이 컴포넌트는 컨테이너의 역할을 하게 될 것입니다.
+ */
 
 const DetailedStationInfo = () => {
   const { data: station, isLoading, isError } = useSelectedStation();
 
   if (isLoading || isError) return <></>;
 
-  const {
-    stationName,
-    companyName,
-    contact,
-    chargers,
-    isParkingFree,
-    operatingTime,
-    address,
-    detailLocation,
-    isPrivate,
-    stationState,
-    privateReason,
-    reportCount,
-  } = station;
-
-  return (
-    <Container>
-      <h2>{stationName}</h2>
-      <p>{companyName}</p>
-      <p>{address}</p>
-      {detailLocation && <p>{detailLocation}</p>}
-      {operatingTime && <p>{operatingTime}</p>}
-      {stationState && <p>{stationState}</p>}
-      {contact && <p>{contact}</p>}
-      {privateReason && <p>{privateReason}</p>}
-      <div>
-        {isPrivate && <p>이용 제한</p>}
-        {isParkingFree && <p>주차무료</p>}
-      </div>
-      {chargers.map((data, index) => {
-        const { type, price, capacity, latestUpdateTime, state, method } = data;
-
-        return (
-          <ChargerContainer key={index}>
-            <li>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</li>
-            <li>가격: {price}</li>
-            <li>{capacity >= 50 ? '급속' : '완속'}</li>
-            {latestUpdateTime && <li>{String(latestUpdateTime)}</li>}
-            <li>충전기 상태: {state}</li>
-            {method && <li>{method}</li>}
-          </ChargerContainer>
-        );
-      })}
+  /**
+   * TODO: 혼잡도도 외부(지금 이 컴포넌트)에서 자식에게 데이터를 주입 해서 렌더링 하는 방식으로 구현이 필요할듯 함. / 1. 데이터 페칭 관련 관심사 분리 가능, 2. 스토리북 테스트 쉬워짐
+   */
 
-      <div>누적 고장 신고 횟수: {reportCount}회</div>
-    </Container>
-  );
+  return <DetailedStation station={station} />;
 };
-const Container = styled.div`
-  position: fixed;
-  left: 41rem;
-  width: 34rem;
-  z-index: 999;
-  padding: 10px;
-  background-color: white;
-  box-shadow: 1px 1px 2px gray;
-`;
-const ChargerContainer = styled.ul`
-  border: 1px solid #000;
-`;
 export default DetailedStationInfo;

From eafa070b51ad3eb327848a2b76e0f200f34ef740 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 01:11:57 +0900
Subject: [PATCH 07/27] =?UTF-8?q?design:=20=EC=B6=A9=EC=A0=84=EC=86=8C=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B3=B8=20=EC=A0=95=EB=B3=B4=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailedStation.stories.tsx               | 51 ++++++++++++++++
 .../DetailedStationInfo/DetailedStation.tsx   | 59 ++++++++++++++-----
 .../DetailedStationInfo.tsx                   | 17 +++++-
 3 files changed, 110 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx

diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
new file mode 100644
index 000000000..b9654f224
--- /dev/null
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -0,0 +1,51 @@
+import type { Meta } from '@storybook/react';
+
+import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
+
+const meta = {
+  title: 'UI/DetailedStation',
+  component: DetailedStation,
+} satisfies Meta<typeof DetailedStation>;
+
+export default meta;
+
+export const Default = () => {
+  return (
+    <DetailedStation
+      station={{
+        stationId: 99,
+        stationName: '박스터 충전소',
+        companyName: 'CARffeine',
+        contact: '02-1234-5678',
+        chargers: [
+          {
+            type: 'DC_AC_3PHASE',
+            price: 200,
+            capacity: 3,
+            latestUpdateTime: new Date('2023-07-18T15:11:40.000Z'),
+            state: 'STANDBY',
+            method: '단독',
+          },
+          {
+            type: 'DC_COMBO',
+            price: 300,
+            capacity: 7,
+            latestUpdateTime: new Date('2023-07-18T15:11:40.000Z'),
+            state: 'UNDER_INSPECTION',
+            method: '단독',
+          },
+        ],
+        isParkingFree: true,
+        operatingTime: '평일 09:00~19:00 / 주말 미운영',
+        address: '서울 송파구 올림픽로35다길 42',
+        detailLocation: '지하 1층 구석탱이 어딘가',
+        latitude: 37.599295930415195,
+        longitude: 127.45404683387704,
+        isPrivate: true,
+        stationState: '2023-08-04일부터 충전소 공사합니다.',
+        privateReason: '박스터 차주만 충전 가능함',
+        reportCount: 0,
+      }}
+    />
+  );
+};
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index 309abe09f..35b90690c 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -1,5 +1,9 @@
 import { styled } from 'styled-components';
 
+import Box from '@common/Box';
+import Button from '@common/Button';
+import Text from '@common/Text';
+
 import { CHARGER_TYPES } from '@constants';
 
 import type { StationDetails } from '../../../types';
@@ -26,18 +30,44 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
 
   return (
     <Container>
-      <h2>{stationName}</h2>
-      <p>{companyName}</p>
-      <p>{address}</p>
-      {detailLocation && <p>{detailLocation}</p>}
-      {operatingTime && <p>{operatingTime}</p>}
-      {stationState && <p>{stationState}</p>}
-      {contact && <p>{contact}</p>}
-      {privateReason && <p>{privateReason}</p>}
-      <div>
-        {isPrivate && <p>이용 제한</p>}
-        {isParkingFree && <p>주차무료</p>}
-      </div>
+      <Box my={2}>
+        <Text variant="label">{companyName}</Text>
+        <Box my={1}>
+          <Text variant="title">{stationName}</Text>
+        </Box>
+        <Text variant="subtitle">{address}</Text>
+        {detailLocation && <Text variant="caption">{detailLocation}</Text>}
+      </Box>
+      <hr />
+
+      {stationState && (
+        <Box my={1}>
+          <Text variant="h6">충전소 공지</Text>
+          <Text variant="body">{stationState}</Text>
+        </Box>
+      )}
+
+      <Box my={1}>
+        <Text variant="h6">운영시간</Text>
+        <Text variant="body">{operatingTime ?? '운영시간 미확인'}</Text>
+      </Box>
+      <Box my={1}>
+        <Text variant="h6">연락처</Text>
+        <Text variant="body">{contact ?? '연락처 없음'}</Text>
+      </Box>
+      <Box my={1}>
+        <Text variant="h6">주차비</Text>
+        <Text variant="body">{isParkingFree ? '무료' : '유료'}</Text>
+      </Box>
+      <Box my={1}>
+        <Text variant="h6">사용 제한 여부</Text>
+        <Text variant="body">
+          {isPrivate || privateReason ? `사용 제한됨 (사유: ${privateReason})` : '누구나 사용가능'}
+        </Text>
+      </Box>
+
+      <hr />
+
       {chargers.map((data, index) => {
         const { type, price, capacity, latestUpdateTime, state, method } = data;
 
@@ -59,10 +89,7 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
 };
 
 const Container = styled.div`
-  position: fixed;
-  left: 41rem;
-  width: 34rem;
-  z-index: 999;
+  max-width: 41rem;
   padding: 10px;
   background-color: white;
   box-shadow: 1px 1px 2px gray;
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
index 6f7a8191e..dae29689e 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
@@ -1,5 +1,7 @@
 import { useSelectedStation } from '@hooks/useSelectedStation';
 
+import Box from '@common/Box';
+
 import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
 
 /**
@@ -15,6 +17,19 @@ const DetailedStationInfo = () => {
    * TODO: 혼잡도도 외부(지금 이 컴포넌트)에서 자식에게 데이터를 주입 해서 렌더링 하는 방식으로 구현이 필요할듯 함. / 1. 데이터 페칭 관련 관심사 분리 가능, 2. 스토리북 테스트 쉬워짐
    */
 
-  return <DetailedStation station={station} />;
+  return (
+    // 여기에서 쓰이는 Box 컴포넌트는 아코디언이 오기 전 까지 임시로 존재합니다. 자식과의 관심사 분리를 위해 분리 조치함.
+    <Box
+      css={{
+        position: 'fixed',
+        left: '41rem',
+        width: '34rem',
+        zIndex: '999',
+      }}
+    >
+      <DetailedStation station={station} />
+    </Box>
+  );
 };
+
 export default DetailedStationInfo;

From e09edbc56827edd0dcec880834174f4c29890a90 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 12:03:59 +0900
Subject: [PATCH 08/27] =?UTF-8?q?design:=20Alert=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DetailedStationInfo/DetailedStation.stories.tsx |  2 +-
 .../ui/DetailedStationInfo/DetailedStation.tsx      | 13 +++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
index b9654f224..cfbfc3681 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -44,7 +44,7 @@ export const Default = () => {
         isPrivate: true,
         stationState: '2023-08-04일부터 충전소 공사합니다.',
         privateReason: '박스터 차주만 충전 가능함',
-        reportCount: 0,
+        reportCount: 1,
       }}
     />
   );
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index 35b90690c..213f765cf 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 
+import Alert from '@common/Alert';
 import Box from '@common/Box';
-import Button from '@common/Button';
 import Text from '@common/Text';
 
 import { CHARGER_TYPES } from '@constants';
@@ -40,12 +40,7 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
       </Box>
       <hr />
 
-      {stationState && (
-        <Box my={1}>
-          <Text variant="h6">충전소 공지</Text>
-          <Text variant="body">{stationState}</Text>
-        </Box>
-      )}
+      {stationState && <Alert color={'warning'} text={`[공지] ${stationState}`} />}
 
       <Box my={1}>
         <Text variant="h6">운영시간</Text>
@@ -83,7 +78,9 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
         );
       })}
 
-      <div>누적 고장 신고 횟수: {reportCount}회</div>
+      {reportCount > 0 && (
+        <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />
+      )}
     </Container>
   );
 };

From 9a4b71f7e69396ca383be641af9ff9d21ba3b28e Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 12:35:27 +0900
Subject: [PATCH 09/27] =?UTF-8?q?feat:=20=EC=B6=A9=EC=A0=84=EC=86=8C=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EB=B0=8F=20=EC=97=85=EB=8D=B0=EC=9D=B4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=8B=9C=EA=B0=84=20=EC=B0=A8=EC=9D=B4=20=EA=B3=84=EC=82=B0=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/DetailedStationInfo/ChargerCard.tsx    | 101 ++++++++++++++++++
 .../DetailedStation.stories.tsx               |   2 +-
 .../DetailedStationInfo/DetailedStation.tsx   |  22 ++--
 3 files changed, 110 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
new file mode 100644
index 000000000..c9ee31370
--- /dev/null
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -0,0 +1,101 @@
+import { BoltIcon } from '@heroicons/react/24/solid';
+import { css } from 'styled-components';
+
+import Button from '@common/Button';
+import FlexBox from '@common/FlexBox';
+import ListItem from '@common/ListItem';
+import Text from '@common/Text';
+
+import { CHARGER_TYPES } from '@constants';
+
+import type { ChargerDetails } from '../../../types';
+
+export interface ChargerProps {
+  charger: ChargerDetails;
+}
+
+const dateToString = (date: Date) => {
+  const currentDate = new Date();
+  const diffInSeconds: number = Math.floor((currentDate.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return `${diffInSeconds}초 전`;
+  }
+
+  const diffInMinutes: number = Math.floor(diffInSeconds / 60);
+
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`;
+  }
+
+  const diffInHours: number = Math.floor(diffInMinutes / 60);
+
+  if (diffInHours < 24) {
+    return `${diffInHours}시간 전`;
+  }
+
+  const diffInDays: number = Math.floor(diffInHours / 24);
+  return `${diffInDays}일 전`;
+};
+
+const ChargerCard = ({ charger }: ChargerProps) => {
+  const { type, price, capacity, latestUpdateTime, state, method } = charger;
+  return (
+    <ListItem css={foundStationList}>
+      <Button width="100%" shadow css={foundStationButton}>
+        <FlexBox alignItems="center" nowrap columnGap={2.8}>
+          <FlexBox
+            aria-disabled
+            background="#e9edf8"
+            justifyContent="center"
+            alignItems="center"
+            nowrap
+            css={square}
+          >
+            <BoltIcon width={24} fill="#5c68d6" />
+          </FlexBox>
+          <article>
+            <Text
+              tag="h3"
+              variant="h6"
+              title={'카페인팀 충전소'}
+              lineClamp={1}
+            >{`카페인팀 충전소`}</Text>
+            <Text variant="label" align="left" lineClamp={1} color="#585858">
+              {`서울특별시 강남구 번릉로 113`}
+            </Text>
+            <li>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</li>
+            <li>{price}원/kWh</li>
+            <li>{capacity >= 50 ? '급속' : '완속'}</li>
+            {latestUpdateTime && <li>{dateToString(latestUpdateTime)}</li>}
+            <li>충전기 상태: {state}</li>
+            {method && <li>{method}</li>}
+          </article>
+        </FlexBox>
+      </Button>
+    </ListItem>
+  );
+};
+
+const square = css`
+  padding: 0.4rem;
+  border-radius: 1rem;
+`;
+
+const foundStationButton = css`
+  padding: 1.2rem 1rem 1.4rem;
+  box-shadow: 0 0.3rem 0.8rem 0 #ebebeb;
+  border-radius: 1.2rem;
+`;
+
+const foundStationList = css`
+  margin-bottom: 1.6rem;
+  padding: 0;
+  border-radius: 1rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+export default ChargerCard;
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
index cfbfc3681..141da894f 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -30,7 +30,7 @@ export const Default = () => {
             type: 'DC_COMBO',
             price: 300,
             capacity: 7,
-            latestUpdateTime: new Date('2023-07-18T15:11:40.000Z'),
+            latestUpdateTime: new Date('2023-07-30T07:11:40.000Z'),
             state: 'UNDER_INSPECTION',
             method: '단독',
           },
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index 213f765cf..5dfe20499 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -2,8 +2,11 @@ import { styled } from 'styled-components';
 
 import Alert from '@common/Alert';
 import Box from '@common/Box';
+import List from '@common/List';
 import Text from '@common/Text';
 
+import ChargerCard from '@ui/DetailedStationInfo/ChargerCard';
+
 import { CHARGER_TYPES } from '@constants';
 
 import type { StationDetails } from '../../../types';
@@ -63,20 +66,11 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
 
       <hr />
 
-      {chargers.map((data, index) => {
-        const { type, price, capacity, latestUpdateTime, state, method } = data;
-
-        return (
-          <ChargerContainer key={index}>
-            <li>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</li>
-            <li>가격: {price}</li>
-            <li>{capacity >= 50 ? '급속' : '완속'}</li>
-            {latestUpdateTime && <li>{String(latestUpdateTime)}</li>}
-            <li>충전기 상태: {state}</li>
-            {method && <li>{method}</li>}
-          </ChargerContainer>
-        );
-      })}
+      <List>
+        {chargers.map((charger, index) => (
+          <ChargerCard key={index} charger={charger} />
+        ))}
+      </List>
 
       {reportCount > 0 && (
         <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />

From 44c6ef72224ac458d771ef3b0e9d87d48422e594 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 13:19:49 +0900
Subject: [PATCH 10/27] =?UTF-8?q?test:=20ChargerCard=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChargerCard.stories.tsx                   | 29 +++++++++++++++++++
 .../DetailedStation.stories.tsx               |  2 +-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
new file mode 100644
index 000000000..e3565adc1
--- /dev/null
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
@@ -0,0 +1,29 @@
+import type { Meta } from '@storybook/react';
+
+import List from '@common/List';
+
+import ChargerCard from '@ui/DetailedStationInfo/ChargerCard';
+
+const meta = {
+  title: 'UI/ChargerCard',
+  component: ChargerCard,
+} satisfies Meta<typeof ChargerCard>;
+
+export default meta;
+
+export const Default = () => {
+  return (
+    <List>
+      <ChargerCard
+        charger={{
+          type: 'DC_AC_3PHASE',
+          price: 200,
+          capacity: 3,
+          latestUpdateTime: new Date('2023-07-18T15:11:40.000Z'),
+          state: 'STANDBY',
+          method: '단독',
+        }}
+      />
+    </List>
+  );
+};
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
index 141da894f..caadfa0a4 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -30,7 +30,7 @@ export const Default = () => {
             type: 'DC_COMBO',
             price: 300,
             capacity: 7,
-            latestUpdateTime: new Date('2023-07-30T07:11:40.000Z'),
+            latestUpdateTime: new Date('2023-07-30T03:21:40.000Z'),
             state: 'UNDER_INSPECTION',
             method: '단독',
           },

From 767b4e78e00107525324595427ec6cf5cce9fada Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 13:37:33 +0900
Subject: [PATCH 11/27] =?UTF-8?q?feat:=20=EC=B6=A9=EC=A0=84=EA=B8=B0=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=BD=94=EB=93=9C=20=EC=84=A4=EB=AA=85=20?=
 =?UTF-8?q?=EA=B0=9D=EC=B2=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/constants/index.ts | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/frontend/src/constants/index.ts b/frontend/src/constants/index.ts
index b25c55a57..f79bd9b9e 100644
--- a/frontend/src/constants/index.ts
+++ b/frontend/src/constants/index.ts
@@ -36,6 +36,18 @@ export const CHARGER_TYPES = {
   AC_3PHASE: 'AC 3상',
 } as const;
 
+/**
+ *     충전기상태(1: 통신이상, 2: 충전대기,3: 충전중, 4: 운영중지,5: 점검중, 9: 상태미확인)
+ */
+export const CHARGER_STATES = {
+  COMMUNICATION_ERROR: '통신이상', // 1
+  STANDBY: '충전대기', // 2
+  CHARGING_IN_PROGRESS: '충전중', // 3
+  OPERATION_SUSPENDED: '운영중지', // 4
+  UNDER_INSPECTION: '점검중', // 5
+  STATUS_UNKNOWN: '상태미확인', // 9
+} as const;
+
 export const COMPANY_NAME = {
   AM: '아마노코리아',
   BA: '부안군',

From 288abe5a0c8eabece17d03aad4a61a31e86da789 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 13:53:20 +0900
Subject: [PATCH 12/27] =?UTF-8?q?refactor:=20=EC=B6=A9=EC=A0=84=EC=86=8C?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EA=B0=9D=EC=B2=B4=20=EC=A0=95=EC=9D=98?=
 =?UTF-8?q?=20=EB=B0=8F=20=ED=83=80=EC=9E=85=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/types/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index bc525ebe0..ca38bf03a 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -13,7 +13,7 @@ export type ChargerStateType =
 export type ChargerMethodType = '단독' | '동시' | null;
 
 export interface ChargerSummary {
-  type: string;
+  type: ChargerType;
   price: number;
   capacity: CapacityType;
 }

From 55911da3ff56ea8a0fe54a24b8d2da1722007c81 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 14:10:00 +0900
Subject: [PATCH 13/27] =?UTF-8?q?design:=20=EC=B6=A9=EC=A0=84=EA=B8=B0=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=B9=B4=EB=93=9C=EA=B0=80=202=EC=97=B4?=
 =?UTF-8?q?=EB=A1=9C=20=ED=91=9C=EC=8B=9C=EB=90=98=EB=8F=84=EB=A1=9D=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

---
 .../ui/DetailedStationInfo/ChargerCard.tsx    | 76 ++++++-------------
 .../DetailedStation.stories.tsx               | 26 ++++++-
 .../DetailedStationInfo/DetailedStation.tsx   |  5 +-
 3 files changed, 53 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index c9ee31370..64460368c 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -1,12 +1,11 @@
 import { BoltIcon } from '@heroicons/react/24/solid';
 import { css } from 'styled-components';
 
-import Button from '@common/Button';
+import Box from '@common/Box';
 import FlexBox from '@common/FlexBox';
-import ListItem from '@common/ListItem';
 import Text from '@common/Text';
 
-import { CHARGER_TYPES } from '@constants';
+import { CHARGER_STATES, CHARGER_TYPES } from '@constants';
 
 import type { ChargerDetails } from '../../../types';
 
@@ -41,39 +40,30 @@ const dateToString = (date: Date) => {
 const ChargerCard = ({ charger }: ChargerProps) => {
   const { type, price, capacity, latestUpdateTime, state, method } = charger;
   return (
-    <ListItem css={foundStationList}>
-      <Button width="100%" shadow css={foundStationButton}>
-        <FlexBox alignItems="center" nowrap columnGap={2.8}>
-          <FlexBox
-            aria-disabled
-            background="#e9edf8"
-            justifyContent="center"
-            alignItems="center"
-            nowrap
-            css={square}
-          >
-            <BoltIcon width={24} fill="#5c68d6" />
-          </FlexBox>
-          <article>
-            <Text
-              tag="h3"
-              variant="h6"
-              title={'카페인팀 충전소'}
-              lineClamp={1}
-            >{`카페인팀 충전소`}</Text>
-            <Text variant="label" align="left" lineClamp={1} color="#585858">
-              {`서울특별시 강남구 번릉로 113`}
-            </Text>
-            <li>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</li>
-            <li>{price}원/kWh</li>
-            <li>{capacity >= 50 ? '급속' : '완속'}</li>
-            {latestUpdateTime && <li>{dateToString(latestUpdateTime)}</li>}
-            <li>충전기 상태: {state}</li>
-            {method && <li>{method}</li>}
-          </article>
+    <Box border px={2} py={3} width={48}>
+      <FlexBox alignItems="center" nowrap columnGap={2.8}>
+        <FlexBox
+          aria-disabled
+          background="#e9edf8"
+          justifyContent="center"
+          alignItems="center"
+          nowrap
+          css={square}
+        >
+          <BoltIcon width={24} fill="#5c68d6" />
         </FlexBox>
-      </Button>
-    </ListItem>
+        <article>
+          <Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>
+          <Text>{price}원/kWh</Text>
+          <Text>
+            {capacity}kW({capacity >= 50 ? '급속' : '완속'})
+          </Text>
+          <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
+          {method && <Text>{method}</Text>}
+          {latestUpdateTime && <Text>{dateToString(latestUpdateTime)}</Text>}
+        </article>
+      </FlexBox>
+    </Box>
   );
 };
 
@@ -82,20 +72,4 @@ const square = css`
   border-radius: 1rem;
 `;
 
-const foundStationButton = css`
-  padding: 1.2rem 1rem 1.4rem;
-  box-shadow: 0 0.3rem 0.8rem 0 #ebebeb;
-  border-radius: 1.2rem;
-`;
-
-const foundStationList = css`
-  margin-bottom: 1.6rem;
-  padding: 0;
-  border-radius: 1rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
-
 export default ChargerCard;
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
index caadfa0a4..859be621b 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -29,11 +29,35 @@ export const Default = () => {
           {
             type: 'DC_COMBO',
             price: 300,
-            capacity: 7,
+            capacity: 200,
             latestUpdateTime: new Date('2023-07-30T03:21:40.000Z'),
             state: 'UNDER_INSPECTION',
             method: '단독',
           },
+          {
+            type: 'DC_AC_3PHASE',
+            price: 350,
+            capacity: 50,
+            latestUpdateTime: new Date('2023-07-01T03:21:40.000Z'),
+            state: 'CHARGING_IN_PROGRESS',
+            method: '동시',
+          },
+          {
+            type: 'AC_SLOW',
+            price: 350,
+            capacity: 3,
+            latestUpdateTime: new Date('2023-07-01T03:21:40.000Z'),
+            state: 'CHARGING_IN_PROGRESS',
+            method: '동시',
+          },
+          {
+            type: 'DC_FAST',
+            price: 450,
+            capacity: 100,
+            latestUpdateTime: new Date('2023-07-01T03:21:40.000Z'),
+            state: 'STATUS_UNKNOWN',
+            method: '동시',
+          },
         ],
         isParkingFree: true,
         operatingTime: '평일 09:00~19:00 / 주말 미운영',
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index 5dfe20499..42e95d257 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -2,6 +2,7 @@ import { styled } from 'styled-components';
 
 import Alert from '@common/Alert';
 import Box from '@common/Box';
+import FlexBox from '@common/FlexBox';
 import List from '@common/List';
 import Text from '@common/Text';
 
@@ -66,11 +67,11 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
 
       <hr />
 
-      <List>
+      <FlexBox>
         {chargers.map((charger, index) => (
           <ChargerCard key={index} charger={charger} />
         ))}
-      </List>
+      </FlexBox>
 
       {reportCount > 0 && (
         <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />

From 6ac895e549a11212059de6ab81606f63bbe7b4b0 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 14:17:37 +0900
Subject: [PATCH 14/27] =?UTF-8?q?refactor:=20latestUpdateTime=20=ED=83=80?=
 =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ui/DetailedStationInfo/ChargerCard.tsx  |  9 ++++++---
 .../ui/DetailedStationInfo/DetailedStation.stories.tsx | 10 +++++-----
 .../ui/DetailedStationInfo/DetailedStation.tsx         |  3 ---
 frontend/src/types/index.ts                            |  2 +-
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index 64460368c..196fe2e69 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -13,9 +13,12 @@ export interface ChargerProps {
   charger: ChargerDetails;
 }
 
-const dateToString = (date: Date) => {
+const calculateLatestUpdateTime = (latestUpdateTimeString: string) => {
   const currentDate = new Date();
-  const diffInSeconds: number = Math.floor((currentDate.getTime() - date.getTime()) / 1000);
+  const latestUpdatedDate = new Date(latestUpdateTimeString);
+  const diffInSeconds: number = Math.floor(
+    (currentDate.getTime() - latestUpdatedDate.getTime()) / 1000
+  );
 
   if (diffInSeconds < 60) {
     return `${diffInSeconds}초 전`;
@@ -60,7 +63,7 @@ const ChargerCard = ({ charger }: ChargerProps) => {
           </Text>
           <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
           {method && <Text>{method}</Text>}
-          {latestUpdateTime && <Text>{dateToString(latestUpdateTime)}</Text>}
+          {latestUpdateTime && <Text>{calculateLatestUpdateTime(latestUpdateTime)}</Text>}
         </article>
       </FlexBox>
     </Box>
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
index 859be621b..fc9afd1c6 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -22,7 +22,7 @@ export const Default = () => {
             type: 'DC_AC_3PHASE',
             price: 200,
             capacity: 3,
-            latestUpdateTime: new Date('2023-07-18T15:11:40.000Z'),
+            latestUpdateTime: '2023-07-18T15:11:40.000Z',
             state: 'STANDBY',
             method: '단독',
           },
@@ -30,7 +30,7 @@ export const Default = () => {
             type: 'DC_COMBO',
             price: 300,
             capacity: 200,
-            latestUpdateTime: new Date('2023-07-30T03:21:40.000Z'),
+            latestUpdateTime: '2023-07-30T03:21:40.000Z',
             state: 'UNDER_INSPECTION',
             method: '단독',
           },
@@ -38,7 +38,7 @@ export const Default = () => {
             type: 'DC_AC_3PHASE',
             price: 350,
             capacity: 50,
-            latestUpdateTime: new Date('2023-07-01T03:21:40.000Z'),
+            latestUpdateTime: '2023-07-01T03:21:40.000Z',
             state: 'CHARGING_IN_PROGRESS',
             method: '동시',
           },
@@ -46,7 +46,7 @@ export const Default = () => {
             type: 'AC_SLOW',
             price: 350,
             capacity: 3,
-            latestUpdateTime: new Date('2023-07-01T03:21:40.000Z'),
+            latestUpdateTime: '2023-07-01T03:21:40.000Z',
             state: 'CHARGING_IN_PROGRESS',
             method: '동시',
           },
@@ -54,7 +54,7 @@ export const Default = () => {
             type: 'DC_FAST',
             price: 450,
             capacity: 100,
-            latestUpdateTime: new Date('2023-07-01T03:21:40.000Z'),
+            latestUpdateTime: '2023-07-01T03:21:40.000Z',
             state: 'STATUS_UNKNOWN',
             method: '동시',
           },
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index 42e95d257..c0f39dea3 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -3,13 +3,10 @@ import { styled } from 'styled-components';
 import Alert from '@common/Alert';
 import Box from '@common/Box';
 import FlexBox from '@common/FlexBox';
-import List from '@common/List';
 import Text from '@common/Text';
 
 import ChargerCard from '@ui/DetailedStationInfo/ChargerCard';
 
-import { CHARGER_TYPES } from '@constants';
-
 import type { StationDetails } from '../../../types';
 
 export interface DetailedStationProps {
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index ca38bf03a..89ab2f5d1 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -19,7 +19,7 @@ export interface ChargerSummary {
 }
 
 export interface ChargerDetails extends ChargerSummary {
-  latestUpdateTime: Date | null;
+  latestUpdateTime: string | null;
   state: ChargerStateType;
   method: ChargerMethodType;
 }

From 196608e35300492252c9894a9b43dba2141cc34e Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 14:51:30 +0900
Subject: [PATCH 15/27] =?UTF-8?q?design:=20=EC=B6=A9=EC=A0=84=EA=B8=B0=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/DetailedStationInfo/ChargerCard.tsx    | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index 196fe2e69..2e2451eed 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -44,28 +44,23 @@ const ChargerCard = ({ charger }: ChargerProps) => {
   const { type, price, capacity, latestUpdateTime, state, method } = charger;
   return (
     <Box border px={2} py={3} width={48}>
-      <FlexBox alignItems="center" nowrap columnGap={2.8}>
-        <FlexBox
-          aria-disabled
-          background="#e9edf8"
-          justifyContent="center"
-          alignItems="center"
-          nowrap
-          css={square}
-        >
-          <BoltIcon width={24} fill="#5c68d6" />
-        </FlexBox>
-        <article>
-          <Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>
-          <Text>{price}원/kWh</Text>
-          <Text>
-            {capacity}kW({capacity >= 50 ? '급속' : '완속'})
-          </Text>
-          <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
-          {method && <Text>{method}</Text>}
-          {latestUpdateTime && <Text>{calculateLatestUpdateTime(latestUpdateTime)}</Text>}
-        </article>
+      <FlexBox justifyContent={'center'} alignItems={'center'} css={square}>
+        <BoltIcon width={24} fill="#5c68d6" />
+        <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
       </FlexBox>
+      <article>
+        <Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>
+        <Text>{price}원/kWh</Text>
+        <Text>
+          {capacity}kW({capacity >= 50 ? '급속' : '완속'})
+        </Text>
+        {method && <Text>{method}</Text>}
+      </article>
+      {latestUpdateTime && (
+        <Text variant="caption" align="right">
+          마지막 업데이트: {calculateLatestUpdateTime(latestUpdateTime)}
+        </Text>
+      )}
     </Box>
   );
 };
@@ -73,6 +68,7 @@ const ChargerCard = ({ charger }: ChargerProps) => {
 const square = css`
   padding: 0.4rem;
   border-radius: 1rem;
+  background: #e9edf8;
 `;
 
 export default ChargerCard;

From b3ddc96a2ff7b804ed9a1e91a6bb01c0c61ab5ad Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 17:38:28 +0900
Subject: [PATCH 16/27] =?UTF-8?q?test:=20=EB=82=A0=EC=A7=9C=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ui/DetailedStationInfo/ChargerCard.stories.tsx | 2 +-
 .../src/components/ui/DetailedStationInfo/DetailedStation.tsx | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
index e3565adc1..729e6a92c 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
@@ -19,7 +19,7 @@ export const Default = () => {
           type: 'DC_AC_3PHASE',
           price: 200,
           capacity: 3,
-          latestUpdateTime: new Date('2023-07-18T15:11:40.000Z'),
+          latestUpdateTime: '2023-07-18T15:11:40.000Z',
           state: 'STANDBY',
           method: '단독',
         }}
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index c0f39dea3..10ce007cb 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -71,7 +71,9 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
       </FlexBox>
 
       {reportCount > 0 && (
-        <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />
+        <Box my={1}>
+          <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />
+        </Box>
       )}
     </Container>
   );

From 17d3fc3d31e169303e8dcddf668239f615f5e72e Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 17:42:54 +0900
Subject: [PATCH 17/27] =?UTF-8?q?fix:=20=ED=83=80=EC=9E=85=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/data.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 5ec96da58..569fcbcf5 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -8,24 +8,27 @@ import type {
   EnglishDaysType,
   MockStation,
 } from '../types';
+import type { ChargerType } from '../types';
 
 const generateRandomData = <T>(array: T[]): T => {
   const randomIndex = Math.floor(Math.random() * array.length);
 
-  return array[randomIndex];
+  return array[randomIndex] as T;
 };
 
 const generateRandomChargers = () => {
   const length = Math.floor(Math.random() * 4) + 1;
   const chargers: ChargerDetails[] = Array.from({ length }, () => ({
-    type: generateRandomData<string>([...Object.keys(CHARGER_TYPES)]),
+    type: generateRandomData<ChargerType>(Object.keys(CHARGER_TYPES) as ChargerType[]),
     price: generateRandomData([200, 250, 300, 350, 400]),
     capacity: generateRandomData<CapacityType>([3, 7, 50, 100, 200]),
     latestUpdateTime: generateRandomData([
-      new Date('2016-10-27T17:13:40+00:00'),
-      new Date('2023-06-27T17:18:40+00:00'),
-      new Date('2023-07-18T15:11:40+00:00'),
-      null,
+      '2016-10-27T17:13:40+00:00',
+      '2023-06-27T17:18:40+00:00',
+      '2023-07-18T15:11:40+00:00',
+      '2023-07-22T15:11:40+00:00',
+      '2023-07-28T15:11:40+00:00',
+      '2023-07-30T15:11:40+00:00',
     ]),
     state: generateRandomData([
       'AVAILABLE',

From 37a7196eed41673291208cf29e5af0a86aaab94b Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 18:04:45 +0900
Subject: [PATCH 18/27] =?UTF-8?q?refactor:=20mock=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=EC=97=90=EC=84=9C=20=EA=B3=A0=EC=9E=A5=20=EC=8B=A0?=
 =?UTF-8?q?=EA=B3=A0=EA=B0=80=20=EC=A2=80=20=EB=8D=94=20=EB=A7=8E=EC=9D=B4?=
 =?UTF-8?q?=20=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/data.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 569fcbcf5..98759254a 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -67,7 +67,7 @@ export const stations: MockStation[] = Array.from({ length: 3000 }).map((_, inde
     availableCount: generateRandomData<number>([0, 1, 2, 3]),
     stationState: generateRandomData(['yyyy-mm-dd일부터 충전소 공사합니다.', null]),
     privateReason: generateRandomData(['아파트', null]),
-    reportCount: generateRandomData([0, 0, 0, 0, Math.floor(Math.random() * 99)]),
+    reportCount: generateRandomData([0, 0, Math.floor(Math.random() * 99)]),
   };
 });
 

From 3179bea0e0360ad388c9c3fe1e9c692dc9e4ad3b Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 18:47:10 +0900
Subject: [PATCH 19/27] =?UTF-8?q?design:=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 간격 조절
---
 .../ui/DetailedStationInfo/ChargerCard.tsx    |  2 +-
 .../DetailedStationInfo/DetailedStation.tsx   | 56 ++++++++++---------
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index 2e2451eed..7e34362b3 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -43,7 +43,7 @@ const calculateLatestUpdateTime = (latestUpdateTimeString: string) => {
 const ChargerCard = ({ charger }: ChargerProps) => {
   const { type, price, capacity, latestUpdateTime, state, method } = charger;
   return (
-    <Box border px={2} py={3} width={48}>
+    <Box border px={2} py={5} width={39}>
       <FlexBox justifyContent={'center'} alignItems={'center'} css={square}>
         <BoltIcon width={24} fill="#5c68d6" />
         <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index 10ce007cb..d7857de6f 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -1,4 +1,4 @@
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
 
 import Alert from '@common/Alert';
 import Box from '@common/Box';
@@ -30,8 +30,8 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
   } = station;
 
   return (
-    <Container>
-      <Box my={2}>
+    <Box px={2} pt={10} css={containerCss}>
+      <Box my={2} px={1}>
         <Text variant="label">{companyName}</Text>
         <Box my={1}>
           <Text variant="title">{stationName}</Text>
@@ -43,23 +43,27 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
 
       {stationState && <Alert color={'warning'} text={`[공지] ${stationState}`} />}
 
-      <Box my={1}>
-        <Text variant="h6">운영시간</Text>
-        <Text variant="body">{operatingTime ?? '운영시간 미확인'}</Text>
-      </Box>
-      <Box my={1}>
-        <Text variant="h6">연락처</Text>
-        <Text variant="body">{contact ?? '연락처 없음'}</Text>
-      </Box>
-      <Box my={1}>
-        <Text variant="h6">주차비</Text>
-        <Text variant="body">{isParkingFree ? '무료' : '유료'}</Text>
-      </Box>
-      <Box my={1}>
-        <Text variant="h6">사용 제한 여부</Text>
-        <Text variant="body">
-          {isPrivate || privateReason ? `사용 제한됨 (사유: ${privateReason})` : '누구나 사용가능'}
-        </Text>
+      <Box px={1}>
+        <Box my={1}>
+          <Text variant="h6">운영시간</Text>
+          <Text variant="body">{operatingTime ?? '운영시간 미확인'}</Text>
+        </Box>
+        <Box my={1}>
+          <Text variant="h6">연락처</Text>
+          <Text variant="body">{contact ?? '연락처 없음'}</Text>
+        </Box>
+        <Box my={1}>
+          <Text variant="h6">주차비</Text>
+          <Text variant="body">{isParkingFree ? '무료' : '유료'}</Text>
+        </Box>
+        <Box my={1}>
+          <Text variant="h6">사용 제한 여부</Text>
+          <Text variant="body">
+            {isPrivate || privateReason
+              ? `사용 제한됨 (사유: ${privateReason})`
+              : '누구나 사용가능'}
+          </Text>
+        </Box>
       </Box>
 
       <hr />
@@ -75,17 +79,15 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
           <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />
         </Box>
       )}
-    </Container>
+    </Box>
   );
 };
 
-const Container = styled.div`
-  max-width: 41rem;
-  padding: 10px;
+const containerCss = css`
+  width: 34rem;
+  height: 100vh;
   background-color: white;
   box-shadow: 1px 1px 2px gray;
 `;
-const ChargerContainer = styled.ul`
-  border: 1px solid #000;
-`;
+
 export default DetailedStation;

From 756fc45fc4b6cc23b397ed17d1129fc59b5c9bd8 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 19:01:36 +0900
Subject: [PATCH 20/27] =?UTF-8?q?refactor:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=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

---
 .../ChargerCard.stories.tsx                   | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
index 729e6a92c..fc99087df 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
@@ -13,17 +13,15 @@ export default meta;
 
 export const Default = () => {
   return (
-    <List>
-      <ChargerCard
-        charger={{
-          type: 'DC_AC_3PHASE',
-          price: 200,
-          capacity: 3,
-          latestUpdateTime: '2023-07-18T15:11:40.000Z',
-          state: 'STANDBY',
-          method: '단독',
-        }}
-      />
-    </List>
+    <ChargerCard
+      charger={{
+        type: 'DC_AC_3PHASE',
+        price: 200,
+        capacity: 3,
+        latestUpdateTime: '2023-07-18T15:11:40.000Z',
+        state: 'STANDBY',
+        method: '단독',
+      }}
+    />
   );
 };

From cc297faa4bde1f4a6cf96b4494b99fee2f1b6f25 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 19:05:32 +0900
Subject: [PATCH 21/27] =?UTF-8?q?refactor:=20=EB=94=94=EC=9E=90=EC=9D=B8?=
 =?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

---
 .../ui/DetailedStationInfo/ChargerCard.tsx           | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index 7e34362b3..993255952 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -16,27 +16,25 @@ export interface ChargerProps {
 const calculateLatestUpdateTime = (latestUpdateTimeString: string) => {
   const currentDate = new Date();
   const latestUpdatedDate = new Date(latestUpdateTimeString);
-  const diffInSeconds: number = Math.floor(
-    (currentDate.getTime() - latestUpdatedDate.getTime()) / 1000
-  );
+  const diffInSeconds = Math.floor((currentDate.getTime() - latestUpdatedDate.getTime()) / 1000);
 
   if (diffInSeconds < 60) {
     return `${diffInSeconds}초 전`;
   }
 
-  const diffInMinutes: number = Math.floor(diffInSeconds / 60);
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
 
   if (diffInMinutes < 60) {
     return `${diffInMinutes}분 전`;
   }
 
-  const diffInHours: number = Math.floor(diffInMinutes / 60);
+  const diffInHours = Math.floor(diffInMinutes / 60);
 
   if (diffInHours < 24) {
     return `${diffInHours}시간 전`;
   }
 
-  const diffInDays: number = Math.floor(diffInHours / 24);
+  const diffInDays = Math.floor(diffInHours / 24);
   return `${diffInDays}일 전`;
 };
 
@@ -52,7 +50,7 @@ const ChargerCard = ({ charger }: ChargerProps) => {
         <Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>
         <Text>{price}원/kWh</Text>
         <Text>
-          {capacity}kW({capacity >= 50 ? '급속' : '완속'})
+          {capacity >= 50 ? '급속' : '완속'}({capacity}kW)
         </Text>
         {method && <Text>{method}</Text>}
       </article>

From 0e7a8d6c80189ea61cc158bb323289b9a777c475 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 20:00:43 +0900
Subject: [PATCH 22/27] =?UTF-8?q?test:=20ChargerCard=EC=97=90=20auto=20doc?=
 =?UTF-8?q?s=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChargerCard.stories.tsx                   | 34 +++++++++++--------
 .../ui/DetailedStationInfo/ChargerCard.tsx    |  4 +--
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
index fc99087df..991848279 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
@@ -1,27 +1,31 @@
 import type { Meta } from '@storybook/react';
 
-import List from '@common/List';
-
+import type { ChargerCardProps } from '@ui/DetailedStationInfo/ChargerCard';
 import ChargerCard from '@ui/DetailedStationInfo/ChargerCard';
 
 const meta = {
   title: 'UI/ChargerCard',
   component: ChargerCard,
+  tags: ['autodocs'],
+  args: {
+    charger: {
+      type: 'DC_AC_3PHASE',
+      price: 200,
+      capacity: 3,
+      latestUpdateTime: '2023-07-18T15:11:40.000Z',
+      state: 'STANDBY',
+      method: '단독',
+    },
+  },
+  argTypes: {
+    charger: {
+      description: '충전소 데이터를 수정할 수 있습니다.',
+    },
+  },
 } satisfies Meta<typeof ChargerCard>;
 
 export default meta;
 
-export const Default = () => {
-  return (
-    <ChargerCard
-      charger={{
-        type: 'DC_AC_3PHASE',
-        price: 200,
-        capacity: 3,
-        latestUpdateTime: '2023-07-18T15:11:40.000Z',
-        state: 'STANDBY',
-        method: '단독',
-      }}
-    />
-  );
+export const Default = (args: ChargerCardProps) => {
+  return <ChargerCard {...args} />;
 };
diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index 993255952..899f8098f 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -9,7 +9,7 @@ import { CHARGER_STATES, CHARGER_TYPES } from '@constants';
 
 import type { ChargerDetails } from '../../../types';
 
-export interface ChargerProps {
+export interface ChargerCardProps {
   charger: ChargerDetails;
 }
 
@@ -38,7 +38,7 @@ const calculateLatestUpdateTime = (latestUpdateTimeString: string) => {
   return `${diffInDays}일 전`;
 };
 
-const ChargerCard = ({ charger }: ChargerProps) => {
+const ChargerCard = ({ charger }: ChargerCardProps) => {
   const { type, price, capacity, latestUpdateTime, state, method } = charger;
   return (
     <Box border px={2} py={5} width={39}>

From 15817f4a523d45dc67eacfd05a07147ac8e367ce Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 20:02:35 +0900
Subject: [PATCH 23/27] =?UTF-8?q?test:=20ChargerCard,=20DetailedStation?=
 =?UTF-8?q?=EC=97=90=20auto=20docs=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChargerCard.stories.tsx                   |   2 +-
 .../DetailedStation.stories.tsx               | 132 +++++++++---------
 2 files changed, 70 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
index 991848279..87a7610a2 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx
@@ -19,7 +19,7 @@ const meta = {
   },
   argTypes: {
     charger: {
-      description: '충전소 데이터를 수정할 수 있습니다.',
+      description: '충전기 데이터를 수정할 수 있습니다.',
     },
   },
 } satisfies Meta<typeof ChargerCard>;
diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
index fc9afd1c6..976238059 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx
@@ -1,75 +1,81 @@
 import type { Meta } from '@storybook/react';
 
+import type { DetailedStationProps } from '@ui/DetailedStationInfo/DetailedStation';
 import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
 
 const meta = {
   title: 'UI/DetailedStation',
   component: DetailedStation,
+  tags: ['autodocs'],
+  args: {
+    station: {
+      stationId: 99,
+      stationName: '박스터 충전소',
+      companyName: 'CARffeine',
+      contact: '02-1234-5678',
+      chargers: [
+        {
+          type: 'DC_AC_3PHASE',
+          price: 200,
+          capacity: 3,
+          latestUpdateTime: '2023-07-18T15:11:40.000Z',
+          state: 'STANDBY',
+          method: '단독',
+        },
+        {
+          type: 'DC_COMBO',
+          price: 300,
+          capacity: 200,
+          latestUpdateTime: '2023-07-30T03:21:40.000Z',
+          state: 'UNDER_INSPECTION',
+          method: '단독',
+        },
+        {
+          type: 'DC_AC_3PHASE',
+          price: 350,
+          capacity: 50,
+          latestUpdateTime: '2023-07-01T03:21:40.000Z',
+          state: 'CHARGING_IN_PROGRESS',
+          method: '동시',
+        },
+        {
+          type: 'AC_SLOW',
+          price: 350,
+          capacity: 3,
+          latestUpdateTime: '2023-07-01T03:21:40.000Z',
+          state: 'CHARGING_IN_PROGRESS',
+          method: '동시',
+        },
+        {
+          type: 'DC_FAST',
+          price: 450,
+          capacity: 100,
+          latestUpdateTime: '2023-07-01T03:21:40.000Z',
+          state: 'STATUS_UNKNOWN',
+          method: '동시',
+        },
+      ],
+      isParkingFree: true,
+      operatingTime: '평일 09:00~19:00 / 주말 미운영',
+      address: '서울 송파구 올림픽로35다길 42',
+      detailLocation: '지하 1층 구석탱이 어딘가',
+      latitude: 37.599295930415195,
+      longitude: 127.45404683387704,
+      isPrivate: true,
+      stationState: '2023-08-04일부터 충전소 공사합니다.',
+      privateReason: '박스터 차주만 충전 가능함',
+      reportCount: 1,
+    },
+  },
+  argTypes: {
+    station: {
+      description: '충전소 데이터를 수정할 수 있습니다.',
+    },
+  },
 } satisfies Meta<typeof DetailedStation>;
 
 export default meta;
 
-export const Default = () => {
-  return (
-    <DetailedStation
-      station={{
-        stationId: 99,
-        stationName: '박스터 충전소',
-        companyName: 'CARffeine',
-        contact: '02-1234-5678',
-        chargers: [
-          {
-            type: 'DC_AC_3PHASE',
-            price: 200,
-            capacity: 3,
-            latestUpdateTime: '2023-07-18T15:11:40.000Z',
-            state: 'STANDBY',
-            method: '단독',
-          },
-          {
-            type: 'DC_COMBO',
-            price: 300,
-            capacity: 200,
-            latestUpdateTime: '2023-07-30T03:21:40.000Z',
-            state: 'UNDER_INSPECTION',
-            method: '단독',
-          },
-          {
-            type: 'DC_AC_3PHASE',
-            price: 350,
-            capacity: 50,
-            latestUpdateTime: '2023-07-01T03:21:40.000Z',
-            state: 'CHARGING_IN_PROGRESS',
-            method: '동시',
-          },
-          {
-            type: 'AC_SLOW',
-            price: 350,
-            capacity: 3,
-            latestUpdateTime: '2023-07-01T03:21:40.000Z',
-            state: 'CHARGING_IN_PROGRESS',
-            method: '동시',
-          },
-          {
-            type: 'DC_FAST',
-            price: 450,
-            capacity: 100,
-            latestUpdateTime: '2023-07-01T03:21:40.000Z',
-            state: 'STATUS_UNKNOWN',
-            method: '동시',
-          },
-        ],
-        isParkingFree: true,
-        operatingTime: '평일 09:00~19:00 / 주말 미운영',
-        address: '서울 송파구 올림픽로35다길 42',
-        detailLocation: '지하 1층 구석탱이 어딘가',
-        latitude: 37.599295930415195,
-        longitude: 127.45404683387704,
-        isPrivate: true,
-        stationState: '2023-08-04일부터 충전소 공사합니다.',
-        privateReason: '박스터 차주만 충전 가능함',
-        reportCount: 1,
-      }}
-    />
-  );
+export const Default = (args: DetailedStationProps) => {
+  return <DetailedStation {...args} />;
 };

From bf9fb1b724ee499f760c136cee9855ae3aebfa7c Mon Sep 17 00:00:00 2001
From: Dain Lee <feb.dain@gmail.com>
Date: Sun, 30 Jul 2023 21:34:55 +0900
Subject: [PATCH 24/27] =?UTF-8?q?refactor:=20=ED=95=84=EC=9A=94=EC=97=86?=
 =?UTF-8?q?=EB=8A=94=20as=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#238]
---
 .../components/ui/DetailedStationInfo/ChargerCard.tsx  |  4 ++--
 frontend/src/mocks/data.ts                             | 10 ++++++----
 frontend/src/types/index.ts                            |  1 -
 frontend/src/utils/getObjectKeysType.ts                |  3 +++
 4 files changed, 11 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/utils/getObjectKeysType.ts

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index 899f8098f..a1479556b 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -44,10 +44,10 @@ const ChargerCard = ({ charger }: ChargerCardProps) => {
     <Box border px={2} py={5} width={39}>
       <FlexBox justifyContent={'center'} alignItems={'center'} css={square}>
         <BoltIcon width={24} fill="#5c68d6" />
-        <Text>{CHARGER_STATES[state as keyof typeof CHARGER_STATES]}</Text>
+        <Text>{CHARGER_STATES[state]}</Text>
       </FlexBox>
       <article>
-        <Text>{CHARGER_TYPES[type as keyof typeof CHARGER_TYPES]}</Text>
+        <Text>{CHARGER_TYPES[type]}</Text>
         <Text>{price}원/kWh</Text>
         <Text>
           {capacity >= 50 ? '급속' : '완속'}({capacity}kW)
diff --git a/frontend/src/mocks/data.ts b/frontend/src/mocks/data.ts
index 98759254a..93b89eafc 100644
--- a/frontend/src/mocks/data.ts
+++ b/frontend/src/mocks/data.ts
@@ -1,8 +1,11 @@
+import { getObjectKeysWithType } from '@utils/getObjectKeysType';
+
 import { CHARGER_TYPES, COMPANY_NAME, ENGLISH_DAYS } from '@constants';
 
 import type {
   CapacityType,
   ChargerDetails,
+  CompanyName,
   Congestion,
   CongestionStatistics,
   EnglishDaysType,
@@ -13,13 +16,13 @@ import type { ChargerType } from '../types';
 const generateRandomData = <T>(array: T[]): T => {
   const randomIndex = Math.floor(Math.random() * array.length);
 
-  return array[randomIndex] as T;
+  return array[randomIndex];
 };
 
 const generateRandomChargers = () => {
   const length = Math.floor(Math.random() * 4) + 1;
   const chargers: ChargerDetails[] = Array.from({ length }, () => ({
-    type: generateRandomData<ChargerType>(Object.keys(CHARGER_TYPES) as ChargerType[]),
+    type: generateRandomData<ChargerType>(getObjectKeysWithType(CHARGER_TYPES)),
     price: generateRandomData([200, 250, 300, 350, 400]),
     capacity: generateRandomData<CapacityType>([3, 7, 50, 100, 200]),
     latestUpdateTime: generateRandomData([
@@ -31,7 +34,6 @@ const generateRandomChargers = () => {
       '2023-07-30T15:11:40+00:00',
     ]),
     state: generateRandomData([
-      'AVAILABLE',
       'COMMUNICATION_ERROR',
       'STANDBY',
       'CHARGING_IN_PROGRESS',
@@ -49,7 +51,7 @@ export const stations: MockStation[] = Array.from({ length: 3000 }).map((_, inde
   return {
     stationId: index,
     stationName: `충전소 ${index}`,
-    companyName: generateRandomData<string>([...Object.values(COMPANY_NAME)]),
+    companyName: generateRandomData<CompanyName>(Object.values(COMPANY_NAME)),
     contact: generateRandomData(['', '010-1234-5678', '02-000-0000']),
     chargers: generateRandomChargers(),
     isParkingFree: generateRandomData<boolean>([true, false]),
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 89ab2f5d1..42eee7929 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -3,7 +3,6 @@ import { type CAPACITIES, type CHARGER_TYPES, type COMPANY_NAME } from '@constan
 
 export type CapacityType = 3 | 7 | 50 | 100 | 200;
 export type ChargerStateType =
-  | 'AVAILABLE'
   | 'COMMUNICATION_ERROR'
   | 'STANDBY'
   | 'CHARGING_IN_PROGRESS'
diff --git a/frontend/src/utils/getObjectKeysType.ts b/frontend/src/utils/getObjectKeysType.ts
new file mode 100644
index 000000000..7a571ae60
--- /dev/null
+++ b/frontend/src/utils/getObjectKeysType.ts
@@ -0,0 +1,3 @@
+export const getObjectKeysWithType = <T extends object>(obj: T) => {
+  return Object.keys(obj) as Array<keyof T>;
+};

From 180e1e0390a46aa68a09f0ef76fa7e18c22aca1c Mon Sep 17 00:00:00 2001
From: "Gabriel Ju Hyun, Yoon" <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 22:43:35 +0900
Subject: [PATCH 25/27] Update
 frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx

Co-authored-by: Dain Lee <108778921+feb-dain@users.noreply.github.com>
---
 frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
index a1479556b..66dc6dbe8 100644
--- a/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx
@@ -42,7 +42,7 @@ const ChargerCard = ({ charger }: ChargerCardProps) => {
   const { type, price, capacity, latestUpdateTime, state, method } = charger;
   return (
     <Box border px={2} py={5} width={39}>
-      <FlexBox justifyContent={'center'} alignItems={'center'} css={square}>
+      <FlexBox justifyContent='center' alignItems='center' css={square}>
         <BoltIcon width={24} fill="#5c68d6" />
         <Text>{CHARGER_STATES[state]}</Text>
       </FlexBox>

From b1b99ef324117c05099759f11edae66fb20fc910 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 22:45:25 +0900
Subject: [PATCH 26/27] =?UTF-8?q?refactor:=20prop=20=EC=82=AC=EC=9A=A9=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ui/DetailedStationInfo/DetailedStation.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
index d7857de6f..a273b3b74 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx
@@ -41,7 +41,7 @@ const DetailedStation = ({ station }: DetailedStationProps) => {
       </Box>
       <hr />
 
-      {stationState && <Alert color={'warning'} text={`[공지] ${stationState}`} />}
+      {stationState && <Alert color="warning" text={`[공지] ${stationState}`} />}
 
       <Box px={1}>
         <Box my={1}>

From 6b07778bec0a579ffc68136c6bd23a2c13e632e8 Mon Sep 17 00:00:00 2001
From: gabrielyoon7 <gabrielyoon7@gmail.com>
Date: Sun, 30 Jul 2023 22:46:54 +0900
Subject: [PATCH 27/27] =?UTF-8?q?refactor:=20=EC=A3=BC=EC=84=9D=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ui/DetailedStationInfo/DetailedStationInfo.tsx       | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
index dae29689e..92b669b2f 100644
--- a/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
+++ b/frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx
@@ -4,21 +4,12 @@ import Box from '@common/Box';
 
 import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
 
-/**
- * 이 컴포넌트는 컨테이너의 역할을 하게 될 것입니다.
- */
-
 const DetailedStationInfo = () => {
   const { data: station, isLoading, isError } = useSelectedStation();
 
   if (isLoading || isError) return <></>;
 
-  /**
-   * TODO: 혼잡도도 외부(지금 이 컴포넌트)에서 자식에게 데이터를 주입 해서 렌더링 하는 방식으로 구현이 필요할듯 함. / 1. 데이터 페칭 관련 관심사 분리 가능, 2. 스토리북 테스트 쉬워짐
-   */
-
   return (
-    // 여기에서 쓰이는 Box 컴포넌트는 아코디언이 오기 전 까지 임시로 존재합니다. 자식과의 관심사 분리를 위해 분리 조치함.
     <Box
       css={{
         position: 'fixed',