feat: 차량번호 포맷팅 유틸 함수 구현 (#97)

- 한글 뒤 공백

app/(main)/location/components/VehicleDetailsCard/index.tsx

@@ -7,6 +7,7 @@ import SquareButton from '@/components/common/Button/SquareButton'
 import { useCoordToAddress } from '@/hooks/useCoordToAddress'
 import { formatISODateToDot } from '@/lib/utils/date'
 import { normalizeCoordinate } from '@/lib/utils/normalize'
+import { addSpaceVehicleNumber } from '@/lib/utils/string'
 import { VehicleDetailsModel } from '@/types/vehicle'
 
 import * as styles from './styles.css'
@@ -28,19 +29,22 @@ const VehicleDetailsCard = ({ vehicleDetails, onCloseButtonClick }: VehicleDetai
         lng: normalizeCoordinate(lng),
     }
 
-    const address = useCoordToAddress(normalizedCoordinate.lat, normalizedCoordinate.lng)
-
     // TODO: 다른 데이터 오류 가능성 체크
     const isDriving = status === 'ON'
+    const formattedVehicleNumber = addSpaceVehicleNumber(vehicleNumber)
+    const formattedLastEngineOn = formatISODateToDot(lastEngineOn)
+    const formattedLastEngineOff = formatISODateToDot(lastEngineOff)
     const todayDrivingTime = todayDrivingHistory ? todayDrivingHistory.drivingTime : 0
     const todayDrivingDistance = todayDrivingHistory ? todayDrivingHistory.distance : 0
 
+    const address = useCoordToAddress(normalizedCoordinate.lat, normalizedCoordinate.lng)
+
     return (
         <article className={styles.container}>
             <header className={styles.header}>
                 <div className={styles.headerContent}>
                     <Badge shape='circle' variant={isDriving ? '운행중' : '미운행'} />
-                    <h2 className={styles.vehicleNumber}>{vehicleNumber}</h2>
+                    <h2 className={styles.vehicleNumber}>{formattedVehicleNumber}</h2>
                 </div>
                 <button onClick={() => onCloseButtonClick(false)} aria-label='차량 상세 정보 닫기'>
                     <Image src={'/icons/clear-icon.svg'} width={36} height={36} alt='닫기 버튼' />
@@ -64,11 +68,11 @@ const VehicleDetailsCard = ({ vehicleDetails, onCloseButtonClick }: VehicleDetai
                             <th scope='row' className={styles.tableHeader}>
                                 최근시동 ON
                             </th>
-                            <td className={styles.tableCell}>{formatISODateToDot(lastEngineOn)}</td>
+                            <td className={styles.tableCell}>{formattedLastEngineOn}</td>
                             <th scope='row' className={styles.tableHeader}>
                                 최근시동 OFF
                             </th>
-                            <td className={styles.tableCell}>{formatISODateToDot(lastEngineOff)}</td>
+                            <td className={styles.tableCell}>{formattedLastEngineOff}</td>
                         </tr>
                         <tr>
                             <th scope='row' className={styles.tableHeader}>

app/(main)/location/components/VehicleMarker/index.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { CustomOverlayMap, MapMarker } from 'react-kakao-maps-sdk'
 
 import { MARKER_IMAGE } from '@/constants/map'
+import { addSpaceVehicleNumber } from '@/lib/utils/string'
 import { VehicleInfoModel } from '@/types/vehicle'
 
 import * as styles from './styles.css'
@@ -22,7 +23,7 @@ const VehicleMarker = ({ vehicleInfo, onVehicleClick }: VehicleMarkerProps) => {
         }, 3000)
     }, [])
 
-    const vehicleNumber = vehicleInfo.vehicleNumber.slice(0, 3) + ' ' + vehicleInfo.vehicleNumber.slice(3)
+    const vehicleNumber = addSpaceVehicleNumber(vehicleInfo.vehicleNumber)
     const vehicleCurrentLocation = {
         lat: vehicleInfo?.recentCycleInfo.lat,
         lng: vehicleInfo?.recentCycleInfo.lng,

lib/utils/string.ts

@@ -0,0 +1,2 @@
+// 123가1234 -> 123가 1234 (띄어쓰기 추가)
+export const addSpaceVehicleNumber = (vehicleNumber: string) => vehicleNumber.replace(/([가-힣])/, '$1 ')