From 32f4ab91c4809423874c106137d01a50fbc9c6c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?junh=5Feee=28=EC=9D=B4=EC=A4=80=ED=9D=AC=29?=
 <junheee@palnet.co.kr>
Date: Wed, 24 Jul 2024 14:10:42 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=ED=8F=89=EC=A7=80=EC=97=AD=203?=
 =?UTF-8?q?=EB=93=B1=EB=B6=84=20outline=20=EC=83=89=EC=83=81=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/map/mapbox/MapBoxMap.js      | 56 +++++++++++++++++----
 src/views/control/setting/ControlSetting.js | 55 ++++++++++++++++----
 2 files changed, 93 insertions(+), 18 deletions(-)

diff --git a/src/components/map/mapbox/MapBoxMap.js b/src/components/map/mapbox/MapBoxMap.js
index 7b49321f..5b14ae22 100644
--- a/src/components/map/mapbox/MapBoxMap.js
+++ b/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({
-          ...item,
-          properties: { ...item.properties, color: '#a4edf5' }
-        });
+        if (item.properties?.divCd) {
+          if (item.properties.divCd === '3cut') {
+            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
       }
diff --git a/src/views/control/setting/ControlSetting.js b/src/views/control/setting/ControlSetting.js
index 574e3de3..bcb0f1f8 100644
--- a/src/views/control/setting/ControlSetting.js
+++ b/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({
-              ...item,
-              properties: { ...item.properties, color: '#a4edf5' } //009cad
-            });
+            if (item.properties?.divCd) {
+              if (item.properties.divCd === '3cut') {
+                arrGeoJson.push({
+                  ...item,
+                  properties: {
+                    ...item.properties,
+                    color: '#a4edf5',
+                    stroke: '#54797d'
+                  }
+                });
+              }
+            } else {
+              arrGeoJson.push({
+                ...item,
+                properties: {
+                  ...item.properties,
+                  color: '#a4edf5',
+                  stroke: '#a4edf5'
+                }
+              });
+            }
           }
         });