배치면초기설정 초기 데이터 오류 수정 및 주석 처리

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -63,20 +63,21 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
   /**
    * 지붕재 초기값
    */
-  const defaultRoofSettings = {
+  const DEFAULT_ROOF_SETTINGS = {
-    roofSizeSet: '1', // 기본 치수 입력 방법
+    roofSizeSet: '1',
-    roofAngleSet: 'slope', // 기본 지붕 각도 설정
+    roofAngleSet: 'slope',
     angle: 21.8,
-    hajebichi: '',
+    hajebichi: null,
     id: 'ROOF_ID_WA_53A',
     index: 0,
     layout: ROOF_MATERIAL_LAYOUT.PARALLEL,
     lenAuth: 'R',
     lenBase: '235.000',
-    length: '235',
+    length: 235,
     name: '일본기와 A',
     nameJp: '和瓦A',
     pitch: 4,
+    planNo: planNo,
     raft: '',
     raftAuth: 'C',
     raftBaseCd: 'HEI_455',
@@ -89,12 +90,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     selected: true,
     widAuth: 'R',
     widBase: '265.000',
-    width: '265',
+    width: 265,
   }
 
   useEffect(() => {
     /**
-     * 메뉴에서 배치면초기설정 선택 시 조회
+     * 메뉴에서 배치면초기설정 선택 시 조회 후 화면 오픈
      */
     if (openPoint && openPoint === 'canvasMenus') fetchBasicSettings(planNo, openPoint)
   }, [])
@@ -103,18 +104,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     if (addedRoofs.length > 0) {
       const raftCodeList = findCommonCode('203800')
       setRaftCodes(raftCodeList)
-
+      setCurrentRoof({ ...addedRoofs[0], planNo: planNo, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet })
-      /**
-       * 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정
-       */
-      if (addedRoofs.length > 0) {
-        setCurrentRoof({ ...addedRoofs[0], planNo: basicSetting.planNo })
     } else {
-        setCurrentRoof(defaultRoofSettings)
+      /** 데이터 설정 확인 후 데이터가 없으면 기본 데이터 설정 */
-      }
+      setCurrentRoof({ ...DEFAULT_ROOF_SETTINGS })
     }
   }, [addedRoofs])
 
