feat: Add grid color setting modal

src/components/floor-plan/FloorPlan.jsx

@@ -12,6 +12,7 @@ import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid'
 import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
 import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
+import GridColorSetting from './modal/grid/GridColorSetting'
 
 export default function FloorPlan() {
   const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@@ -27,9 +28,11 @@ export default function FloorPlan() {
   const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
   const [showGridCopyModal, setShowGridCopyModal] = useState(false)
   const [showGridMoveModal, setShowGridMoveModal] = useState(false)
+  const [showColorPickerModal, setShowColorPickerModal] = useState(false)
   const canvasSettingProps = {
     setShowCanvasSettingModal,
     setShowDotLineGridModal,
+    setShowColorPickerModal,
   }
 
   const outlineProps = {
@@ -78,6 +81,10 @@ export default function FloorPlan() {
     setShowDotLineGridModal,
   }
 
+  const gridColorProps = {
+    setShowColorPickerModal,
+  }
+
   const propertiesSettingProps = {
     setShowPropertiesSettingModal,
   }
@@ -94,6 +101,7 @@ export default function FloorPlan() {
           {/*{showOutlineModal && <OuterLineWall {...outlineProps} />}*/}
           {showOutlineModal && <WallLineSetting {...outlineProps} />}
           {showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
+          {showColorPickerModal && <GridColorSetting {...gridColorProps} />}
           {showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
         </div>
       </div>

src/components/floor-plan/modal/grid/GridColorSetting.jsx

@@ -0,0 +1,27 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import ColorPicker from '@/components/common/color-picker/ColorPicker'
+import { useRecoilState } from 'recoil'
+import { gridColorState } from '@/store/gridAtom'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function GridColorSetting(props) {
+  const { setShowColorPickerModal } = props
+  const [color, setColor] = useRecoilState(gridColorState)
+  const { getMessage } = useMessage()
+
+  return (
+    <WithDraggable isShow={true} pos={{ x: -150, y: 300 }}>
+      <div className={`modal-pop-wrap ssm mount`}>
+        <div className="modal-head">
+          <h1 className="title">{getMessage('modal.canvas.setting.grid.color.setting')}</h1>
+          <button className="modal-close" onClick={() => setShowColorPickerModal(false)}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <ColorPicker color={color} setColor={setColor} />
+        </div>
+      </div>
+    </WithDraggable>
+  )
+}

src/components/floor-plan/modal/setting01/GridOption.jsx

@@ -8,7 +8,7 @@ import { gridColorState } from '@/store/gridAtom'
 import { useColor } from 'react-color-palette'
 
 export default function GridOption(props) {
-  const { setShowDotLineGridModal } = props
+  const { setShowDotLineGridModal, setShowColorPickerModal } = props
   const [gridOptions, setGridOptions] = useRecoilState(settingModalGridOptionsState)
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
@@ -55,7 +55,9 @@ export default function GridOption(props) {
     if (option.id === 4) {
       // 그리드 색 설정
       if (option.selected) {
-        setColorPickerShow(true)
+        setShowColorPickerModal(true)
+      } else {
+        setShowColorPickerModal(false)
       }
     }
 

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -8,7 +8,7 @@ import { useMessage } from '@/hooks/useMessage'
 import GridOption from '@/components/floor-plan/modal/setting01/GridOption'
 
 export default function SettingModal01(props) {
-  const { setShowCanvasSettingModal, setShowDotLineGridModal } = props
+  const { setShowCanvasSettingModal, setShowDotLineGridModal, setShowColorPickerModal } = props
   const [buttonAct, setButtonAct] = useState(1)
   const { getMessage } = useMessage()
 
@@ -36,7 +36,7 @@ export default function SettingModal01(props) {
           </div>
           {buttonAct === 1 && <FirstOption />}
           {buttonAct === 2 && <SecondOption />}
-          {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} />}
+          {buttonAct === 3 && <GridOption setShowDotLineGridModal={setShowDotLineGridModal} setShowColorPickerModal={setShowColorPickerModal} />}
         </div>
       </div>
     </WithDraggable>