feat: 충전소 상세 정보 조회기능을 개선하고, 누적 고장 신고 확인 기능을 구현한다

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;

frontend/src/components/ui/DetailedStationInfo/ChargerCard.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta } from '@storybook/react';
+
+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 = (args: ChargerCardProps) => {
+  return <ChargerCard {...args} />;
+};

frontend/src/components/ui/DetailedStationInfo/ChargerCard.tsx

@@ -0,0 +1,72 @@
+import { BoltIcon } from '@heroicons/react/24/solid';
+import { css } from 'styled-components';
+
+import Box from '@common/Box';
+import FlexBox from '@common/FlexBox';
+import Text from '@common/Text';
+
+import { CHARGER_STATES, CHARGER_TYPES } from '@constants';
+
+import type { ChargerDetails } from '../../../types';
+
+export interface ChargerCardProps {
+  charger: ChargerDetails;
+}
+
+const calculateLatestUpdateTime = (latestUpdateTimeString: string) => {
+  const currentDate = new Date();
+  const latestUpdatedDate = new Date(latestUpdateTimeString);
+  const diffInSeconds = Math.floor((currentDate.getTime() - latestUpdatedDate.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return `${diffInSeconds}초 전`;
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+
+  if (diffInHours < 24) {
+    return `${diffInHours}시간 전`;
+  }
+
+  const diffInDays = Math.floor(diffInHours / 24);
+  return `${diffInDays}일 전`;
+};
+
+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}>
+        <BoltIcon width={24} fill="#5c68d6" />
+        <Text>{CHARGER_STATES[state]}</Text>
+      </FlexBox>
+      <article>
+        <Text>{CHARGER_TYPES[type]}</Text>
+        <Text>{price}원/kWh</Text>
+        <Text>
+          {capacity >= 50 ? '급속' : '완속'}({capacity}kW)
+        </Text>
+        {method && <Text>{method}</Text>}
+      </article>
+      {latestUpdateTime && (
+        <Text variant="caption" align="right">
+          마지막 업데이트: {calculateLatestUpdateTime(latestUpdateTime)}
+        </Text>
+      )}
+    </Box>
+  );
+};
+
+const square = css`
+  padding: 0.4rem;
+  border-radius: 1rem;
+  background: #e9edf8;
+`;
+
+export default ChargerCard;

frontend/src/components/ui/DetailedStationInfo/DetailedStation.stories.tsx

@@ -0,0 +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 = (args: DetailedStationProps) => {
+  return <DetailedStation {...args} />;
+};

frontend/src/components/ui/DetailedStationInfo/DetailedStation.tsx

@@ -0,0 +1,93 @@
+import { css, styled } from 'styled-components';
+
+import Alert from '@common/Alert';
+import Box from '@common/Box';
+import FlexBox from '@common/FlexBox';
+import Text from '@common/Text';
+
+import ChargerCard from '@ui/DetailedStationInfo/ChargerCard';
+
+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 (
+    <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>
+        </Box>
+        <Text variant="subtitle">{address}</Text>
+        {detailLocation && <Text variant="caption">{detailLocation}</Text>}
+      </Box>
+      <hr />
+
+      {stationState && <Alert color="warning" text={`[공지] ${stationState}`} />}
+
+      <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 />
+
+      <FlexBox>
+        {chargers.map((charger, index) => (
+          <ChargerCard key={index} charger={charger} />
+        ))}
+      </FlexBox>
+
+      {reportCount > 0 && (
+        <Box my={1}>
+          <Alert color={'secondary'} text={`최근 충전기 고장 신고가 ${reportCount}번 접수됐어요`} />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const containerCss = css`
+  width: 34rem;
+  height: 100vh;
+  background-color: white;
+  box-shadow: 1px 1px 2px gray;
+`;
+
+export default DetailedStation;

frontend/src/components/ui/DetailedStationInfo/DetailedStationInfo.tsx

@@ -0,0 +1,26 @@
+import { useSelectedStation } from '@hooks/useSelectedStation';
+
+import Box from '@common/Box';
+
+import DetailedStation from '@ui/DetailedStationInfo/DetailedStation';
+
+const DetailedStationInfo = () => {
+  const { data: station, isLoading, isError } = useSelectedStation();
+
+  if (isLoading || isError) return <></>;
+
+  return (
+    <Box
+      css={{
+        position: 'fixed',
+        left: '41rem',
+        width: '34rem',
+        zIndex: '999',
+      }}
+    >
+      <DetailedStation station={station} />
+    </Box>
+  );
+};
+
+export default DetailedStationInfo;

frontend/src/components/ui/DetailedStationInfo/index.tsx

@@ -0,0 +1,3 @@
+import DetailedStationInfo from './DetailedStationInfo';
+
+export default DetailedStationInfo;