src/components/floor-plan/modal/basic/step/Orientation.jsx

@@ -7,16 +7,21 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { roofsState } from '@/store/roofAtom'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
 import Swal from 'sweetalert2'
 import { normalizeDecimal} from '@/util/input-utils'
 
 export const Orientation = forwardRef((props, ref) => {
   const { getMessage } = useMessage()
+  const { findCommonCode } = useCommonCode()
   const [hasAnglePassivity, setHasAnglePassivity] = useState(false)
   const basicSetting = useRecoilValue(basicSettingState)
   const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) //지붕재 선택
   const [roofsStore, setRoofsStore] = useRecoilState(roofsState)
   const [roofTab, setRoofTab] = useState(0) //지붕재 탭
+  const [selectedModuleSeries, setSelectedModuleSeries] = useState(null)
+  const [moduleSeriesList, setModuleSeriesList] = useState([])
+  const [filteredModuleList, setFilteredModuleList] = useState([])
   const {
     roofs,
     setRoofs,
@@ -80,9 +85,20 @@ export const Orientation = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (selectedModules) {
-      setSelectedModules(moduleList.find((module) => module.itemId === selectedModules.itemId))
+      const foundModule = moduleList.find((module) => module.itemId === selectedModules.itemId)
+      if (foundModule) {
+        setSelectedModules(foundModule)
+
+        // 선택된 모듈의 시리즈로 업데이트 (시리즈 목록이 있는 경우에만)
+        if (moduleSeriesList.length > 0 && foundModule.moduleSerCd) {
+          const currentSeries = moduleSeriesList.find(series => series.moduleSerCd === foundModule.moduleSerCd)
+          if (currentSeries && (!selectedModuleSeries || selectedModuleSeries.moduleSerCd !== currentSeries.moduleSerCd)) {
+            setSelectedModuleSeries(currentSeries)
+          }
+        }
+      }
     }
-  }, [selectedModules])
+  }, [selectedModules, moduleList, moduleSeriesList])
 
   useEffect(() => {
     if (selectedSurfaceType) {
@@ -206,6 +222,31 @@ export const Orientation = forwardRef((props, ref) => {
     return true
   }
 
+  const handleChangeModuleSeries = (e) => {
+    resetRoofs()
+    setSelectedModuleSeries(e)
+
+    // 선택된 시리즈에 맞는 모듈 목록 필터링 및 첫 번째 모듈 선택
+    if (e && moduleList.length > 0) {
+      let filtered
+
+      if (e.moduleSerCd === 'ALL') {
+        // "전체" 선택 시 모든 모듈 표시
+        filtered = moduleList
+      } else {
+        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
+        filtered = moduleList.filter(module => module.moduleSerCd === e.moduleSerCd)
+      }
+
+      setFilteredModuleList(filtered)
+
+      // 필터링된 목록의 첫 번째 모듈을 자동 선택
+      if (filtered.length > 0) {
+        setSelectedModules(filtered[0])
+      }
+    }
+  }
+
   const handleChangeModule = (e) => {
     resetRoofs()
     setSelectedModules(e)
@@ -264,12 +305,69 @@ export const Orientation = forwardRef((props, ref) => {
     setRoofsStore(newRoofs)
   }
 
+  // 모듈시리즈 목록 생성 및 commonCode와 매핑
   useEffect(() => {
-    // 컴포넌트가 마운트될 때 selectedModules가 없으면 handleChangeModule 호출
+    if (moduleList.length > 0 && moduleSeriesList.length === 0) {
-    if (moduleList.length > 0 && (!selectedModules || !selectedModules.itemId)) {
+      const moduleSeriesCodes = findCommonCode(207100) || []
-      handleChangeModule(moduleList[0]);
+
+      // moduleList에서 고유한 moduleSerCd 추출
+      const uniqueSeriesCd = [...new Set(moduleList.map(module => module.moduleSerCd).filter(Boolean))]
+
+      if (uniqueSeriesCd.length > 0) {
+        // moduleSerCd와 commonCode를 매핑하여 기본 moduleSeriesList 생성
+        const mappedSeries = uniqueSeriesCd.map(serCd => {
+          const matchedCode = moduleSeriesCodes.find(code => code.clCode === serCd)
+          return {
+            moduleSerCd: serCd,
+            moduleSerNm: matchedCode ? matchedCode.clCodeNm : serCd
+          }
+        })
+
+        // "전체" 옵션을 맨 앞에 추가
+        const allOption = {
+          moduleSerCd: 'ALL',
+          moduleSerNm: getMessage("board.sub.total") || 'ALL'
+        }
+
+        const seriesList = [allOption, ...mappedSeries]
+        setModuleSeriesList(seriesList)
+
+        // 현재 선택된 모듈이 있으면 해당 모듈의 시리즈를 찾아서 선택
+        if (selectedModules && selectedModules.moduleSerCd) {
+          const currentSeries = seriesList.find(series => series.moduleSerCd === selectedModules.moduleSerCd)
+          if (currentSeries) {
+            setSelectedModuleSeries(currentSeries)
+          } else {
+            setSelectedModuleSeries(allOption)
+          }
+        } else {
+          // 선택된 모듈이 없으면 "전체"를 기본 선택
+          setSelectedModuleSeries(allOption)
+        }
+      }
     }
-  }, [moduleList]); // 빈 의존성 배열로 마운트 시 한 번만 실행
+  }, [moduleList, selectedModules])
+
+  // 초기 로딩 시에만 필터링된 모듈 목록 설정
+  useEffect(() => {
+    if (moduleList.length > 0 && filteredModuleList.length === 0 && selectedModuleSeries) {
+      let filtered
+
+      if (selectedModuleSeries.moduleSerCd === 'ALL') {
+        // "전체" 선택 시 모든 모듈 표시
+        filtered = moduleList
+      } else {
+        // 특정 시리즈 선택 시 해당 시리즈 모듈만 표시
+        filtered = moduleList.filter(module => module.moduleSerCd === selectedModuleSeries.moduleSerCd)
+      }
+
+      setFilteredModuleList(filtered)
+
+      if (filtered.length > 0 && !selectedModules) {
+        setSelectedModules(filtered[0])
+      }
+    }
+  }, [moduleList, selectedModuleSeries]);
   return (
     <>
       <div className="properties-setting-wrap">
@@ -336,11 +434,26 @@ export const Orientation = forwardRef((props, ref) => {
             <div className="compas-table-wrap">
               <div className="compas-table-box mb10">
                 <div className="outline-form mb10">
-                  <span>{getMessage('modal.module.basic.setting.module.setting')}</span>
+                  <span>{getMessage('modal.module.basic.setting.module.series.setting')}</span>
                   <div className="grid-select">
-                    {moduleList && (
+                    {moduleSeriesList.length > 0 && (
                       <QSelectBox
-                        options={moduleList}
+                        options={moduleSeriesList}
+                        value={selectedModuleSeries}
+                        targetKey={'moduleSerCd'}
+                        sourceKey={'moduleSerCd'}
+                        showKey={'moduleSerNm'}
+                        onChange={(e) => handleChangeModuleSeries(e)}
+                      />
+                    )}
+                  </div>
+                </div>
+                <div className="outline-form mb10">
+                  <span>{getMessage('modal.module.basic.setting.module.setting2')}</span>
+                  <div className="grid-select">
+                    {filteredModuleList && (
+                      <QSelectBox
+                        options={filteredModuleList}
                         value={selectedModules}
                         targetKey={'itemId'}
                         sourceKey={'itemId'}

src/hooks/usePlan.js

@@ -173,6 +173,13 @@ export function usePlan(params = {}) {
    * @param {boolean} saveAlert - 저장 완료 알림 표시 여부
    */
   const saveCanvas = async (saveAlert = true) => {
+    // 저장 전 선택되어 있는 object 제거
+    const setupSurfaces = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE)
+
+    setupSurfaces.forEach((surface) => {
+      surface.set({ fill: 'rgba(255,255,255,0.1)', strokeDashArray: [10, 4], strokeWidth: 1 })
+    })
+
     const canvasStatus = currentCanvasData('save')
     const result = await putCanvasStatus(canvasStatus, saveAlert)
     //캔버스 저장 완료 후

src/hooks/usePolygon.js

@@ -852,7 +852,10 @@ export const usePolygon = () => {
         if (checkLineOverlap(innerLine, polygonLine)) {
           // innerLine의 type을 polygonLine의 type으로 변경
           if (innerLine.attributes && polygonLine.attributes.type) {
-            // polygonLine.need = false
+            // innerLine이 polygonLine보다 긴 경우 polygonLine.need를 false로 변경
+            if (polygonLine.length < innerLine.length) {
+              polygonLine.need = false
+            }
             innerLine.attributes.planeSize = innerLine.attributes.planeSize ?? polygonLine.attributes.planeSize
             innerLine.attributes.actualSize = innerLine.attributes.actualSize ?? polygonLine.attributes.actualSize
             innerLine.attributes.type = polygonLine.attributes.type
@@ -1008,6 +1011,9 @@ export const usePolygon = () => {
         /*const originInnerStroke = innerLine.stroke
         innerLine.set({ stroke: 'red' })
         canvas.renderAll()*/
+        if (checkLineOverlap(line, innerLine)) {
+          return
+        }
         if (isPointOnLine(line, innerLine.startPoint)) {
           canvas.renderAll()
           if (isSamePoint(line.startPoint, innerLine.startPoint) || isSamePoint(line.endPoint, innerLine.startPoint)) {

src/locales/ja.json

@@ -99,6 +99,8 @@
   "modal.module.basic.setting.module.construction.method": "工法",
   "modal.module.basic.setting.module.under.roof": "屋根下地",
   "modal.module.basic.setting.module.setting": "架台設定",
+  "modal.module.basic.setting.module.series.setting": "モジュールシリーズ",
+  "modal.module.basic.setting.module.setting2": "モジュール選択",
   "modal.module.basic.setting.module.placement.area": "モジュール配置領域",
   "modal.module.basic.setting.module.placement.margin": "モジュール間の間隙",
   "modal.module.basic.setting.module.placement.area.eaves": "軒側",

src/locales/ko.json

@@ -98,7 +98,9 @@
   "modal.module.basic.setting.module.rafter.margin": "서까래 간격",
   "modal.module.basic.setting.module.construction.method": "공법",
   "modal.module.basic.setting.module.under.roof": "지붕밑바탕",
-  "modal.module.basic.setting.module.setting": "모듈 선택",
+  "modal.module.basic.setting.module.setting": "가대 설정",
+  "modal.module.basic.setting.module.series.setting": "모듈 시리즈",
+  "modal.module.basic.setting.module.setting2": "모듈 선택",
   "modal.module.basic.setting.module.placement.area": "모듈 배치 영역",
   "modal.module.basic.setting.module.placement.margin": "모듈 배치 간격",
   "modal.module.basic.setting.module.placement.area.eaves": "처마쪽",