에러 리스트의 에러들을 해결

package.json

@@ -23,7 +23,7 @@
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "NODE_ENV=development react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

src/store/index.ts

@@ -1,5 +1,4 @@
 import { combineReducers, createStore } from 'redux';
-
 import map from './map/reducer';
 import {
   poiReducer as poi,

src/store/style/manageCategories.ts

@@ -24,12 +24,13 @@ export const combineElement = ({
   elements.forEach((element) => {
     if (update[element]) {
       switch (element) {
-        case ElementNameType.labelIcon:
-          combineStyle({
-            style: update[element] as StyleActionPayload,
-            defaultStyle: elementStyle[element] as StyleType,
+        case ElementNameType.labelIcon: {
+          update[element] = combineStyle({
+            style: elementStyle[element] as StyleActionPayload,
+            defaultStyle: update[element] as StyleType,
           });
           break;
+        }
         case ElementNameType.section:
         case ElementNameType.labelText:
           update[element] = combineSubElement({

src/utils/map-styling/road.ts

@@ -70,7 +70,7 @@ function roadStyling({
       map,
       layerNames: outsideLayerNames,
       type: ColorType.fill,
-      color: '#ffffff',
+      color: style.color,
       [key]: style[key as StyleKeyType],
     });
   }

src/utils/rendering-data/defaultStyle.ts

@@ -144,7 +144,7 @@ const defaultStyle: DefaultWholeStyle = {
     country: {
       section: {
         fill: { color: 'transparent', weight: 0 },
-        stroke: { color: 'hsl(230, 8%, 51%)', weight: 0 },
+        stroke: { color: 'hsl(230, 8%, 51%)', weight: 7 },
       },
       labelText: {
         fill: { color: 'hsl(0, 0%, 0%)', weight: 0 },
@@ -154,7 +154,7 @@ const defaultStyle: DefaultWholeStyle = {
     state: {
       section: {
         fill: { color: 'transparent', weight: 0 },
-        stroke: { color: 'hsl(230, 14%, 77%)', weight: 0 },
+        stroke: { color: 'hsl(230, 14%, 77%)', weight: 7 },
       },
       labelText: {
         fill: { color: 'hsl(0, 0%, 0%)', weight: 0 },
@@ -278,7 +278,7 @@ const defaultStyle: DefaultWholeStyle = {
     subway: {
       section: {
         fill: { color: 'transparent', weight: 0 },
-        stroke: { color: 'hsl(192, 70%, 43%)', weight: 0 },
+        stroke: { color: 'hsl(192, 70%, 43%)', weight: 2 },
       },
       labelText: {
         fill: { color: 'transparent', weight: 0 },

src/utils/rendering-data/sidebarThemeData.ts

@@ -31,7 +31,7 @@ const data = [
   },
   {
     src:
-      'https://i.pinimg.com/originals/8f/6d/97/8f6d971f3d086edaf6cee773991abb27.jpg',
+      'https://user-images.githubusercontent.com/26402298/102014565-f551c700-3d99-11eb-9817-f71e2dde1772.png',
     name: '청사진',
     theme: blueprint,
   },

src/utils/rendering-data/theme/blueprint.json

@@ -6,10 +6,24 @@
         "fill": { "color": "#405CB0", "saturation": 47, "lightness": 47 }
       },
       "labelText": {
-        "fill": { "color": "#405CB0", "saturation": 40, "lightness": 49 }
+        "fill": {
+          "visibility": "none",
+          "color": "#405CB0",
+          "saturation": 40,
+          "lightness": 49
+        }
       }
     },
-    "building": { "labelText": { "fill": { "visibility": "none" } } }
+    "building": {
+      "section": {
+        "stroke": {
+          "color": "#ffffff",
+          "weight": 2.5,
+          "saturation": 0,
+          "lightness": 100
+        }
+      }
+    }
   },
   "administrative": {
     "all": {
@@ -24,13 +38,23 @@
     "all": {
       "section": {
         "fill": { "color": "#405CB0", "saturation": 47, "lightness": 47 },
-        "stroke": { "color": "#fafafa", "weight": 0.5, "lightness": 98 }
+        "stroke": { "color": "#fafafa", "weight": 1.5, "lightness": 98 }
       },
       "labelText": {
-        "fill": { "color": "#f7f8fd", "saturation": 60, "lightness": 98 },
+        "fill": { "color": "#405cb0", "saturation": 47, "lightness": 47 },
         "stroke": { "visibility": "none", "color": "#fafafa", "lightness": 98 }
       },
       "labelIcon": { "visibility": "none" }
+    },
+    "local": {
+      "section": {
+        "stroke": {
+          "color": "#ffffff",
+          "weight": 3.5,
+          "saturation": 0,
+          "lightness": 100
+        }
+      }
     }
   },
   "transit": {
@@ -48,5 +72,13 @@
       }
     }
   },
-  "water": { "all": { "section": { "fill": { "color": "#405CB0" } } } }
+  "water": {
+    "all": {
+      "section": { "fill": { "color": "#405CB0" } },
+      "labelText": {
+        "fill": { "color": "#405cb0", "saturation": 47, "lightness": 47 },
+        "stroke": { "color": "#ffffff", "lightness": 100 }
+      }
+    }
+  }
 }

src/utils/setFeatureStyle.ts

@@ -28,6 +28,10 @@ function setFeatureStyle({
     if (featureState[x].isChanged || !featureState[y].isChanged) return 1;
     return -1;
   });
+  const isInit =
+    subFeatures.findIndex(
+      (subFeature) => featureState[subFeature].isChanged
+    ) === -1;
 
   for (const subFeature of sortedFeatures) {
     const elements = Object.keys(featureState[subFeature]) as ElementNameType[];
@@ -42,6 +46,7 @@ function setFeatureStyle({
               subFeature,
               element,
               style: elementStyle as StyleType,
+              isInit,
             });
             break;
           case ElementNameType.labelText:
@@ -58,6 +63,7 @@ function setFeatureStyle({
                 style: (elementStyle as SubElementType)[
                   subElement
                 ] as StyleType,
+                isInit,
               });
             });
             break;
@@ -71,6 +77,7 @@ function setFeatureStyle({
 
 interface setElementStyleProps extends ActionPayload {
   map: mapboxgl.Map;
+  isInit: boolean;
 }
 
 function setElementStyle({
@@ -80,9 +87,12 @@ function setElementStyle({
   element,
   subElement,
   style,
+  isInit,
 }: setElementStyleProps): void {
+  if (!style.isChanged && !isInit) return;
   const keys = Object.keys(style) as StyleKeyType[];
   keys.forEach((key) => {
+    if (key === 'lightness' || key === 'saturation') return;
     mapStyling[feature]({
       map,
       subFeature,

src/utils/urlParsing.ts

@@ -67,7 +67,10 @@ export function jsonToURL({
   mapCoordinate,
   markers,
 }: ExportType): string {
-  const url = 'http://map-styler.kro.kr/show?';
+  const url =
+    process.env.NODE_ENV === 'development'
+      ? 'http://localhost:3000/show?='
+      : process.env.REACT_APP_DEPLOY_URL;
   const styleQueryString = isNotEmptyObject(filteredStyle)
     ? `style=${encodeURIComponent(
         jsonToURLGetStyleQueryString(filteredStyle as URLJsonType)