+  /**
+   * 배치면초기설정 정보 변경 시 basicSettings 설정
+   */
   useEffect(() => {
     if (!currentRoof) return
     setBasicSettings({
@@ -256,7 +255,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                               id={item.id}
                               name={item.name}
                               value={item.value}
-                              checked={currentRoof?.roofSizeSet === item.value}
+                              checked={String(currentRoof?.roofSizeSet) === item.value}
                               onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
                             />
                             <label htmlFor={item.id}>{getMessage(item.message)}</label>
@@ -279,7 +278,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
                                   id={item.id}
                                   name={item.name}
                                   value={item.value}
-                                  checked={currentRoof?.roofAngleSet === item.value}
+                                  checked={String(currentRoof?.roofAngleSet) === item.value}
                                   onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
                                 />
                                 <label htmlFor={item.id}>{getMessage(item.message)}</label>

src/hooks/option/useCanvasSetting.js

@@ -43,21 +43,19 @@ import { v4 as uuidv4 } from 'uuid'
 
 const defaultDotLineGridSetting = {
   INTERVAL: {
-    type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
+    type: 2 /* 1: 가로,세로 간격 수동, 2: 비율 간격 */,
     ratioInterval: 910,
     verticalInterval: 910,
     horizontalInterval: 910,
-    dimension: 1, // 치수
+    dimension: 1 /* 치수 */,
   },
   DOT: false,
   LINE: false,
 }
 
-// let previousRoofMaterialsYn = 'N' // 지붕재 select 정보 비교 후 변경된 것이 없으면 1회만 실행
-
 export function useCanvasSetting() {
   const canvas = useRecoilValue(canvasState)
-  /* canvas가 null이 아닐 때에만 getObjects 호출 */
+  /** canvas가 null이 아닐 때에만 getObjects 호출 */
   const canvasObjects = canvas ? canvas.getObjects() : []
   const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
 
@@ -119,14 +117,14 @@ export function useCanvasSetting() {
   const [type, setType] = useRecoilState(menuTypeState)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
 
-  const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+  const resetModuleSelectionData = useResetRecoilState(moduleSelectionDataState) /* 다음으로 넘어가는 최종 데이터 */
-  const resetSelectedModules = useResetRecoilState(selectedModuleState) //선택된 모듈
+  const resetSelectedModules = useResetRecoilState(selectedModuleState) /* 선택된 모듈 */
 
   const { trigger: moduleSelectedDataTrigger } = useCanvasPopupStatusController(2)
 
-  const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
+  const [raftCodes, setRaftCodes] = useState([]) /* 서까래 정보 */
   const { findCommonCode } = useCommonCode()
-  const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보
+  const [currentRoof, setCurrentRoof] = useState(null) /* 현재 선택된 지붕재 정보 */
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
 
@@ -144,7 +142,7 @@ export function useCanvasSetting() {
   useEffect(() => {
     const tempFetchRoofMaterials = !fetchRoofMaterials
 
-    /* 초 1회만 실행하도록 처리 */
+    /** 초 1회만 실행하도록 처리 */
     setFetchRoofMaterials(tempFetchRoofMaterials)
     if (tempFetchRoofMaterials) {
       addRoofMaterials()
@@ -176,7 +174,23 @@ export function useCanvasSetting() {
       angle: item.angle ? parseInt(item.angle) : 21.8,
     }))
     setRoofMaterials(roofLists)
-    const selectedRoofMaterial = roofLists[0]
+  }
+
+  useEffect(() => {
+    if (addedRoofs.length > 0 && addedRoofs[0].planNo === basicSetting.planNo) {
+      const raftCodeList = findCommonCode('203800')
+      setRaftCodes(raftCodeList)
+      setCurrentRoof({
+        ...addedRoofs[0],
+        planNo: addedRoofs[0].planNo,
+        roofSizeSet: String(basicSetting.roofSizeSet),
+        roofAngleSet: basicSetting.roofAngleSet,
+      })
+    }
+  }, [addedRoofs])
+
+  useEffect(() => {
+    const selectedRoofMaterial = roofMaterials[0]
 
     if (addedRoofs.length === 0) {
       const newAddedRoofs = []
@@ -184,19 +198,7 @@ export function useCanvasSetting() {
       setAddedRoofs(newAddedRoofs)
     }
     setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
-  }
+  }, [roofMaterials])
-
-  /**
-   * 배치면 초기설정 화면이 열리지 않아도 데이터 set 하기 위해서 추가
-   */
-  useEffect(() => {
-    if (addedRoofs.length > 0) {
-      const raftCodeList = findCommonCode('203800')
-      setRaftCodes(raftCodeList)
-
-      setCurrentRoof({ ...addedRoofs[0] })
-    }
-  }, [addedRoofs])
 
   useEffect(() => {
     if (!canvas) {
@@ -339,7 +341,7 @@ export function useCanvasSetting() {
             }
           })
 
-          /* 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */
+          /** 데이터 존재 시 화면 닫기(메뉴/저장 클릭 시 제외) */
           if (openPoint !== 'canvasMenus' && openPoint !== 'basicSettingSave') {
             //closePopup(popupId)
             closeAll()
@@ -369,9 +371,9 @@ export function useCanvasSetting() {
             },
           ]
 
-          /* 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */
+          /** 메뉴에서 배치면 초기설정 클릭 시 실행하지 않음 */
           if (openPoint === null) {
-            /* 배치면 초기설정 미저장 상태이면 화면 열기 */
+            /** 배치면 초기설정 미저장 상태이면 화면 열기 */
             const placementInitialProps = {
               id: popupId,
               pos: {
@@ -385,7 +387,7 @@ export function useCanvasSetting() {
           }
         }
 
-        /* 데이터 설정 */
+        /** 데이터 설정 */
         const addRoofs = []
         for (let i = 0; i < roofsArray.length; i++) {
           roofMaterials?.map((material) => {
@@ -440,6 +442,21 @@ export function useCanvasSetting() {
     // setCanvasSetting({ ...basicSetting })
   }
 
+  /**
+   * 저장/복사저장 시 지붕 크기에 따른 메뉴 설정
+   */
+  const setMenuByRoofSize = (roofSizeSet) => {
+    if (['2', '3'].includes(String(roofSizeSet))) {
+      setMenuNumber(3)
+      setType('surface')
+      setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
+    } else {
+      setMenuNumber(2)
+      setType('outline')
+      setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
+    }
+  }
+
   /**
    * 기본설정(PlacementShapeSetting) 저장
    */
@@ -471,31 +488,23 @@ export function useCanvasSetting() {
 
       await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
-        /* BasicSettings Recoil 설정 */
+        /** BasicSettings Recoil 설정 */
         setBasicSettings({ ...params })
       })
 
-      /* CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */
+      /** CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */
       setCanvasSetting({
         ...basicSetting,
         roofSizeSet: String(params.roofSizeSet),
       })
 
-      /* 메뉴 설정 */
+      /** 메뉴 설정 */
-      if (['2', '3'].includes(params.roofSizeSet)) {
+      setMenuByRoofSize(params.roofSizeSet)
-        setMenuNumber(3)
-        setType('surface')
-        setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
-      } else {
-        setMenuNumber(2)
-        setType('outline')
-        setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
-      }
 
-      /* 배치면초기설정 조회 */
+      /** 배치면초기설정 조회 */
       fetchBasicSettings(params.planNo, 'basicSettingSave')
 
-      /* 모듈 선택 데이터 초기화 */
+      /** 모듈 선택 데이터 초기화 */
       resetModuleSelectionData()
       moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] })
       const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE)
@@ -536,27 +545,19 @@ export function useCanvasSetting() {
         swalFire({ text: getMessage(res.returnMessage) })
       })
 
-      /* CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */
+      /** CanvasSetting Recoil 설정 - roofSizeSet을 문자열로 변환 */
       setCanvasSetting({
         ...basicSetting,
         roofSizeSet: String(params.roofSizeSet),
       })
 
-      /* 메뉴 설정 */
+      /** 메뉴 설정 */
-      if (['2', '3'].includes(params?.roofSizeSet)) {
+      setMenuByRoofSize(params.roofSizeSet)
-        setMenuNumber(3)
-        setType('surface')
-        setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
-      } else {
-        setMenuNumber(2)
-        setType('outline')
-        setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
-      }
 
-      /* 배치면초기설정 조회 */
+      /** 배치면초기설정 조회 */
       fetchBasicSettings(Number(params.planNo), 'basicSettingSave')
 
-      /* 모듈 선택 데이터 초기화 */
+      /** 모듈 선택 데이터 초기화 */
       resetModuleSelectionData()
       moduleSelectedDataTrigger({ common: {}, module: {}, roofConstructions: [] })
       const isModuleExist = canvas.getObjects().some((obj) => obj.name === POLYGON_TYPE.MODULE)
@@ -582,24 +583,16 @@ export function useCanvasSetting() {
         const optionData4 = settingModalSecondOptions.option4.map((item) => ({ ...item, selected: res[item.column] }))
         const optionData5 = settingModalFirstOptions.dimensionDisplay.map((item) => ({ ...item }))
 
-        /**
+        /** 흡착점 ON/OFF */
-         * 흡착점 ON/OFF
-         */
         setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: res.adsorpPoint })
 
-        /**
+        /** 치수선 설정 */
-         * 치수선 설정
-         */
         setDimensionLineSettings({ ...dimensionLineSettings, pixel: res.originPixel, color: res.originColor })
 
-        /**
+        /** 도면크기 설정 */
-         * 도면크기 설정
-         */
         setPlanSizeSettingMode({ ...planSizeSettingMode, originHorizon: res.originHorizon, originVertical: res.originVertical })
 
-        /**
+        /** 데이터 설정 */
-         * 데이터 설정
-         */
         setSettingModalFirstOptions({
           ...settingModalFirstOptions,
           option1: optionData1,
@@ -614,45 +607,35 @@ export function useCanvasSetting() {
 
         const fontPatternData = {
           commonText: {
-            /**
+            /** 문자 글꼴 조회 데이터 */
-             * 문자 글꼴 조회 데이터
-             */
             fontFamily: getFonts(res.wordFont),
             fontWeight: getFontStyles(res.wordFontStyle),
             fontSize: getFontSizes(res.wordFontSize),
             fontColor: getFontColors(res.wordFontColor),
           },
           flowText: {
-            /**
+            /** 흐름방향 글꼴 조회 데이터 */
-             * 흐름방향 글꼴 조회 데이터
-             */
             fontFamily: getFonts(res.flowFont),
             fontWeight: getFontStyles(res.flowFontStyle),
             fontSize: getFontSizes(res.flowFontSize),
             fontColor: getFontColors(res.flowFontColor),
           },
           dimensionLineText: {
-            /**
+            /** 치수 글꼴 조회 데이터 */
-             * 치수 글꼴 조회 데이터
-             */
             fontFamily: getFonts(res.dimensioFont),
             fontWeight: getFontStyles(res.dimensioFontStyle),
             fontSize: getFontSizes(res.dimensioFontSize),
             fontColor: getFontColors(res.dimensioFontColor),
           },
           circuitNumberText: {
-            /**
+            /** 회로번호 글꼴 조회 데이터 */
-             * 회로번호 글꼴 조회 데이터
-             */
             fontFamily: getFonts(res.circuitNumFont),
             fontWeight: getFontStyles(res.circuitNumFontStyle),
             fontSize: getFontSizes(res.circuitNumFontSize),
             fontColor: getFontColors(res.circuitNumFontColor),
           },
           lengthText: {
-            /**
+            /** 치수선 글꼴 조회 데이터 */
-             * 치수선 글꼴 조회 데이터
-             */
             fontFamily: getFonts(res.lengthFont),
             fontWeight: getFontStyles(res.lengthFontStyle),
             fontSize: getFontSizes(res.lengthFontSize),
@@ -660,14 +643,10 @@ export function useCanvasSetting() {
           },
         }
 
-        /**
+        /** 조회된 글꼴 데이터 set */
-         * 조회된 글꼴 데이터 set
-         */
         setGlobalFont(fontPatternData)
 
-        /**
+        /** 점/선 그리드 */
-         * 점/선 그리드
-         */
         const patternData = {
           INTERVAL: {
             type: res.gridType,
@@ -682,47 +661,31 @@ export function useCanvasSetting() {
 
         setDotLineGridSettingState(patternData)
 
-        /**
+        /** 그리드 색 설정 */
-         * 그리드 색 설정
-         */
         setGridColor(res.gridColor)
       } else {
-        //조회된 글꼴 데이터가 없는 경우 (데이터 초기화)
+        /** 조회된 글꼴 데이터가 없는 경우 (데이터 초기화) */
 
-        /**
+        /** 흡착점 ON/OFF */
-         * 흡착점 ON/OFF
-         */
         setAdsorptionPointMode({ ...adsorptionPointMode, adsorptionPoint: false })
 
-        /**
+        /** 치수선 설정 */
-         * 치수선 설정
-         */
         resetDimensionLineSettings()
 
-        /**
+        /** 도면크기 설정 */
-         * 도면크기 설정
-         */
         resetPlanSizeSettingMode()
 
-        /**
+        /** 데이터 설정 */
-         * 데이터 설정
-         */
         resetSettingModalFirstOptions()
         resetSettingModalSecondOptions()
 
-        /**
+        /** 데이터 초기화 */
-         * 데이터 초기화
-         */
         resetGlobalFont()
 
-        /**
+        /** 점/선 그리드 */
-         * 점/선 그리드
-         */
         setDotLineGridSettingState({ ...defaultDotLineGridSetting })
 
-        /**
+        /** 그리드 색 설정 */
-         * 그리드 색 설정
-         */
         setGridColor('#FF0000')
       }
 
@@ -736,9 +699,7 @@ export function useCanvasSetting() {
    * CanvasSetting 옵션 클릭 후 저장
    */
   const onClickOption2 = async () => {
-    /**
+    /** 서버에 전송할 데이터 */
-     * 서버에 전송할 데이터
-     */
     const dataToSend = {
       firstOption1: option1.map((item) => ({
         column: item.column,
@@ -759,13 +720,9 @@ export function useCanvasSetting() {
       })),
     }
     const patternData = {
-      /**
+      /** 견적서 번호 */
-       * 견적서 번호
-       */
       objectNo: correntObjectNo,
-      /**
+      /** 디스플레이 설정(다중) */
-       * 디스플레이 설정(다중)
-       */
       allocDisplay: dataToSend.firstOption1[0].selected,
       outlineDisplay: dataToSend.firstOption1[1].selected,
       gridDisplay: dataToSend.firstOption1[2].selected,
@@ -776,85 +733,62 @@ export function useCanvasSetting() {
       trestleDisplay: dataToSend.firstOption1[7].selected,
       imageDisplay: dataToSend.firstOption1[8].selected,
       totalDisplay: dataToSend.firstOption1[9].selected,
-      /**
+      /** 차수 표시(단 건) */
-       * 차수 표시(단 건)
-       */
       corridorDimension: dataToSend.firstOption3[0].selected,
       realDimension: dataToSend.firstOption3[1].selected,
       noneDimension: dataToSend.firstOption3[2].selected,
-      /**
+      /** 화면 표시(단 건) */
-       * 화면 표시(단 건)
-       */
       onlyBorder: dataToSend.firstOption2[0].selected,
       lineHatch: dataToSend.firstOption2[1].selected,
       allPainted: dataToSend.firstOption2[2].selected,
-      /**
+      /** 흡착범위 설정(단 건) */
-       * 흡착범위 설정(단 건)
-       */
       adsorpRangeSmall: dataToSend.secondOption2[0].selected,
       adsorpRangeSmallSemi: dataToSend.secondOption2[1].selected,
       adsorpRangeMedium: dataToSend.secondOption2[2].selected,
       adsorpRangeLarge: dataToSend.secondOption2[3].selected,
-
+      /** 흡착점 ON/OFF */
-      /**
-       * 흡착점 ON/OFF
-       */
       adsorpPoint: adsorptionPointMode.adsorptionPoint,
       //??: adsorptionRange, 사용여부 확인 필요
 
-      /**
+      /** 문자 글꼴 설정 */
-       * 글꼴 설정
-       */
-      //문자 글꼴
       wordFont: globalFont.commonText.fontFamily?.value ?? 'MS PGothic',
       wordFontStyle: globalFont.commonText.fontWeight?.value ?? 'normal',
       wordFontSize: globalFont.commonText.fontSize?.value ?? 16,
       wordFontColor: globalFont.commonText.fontColor?.value ?? 'black',
 
-      /**
+      /** 흐름방향 글꼴 설정 */
-       * 흐름방향 글꼴
-       */
       flowFont: globalFont.flowText.fontFamily?.value ?? 'MS PGothic',
       flowFontStyle: globalFont.flowText.fontWeight?.value ?? 'normal',
       flowFontSize: globalFont.flowText.fontSize?.value ?? 16,
       flowFontColor: globalFont.flowText.fontColor?.value ?? 'black',
 
-      /**
+      /** 치수 글꼴 설정 */
-       * 치수 글꼴
-       */
       dimensioFont: globalFont.dimensionLineText.fontFamily?.value ?? 'MS PGothic',
       dimensioFontStyle: globalFont.dimensionLineText.fontWeight?.value ?? 'normal',
       dimensioFontSize: globalFont.dimensionLineText.fontSize?.value ?? 16,
       dimensioFontColor: globalFont.dimensionLineText.fontColor?.value ?? 'black',
 
-      /**
+      /** 회로번호 글꼴 설정 */
-       * 회로번호 글꼴
-       */
       circuitNumFont: globalFont.circuitNumberText.fontFamily?.value ?? 'MS PGothic',
       circuitNumFontStyle: globalFont.circuitNumberText.fontWeight?.value ?? 'normal',
       circuitNumFontSize: globalFont.circuitNumberText.fontSize?.value ?? 16,
       circuitNumFontColor: globalFont.circuitNumberText.fontColor?.value ?? 'black',
 
-      /**
+      /** 치수선 글꼴 설정 */
-       * 치수선 글꼴
-       */
       lengthFont: globalFont.lengthText.fontFamily?.value ?? 'MS PGothic',
       lengthFontStyle: globalFont.lengthText.fontWeight?.value ?? 'normal',
       lengthFontSize: globalFont.lengthText.fontSize?.value ?? 16,
       lengthFontColor: globalFont.lengthText.fontColor?.value ?? 'black',
 
-      /**
+      /** 치수선 설정 */
-       * 치수선 설정
-       */
       originPixel: dimensionLineSettings.pixel,
       originColor: dimensionLineSettings.color,
 
-      /**
+      /** 도면크기 설정 */
-       * 도면크기 설정
-       */
       originHorizon: planSizeSettingMode.originHorizon,
       originVertical: planSizeSettingMode.originVertical,
 
+      /** 점/선 그리드 */
       dotGridDisplay: dotLineGridSetting.DOT,
       lineGridDisplay: dotLineGridSetting.LINE,
       gridType: dotLineGridSetting.INTERVAL.type,
@@ -863,6 +797,7 @@ export function useCanvasSetting() {
       gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
       gridDimen: dotLineGridSetting.INTERVAL.dimension,
 
+      /** 그리드 색 설정 */
       gridColor: gridColor,
     }
 
@@ -875,13 +810,10 @@ export function useCanvasSetting() {
       .then((res) => {
         //swalFire({ text: getMessage(res.returnMessage) })
 
-        /**
+        /** Canvas 디스플레이 설정 시 해당 옵션 적용 */
-         * Canvas 디스플레이 설정 시 해당 옵션 적용
-         */
         frontSettings()
-        /**
+
-         * 저장 후 재조회
+        /** 저장 후 재조회 */
-         */
         fetchSettings()
       })
       .catch((error) => {
@@ -912,8 +844,8 @@ export function useCanvasSetting() {
      */
 
     /**
-     * 옵션명
+     * 옵션명 optionName
-     * 옵션상태
+     * 옵션상태 optionSelected
      */
     let optionName
     let optionSelected
@@ -948,15 +880,11 @@ export function useCanvasSetting() {
           optionName = ['backGroundImage']
           break
         case 'totalDisplay':
-          /**
+          /** 작업할 필요 없음 */
-           * 작업할 필요 없음
-           */
           optionName = []
           break
       }
-      /**
+      /** 표시 선택 상태(true/false)*/
-       * 표시 선택 상태(true/false)
-       */
       optionSelected = option1[i].selected
 
       canvasObjects