- Canvas Setting 메뉴 변경

src/components/floor-plan/FloorPlan.jsx

@@ -53,11 +53,14 @@ export default function FloorPlan() {
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
         option2: optionData2,
+        dimensionDisplay: optionData5,
       })
       setSettingModalSecondOptions({
         option3: optionData3,

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

@@ -9,7 +9,7 @@ export default function FirstOption() {
   const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
   const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
   const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
-  const { option1, option2 } = settingModalFirstOptions
+  const { option1, option2, dimensionDisplay } = settingModalFirstOptions
   const { option3, option4 } = settingModalSecondOptions
   const { getMessage } = useMessage()
   const { get, post } = useAxios()
@@ -28,12 +28,17 @@ export default function FirstOption() {
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
 
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
         option2: optionData2,
+        dimensionDisplay: optionData5,
       })
+      console.log('optionData5', optionData5)
       setSettingModalSecondOptions({
         option3: optionData3,
         option4: optionData4,
@@ -46,7 +51,7 @@ export default function FirstOption() {
   const onClickOption = async (option) => {
     option.selected = !option.selected
 
-    setSettingModalFirstOptions({ option1, option2 })
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay })
     setSettingModalSecondOptions({ option3, option4 })
 
     try {
@@ -106,30 +111,48 @@ export default function FirstOption() {
     }
   }
 
+  const onClickDimension = (item) => {
+    const options = settingModalFirstOptions?.dimensionDisplay.map((option) => {
+      option.selected = option.id === item.id
+      return option
+    })
+
+    setSettingModalFirstOptions({ option1, option2, dimensionDisplay: options })
+  }
+
   return (
     <>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title light">{getMessage('modal.canvas.setting.first.option.info')}</h3>
         <div className="flex-check-box for2">
-          {settingModalFirstOptions &&
+          {settingModalFirstOptions?.option1.map((item) => (
-            settingModalFirstOptions.option1.map((item) => (
+            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+              <span className="check-area"></span>
-                <span className="check-area"></span>
+              <span className="title-area">{getMessage(item.name)}</span>
-                <span className="title-area">{getMessage(item.name)}</span>
+            </button>
-              </button>
+          ))}
-            ))}
+        </div>
+      </div>
+      <div className="modal-check-btn-wrap">
+        <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.dimension')}</h3>
+        <div className="flex-check-box for-line">
+          {settingModalFirstOptions?.dimensionDisplay?.map((item) => (
+            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickDimension(item)}>
+              <span className="check-area"></span>
+              <span className="title-area">{getMessage(item.name)}</span>
+            </button>
+          ))}
         </div>
       </div>
       <div className="modal-check-btn-wrap">
         <h3 className="check-wrap-title">{getMessage('modal.canvas.setting.first.option.display')}</h3>
         <div className="flex-check-box for-line">
-          {settingModalFirstOptions &&
+          {settingModalFirstOptions?.option2.map((item) => (
-            settingModalFirstOptions.option2.map((item) => (
+            <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
-              <button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
+              <span className="check-area"></span>
-                <span className="check-area"></span>
+              <span className="title-area">{getMessage(item.name)}</span>
-                <span className="title-area">{getMessage(item.name)}</span>
+            </button>
-              </button>
+          ))}
-            ))}
         </div>
       </div>
     </>

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

@@ -28,11 +28,14 @@ export default function SecondOption() {
       const optionData2 = settingModalFirstOptions.option2.map((item) => ({ ...item, selected: res[item.column] }))
       const optionData3 = settingModalSecondOptions.option3.map((item) => ({ ...item }))
       const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
-
+      const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({
+        ...item,
+      }))
       // 데이터 설정
       setSettingModalFirstOptions({
         option1: optionData1,
         option2: optionData2,
+        dimensionDisplay: optionData5,
       })
       setSettingModalSecondOptions({
         option3: optionData3,

src/store/settingAtom.js

@@ -6,21 +6,30 @@ export const settingModalFirstOptionsState = atom({
     option1: [
       { id: 1, column: 'assignDisplay', name: 'modal.canvas.setting.first.option.alloc', selected: false },
       { id: 2, column: 'drawDisplay', name: 'modal.canvas.setting.first.option.outline', selected: false },
-      { id: 3, column: 'gridDisplay', name: 'modal.canvas.setting.first.option.plan', selected: false },
+      { id: 3, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
-      { id: 4, column: 'charDisplay', name: 'modal.canvas.setting.first.option.roof.line', selected: false },
+      { id: 4, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
-      { id: 5, column: 'flowDisplay', name: 'modal.canvas.setting.first.option.grid', selected: false },
+      { id: 5, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
-      { id: 6, column: 'hallwayDimenDisplay', name: 'modal.canvas.setting.first.option.circuit.num', selected: false },
+      { id: 6, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
-      { id: 7, column: 'actualDimenDisplay', name: 'modal.canvas.setting.first.option.word', selected: false },
+      { id: 7, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
-      { id: 8, column: 'noDimenDisplay', name: 'modal.canvas.setting.first.option.trestle', selected: false },
+      { id: 8, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
-      { id: 9, column: 'trestleDisplay', name: 'modal.canvas.setting.first.option.flow', selected: false },
+      { id: 9, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
-      { id: 10, column: 'coordiDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
       {
-        id: 11,
+        id: 10,
         column: 'drawConverDisplay',
         name: 'modal.canvas.setting.first.option.corridor.dimension',
         selected: false,
       },
     ],
+    dimensionDisplay: [
+      {
+        id: 1,
+        column: 'corridorDimension',
+        name: 'modal.canvas.setting.first.option.corridor.dimension',
+        selected: false,
+      },
+      { id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
+      { id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
+    ],
     option2: [
       { id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
       { id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
@@ -41,7 +50,12 @@ export const settingModalSecondOptionsState = atom({
     ],
     option4: [
       { id: 1, column: 'adsorpRangeSmall', name: 'modal.canvas.setting.font.plan.absorption.small', selected: true },
-      { id: 2, column: 'adsorpRangeSmallSemi', name: 'modal.canvas.setting.font.plan.absorption.small.semi', selected: false },
+      {
+        id: 2,
+        column: 'adsorpRangeSmallSemi',
+        name: 'modal.canvas.setting.font.plan.absorption.small.semi',
+        selected: false,
+      },
       { id: 3, column: 'adsorpRangeMedium', name: 'modal.canvas.setting.font.plan.absorption.medium', selected: false },
       { id: 4, column: 'adsorpRangeLarge', name: 'modal.canvas.setting.font.plan.absorption.large', selected: false },
     ],