Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/app/management/stuff/tempReg/page.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import StuffSubHeader from '@/components/management/StuffSubHeader'
+import '@/styles/contents.scss'
+import StuffDetail from '@/components/management/StuffDetail'
+export default function ManagementStuffRegPage() {
+  return (
+    <>
+      <StuffSubHeader type={'temp'} />
+      <div className="sub-content">
+        <div className="sub-content-inner">
+          <div className="sub-content-box">
+            <StuffDetail />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/estimate/Estimate.jsx

@@ -516,7 +516,7 @@ export default function Estimate({ params }) {
 
       setEstimateContextState({
         pkgAsp: pkgAsp,
-        pkgTotPrice: pkgTotPrice.toFixed(3),
+        pkgTotPrice: pkgTotPrice.toFixed(2),
       })
       //아이템들 중 조건에 맞는애들 뽑아서 상단 공급가액 부가세 총액 수정
       setItemChangeYn(true)
@@ -833,20 +833,20 @@ export default function Estimate({ params }) {
         calculateYJODTotals(estimateContextState.itemList)
         setEstimateContextState({
           totAmount: totals.totAmount,
-          totVolKw: totals.totVolKw.toFixed(3),
+          totVolKw: totals.totVolKw.toFixed(2),
-          supplyPrice: totals.supplyPrice.toFixed(3),
+          supplyPrice: totals.supplyPrice.toFixed(2),
-          vatPrice: totals.vatPrice.toFixed(3),
+          vatPrice: totals.vatPrice.toFixed(2),
-          totPrice: totals.totPrice.toFixed(3),
+          totPrice: totals.totPrice.toFixed(2),
         })
       } else if (estimateContextState.estimateType === 'YJSS') {
         calculateYJSSTotals(estimateContextState.itemList)
         setEstimateContextState({
           pkgTotPrice: totals.pkgTotPrice,
           totAmount: totals.totAmount,
-          totVolKw: totals.totVolKw.toFixed(3),
+          totVolKw: totals.totVolKw.toFixed(2),
-          supplyPrice: totals.supplyPrice.toFixed(3),
+          supplyPrice: totals.supplyPrice.toFixed(2),
-          vatPrice: totals.vatPrice.toFixed(3),
+          vatPrice: totals.vatPrice.toFixed(2),
-          totPrice: totals.totPrice.toFixed(3),
+          totPrice: totals.totPrice.toFixed(2),
         })
       }
 
@@ -1060,16 +1060,14 @@ export default function Estimate({ params }) {
                         let constructSpecificationMulti = estimateContextState?.constructSpecificationMulti?.split('、')
 
                         return (
-                          <>
+                          <div className={`form-flex-wrap ${style}`} key={`roof_${row}`}>
-                            <div className={`form-flex-wrap ${style}`} key={`roof${index}`}>
+                            <div className="input-wrap mr5" style={{ width: '610px' }}>
-                              <div className="input-wrap mr5" style={{ width: '610px' }}>
+                              <input type="text" className="input-light" value={roofList} readOnly />
-                                <input type="text" className="input-light" value={roofList} readOnly />
-                              </div>
-                              <div className="input-wrap" style={{ width: '200px' }}>
-                                <input type="text" className="input-light" value={constructSpecificationMulti[index]} readOnly />
-                              </div>
                             </div>
-                          </>
+                            <div className="input-wrap" style={{ width: '200px' }}>
+                              <input type="text" className="input-light" value={constructSpecificationMulti[index]} readOnly />
+                            </div>
+                          </div>
                         )
                       })}
                     </td>
@@ -1156,7 +1154,8 @@ export default function Estimate({ params }) {
                           <ul className="file-list">
                             {originFiles.map((originFile) => {
                               return (
-                                <li className="file-item" key={uuidv4()}>
+                                <li className="file-item" key={originFile.no}>
+                                  {/* <li className="file-item" key={uuidv4()}> */}
                                   <div className="file-item-wrap">
                                     <span
                                       style={{ display: originFile.delFlg === '0' ? '' : 'none' }}
@@ -1219,7 +1218,8 @@ export default function Estimate({ params }) {
                   {specialNoteList.length > 0 &&
                     specialNoteList.map((row) => {
                       return (
-                        <div key={uuidv4()} className="special-note-check-item">
+                        // <div key={uuidv4()} className="special-note-check-item">
+                        <div key={row.code} className="special-note-check-item">
                           <div className="special-note-check-box">
                             <div className="d-check-box light">
                               <input
@@ -1227,7 +1227,9 @@ export default function Estimate({ params }) {
                                 id={row.code}
                                 checked={!!row.check}
                                 disabled={row.code === 'ATTR001' || row.pkgYn === '1' ? true : false}
-                                onClick={(event) => {
+                                // readOnly
+                                // onClick={(event) => {
+                                onChange={() => {
                                   setSpecialNoteList((specialNote) =>
                                     specialNote.map((temp) => (temp.code === row.code ? { ...temp, check: !temp.check } : temp)),
                                   )
@@ -1258,7 +1260,7 @@ export default function Estimate({ params }) {
 
                       if (isObjectNotEmpty(showcontent)) {
                         return (
-                          <dl key={uuidv4()}>
+                          <dl key={row.code}>
                             <dt>{showcontent.codeNm}</dt>
                             <dd dangerouslySetInnerHTML={{ __html: showcontent.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
                           </dl>
@@ -1266,8 +1268,6 @@ export default function Estimate({ params }) {
                       } else {
                         let pushData = []
                         popShowSpecialNoteList.map((item) => {
-                          //console.log('showContentCode::', showContentCode)
-                          //console.log('unique::', uniqueData)
                           let option = showContentCode.split('、')
                           option.map((item2) => {
                             if (item.code === item2) {
@@ -1275,12 +1275,23 @@ export default function Estimate({ params }) {
                             }
                           })
                         })
-                        return pushData.map((item) => (
+                        //제품에 있는 특이사항만 보여주기 제품에 특이사항이 없으면 전부
-                          <dl key={uuidv4()}>
+                        let filterData = pushData.filter((item) => uniqueData.includes(item.code))
-                            <dt>{item.codeNm}</dt>
+                        if (filterData.length > 0) {
-                            <dd dangerouslySetInnerHTML={{ __html: item.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
+                          return filterData.map((item) => (
-                          </dl>
+                            <dl key={item.code}>
-                        ))
+                              <dt>{item.codeNm}</dt>
+                              <dd dangerouslySetInnerHTML={{ __html: item.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
+                            </dl>
+                          ))
+                        } else {
+                          return pushData.map((item) => (
+                            <dl key={item.code}>
+                              <dt>{item.codeNm}</dt>
+                              <dd dangerouslySetInnerHTML={{ __html: item.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
+                            </dl>
+                          ))
+                        }
                       }
                     }
                   })}
@@ -1306,7 +1317,7 @@ export default function Estimate({ params }) {
                 </div>
                 <div className="estimate-box">
                   <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.totVolKw')}</div>
-                  <div className="estimate-name blue">{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 3)}</div>
+                  <div className="estimate-name blue">{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)}</div>
                 </div>
                 <div className="estimate-box">
                   <div className="estimate-tit">{getMessage('estimate.detail.sepcialEstimateProductInfo.supplyPrice')}</div>
@@ -1352,7 +1363,7 @@ export default function Estimate({ params }) {
                       </div>
                     </td>
                     <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgWeight')}</th>
-                    <td>{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 3)}</td>
+                    <td>{convertNumberToPriceDecimalToFixed(estimateContextState?.totVolKw, 2)}</td>
                     <th>{getMessage('estimate.detail.sepcialEstimateProductInfo.pkgPrice')}</th>
                     <td>{convertNumberToPriceDecimal(estimateContextState?.pkgTotPrice)}</td>
                   </tr>
@@ -1367,14 +1378,19 @@ export default function Estimate({ params }) {
                 <div className="select-wrap">
                   {session?.storeLvl === '1' ? (
                     <select
-                      key={uuidv4()}
+                      // key={uuidv4()}
                       className="select-light"
                       onChange={(e) => {
                         onChangeStorePriceList(e.target.value)
                       }}
                       value={showPriceCd}
                     >
-                      {storePriceList.length > 0 && storePriceList.map((row) => <option value={row.priceCd}>{row.priceNm}</option>)}
+                      {storePriceList.length > 0 &&
+                        storePriceList.map((row) => (
+                          <option key={row.priceCd} value={row.priceCd}>
+                            {row.priceNm}
+                          </option>
+                        ))}
                     </select>
                   ) : (
                     <select key={uuidv4()} className="select-light">
@@ -1485,7 +1501,7 @@ export default function Estimate({ params }) {
                                 <div className="select-wrap mr5">
                                   <Select
                                     // id="long-value-select1"
-                                    name="long-value-select"
+                                    name="long-value-select1"
                                     instanceId="long-value-select1"
                                     className="react-select-custom"
                                     classNamePrefix="custom"

src/components/estimate/popup/ProductFeaturesPop.jsx

@@ -40,9 +40,8 @@ export default function ProductFeaturesPop({ popShowSpecialNoteList, showProduct
                 {showSpecialNoteList.length > 0 &&
                   showSpecialNoteList.map((row) => {
                     return (
-                      <dl>
+                      <dl key={row.code}>
                         <dt>{row.codeNm}</dt>
-                        {/* <dd dangerouslySetInnerHTML={{ __html: row.remarks }}></dd> */}
                         <dd dangerouslySetInnerHTML={{ __html: row.remarks }} style={{ whiteSpace: 'pre-wrap' }}></dd>
                       </dl>
                     )

src/components/floor-plan/modal/basic/BasicSetting.jsx

@@ -93,7 +93,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
                 )}
                 {canvasSetting.roofSizeSet && canvasSetting.roofSizeSet === 3 && (
                   <>
-                    <button className="btn-frame modal mr5" onClick={manualFlatroofModuleSetup}>
+                    <button className="btn-frame modal mr5" onClick={() => manualFlatroofModuleSetup(placementFlatRef)}>
                       {getMessage('modal.module.basic.setting.passivity.placement')}
                     </button>
                     <button className="btn-frame modal act" onClick={() => autoFlatroofModuleSetup(placementFlatRef)}>

src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx

@@ -1,16 +1,26 @@
 import { forwardRef, useState, useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+import { compasDegAtom } from '@/store/orientationAtom'
+import { canvasState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
+import { POLYGON_TYPE } from '@/common/common'
 
 const PitchPlacement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
   const [setupLocation, setSetupLocation] = useState('south')
   const { makeModuleInstArea } = useModuleBasicSetting()
+  const compasDeg = useRecoilValue(compasDegAtom)
+  const canvas = useRecoilValue(canvasState)
 
   useEffect(() => {
     makeModuleInstArea()
   }, [])
 
+  useEffect(() => {
+    handleChangeSetupLocation()
+  }, [setupLocation])
+
   const moduleData = {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
@@ -35,8 +45,41 @@ const PitchPlacement = forwardRef((props, refs) => {
   }
 
   const handleSetupLocation = (e) => {
+    refs.setupLocation.current = e.target
     setSetupLocation(e.target.value)
-    refs.setupLocation.current = e.target.value
+  }
+
+  const handleChangeSetupLocation = () => {
+    if (setupLocation === 'south') {
+      canvas.getObjects().forEach((obj) => obj.name === 'flatExcretaLine' && canvas.remove(obj))
+      return null
+    } else {
+      const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
+      moduleSetupSurfaces.forEach((surface, index) => {
+        console.log(`surface ${index} : `, surface)
+
+        const excretaLine = surface.lines
+
+        excretaLine.forEach((line) => {
+          line.set({
+            stroke: '#642EFB',
+            strokeWidth: 5,
+            surfaceId: surface.surfaceId,
+            name: 'flatExcretaLine',
+          })
+          canvas.add(line)
+
+          line.on('selected', () => {
+            excretaLine.forEach((obj) => obj.set({ stroke: '#642EFB', isSelected: false }))
+            if (!line.isSelected) {
+              line.set({ stroke: 'red', isSelected: true })
+            } else {
+              line.set({ stroke: '#642EFB', isSelected: false })
+            }
+          })
+        })
+      })
+    }
   }
 
   return (

src/components/header/Header.jsx

@@ -96,7 +96,8 @@ export default function Header(props) {
       name: 'header.menus.management',
       url: '',
       children: [
-        { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
+        // { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempdetail', children: [] },
+        { id: 3, name: 'header.menus.management.newStuff', url: '/management/stuff/tempReg', children: [] },
         { id: 4, name: 'header.menus.management.stuffList', url: '/management/stuff', children: [] },
       ],
     },

src/components/management/StuffDetail.jsx

@@ -75,7 +75,7 @@ export default function StuffDetail() {
     installHeight: '', //설치높이
     conType: '0', //계약조건(잉여 / 전량)
     remarks: '', //메모
-    tempFlag: 'T', //임시저장(1) 저장(0)
+    tempFlg: 'T', //임시저장(1) 저장(0)
   }
   const { register, setValue, getValues, handleSubmit, resetField, control, watch } = useForm({
     defaultValues: formInitValue,
@@ -108,7 +108,6 @@ export default function StuffDetail() {
 
   const [editMode, setEditMode] = useState('NEW')
   const { managementState, setManagementState } = useContext(ManagementContext)
-
   const [planGridProps, setPlanGridProps] = useState({
     planGridData: [],
     isPageable: false,
@@ -283,6 +282,7 @@ export default function StuffDetail() {
                   {getMessage('stuff.detail.planGrid.btn1')}
                 </button>
                 <button
+                  style={buttonStyle}
                   type="button"
                   className="grid-btn"
                   onClick={() => {
@@ -516,7 +516,6 @@ export default function StuffDetail() {
                 firstList = res
                 favList = res.filter((row) => row.priority !== 'B')
                 otherList = res.filter((row) => row.firstAgentYn === 'N')
-
                 setSaleStoreList(firstList)
                 setFavoriteStoreList(firstList)
                 setShowSaleStoreList(firstList)
@@ -547,6 +546,9 @@ export default function StuffDetail() {
             form.setValue('otherSaleStoreLevel', managementState.saleStoreLevel)
 
             form.setValue('saleStoreLevel', '1')
+
+            form.setValue('saleStoreId', managementState.firstAgentId)
+            setSelOptions(managementState.firstAgentId)
           }
 
           //설계의뢰No.
@@ -896,6 +898,8 @@ export default function StuffDetail() {
 
   //팝업에서 넘어온 설계의뢰 정보로 바꾸기
   const setPlanReqInfo = (info) => {
+    // console.log('session 정보:::::::', session)
+    // console.log('설계의뢰에서 넘어온 정보:::::::', info)
     form.setValue('planReqNo', info.planReqNo)
     form.setValue('objectStatusId', info.building)
     setSelectObjectStatusId(info.building)
@@ -2032,8 +2036,8 @@ export default function StuffDetail() {
                                     onChange={onSelectionChange}
                                     getOptionLabel={(x) => x.saleStoreName}
                                     getOptionValue={(x) => x.saleStoreId}
-                                    isClearable={managementState.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
+                                    isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
-                                    isDisabled={managementState.tempFlg === '0' ? true : session?.storeLvl !== '1' ? true : false}
+                                    isDisabled={managementState?.tempFlg === '0' ? true : session?.storeLvl !== '1' ? true : false}
                                     value={saleStoreList.filter(function (option) {
                                       return option.saleStoreId === selOptions
                                     })}
@@ -2066,7 +2070,7 @@ export default function StuffDetail() {
                                     getOptionValue={(x) => x.saleStoreId}
                                     isClearable={false}
                                     isDisabled={
-                                      managementState.tempFlg === '0'
+                                      managementState?.tempFlg === '0'
                                         ? true
                                         : session?.storeLvl !== '1'
                                           ? true
@@ -2151,9 +2155,13 @@ export default function StuffDetail() {
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
                                 isDisabled={
-                                  managementState.tempFlg === '0' ? true : session?.storeLvl === '1' && form.watch('saleStoreId') != '' ? false : true
+                                  managementState?.tempFlg === '0'
+                                    ? true
+                                    : session?.storeLvl === '1' && form.watch('saleStoreId') != ''
+                                      ? false
+                                      : true
                                 }
-                                isClearable={managementState.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
+                                isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
                                 value={otherSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === otherSelOptions
                                 })}

src/components/management/StuffSearchCondition.jsx

@@ -564,7 +564,8 @@ export default function StuffSearchCondition() {
             <h3>{getMessage('stuff.search.title')}</h3>
           </div>
           <div className="left-unit-box">
-            <Link href="/management/stuff/tempdetail" scroll={false}>
+            <Link href="/management/stuff/tempReg" scroll={false}>
+              {/* <Link href="/management/stuff/tempdetail" scroll={false}> */}
               <button type="button" className="btn-origin navy mr5">
                 {getMessage('stuff.search.btn.register')}
               </button>

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -318,6 +318,10 @@ export const useEstimateController = (planNo) => {
       estimateData.deleteFileList = []
     }
 
+    if (estimateData.estimateType === 'YJSS') {
+      estimateData.pkgAsp = estimateData.pkgAsp.replaceAll(',', '')
+    }
+
     console.log('최종저장::', estimateData)
     //2. 상세데이터 저장
     // return

src/hooks/module/useModuleBasicSetting.js

@@ -2,7 +2,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { rectToPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
 import { roofDisplaySelector } from '@/store/settingAtom'
-import offsetPolygon from '@/util/qpolygon-utils'
+import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { moduleSetupSurfaceState, moduleIsSetupState } from '@/store/canvasAtom'
 import { useEvent } from '@/hooks/useEvent'
@@ -11,6 +11,7 @@ import * as turf from '@turf/turf'
 import { v4 as uuidv4 } from 'uuid'
 import { useSwal } from '@/hooks/useSwal'
 import { canvasSettingState } from '@/store/canvasAtom'
+import { compasDegAtom } from '@/store/orientationAtom'
 
 export function useModuleBasicSetting() {
   const canvas = useRecoilValue(canvasState)
@@ -20,6 +21,8 @@ export function useModuleBasicSetting() {
   const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
   const { swalFire } = useSwal()
   const canvasSetting = useRecoilValue(canvasSettingState)
+  const compasDeg = useRecoilValue(compasDegAtom)
+
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
@@ -1518,7 +1521,334 @@ export function useModuleBasicSetting() {
     return obj
   }
 
-  const manualFlatroofModuleSetup = () => {}
+  const manualFlatroofModuleSetup = (placementFlatRef) => {
+    const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
+    let applyAngle
+    let flatBatchType = placementFlatRef.setupLocation.current.value
+    let excretaLinesAngle = []
+
+    if (flatBatchType === 'south') {
+      applyAngle = compasDeg
+    } else {
+      const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine' && obj.isSelected === true)
+      excretaLines.forEach((obj) => {
+        const points1 = { x: obj.x1, y: obj.y1 }
+        const points2 = { x: obj.x2, y: obj.y2 }
+        excretaLinesAngle.push({
+          surfaceId: obj.surfaceId,
+          angle: calculateAngle(points1, points2),
+        })
+      })
+    }
+
+    //calculateAngle
+
+    const batchObjects = canvas
+      ?.getObjects()
+      .filter(
+        (obj) =>
+          obj.name === BATCH_TYPE.OPENING ||
+          obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
+          obj.name === BATCH_TYPE.PENTAGON_DORMER ||
+          obj.name === BATCH_TYPE.SHADOW,
+      ) //도머s 객체
+
+    const moduleOptions = {
+      fill: '#BFFD9F',
+      stroke: 'black',
+      strokeWidth: 0.1,
+      selectable: false, // 선택 가능하게 설정
+      lockMovementX: true, // X 축 이동 잠금
+      lockMovementY: true, // Y 축 이동 잠금
+      lockRotation: true, // 회전 잠금
+      lockScalingX: true, // X 축 크기 조정 잠금
+      lockScalingY: true, // Y 축 크기 조정 잠금
+      opacity: 0.8,
+      parentId: moduleSetupSurface.parentId,
+      name: 'module',
+    }
+
+    function getRotatedCorners(rect) {
+      // 사각형의 중심점
+      const center = rect.getCenterPoint()
+
+      // 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준)
+      const halfWidth = (rect.width / 2) * rect.scaleX
+      const halfHeight = (rect.height / 2) * rect.scaleY
+
+      const corners = [
+        { x: -halfWidth, y: -halfHeight }, // 좌상단
+        { x: halfWidth, y: -halfHeight }, // 우상단
+        { x: halfWidth, y: halfHeight }, // 우하단
+        { x: -halfWidth, y: halfHeight }, // 좌하단
+      ]
+
+      // 각 꼭짓점 좌표를 캔버스 좌표로 변환
+      const transformedCorners = corners.map((corner) => {
+        const point = new fabric.Point(corner.x, corner.y)
+        return fabric.util.transformPoint(point, rect.calcTransformMatrix())
+      })
+
+      return transformedCorners
+    }
+
+    function getSelectedExcretaLine() {}
+
+    if (moduleSetupSurfaces.length !== 0) {
+      let tempModule
+      let manualDrawModules = []
+      let inside = false
+      let turfPolygon
+      let flowDirection
+      let trestlePolygon
+
+      addCanvasMouseEventListener('mouse:move', (e) => {
+        //마우스 이벤트 삭제 후 재추가
+        const mousePoint = canvas.getPointer(e.e)
+
+        for (let i = 0; i < moduleSetupSurfaces.length; i++) {
+          turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
+          trestlePolygon = moduleSetupSurfaces[i]
+          manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
+          flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
+
+          if (flatBatchType === 'excreta') {
+            const tempLine = excretaLinesAngle.find((obj) => obj.surfaceId === trestlePolygon.surfaceId)
+            if (tempLine) {
+              applyAngle = tempLine.angle
+            } else {
+              applyAngle = compasDeg
+            }
+          }
+
+          // const excretaLine = excretaLines.find((obj) => obj.isSelected === true && obj.surfaceId === trestlePolygon.surfaceId)
+
+          // console.log('excretaLine', excretaLine.x1, excretaLine.y1, excretaLine.x2, excretaLine.y2)
+
+          // applyAngle = calculateAngle(excretaLine.x1, excretaLine.y1, excretaLine.x2, excretaLine.y2)
+
+          // console.log('applyAngle', applyAngle)
+
+          let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
+          let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
+
+          const angledModule = new fabric.Rect({
+            width: width,
+            height: height,
+            left: mousePoint.x - width / 2,
+            top: mousePoint.y - height / 2,
+          })
+
+          const center = angledModule.getCenterPoint()
+          angledModule.set('angle', applyAngle)
+          angledModule.setPositionByOrigin(center, 'center', 'center')
+
+          const points = getRotatedCorners(angledModule) //
+          const turfPoints = coordToTurfPolygon(points)
+
+          if (turf.booleanWithin(turfPoints, turfPolygon)) {
+            let isDrawing = false
+
+            if (isDrawing) return
+            canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
+
+            tempModule = new QPolygon(points, {
+              fill: 'white',
+              stroke: 'black',
+              strokeWidth: 0.3,
+              name: 'tempModule',
+            })
+
+            canvas?.add(tempModule) //움직여가면서 추가됨
+            canvas?.renderAll()
+
+            /**
+             * 스냅기능
+             */
+            let snapDistance = 10
+            let cellSnapDistance = 20
+
+            const trestleLeft = moduleSetupSurfaces[i].left
+            const trestleTop = moduleSetupSurfaces[i].top
+            const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX
+            const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY
+            const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
+
+            // 작은 폴리곤의 경계 좌표 계산
+            const smallLeft = tempModule.left
+            const smallTop = tempModule.top
+            const smallRight = smallLeft + tempModule.width * tempModule.scaleX
+            const smallBottom = smallTop + tempModule.height * tempModule.scaleY
+            const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2
+            const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2
+
+            if (manualDrawModules) {
+              manualDrawModules.forEach((cell) => {
+                const holdCellLeft = cell.left
+                const holdCellTop = cell.top
+                const holdCellRight = holdCellLeft + cell.width * cell.scaleX
+                const holdCellBottom = holdCellTop + cell.height * cell.scaleY
+                const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2
+                const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2
+
+                //설치된 셀에 좌측에 스냅
+                if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
+                  tempModule.left = holdCellLeft - width - 0.5
+                }
+
+                //설치된 셀에 우측에 스냅
+                if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
+                  tempModule.left = holdCellRight + 0.5
+                }
+
+                //설치된 셀에 위쪽에 스냅
+                if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
+                  tempModule.top = holdCellTop - height - 0.5
+                }
+
+                //설치된 셀에 밑쪽에 스냅
+                if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
+                  tempModule.top = holdCellBottom + 0.5
+                }
+                //가운데 -> 가운데
+                if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
+                  tempModule.left = holdCellCenterX - width / 2
+                }
+                //왼쪽 -> 가운데
+                if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
+                  tempModule.left = holdCellCenterX
+                }
+                // 오른쪽 -> 가운데
+                if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
+                  tempModule.left = holdCellCenterX - width
+                }
+                //세로 가운데 -> 가운데
+                if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) {
+                  tempModule.top = holdCellCenterY - height / 2
+                }
+                //위쪽 -> 가운데
+                if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) {
+                  tempModule.top = holdCellCenterY
+                }
+                //아랫쪽 -> 가운데
+                if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) {
+                  tempModule.top = holdCellCenterY - height
+                }
+              })
+            }
+
+            // 위쪽 변에 스냅
+            if (Math.abs(smallTop - trestleTop) < snapDistance) {
+              tempModule.top = trestleTop
+            }
+
+            // 아래쪽 변에 스냅
+            if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
+              tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
+            }
+
+            // 왼쪽변에 스냅
+            if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
+              tempModule.left = trestleLeft
+            }
+            //오른쪽 변에 스냅
+            if (Math.abs(smallRight - trestleRight) < snapDistance) {
+              tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
+            }
+
+            if (flowDirection === 'south' || flowDirection === 'north') {
+              // 모듈왼쪽이 세로중앙선에 붙게 스냅
+              if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
+                tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2
+              }
+
+              // 모듈이 가운데가 세로중앙선에 붙게 스냅
+              if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
+                tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2
+              }
+
+              // 모듈오른쪽이 세로중앙선에 붙게 스냅
+              if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
+                tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
+              }
+            } else {
+              // 모듈이 가로중앙선에 스냅
+              if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
+                tempModule.top = bigCenterY - tempModule.height / 2
+              }
+
+              if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
+                tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
+              }
+              // 모듈 밑면이 가로중앙선에 스냅
+              if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
+                tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
+              }
+            }
+
+            inside = true
+            break
+          } else {
+            inside = false
+          }
+        }
+
+        if (!inside) {
+          // tempModule.set({ fill: 'red' })
+          canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
+          canvas?.renderAll()
+        }
+      })
+
+      addCanvasMouseEventListener('mouse:up', (e) => {
+        let isIntersection = true
+        if (!inside) return
+        if (tempModule) {
+          const tempTurfModule = polygonToTurfPolygon(tempModule)
+
+          //도머 객체를 가져옴
+          if (batchObjects) {
+            batchObjects.forEach((object) => {
+              let dormerTurfPolygon
+
+              if (object.type === 'group') {
+                //도머는 그룹형태임
+                dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
+              } else {
+                //개구, 그림자
+                dormerTurfPolygon = polygonToTurfPolygon(rectToPolygon(object))
+              }
+
+              const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
+              //겹치면 안됨
+              if (intersection) {
+                alert('도머위에 모듈을 올릴 수 없습니다.')
+                isIntersection = false
+              }
+            })
+          }
+
+          if (!isIntersection) return
+
+          if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
+            //마우스 클릭시 set으로 해당 위치에 셀을 넣음
+            const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
+            if (!isOverlap) {
+              console.log('tempModule.points', tempModule.points)
+
+              let manualModule = new QPolygon(tempModule.points, { ...moduleOptions })
+              canvas?.add(manualModule)
+              manualDrawModules.push(tempModule)
+            } else {
+              alert('셀끼리 겹치면 안되죠?')
+            }
+          } else {
+            alert('나갔죠?!!')
+          }
+        }
+      })
+    }
+  }
 
   const autoFlatroofModuleSetup = (placementFlatRef) => {}
 

src/hooks/usePlan.js

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
-import { v4 as uuidv4, validate as isValidUUID } from 'uuid'
+import { v4 as uuidv4 } from 'uuid'
 import { canvasState, currentCanvasPlanState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
@@ -177,7 +177,7 @@ export function usePlan() {
    * objectNo에 해당하는 canvas 목록을 조회
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
-    return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
+    return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
       res.map((item, index) => ({
         id: item.id,
         userId: item.userId,
@@ -234,15 +234,15 @@ export function usePlan() {
   /**
    * id에 해당하는 canvas 데이터를 삭제
    */
-  const delCanvasById = (id) => {
+  const delCanvasById = async (id) => {
-    return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
+    return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
   }
 
   /**
    * objectNo에 해당하는 canvas 데이터들을 삭제
    */
-  const delCanvasByObjectNo = (objectNo) => {
+  const delCanvasByObjectNo = async (objectNo) => {
-    return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
+    return await promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
   }
 
   /**
@@ -279,19 +279,19 @@ export function usePlan() {
    * 새로운 plan 생성
    * 현재 plan의 데이터가 있을 경우 복제 여부를 확인
    */
-  const handleAddPlan = (userId, objectNo) => {
+  const handleAddPlan = async (userId, objectNo) => {
     JSON.parse(currentCanvasData()).objects.length > 0
       ? swalFire({
           text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
           type: 'confirm',
-          confirmFn: () => {
+          confirmFn: async () => {
-            postCanvasStatus(userId, objectNo, currentCanvasData())
+            await postCanvasStatus(userId, objectNo, currentCanvasData())
           },
-          denyFn: () => {
+          denyFn: async () => {
-            postCanvasStatus(userId, objectNo, '')
+            await postCanvasStatus(userId, objectNo, '')
           },
         })
-      : postCanvasStatus(userId, objectNo, '')
+      : await postCanvasStatus(userId, objectNo, '')
   }
 
   /**
@@ -314,10 +314,10 @@ export function usePlan() {
   /**
    * plan 삭제
    */
-  const handleDeletePlan = (e, id) => {
+  const handleDeletePlan = async (e, id) => {
     e.stopPropagation() // 이벤트 버블링 방지
 
-    delCanvasById(id)
+    await delCanvasById(id)
       .then((res) => {
         setPlans((plans) => plans.filter((plan) => plan.id !== id))
         setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
@@ -340,8 +340,8 @@ export function usePlan() {
   /**
    * plan 조회
    */
-  const loadCanvasPlanData = (userId, objectNo, pid) => {
+  const loadCanvasPlanData = async (userId, objectNo, pid) => {
-    getCanvasByObjectNo(userId, objectNo).then((res) => {
+    await getCanvasByObjectNo(userId, objectNo).then((res) => {
       // console.log('canvas 목록 ', res)
       if (res.length > 0) {
         setPlans(res)

src/util/common-utils.js

@@ -113,7 +113,7 @@ export const calculateFlowDirection = (canvasAngle) => {
   return {
     down: -canvasAngle,
     up: 180 - canvasAngle,
-    left: 90 - canvasAngle,
+    left: 90 - canvasAngle < 180 ? 90 - canvasAngle : 90 - canvasAngle - 360,
-    right: -90 - canvasAngle,
+    right: -90 - canvasAngle < -180 ? -90 - canvasAngle + 360 : -90 - canvasAngle,
   }
 }