refactor: 서버 주소 추가 및 서버가 주는 정보에 맞춰 코드 변경한다

frontend/package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "test": "jest",
-    "start": "webpack-dev-server --open --mode development --hot --port 3000",
+    "dev": "webpack-dev-server --open --mode development --hot --port 3000",
+    "start": "webpack-dev-server --open --mode production --hot --port 3000",
     "build": "webpack --mode production",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",

frontend/src/constants/index.ts

@@ -4,3 +4,18 @@ export const DEFAULT_CENTER = {
 } as const;
 
 export const INITIAL_ZOOM_SIZE = 14;
+
+export const INVALID_VALUE_LIST = ['null', '.', '..', '1', '#'] as const;
+
+export const DEVELOP_URL = 'http://localhost:8080/api';
+export const PRODUCTION_URL = 'http://1.1.1.1:8080/api';
+
+type ModeType = 'development' | 'production';
+
+const URL: Readonly<Record<ModeType, string>> = {
+  development: DEVELOP_URL,
+  production: PRODUCTION_URL,
+};
+
+const MODE = process.env.NODE_ENV as ModeType;
+export const BASE_URL = URL[MODE];

frontend/src/hooks/useSelectedStation.ts

@@ -4,17 +4,27 @@ import { useExternalValue } from '@utils/external-state';
 
 import { selectedStationIdStore } from '@stores/selectedStationStore';
 
+import { BASE_URL, INVALID_VALUE_LIST } from '@constants';
+
 import type { StationDetails } from 'types';
 
 export const fetchStationDetails = async (selectedStationId: number) => {
-  const stationDetails = await fetch(`/stations/${selectedStationId}`, {
+  const stationDetails = await fetch(`${BASE_URL}/stations/${selectedStationId}`, {
     method: 'GET',
-  }).then<StationDetails>((response) => {
+  }).then<StationDetails>(async (response) => {
     if (!response.ok) {
       throw new Error('[error] 충전소 세부 정보를 불러올 수 없습니다.');
     }
 
-    return response.json();
+    const data: StationDetails = await response.json();
+
+    const changedDataList = Object.entries(data).map(([key, value]) => {
+      if (INVALID_VALUE_LIST.includes(value)) value = null;
+
+      return [key, value];
+    });
+
+    return Object.fromEntries(changedDataList);
   });
 
   return stationDetails;

frontend/src/hooks/useStations.ts

@@ -5,6 +5,8 @@ import { getDisplayPosition } from '@utils/google-maps';
 
 import { stationFilterStore } from '@stores/stationFilterStore';
 
+import { BASE_URL } from '@constants';
+
 import type { StationSummary } from 'types';
 
 export const fetchStation = async (map: google.maps.Map) => {
@@ -15,7 +17,7 @@ export const fetchStation = async (map: google.maps.Map) => {
 
   const displayPositionParams = String(new URLSearchParams(displayPositionString));
 
-  const stations = await fetch(`/stations?${displayPositionParams}`, {
+  const stations = await fetch(`${BASE_URL}/stations?${displayPositionParams}`, {
     method: 'GET',
   }).then<StationSummary[]>((response) => response.json());
 

frontend/src/mocks/handlers.ts

@@ -1,11 +1,13 @@
 import { rest } from 'msw';
 
+import { DEVELOP_URL } from '@constants';
+
 import { stations } from './data';
 
 import type { StationSummary } from 'types';
 
 export const handlers = [
-  rest.get('/stations', async (req, res, ctx) => {
+  rest.get(`${DEVELOP_URL}/stations`, async (req, res, ctx) => {
     const { searchParams } = req.url;
 
     const latitude = Number(searchParams.get('latitude'));
@@ -46,7 +48,7 @@ export const handlers = [
     return res(ctx.delay(200), ctx.status(200), ctx.json(foundStations));
   }),
 
-  rest.get('/stations/:id', async (req, res, ctx) => {
+  rest.get(`${DEVELOP_URL}/stations/:id`, async (req, res, ctx) => {
     const stationId = Number(req.params.id);
     const selectedStation = stations.find((station) => station.stationId === stationId);