수평지역 3등분 outline 색상 변경

src/components/map/mapbox/MapBoxMap.js

@@ -318,33 +318,70 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
       if (item.properties.type === '0001' && mapState.area0001) {
         arrGeoJson.push({
           ...item,
-          properties: { ...item.properties, color: '#FF3648' }
+          properties: {
+            ...item.properties,
+            color: '#FF3648',
+            stroke: '#FF3648'
+          }
         });
       } else if (item.properties.type === '0002' && mapState.area0002) {
         arrGeoJson.push({
           ...item,
-          properties: { ...item.properties, color: '#FFA1AA' }
+          properties: {
+            ...item.properties,
+            color: '#FFA1AA',
+            stroke: '#FFA1AA'
+          }
         });
       } else if (item.properties.type === '0003' && mapState.area0003) {
         arrGeoJson.push({
           ...item,
-          properties: { ...item.properties, color: '#f5dcab' }
+          properties: {
+            ...item.properties,
+            color: '#f5dcab',
+            stroke: '#f5dcab'
+          }
         });
       } else if (item.properties.type === '0004' && mapState.area0004) {
         arrGeoJson.push({
           ...item,
-          properties: { ...item.properties, color: '#A16B00' }
+          properties: {
+            ...item.properties,
+            color: '#A16B00',
+            stroke: '#A16B00'
+          }
         });
       } else if (item.properties.type === '0005' && mapState.area0005) {
         arrGeoJson.push({
           ...item,
-          properties: { ...item.properties, color: '#AB40FF' }
+          properties: {
+            ...item.properties,
+            color: '#AB40FF',
+            stroke: '#AB40FF'
+          }
         });
       } else if (item.properties.type === '0006' && mapState.area0006) {
-        arrGeoJson.push({
+        if (item.properties?.divCd) {
-          ...item,
+          if (item.properties.divCd === '3cut') {
-          properties: { ...item.properties, color: '#a4edf5' }
+            arrGeoJson.push({
-        });
+              ...item,
+              properties: {
+                ...item.properties,
+                color: '#a4edf5',
+                stroke: '#54797d'
+              }
+            });
+          }
+        } else {
+          arrGeoJson.push({
+            ...item,
+            properties: {
+              ...item.properties,
+              color: '#a4edf5',
+              stroke: '#a4edf5'
+            }
+          });
+        }
       }
     });
     useGeoJson.features = arrGeoJson.filter(i => i.geometry.type === 'Polygon');
@@ -363,6 +400,7 @@ export default function MapBoxMap({ handlerDrawObjInit }) {
       layout: {},
       paint: {
         'fill-color': ['get', 'color'],
+        'fill-outline-color': ['get', 'stroke'],
         // 'fill-extrusion-height': 3000,
         'fill-opacity': 0.5
       }

src/views/control/setting/ControlSetting.js

@@ -52,33 +52,70 @@ const ControlSetting = props => {
           if (item.properties.type === '0001' && mapState.area0001) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#FF3648' }
+              properties: {
+                ...item.properties,
+                color: '#FF3648',
+                stroke: '#FF3648'
+              }
             });
           } else if (item.properties.type === '0002' && mapState.area0002) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#FFA1AA' }
+              properties: {
+                ...item.properties,
+                color: '#FFA1AA',
+                stroke: '#FFA1AA'
+              }
             });
           } else if (item.properties.type === '0003' && mapState.area0003) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#f5dcab' } //FFA800
+              properties: {
+                ...item.properties,
+                color: '#f5dcab',
+                stroke: '#f5dcab'
+              } //FFA800
             });
           } else if (item.properties.type === '0004' && mapState.area0004) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#A16B00' }
+              properties: {
+                ...item.properties,
+                color: '#A16B00',
+                stroke: '#A16B00'
+              }
             });
           } else if (item.properties.type === '0005' && mapState.area0005) {
             arrGeoJson.push({
               ...item,
-              properties: { ...item.properties, color: '#AB40FF' }
+              properties: {
+                ...item.properties,
+                color: '#AB40FF',
+                stroke: '#AB40FF'
+              }
             });
           } else if (item.properties.type === '0006' && mapState.area0006) {
-            arrGeoJson.push({
+            if (item.properties?.divCd) {
-              ...item,
+              if (item.properties.divCd === '3cut') {
-              properties: { ...item.properties, color: '#a4edf5' } //009cad
+                arrGeoJson.push({
-            });
+                  ...item,
+                  properties: {
+                    ...item.properties,
+                    color: '#a4edf5',
+                    stroke: '#54797d'
+                  }
+                });
+              }
+            } else {
+              arrGeoJson.push({
+                ...item,
+                properties: {
+                  ...item.properties,
+                  color: '#a4edf5',
+                  stroke: '#a4edf5'
+                }
+              });
+            }
           }
         });