feat: 길찾기 기능을 구현한다

frontend/src/components/ui/StationInfoWindow/PathFinding.tsx

@@ -0,0 +1,31 @@
+import { BiSolidCar } from 'react-icons/bi';
+
+import FlexBox from '@common/FlexBox';
+import type { FlexBoxProps } from '@common/FlexBox/FlexBox';
+import Text from '@common/Text';
+
+import type { Station } from '@type';
+
+interface PathFindingProps
+  extends Pick<Station, 'address' | 'latitude' | 'longitude'>,
+    FlexBoxProps {}
+
+const PathFinding = ({ address, latitude, longitude, ...props }: PathFindingProps) => {
+  const KAKAO_MAP_LINK = `https://map.kakao.com/link/to/${address},${latitude},${longitude}`;
+
+  return (
+    <FlexBox
+      tag="a"
+      alignItems="center"
+      rel="noreferrer"
+      href={KAKAO_MAP_LINK}
+      target="_blank"
+      {...props}
+    >
+      <Text variant="label" weight='regular'>길찾기</Text>
+      <BiSolidCar />
+    </FlexBox>
+  );
+};
+
+export default PathFinding;

frontend/src/components/ui/StationInfoWindow/StationInfo.tsx

@@ -13,6 +13,8 @@ import Text from '@common/Text';
 
 import type { StationDetails } from '@type';
 
+import PathFinding from './PathFinding';
+
 export interface StationInfoProps {
   stationDetails: StationDetails;
   handleOpenStationDetail: () => void;
@@ -24,8 +26,17 @@ const StationInfo = ({
   handleOpenStationDetail,
   handleCloseStationWindow,
 }: StationInfoProps) => {
-  const { address, chargers, companyName, isParkingFree, isPrivate, stationId, stationName } =
-    stationDetails;
+  const {
+    address,
+    chargers,
+    companyName,
+    isParkingFree,
+    isPrivate,
+    stationId,
+    stationName,
+    longitude,
+    latitude,
+  } = stationDetails;
 
   const {
     isAvailable,
@@ -91,14 +102,17 @@ const StationInfo = ({
         </Text>
       </FlexBox>
 
-      <Button onClick={handleOpenStationDetail} mt={3} hover>
-        <FlexBox alignItems="center">
-          <Text variant="label" mb={0.75}>
-            상세 정보 보기
-          </Text>
-          <HiChevronRight />
-        </FlexBox>
-      </Button>
+      <FlexBox mt={3} justifyContent="between">
+        <Button onClick={handleOpenStationDetail} hover>
+          <FlexBox alignItems="center">
+            <Text variant="label" mb={0.75}>
+              상세 정보 보기
+            </Text>
+            <HiChevronRight />
+          </FlexBox>
+        </Button>
+        <PathFinding address={address} latitude={latitude} longitude={longitude} />
+      </FlexBox>
     </Box>
   );
 };

frontend/src/components/ui/StationSearchWindow/StationSearchBar.tsx

@@ -5,7 +5,6 @@ import { useState } from 'react';
 import { useSearchStations } from '@hooks/tanstack-query/useSearchStations';
 import { useDebounce } from '@hooks/useDebounce';
 
-import Box from '@common/Box';
 import FlexBox from '@common/FlexBox';
 import Loader from '@common/Loader';