Merge branch 'dev' into feature/jaeyoung

.env.development

@@ -4,5 +4,5 @@ SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
 
 NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
 
-NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-qa.q-cells.jp:8120/eos/login/autoLogin"
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-stg.q-cells.jp:8120/eos/login/autoLogin"
-NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-qa.q-cells.jp:8120/qm/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-stg.q-cells.jp:8120/qm/login/autoLogin"

src/app/GlobalDataProvider.js

@@ -10,12 +10,14 @@ export const GlobalDataContext = createContext({
 })
 
 const GlobalDataProvider = ({ children }) => {
-  const [managementState, setManagementState] = useState({})
+  const [managementState, setManagementState] = useState(null)
   // TODO: 임시 조치이며 개발 완료시 삭제 예정 -> 잊지말기...
   const [managementStateLoaded, setManagementStateLoaded] = useLocalStorage('managementStateLoaded', null)
 
   useEffect(() => {
+    if (managementState !== null) {
       setManagementStateLoaded(managementState)
+    }
   }, [managementState])
 
   return <GlobalDataContext.Provider value={{ managementState, setManagementState, managementStateLoaded }}>{children}</GlobalDataContext.Provider>

src/app/floor-plan/FloorPlanProvider.js

@@ -23,6 +23,17 @@ const defaultEstimateData = {
   priceCd: '',
 }
 
+/**
+ * 모듈,회로 구성 상태 데이터
+ * 각 설정 팝업 상태를 저장하는 데이터
+ */
+const defaultProcessStep = {
+  gnbStep: 0,
+  processStep: 0,
+  moduleCofigureData: {},
+  pcsConfigureData: {},
+}
+
 export const FloorPlanContext = createContext({
   floorPlanState: {},
   setFloorPlanState: () => {},
@@ -57,8 +68,12 @@ const FloorPlanProvider = ({ children }) => {
 
   const [estimateContextState, setEstimateContextState] = useReducer(reducer, defaultEstimateData)
 
+  const [processStepState, setProcessStepState] = useReducer(reducer, defaultProcessStep)
+
   return (
-    <FloorPlanContext.Provider value={{ floorPlanState, setFloorPlanState, estimateContextState, setEstimateContextState }}>
+    <FloorPlanContext.Provider
+      value={{ floorPlanState, setFloorPlanState, estimateContextState, setEstimateContextState, processStepState, setProcessStepState }}
+    >
       {children}
     </FloorPlanContext.Provider>
   )

src/app/floor-plan/estimate/[mid]/[pid]/page.jsx

@@ -1,12 +0,0 @@
-import Estimate from '@/components/estimate/Estimate'
-
-export default function EstimatePage({ params }) {
-  //floor-plan/estimate/mid/pid
-  //mid :5 견적탭
-  //pid : 넘어온 플랜번호
-  return (
-    <>
-      <Estimate params={params} />
-    </>
-  )
-}

src/app/floor-plan/estimate/[mid]/page.jsx

@@ -0,0 +1,9 @@
+import Estimate from '@/components/estimate/Estimate'
+
+export default function EstimatePage({}) {
+  return (
+    <>
+      <Estimate />
+    </>
+  )
+}

src/app/floor-plan/layout.js

@@ -1,9 +1,9 @@
 'use client'
 
+import { usePathname } from 'next/navigation'
 import FloorPlanProvider from './FloorPlanProvider'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
-import { usePathname } from 'next/navigation'
 
 export default function FloorPlanLayout({ children }) {
   console.log('🚀 ~ FloorPlanLayout ~ FloorPlanLayout:')
@@ -14,12 +14,12 @@ export default function FloorPlanLayout({ children }) {
     <>
       <FloorPlanProvider>
         <FloorPlan>
-          {pathname.includes('estimate') || pathname.includes('simulator') ? (
+          {/* {pathname.includes('estimate') || pathname.includes('simulator') ? (
             <div className="canvas-layout">{children}</div>
           ) : (
             <CanvasLayout>{children}</CanvasLayout>
-          )}
+          )} */}
-          {/* <CanvasLayout>{children}</CanvasLayout> */}
+          <CanvasLayout>{children}</CanvasLayout>
         </FloorPlan>
       </FloorPlanProvider>
     </>

src/components/Main.jsx

@@ -2,24 +2,20 @@
 import { useEffect, useState, useContext } from 'react'
 
 import { useRouter } from 'next/navigation'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState } from 'recoil'
-import { useAxios } from '@/hooks/useAxios'
-import { globalLocaleStore } from '@/store/localeAtom'
 import MainContents from './main/MainContents'
 import { useMessage } from '@/hooks/useMessage'
 import { stuffSearchState } from '@/store/stuffAtom'
 import '@/styles/contents.scss'
 import ChangePasswordPop from './main/ChangePasswordPop'
 import { searchState } from '@/store/boardAtom'
-import { SessionContext } from '@/app/SessionProvider'
 import { QcastContext } from '@/app/QcastProvider'
 import { sessionStore } from '@/store/commonAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
-export default function MainPage(mainPageProps) {
+export default function MainPage() {
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
   const [chagePasswordPopOpen, setChagePasswordPopOpen] = useState(false)
-  const { session } = useContext(SessionContext)
 
   const router = useRouter()
   const { getMessage } = useMessage()

src/components/Playground.jsx

@@ -226,6 +226,32 @@ export default function Playground() {
     setMyData({ ...myData, raftBaseCd: 'HEI_500' })
   }
 
+  const [myData2, setMyData2] = useState({})
+
+  const handleChangeMyData2 = () => {
+    setMyData2({
+      roofMatlCd: 'ROOF_ID_WA_53A',
+      roofMatlNm: '화와 A',
+      roofMatlNmJp: '和瓦A',
+      widAuth: 'R',
+      widBase: '265.000',
+      lenAuth: 'R',
+      lenBase: '235.000',
+      roofPchAuth: null,
+      roofPchBase: null,
+      raftAuth: 'C',
+      raftBaseCd: 'HEI_455',
+      id: 'ROOF_ID_WA_53A',
+      name: '화와 A',
+      selected: true,
+      nameJp: '和瓦A',
+      length: 235,
+      width: 265,
+      layout: 'P',
+      hajebichi: null,
+    })
+  }
+
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">
@@ -504,6 +530,15 @@ export default function Playground() {
         <div className="my-2">
           <Button onClick={handleChangeMyData}>QSelectBox value change!!</Button>
         </div>
+        <div className="my-2">
+          <QSelectBox options={codes} value={myData2} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
+        </div>
+        <div className="my-2">
+          <Button onClick={handleChangeMyData2}>QSelectBox dynamic data bind change!!</Button>
+        </div>
+        <div className="my-2">
+          <QSelectBox title="초기값 테스트" options={[]} value={{}} sourceKey="id" targetKey="raftBaseCd" showKey="clCodeNm" />
+        </div>
         <div className="my-2">
           <SampleReducer />
         </div>

src/components/common/select/QSelectBox.jsx

@@ -17,7 +17,7 @@ import { useOnClickOutside } from 'usehooks-ts'
  */
 export default function QSelectBox({
   title = '',
-  options,
+  options = [],
   onChange,
   value,
   disabled = false,
@@ -32,21 +32,26 @@ export default function QSelectBox({
    * @returns {string} 초기 상태
    */
   const handleInitState = () => {
-    //title이 있으면 우선 보여준다(다른 키들 무시)
+    if (options.length === 0) return title !== '' ? title : '선택하세요.'
-    if (title !== '') {
-      return title
-    }
-
-    //value가 없으면 showKey가 있으면 우선 보여준다
     if (showKey !== '' && !value) {
-      return options[0][showKey]
+      //value가 없으면 showKey가 있으면 우선 보여준다
-    }
+      // return options[0][showKey]
-
+      return title
+    } else if (showKey !== '' && value) {
       //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
-    if (showKey !== '' && value) {
+
-      const option = options.find((option) => option[sourceKey] === value[targetKey])
+      const option = options.find((option) => {
+        return option[sourceKey] === value[targetKey]
+      })
+      if (!option) {
+        return title !== '' ? title : '선택하세요.'
+      } else {
         return option[showKey]
       }
+    } else {
+      //일치하는 조건이 없으면 기본값을 보여준다.
+      return title !== '' ? title : '선택하세요.'
+    }
   }
 
   const [openSelect, setOpenSelect] = useState(false)
@@ -54,6 +59,8 @@ export default function QSelectBox({
   const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
+    console.log('🚀 ~ handleClickSelectOption ~ option:', option)
+
     setSelected(showKey !== '' ? option[showKey] : option.name)
     onChange?.(option, params)
   }
@@ -65,7 +72,7 @@ export default function QSelectBox({
   useEffect(() => {
     // value && handleClickSelectOption(value)
     setSelected(handleInitState())
-  }, [value, sourceKey, targetKey, showKey])
+  }, [options, value, sourceKey, targetKey, showKey])
 
   useOnClickOutside(ref, handleClose)
 
@@ -73,7 +80,8 @@ export default function QSelectBox({
     <div className={`sort-select ${openSelect ? 'active' : ''}`} ref={ref} onClick={disabled ? () => {} : () => setOpenSelect(!openSelect)}>
       <p>{selected}</p>
       <ul className="select-item-wrap">
-        {options?.map((option, index) => (
+        {options?.length > 0 &&
+          options?.map((option, index) => (
             <li key={option.id || index} className="select-item" onClick={() => handleClickSelectOption(option)}>
               <button key={option.id + 'btn'}>{showKey !== '' ? option[showKey] : option.name}</button>
             </li>

src/components/community/Table.jsx

@@ -79,7 +79,7 @@ export default function Table({ clsCode }) {
                 >
                   <td className="al-c">
                     {/* 번호 */}
-                    {board.rowNumber}
+                    {board.totCnt - board.rowNumber + 1}
                   </td>
                   <td>
                     {/* 제목 */}

src/components/estimate/Estimate.jsx

@@ -21,7 +21,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { correntObjectNoState } from '@/store/settingAtom'
 import { useSearchParams } from 'next/navigation'
 
-export default function Estimate({ params }) {
+export default function Estimate({}) {
   const [uniqueData, setUniqueData] = useState([])
   const [handlePricingFlag, setHandlePricingFlag] = useState(false)
   const [specialNoteFirstFlg, setSpecialNoteFirstFlg] = useState(false)
@@ -42,7 +42,8 @@ export default function Estimate({ params }) {
 
   const [selection, setSelection] = useState(new Set())
   //견적특이사항 접고 펼치기
-  const [hidden, setHidden] = useState(false)
+  // const [hidden, setHidden] = useState(false)
+  const [hidden, setHidden] = useState(true)
 
   //아이템 자동완성 리스트
   const [displayItemList, setDisplayItemList] = useState([])
@@ -58,29 +59,28 @@ export default function Estimate({ params }) {
     startDate,
     setStartDate,
   }
-
-  const objectRecoil = useRecoilValue(floorPlanObjectState)
-
-  //견적서 상세데이터
-  const { estimateContextState, setEstimateContextState, addItem, handleEstimateFileDownload } = useEstimateController(params.pid)
-
-  //견적특이사항 List
-  const [specialNoteList, setSpecialNoteList] = useState([])
-  const [popShowSpecialNoteList, setPopShowSpecialNoteList] = useState([])
-
-  const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { get, promisePost } = useAxios(globalLocaleState)
-
-  const { getMessage } = useMessage()
-
-  const { setMenuNumber } = useCanvasMenu()
-
   /**
    * objectNo 셋팅
    * url로 넘어온 objectNo을 리코일에 세팅
    */
   const setCurrentObjectNo = useSetRecoilState(correntObjectNoState)
   const searchParams = useSearchParams()
+  const objectRecoil = useRecoilValue(floorPlanObjectState)
+  const currentPid = searchParams.get('pid')
+  //견적서 상세데이터
+  const { estimateContextState, setEstimateContextState, addItem, handleEstimateFileDownload } = useEstimateController(currentPid)
+
+  //견적특이사항 List
+  const [specialNoteList, setSpecialNoteList] = useState([])
+  const [popShowSpecialNoteList, setPopShowSpecialNoteList] = useState([])
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get, post, promisePost } = useAxios(globalLocaleState)
+
+  const { getMessage } = useMessage()
+
+  const { setMenuNumber } = useCanvasMenu()
+
   const currentObjectNo = searchParams.get('objectNo')
   setCurrentObjectNo(currentObjectNo)
 
@@ -93,7 +93,8 @@ export default function Estimate({ params }) {
   useEffect(() => {
     setMenuNumber(5)
     setObjectNo(objectRecoil.floorPlanObjectNo)
-    setPlanNo(params.pid)
+
+    setPlanNo(currentPid)
 
     // 공통코드
     const code1 = findCommonCode(200800)
@@ -106,7 +107,7 @@ export default function Estimate({ params }) {
       saleStoreId: session.storeId,
     }
     const apiUrl = `/api/display-item/item-list?${queryStringFormatter(param)}`
-    get({ url: apiUrl }).then((res) => {
+    post({ url: apiUrl, data: param }).then((res) => {
       if (res.length > 0) {
         setDisplayItemList(res)
       }
@@ -615,6 +616,8 @@ export default function Estimate({ params }) {
   const onChangeDisplayItem = (itemId, dispOrder, index) => {
     const param = {
       itemId: itemId,
+      coldZoneFlg: estimateContextState?.coldRegionFlg,
+      saltAffectedFlg: estimateContextState?.saltAreaFlg,
     }
     const apiUrl = `/api/display-item/item-detail?${queryStringFormatter(param)}`
     let updateList = []
@@ -992,7 +995,11 @@ export default function Estimate({ params }) {
                   <tr>
                     {/* 2차 판매점명 */}
                     <th>{getMessage('estimate.detail.otherSaleStoreId')}</th>
-                    <td>{estimateContextState?.agencySaleStoreName}</td>
+                    <td>
+                      {session?.storeLvl === '1' && estimateContextState?.saleStoreLevel === '1'
+                        ? getMessage('estimate.detail.noOtherSaleStoreId')
+                        : estimateContextState?.agencySaleStoreName}
+                    </td>
                     {/* 담당자 */}
                     <th>
                       {getMessage('estimate.detail.receiveUser')} <span className="important">*</span>
@@ -1243,13 +1250,12 @@ export default function Estimate({ params }) {
             <div className="table-box-title-wrap">
               <div className="title-wrap">
                 <h3 className="product">{getMessage('estimate.detail.header.specialEstimate')}</h3>
-                <div className="product_tit">{getMessage('estimate.detail.header.specialEstimateProductInfo')}</div>
+                <div className="estimate-check-btn">
-              </div>
-              <div className="left-unit-box">
                   <button className={`estimate-arr-btn down mr5 ${hidden ? '' : 'on'}`} onClick={() => setHidden(false)}></button>
                   <button className={`estimate-arr-btn up ${hidden ? 'on' : ''}`} onClick={() => setHidden(true)}></button>
                 </div>
               </div>
+            </div>
             {/* 견적 특이사항 코드영역시작 */}
             <div className={`estimate-check-wrap ${hidden ? 'hide' : ''}`}>
               <div className="estimate-check-inner">
@@ -1547,6 +1553,7 @@ export default function Estimate({ params }) {
                                         onChangeDisplayItem(e.itemId, item.dispOrder, index)
                                       }
                                     }}
+                                    defaultInputValue={item.itemName}
                                     getOptionLabel={(x) => x.itemName}
                                     getOptionValue={(x) => x.itemId}
                                     isClearable={false}

src/components/estimate/popup/DocDownOptionPop.jsx

@@ -290,18 +290,18 @@ export default function DocDownOptionPop({ planNo, setEstimatePopupOpen }) {
               </div>
             </div>
             <div className="footer-btn-wrap">
+              <button type="button" className="btn-origin navy mr5" onClick={() => handleFileDown()}>
+                {getMessage('estimate.detail.docPopup.docDownload')}
+              </button>
               <button
                 type="button"
-                className="btn-origin grey mr5"
+                className="btn-origin grey"
                 onClick={() => {
                   setEstimatePopupOpen(false)
                 }}
               >
                 {getMessage('estimate.detail.docPopup.close')}
               </button>
-              <button type="button" className="btn-origin navy" onClick={() => handleFileDown()}>
-                {getMessage('estimate.detail.docPopup.docDownload')}
-              </button>
             </div>
           </div>
         </div>

src/components/floor-plan/CanvasMenu.jsx

@@ -34,7 +34,7 @@ import { addedRoofsState, basicSettingState, selectedRoofMaterialSelector, setti
 import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 import { commonUtilsState } from '@/store/commonUtilsAtom'
 import { menusState, menuTypeState } from '@/store/menuAtom'
-import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { estimateState } from '@/store/floorPlanObjectAtom'
 import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 
@@ -86,14 +86,68 @@ export default function CanvasMenu(props) {
   //견적서버튼 노출용
   const [buttonStyle, setButtonStyle] = useState('')
 
-  const onClickNav = (menu) => {
+  // 발전시뮬레이션 메뉴 이동
-    setMenuNumber(menu.index)
+  const { objectNo, pid } = floorPlanState
-    setCurrentMenu(menu.title)
 
+  // 발전시물레이션 Excel/PDF 다운
+  const { promiseGet, promisePost } = useAxios(globalLocale)
+  const pwrGnrSimTypeRecoil = useRecoilValue(pwrGnrSimTypeState)
+
+  const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => {
+    const url = '/api/estimate/excel-download'
+
+    const params = {
+      objectNo: objectNo,
+      planNo: pid,
+      schDownload: donwloadType,
+      schDrawingFlg: drawingFlg,
+      pwrGnrSimType: pwrGnrSimTypeRecoil.type,
+    }
+
+    const options = { responseType: 'blob' }
+    await promisePost({ url: url, data: params, option: options })
+      .then((resultData) => {
+        if (resultData) {
+          let fileName = 'unknow'
+          const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
+          const fileUrl = window.URL.createObjectURL(blob)
+
+          const link = document.createElement('a')
+          link.href = fileUrl
+
+          //서버에서 내려오는 파일명
+          const contentDisposition = resultData.headers['content-disposition']
+          if (contentDisposition) {
+            fileName = contentDisposition.split('filename=')[1].replace(/['"]/g, '')
+          }
+
+          link.download = fileName
+          document.body.appendChild(link)
+          link.click()
+          link.remove()
+          window.URL.revokeObjectURL(fileUrl)
+        }
+      })
+      .catch((error) => {
+        alert('File does not exist.')
+      })
+  }
+
+  const onClickNav = (menu) => {
     switch (menu.index) {
+      case 0:
+        swalFire({
+          text: getMessage('stuff.detail.move.confirmMsg'),
+          type: 'confirm',
+          confirmFn: () => {
+            router.push(`/management/stuff/detail?objectNo=${objectNo}`)
+          },
+        })
+        break
       case 1:
         setType('placementShape')
         onClickPlacementInitialMenu()
+
         break
       case 2:
         setType('outline')
@@ -108,12 +162,35 @@ export default function CanvasMenu(props) {
       case 4:
         setType('module')
         break
+      case 5:
+        setMenuNumber(menu.index)
+        setCurrentMenu(menu.title)
+        router.push(`/floor-plan/estimate/5?pid=${pid}&objectNo=${objectNo}`)
+        break
       case 6:
-        router.push(`/floor-plan/simulator/${menu.index}`)
+        promiseGet({ url: `/api/estimate/${objectNo}/${pid}/detail` }).then((res) => {
+          if (res.status === 200) {
+            const estimateDetail = res.data
+            if (estimateDetail.docNo) {
+              setMenuNumber(menu.index)
+              setCurrentMenu(menu.title)
+              router.push(`/floor-plan/simulator/${menu.index}?pid=${pid}&objectNo=${objectNo}`)
+            } else {
+              swalFire({ text: getMessage('simulator.menu.move.valid1') })
+            }
+          }
+        })
         break
     }
 
-    if (pathname !== '/floor-plan') router.push('/floor-plan')
+    if (menu.index !== 6 && menu.index !== 0) {
+      setMenuNumber(menu.index)
+      setCurrentMenu(menu.title)
+    }
+
+    if (pathname !== '/floor-plan' && pathname !== '/floor-plan/estimate/5') {
+      router.push(`/floor-plan?pid=${pid}&objectNo=${objectNo}`)
+    }
   }
 
   const changeSelectedRoofMaterial = (e) => {
@@ -175,6 +252,7 @@ export default function CanvasMenu(props) {
 
   // 견적서 초기화 버튼
   const handleEstimateReset = () => {
+    return alert('개발전입니다;;;')
     // console.log('estimateRecoilState::', estimateRecoilState)
     //objectNo, planNo
     swalFire({
@@ -215,54 +293,6 @@ export default function CanvasMenu(props) {
     return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)
   }
 
-  // 발전시물레이션 Excel/PDF 다운
-  const { promisePost } = useAxios(globalLocale)
-  const objectRecoil = useRecoilValue(floorPlanObjectState)
-  const pwrGnrSimTypeRecoil = useRecoilValue(pwrGnrSimTypeState)
-
-  const { plans } = usePlan()
-  const plan = plans.find((plan) => plan.isCurrent === true)
-
-  const handleExcelPdfFileDown = async (donwloadType, drawingFlg) => {
-    const url = '/api/estimate/excel-download'
-
-    const params = {
-      objectNo: objectRecoil.floorPlanObjectNo,
-      planNo: plan?.id,
-      schDownload: donwloadType,
-      schDrawingFlg: drawingFlg,
-      pwrGnrSimType: pwrGnrSimTypeRecoil.type,
-    }
-
-    const options = { responseType: 'blob' }
-    await promisePost({ url: url, data: params, option: options })
-      .then((resultData) => {
-        if (resultData) {
-          let fileName = 'unknow'
-          const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
-          const fileUrl = window.URL.createObjectURL(blob)
-
-          const link = document.createElement('a')
-          link.href = fileUrl
-
-          //서버에서 내려오는 파일명
-          const contentDisposition = resultData.headers['content-disposition']
-          if (contentDisposition) {
-            fileName = contentDisposition.split('filename=')[1].replace(/['"]/g, '')
-          }
-
-          link.download = fileName
-          document.body.appendChild(link)
-          link.click()
-          link.remove()
-          window.URL.revokeObjectURL(fileUrl)
-        }
-      })
-      .catch((error) => {
-        alert('File does not exist.')
-      })
-  }
-
   useEffect(() => {
     if (isObjectNotEmpty(estimateRecoilState)) {
       if (estimateRecoilState?.createUser === 'T01') {

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

@@ -1,9 +1,61 @@
-import QSelectBox from '@/components/common/select/QSelectBox'
+import { useEffect, useState, useReducer } from 'react'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { addedRoofsState } from '@/store/settingAtom'
+import { canvasSettingState, pitchSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
+import QSelectBox from '@/components/common/select/QSelectBox'
+import { useModuleSelection } from '@/hooks/module/useModuleSelection'
+import ModuleTabContents from './ModuleTabContents'
+import { useDebounceCallback, useDebounceValue } from 'usehooks-ts'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
 export default function Module({}) {
   const { getMessage } = useMessage()
-  const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
+  const addedRoofs = useRecoilValue(addedRoofsState) //지붕재 선택
+  const [roofTab, setRoofTab] = useState(0) //지붕재 탭
+
+  const {
+    moduleSelectionInitParams,
+    selectedModules,
+    raftCodes,
+    roughnessCodes,
+    windSpeedCodes,
+    managementState,
+    moduleList,
+    installHeight,
+    verticalSnowCover,
+    handleChangeModule,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
+  } = useModuleSelection({ addedRoofs })
+
+  const [inputInstallHeight, setInputInstallHeight] = useState(installHeight)
+  const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState(verticalSnowCover)
+
+  const [debouncedInstallHeight] = useDebounceValue(inputInstallHeight, 500)
+  const [debouncedVerticalSnowCover] = useDebounceValue(inputVerticalSnowCover, 500)
+
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+
+  const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
+    return { ...prevState, ...nextState }
+  }, moduleSelectionData)
+
+  useEffect(() => {
+    handleChangeInstallHeight(debouncedInstallHeight)
+  }, [debouncedInstallHeight])
+
+  useEffect(() => {
+    handleChangeVerticalSnowCover(debouncedVerticalSnowCover)
+  }, [debouncedVerticalSnowCover])
+
+  useEffect(() => {
+    setInputInstallHeight(installHeight)
+    setInputVerticalSnowCover(verticalSnowCover)
+  }, [installHeight, verticalSnowCover])
+
   const moduleData = {
     header: [
       { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
@@ -14,34 +66,15 @@ export default function Module({}) {
       { name: `${getMessage('width')} (mm)`, prop: 'width' },
       { name: `${getMessage('output')} (W)`, prop: 'output' },
     ],
-    rows: [
+    rows: [],
-      {
-        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        height: { name: '1134' },
-        width: { name: '1722' },
-        output: { name: '440' },
-      },
-      {
-        module: {
-          name: 'Re.RISE MS-G3 290',
-          color: '#67A2AA',
-        },
-        height: { name: '1134' },
-        width: { name: '1722' },
-        output: { name: '240' },
-      },
-    ],
   }
-  const surfaceTypes = [
+
-    { id: 1, name: 'Ⅱ', value: 'Ⅱ' },
+  useEffect(() => {}, [roofTab])
-    { id: 2, name: 'Ⅲ ∙ Ⅳ', value: 'Ⅲ ∙ Ⅳ' },
+
-  ]
+  const handleRoofTab = (tab) => {
-  const fiftingHeights = Array.from({ length: 16 }).map((data, index) => {
+    setRoofTab(tab)
-    return { id: index, name: index + 5, value: index + 5 }
+  }
-  })
+
-  const windSpeeds = Array.from({ length: 7 }).map((data, index) => {
-    return { id: index, name: index * 2 + 30, value: index * 2 + 30 }
-  })
   return (
     <>
       <div className="module-table-flex-wrap mb10">
@@ -50,7 +83,16 @@ export default function Module({}) {
             <div className="outline-form mb10">
               <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
               <div className="grid-select">
-                <QSelectBox title={'Search'} option={SelectOption01} />
+                {moduleList && (
+                  <QSelectBox
+                    options={moduleList}
+                    value={moduleSelectionInitParams}
+                    targetKey={'moduleTpCd'}
+                    sourceKey={'itemTp'}
+                    showKey={'itemNm'}
+                    onChange={handleChangeModule}
+                  />
+                )}
               </div>
             </div>
             <div className="roof-module-table">
@@ -67,34 +109,22 @@ export default function Module({}) {
                   </tr>
                 </thead>
                 <tbody>
-                  {moduleData.rows.map((row) => (
+                  {selectedModules.itemList &&
+                    selectedModules.itemList.map((row) => (
                       <>
                         <tr>
-                        {moduleData.header.map((header) => (
-                          <>
-                            {header.type === 'color-box' && (
                           <td>
                             <div className="color-wrap">
-                                  <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
+                              <span className="color-box" style={{ backgroundColor: row.color }}></span>
-                                  <span className="name">{row[header.prop].name}</span>
+                              <span className="name">{row.itemNm}</span>
                             </div>
                           </td>
-                            )}
+                          <td className="al-r">{Number(row.shortAxis).toFixed(0)}</td>
-                            {!header.type && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
+                          <td className="al-r">{Number(row.longAxis).toFixed(0)}</td>
-                          </>
+                          <td className="al-r">{Number(row.wpOut).toFixed(0)}</td>
-                        ))}
                         </tr>
                       </>
                     ))}
-
-                  {Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
-                    <tr key={i}>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                  ))}
                 </tbody>
               </table>
             </div>
@@ -109,7 +139,16 @@ export default function Module({}) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="grid-select" style={{ width: '95.77px', flex: 'none' }}>
-                      <QSelectBox title={'Ⅲ ∙ Ⅳ'} options={surfaceTypes} />
+                      {roughnessCodes.length > 0 && (
+                        <QSelectBox
+                          options={roughnessCodes}
+                          value={managementState}
+                          targetKey={'surfaceTypeValue'}
+                          sourceKey={'clCode'}
+                          showKey={'clCodeNm'}
+                          onChange={handleChangeSurfaceType}
+                        />
+                      )}
                     </div>
                   </div>
                 </div>
@@ -119,7 +158,12 @@ export default function Module({}) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="grid-select mr10">
-                      <QSelectBox title={'13'} options={fiftingHeights} />
+                      <input
+                        type="text"
+                        className="input-origin block"
+                        value={inputInstallHeight}
+                        onChange={(e) => setInputInstallHeight(e.target.value)}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -130,7 +174,17 @@ export default function Module({}) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="grid-select mr10">
-                      <QSelectBox title={'32'} options={windSpeeds} />
+                      {windSpeedCodes.length > 0 && managementState && (
+                        <QSelectBox
+                          title={''}
+                          options={windSpeedCodes}
+                          value={managementState}
+                          targetKey={'standardWindSpeedId'}
+                          sourceKey={'clCode'}
+                          showKey={'clCodeNm'}
+                          onChange={handleChangeWindSpeed}
+                        />
+                      )}
                     </div>
                     <span className="thin">m/s</span>
                   </div>
@@ -141,7 +195,12 @@ export default function Module({}) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="grid-select mr10">
-                      <input type="text" className="input-origin block" />
+                      <input
+                        type="text"
+                        className="input-origin block"
+                        value={inputVerticalSnowCover}
+                        onChange={(e) => setInputVerticalSnowCover(e.target.value)}
+                      />
                     </div>
                     <span className="thin">mm</span>
                   </div>
@@ -153,80 +212,30 @@ export default function Module({}) {
       </div>
       <div className="module-table-box mb10">
         <div className="module-box-tab">
-          <button className="module-btn act">屋根材1</button>
+          {addedRoofs &&
-          <button className="module-btn">屋根材2</button>
+            addedRoofs.map((roof, index) => (
-          <button className="module-btn">屋根材3</button>
+              <button key={index} className={`module-btn ${roofTab === index ? 'act' : ''}`} onClick={() => (roof ? handleRoofTab(index) : null)}>
-          <button className="module-btn">屋根材4</button>
+                {roof !== undefined ? `屋根材${index + 1}` : '-'}
-        </div>
+              </button>
-        <div className="module-table-inner">
+            ))}
-          <div className="module-table-flex-wrap tab2">
-            <div className="module-flex-item">
-              <div className="module-flex-item-tit">{getMessage('modal.module.basic.setting.module.roof.material')}：スレーツ（4寸）</div>
-              <div className="eaves-keraba-table">
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="keraba-flex">
-                      <div className="grid-select">
-                        <QSelectBox title={'455'} option={SelectOption01} />
-                      </div>
-                      <div className="outline-form">
-                        <span>垂木の間隔</span>
-                        <div className="grid-select">
-                          <QSelectBox title={'455'} option={SelectOption01} />
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="grid-select">
-                      <QSelectBox title={'屋根技術研究所'} option={SelectOption01} />
-                    </div>
-                  </div>
-                </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="grid-select">
-                      <QSelectBox title={'スレート金具4'} option={SelectOption01} />
-                    </div>
-                  </div>
-                </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="grid-select">
-                      <QSelectBox title={'構造用合板12mm以上 又はOSB12mm以上'} option={SelectOption01} />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="module-flex-item non-flex">
-              <div className="flex-item-btn-wrap">
-                <button className="btn-frame roof blue">標準施工(I)</button>
-                <button className="btn-frame roof white">多設施工</button>
-                <button className="btn-frame roof">標準施工</button>
-                <button className="btn-frame roof">多設施工（II）</button>
-                <button className="btn-frame roof">強化施工</button>
-              </div>
-              <div className="grid-check-form">
-                <div className="d-check-box pop">
-                  <input type="checkbox" id="ch01" />
-                  <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
-                </div>
-                <div className="d-check-box pop">
-                  <input type="checkbox" id="ch02" />
-                  <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
-                </div>
-              </div>
-            </div>
         </div>
+        {addedRoofs &&
+          addedRoofs.map((roof, index) => (
+            <div style={{ display: roofTab === index ? 'block' : 'none' }} key={index}>
+              <ModuleTabContents
+                key={index}
+                index={index}
+                addRoof={roof}
+                roofTab={roofTab}
+                moduleSelectionData={moduleSelectionData}
+                setModuleSelectionData={setModuleSelectionData}
+                tempModuleSelectionData={tempModuleSelectionData}
+                setTempModuleSelectionData={setTempModuleSelectionData}
+              />
             </div>
+          ))}
       </div>
+
       <div className="module-bottom">
         <div className="module-table-box ">
           <div className="warning-guide">

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

@@ -0,0 +1,437 @@
+import { useEffect, useState, useRef, useReducer } from 'react'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { canvasSettingState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+import { moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function ModuleTabContents({
+  addRoof,
+  roofTab,
+  moduleSelectionData,
+  setModuleSelectionData,
+  tempModuleSelectionData,
+  setTempModuleSelectionData,
+}) {
+  const { getMessage } = useMessage()
+  const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
+  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재
+
+  const globalPitch = useRecoilValue(pitchSelector) //피치
+  const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
+
+  const { findCommonCode } = useCommonCode()
+  const [raftCodes, setRaftCodes] = useState([]) //가대 목록
+  const [trestleList, setTrestleList] = useState([])
+  const [constMthdList, setConstMthdList] = useState([])
+  const [roofBaseList, setRoofBaseList] = useState([])
+  const [constructionList, setConstructionList] = useState([{}]) //공법 목록
+
+  const [selectedRaftBase, setSelectedRaftBase] = useState({}) //선택된 가대
+  const [selectedTrestle, setSelectedTrestle] = useState({}) //선택된 가대
+  const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법
+  const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕
+  const [selectedConstruction, setSelectedConstruction] = useState({}) //선택된 공법
+  const [constructionListParams, setConstructionListParams] = useState({})
+
+  const [trestleParams, setTrestleParams] = useState({}) //서까래, 가대메이커,공법,지붕밑바탕 관련  api호출 파라메터
+
+  const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+
+  const { getTrestleList, getConstructionList } = useMasterController()
+
+  const constructionRef = useRef([])
+  const [cvrYn, setCvrYn] = useState('N')
+  const [snowGdPossYn, setSnowGdPossYn] = useState('N')
+
+  const [cvrChecked, setCvrChecked] = useState(false)
+  const [snowGdChecked, setSnowGdChecked] = useState(false)
+
+  //서까래간격 변경
+  const handleChangeRaftBase = (option) => {
+    setSelectedRaftBase(option)
+    setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode })
+
+    setTrestleList([]) //가대메이커
+    setConstMthdList([]) //공법 초기화
+    setRoofBaseList([]) //지붕밑바탕 초기화
+  }
+
+  //가대메이커 변경
+  const handleChangeTrestle = (option) => {
+    if (option) {
+      setSelectedTrestle(option) //선택값  저장
+      setTrestleParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' })
+    } else {
+      const existTrestle = moduleSelectionData.roofConstructions[roofTab].trestle
+      setSelectedTrestle(existTrestle)
+      setTrestleParams({ ...existTrestle, constMthdCd: '', roofBaseCd: '' })
+    }
+
+    setConstMthdList([]) //공법 초기화
+    setRoofBaseList([]) //지붕밑바탕 초기화
+  }
+
+  //공법 변경
+  const handleChangeConstMthd = (option) => {
+    if (option) {
+      setSelectedConstMthd(option) //선택된값 저장
+      setTrestleParams({ ...trestleParams, constMthdCd: option.constMthdCd, roofBaseCd: '' })
+    } else {
+      const existTrestle = moduleSelectionData.roofConstructions[roofTab].trestle
+      setSelectedConstMthd(existTrestle)
+      setTrestleParams({ ...existTrestle, constMthdCd: '', roofBaseCd: '' })
+    }
+
+    setRoofBaseList([])
+  }
+
+  //지붕밑바탕변경
+  const handleChangeRoofBase = (option) => {
+    if (option) {
+      setConstructionListParams({
+        ...moduleSelectionInitParams,
+        ...trestleParams,
+        roofBaseCd: option.roofBaseCd,
+      })
+      setSelectedRoofBase(option)
+    } else {
+      const existTrestle = moduleSelectionData.roofConstructions[roofTab].trestle
+      setConstructionListParams({
+        ...existTrestle,
+      })
+      setSelectedRoofBase(existTrestle)
+    }
+  }
+
+  const getModuleOptionsListData = async (params) => {
+    const optionsList = await getTrestleList(params)
+    if (optionsList.data.length > 0) {
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd === null) {
+        setTrestleList(optionsList.data)
+        setConstMthdList([])
+        setRoofBaseList([])
+      }
+
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
+        setConstMthdList(optionsList.data)
+        setRoofBaseList([])
+      }
+
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
+        setRoofBaseList(optionsList.data)
+      }
+    }
+  }
+
+  const getConstructionListData = async (params) => {
+    if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+      const optionsList = await getConstructionList(params)
+      setConstructionList(optionsList.data)
+    }
+  }
+
+  const handleConstruction = (index) => {
+    const isPossibleIndex = constructionRef.current
+      .map((el, i) => (el.classList.contains('white') || el.classList.contains('blue') ? i : -1))
+      .filter((index) => index !== -1)
+
+    isPossibleIndex.forEach((index) => {
+      if (constructionRef.current[index].classList.contains('blue')) {
+        constructionRef.current[index].classList.remove('blue')
+        constructionRef.current[index].classList.add('white')
+      }
+    })
+    constructionRef.current[index].classList.remove('white')
+    constructionRef.current[index].classList.add('blue')
+
+    const selectedConstruction = constructionList[index]
+    selectedConstruction.roofIndex = roofTab
+    selectedConstruction.setupCover = false //처마력바 설치 여부
+    selectedConstruction.setupSnowCover = false //눈막이금구 설치 여부
+
+    setCvrYn(selectedConstruction.cvrYn)
+    setSnowGdPossYn(selectedConstruction.snowGdPossYn)
+    setSelectedConstruction(selectedConstruction)
+  }
+
+  useEffect(() => {
+    if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
+      const newRoofConstructions = { roofIndex: roofTab, trestle: selectedRoofBase, construction: selectedConstruction }
+      const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === roofTab)
+
+      if (index > -1) {
+        const newArray = [
+          ...tempModuleSelectionData.roofConstructions.slice(0, index),
+          newRoofConstructions,
+          ...tempModuleSelectionData.roofConstructions.slice(index + 1),
+        ]
+        setTempModuleSelectionData({ roofConstructions: newArray })
+      } else {
+        setTempModuleSelectionData({ roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }] })
+      }
+    }
+  }, [selectedConstruction])
+
+  const handleCvrChecked = () => {
+    setCvrChecked(!cvrChecked)
+  }
+
+  const handleSnowGdChecked = () => {
+    setSnowGdChecked(!snowGdChecked)
+  }
+
+  useEffect(() => {
+    setSelectedConstruction({ ...selectedConstruction, setupCover: cvrChecked })
+  }, [cvrChecked])
+
+  useEffect(() => {
+    setSelectedConstruction({ ...selectedConstruction, setupSnowCover: snowGdChecked })
+  }, [snowGdChecked])
+
+  useEffect(() => {
+    // 202600 경사도
+    const raftCodeList = findCommonCode('203800')
+    //서까래 코드
+    raftCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setRaftCodes(raftCodeList)
+  }, [])
+
+  useEffect(() => {
+    //물건 상세의 데이터를 가지고 초기화 데이터를 만든다
+    if (
+      moduleSelectionInitParams.illuminationTp &&
+      moduleSelectionInitParams.instHt &&
+      moduleSelectionInitParams.stdSnowLd &&
+      moduleSelectionInitParams.stdWindSpeed
+    ) {
+      const isModuleLoaded = moduleSelectionInitParams.hasOwnProperty('moduleTpCd') //모듈컬럼이 있으면 모듈을 변경했다는 내용
+      if (isModuleLoaded) {
+        setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
+        setConstructionList([])
+      }
+    }
+
+    setTempModuleSelectionData({ common: moduleSelectionInitParams })
+  }, [moduleSelectionInitParams])
+
+  useEffect(() => {
+    if (isObjectNotEmpty(trestleParams)) {
+      getModuleOptionsListData(trestleParams)
+    }
+  }, [trestleParams])
+
+  useEffect(() => {
+    if (isObjectNotEmpty(constructionListParams)) {
+      getConstructionListData(constructionListParams)
+    }
+  }, [constructionListParams])
+
+  useEffect(() => {
+    if (isObjectNotEmpty(tempModuleSelectionData)) {
+      setModuleSelectionData(tempModuleSelectionData)
+    }
+  }, [tempModuleSelectionData])
+
+  useEffect(() => {
+    if (isObjectNotEmpty(moduleSelectionData.roofConstructions[roofTab])) {
+      handleChangeTrestle()
+      handleChangeConstMthd()
+    }
+  }, [])
+
+  return (
+    <>
+      <div className="module-table-inner">
+        <div className="module-table-flex-wrap tab2">
+          <div className="module-flex-item">
+            <div className="module-flex-item-tit">
+              {getMessage('modal.module.basic.setting.module.roof.material')}：{roofMaterial.nameJp}（{globalPitch}
+              {globalPitchText}）
+            </div>
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                {roofMaterial && ['C'].includes(roofMaterial.lenAuth) && (
+                  <>
+                    <div className="eaves-keraba-th">L</div>
+                    <div className="eaves-keraba-td">
+                      <div className="keraba-flex">
+                        <div className="outline-form">
+                          <div className="grid-select">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              value={roofMaterial.lenBase}
+                              disabled={roofMaterial.lenAuth === 'R' ? true : false}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {roofMaterial && ['C', 'R'].includes(roofMaterial.raftAuth) && (
+                  <>
+                    <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
+                    <div className="eaves-keraba-td">
+                      <div className="keraba-flex">
+                        <div className="grid-select">
+                          {raftCodes.length > 0 && (
+                            <QSelectBox
+                              options={raftCodes}
+                              value={addRoof}
+                              sourceKey={'clCode'}
+                              targetKey={'raftBaseCd'}
+                              showKey={'clCodeNm'}
+                              disabled={roofMaterial.raftAuth === 'R' ? true : false}
+                              onChange={handleChangeRaftBase}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {roofMaterial && ['C', 'R'].includes(roofMaterial.roofPchAuth) && (
+                  <>
+                    <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
+                    <div className="eaves-keraba-td">
+                      <div className="keraba-flex">
+                        <div className="outline-form">
+                          <span>垂木の間隔</span>
+                          <div className="grid-select">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              value={roofMaterial.hajebichi}
+                              disabled={roofMaterial.roofPchAuth === 'R' ? true : false}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    {trestleList && (
+                      <QSelectBox
+                        title={getMessage('selectbox.title')}
+                        options={trestleList}
+                        value={selectedTrestle}
+                        sourceKey={'trestleMkrCd'}
+                        targetKey={'trestleMkrCd'}
+                        showKey={'trestleMkrCdNm'}
+                        onChange={handleChangeTrestle}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    {constMthdList && (
+                      <QSelectBox
+                        title={getMessage('selectbox.title')}
+                        options={constMthdList}
+                        value={selectedConstMthd}
+                        sourceKey={'constMthdCd'}
+                        targetKey={'constMthdCd'}
+                        showKey={'constMthdCdNm'}
+                        onChange={handleChangeConstMthd}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    {roofBaseList && (
+                      <QSelectBox
+                        title={getMessage('selectbox.title')}
+                        options={roofBaseList}
+                        value={selectedRoofBase}
+                        sourceKey={'roofBaseCd'}
+                        targetKey={'roofBaseCd'}
+                        showKey={'roofBaseCdNm'}
+                        onChange={handleChangeRoofBase}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="module-flex-item non-flex">
+            <div className="flex-item-btn-wrap">
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[0]) && constructionList[0].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[0] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[0]) && constructionList[0].constPossYn === 'Y' ? handleConstruction(0) : null)}
+              >
+                標準施工(Ⅰ)
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[3]) && constructionList[3].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[3] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[3]) && constructionList[3].constPossYn === 'Y' ? handleConstruction(3) : null)}
+              >
+                多設施工
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[1]) && constructionList[1].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[1] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[1]) && constructionList[1].constPossYn === 'Y' ? handleConstruction(1) : null)}
+              >
+                標準施工
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[4]) && constructionList[4].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[4] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[4]) && constructionList[4].constPossYn === 'Y' ? handleConstruction(4) : null)}
+              >
+                多設施工（II）
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[2]) && constructionList[2].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[2] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[2]) && constructionList[2].constPossYn === 'Y' ? handleConstruction(2) : null)}
+              >
+                強化施工
+              </button>
+            </div>
+            <div className="grid-check-form">
+              <div className="d-check-box pop">
+                <input type="checkbox" id="ch01" disabled={cvrYn === 'N' ? true : false} checked={cvrChecked} onChange={handleCvrChecked} />
+                <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+              </div>
+              <div className="d-check-box pop">
+                <input
+                  type="checkbox"
+                  id="ch02"
+                  disabled={snowGdPossYn === 'N' ? true : false}
+                  checked={snowGdChecked}
+                  onChange={handleSnowGdChecked}
+                />
+                <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -1,40 +1,45 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
+import { checkedModuleState } from '@/store/canvasAtom'
+import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
+import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
+  const selectedModules = useRecoilValue(selectedModuleState)
   const [isChidori, setIsChidori] = useState('false')
   const [setupLocation, setSetupLocation] = useState('center')
   const [isMaxSetup, setIsMaxSetup] = useState('false')
-
   const { makeModuleInstArea } = useModuleBasicSetting()
+  const [selectedItems, setSelectedItems] = useState({})
+  const setCheckedModules = useSetRecoilState(checkedModuleState)
 
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+
+  //모듈 배치면 생성
   useEffect(() => {
+    console.log('🚀 ~ Placement ~ moduleSelectionData:', moduleSelectionData)
+    console.log('🚀 ~ Placement ~ selectedModules:', selectedModules)
     makeModuleInstArea()
   }, [])
 
+  //체크된 모듈 데이터
+  useEffect(() => {
+    const checkedModuleIds = Object.keys(selectedItems).filter((key) => selectedItems[key])
+    const moduleArray = selectedModules.itemList.filter((item) => {
+      return checkedModuleIds.includes(item.itemId)
+    })
+    setCheckedModules(moduleArray)
+  }, [selectedItems])
+
   const moduleData = {
     header: [
       { type: 'check', name: '', prop: 'check', width: 70 },
       { type: 'color-box', name: getMessage('module'), prop: 'module' },
       { type: 'text', name: `${getMessage('output')} (W)`, prop: 'output', width: 70 },
     ],
-    rows: [
+    rows: [],
-      {
-        check: false,
-        module: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        output: { name: '440' },
-      },
-      {
-        check: false,
-        module: {
-          name: 'Re.RISE MS-G3 290',
-          color: '#67A2AA',
-        },
-        output: { name: '240' },
-      },
-    ],
   }
 
   const handleChangeChidori = (e) => {
@@ -48,8 +53,6 @@ const Placement = forwardRef((props, refs) => {
   }
 
   const handleMaxSetup = (e) => {
-    console.log(e.target.checked)
-
     if (e.target.checked) {
       setIsMaxSetup('true')
       refs.isMaxSetup.current = 'true'
@@ -59,6 +62,11 @@ const Placement = forwardRef((props, refs) => {
     }
   }
 
+  //체크된 모듈 아이디 추출
+  const handleSelectedItem = (e) => {
+    setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
+  }
+
   return (
     <>
       <div className="module-table-flex-wrap mb10">
@@ -83,40 +91,26 @@ const Placement = forwardRef((props, refs) => {
                   </tr>
                 </thead>
                 <tbody>
-                  {moduleData.rows.map((row) => (
+                  {selectedModules.itemList &&
+                    selectedModules.itemList.map((item) => (
                       <>
                         <tr>
-                        {moduleData.header.map((header) => (
-                          <>
-                            {header.type === 'color-box' && (
-                              <td>
-                                <div className="color-wrap">
-                                  <span className="color-box" style={{ backgroundColor: row[header.prop].color }}></span>
-                                  <span className="name">{row[header.prop].name}</span>
-                                </div>
-                              </td>
-                            )}
-                            {header.type === 'check' && (
                           <td className="al-c">
                             <div className="d-check-box no-text pop">
-                                  <input type="checkbox" id="ch02" />
+                              <input type="checkbox" id={item.itemId} name={item.itemId} onChange={handleSelectedItem} />
-                                  <label htmlFor="ch02"></label>
+                              <label htmlFor={item.itemId}></label>
                             </div>
                           </td>
-                            )}
+                          <td>
-                            {header.type && header.type !== 'color-box' && header.type !== 'check' && (
+                            <div className="color-wrap">
-                              <td className="al-r">{row[header.prop].name}</td>
+                              <span className="color-box" style={{ backgroundColor: item.color }}></span>
-                            )}
+                              <span className="name">{item.itemNm}</span>
-                          </>
+                            </div>
-                        ))}
+                          </td>
+                          <td className="al-r">{item.wpOut}</td>
                         </tr>
                       </>
                     ))}
-                  <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
                 </tbody>
               </table>
             </div>

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -1,23 +1,106 @@
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { useState } from 'react'
+import { useState, useEffect, useContext } from 'react'
 import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect'
 import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
 import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
+import PassivityCircuitAllocation from './step/type/PassivityCircuitAllocation'
+import { useAxios } from '@/hooks/useAxios'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { get } from 'react-hook-form'
+import { correntObjectNoState } from '@/store/settingAtom'
+import { useRecoilValue } from 'recoil'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
 
+const ALLOCATION_TYPE = {
+  AUTO: 'auto',
+  PASSIVITY: 'passivity',
+}
 export default function CircuitTrestleSetting({ id }) {
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
+  // 탭 번호 1: 파워 컨디셔너 선택(+수동 설정)
+  // 탭 번호 2: 회로 할당
   const [tabNum, setTabNum] = useState(1)
+  const [allocationType, setAllocationType] = useState(ALLOCATION_TYPE.AUTO)
+  const [makers, setMakers] = useState([])
+  const [series, setSeries] = useState([])
+  const [models, setModels] = useState([])
+  const [selectedMaker, setSelectedMaker] = useState(null)
+  const [selectedModels, setSelectedModels] = useState(null)
+  const [selectedSeries, setSelectedSeries] = useState(null)
+  const correntObjectNo = useRecoilValue(correntObjectNoState)
+  const { getPcsMakerList } = useMasterController()
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const apply = () => {
+    closePopup(id)
+  }
+
+  useEffect(() => {
+    getPcsMakerList().then((res) => {
+      setMakers(res.data)
+    })
+    if (!managementState) {
+      console.log('🚀 ~ useEffect ~ managementState:', managementState)
+      setManagementState(managementStateLoaded)
+    }
+    console.log('🚀 ~ useEffect ~ managementState:', managementState)
+    // promiseGet({ url: `/api/object/${correntObjectNo}/detail` }).then((res) => {
+    //   console.log('🚀 ~ useEffect ~ /api/object/${correntObjectNo}/detail:', res)
+    //   // coldRegionFlg-한랭지사양, conType// 계약조건(잉여~,전량)
+    // })
+  }, [])
+
+  useEffect(() => {
+    if (selectedMaker) {
+      getPcsMakerList(selectedMaker).then((res) => {
+        const series = res.data.map((series) => {
+          return { ...series, selected: false }
+        })
+        setSeries(series)
+      })
+    }
+  }, [selectedMaker])
+
+  useEffect(() => {
+    console.log('🚀 ~ CircuitTrestleSetting ~ series:', series)
+    const selectedSeries = series.filter((s) => s.selectd).map((s) => s.pcsSerCd)
+    if (selectedSeries.length > 0) {
+      getPcsMakerList(selectedSeries).then((res) => {
+        setModels(res.data)
+      })
+    }
+  }, [series])
+  // 회로 할당 유형
   const [circuitAllocationType, setCircuitAllocationType] = useState(1)
+
+  const powerConditionalSelectProps = {
+    tabNum,
+    setTabNum,
+    makers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    selectedSeries,
+    setSelectedSeries,
+    models,
+    setModels,
+    selectedModels,
+    setSelectedModels,
+    managementState,
+  }
   const circuitProps = {
+    tabNum,
+    setTabNum,
     circuitAllocationType,
     setCircuitAllocationType,
   }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
-      <div className={`modal-pop-wrap lx-2`}>
+      <div className={`modal-pop-wrap l-2`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -26,36 +109,45 @@ export default function CircuitTrestleSetting({ id }) {
         </div>
         <div className="modal-body">
           <div className="roof-module-tab">
-            <div className={`module-tab-bx ${tabNum === 1 || tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
+            <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
-              {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
+            <span className={`tab-arr ${tabNum === 2 ? 'act' : ''}`}></span>
+            <div className={`module-tab-bx ${tabNum === 2 ? 'act' : ''}`}>
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
             </div>
-            <span className={`tab-arr ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}></span>
-            <div className={`module-tab-bx ${tabNum === 2 || tabNum === 3 ? 'act' : ''}`}>
-              {getMessage('modal.circuit.trestle.setting.circuit.allocation')}
           </div>
-            <span className={`tab-arr ${tabNum === 3 ? 'act' : ''}`}></span>
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
-            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
-          </div>
+          {tabNum === 2 && <StepUp />}
-          {tabNum === 1 && <PowerConditionalSelect />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
-          {tabNum === 2 && <CircuitAllocation {...circuitProps} />}
-          {tabNum === 3 && <StepUp />}
             <div className="grid-btn-wrap">
-            {tabNum !== 1 && (
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
-              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
+              </button>
+              <button className="btn-frame modal act" onClick={() => setAllocationType(ALLOCATION_TYPE.PASSIVITY)}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
+              </button>
+            </div>
+          )}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setAllocationType(ALLOCATION_TYPE.AUTO)}>
                 {getMessage('modal.common.prev')}
               </button>
-            )}
+              <button className="btn-frame modal act" onClick={() => setTabNum(2)}>
-            {tabNum !== 3 && (
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
-              <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
-                Next
               </button>
-            )}
-            {tabNum === 3 && (
-              <button className="btn-frame modal act">
-                {`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
-              </button>
-            )}
             </div>
+          )}
+          {tabNum === 2 && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
+                {getMessage('modal.common.prev')}
+              </button>
+              <button className="btn-frame modal act" onClick={() => apply()}>
+                {getMessage('modal.common.save')}({getMessage('modal.circuit.trestle.setting.circuit.allocation')})
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </WithDraggable>

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -1,15 +1,31 @@
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
+import { globalLocaleStore } from '@/store/localeAtom'
 import { useState } from 'react'
+import { useRecoilValue } from 'recoil'
 
 const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
 
-export default function PowerConditionalSelect({ setTabNum }) {
+export default function PowerConditionalSelect(props) {
+  const {
+    makers,
+    selectedMaker,
+    setSelectedMaker,
+    series,
+    setSeries,
+    selectedSeries,
+    setSelectedSeries,
+    models,
+    selectedModels,
+    tabNum,
+    setTabNum,
+    managementState,
+  } = props
   const { getMessage } = useMessage()
   const [selectedRowIndex, setSelectedRowIndex] = useState(null)
   const [powerConditions, setPowerConditions] = useState([])
-  const seriesData = {
+  const globalLocale = useRecoilValue(globalLocaleStore)
-    header: [
+  const modelHeader = [
     { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
     {
       name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
@@ -36,54 +52,40 @@ export default function PowerConditionalSelect({ setTabNum }) {
       width: '10%',
       prop: 'outputCurrent',
     },
-    ],
+  ]
-    rows: [
+  const onCheckSeries = (series) => {
-      {
+    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
-        name: { name: 'PCSオプションマスター', color: '#AA6768' },
-        ratedOutput: { name: '2' },
-        circuitAmount: { name: '2' },
-        maxConnection: { name: '-' },
-        maxOverload: { name: '-' },
-        outputCurrent: { name: '-' },
-      },
-      {
-        name: { name: 'HQJP-KA40-5', color: '#AA6768' },
-        ratedOutput: { name: '2' },
-        circuitAmount: { name: '2' },
-        maxConnection: { name: '-' },
-        maxOverload: { name: '-' },
-        outputCurrent: { name: '-' },
-      },
-      {
-        name: { name: 'Re.RISE-G3 440', color: '#AA6768' },
-        ratedOutput: { name: '2' },
-        circuitAmount: { name: '2' },
-        maxConnection: { name: '-' },
-        maxOverload: { name: '-' },
-        outputCurrent: { name: '-' },
-      },
-    ],
   }
   return (
     <>
       <div className="outline-form mb15">
-        <span className="mr10">分類 (余剰)</span>
+        <span className="mr10">
+          {getMessage('common.type')} ({getMessage(managementState?.conType === '0' ? 'stuff.detail.conType0' : 'stuff.detail.conType1')})
+        </span>
         <div className="grid-select mr10">
-          <QSelectBox title={'HQJPシリーズ'} option={SelectOption01} />
+          <QSelectBox
+            title={'PCS Maker'}
+            options={makers}
+            showKey={globalLocale === 'ko' ? 'pcsMkrNm' : 'pcsMkrNmJp'}
+            sourceKey="pcsMkrCd"
+            targetKey="pcsMkrCd"
+            value={selectedMaker}
+            onChange={(option) => setSelectedMaker(option)}
+          />
         </div>
-        <span className="thin">寒冷地仕様</span>
+        {managementState?.conType === '1' && (
+          <span className="thin">{getMessage('modal.circuit.trestle.setting.power.conditional.select.cold.region')}</span>
+        )}
       </div>
       <div className="module-table-box mb10">
         <div className="module-table-inner">
-          <div className="circuit-check-inner">
+          <div className="circuit-check-inner overflow">
-            <div className="d-check-box pop mb15 sel">
+            {series?.map((series, index) => (
-              <input type="checkbox" id="ch01" />
-              <label htmlFor="ch01">屋内PCS（HQJP-KA-5シリーズ）</label>
-            </div>
               <div className="d-check-box pop sel">
-              <input type="checkbox" id="ch02" />
+                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
-              <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
+                <label htmlFor={`"ch0"${index}`}>{globalLocale === 'ko' ? series.pcsSerNm : series.pcsSerNmJp}</label>
               </div>
+            ))}
           </div>
         </div>
       </div>
@@ -94,7 +96,7 @@ export default function PowerConditionalSelect({ setTabNum }) {
               <table>
                 <thead>
                   <tr>
-                    {seriesData.header.map((header) => (
+                    {modelHeader.map((header) => (
                       <th key={header.prop} style={{ width: header.width }}>
                         {header.name}
                       </th>
@@ -102,10 +104,12 @@ export default function PowerConditionalSelect({ setTabNum }) {
                   </tr>
                 </thead>
                 <tbody>
-                  {seriesData.rows.map((row, index) => (
+                  {models
+                    ?.filter((model) => model.series === selectedSeries?.code)
+                    .map((row, index) => (
                       <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
-                      {seriesData.header.map((header) => (
+                        {modelHeader.map((header) => (
-                        <td>{row[header.prop].name}</td>
+                          <td>{row[header.prop]}</td>
                         ))}
                       </tr>
                     ))}
@@ -117,15 +121,11 @@ export default function PowerConditionalSelect({ setTabNum }) {
             <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
           </div>
           <div className="circuit-data-form">
+            {selectedModels?.map((model) => (
               <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
+                {model.name} <button className="del"></button>
-            </span>
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
-            </span>
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
               </span>
+            ))}
           </div>
         </div>
       </div>
@@ -141,6 +141,14 @@ export default function PowerConditionalSelect({ setTabNum }) {
           </label>
         </div>
       </div>
+      {/* <div className="grid-btn-wrap">
+        <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
+          {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
+        </button>
+        <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
+          {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
+        </button>
+      </div> */}
     </>
   )
 }

src/components/floor-plan/modal/circuitTrestle/step/StepUp.jsx

@@ -1,20 +1,24 @@
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
+import { useState } from 'react'
 
 const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }]
 
 export default function StepUp({}) {
   const { getMessage } = useMessage()
+  const [moduleTab, setModuleTab] = useState(1)
+  const [arrayLength, setArrayLength] = useState(3) //module-table-inner의 반복 개수
   return (
     <>
       <div className="properties-setting-wrap outer">
-        <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
         <div className="circuit-overflow">
-          <div className="module-table-box mb10">
+          {/* 3개일때 className = by-max */}
-            <div className="module-table-inner">
+          <div className={`module-table-box ${arrayLength === 3 ? 'by-max' : ''}`}>
+            {Array.from({ length: arrayLength }).map((_, idx) => (
+              <div key={idx} className="module-table-inner">
                 <div className="mb-box">
                   <div className="circuit-table-tit">HQJP-KA55-5</div>
-                <div className="roof-module-table overflow-y">
+                  <div className="roof-module-table overflow-y min">
                     <table>
                       <thead>
                         <tr>
@@ -23,6 +27,10 @@ export default function StepUp({}) {
                         </tr>
                       </thead>
                       <tbody>
+                        <tr className="on">
+                          <td className="al-r">10</td>
+                          <td className="al-r">0</td>
+                        </tr>
                         <tr>
                           <td className="al-r">10</td>
                           <td className="al-r">0</td>
@@ -47,14 +55,22 @@ export default function StepUp({}) {
                     </table>
                   </div>
                 </div>
+                <div className="module-box-tab mb10">
+                  <button className={`module-btn ${moduleTab === 1 ? 'act' : ''}`} onClick={() => setModuleTab(1)}>
+                    {getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}
+                  </button>
+                  <button className={`module-btn ${moduleTab === 2 ? 'act' : ''}`} onClick={() => setModuleTab(2)}>
+                    {getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}
+                  </button>
+                </div>
                 <div className="circuit-table-flx-wrap">
+                  {moduleTab === 1 && (
                     <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div>
+                      <div className="roof-module-table min mb10">
-                  <div className="roof-module-table mb10">
                         <table>
                           <thead>
                             <tr>
-                          <th style={{ width: '140px' }}>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
+                              <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
                               <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}</th>
                               <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
                             </tr>
@@ -65,160 +81,14 @@ export default function StepUp({}) {
                               <td className="al-r">4</td>
                               <td className="al-r">0</td>
                             </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
                           </tbody>
                         </table>
                       </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
                     </div>
+                  )}
+                  {moduleTab === 2 && (
                     <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.step.up.allocation.option')}</div>
+                      <div className="roof-module-table min mb10">
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>{getMessage('modal.circuit.trestle.setting.power.conditional.select.name')}</th>
-                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">{getMessage('modal.common.add')}</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="circuit-count-input">
-                <span className="normal-font">{getMessage('modal.module.basic.setting.module.cotton.classification')}</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路</span>
-                <span className="normal-font">(二重昇圧回路数</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路)</span>
-              </div>
-            </div>
-          </div>
-          <div className="module-table-box mb10">
-            <div className="module-table-inner">
-              <div className="mb-box">
-                <div className="circuit-table-tit">HQJP-KA55-5</div>
-                <div className="roof-module-table overflow-y">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>シリアル枚数</th>
-                        <th>総回路数</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <div className="circuit-table-flx-wrap">
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">接続する</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th style={{ width: '140px' }}>名称</th>
-                          <th>回路数</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">昇圧オプション</div>
-                  <div className="roof-module-table mb10">
                         <table>
                           <thead>
                             <tr>
@@ -231,165 +101,14 @@ export default function StepUp({}) {
                               <td className="al-c">-</td>
                               <td className="al-c">-</td>
                             </tr>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="circuit-count-input">
-                <span className="normal-font">綿調道区分</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路</span>
-                <span className="normal-font">(二重昇圧回路数</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路)</span>
-              </div>
-            </div>
-          </div>
-          <div className="module-table-box ">
-            <div className="module-table-inner">
-              <div className="mb-box">
-                <div className="circuit-table-tit">HQJP-KA55-5</div>
-                <div className="roof-module-table overflow-y">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>シリアル枚数</th>
-                        <th>総回路数</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
-                      <tr>
-                        <td className="al-r">10</td>
-                        <td className="al-r">0</td>
-                      </tr>
                           </tbody>
                         </table>
                       </div>
                     </div>
-              <div className="circuit-table-flx-wrap">
+                  )}
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">接続する</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th style={{ width: '140px' }}>名称</th>
-                          <th>回路数</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
-                          <td className="al-r">0</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div className="circuit-table-flx-box">
-                  <div className="bold-font mb10">昇圧オプション</div>
-                  <div className="roof-module-table mb10">
-                    <table>
-                      <thead>
-                        <tr>
-                          <th>名称</th>
-                          <th>昇圧回路数</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                        <tr>
-                          <td className="al-c">-</td>
-                          <td className="al-c">-</td>
-                        </tr>
-                      </tbody>
-                    </table>
-                  </div>
-                  <div className="bottom-wrap">
-                    <div className="circuit-right-wrap mb10">
-                      <button className="btn-frame self mr5">追加</button>
-                    </div>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="circuit-count-input">
-                <span className="normal-font">綿調道区分</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路</span>
-                <span className="normal-font">(二重昇圧回路数</span>
-                <div className="input-grid mr5" style={{ width: '40px' }}>
-                  <input type="text" className="input-origin block" />
-                </div>
-                <span className="normal-font">回路)</span>
                 </div>
               </div>
+            ))}
           </div>
         </div>
         <div className="slope-wrap">
@@ -398,17 +117,11 @@ export default function StepUp({}) {
               {getMessage('modal.circuit.trestle.setting.step.up.allocation.select.monitor')}
             </span>
             <div className="grid-select mr10">
-              <QSelectBox title={'電力検出ユニット (モニター付き)'} option={SelectOption01} />
+              <QSelectBox title={'電力検出ユニット (モニター付き)'} options={SelectOption01} />
             </div>
           </div>
         </div>
       </div>
-      {/*<div className="grid-btn-wrap">*/}
-      {/*  <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>*/}
-      {/*    以前*/}
-      {/*  </button>*/}
-      {/*  <button className="btn-frame modal act">保存 (仮割り当て)</button>*/}
-      {/*</div>*/}
     </>
   )
 }

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -5,6 +5,7 @@ export default function PassivityCircuitAllocation() {
   const moduleData = {
     header: [
       { name: getMessage('modal.panel.batch.statistic.roof.shape'), prop: 'roofShape' },
+      { name: getMessage('modal.circuit.trestle.setting.circuit'), prop: 'circuit' },
       {
         name: getMessage('Q.TRON M-G2'),
         prop: 'moduleName',
@@ -17,11 +18,13 @@ export default function PassivityCircuitAllocation() {
     rows: [
       {
         roofShape: { name: 'M 1' },
+        circuit: { name: 'M 1' },
         moduleName: { name: '8' },
         powerGeneration: { name: '3,400' },
       },
       {
         roofShape: { name: 'M 1' },
+        circuit: { name: 'M 1' },
         moduleName: { name: '8' },
         powerGeneration: { name: '3,400' },
       },
@@ -29,6 +32,8 @@ export default function PassivityCircuitAllocation() {
   }
   return (
     <>
+      <div className="properties-setting-wrap outer">
+        <div className="setting-tit">{getMessage('modal.circuit.trestle.setting.circuit.allocation')}</div>
         <div className="module-table-box mb10">
           <div className="module-table-inner">
             <div className="bold-font mb10">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}</div>
@@ -46,7 +51,9 @@ export default function PassivityCircuitAllocation() {
                   {moduleData.rows.map((row, index) => (
                     <tr key={index}>
                       {moduleData.header.map((header) => (
-                      <td key={header.prop}>{row[header.prop].name}</td>
+                        <td className="al-c" key={header.prop}>
+                          {row[header.prop].name}
+                        </td>
                       ))}
                     </tr>
                   ))}
@@ -87,6 +94,7 @@ export default function PassivityCircuitAllocation() {
               <div className="input-grid mr5" style={{ width: '70px' }}>
                 <input type="text" className="input-origin block" />
               </div>
+              <button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
             </div>
           </div>
           <div className="circuit-right-wrap">
@@ -96,7 +104,7 @@ export default function PassivityCircuitAllocation() {
             <button className="btn-frame roof mr5">
               {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
             </button>
-          <button className="btn-frame roof">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix')}</button>
+          </div>
         </div>
       </div>
     </>

src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx

@@ -108,13 +108,16 @@ export default function FlowDirectionSetting(props) {
                 </div>
                 <div className="grid-select ">
                   <QSelectBox
-                    title={selectedOrientation.name}
+                    value={selectedOrientation}
                     options={orientations}
                     onChange={(e) => {
                       setType(FLOW_DIRECTION_TYPE.EIGHT_AZIMUTH)
                       setSelectedOrientation(e)
                       setCompasDeg(e.value)
                     }}
+                    showKey={'name'}
+                    targetKey={'value'}
+                    sourceKey={'value'}
                   />
                 </div>
               </div>

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

@@ -29,9 +29,12 @@ export default function DotLineGrid(props) {
   const { SelectOptions, currentSetting, setCurrentSetting, dotLineGridSettingState, setSettingModalGridOptions, setDotLineGridSettingState } =
     useCanvasSetting()
 
+  const [copyCurrentSetting, setCopyCurrentSetting] = useState({ ...currentSetting })
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     console.log('DotLineGrid useEffect 실행')
+
     setSettingsDataSave({ ...settingsData })
 
     // dimension 값에 맞는 옵션을 선택
@@ -57,7 +60,7 @@ export default function DotLineGrid(props) {
 
   const handleCheckBoxChange = (e) => {
     const { value, checked } = e.target
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         [value]: checked,
@@ -66,23 +69,23 @@ export default function DotLineGrid(props) {
   }
 
   const handleSave = async () => {
-    if (!currentSetting.DOT && !currentSetting.LINE) {
+    /*if (!currentSetting.DOT && !currentSetting.LINE) {
       swalFire({ text: '배치할 그리드를 설정해주세요.' })
       return
-    }
+    }*/
 
     setDotLineGridSettingState((prev) => {
       return {
         ...prev,
         INTERVAL: {
-          type: currentSetting.INTERVAL.type,
+          type: copyCurrentSetting.INTERVAL.type,
-          horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
+          horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
-          verticalInterval: currentSetting.INTERVAL.verticalInterval,
+          verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
-          ratioInterval: currentSetting.INTERVAL.ratioInterval,
+          ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
-          dimension: currentSetting.INTERVAL.dimension,
+          dimension: copyCurrentSetting.INTERVAL.dimension,
         },
-        DOT: currentSetting.DOT,
+        DOT: copyCurrentSetting.DOT,
-        LINE: currentSetting.LINE,
+        LINE: copyCurrentSetting.LINE,
       }
       //setDotLineGridSettingState({ ...currentSetting })
     })
@@ -90,16 +93,18 @@ export default function DotLineGrid(props) {
     setSettingsData({
       ...settingsData,
       INTERVAL: {
-        type: currentSetting.INTERVAL.type,
+        type: copyCurrentSetting.INTERVAL.type,
-        horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
+        horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
-        verticalInterval: currentSetting.INTERVAL.verticalInterval,
+        verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
-        ratioInterval: currentSetting.INTERVAL.ratioInterval,
+        ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
-        dimension: currentSetting.INTERVAL.dimension,
+        dimension: copyCurrentSetting.INTERVAL.dimension,
       },
-      DOT: currentSetting.DOT,
+      DOT: copyCurrentSetting.DOT,
-      LINE: currentSetting.LINE,
+      LINE: copyCurrentSetting.LINE,
     })
 
+    setCurrentSetting({ ...copyCurrentSetting })
+
     setIsShow(false)
     closePopup(id, isConfig)
   }
@@ -107,7 +112,7 @@ export default function DotLineGrid(props) {
   const handleRadioChange = (e) => {
     const { value, name, checked, selected } = e.target
 
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -120,7 +125,7 @@ export default function DotLineGrid(props) {
 
   const changeInput = (value, e) => {
     const { name } = e.target
-    setCurrentSetting((prev) => {
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -133,7 +138,8 @@ export default function DotLineGrid(props) {
 
   const changeDimension = (result) => {
     const { value } = result
-    setCurrentSetting((prev) => {
+    setSelectOption(result)
+    setCopyCurrentSetting((prev) => {
       return {
         ...prev,
         INTERVAL: {
@@ -146,7 +152,7 @@ export default function DotLineGrid(props) {
 
   // 초기화
   const reset = () => {
-    canvas
+    /*canvas
       ?.getObjects()
       .filter((obj) => obj.name === 'lineGrid')
       .forEach((obj) => canvas?.remove(obj))
@@ -154,9 +160,9 @@ export default function DotLineGrid(props) {
       ?.getObjects()
       .filter((obj) => obj.name === 'dotGrid')
       .forEach((obj) => canvas?.remove(obj))
-
+*/
     // resetDotLineGridSetting()
-    setCurrentSetting({
+    setCopyCurrentSetting({
       INTERVAL: {
         type: 2, // 1: 가로,세로 간격 수동, 2: 비율 간격
         ratioInterval: 910,
@@ -188,11 +194,11 @@ export default function DotLineGrid(props) {
         <div className="modal-body">
           <div className="grid-check-form">
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={currentSetting.DOT} />
+              <input type="checkbox" id="ch01" value={TYPE.DOT} onChange={handleCheckBoxChange} checked={copyCurrentSetting.DOT} />
               <label htmlFor="ch01">{getMessage('modal.canvas.setting.grid.dot.line.setting.dot.display')}</label>
             </div>
             <div className="d-check-box pop">
-              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={currentSetting.LINE} />
+              <input type="checkbox" id="ch02" value={TYPE.LINE} onChange={handleCheckBoxChange} checked={copyCurrentSetting.LINE} />
               <label htmlFor="ch02">{getMessage('modal.canvas.setting.grid.dot.line.setting.line.display')}</label>
             </div>
           </div>
@@ -205,8 +211,8 @@ export default function DotLineGrid(props) {
                   id="ra01"
                   value={1}
                   onChange={handleRadioChange}
-                  checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 1}
+                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
-                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
+                  readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
                 />
                 <label htmlFor="ra01"></label>
               </div>
@@ -217,7 +223,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`horizontalInterval`}
-                    value={currentSetting.INTERVAL.horizontalInterval}
+                    value={copyCurrentSetting.INTERVAL.horizontalInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
@@ -230,7 +236,7 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`verticalInterval`}
-                    value={currentSetting.INTERVAL.verticalInterval}
+                    value={copyCurrentSetting.INTERVAL.verticalInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
@@ -245,8 +251,8 @@ export default function DotLineGrid(props) {
                   id="ra02"
                   value={2}
                   onChange={handleRadioChange}
-                  checked={(currentSetting.DOT || currentSetting.LINE) && currentSetting.INTERVAL.type === 2}
+                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
-                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
+                  readOnly={!copyCurrentSetting.DOT && !copyCurrentSetting.LINE}
                 />
                 <label htmlFor="ra02"></label>
               </div>
@@ -257,14 +263,23 @@ export default function DotLineGrid(props) {
                     type="text"
                     className="input-origin"
                     name={`ratioInterval`}
-                    value={currentSetting.INTERVAL.ratioInterval}
+                    value={copyCurrentSetting.INTERVAL.ratioInterval}
                     onChange={(e) => onlyNumberInputChange(e, changeInput)}
                   />
                 </div>
                 <span>mm</span>
               </div>
               <div className="grid-select">
-                <QSelectBox options={SelectOptions} onChange={changeDimension} value={selectOption} />
+                {selectOption && (
+                  <QSelectBox
+                    options={SelectOptions}
+                    onChange={changeDimension}
+                    value={selectOption}
+                    showKey={'name'}
+                    targetKey={'id'}
+                    sourceKey={'id'}
+                  />
+                )}
               </div>
             </div>
           </div>

src/components/floor-plan/modal/module/PanelEdit.jsx

@@ -11,6 +11,7 @@ import * as turf from '@turf/turf'
 import { POLYGON_TYPE } from '@/common/common'
 import { useModal } from '@nextui-org/react'
 import { useModule } from '@/hooks/module/useModule'
+import { useSwal } from '@/hooks/useSwal'
 
 export const PANEL_EDIT_TYPE = {
   MOVE: 'move',
@@ -31,6 +32,7 @@ export default function PanelEdit(props) {
   const [direction, setDirection] = useState('up')
   const { getMessage } = useMessage()
   const canvas = useRecoilValue(canvasState)
+  const { swalFire } = useSwal()
   const { moduleMove, moduleCopy, moduleMultiMove, moduleMultiCopy, moduleMoveAll, moduleCopyAll } = useModule()
 
   useEffect(() => {
@@ -42,6 +44,14 @@ export default function PanelEdit(props) {
 
   //모듈 이동 적용
   const handleApply = () => {
+    if (length <= 0) {
+      swalFire({
+        title: getMessage('common.message.please.input.over', [1]),
+        type: 'alert',
+        icon: 'error',
+      })
+      return
+    }
     switch (type) {
       case PANEL_EDIT_TYPE.MOVE:
         moduleMove(length, direction)

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -10,6 +10,10 @@ import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementSha
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { globalLocaleStore } from '@/store/localeAtom'
+import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
+import { currentAngleTypeSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { getDegreeByChon } from '@/util/canvas-util'
+import { onlyNumberWithDotInputChange } from '@/util/input-utils'
 
 export default function RoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -28,10 +32,13 @@ export default function RoofAllocationSetting(props) {
     handleChangeRaft,
     handleChangeLayout,
     currentRoofList,
+    handleChangeInput,
   } = useRoofAllocationSetting(id)
+  const pitchText = useRecoilValue(pitchTextSelector)
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
   const globalLocale = useRecoilValue(globalLocaleStore)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   useEffect(() => {
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList.map((raft) => ({ ...raft, name: raft.clCodeNm })))
@@ -104,13 +111,35 @@ export default function RoofAllocationSetting(props) {
                           {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
                         </div>
                       </div>
+                      <div className="block-box">
+                        <div className="flex-ment">
+                          <span>{getMessage('slope')}</span>
+                          <div className="input-grid" style={{ width: '214px' }}>
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              onChange={(e) => {
+                                handleChangeInput(e, 'pitch', index)
+                              }}
+                              defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                            />
+                          </div>
+                          <span>{pitchText}</span>
+                        </div>
+                      </div>
                       {(roof.widAuth || roof.lenAuth) && (
                         <div className="block-box">
                           {roof.widAuth && (
                             <div className="flex-ment">
                               <span>W</span>
                               <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  defaultValue={roof.width}
+                                  onChange={(e) => handleChangeInput(e, 'width', index)}
+                                  readOnly={roof.widAuth === 'R'}
+                                />
                               </div>
                             </div>
                           )}
@@ -118,7 +147,13 @@ export default function RoofAllocationSetting(props) {
                             <div className="flex-ment">
                               <span>L</span>
                               <div className="input-grid" style={{ width: '100px' }}>
-                                <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  defaultValue={roof.length}
+                                  onChange={(e) => handleChangeInput(e, 'length', index)}
+                                  readOnly={roof.lenAuth === 'R'}
+                                />
                               </div>
                             </div>
                           )}
@@ -153,6 +188,7 @@ export default function RoofAllocationSetting(props) {
                                   <input
                                     type="text"
                                     className="input-origin block"
+                                    onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
                                     value={parseInt(roof.hajebichi)}
                                     readOnly={roof.roofPchAuth === 'R'}
                                   />

src/components/floor-plan/modal/roofShape/passivity/Gable.jsx

@@ -1,21 +1,12 @@
 import { useMessage } from '@/hooks/useMessage'
 import { useRecoilValue } from 'recoil'
-import { ANGLE_TYPE, currentAngleTypeSelector } from '@/store/canvasAtom'
+import { currentAngleTypeSelector } from '@/store/canvasAtom'
 
-export default function Gable({ offsetRef, pitchRef, pitchText }) {
+export default function Gable({ offsetRef }) {
   const { getMessage } = useMessage()
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   return (
     <>
-      <div className="outline-form mb10">
-        <span className="mr10" style={{ width: '63px' }}>
-          {getMessage('slope')}
-        </span>
-        <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={currentAngleType === ANGLE_TYPE.SLOPE ? 4 : 21.8} ref={pitchRef} />
-        </div>
-        <span className="thin">{pitchText}</span>
-      </div>
       <div className="outline-form mb10">
         <span className="mr10" style={{ width: '63px' }}>
           {getMessage('gable.offset')}

src/components/header/Header.jsx

@@ -69,20 +69,20 @@ export default function Header(props) {
           setSelectOptions(
             userSession.storeId === 'T01'
               ? [
-                  { id: 0, name: getMessage('site.header.link1') },
+                  { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
-                  { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                  { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
-                  { id: 2, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                  { id: 2, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                   { id: 3, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                 ]
               : userSession.groupId === '60000'
                 ? [
-                    { id: 0, name: getMessage('site.header.link1') },
+                    { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
-                    { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                    { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                     { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                   ]
                 : [
-                    { id: 0, name: getMessage('site.header.link1') },
+                    { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
-                    { id: 1, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                    { id: 1, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
                     { id: 2, name: getMessage('site.header.link2'), link: `https://q-warranty.q-cells.jp/seller_login`, target: '_blank' },
                   ],
           )

src/components/main/ChangePasswordPop.jsx

@@ -1,20 +1,17 @@
-import React, { useState } from 'react'
+import React from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useForm } from 'react-hook-form'
 import { sessionStore } from '@/store/commonAtom'
 import { useRecoilValue, useRecoilState } from 'recoil'
 import { useAxios } from '@/hooks/useAxios'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { useRouter } from 'next/navigation'
+import { logout, setSession, login } from '@/lib/authActions'
-import { setSession } from '@/lib/authActions'
-import { logout } from '@/lib/authActions'
 export default function ChangePasswordPop(props) {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { patch } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
   const [sessionState, setSessionState] = useRecoilState(sessionStore)
-  const router = useRouter()
   const formInitValue = {
     password1: '',
     password2: '',
@@ -56,6 +53,16 @@ export default function ChangePasswordPop(props) {
     const _password1 = form.watch('password1')
     const _password2 = form.watch('password2')
 
+    //비밀번호 미입력시
+    if (_password1.trim() === '') {
+      alert(getMessage('main.popup.login.validate3'))
+      return false
+    }
+    if (_password2.trim() === '') {
+      alert(getMessage('main.popup.login.validate3'))
+      return false
+    }
+
     if (_password1 !== _password2) {
       alert(getMessage('main.popup.login.validate1'))
       return false
@@ -77,11 +84,11 @@ export default function ChangePasswordPop(props) {
         if (res?.result?.code === 200) {
           if (res?.result?.resultCode === 'S') {
             alert(getMessage('main.popup.login.success'))
-            logout()
+            const result = { ...sessionState, pwdInitYn: 'Y' }
-            //로그인 화면으로 이동해서 다시 로그인해야되서 setSessionState필요없음
+            setSession(result)
-            // setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+            setSessionState(result)
-            //props.setChagePasswordPopOpen(false)
+            props.setChagePasswordPopOpen(false)
-            //router.push('/login')
+            login()
           } else {
             alert(res?.result?.resultMsg)
           }
@@ -110,10 +117,7 @@ export default function ChangePasswordPop(props) {
                   <div className="table-item">
                     <div className="table-item-th">
                       <div className="change-password-tit">
-                        <div className="tit-b">
+                        <div className="tit-b">{getMessage('main.popup.login.newPassword1')}</div>
-                          {getMessage('main.popup.login.newPassword1')}
-                          <span className="important">*</span>
-                        </div>
                         <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
                       </div>
                     </div>
@@ -133,10 +137,7 @@ export default function ChangePasswordPop(props) {
                   <div className="table-item">
                     <div className="table-item-th">
                       <div className="change-password-tit">
-                        <div className="tit-b">
+                        <div className="tit-b">{getMessage('main.popup.login.newPassword2')}</div>
-                          {getMessage('main.popup.login.newPassword2')}
-                          <span className="important">*</span>
-                        </div>
                         <div className="tit-s">{getMessage('main.popup.login.placeholder')}</div>
                       </div>
                     </div>
@@ -169,7 +170,6 @@ export default function ChangePasswordPop(props) {
                 className="btn-origin grey"
                 onClick={() => {
                   logout()
-                  // router.push('/login')
                 }}
               >
                 {getMessage('main.popup.login.btn2')}

src/components/main/MainContents.jsx

@@ -15,6 +15,8 @@ import { useMainContentsController } from '@/hooks/main/useMainContentsControlle
 import { QcastContext } from '@/app/QcastProvider'
 import { useSwal } from '@/hooks/useSwal'
 
+import BoardDetailModal from '../community/modal/BoardDetailModal'
+
 export default function MainContents() {
   const { swalFire } = useSwal()
 
@@ -87,6 +89,10 @@ export default function MainContents() {
     }
   }
 
+  // FAQ 팝업 관련
+  const [open, setOpen] = useState(false)
+  const [modalNoticeNo, setModalNoticeNo] = useState('')
+
   return (
     <div className="main-product-list-wrap">
       <div className="main-product-list">
@@ -143,6 +149,8 @@ export default function MainContents() {
           )}
         </ProductItem>
       </div>
+
+      {open && <BoardDetailModal noticeNo={modalNoticeNo} setOpen={setOpen} />}
       <div className="main-product-list">
         <ProductItem num={3} name={getMessage('main.faq')}>
           {recentFaqList.length > 0 ? (
@@ -151,8 +159,17 @@ export default function MainContents() {
                 return (
                   <li key={row.rowNumber} className="faq-item">
                     <div className="faq-item-inner">
-                      <div className="faq-num pre">FAQ {row.totCnt - row.rowNumber}</div>
+                      <div className="faq-num pre">FAQ {row.totCnt - row.rowNumber + 1}</div>
-                      <div className="faq-title pre">{row.title}</div>
+                      <div
+                        className="faq-title pre"
+                        style={{ cursor: 'pointer' }}
+                        onClick={() => {
+                          setOpen(true)
+                          setModalNoticeNo(row.noticeNo)
+                        }}
+                      >
+                        {row.title}
+                      </div>
                       <div className="faq-day pre">{dayjs(row.regDt).format('YYYY.MM.DD')}</div>
                     </div>
                   </li>

src/components/management/Stuff.jsx

@@ -207,6 +207,7 @@ export default function Stuff() {
         schReceiveUser: stuffSearchParams?.schReceiveUser,
         schDispCompanyName: stuffSearchParams?.schDispCompanyName,
         schDateType: stuffSearchParams.schDateType,
+        schTempFlg: stuffSearchParams.schTempFlg, //임시저장 물건
         schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
         schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
         startRow: (stuffSearch.pageNo - 1) * stuffSearchParams.pageSize + 1,
@@ -217,6 +218,7 @@ export default function Stuff() {
         pageNo: stuffSearchParams?.pageNo ? stuffSearchParams.pageNo : 1,
         pageSize: stuffSearchParams?.pageSize ? stuffSearchParams.pageSize : 100,
       }
+
       async function fetchData() {
         const apiUrl = `/api/object/list?${queryStringFormatter(params)}`
         await get({
@@ -249,6 +251,7 @@ export default function Stuff() {
         schReceiveUser: '',
         schDispCompanyName: '',
         schDateType: 'U',
+        schTempFlg: '',
         schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
         schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
         startRow: (pageNo - 1) * pageSize + 1,
@@ -322,6 +325,7 @@ export default function Stuff() {
         schReceiveUser: '',
         schDispCompanyName: '',
         schDateType: 'U',
+        schTempFlg: '',
         schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
         schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
         startRow: 1,

src/components/management/StuffDetail.jsx

@@ -269,8 +269,8 @@ export default function StuffDetail() {
             }
           }
           if (managementState?.createUser === 'T01' && session?.userId !== 'T01') {
-            //createUser가 T01인데 로그인사용자가 T01이 아니면 버튼숨기기
+            //createUser가 T01인데 로그인사용자가 T01이 아니면 버튼숨기기 적용할지 미정!!!!!!!!
-            buttonStyle = { display: 'none' }
+            //buttonStyle = { display: 'none' }
           }
           return (
             <>
@@ -282,7 +282,8 @@ export default function StuffDetail() {
                   onClick={() => {
                     //mid:5(견적서), /pid:플랜번호
                     setFloorPlanObjectNo({ floorPlanObjectNo: params.data.objectNo })
-                    router.push(`/floor-plan/estimate/5/${params.data.planNo}`)
+                    // router.push(`/floor-plan/estimate/5/${params.data.planNo}`)
+                    router.push(`/floor-plan/estimate/5?pid=${params.data.planNo}&objectNo=${params.data.objectNo}`)
                   }}
                 >
                   <span className="file"></span>
@@ -330,7 +331,7 @@ export default function StuffDetail() {
             //createUser가 T01인데 로그인사용자가 T01이 아니면 버튼숨기기
             setShowButton('none')
           }
-
+          // console.log('상세::', res.data)
           if (isObjectNotEmpty(res.data)) {
             let surfaceTypeValue
             if (res.data.surfaceType === 'Ⅲ・Ⅳ') {
@@ -430,7 +431,6 @@ export default function StuffDetail() {
 
               setOtherSaleStoreList(otherList)
             } else {
-              //10X22, 201X112,202X217
               firstList = res.filter((row) => row.firstAgentYn === 'Y')
               setSaleStoreList(firstList)
               setFavoriteStoreList(firstList)
@@ -441,6 +441,7 @@ export default function StuffDetail() {
               form.setValue('saleStoreLevel', firstList[0].saleStoreLevel)
 
               otherList = res.filter((row) => row.firstAgentYn === 'N')
+
               setOtherSaleStoreList(otherList)
               //2차 판매점명/ID는  본인을 셀렉트
               setOtherSelOptions(session?.storeId)
@@ -480,8 +481,6 @@ export default function StuffDetail() {
           }
         })
 
-        //1차점 : X167 T01
-        //2차점 : 10X22, 201X112
         let url
         let firstList
         let otherList
@@ -561,6 +560,11 @@ export default function StuffDetail() {
             setSelOptions(managementState.saleStoreId)
             form.setValue('saleStoreId', managementState.saleStoreId)
             form.setValue('saleStoreLevel', managementState.saleStoreLevel)
+            //#435
+            setOtherSelOptions('')
+            form.setValue('otherSaleStoreId', '')
+            form.setValue('otherSaleStoreLevel', '')
+            form.setValue('otherSaleStoreName', '')
           } else {
             setOtherSelOptions(managementState.saleStoreId)
             form.setValue('otherSaleStoreId', managementState.saleStoreId)
@@ -921,10 +925,13 @@ 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)
-    form.setValue('objectName', info.planReqName)
+
+    form.setValue('objectName', info.title)
     form.setValue('zipNo', info.zipNo)
     form.setValue('address', info.address2)
 
@@ -1258,6 +1265,7 @@ export default function StuffDetail() {
       return alert(getMessage('stuff.detail.save.valierror2'))
     }
 
+    if (managementState) {
       let detail_sort = Object.keys(managementState)
         .sort()
         .reduce((obj, key) => ((obj[key] = managementState[key]), obj), {})
@@ -1310,12 +1318,19 @@ export default function StuffDetail() {
       if (Object.entries(detail_sort).toString() === Object.entries(params_sort).toString()) {
         return alert(getMessage('stuff.detail.noChgData'))
       }
+    }
 
     if (params?.receiveUser !== '') {
       if (params?.receiveUser.trim().length > 10) {
         return alert(getMessage('stuff.detail.tempSave.message2'))
       }
     }
+    //로그인이 2차점인데 otherSaleStoreId가 없으면 알럿
+    if (session.storeLvl !== '1') {
+      if (params.saleStoreLevel === '1') {
+        return alert(getMessage('stuff.detail.tempSave.message4'))
+      }
+    }
 
     if (editMode === 'NEW') {
       await promisePost({ url: apiUrl, data: params })
@@ -1480,7 +1495,7 @@ export default function StuffDetail() {
       if (params?.data?.planNo && params?.data?.objectNo) {
         let objectNo = params?.data?.objectNo
         let planNo = params?.data?.planNo
-        router.push(`/floor-plan?pid=${planNo}&objectNo=${objectNo}`)
+        router.push(`/floor-plan/estimate/5?pid=${planNo}&objectNo=${objectNo}`)
       }
     }
   }
@@ -1724,7 +1739,10 @@ export default function StuffDetail() {
                   <tr>
                     <th>
                       <div className="flx-box">
-                        <div className="title">{getMessage('stuff.detail.otherSaleStoreId')}</div>
+                        <div className="title">
+                          {getMessage('stuff.detail.otherSaleStoreId')}
+                          {session.storeLvl !== '1' && <span className="important">*</span>}
+                        </div>
                         <div className="tooltips">
                           <span>{getMessage('stuff.detail.tooltip.saleStoreId')}</span>
                         </div>
@@ -1745,7 +1763,16 @@ export default function StuffDetail() {
                             onChange={onSelectionChange2}
                             getOptionLabel={(x) => x.saleStoreName}
                             getOptionValue={(x) => x.saleStoreId}
-                            isDisabled={otherSaleStoreList != null && otherSaleStoreList.length > 0 ? false : true}
+                            isDisabled={
+                              session?.storeLvl === '1'
+                                ? otherSaleStoreList.length > 0
+                                  ? false
+                                  : true
+                                : otherSaleStoreList.length === 1
+                                  ? true
+                                  : false
+                            }
+                            // isDisabled={otherSaleStoreList != null && otherSaleStoreList.length === 1 ? true : false}
                             isClearable={true}
                             value={otherSaleStoreList.filter(function (option) {
                               return option.saleStoreId === otherSelOptions
@@ -2295,14 +2322,16 @@ export default function StuffDetail() {
                                 onChange={onSelectionChange2}
                                 getOptionLabel={(x) => x.saleStoreName}
                                 getOptionValue={(x) => x.saleStoreId}
-                                isDisabled={
+                                // isDisabled={
-                                  managementState?.tempFlg === '0'
+                                //   managementState?.tempFlg === '0'
-                                    ? true
+                                //     ? true
-                                    : session?.storeLvl === '1' && form.watch('saleStoreId') != ''
+                                //     : session?.storeLvl === '1' && form.watch('saleStoreId') != ''
-                                      ? false
+                                //       ? false
-                                      : true
+                                //       : false
-                                }
+                                // }
-                                isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
+                                isDisabled={managementState?.tempFlg === '0' ? true : false}
+                                isClearable={managementState?.tempFlg === '0' ? false : true}
+                                // isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : true}
                                 value={otherSaleStoreList.filter(function (option) {
                                   return option.saleStoreId === otherSelOptions
                                 })}

src/components/management/StuffPlanQGrid.jsx

@@ -40,7 +40,6 @@ export default function StuffPlanQGrid(props) {
         rowData={rowData}
         columnDefs={colDefs}
         defaultColDef={defaultColDef}
-        rowSelection={'singleRow'}
         pagination={isPageable}
         domLayout="autoHeight"
         suppressCellFocus={true}

src/components/management/StuffQGrid.jsx

@@ -92,10 +92,6 @@ export default function StuffQGrid(props) {
         rowData={rowData}
         columnDefs={colDefs}
         defaultColDef={defaultColDef}
-        isRowSelectable={isRowSelectable}
-        rowSelection={'multiple'}
-        suppressRowClickSelection={true}
-        // onSelectionChanged={onSelectionChanged}
         onCellDoubleClicked={onCellDoubleClicked}
         pagination={isPageable}
         overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}

src/components/management/StuffSearchCondition.jsx

@@ -60,6 +60,9 @@ export default function StuffSearchCondition() {
   const [schSelSaleStoreId, setSchSelSaleStoreId] = useState('') //판매대리점 선택
   const [receiveUser, setReceiveUser] = useState('') //담당자
   const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
+  const [tempFlg, setTempFlg] = useState('') //임시저장여부
+  //내물건보기 체크박스
+  const [myDataCheck, setMyDataCheck] = useState(false)
 
   const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
   const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
@@ -95,6 +98,8 @@ export default function StuffSearchCondition() {
           schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : '',
           schReceiveUser: receiveUser ? receiveUser.trim() : '',
           schDateType: dateType,
+          schTempFlg: tempFlg, //임시저장물건
+          schMyDataCheck: myDataCheck,
           schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
           schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
           code: 'E',
@@ -104,6 +109,29 @@ export default function StuffSearchCondition() {
           pageNo: 1,
           pageSize: stuffSearch?.pageSize,
         })
+      } else {
+        if (session.storeId !== 'T01') {
+          setStuffSearch({
+            schObjectNo: objectNo ? objectNo.trim() : stuffSearch.schObjectNo.trim(),
+            schSaleStoreName: saleStoreName ? saleStoreName.trim() : '',
+            schAddress: address ? address.trim() : '',
+            schObjectName: objectName ? objectName.trim() : '',
+            schDispCompanyName: dispCompanyName ? dispCompanyName.trim() : '',
+            schSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? '' : stuffSearch.schSelSaleStoreId,
+            schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : '',
+            schReceiveUser: receiveUser ? receiveUser.trim() : '',
+            schDateType: dateType,
+            schTempFlg: tempFlg, //임시저장물건
+            schMyDataCheck: myDataCheck,
+            schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
+            schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
+            code: 'E',
+            startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
+            endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
+            schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'U',
+            pageNo: stuffSearch?.pageNo,
+            pageSize: stuffSearch?.pageSize,
+          })
         } else {
           setStuffSearch({
             schObjectNo: objectNo ? objectNo.trim() : stuffSearch.schObjectNo.trim(),
@@ -115,6 +143,8 @@ export default function StuffSearchCondition() {
             schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : '',
             schReceiveUser: receiveUser ? receiveUser.trim() : '',
             schDateType: dateType,
+            schTempFlg: tempFlg, //임시저장물건
+            schMyDataCheck: myDataCheck,
             schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
             schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
             code: 'E',
@@ -125,6 +155,7 @@ export default function StuffSearchCondition() {
             pageSize: stuffSearch?.pageSize,
           })
         }
+      }
     } else if (stuffSearch.code === 'FINISH') {
       setStuffSearch({
         schObjectNo: objectNo.trim(),
@@ -136,6 +167,8 @@ export default function StuffSearchCondition() {
         schOtherSelSaleStoreId: otherSaleStoreId,
         schReceiveUser: receiveUser.trim(),
         schDateType: dateType,
+        schTempFlg: tempFlg, //임시저장물건
+        schMyDataCheck: myDataCheck,
         schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
         schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
         code: 'E',
@@ -151,10 +184,12 @@ export default function StuffSearchCondition() {
           schAddress: stuffSearch?.schAddress ? stuffSearch.schAddress.trim() : address.trim(),
           schObjectName: stuffSearch?.schObjectName ? stuffSearch.schObjectName.trim() : objectName.trim(),
           schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName.trim() : dispCompanyName.trim(),
-          schSelSaleStoreId: otherSaleStoreId ? schSelSaleStoreId : '',
+          schSelSaleStoreId: myDataCheck ? schSelSaleStoreId : otherSaleStoreId ? schSelSaleStoreId : '',
-          schOtherSelSaleStoreId: otherSaleStoreId,
+          schOtherSelSaleStoreId: myDataCheck ? '' : otherSaleStoreId,
           schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser.trim() : receiveUser.trim(),
           schDateType: dateType,
+          schTempFlg: tempFlg, //임시저장물건
+          schMyDataCheck: myDataCheck,
           schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
           schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
           code: 'E',
@@ -176,6 +211,8 @@ export default function StuffSearchCondition() {
             schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : '',
             schReceiveUser: receiveUser ? receiveUser.trim() : '',
             schDateType: dateType,
+            schTempFlg: tempFlg, //임시저장물건
+            schMyDataCheck: myDataCheck,
             schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
             schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
             code: 'E',
@@ -196,6 +233,8 @@ export default function StuffSearchCondition() {
             schOtherSelSaleStoreId: otherSaleStoreId,
             schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser.trim() : receiveUser.trim(),
             schDateType: dateType,
+            schTempFlg: tempFlg, //임시저장물건
+            schMyDataCheck: myDataCheck,
             schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
             schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
             code: 'E',
@@ -217,6 +256,8 @@ export default function StuffSearchCondition() {
           schOtherSelSaleStoreId: otherSaleStoreId,
           schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser.trim() : receiveUser.trim(),
           schDateType: dateType,
+          schTempFlg: tempFlg, //임시저장물건
+          schMyDataCheck: myDataCheck,
           schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
           schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
           code: 'E',
@@ -238,6 +279,8 @@ export default function StuffSearchCondition() {
         schOtherSelSaleStoreId: otherSaleStoreId,
         schReceiveUser: receiveUser.trim(),
         schDateType: dateType,
+        schTempFlg: tempFlg, //임시저장물건
+        schMyDataCheck: stuffSearch.schMyDataCheck,
         schFromDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
         schToDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
         code: 'E',
@@ -261,6 +304,8 @@ export default function StuffSearchCondition() {
     dispCompanyNameRef.current.value = ''
     receiveUserRef.current.value = ''
     stuffSearch.schDateType = 'U'
+    stuffSearch.schTempFlg = ''
+    stuffSearch.schMyDataCheck = false
     setObjectNo('')
     setAddress('')
     setobjectName('')
@@ -268,6 +313,8 @@ export default function StuffSearchCondition() {
     setReceiveUser('')
     setDispCompanyName('')
     setDateType('U')
+    setTempFlg('')
+    setMyDataCheck(false)
     setStartDate(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
     setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
     if (session?.storeId === 'T01') {
@@ -285,6 +332,8 @@ export default function StuffSearchCondition() {
         schSelSaleStoreId: '',
         schOtherSelSaleStoreId: '',
         schDateType: 'U',
+        schTempFlg: '',
+        schMyDataCheck: false,
         startRow: 1,
         endRow: 100,
         schSortType: 'U',
@@ -292,7 +341,44 @@ export default function StuffSearchCondition() {
         pageSize: 100,
       })
     } else {
+      if (session?.storeLvl === '2') {
         if (otherSaleStoreList.length > 1) {
+          // handleClear2()
+          setOtherSaleStoreId(session.storeId)
+          stuffSearch.schOtherSelSaleStoreId = session.storeId
+          stuffSearch.schObjectNo = ''
+          stuffSearch.schAddress = ''
+          stuffSearch.schObjectName = ''
+          stuffSearch.schSaleStoreName = ''
+          stuffSearch.schReceiveUser = ''
+          stuffSearch.schDispCompanyName = ''
+          stuffSearch.schDateType = 'U'
+          stuffSearch.schTempFlg = ''
+          stuffSearch.schMyDataCheck = false
+
+          stuffSearch.startRow = 1
+          stuffSearch.endRow = 100
+          stuffSearch.schSortType = 'U'
+          stuffSearch.pageNo = 1
+          stuffSearch.pageSize = 100
+        } else {
+          stuffSearch.schObjectNo = ''
+          stuffSearch.schAddress = ''
+          stuffSearch.schObjectName = ''
+          stuffSearch.schSaleStoreName = ''
+          stuffSearch.schReceiveUser = ''
+          stuffSearch.schDispCompanyName = ''
+          stuffSearch.schDateType = 'U'
+          stuffSearch.schTempFlg = ''
+          stuffSearch.schMyDataCheck = false
+          stuffSearch.startRow = 1
+          stuffSearch.endRow = 100
+          stuffSearch.schSortType = 'U'
+          stuffSearch.pageNo = 1
+          stuffSearch.pageSize = 100
+        }
+      } else if (session?.storeLvl === '1') {
+        if (otherSaleStoreList.length > 0) {
           handleClear2()
           setOtherSaleStoreId('')
           stuffSearch.schObjectNo = ''
@@ -302,7 +388,8 @@ export default function StuffSearchCondition() {
           stuffSearch.schReceiveUser = ''
           stuffSearch.schDispCompanyName = ''
           stuffSearch.schDateType = 'U'
-
+          stuffSearch.schTempFlg = ''
+          stuffSearch.schMyDataCheck = false
           stuffSearch.startRow = 1
           stuffSearch.endRow = 100
           stuffSearch.schSortType = 'U'
@@ -316,7 +403,8 @@ export default function StuffSearchCondition() {
           stuffSearch.schReceiveUser = ''
           stuffSearch.schDispCompanyName = ''
           stuffSearch.schDateType = 'U'
-
+          stuffSearch.schTempFlg = ''
+          stuffSearch.schMyDataCheck = false
           stuffSearch.startRow = 1
           stuffSearch.endRow = 100
           stuffSearch.schSortType = 'U'
@@ -325,6 +413,7 @@ export default function StuffSearchCondition() {
         }
       }
     }
+  }
 
   useEffect(() => {
     if (isObjectNotEmpty(session)) {
@@ -393,13 +482,10 @@ export default function StuffSearchCondition() {
               setSchSelSaleStoreId(allList[0].saleStoreId)
 
               setOtherSaleStoreList(otherList)
-
               if (stuffSearch.schOtherSelSaleStoreId != '') {
                 setOtherSaleStoreId(stuffSearch.schOtherSelSaleStoreId)
               }
             } else {
-              //10X22, 201X112 그냥2차점
-              //2차점인데 34들고있는애 202X217
               setSchSelSaleStoreList(res)
               setFavoriteStoreList(res)
               setShowSaleStoreList(res)
@@ -408,6 +494,7 @@ export default function StuffSearchCondition() {
               setOtherSaleStoreList(otherList)
 
               //선택한 2차점 세션으로 자동셋팅
+              if (otherList.length === 1) {
                 setOtherSaleStoreId(session?.storeId)
                 setStuffSearch({
                   ...stuffSearch,
@@ -415,6 +502,23 @@ export default function StuffSearchCondition() {
                   schSelSaleStoreId: res[0].saleStoreId,
                   schOtherSelSaleStoreId: otherList[0].saleStoreId,
                 })
+              } else {
+                if (stuffSearch.code === 'S') {
+                  setOtherSaleStoreId(session?.storeId)
+                  setStuffSearch({
+                    ...stuffSearch,
+                    code: 'S',
+                    schSelSaleStoreId: res[0].saleStoreId,
+                    schOtherSelSaleStoreId: otherList[0].saleStoreId,
+                  })
+                } else {
+                  setOtherSaleStoreId(stuffSearch?.schOtherSelSaleStoreId)
+                  setStuffSearch({
+                    ...stuffSearch,
+                    code: 'S',
+                  })
+                }
+              }
             }
           }
         }
@@ -437,9 +541,11 @@ export default function StuffSearchCondition() {
 
   //자동완성 인풋
   const onInputChange = (key) => {
+    //내 물건보기 체크 풀어주기
+    setMyDataCheck(false)
+
     if (key !== '') {
       setShowSaleStoreList(schSelSaleStoreList)
-      // setOtherSaleStoreList([])
     } else {
       setShowSaleStoreList(favoriteStoreList)
     }
@@ -447,6 +553,10 @@ export default function StuffSearchCondition() {
 
   //판매대리점 자동완성 변경
   const onSelectionChange = (key) => {
+    //내 물건보기 체크 풀어주기
+    setMyDataCheck(false)
+    stuffSearch.schMyDataCheck = false
+
     if (isObjectNotEmpty(key)) {
       setOtherSaleStoreId('')
       setSchSelSaleStoreId(key.saleStoreId)
@@ -491,12 +601,19 @@ export default function StuffSearchCondition() {
 
   //2차점 자동완성 변경
   const onSelectionChange2 = (key) => {
+    //내 물건보기 체크 풀어주기
+    setMyDataCheck(false)
+    stuffSearch.schMyDataCheck = false
     if (isObjectNotEmpty(key)) {
       setOtherSaleStoreId(key.saleStoreId)
       stuffSearch.schOtherSelSaleStoreId = key.saleStoreId
 
       //2차점 골랐을때 1차점 값
+      if (session.storeId === 'T01') {
         stuffSearch.schSelSaleStoreId = schSelSaleStoreId
+      } else {
+        stuffSearch.schSelSaleStoreId = ''
+      }
     } else {
       //X누르면 검색조건에 1차점으로 셋팅
 
@@ -542,6 +659,8 @@ export default function StuffSearchCondition() {
         stuffSearch.schReceiveUser = ''
         stuffSearch.schDispCompanyName = ''
         stuffSearch.schDateType = 'U'
+        stuffSearch.schTempFlg = ''
+        stuffSearch.schMyDataCheck = false
         stuffSearch.schFromDt = dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD')
         stuffSearch.schToDt = dayjs(new Date()).format('YYYY-MM-DD')
         stuffSearch.startRow = 1
@@ -574,6 +693,8 @@ export default function StuffSearchCondition() {
         stuffSearch.schReceiveUser = ''
         stuffSearch.schDispCompanyName = ''
         stuffSearch.schDateType = 'U'
+        stuffSearch.schTempFlg = ''
+        stuffSearch.schMyDataCheck = false
         stuffSearch.schFromDt = dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD')
         stuffSearch.schToDt = dayjs(new Date()).format('YYYY-MM-DD')
         stuffSearch.startRow = 1
@@ -596,6 +717,27 @@ export default function StuffSearchCondition() {
       setDispCompanyName(stuffSearch.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName)
       setReceiveUser(stuffSearch.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser)
       setDateType(stuffSearch.schDateType ? stuffSearch.schDateType : dateType)
+      setTempFlg(stuffSearch.schTempFlg ? stuffSearch.schTempFlg : tempFlg)
+      setMyDataCheck(stuffSearch.schMyDataCheck)
+      if (session.storeLvl !== '1') {
+        stuffSearch.schSelSaleStoreId = ''
+      }
+    }
+
+    if (stuffSearch.schDateType === 'R') {
+      setDateType('R')
+    }
+
+    if (stuffSearch.schTempFlg === '0') {
+      setTempFlg('0')
+    } else if (stuffSearch.schTempFlg === '1') {
+      setTempFlg('1')
+    }
+
+    if (stuffSearch.schMyDataCheck) {
+      setMyDataCheck(true)
+    } else {
+      setMyDataCheck(false)
     }
   }, [stuffSearch])
 
@@ -615,6 +757,51 @@ export default function StuffSearchCondition() {
     }
   }
 
+  // 내 물건 보기
+  const checkMyData = (e) => {
+    if (session?.storeId === 'T01') {
+      if (e.target.checked) {
+        stuffSearch.schMyDataCheck = e.target.value
+        setMyDataCheck(true)
+        setOtherSaleStoreId('') //2차점 비우기
+        setSchSelSaleStoreId('T01')
+        stuffSearch.schSelSaleStoreId = 'T01'
+        stuffSearch.schOtherSelSaleStoreId = ''
+      } else {
+        stuffSearch.schMyDataCheck = e.target.value
+        setMyDataCheck(false)
+      }
+    } else if (session?.storeLvl === '1') {
+      if (e.target.checked) {
+        stuffSearch.schMyDataCheck = e.target.value
+        setMyDataCheck(true)
+        //schOtherSelSaleStoreId 초기화
+        //schSelSaleStoreId에 saleStoreId담아서보내기
+        setOtherSaleStoreId('') //2차점 비우기
+        setSchSelSaleStoreId(schSelSaleStoreId)
+        stuffSearch.schSelSaleStoreId = schSelSaleStoreId
+        stuffSearch.schOtherSelSaleStoreId = ''
+      } else {
+        setMyDataCheck(false)
+      }
+    } else {
+      //2차점인제 3,4가 없으면 상관없음
+      //3,4등등이 있는경우 처리필요
+      if (e.target.checked) {
+        stuffSearch.schMyDataCheck = e.target.value
+        setMyDataCheck(true)
+
+        if (otherSaleStoreList.length > 1) {
+          stuffSearch.schSelSaleStoreId = otherSaleStoreId
+          stuffSearch.schOtherSelSaleStoreId = ''
+        }
+      } else {
+        setMyDataCheck(false)
+        stuffSearch.schMyDataCheck = e.target.value
+      }
+    }
+  }
+
   return (
     <>
       {/* 퍼블적용시작 */}
@@ -647,8 +834,6 @@ export default function StuffSearchCondition() {
               <col />
               <col style={{ width: '160px' }} />
               <col />
-              <col style={{ width: '160px' }} />
-              <col />
             </colgroup>
             <tbody>
               <tr>
@@ -684,22 +869,7 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
-                <th>{getMessage('stuff.search.schAddress')}</th>
+
-                <td>
-                  <div className="input-wrap">
-                    <input
-                      type="text"
-                      ref={addressRef}
-                      className="input-light"
-                      defaultValue={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
-                      onChange={() => {
-                        stuffSearch.schAddress = addressRef.current.value
-                        setAddress(addressRef.current.value)
-                      }}
-                      onKeyUp={handleByOnKeyUp}
-                    />
-                  </div>
-                </td>
                 <th>{getMessage('stuff.search.schDispCompanyName')}</th>
                 <td>
                   <div className="input-wrap">
@@ -750,8 +920,119 @@ export default function StuffSearchCondition() {
                     />
                   </div>
                 </td>
-                <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
+                <th>{getMessage('stuff.search.schAddress')}</th>
+                <td>
+                  <div className="input-wrap">
+                    <input
+                      type="text"
+                      ref={addressRef}
+                      className="input-light"
+                      defaultValue={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
+                      onChange={() => {
+                        stuffSearch.schAddress = addressRef.current.value
+                        setAddress(addressRef.current.value)
+                      }}
+                      onKeyUp={handleByOnKeyUp}
+                    />
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>{getMessage('stuff.search.period')}</th>
                 <td colSpan={3}>
+                  <div className="form-flex-wrap">
+                    <div className="radio-wrap mr10">
+                      <div className="d-check-radio light mr10">
+                        <input
+                          type="radio"
+                          name="radio_ptype"
+                          id="radio_u"
+                          checked={dateType === 'U' ? true : false}
+                          value={'U'}
+                          onChange={(e) => {
+                            setDateType(e.target.value)
+                            stuffSearch.schDateType = e.target.value
+                          }}
+                        />
+                        <label htmlFor="radio_u">{getMessage('stuff.search.schDateTypeU')}</label>
+                      </div>
+                      <div className="d-check-radio light">
+                        <input
+                          type="radio"
+                          name="radio_ptype"
+                          id="radio_r"
+                          checked={dateType === 'R' ? true : false}
+                          value={'R'}
+                          onChange={(e) => {
+                            setDateType(e.target.value)
+                            stuffSearch.schDateType = e.target.value
+                          }}
+                        />
+                        <label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}</label>
+                      </div>
+                    </div>
+                    <div className="date-picker-wrap">
+                      <div className="date-picker" style={{ flex: 1 }}>
+                        <SingleDatePicker {...rangeDatePickerProps1} />
+                      </div>
+                      <span> ~ </span>
+                      <div className="date-picker" style={{ flex: 1 }}>
+                        <SingleDatePicker {...rangeDatePickerProps2} />
+                      </div>
+                    </div>
+                  </div>
+                </td>
+                <th>{getMessage('stuff.search.schTempFlgT')}</th>
+                <td>
+                  <div className="radio-wrap mr10">
+                    <div className="d-check-radio light mr10">
+                      <input
+                        type="radio"
+                        name="schTempFlg"
+                        id="schTempFlg"
+                        checked={stuffSearch.schTempFlg === '' ? true : false}
+                        value={''}
+                        onChange={(e) => {
+                          setTempFlg(e.target.value)
+                          stuffSearch.schTempFlg = e.target.value
+                        }}
+                      />
+                      <label htmlFor="schTempFlg">{getMessage('stuff.search.schTempFlg')}</label>
+                    </div>
+                    <div className="d-check-radio light mr10">
+                      <input
+                        type="radio"
+                        name="schTempFlg"
+                        id="schTempFlg0"
+                        checked={stuffSearch.schTempFlg === '0' ? true : false}
+                        value={'0'}
+                        onChange={(e) => {
+                          setTempFlg(e.target.value)
+                          stuffSearch.schTempFlg = e.target.value
+                        }}
+                      />
+                      <label htmlFor="schTempFlg0">{getMessage('stuff.search.schTempFlg0')}</label>
+                    </div>
+                    <div className="d-check-radio light">
+                      <input
+                        type="radio"
+                        name="schTempFlg"
+                        id="schTempFlg1"
+                        checked={stuffSearch.schTempFlg === '1' ? true : false}
+                        value={'1'}
+                        onChange={(e) => {
+                          setTempFlg(e.target.value)
+                          stuffSearch.schTempFlg = e.target.value
+                        }}
+                      />
+                      <label htmlFor="schTempFlg1">{getMessage('stuff.search.schTempFlg1')}</label>
+                    </div>
+                  </div>
+                </td>
+              </tr>
+              <tr>
+                <th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
+                <td colSpan={5}>
                   <div className="form-flex-wrap">
                     <div className="select-wrap mr5" style={{ flex: 1 }}>
                       {session?.storeId === 'T01' && (
@@ -853,7 +1134,7 @@ export default function StuffSearchCondition() {
                         />
                       )}
                     </div>
-                    <div className="select-wrap" style={{ flex: 1 }}>
+                    <div className="select-wrap mr10" style={{ flex: 1 }}>
                       <Select
                         id="long-value-select2"
                         instanceId="long-value-select2"
@@ -865,58 +1146,24 @@ export default function StuffSearchCondition() {
                         onChange={onSelectionChange2}
                         getOptionLabel={(x) => x.saleStoreName}
                         getOptionValue={(x) => x.saleStoreId}
-                        isDisabled={otherSaleStoreList.length > 0 ? false : true}
+                        isDisabled={otherSaleStoreList != null && otherSaleStoreList.length === 1 ? true : false}
                         isClearable={true}
                         value={otherSaleStoreList.filter(function (option) {
                           return option.saleStoreId === otherSaleStoreId
                         })}
                       />
                     </div>
-                  </div>
+                    <div className="d-check-box light">
-                </td>
-              </tr>
-              <tr>
-                <th>{getMessage('stuff.search.period')}</th>
-                <td colSpan={7}>
-                  <div className="form-flex-wrap">
-                    <div className="radio-wrap mr10">
-                      <div className="d-check-radio light mr10">
                       <input
-                          type="radio"
+                        type="checkbox"
-                          name="radio_ptype"
+                        id="schMine"
-                          id="radio_u"
+                        checked={stuffSearch.schMyDataCheck ? true : false}
-                          defaultChecked={stuffSearch.schDateType === 'U' ? true : false}
-                          value={'U'}
                         onChange={(e) => {
-                            setDateType(e.target.value)
+                          checkMyData(e)
-                            stuffSearch.schDateType = e.target.value
+                          stuffSearch.schMyDataCheck = e.target.checked
                         }}
                       />
-                        <label htmlFor="radio_u">{getMessage('stuff.search.schDateTypeU')}</label>
+                      <label htmlFor="schMine">{getMessage('stuff.search.schMine')}</label>
-                      </div>
-                      <div className="d-check-radio light">
-                        <input
-                          type="radio"
-                          name="radio_ptype"
-                          id="radio_r"
-                          defaultChecked={stuffSearch.schDateType === 'R' ? true : false}
-                          value={'R'}
-                          onChange={(e) => {
-                            setDateType(e.target.value)
-                            stuffSearch.schDateType = e.target.value
-                          }}
-                        />
-                        <label htmlFor="radio_r">{getMessage('stuff.search.schDateTypeR')}</label>
-                      </div>
-                    </div>
-                    <div className="date-picker-wrap">
-                      <div className="date-picker" style={{ flex: 1 }}>
-                        <SingleDatePicker {...rangeDatePickerProps1} />
-                      </div>
-                      <span> ~ </span>
-                      <div className="date-picker" style={{ flex: 1 }}>
-                        <SingleDatePicker {...rangeDatePickerProps2} />
-                      </div>
                     </div>
                   </div>
                 </td>

src/components/management/StuffSubHeader.jsx

@@ -37,7 +37,8 @@ export default function StuffSubHeader({ type }) {
     if (isObjectNotEmpty(managementState)) {
       if (managementState.createUser === 'T01') {
         if (session.userId !== 'T01') {
-          setButtonStyle('none')
+          //도면 작성은 이동 할 수 있도록 변경 #457
+          // setButtonStyle('none')
         }
       }
     }

src/components/management/popup/FindAddressPop.jsx

@@ -150,12 +150,12 @@ export default function FindAddressPop(props) {
               </div>
             </div>
             <div className="footer-btn-wrap">
-              <button className="btn-origin grey mr5" onClick={() => props.setShowAddressButtonValid(false)}>
+              <button className="btn-origin navy mr5" onClick={applyAddress}>
-                {getMessage('stuff.addressPopup.btn1')}
-              </button>
-              <button className="btn-origin navy " onClick={applyAddress}>
                 {getMessage('stuff.addressPopup.btn2')}
               </button>
+              <button className="btn-origin grey" onClick={() => props.setShowAddressButtonValid(false)}>
+                {getMessage('stuff.addressPopup.btn1')}
+              </button>
             </div>
           </div>
         </div>

src/components/management/popup/FindAddressPopQGrid.jsx

@@ -56,7 +56,6 @@ export default function FindAddressPopGrid(props) {
         rowData={rowData}
         columnDefs={colDefs}
         defaultColDef={defaultColDef}
-        rowSelection={'singleRow'}
         pagination={isPageable}
         onSelectionChanged={onSelectionChanged}
         overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}

src/components/management/popup/PlanRequestPop.jsx

@@ -19,7 +19,7 @@ export default function PlanRequestPop(props) {
   //공통코드
   const { commonCode, findCommonCode } = useCommonCode()
 
-  const [planStatCdList, setPlanStatCdList] = useState([])
+  // const [planStatCdList, setPlanStatCdList] = useState([])
 
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
@@ -50,7 +50,6 @@ export default function PlanRequestPop(props) {
   const [schSaleStoreName, setSchSaleStoreName] = useState('') //판매대리점명
   const [schPlanReqName, setSchPlanReqName] = useState('') //의뢰자명
   const [schPlanStatCd, setSchPlanStatCd] = useState('') //상태코드
-  const [schDateGbn, setSchDateGbn] = useState('S') //기간구분코드(S/R)
 
   //초기화
   const resetRecoil = () => {
@@ -59,7 +58,6 @@ export default function PlanRequestPop(props) {
     setSchAddress('')
     setSchSaleStoreName('')
     setSchPlanReqName('')
-    setSchDateGbn('S')
     setStartDate(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
     setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
     setSchPlanStatCd('')
@@ -85,10 +83,7 @@ export default function PlanRequestPop(props) {
 
   // 조회
   const onSubmit = (page, type) => {
-    //2차점 테스트 201X112
     const params = {
-      // saleStoreId: 'X112',
-      // saleStoreLevel: '1',
       saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
       saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
       schPlanReqNo: schPlanReqNo,
@@ -97,7 +92,7 @@ export default function PlanRequestPop(props) {
       schSaleStoreName: schSaleStoreName,
       schPlanReqName: schPlanReqName,
       schPlanStatCd: schPlanStatCd,
-      schDateGbn: schDateGbn,
+      schDateGbn: 'R',
       schStartDt: startDate ? dayjs(startDate).format('YYYY-MM-DD') : '',
       schEndDt: endDate ? dayjs(endDate).format('YYYY-MM-DD') : '',
       startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
@@ -135,8 +130,6 @@ export default function PlanRequestPop(props) {
   //페이지 갯수 변경 이벤트
   const onChangePerPage = (e) => {
     const params = {
-      // saleStoreId: 'T100',
-      // saleStoreLevel: '1',
       saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
       saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
       schTitle: schTitle,
@@ -145,7 +138,7 @@ export default function PlanRequestPop(props) {
       schSaleStoreName: schSaleStoreName,
       schPlanReqName: schPlanReqName,
       schPlanStatCd: schPlanStatCd,
-      schDateGbn: schDateGbn,
+      schDateGbn: 'R',
       schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
       schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
       startRow: (1 - 1) * e.target.value + 1,
@@ -176,13 +169,13 @@ export default function PlanRequestPop(props) {
     gridData: [],
     isPageable: false,
     gridColumns: [
-      {
+      // {
-        field: 'planStatName',
+      //   field: 'planStatName',
-        headerName: getMessage('stuff.planReqPopup.gridHeader.planStatName'),
+      //   headerName: getMessage('stuff.planReqPopup.gridHeader.planStatName'),
-        minWidth: 150,
+      //   minWidth: 150,
-        checkboxSelection: true,
+      //   checkboxSelection: true,
-        showDisabledCheckboxes: true,
+      //   showDisabledCheckboxes: true,
-      },
+      // },
       {
         field: 'planReqNo',
         headerName: getMessage('stuff.planReqPopup.gridHeader.planReqNo'),
@@ -218,11 +211,6 @@ export default function PlanRequestPop(props) {
         headerName: getMessage('stuff.planReqPopup.gridHeader.planReqName'),
         minWidth: 150,
       },
-      {
-        field: 'submitDt',
-        headerName: getMessage('stuff.planReqPopup.gridHeader.submitDt'),
-        minWidth: 150,
-      },
     ],
   })
 
@@ -246,12 +234,16 @@ export default function PlanRequestPop(props) {
     }
   }
 
+  // useEffect(() => {
+  //   const code1 = findCommonCode(115800) //상태
+  //   if (code1 != null) {
+  //     setPlanStatCdList(code1)
+  //   }
+  // }, [commonCode])
+
   useEffect(() => {
-    const code1 = findCommonCode(115800) //상태
+    onSubmit(pageNo, 'S')
-    if (code1 != null) {
+  }, [])
-      setPlanStatCdList(code1)
-    }
-  }, [commonCode])
 
   // 숫자만 입력 가능
   const handleKeyUp = (e) => {
@@ -388,7 +380,7 @@ export default function PlanRequestPop(props) {
                             />
                           </div>
                         </td>
-                        <th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
+                        {/* <th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
                         <td>
                           <div className="select-wrap">
                             <Select
@@ -406,40 +398,12 @@ export default function PlanRequestPop(props) {
                               isClearable={true}
                             />
                           </div>
-                        </td>
+                        </td> */}
                       </tr>
                       <tr>
                         <th>{getMessage('stuff.planReqPopup.search.period')}</th>
                         <td colSpan={5}>
                           <div className="form-flex-wrap">
-                            <div className="radio-wrap mr10">
-                              <div className="d-check-radio light mr10">
-                                <input
-                                  type="radio"
-                                  name="radio04"
-                                  id="ra07"
-                                  checked={schDateGbn === 'S' ? true : false}
-                                  value={'S'}
-                                  onChange={(e) => {
-                                    setSchDateGbn(e.target.value)
-                                  }}
-                                />
-                                <label htmlFor="ra07">{getMessage('stuff.planReqPopup.search.schDateGbnS')}</label>
-                              </div>
-                              <div className="d-check-radio light">
-                                <input
-                                  type="radio"
-                                  name="radio04"
-                                  id="ra08"
-                                  checked={schDateGbn === 'R' ? true : false}
-                                  value={'R'}
-                                  onChange={(e) => {
-                                    setSchDateGbn(e.target.value)
-                                  }}
-                                />
-                                <label htmlFor="ra08">{getMessage('stuff.planReqPopup.search.schDateGbnR')}</label>
-                              </div>
-                            </div>
                             <div className="date-picker-wrap">
                               <div className="date-picker" style={{ flex: 1 }}>
                                 <SingleDatePicker {...rangeDatePickerProps1} />
@@ -474,12 +438,12 @@ export default function PlanRequestPop(props) {
               </div>
             </div>
             <div className="footer-btn-wrap">
-              <button className="btn-origin grey mr5" onClick={() => props.setShowDesignRequestButtonValid(false)}>
+              <button className="btn-origin navy mr5" onClick={applyPlanReq}>
-                {getMessage('stuff.planReqPopup.btn3')}
-              </button>
-              <button className="btn-origin navy" onClick={applyPlanReq}>
                 {getMessage('stuff.planReqPopup.btn4')}
               </button>
+              <button className="btn-origin grey" onClick={() => props.setShowDesignRequestButtonValid(false)}>
+                {getMessage('stuff.planReqPopup.btn3')}
+              </button>
             </div>
           </div>
         </div>

src/components/management/popup/PlanRequestPopQGrid.jsx

@@ -56,7 +56,6 @@ export default function PlanRequestPopQGrid(props) {
         rowData={rowData}
         columnDefs={colDefs}
         defaultColDef={defaultColDef}
-        rowSelection={'singleRow'}
         pagination={isPageable}
         onSelectionChanged={onSelectionChanged}
         overlayNoRowsTemplate={`<span className="ag-overlay-loading-center">${getMessage('stuff.grid.noData')}</span>`}

src/components/management/popup/WindSelectPop.jsx

@@ -105,12 +105,12 @@ export default function WindSelectPop(props) {
               </div>
             </div>
             <div className="footer-btn-wrap">
-              <button className="btn-origin grey mr5" onClick={() => props.setShowWindSpeedButtonValid(false)}>
+              <button className="btn-origin navy mr5" onClick={applyWindSpeed}>
-                {getMessage('stuff.windSelectPopup.btn1')}
-              </button>
-              <button className="btn-origin navy" onClick={applyWindSpeed}>
                 {getMessage('stuff.windSelectPopup.btn2')}
               </button>
+              <button className="btn-origin grey" onClick={() => props.setShowWindSpeedButtonValid(false)}>
+                {getMessage('stuff.windSelectPopup.btn1')}
+              </button>
             </div>
           </div>
         </div>

src/components/myInfo/UserInfoModal.jsx

@@ -39,6 +39,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
 
       if (resultData) {
         setInfo(resultData)
+        setPassword(resultData.password)
       } else {
         alert(getMessage('common.message.no.data'))
       }

src/components/simulator/Simulator.jsx

@@ -3,33 +3,30 @@
 import 'chart.js/auto'
 import { Bar } from 'react-chartjs-2'
 import dayjs from 'dayjs'
+import { v4 as uuidv4 } from 'uuid'
 
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useContext } from 'react'
-import { useRecoilValue, useRecoilState } from 'recoil'
+import { useRecoilState } from 'recoil'
-import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
 
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
-import { usePlan } from '@/hooks/usePlan'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 
 import { convertNumberToPriceDecimal } from '@/util/common-utils'
+// import { useSearchParams } from 'next/navigation'
 
 export default function Simulator() {
-  const { plans } = usePlan()
+  const { floorPlanState } = useContext(FloorPlanContext)
-  const plan = plans.find((plan) => plan.isCurrent === true)
+  const { objectNo, pid } = floorPlanState
+
+  // const searchParams = useSearchParams()
+  // const objectNo = searchParams.get('objectNo')
+  // const pid = searchParams.get('pid')
 
   const chartRef = useRef(null)
 
-  // recoil 물건번호
-  const objectRecoil = useRecoilValue(floorPlanObjectState)
-  const [objectNo, setObjectNo] = useState('')
-
-  useEffect(() => {
-    setObjectNo(objectRecoil.floorPlanObjectNo)
-  }, [objectRecoil])
-
   // 캔버스 메뉴 넘버 셋팅
   const { setMenuNumber } = useCanvasMenu()
 
@@ -105,13 +102,23 @@ export default function Simulator() {
   }
 
   useEffect(() => {
+    /* 초기화 작업 */
+    setChartData([])
+    setObjectDetail({})
+    setModuleInfoList([])
+    setPcsInfoList([])
+    setHatsudenryouAll([])
+    setHatsudenryouAllSnow([])
+    setHatsudenryouPeakcutAll([])
+    setHatsudenryouPeakcutAllSnow([])
+
     if (objectNo) {
       fetchObjectDetail(objectNo)
       fetchSimulatorNotice()
       setPwrGnrSimType('D')
       setPwrRecoil({ ...pwrRecoil, type: 'D' })
     }
-  }, [objectNo, plan])
+  }, [objectNo, pid])
 
   // 물건 상세 정보 조회
   const [objectDetail, setObjectDetail] = useState({})
@@ -129,7 +136,7 @@ export default function Simulator() {
   const [hatsudenryouPeakcutAllSnow, setHatsudenryouPeakcutAllSnow] = useState([])
 
   const fetchObjectDetail = async (objectNo) => {
-    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${plan?.id}`
+    const apiUrl = `/api/pwrGnrSimulation/calculations?objectNo=${objectNo}&planNo=${pid}`
 
     const resultData = await get({ url: apiUrl })
     if (resultData) {
@@ -201,7 +208,8 @@ export default function Simulator() {
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub1')}</div>
                 <div className="estimate-name">
-                  {objectDetail.objectNo} (Plan No: {plan?.id})
+                  {objectDetail.objectNo}
+                  {`${objectDetail.planNo ? `(Plan No: ${objectDetail.planNo})` : ''}`}
                 </div>
               </div>
               {/* 작성일 */}
@@ -219,7 +227,7 @@ export default function Simulator() {
               {/* 연간예측발전량 */}
               <div className="estimate-box">
                 <div className="estimate-tit">{getMessage('simulator.title.sub4')}</div>
-                <div className="estimate-name">{chartData[chartData.length - 1]}</div>
+                <div className="estimate-name">{convertNumberToPriceDecimal(chartData[chartData.length - 1])}</div>
               </div>
             </div>
             <div className="estimate-list-wrap">
@@ -300,7 +308,7 @@ export default function Simulator() {
                       {chartData.length > 0 ? (
                         <tr>
                           {chartData.map((data) => (
-                            <td key={data}>{data}</td>
+                            <td key={uuidv4()}>{data}</td>
                           ))}
                         </tr>
                       ) : (
@@ -335,15 +343,15 @@ export default function Simulator() {
                                 {/* 지붕면 */}
                                 <td>{moduleInfo.roofSurface}</td>
                                 {/* 경사각 */}
-                                <td>{convertNumberToPriceDecimal(moduleInfo.slope)}寸</td>
+                                <td>{convertNumberToPriceDecimal(moduleInfo.slopeAngle)}寸</td>
                                 {/* 방위각(도) */}
-                                <td>{convertNumberToPriceDecimal(moduleInfo.angle)}</td>
+                                <td>{convertNumberToPriceDecimal(moduleInfo.azimuth)}</td>
                                 {/* 태양전지모듈 */}
                                 <td>
                                   <div className="overflow-lab">{moduleInfo.itemNo}</div>
                                 </td>
                                 {/* 매수 */}
-                                <td>{moduleInfo.amount}</td>
+                                <td>{convertNumberToPriceDecimal(moduleInfo.amount)}</td>
                               </tr>
                             </>
                           )
@@ -385,7 +393,7 @@ export default function Simulator() {
                                   <div className="overflow-lab">{pcsInfo.itemNo}</div>
                                 </td>
                                 {/* 대 */}
-                                <td>{pcsInfo.amount}</td>
+                                <td>{convertNumberToPriceDecimal(pcsInfo.amount)}</td>
                               </tr>
                             </>
                           )

src/hooks/common/useGrid.js

@@ -15,12 +15,13 @@ export function useGrid() {
     if (!canvas) {
       return
     }
+
     const patternData = {
       dotGridDisplay: dotLineGridSetting.DOT,
       lineGridDisplay: dotLineGridSetting.LINE,
       gridType: dotLineGridSetting.INTERVAL.type,
-      gridHorizon: dotLineGridSetting.INTERVAL.horizontalInterval / 10,
+      gridHorizon: (dotLineGridSetting.INTERVAL.horizontalInterval / 10) * (dotLineGridSetting.INTERVAL.dimension ?? 1),
-      gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+      gridVertical: (dotLineGridSetting.INTERVAL.verticalInterval / 10) * (dotLineGridSetting.INTERVAL.dimension ?? 1),
       gridRatio: dotLineGridSetting.INTERVAL.ratioInterval / 10,
       gridDimen: dotLineGridSetting.INTERVAL.dimension,
     }

src/hooks/common/useMasterController.js

@@ -36,7 +36,7 @@ export function useMasterController() {
     }
     const paramString = `?${paramArr.map((item) => `arrRoofMatlCd=${item}`).join('&')}`
     return await get({ url: `/api/v1/master/getModuleTypeItemList${paramString}` }).then((res) => {
-      console.log('🚀🚀 ~ getModuleTypeItemList ~ res:', res)
+      // console.log('🚀🚀 ~ getModuleTypeItemList ~ res:', res)
       return res
     })
   }
@@ -112,11 +112,28 @@ export function useMasterController() {
     })
   }
 
+  /**
+   * PCS 메이커, 시리즈 목록 조회
+   * @param {PCS 메이커코드}   pcsMkrCd
+   * @param {혼합모듈번호}      mixMatlNo
+   * @returns
+   */
+  const getPcsMakerList = async (params = null) => {
+    let paramString = ''
+    if (params) {
+      paramString = getQueryString(params)
+    }
+    return await get({ url: '/api/v1/master/pcsMakerList' + paramString }).then((res) => {
+      return res
+    })
+  }
+
   return {
     getRoofMaterialList,
     getModuleTypeItemList,
     getTrestleList,
     getConstructionList,
     getTrestleDetailList,
+    getPcsMakerList,
   }
 }

src/hooks/floorPlan/estimate/useEstimateController.js

@@ -9,7 +9,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useRouter } from 'next/navigation'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { QcastContext } from '@/app/QcastProvider'
-
+import { useSwal } from '@/hooks/useSwal'
 // Constants
 const ESTIMATE_API_ENDPOINT = '/api/estimate' // API 엔드포인트 정의
 
@@ -19,6 +19,7 @@ const updateItemInList = (itemList, dispOrder, updates) => {
 }
 
 export const useEstimateController = (planNo) => {
+  const { swalFire } = useSwal()
   const [fileList, setFileList] = useState([])
   const { setIsGlobalLoading } = useContext(QcastContext)
 
@@ -353,7 +354,6 @@ export const useEstimateController = (planNo) => {
       estimateData.pkgAsp = estimateData.pkgAsp.replaceAll(',', '')
     }
 
-    console.log('최종저장::', estimateData)
     //2. 상세데이터 저장
     // return
     try {
@@ -361,8 +361,9 @@ export const useEstimateController = (planNo) => {
         setIsGlobalLoading(true)
         if (res.status === 201) {
           estimateData.newFileList = []
-          alert(getMessage('estimate.detail.save.alertMsg'))
+          //알럿창 변경
-          //어디로 보낼지
+          swalFire({ text: getMessage('estimate.detail.save.alertMsg'), type: 'alert' })
+          // alert(getMessage('estimate.detail.save.alertMsg'))
           fetchSetting(objectRecoil.floorPlanObjectNo, estimateData.planNo)
         }
       })
@@ -400,8 +401,13 @@ export const useEstimateController = (planNo) => {
       if (res.status === 201) {
         if (isObjectNotEmpty(res.data)) {
           let newObjectNo = res.data.objectNo
-          alert(getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'))
+          swalFire({
+            text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'),
+            type: 'alert',
+            confirmFn: () => {
               router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
+            },
+          })
         }
       }
     })

src/hooks/module/useModuleBasicSetting.js

@@ -1,5 +1,5 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, checkedModuleState, selectedModuleState } from '@/store/canvasAtom'
 import { rectToPolygon, setSurfaceShapePattern, polygonToTurfPolygon } from '@/util/canvas-util'
 import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
 import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
@@ -27,6 +27,7 @@ export function useModuleBasicSetting() {
   const compasDeg = useRecoilValue(compasDegAtom)
   const { setSurfaceShapePattern } = useRoofFn()
   const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
+  const checkedModule = useRecoilValue(checkedModuleState)
 
   useEffect(() => {
     // console.log('basicSetting', basicSetting)
@@ -42,21 +43,6 @@ export function useModuleBasicSetting() {
   // const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useContext(EventContext)
   let selectedModuleInstSurfaceArray = []
 
-  const moduleOptions = {
-    fill: '#BFFD9F',
-    stroke: 'black',
-    strokeWidth: 0.1,
-    selectable: true, // 선택 가능하게 설정
-    lockMovementX: true, // X 축 이동 잠금
-    lockMovementY: true, // Y 축 이동 잠금
-    lockRotation: true, // 회전 잠금
-    lockScalingX: true, // X 축 크기 조정 잠금
-    lockScalingY: true, // Y 축 크기 조정 잠금
-    parentId: moduleSetupSurface.parentId,
-    surfaceId: moduleSetupSurface.id,
-    name: 'module',
-  }
-
   //모듈,회로에서 다른메뉴 -> 배치면으로 갈 경수 초기화
   const restoreModuleInstArea = () => {
     //설치면 삭제
@@ -127,18 +113,6 @@ export function useModuleBasicSetting() {
       setupSurface.setViewLengthText(false)
       canvas.add(setupSurface) //모듈설치면 만들기
 
-      //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
-      if (canvasSetting.roofSizeSet !== 3) {
-        const flowLines = {
-          bottom: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'bottom'),
-          top: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'top'),
-          left: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'left'),
-          right: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'right'),
-        }
-
-        setupSurface.set({ flowLines: flowLines })
-      }
-
       //지붕면 선택 금지
       roof.set({
         selectable: false,
@@ -193,6 +167,16 @@ export function useModuleBasicSetting() {
    * 확인 후 셀을 이동시킴
    */
   const manualModuleSetup = () => {
+    if (checkedModule.length === 0) {
+      swalFire({ text: getMessage('module.place.select.module') })
+      return
+    }
+
+    if (checkedModule.length > 1) {
+      swalFire({ text: getMessage('module.place.select.one.module') })
+      return
+    }
+
     const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
     const batchObjects = canvas
       ?.getObjects()
@@ -204,6 +188,19 @@ export function useModuleBasicSetting() {
           obj.name === BATCH_TYPE.SHADOW,
       ) //도머s 객체
 
+    const moduleOptions = {
+      fill: checkedModule[0].color,
+      stroke: 'black',
+      strokeWidth: 0.1,
+      selectable: true, // 선택 가능하게 설정
+      lockMovementX: true, // X 축 이동 잠금
+      lockMovementY: true, // Y 축 이동 잠금
+      lockRotation: true, // 회전 잠금
+      lockScalingX: true, // X 축 크기 조정 잠금
+      lockScalingY: true, // Y 축 크기 조정 잠금
+      name: 'module',
+    }
+
     if (moduleSetupSurfaces.length !== 0) {
       let tempModule
       let manualDrawModules = []
@@ -221,8 +218,10 @@ export function useModuleBasicSetting() {
           trestlePolygon = moduleSetupSurfaces[i]
           manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
           flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
-          let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113
+          const moduleWidth = Number(checkedModule[0].longAxis) / 10
-          let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172
+          const moduleHeight = Number(checkedModule[0].shortAxis) / 10
+          let width = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
+          let height = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
 
           const points = [
             { x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
@@ -436,7 +435,7 @@ export function useModuleBasicSetting() {
               const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
               //겹치면 안됨
               if (intersection) {
-                alert('도머위에 모듈을 올릴 수 없습니다.')
+                swalFire({ text: getMessage('module.place.overobject') })
                 isIntersection = false
               }
             })
@@ -458,10 +457,10 @@ export function useModuleBasicSetting() {
               canvas?.add(manualModule)
               manualDrawModules.push(manualModule)
             } else {
-              alert('셀끼리 겹치면 안되죠?')
+              swalFire({ text: getMessage('module.place.overlab') })
             }
           } else {
-            alert('나갔죠?!!')
+            swalFire({ text: getMessage('module.place.out') })
           }
         }
       })
@@ -471,12 +470,17 @@ export function useModuleBasicSetting() {
   //자동 모듈 설치(그리드 방식)
   const autoModuleSetup = (placementRef) => {
     initEvent() //마우스 이벤트 초기화
+
+    if (checkedModule.length === 0) {
+      swalFire({ text: getMessage('module.place.select.module') })
+      return
+    }
+
     const isChidori = placementRef.isChidori.current === 'true' ? true : false
     const setupLocation = placementRef.setupLocation.current
     const isMaxSetup = placementRef.isMaxSetup.current === 'true' ? true : false
 
     const moduleSetupSurfaces = moduleSetupSurface //선택 설치면
-
     const notSelectedTrestlePolygons = canvas
       ?.getObjects()
       .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && !moduleSetupSurfaces.includes(obj)) //설치면이 아닌것
@@ -492,7 +496,7 @@ export function useModuleBasicSetting() {
       ) //도머s 객체
 
     if (moduleSetupSurfaces.length === 0) {
-      alert('선택된 모듈 설치면이 없습니다.')
+      swalFire({ text: getMessage('module.place.no.surface') })
       return
     }
 
@@ -527,8 +531,7 @@ export function useModuleBasicSetting() {
       }
     })
 
-    const moduleOptions = {
+    let moduleOptions = {
-      fill: '#BFFD9F',
       stroke: 'black',
       strokeWidth: 0.3,
       selectable: true, // 선택 가능하게 설정
@@ -537,8 +540,6 @@ export function useModuleBasicSetting() {
       lockRotation: true, // 회전 잠금
       lockScalingX: true, // X 축 크기 조정 잠금
       lockScalingY: true, // Y 축 크기 조정 잠금
-      parentId: moduleSetupSurface.parentId,
-      surfaceId: moduleSetupSurface.id,
       name: 'module',
     }
 
@@ -607,22 +608,70 @@ export function useModuleBasicSetting() {
       return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface)
     }
 
-    const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+    /**
-      const flowModuleLine = moduleSetupSurface.flowLines
+     * 모듈의 너비와 높이를 계산하는 함수
-      let startPoint = flowModuleLine.bottom
+     * @param {object} maxLengthLine 최대 길이 라인
+     * @param {object} moduleSetupSurface 모듈 설치면
+     * @param {object} module 모듈
+     * @returns {object} 모듈의 너비와 높이
+     */
+    const getModuleWidthHeight = (maxLengthLine, moduleSetupSurface, module) => {
+      let width =
+        (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.longAxis) : Number(module.shortAxis)) / 10
+      let height =
+        (maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.shortAxis) : Number(module.longAxis)) / 10
+
+      //배치면때는 방향쪽으로 패널이 넓게 누워져야함
+      if (moduleSetupSurface.flowDirection !== undefined) {
+        width =
+          (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
+            ? Number(module.longAxis)
+            : Number(module.shortAxis)) / 10
+        height =
+          (moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
+            ? Number(module.shortAxis)
+            : Number(module.longAxis)) / 10
+      }
+      return { width, height }
+    }
+
+    const getFlowLines = (moduleSetupSurface, module) => {
+      let flowLines = {}
+      if (canvasSetting.roofSizeSet !== 3) {
+        flowLines = {
+          bottom: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'bottom'),
+          top: bottomTopFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'top'),
+          left: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'left'),
+          right: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'right'),
+        }
+      }
+
+      console.log('flowLines', flowLines)
+
+      return flowLines
+    }
+
+    const downFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
+      let setupModule = []
+
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
+        let startPoint = flowLines.bottom
+        const moduleArray = []
 
         if (isCenter) {
           //중앙배치일 경우에는 계산한다
-
+          if (flowLines.bottom.type === 'flat' && flowLines.left.type === 'flat' && flowLines.right.type === 'flat') {
-        if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
             //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
             const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
             const halfModuleWidthLength = width / 2
             startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
 
-          if (flowModuleLine.top.type === 'flat') {
+            if (flowLines.top.type === 'flat') {
               //상단까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
-            const heightLength = Math.abs(flowModuleLine.left.y1 - flowModuleLine.left.y2) //옆에에 길이에서 반을 가른다
+              const heightLength = Math.abs(flowLines.left.y1 - flowLines.left.y2) //옆에에 길이에서 반을 가른다
               const heightMargin = Math.abs(heightLength - height * Math.floor(heightLength / height)) / 2
               startPoint = { ...startPoint, y1: startPoint.y1 - heightMargin }
             }
@@ -652,9 +701,9 @@ export function useModuleBasicSetting() {
         if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
         for (let j = 0; j < diffTopEndPoint; j++) {
-        bottomMargin = 1 * j
+          bottomMargin = 0
           for (let i = 0; i <= totalWidth; i++) {
-          leftMargin = 1 * i
+            leftMargin = 0
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = j % 2 === 0 ? 0 : width / 2
@@ -672,28 +721,58 @@ export function useModuleBasicSetting() {
             let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1)
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id }
             let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+
+            let disjointFromTrestle = checkModuleDisjointSurface(squarePolygon, polygonToTurfPolygon(moduleSetupSurface, true))
+            let isDisjoint = checkModuleDisjointObjects(squarePolygon, containsBatchObjects)
+
+            if (disjointFromTrestle && isDisjoint) {
+              if (index > 0) {
+                setupModule.forEach((item) => {
+                  const isOverlap = item.some((item2) => turf.booleanOverlap(squarePolygon, polygonToTurfPolygon(item2, true)))
+                  if (!isOverlap) {
                     canvas?.add(tempModule)
                     moduleSetupArray.push(tempModule)
+                    moduleArray.push(tempModule)
+                  }
+                })
+              } else {
+                //최초 한번은 그냥 그린다
+                //겹치는지 확인해서 포함된 모듈만 그린다
+                canvas?.add(tempModule)
+                moduleSetupArray.push(tempModule)
+                moduleArray.push(tempModule)
+              }
+            } else {
+              tempModule.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
             }
           }
         }
+        setupModule.push(moduleArray)
+      })
+    }
 
-    const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+    const leftFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
-      const flowModuleLine = moduleSetupSurface.flowLines
+      let setupModule = []
-      let startPoint = flowModuleLine.left
+
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        //육지붕이 아닐때만 넣는다 육지붕일땐 클릭 이벤트에 별도로 넣어놓음
+        let startPoint = flowLines.left
+        const moduleArray = []
 
         //중앙배치일 경우에는 계산한다
         if (isCenter) {
-        if (flowModuleLine.left.type === 'flat' && flowModuleLine.bottom.type === 'flat' && flowModuleLine.top.type === 'flat') {
+          if (flowLines.left.type === 'flat' && flowLines.bottom.type === 'flat' && flowLines.top.type === 'flat') {
             //좌측 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
             const halfWidthLength = Math.abs(startPoint.y1 + startPoint.y2) / 2 //밑에 길이에서 반을 가른다
             const halfModuleWidthLength = height / 2
             startPoint = { ...startPoint, y1: halfWidthLength - halfModuleWidthLength }
-          if (flowModuleLine.right.type === 'flat') {
+            if (flowLines.right.type === 'flat') {
               //우측까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
-            const widthLength = Math.abs(flowModuleLine.top.x1 - flowModuleLine.top.x2) //옆에에 길이에서 반을 가른다
+              const widthLength = Math.abs(flowLines.top.x1 - flowLines.top.x2) //옆에에 길이에서 반을 가른다
               const widthMargin = Math.abs(widthLength - width * Math.floor(widthLength / width)) / 2
               startPoint = { ...startPoint, x1: startPoint.x1 + widthMargin }
             }
@@ -714,9 +793,9 @@ export function useModuleBasicSetting() {
         if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
 
         for (let i = 0; i <= totalWidth; i++) {
-        bottomMargin = i === 0 ? 1 : 2
+          bottomMargin = 0
           for (let j = 0; j < totalHeight; j++) {
-          leftMargin = i === 0 ? 1 : 2
+            leftMargin = 0
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = i % 2 === 0 ? 0 : height / 2
@@ -735,29 +814,55 @@ export function useModuleBasicSetting() {
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
             // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id }
             let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+            let disjointFromTrestle = checkModuleDisjointSurface(squarePolygon, polygonToTurfPolygon(moduleSetupSurface, true))
+            let isDisjoint = checkModuleDisjointObjects(squarePolygon, containsBatchObjects)
+
+            if (disjointFromTrestle && isDisjoint) {
+              if (index > 0) {
+                setupModule.forEach((item) => {
+                  const isOverlap = item.some((item2) => turf.booleanOverlap(squarePolygon, polygonToTurfPolygon(item2, true)))
+                  if (!isOverlap) {
                     canvas?.add(tempModule)
                     moduleSetupArray.push(tempModule)
+                    moduleArray.push(tempModule)
+                  }
+                })
+              } else {
+                //최초 한번은 그냥 그린다
+                //겹치는지 확인해서 포함된 모듈만 그린다
+                canvas?.add(tempModule)
+                moduleSetupArray.push(tempModule)
+                moduleArray.push(tempModule)
               }
             }
           }
+        }
+        setupModule.push(moduleArray)
+      })
+    }
 
-    const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+    const topFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
-      const flowModuleLine = moduleSetupSurface.flowLines
+      let setupModule = []
-      let startPoint = flowModuleLine.top
+
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        let startPoint = flowLines.top
+        const moduleArray = []
 
         if (isCenter) {
           //중앙배치일 경우에는 계산한다
-        if (flowModuleLine.top.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') {
+          if (flowLines.top.type === 'flat' && flowLines.left.type === 'flat' && flowLines.right.type === 'flat') {
             //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
             const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다
             const halfModuleWidthLength = width / 2
             startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength }
 
-          if (flowModuleLine.bottom.type === 'flat') {
+            if (flowLines.bottom.type === 'flat') {
               //상단까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
-            const heightLength = Math.abs(flowModuleLine.left.y1 - flowModuleLine.left.y2) //옆에에 길이에서 반을 가른다
+              const heightLength = Math.abs(flowLines.left.y1 - flowLines.left.y2) //옆에에 길이에서 반을 가른다
               const heightMargin = Math.abs(heightLength - height * Math.floor(heightLength / height)) / 2
               startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength, y1: startPoint.y1 - heightMargin }
             }
@@ -788,9 +893,9 @@ export function useModuleBasicSetting() {
         if (isMaxSetup) diffRightEndPoint = diffRightEndPoint * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
 
         for (let j = 0; j < diffBottomEndPoint; j++) {
-        bottomMargin = j === 0 ? 1 : 2
+          bottomMargin = 0
           for (let i = 0; i < diffRightEndPoint; i++) {
-          leftMargin = i === 0 ? 1 : 2
+            leftMargin = 0
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = j % 2 === 0 ? 0 : width / 2
@@ -808,28 +913,55 @@ export function useModuleBasicSetting() {
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
             // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id }
             let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+
+            let disjointFromTrestle = checkModuleDisjointSurface(squarePolygon, polygonToTurfPolygon(moduleSetupSurface, true))
+            let isDisjoint = checkModuleDisjointObjects(squarePolygon, containsBatchObjects)
+
+            if (disjointFromTrestle && isDisjoint) {
+              if (index > 0) {
+                setupModule.forEach((item) => {
+                  const isOverlap = item.some((item2) => turf.booleanOverlap(squarePolygon, polygonToTurfPolygon(item2, true)))
+                  if (!isOverlap) {
                     canvas?.add(tempModule)
                     moduleSetupArray.push(tempModule)
+                    moduleArray.push(tempModule)
+                  }
+                })
+              } else {
+                //최초 한번은 그냥 그린다
+                //겹치는지 확인해서 포함된 모듈만 그린다
+                canvas?.add(tempModule)
+                moduleSetupArray.push(tempModule)
+                moduleArray.push(tempModule)
               }
             }
           }
+        }
+        setupModule.push(moduleArray)
+      })
+    }
 
-    const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, isCenter = false) => {
+    const rightFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
-      const flowModuleLine = moduleSetupSurface.flowLines
+      let setupModule = []
-      let startPoint = flowModuleLine.right
+
+      checkedModule.forEach((module, index) => {
+        const { width, height } = getModuleWidthHeight(maxLengthLine, moduleSetupSurface, module)
+        const flowLines = getFlowLines(moduleSetupSurface, module)
+        let startPoint = flowLines.right
+        const moduleArray = []
 
         if (isCenter) {
-        if (flowModuleLine.left.type === 'flat' && flowModuleLine.bottom.type === 'flat' && flowModuleLine.top.type === 'flat') {
+          if (flowLines.left.type === 'flat' && flowLines.bottom.type === 'flat' && flowLines.top.type === 'flat') {
             //좌측 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치
             const halfWidthLength = Math.abs(startPoint.y1 + startPoint.y2) / 2 //밑에 길이에서 반을 가른다
             const halfModuleWidthLength = height / 2
             startPoint = { ...startPoint, y1: halfWidthLength + halfModuleWidthLength }
 
-          if (flowModuleLine.right.type === 'flat') {
+            if (flowLines.right.type === 'flat') {
               //우측까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산
-            const widthLength = Math.abs(flowModuleLine.top.x1 - flowModuleLine.top.x2) //옆에에 길이에서 반을 가른다
+              const widthLength = Math.abs(flowLines.top.x1 - flowLines.top.x2) //옆에에 길이에서 반을 가른다
               const widthMargin = Math.abs(widthLength - width * Math.floor(widthLength / width)) / 2
               startPoint = { ...startPoint, x1: startPoint.x1 - widthMargin }
             }
@@ -850,9 +982,9 @@ export function useModuleBasicSetting() {
         if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
 
         for (let i = 0; i <= totalWidth; i++) {
-        bottomMargin = i === 0 ? 1 : 2
+          bottomMargin = 0
           for (let j = 0; j < totalHeight; j++) {
-          leftMargin = j === 0 ? 1 : 2
+            leftMargin = 0
             chidoriLength = 0
             if (isChidori) {
               chidoriLength = i % 2 === 0 ? 0 : height / 2
@@ -871,113 +1003,124 @@ export function useModuleBasicSetting() {
             let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] }))
 
             // if (disjointFromTrestle && isDisjoint) {
-          moduleOptions.surfaceId = moduleSetupSurface.id
+            moduleOptions = { ...moduleOptions, fill: module.color, surfaceId: moduleSetupSurface.id }
             let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon })
+            let disjointFromTrestle = checkModuleDisjointSurface(squarePolygon, polygonToTurfPolygon(moduleSetupSurface, true))
+            let isDisjoint = checkModuleDisjointObjects(squarePolygon, containsBatchObjects)
+
+            if (disjointFromTrestle && isDisjoint) {
+              if (index > 0) {
+                setupModule.forEach((item) => {
+                  const isOverlap = item.some((item2) => turf.booleanOverlap(squarePolygon, polygonToTurfPolygon(item2, true)))
+                  if (!isOverlap) {
                     canvas?.add(tempModule)
                     moduleSetupArray.push(tempModule)
+                    moduleArray.push(tempModule)
+                  }
+                })
+              } else {
+                //최초 한번은 그냥 그린다
+                //겹치는지 확인해서 포함된 모듈만 그린다
+                canvas?.add(tempModule)
+                moduleSetupArray.push(tempModule)
+                moduleArray.push(tempModule)
               }
             }
           }
+        }
+        setupModule.push(moduleArray)
+      })
+    }
 
     moduleSetupSurfaces.forEach((moduleSetupSurface, index) => {
       moduleSetupSurface.fire('mousedown')
       const moduleSetupArray = []
 
+      const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface) //폴리곤을 turf 객체로 변환
+      const containsBatchObjects = objectsIncludeSurface(turfModuleSetupSurface) //배치면에 오브젝트(도머, 개구등)이 있는지 확인하는 로직
+      const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
+
       let maxLengthLine = moduleSetupSurface.lines.reduce((acc, cur) => {
         return acc.length > cur.length ? acc : cur
       })
 
-      const turfModuleSetupSurface = polygonToTurfPolygon(moduleSetupSurface) //폴리곤을 turf 객체로 변환
-      const containsBatchObjects = objectsIncludeSurface(turfModuleSetupSurface) //배치면에 오브젝트(도머, 개구등)이 있는지 확인하는 로직
-
-      let width = maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? 172.2 : 113.4
-      let height = maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? 113.4 : 172.2
-
-      //배치면때는 방향쪽으로 패널이 넓게 누워져야함
-      if (moduleSetupSurface.flowDirection !== undefined) {
-        width = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 172.2 : 113.4
-        height = moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north' ? 113.4 : 172.2
-      }
-
-      const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface)
-
       //처마면 배치
       if (setupLocation === 'eaves') {
         // 흐름방향이 남쪽일때
         if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
       } else if (setupLocation === 'ridge') {
         //용마루
         if (moduleSetupSurface.flowDirection === 'south') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface)
+          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
         }
       } else if (setupLocation === 'center') {
         //중가면
         if (moduleSetupSurface.flowDirection === 'south') {
-          downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
+          downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
         }
         if (moduleSetupSurface.flowDirection === 'west') {
-          leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
+          leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
         }
         if (moduleSetupSurface.flowDirection === 'east') {
-          rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
+          rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
         }
         if (moduleSetupSurface.flowDirection === 'north') {
-          topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface, true)
+          topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
         }
       }
 
-      const setupedModules = moduleSetupArray.filter((module, index) => {
+      // const setupedModules = moduleSetupArray.filter((module, index) => {
-        let disjointFromTrestle = checkModuleDisjointSurface(module.turfPoints, turfModuleSetupSurface)
+      //   let disjointFromTrestle = checkModuleDisjointSurface(module.turfPoints, turfModuleSetupSurface)
-        let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
+      //   let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects)
 
-        if (!(disjointFromTrestle && isDisjoint)) {
+      //   if (!(disjointFromTrestle && isDisjoint)) {
-          canvas?.remove(module)
+      //     canvas?.remove(module)
-          // module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
+      //     // module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 })
-          return false
+      //     return false
-        } else {
+      //   } else {
-          return module
+      //     return module
-        }
+      //   }
-      })
+      // })
 
-      canvas?.renderAll()
+      // canvas?.renderAll()
 
       //나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기
-      setupedModules.forEach((module, index) => {
+      moduleSetupArray.forEach((module, index) => {
         if (isMaxSetup && index > 0) {
-          const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module))
+          const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(moduleSetupArray[index - 1]), polygonToTurfPolygon(module))
           //겹치는지 확인
           if (isOverlap) {
             //겹쳐있으면 삭제
             canvas?.remove(module)
             // module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 })
             canvas.renderAll()
-            setupedModules.splice(index, 1)
+            moduleSetupArray.splice(index, 1)
             return false
           }
         }
       })
 
-      moduleSetupSurface.set({ modules: setupedModules })
+      // moduleSetupSurface.set({ modules: moduleSetupArray })
 
       // const moduleArray = [...moduleIsSetup]
       // moduleArray.push({
@@ -986,7 +1129,7 @@ export function useModuleBasicSetting() {
       // })
       // setModuleIsSetup(moduleArray)
     })
-    calculateForApi()
+    // calculateForApi()
   }
 
   const calculateForApi = () => {
@@ -1248,8 +1391,9 @@ export function useModuleBasicSetting() {
     return hull
   }
 
-  const bottomTopFlowLine = (surface) => {
+  const bottomTopFlowLine = (surface, module) => {
     const flowArray = []
+
     const bottomFlow = surface.lines.reduce(
       (acc, line, index) => {
         if (line.y1 > acc.y1 || (line.y1 === acc.y1 && line.x1 > acc.x1)) {
@@ -1306,7 +1450,7 @@ export function useModuleBasicSetting() {
       const angle2 = Math.abs(Math.round(Math.atan(height2 / adjust2) * (180 / Math.PI) * 1000) / 1000)
       const angle3 = 180 - (angle1 + angle2)
 
-      const charlie = 173.3 // 평행선길이 약간 여유를 줌
+      const charlie = Number(module.longAxis) / 10 + 3 // 평행선길이 약간 여유를 줌
       const alpha = (charlie * Math.sin((angle1 * Math.PI) / 180)) / Math.sin((angle3 * Math.PI) / 180)
       const beta = Math.sqrt(alpha ** 2 + charlie ** 2 - 2 * alpha * charlie * Math.cos((angle2 * Math.PI) / 180))
       const h = beta * Math.sin((angle1 * Math.PI) / 180) // 높이
@@ -1323,8 +1467,8 @@ export function useModuleBasicSetting() {
         strokeWidth: 1,
         selectable: true,
       })
-      // canvas?.add(finalLine)
+      canvas?.add(finalLine)
-      // canvas?.renderAll()
+      canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1365,7 +1509,7 @@ export function useModuleBasicSetting() {
     return rtnObjArray
   }
 
-  const leftRightFlowLine = (surface) => {
+  const leftRightFlowLine = (surface, module) => {
     const flowArray = []
     const leftFlow = surface.lines.reduce(
       (acc, line, index) => {
@@ -1421,7 +1565,7 @@ export function useModuleBasicSetting() {
       const angle2 = Math.abs(Math.round(Math.atan(adjust2 / height2) * (180 / Math.PI) * 1000) / 1000)
       const angle3 = 180 - (angle1 + angle2)
 
-      const charlie = 173.3 // 평행선길이 약간 여유를줌
+      const charlie = Number(module.shortAxis) / 10 + 3 // 평행선길이 약간 여유를 줌
       const alpha = (charlie * Math.sin((angle1 * Math.PI) / 180)) / Math.sin((angle3 * Math.PI) / 180)
       const beta = Math.sqrt(alpha ** 2 + charlie ** 2 - 2 * alpha * charlie * Math.cos((angle2 * Math.PI) / 180))
 
@@ -1446,8 +1590,8 @@ export function useModuleBasicSetting() {
         strokeWidth: 1,
         selectable: true,
       })
-      // canvas?.add(finalLine)
+      canvas?.add(finalLine)
-      // canvas?.renderAll()
+      canvas?.renderAll()
 
       let rtnObj
       //평평하면
@@ -1828,7 +1972,7 @@ export function useModuleBasicSetting() {
               const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
               //겹치면 안됨
               if (intersection) {
-                alert('도머위에 모듈을 올릴 수 없습니다.')
+                swalFire({ text: getMessage('module.place.overobject') })
                 isIntersection = false
               }
             })
@@ -1845,10 +1989,10 @@ export function useModuleBasicSetting() {
               canvas?.add(manualModule)
               manualDrawModules.push(tempModule)
             } else {
-              alert('셀끼리 겹치면 안되죠?')
+              swalFire({ text: getMessage('module.place.overlab') })
             }
           } else {
-            alert('나갔죠?!!')
+            swalFire({ text: getMessage('module.place.out') })
           }
         }
       })

src/hooks/module/useModuleSelection.js

@@ -0,0 +1,177 @@
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { useContext, useEffect, useReducer, useState, useRef } from 'react'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
+import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
+import { pitchSelector } from '@/store/canvasAtom'
+import { useDebounceValue } from 'usehooks-ts'
+
+export function useModuleSelection(props) {
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+
+  const globalPitch = useRecoilValue(pitchSelector) //피치
+
+  const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
+  const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
+  const [moduleList, setModuleList] = useState([{}]) //모듈 목록
+
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
+  const [installHeight, setInstallHeight] = useState('0') //설치 높이
+  const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
+  const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
+  const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+
+  const { getModuleTypeItemList } = useMasterController()
+
+  const { findCommonCode } = useCommonCode()
+
+  //탭별 파라메터 초기화
+  useEffect(() => {
+    setInstallHeight(managementState?.installHeight)
+    setStandardWindSpeed(managementState?.standardWindSpeedId)
+    setVerticalSnowCover(managementState?.verticalSnowCover)
+    setSelectedSurfaceType(managementState?.surfaceType)
+
+    const initParams = {
+      illuminationTp: managementState?.surfaceTypeValue, //면조도
+      instHt: managementState?.installHeight, //설치높이
+      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
+      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
+      inclCd: globalPitch,
+    }
+    setModuleSelectionInitParams(initParams)
+  }, [managementState])
+
+  useEffect(() => {
+    //새로고침시 데이터 날아가는거 방지
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+
+    // 113700 면조도
+    const roughnessCodeList = findCommonCode('113700')
+    roughnessCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setRoughnessCodes(roughnessCodeList)
+
+    // 202000 풍속
+    const windCodeList = findCommonCode('202000')
+    windCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setWindSpeedCodes(windCodeList)
+
+    //지붕재 선택
+    const roofsIds = props.addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd)
+
+    if (roofsIds.length === 0) {
+      return
+    }
+    getModuleData(roofsIds)
+  }, [])
+
+  const getModuleData = async (roofsIds) => {
+    const list = await getModuleTypeItemList(roofsIds)
+    //selectbox에 이름을 넣는다
+    list.data.forEach((item) => {
+      item.name = item.itemNm
+    })
+    //셀렉트박스 데이터 초기화
+    setModuleList(list.data)
+  }
+
+  const handleChangeModule = (option) => {
+    //선택된 모듈
+    setSelectedModules(option) //선택값 저장
+
+    //init 데이터에 선택된 모듈 추가
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      moduleTpCd: option.itemTp,
+    })
+  }
+
+  const handleChangeSurfaceType = (option) => {
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      illuminationTp: option.clCode,
+    })
+  }
+
+  const handleChangeWindSpeed = (option) => {
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      surfaceType: option.clCode,
+    })
+  }
+
+  const handleChangeInstallHeight = (option) => {
+    setInstallHeight(option)
+
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      instHt: option,
+    })
+  }
+
+  const handleChangeVerticalSnowCover = (option) => {
+    setVerticalSnowCover(option)
+
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      stdSnowLd: option,
+    })
+  }
+
+  //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
+
+  // useEffect(() => {
+  //   getConstructionListData(constructionListParams)
+  // }, [constructionListParams])
+
+  // const getConstructionListData = async (params) => {
+  //   if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+  //     const optionsList = await getConstructionList(params)
+  //     console.log('optionsList', optionsList)
+  //     setConstructionList(optionsList.data)
+  //   }
+  // }
+
+  //state 배열에 데이터 추가 함수
+  // const addRoofTabParams = (key, value, excludeArray = []) => {
+  //   const index = roofTabParams.findIndex((obj) => obj.roofTab === roofTab)
+  //   if (index !== -1) {
+  //     roofTabParams[index][key] = value
+  //     if (excludeArray.length > 0) {
+  //       excludeArray.forEach((exclude) => {
+  //         roofTabParams[index][exclude] = ''
+  //       })
+  //     }
+  //     setRoofTabParams((prev) => [...prev.slice(0, index), roofTabParams[index], ...prev.slice(index + 1)])
+  //   }
+  // }
+
+  return {
+    moduleSelectionInitParams,
+    selectedModules,
+    roughnessCodes,
+    windSpeedCodes,
+    managementState,
+    moduleList,
+    selectedSurfaceType,
+    installHeight,
+    standardWindSpeed,
+    verticalSnowCover,
+    handleChangeModule,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
+  }
+}

src/hooks/object/useObjectBatch.js

@@ -36,10 +36,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
   }, [])
 
   const dbClickEvent = () => {
-    console.log('dbClickEvent 실행')
+    // console.log('dbClickEvent 실행')
     const dormerObject = canvas.getObjects().filter((obj) => obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER)
 
-    console.log('dormerObject', dormerObject)
+    // console.log('dormerObject', dormerObject)
 
     if (dormerObject) {
       canvas.off('mouse:dblclick')

src/hooks/option/useCanvasSetting.js

@@ -135,6 +135,8 @@ export function useCanvasSetting() {
       raft: item.raftBase && parseInt(item.raftBase),
       layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
       hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
+      pitch: item.pitch ? parseInt(item.pitch) : 4,
+      angle: item.angle ? parseInt(item.angle) : 21.8,
     }))
     setRoofMaterials(roofLists)
     const selectedRoofMaterial = roofLists[0]
@@ -272,7 +274,7 @@ export function useCanvasSetting() {
   // 기본설정(PlacementShapeSetting) 조회 및 초기화
   const fetchBasicSettings = async () => {
     try {
-      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/0/${correntObjectNo}` }).then((res) => {
+      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/1/${correntObjectNo}` }).then((res) => {
         
         let roofsRow = {}
         let roofsArray = {}
@@ -287,7 +289,7 @@ export function useCanvasSetting() {
           roofsArray = res.map((item) => {
             return {
               roofApply: true,
-              roofSeq: 1,
+              roofSeq: 0,
               roofMatlCd: item.roofMatlCd,
               roofWidth: item.roofWidth,
               roofHeight: item.roofHeight,
@@ -307,7 +309,7 @@ export function useCanvasSetting() {
           roofsArray = [
             {
               roofApply: true,
-              roofSeq: 1,
+              roofSeq: 0,
               roofMatlCd: 'ROOF_ID_WA_53A',
               roofWidth: 265,
               roofHeight: 235,
@@ -390,7 +392,7 @@ export function useCanvasSetting() {
       setCanvasSetting({ ...basicSetting })
       fetchBasicSettings()
     } catch (error) {
-      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+      swalFire({ text: error.message, icon: 'error' })
     }
   }
 

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -651,7 +651,7 @@ export function useAuxiliaryDrawing(id) {
           {
             stroke: 'black',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
             name: 'auxiliaryLine',
             isFixed: true,
           },
@@ -721,7 +721,7 @@ export function useAuxiliaryDrawing(id) {
           newLine = addLine([line1.x1, line1.y1, intersectionPoint.x, intersectionPoint.y], {
             stroke: 'black',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
             name: 'auxiliaryLine',
             isFixed: true,
             intersectionPoint,
@@ -730,7 +730,7 @@ export function useAuxiliaryDrawing(id) {
           newLine = addLine([line1.x2, line1.y2, intersectionPoint.x, intersectionPoint.y], {
             stroke: 'black',
             strokeWidth: 1,
-            selectable: false,
+            selectable: true,
             name: 'auxiliaryLine',
             isFixed: true,
             intersectionPoint,

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -1,9 +1,17 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
-import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
+import { canvasState, currentAngleTypeSelector, currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useEffect, useRef, useState } from 'react'
+import { useAxios } from '@/hooks/useAxios'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
-import { addedRoofsState, basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
+import {
+  correntObjectNoState,
+  addedRoofsState,
+  basicSettingState,
+  roofDisplaySelector,
+  roofMaterialsSelector,
+  selectedRoofMaterialSelector,
+} from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { POLYGON_TYPE } from '@/common/common'
 import { v4 as uuidv4 } from 'uuid'
@@ -14,10 +22,13 @@ import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { menuTypeState } from '@/store/menuAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import { globalLocaleStore } from '@/store/localeAtom'
+import { getChonByDegree, getDegreeByChon } from '@/util/canvas-util'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
   const canvas = useRecoilValue(canvasState)
+  const [correntObjectNo, setCorrentObjectNo] = useRecoilState(correntObjectNoState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
   const { drawDirectionArrow, addLengthText, splitPolygonWithLines, splitPolygonWithSeparate } = usePolygon()
   const [popupId, setPopupId] = useState(uuidv4())
@@ -34,6 +45,10 @@ export function useRoofAllocationSetting(id) {
   const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
   const [currentRoofList, setCurrentRoofList] = useState(roofList)
+  const currentAngleType = useRecoilValue(currentAngleTypeSelector)
+
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const { get, post } = useAxios(globalLocaleState)
 
   const { setSurfaceShapePattern } = useRoofFn()
 
@@ -74,8 +89,118 @@ export function useRoofAllocationSetting(id) {
       swalFire({ text: '할당할 지붕이 없습니다.' })
       closePopup(id)
     }
+
+    // console.log('🚀 ~ useEffect ~ roofMaterials >>>>>>>>>>>>> :', roofMaterials)
+    // console.log('🚀 ~ useEffect ~ basicSetting >>>>>>>>>>>>> :', basicSetting)
+    // console.log('🚀 ~ useEffect ~ roofList >>>>>>>>>>>>> :', roofList)
+    // console.log('🚀 ~ useEffect ~ currentRoofList >>>>>>>>>>>>> :', currentRoofList)
+
+    fetchBasicSettings()
   }, [])
 
+  // 조회 및 초기화
+  const fetchBasicSettings = async () => {
+    try {
+      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/1/${correntObjectNo}` }).then((res) => {
+        console.log('🚀 ~ useRoofAllocationSetting ~ fetchBasicSettings ~ res >>>>>>>>>>>>>>>>>>>>> :', res)
+        let roofsArray = {}
+
+        if (res.length > 0) {
+          roofsArray = res.map((item) => {
+            return {
+              roofApply: item.roofApply,
+              roofSeq: item.roofSeq,
+              roofMatlCd: item.roofMatlCd,
+              roofWidth: item.roofWidth,
+              roofHeight: item.roofHeight,
+              roofHajebichi: item.roofHajebichi,
+              roofGap: item.roofGap,
+              roofLayout: item.roofLayout,
+            }
+          })
+        } else {
+          roofsArray = [
+            {
+              roofApply: true,
+              roofSeq: 0,
+              roofMatlCd: 'ROOF_ID_WA_53A',
+              roofWidth: 265,
+              roofHeight: 235,
+              roofHajebichi: 0,
+              roofGap: 'HEI_455',
+              roofLayout: 'P',
+            },
+          ]
+        }
+
+        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+        const patternData = {
+          roofs: roofsArray, // 만들어진 roofs 배열
+        }
+
+        console.log('fetchBasicSettings roofsArray', roofsArray)
+
+        // 데이터 설정
+        const selectRoofs = []
+        for (let i = 0; i < roofsArray.length; i++) {
+          roofMaterials?.map((material) => {
+            if (material.roofMatlCd === roofsArray[i].roofMatlCd) {
+              selectRoofs.push({
+                ...material,
+                selected: roofsArray[i].roofApply,
+                index: roofsArray[i].roofSeq,
+                id: roofsArray[i].roofMatlCd,
+                width: roofsArray[i].roofWidth,
+                length: roofsArray[i].roofHeight,
+                hajebichi: roofsArray[i].roofHajebichi,
+                raft: roofsArray[i].roofGap,
+                layout: roofsArray[i].roofLayout,
+              })
+              setCurrentRoofList(selectRoofs)
+            }
+          })
+        }
+        setBasicSetting({ ...basicSetting, roofsData: roofsArray })
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+  }
+
+  // 저장
+  const basicSettingSave = async () => {
+    const patternData = {
+      objectNo: correntObjectNo,
+      roofSizeSet: basicSetting.roofSizeSet,
+      roofAngleSet: basicSetting.roofAngleSet,
+      roofMaterialsAddList: currentRoofList.map((item) => ({
+        roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected,
+        roofSeq: item.index === null || item.index === undefined ? 0 : item.index,
+        roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd,
+        roofWidth: item.width === null || item.width === undefined ? 0 : item.width,
+        roofHeight: item.length === null || item.length === undefined ? 0 : item.length,
+        roofHajebichi: item.hajebichi === null || item.hajebichi === undefined ? 0 : item.hajebichi,
+        roofGap: item.raft === null || item.raft === undefined ? 'HEI_455' : item.raft,
+        roofLayout: item.layout === null || item.layout === undefined ? 'P' : item.layout,
+      })),
+    }
+
+    console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
+
+    // HTTP POST 요청 보내기
+    await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData })
+      .then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+
+        //Recoil 설정
+        // setCanvasSetting({ ...basicSetting })
+        fetchBasicSettings()
+      })
+      .catch((error) => {
+        swalFire({ text: error.message, icon: 'error' })
+      })
+  }
+
   const onAddRoofMaterial = () => {
     if (currentRoofList.length >= 4) {
       swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') })
@@ -104,6 +229,8 @@ export function useRoofAllocationSetting(id) {
 
   // 선택한 지붕재로 할당
   const handleSave = () => {
+    basicSettingSave()
+
     // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
     if (checkInnerLines()) {
       addPopup(popupId, 1, <ActualSizeSetting id={popupId} />)
@@ -295,6 +422,67 @@ export function useRoofAllocationSetting(id) {
     setCurrentRoofList(newRoofList)
   }
 
+  const handleChangeInput = (e, type, index) => {
+    const value = e.target.value
+    if (type === 'pitch') {
+      // type이 pitch인 경우 소수점 1자리까지만 입력 가능
+      const reg = /^[0-9]+(\.[0-9]{0,1})?$/
+
+      if (!reg.test(value)) {
+        e.target.value = value.substring(0, value.length - 1)
+        const newRoofList = currentRoofList.map((roof, idx) => {
+          if (idx === index) {
+            return {
+              ...roof,
+              [type]: currentAngleType === 'slope' ? value.substring(0, value.length - 1) : getChonByDegree(value.substring(0, value.length - 1)),
+            }
+          }
+          return roof
+        })
+
+        setCurrentRoofList(newRoofList)
+
+        return
+      } else {
+        const newRoofList = currentRoofList.map((roof, idx) => {
+          if (idx === index) {
+            return {
+              ...roof,
+              [type]: currentAngleType === 'slope' ? value : getChonByDegree(value),
+            }
+          }
+          return roof
+        })
+
+        setCurrentRoofList(newRoofList)
+      }
+
+      return
+    }
+    const newRoofList = currentRoofList.map((roof, idx) => {
+      if (idx === index) {
+        return { ...roof, [type]: value }
+      }
+      return roof
+    })
+
+    setCurrentRoofList(newRoofList)
+  }
+
+  const handleChangePitch = (e, index) => {
+    const value = e.target.value
+    const newRoofList = currentRoofList.map((roof, idx) => {
+      if (idx === index) {
+        const result =
+          currentAngleType === 'slope' ? { pitch: value, angle: getDegreeByChon(value) } : { pitch: getChonByDegree(value), angle: value }
+        return { ...roof, ...result }
+      }
+      return roof
+    })
+
+    setCurrentRoofList(newRoofList)
+  }
+
   return {
     handleSave,
     onAddRoofMaterial,
@@ -313,5 +501,7 @@ export function useRoofAllocationSetting(id) {
     handleChangeLayout,
     handleSaveContext,
     currentRoofList,
+    handleChangeInput,
+    handleChangePitch,
   }
 }

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -159,7 +159,6 @@ export function useRoofShapePassivitySetting(id) {
     } else if (type === TYPES.GABLE) {
       attributes = {
         type: LINE_TYPE.WALLLINE.GABLE,
-        pitch: currentAngleType === ANGLE_TYPE.SLOPE ? pitchRef.current.value : getChonByDegree(pitchRef.current.value),
         offset,
       }
     } else if (type === TYPES.SHED) {

src/hooks/roofcover/useRoofShapeSetting.js

@@ -60,11 +60,11 @@ export function useRoofShapeSetting(id) {
 
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-    if (!outerLineFix || outerLines.length === 0) {
+    // if (!outerLineFix || outerLines.length === 0) {
-      swalFire({ text: '외벽선이 없습니다.' })
+    //   swalFire({ text: '외벽선이 없습니다.' })
-      // setShowRoofShapeSettingModal(false)
+    //   // setShowRoofShapeSettingModal(false)
-      closePopup(id)
+    //   closePopup(id)
-    }
+    // }
 
     return () => {
       if (!isFixRef.current) {

src/hooks/useContextMenu.js

@@ -572,6 +572,29 @@ export function useContextMenu() {
             ],
           ])
           break
+        case 'adsorptionPoint':
+          setContextMenu([
+            [
+              {
+                id: 'remove',
+                name: getMessage('contextmenu.remove'),
+                fn: () => {
+                  canvas.remove(currentObject)
+                  canvas.discardActiveObject()
+                },
+              },
+              {
+                id: 'removeAll',
+                name: getMessage('contextmenu.remove.all'),
+                fn: () => {
+                  removeGrid()
+                  removeAdsorptionPoint()
+                  canvas.discardActiveObject()
+                },
+              },
+            ],
+          ])
+          break
         case 'dimensionGroup':
           setContextMenu([
             [

src/hooks/usePlan.js

@@ -1,15 +1,23 @@
-import { useEffect, useState } from 'react'
+'use client'
+
+import { useContext, useEffect, useState } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
+
 import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
+import { useCanvas } from '@/hooks/useCanvas'
 import { SAVE_KEY } from '@/common/common'
 import { readImage, removeImage } from '@/lib/fileAction'
-import { useCanvas } from '@/hooks/useCanvas'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+
+export function usePlan(params = {}) {
+  const { floorPlanState } = useContext(FloorPlanContext)
 
-export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
   const [selectedPlan, setSelectedPlan] = useState(null)
 
@@ -18,6 +26,9 @@ export function usePlan() {
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [plans, setPlans] = useRecoilState(plansState) // 전체 plan
 
+  const router = useRouter()
+  const pathname = usePathname()
+
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
@@ -192,11 +203,13 @@ export function usePlan() {
    * 현재 plan의 작업상태를 저장 후 이동
    */
   const handleCurrentPlan = async (newCurrentId) => {
+    if (pathname === '/floor-plan') {
       if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
         await saveCanvas()
-      updateCurrentPlan(newCurrentId)
       }
     }
+    updateCurrentPlan(newCurrentId)
+  }
 
   const updateCurrentPlan = (newCurrentId) => {
     setPlans((plans) =>
@@ -211,6 +224,11 @@ export function usePlan() {
     // setBgImage()
   }, [plans])
 
+  // 현재 plan이 변경될 때 마다 현재 plan의 링크로 이동
+  useEffect(() => {
+    handlePlanMove()
+  }, [currentCanvasPlan])
+
   const setBgImage = () => {
     // readImage(selectedPlan?.id)
   }
@@ -296,6 +314,13 @@ export function usePlan() {
     })
   }
 
+  /**
+   * 현재 plan 이동 -> 새로운 링크로 이동
+   */
+  const handlePlanMove = () => {
+    router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.ordering}`)
+  }
+
   return {
     canvas,
     plans,

src/hooks/usePolygon.js

@@ -268,7 +268,7 @@ export const usePolygon = () => {
       surfaceCompass: polygon.surfaceCompass,
       moduleCompass: polygon.moduleCompass,
       visible: isFlowDisplay,
-      pitch: polygon.pitch,
+      pitch: polygon.roofMaterial.pitch ?? 4,
       parentId: polygon.id,
     })
 

src/locales/ja.json

@@ -129,6 +129,7 @@
   "modal.circuit.trestle.setting": "回路と架台設定",
   "modal.circuit.trestle.setting.alloc.trestle": "仮割り当て",
   "modal.circuit.trestle.setting.power.conditional.select": "パワーコンディショナーを選択",
+  "modal.circuit.trestle.setting.power.conditional.select.cold.region": "寒冷地仕様",
   "modal.circuit.trestle.setting.power.conditional.select.name": "名称",
   "modal.circuit.trestle.setting.power.conditional.select.rated.output": "定格出力",
   "modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "回路数",
@@ -475,6 +476,7 @@
   "common.message.pleaseSelect": "{0}を選択してください",
   "common.message.pleaseInput": "{0}を入力してください。",
   "common.message.pleaseInputOr": "{0}または{1}を入力してください。",
+  "common.message.please.input.over": "{0} 이상 값을 입력해주세요.(JA)",
   "common.message.approved ": "承認済み",
   "common.message.errorFieldExist": "エラー項目が存在します",
   "common.message.storeIdExist ": "既に利用されている販売店IDです",
@@ -499,6 +501,8 @@
   "commons.east": "ドン",
   "commons.south": "南",
   "commons.north": "北",
+  "commons.none": "선택안함(JA)",
+  "common.type": "分類",
   "font.style.normal": "보통(JA)",
   "font.style.italic": "기울임꼴(JA)",
   "font.style.bold": "굵게(JA)",
@@ -685,6 +689,8 @@
   "stuff.detail.save.valierror1": "垂直説説は0より大きい値を入力してください",
   "stuff.detail.save.valierror2": "設置高さ0より大きい値を入力してください",
   "stuff.detail.save.valierror3": "{0} 必須入力項目です.",
+  "stuff.detail.save.valierror4": "二次販売店名は必須オプションです.",
+  "stuff.detail.move.confirmMsg": "商品情報画面に移動します。 [保存]していない図面情報は削除されます。商品情報画面に移動しますか？",
   "stuff.planReqPopup.popTitle": "設計依頼検索",
   "stuff.planReqPopup.btn1": "検索",
   "stuff.planReqPopup.btn2": "初期化",
@@ -724,6 +730,11 @@
   "stuff.search.period": "期間検索",
   "stuff.search.schDateTypeU": "更新日",
   "stuff.search.schDateTypeR": "登録日",
+  "stuff.search.schTempFlgT": "一時保存物",
+  "stuff.search.schTempFlg": "含む",
+  "stuff.search.schTempFlg0": "除外",
+  "stuff.search.schTempFlg1": "一時的なものだけを見る",
+  "stuff.search.schMine": "私のものを見る",
   "stuff.search.grid.title": "商品リスト",
   "stuff.search.grid.all": "全体",
   "stuff.search.grid.selected": "選択",
@@ -820,6 +831,7 @@
   "main.popup.login.btn2": "変更しない",
   "main.popup.login.validate1": "入力したパスワードが異なります。",
   "main.popup.login.validate2": "半角10文字以内で入力してください。",
+  "main.popup.login.validate3": "비밀번호를 입력해주세요.",
   "main.popup.login.success": "パスワードが変更されました。",
   "common.canvas.validate.size": "寸法を入力してください.",
   "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
@@ -836,6 +848,7 @@
   "estimate.detail.saleStoreId": "一次販売店名",
   "estimate.detail.estimateDate": "見積日",
   "estimate.detail.otherSaleStoreId": "二次販売店名",
+  "estimate.detail.noOtherSaleStoreId": "二次点なし",
   "estimate.detail.receiveUser": "担当者 ",
   "estimate.detail.objectName": "案件名",
   "estimate.detail.objectRemarks": "メモ",
@@ -940,6 +953,7 @@
   "simulator.table.sub9": "予測発電量 (kWh)",
   "simulator.notice.sub1": "Hanwha Japan 年間発電量",
   "simulator.notice.sub2": "シミュレーション案内事項",
+  "simulator.menu.move.valid1": "見積書を作成した後に、発電シミュレーションの結果を照会することができます。",
   "master.moduletypeitem.message.error": "지붕재 코드를 입력하세요.",
   "can.not.move.module": "모듈을 이동할 수 없습니다.(JA)",
   "can.not.copy.module": "모듈을 복사할 수 없습니다.(JA)",

src/locales/ko.json

@@ -133,6 +133,7 @@
   "modal.circuit.trestle.setting": "회로 및 가대설정",
   "modal.circuit.trestle.setting.alloc.trestle": "가대할당",
   "modal.circuit.trestle.setting.power.conditional.select": "파워컨디셔너 선택",
+  "modal.circuit.trestle.setting.power.conditional.select.cold.region": "한랭지사양",
   "modal.circuit.trestle.setting.power.conditional.select.name": "명칭",
   "modal.circuit.trestle.setting.power.conditional.select.rated.output": "정격출력",
   "modal.circuit.trestle.setting.power.conditional.select.circuit.amount": "회로수",
@@ -484,6 +485,7 @@
   "common.message.pleaseSelect": "Please Select {0}",
   "common.message.pleaseInput": "Please Input a {0}.",
   "common.message.pleaseInputOr": "Please Input a {0} or {1}.",
+  "common.message.please.input.over": "{0} 이상 값을 입력해주세요.",
   "common.message.approved ": "Approved.",
   "common.message.errorFieldExist": "Error Field Exist",
   "common.message.storeIdExist ": "이미 사용하고 있는 판매점 ID 입니다.",
@@ -509,6 +511,7 @@
   "commons.south": "남",
   "commons.north": "북",
   "commons.none": "선택안함",
+  "common.type": "분류",
   "font.style.normal": "보통",
   "font.style.italic": "기울임꼴",
   "font.style.bold": "굵게",
@@ -695,7 +698,9 @@
   "stuff.detail.save.valierror1": "수직적설량은 0보다 큰 값을 입력하세요",
   "stuff.detail.save.valierror2": "설치높이는 0보다 큰 값을 입력하세요",
   "stuff.detail.save.valierror3": "{0} 필수 입력 항목입니다.",
-  "stuff.planReqPopup.popTitle": "설계 요청 검색",
+  "stuff.detail.save.valierror4": "2차 판매점명은 필수 선택사항입니다.",
+  "stuff.detail.move.confirmMsg": "물건정보 화면으로 이동합니다. [저장]하지 않은 도면정보는 삭제됩니다. 물건정보 화면으로 이동하시겠습니까?",
+  "stuff.planReqPopup.popTitle": "설계 의뢰 검색",
   "stuff.planReqPopup.btn1": "검색",
   "stuff.planReqPopup.btn2": "초기화",
   "stuff.planReqPopup.btn3": "닫기",
@@ -734,6 +739,11 @@
   "stuff.search.period": "기간검색",
   "stuff.search.schDateTypeU": "갱신일",
   "stuff.search.schDateTypeR": "등록일",
+  "stuff.search.schTempFlgT": "임시저장 물건",
+  "stuff.search.schTempFlg": "포함",
+  "stuff.search.schTempFlg0": "제외",
+  "stuff.search.schTempFlg1": "임시물건만 조회",
+  "stuff.search.schMine": "내물건보기",
   "stuff.search.grid.title": "물건목록",
   "stuff.search.grid.all": "전체",
   "stuff.search.grid.selected": "선택",
@@ -830,6 +840,7 @@
   "main.popup.login.btn2": "변경안함",
   "main.popup.login.validate1": "입력한 패스워드가 다릅니다.",
   "main.popup.login.validate2": "반각 10자 이내로 입력해주세요.",
+  "main.popup.login.validate3": "비밀번호를 입력해주세요.",
   "main.popup.login.success": "비밀번호가 변경되었습니다.",
   "common.canvas.validate.size": "사이즈를 입력해 주세요.",
   "surface.shape.validate.size.1to2": "①길이는 ②보다 큰 값을 넣어주세요.",
@@ -846,6 +857,7 @@
   "estimate.detail.saleStoreId": "1차 판매점명",
   "estimate.detail.estimateDate": "견적일",
   "estimate.detail.otherSaleStoreId": "2차 판매점명",
+  "estimate.detail.noOtherSaleStoreId": "2차점 없음",
   "estimate.detail.receiveUser": "담당자",
   "estimate.detail.objectName": "안건명",
   "estimate.detail.objectRemarks": "메모",
@@ -950,10 +962,18 @@
   "simulator.table.sub9": "예측발전량 (kWh)",
   "simulator.notice.sub1": "Hanwha Japan 연간 발전량",
   "simulator.notice.sub2": "시뮬레이션 안내사항",
+  "simulator.menu.move.valid1": "견적서를 생성한 후에, 발전시뮬레이션 결과를 조회할 수 있습니다.",
   "master.moduletypeitem.message.error": "지붕재 코드를 입력하세요.",
   "can.not.move.module": "모듈을 이동할 수 없습니다.",
   "can.not.copy.module": "모듈을 복사할 수 없습니다.",
   "can.not.remove.module": "모듈을 삭제할 수 없습니다.",
   "can.not.insert.module": "모듈을 삽입할 수 없습니다.",
-  "can.not.align.module": "모듈을 정렬할 수 없습니다."
+  "selectbox.title": "선택하세요.",
+  "can.not.align.module": "모듈을 정렬할 수 없습니다.",
+  "module.place.overobject": "오브젝트 위에 모듈을 설치 할 수 없습니다.",
+  "module.place.overlab": "모듈을 겹쳐서 설치 할 수 없습니다.",
+  "module.place.out": "설치면 밖으로 모듈을 설치 할 수 없습니다.",
+  "module.place.no.surface": "선택된 모듈 설치면이 없습니다.",
+  "module.place.select.module": "모듈을 선택해주세요.",
+  "module.place.select.one.module": "모듈은 하나만 선택해주세요."
 }

src/store/canvasAtom.js

@@ -373,3 +373,9 @@ export const moduleIsSetupState = atom({
   default: [],
   dangerouslyAllowMutability: true,
 })
+
+export const checkedModuleState = atom({
+  key: 'checkedModuleState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})

src/store/selectedModuleOptions.js

@@ -0,0 +1,87 @@
+import { atom } from 'recoil'
+
+export const selectedModuleState = atom({
+  key: 'selectedModuleState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const selectedModuleOptionsState = atom({
+  key: 'selectedModuleOptionsState',
+  default: {
+    module: {},
+    roofMaterials: [
+      {
+        surfaceType: '', //면조도
+        installHeight: '', //설치 노 ㅍ이
+        standardWindSpeedId: '', //기준풍속
+        verticalSnowCover: '', //수직적설량
+        moduleTpCd: '',
+        roofMatlCd: '',
+        raftBaseCd: '',
+        trestleMkrCd: '',
+        constMthdCd: '',
+        roofBaseCd: '',
+      },
+    ],
+  },
+  dangerouslyAllowMutability: true,
+})
+
+export const moduleSelectionOptionParamsState = atom({
+  key: 'moduleSelectionOptionParams',
+  default: {
+    moduleTpCd: '',
+    roofMatlCd: '',
+    raftBaseCd: '',
+    trestleMkrCd: '',
+    constMthdCd: '',
+    roofBaseCd: '',
+    illuminationTp: '',
+    instHt: '',
+    stdWindSpeed: '',
+    stdSnowLd: '',
+    inclCd: '',
+    roofMatlCd: '',
+  },
+  dangerouslyAllowMutability: true,
+})
+
+export const selectedConstructionListDataState = atom({
+  key: 'selectedConstructionListDataState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const trestleListState = atom({
+  key: 'trestleListState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const constMthdListState = atom({
+  key: 'constMthdListState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const roofBaseListState = atom({
+  key: 'roofBaseListState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const moduleSelectionInitParamsState = atom({
+  key: 'moduleSelectionInitParamsState',
+  default: {},
+  dangerouslyAllowMutability: true,
+})
+
+export const moduleSelectionDataState = atom({
+  key: 'moduleSelectionDataState',
+  default: {
+    common: {},
+    roofConstructions: [],
+  },
+  dangerouslyAllowMutability: true,
+})

src/store/stuffAtom.js

@@ -20,6 +20,8 @@ export const stuffSearchState = atom({
     schSortType: 'U', //정렬조건 (R:최근등록일 U:최근수정일)
     pageNo: 1,
     pageSize: 100,
+    schTempFlg: '', //임시저장여부
+    schMyDataCheck: false, //내데이터만 보기
   },
   dangerouslyAllowMutability: true,
 })

src/styles/_contents.scss

@@ -26,14 +26,14 @@
     min-width: 1280px;
     padding-bottom: 0;
     background-color: #383838;
-  transition: padding 0.17s ease-in-out;
+    transition: padding .17s ease-in-out;
     z-index: 999;
     .canvas-menu-inner{
         position: relative;
         display: flex;
         align-items: center;
         padding: 0 40px 0 20px;
-    background-color: #2c2c2c;
+        background-color: #2C2C2C;
         height: 46.8px;
         z-index: 999;
         .canvas-menu-list{
@@ -53,7 +53,7 @@
                     font-weight: 600;
                     padding: 15px 20px;
                     opacity: 0.55;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
                     .menu-icon{
                         display: block;
                         width: 14px;
@@ -62,27 +62,13 @@
                         background-position: center;
                         background-size: contain;
                         margin-right: 10px;
-            &.con00 {
+                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
-              background-image: url(/static/images/canvas/menu_icon00.svg);
+                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
-            }
+                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
-            &.con01 {
+                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
-              background-image: url(/static/images/canvas/menu_icon01.svg);
+                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
-            }
+                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
-            &.con02 {
+                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
-              background-image: url(/static/images/canvas/menu_icon02.svg);
-            }
-            &.con03 {
-              background-image: url(/static/images/canvas/menu_icon03.svg);
-            }
-            &.con04 {
-              background-image: url(/static/images/canvas/menu_icon04.svg);
-            }
-            &.con05 {
-              background-image: url(/static/images/canvas/menu_icon05.svg);
-            }
-            &.con06 {
-              background-image: url(/static/images/canvas/menu_icon06.svg);
-            }
                     }
                 }
                 &.active{
@@ -114,47 +100,26 @@
                     width: 30px;
                     height: 30px;
                     border-radius: 2px;
-          background-color: #3d3d3d;
+                    background-color: #3D3D3D;
                     background-position: center;
                     background-repeat: no-repeat;
                     background-size: 15px 15px;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
-          &.btn01 {
+                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
-          }
+                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
-          &.btn02 {
+                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
-            background-image: url(../../public/static/images/canvas/side_icon02.svg);
+                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
-          }
+                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
-          &.btn03 {
+                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
-          }
+                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
-          &.btn04 {
+                    &.btn10{background-image: url(../../public/static/images/canvas/side_icon10.svg); background-size: 15px 14px;}
-            background-image: url(../../public/static/images/canvas/side_icon04.svg);
-          }
-          &.btn05 {
-            background-image: url(../../public/static/images/canvas/side_icon05.svg);
-          }
-          &.btn06 {
-            background-image: url(../../public/static/images/canvas/side_icon06.svg);
-          }
-          &.btn07 {
-            background-image: url(../../public/static/images/canvas/side_icon07.svg);
-          }
-          &.btn08 {
-            background-image: url(../../public/static/images/canvas/side_icon08.svg);
-          }
-          &.btn09 {
-            background-image: url(../../public/static/images/canvas/side_icon09.svg);
-          }
-          &.btn10 {
-            background-image: url(../../public/static/images/canvas/side_icon10.svg);
-            background-size: 15px 14px;
-          }
                     &:hover{
-            background-color: #1083e3;
+                        background-color: #1083E3;
                     }
                     &.active{
-            background-color: #1083e3;
+                        background-color: #1083E3;
                     }
                 }
             }
@@ -170,21 +135,11 @@
                         background-repeat: no-repeat;
                         background-position: center;
                         background-size: contain;
-            &.ico01 {
+                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
-              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
-            }
+                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
-            &.ico02 {
+                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
-              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+                        &.ico05{background-image: url(../../public/static/images/canvas/ico-flx05.svg);}
-            }
-            &.ico03 {
-              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
-            }
-            &.ico04 {
-              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
-            }
-            &.ico05 {
-              background-image: url(../../public/static/images/canvas/ico-flx05.svg);
-            }
                     }
                     .name{
                         font-size: 12px;
@@ -214,16 +169,16 @@
                 button{
                     margin-left: auto;
                     height: 100%;
-          background-color: #4b4b4b;
+                    background-color: #4B4B4B;
                     font-size: 13px;
                     font-weight: 400;
                     color: #fff;
                     padding: 0 7.5px;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
                 }
                 &.on{
                     button{
-            background-color: #1083e3;
+                        background-color: #1083E3;
                     }
                 }
             }
@@ -232,7 +187,7 @@
                 align-items: center;
                 justify-content: center;
                 gap: 10px;
-        background-color: #3d3d3d;
+                background-color: #3D3D3D;
                 border-radius: 2px;
                 width: 100px;
                 height: 30px;
@@ -266,7 +221,7 @@
         background-color: #383838;
         width: 100%;
         height: 50px;
-    transition: all 0.17s ease-in-out;
+        transition: all .17s ease-in-out;
         .canvas-depth2-inner{
             display: flex;
             align-items: center;
@@ -318,7 +273,7 @@
                     align-items: center;
                     margin-right: 34px;
                     height: 100%;
-          transition: all 0.17s ease-in-out;
+                    transition: all .17s ease-in-out;
                     button{
                         position: relative;
                         font-size: 12px;
@@ -358,7 +313,7 @@
 // canvas-layout
 .canvas-content{
     padding-top: 46.8px;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     .canvas-frame{
         height: calc(100vh - 129.3px);
     }
@@ -376,11 +331,11 @@
         top: 92.8px;
         left: 0;
         display: flex;
-    background-color: #1c1c1c;
+        background-color: #1C1C1C;
         border-top: 1px solid #000;
         width: 100%;
         min-width: 1280px;
-    transition: all 0.17s ease-in-out;
+        transition: all .17s ease-in-out;
         z-index: 99;
         &.active{
             top: calc(92.8px + 50px);
@@ -396,14 +351,14 @@
                 padding: 9.6px 20px;
                 border-right:1px solid #000;
                 min-width: 0;
-        transition: all 0.17s ease-in-out;
+                transition: all .17s ease-in-out;
                 span{
                     display: flex;
                     align-items: center;
                     width: 100%;
                     font-size: 12px;
                     font-family: 'Pretendard', sans-serif;
-          color: #aaa;
+                    color: #AAA;
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
@@ -441,9 +396,9 @@
             justify-content: center;
             width: 45px;
             padding: 13.5px 0;
-      background-color: #1c1c1c;
+            background-color: #1C1C1C;
             border-right: 1px solid #000;
-      transition: all 0.17s ease-in-out;
+            transition: all .17s ease-in-out;
             span{
                 display: block;
                 width: 9px;
@@ -461,9 +416,9 @@
 .canvas-frame{
     position: relative;
     // height: calc(100% - 36.5px);
-  background-color: #f4f4f7;
+    background-color: #F4F4F7;
     overflow: auto;
-  transition: all 0.17s ease-in-out;
+    transition: all .17s ease-in-out;
     // &::-webkit-scrollbar {
     //     width: 10px;
     //     height: 10px;
@@ -498,7 +453,7 @@
     min-width: 1280px;
     height: 46px;
     border-bottom: 1px solid #000;
-  background: #2c2c2c;
+    background: #2C2C2C;
     z-index: 999;
     .sub-header-inner{
         display: flex;
@@ -521,9 +476,7 @@
                         background-repeat: no-repeat;
                         background-position: center;
                         background-size: cover;
-            &.drawing {
+                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
-              background-image: url(../../public/static/images/main/drawing_icon.svg);
-            }
                     }
                 }
                 &:after{
@@ -534,7 +487,7 @@
                     transform: translateY(-50%);
                     width: 1px;
                     height: 16px;
-          background-color: #d9d9d9;
+                    background-color: #D9D9D9;
                 }
                 &:first-child{
                     padding-left: 0;
@@ -564,7 +517,7 @@
                 span{
                     display: flex;
                     font-size: 12px;
-          color: #aaa;
+                    color: #AAA;
                     font-weight: normal;
                     cursor: default;
                 }
@@ -622,8 +575,8 @@
 .sub-table-box{
     padding: 20px;
     border-radius: 6px; 
-  border: 1px solid #e9eaed;
+    border: 1px solid #E9EAED;
-  background: #fff;
+    background: #FFF;
     box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
     .table-box-title-wrap{
         display: flex;
@@ -642,11 +595,10 @@
                     margin-right: 10px;
                 }
             }
-      .product_tit {
+            .estimate-check-btn{
                 position: relative;
-        font-size: 15px;
+                display: flex;
-        font-weight: 600;
+                align-items: center;
-        color: #1083e3;
                 padding-left: 10px;
                 &::before{
                     content: '';
@@ -656,7 +608,24 @@
                     transform: translateY(-50%);
                     width: 1px;
                     height: 11px;
-          background-color: #d9d9d9;
+                    background-color: #D9D9D9;
+                }
+            }
+            .product_tit{
+                position: relative;
+                font-size: 15px;
+                font-weight: 600;
+                color: #1083E3;
+                padding-left: 10px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 11px;
+                    background-color: #D9D9D9;
                 }
             }
             .option{
@@ -677,7 +646,7 @@
                     span{
                         font-weight: 600;
                         &.red{
-              color: #e23d70;
+                            color: #E23D70;
                         }
                     }
                     &:after{
@@ -688,17 +657,10 @@
                         transform: translateY(-50%);
                         width: 1px;
                         height: 11px;
-            background-color: #d9d9d9;
+                        background-color: #D9D9D9;
-          }
-          &:first-child {
-            padding-left: 0;
-          }
-          &:last-child {
-            padding-right: 0;
-            &::after {
-              display: none;
-            }
                     }
+                    &:first-child{padding-left: 0;}
+                    &:last-child{padding-right: 0;&::after{display: none;}}
                 }
             }
         }
@@ -800,7 +762,7 @@
             width: 105px;
             height: 30px;
             line-height: 30px;
-      background-color: #f4f4f7;
+            background-color: #F4F4F7;
             border-radius: 100px;
             text-align: center;
             font-size: 13px;
@@ -815,12 +777,12 @@
             &.blue{
                 font-size: 16px;
                 font-weight: 700;
-        color: #1083e3;
+                color: #1083E3;
             }
             &.red{
                 font-size: 16px;
                 font-weight: 700;
-        color: #d72a2a;
+                color: #D72A2A;
             }
         }
     }
@@ -834,11 +796,11 @@
     padding: 10px;
     .btn-area{
         padding-bottom: 15px;
-    border-bottom: 1px solid #ecf0f4;
+        border-bottom: 1px solid #ECF0F4;
         .file-upload{
             display: inline-block;
             height: 30px;
-      background-color: #94a0ad;
+            background-color: #94A0AD;
             padding: 0 10px;
             border-radius: 2px;
             font-size: 13px;
@@ -846,9 +808,9 @@
             color: #fff;
             font-weight: 500;
             cursor: pointer;
-      transition: background 0.15s ease-in-out;
+            transition: background .15s ease-in-out;
             &:hover{
-        background-color: #607f9a;
+                background-color: #607F9A;
             }
         }
     }
@@ -873,7 +835,7 @@
             span{
                 position: relative;
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 font-weight: 400;
                 white-space: nowrap;
                 padding-right: 55px;
@@ -903,7 +865,7 @@
                 .return{
                     padding: 0;
                     font-size: 13px;
-          color: #b0bccd;
+                    color: #B0BCCD;
                     text-decoration: line-through;
                 }
                 .return-btn{
@@ -918,10 +880,10 @@
                     padding: 0 9px;
                     margin-left: 10px;
                     background: none;
-          border: 1px solid #b0bccd;
+                    border: 1px solid #B0BCCD;
                     border-radius: 2px;
                     font-size: 12px;
-          color: #b0bccd;
+                    color: #B0BCCD;
                     font-weight: 500;
                     .return-ico{
                         display: block;
@@ -941,8 +903,8 @@
     display: block;
     width: 20px;
     height: 20px;
-  background-color: #94a0ad;
+    background-color: #94A0AD;
-  border: 1px solid #94a0ad;
+    border: 1px solid #94A0AD;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url(../../public/static/images/canvas/estiment_arr.svg);
@@ -953,8 +915,8 @@
     }
     &.on{
         background-color: #fff;
-    border-color: #c2d0dd;
+        border-color: #C2D0DD;
-    background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
+        background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
     }
 }
 .estimate-check-wrap{
@@ -962,7 +924,7 @@
         display: block;
     }
     &.hide{
-    border-bottom: 1px solid #ecf0f4;
+        border-bottom: 1px solid #ECF0F4;
         margin-bottom: 15px;
         .estimate-check-inner{
             display: none;
@@ -977,18 +939,18 @@
     margin-bottom: 30px;
     .special-note-check-item{
         padding: 14px 10px;
-    border: 1px solid #ecf0f4;
+        border: 1px solid #ECF0F4;
         margin-top: -1px;
         margin-right: -1px;
         &.act{
-      background-color: #f7f9fa;
+            background-color: #F7F9FA;
         }
         .special-note-check-box{
             display: flex;
             align-items: center;
             .check-name{
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 cursor: pointer;
                 line-height: 1.3;
             }
@@ -997,10 +959,10 @@
 }
 
 .calculation-estimate{
-  border: 1px solid #ecf0f4;
+    border: 1px solid #ECF0F4;
     border-radius: 3px;
     padding: 24px;
-  height: 350px;
+    height: 170px;
     overflow-y: auto;
     margin-bottom: 30px;
     dl{
@@ -1011,13 +973,13 @@
         dt{
             font-size: 13px;
             font-weight: 600;
-      color: #1083e3;
+            color: #1083E3;
             margin-bottom: 15px;
         }
         dd{
             font-size: 12px;
             font-weight: 400;
-      color: #45576f;
+            color: #45576F;
             margin-bottom: 8px;
             &:last-child{
                 margin-bottom: 0;
@@ -1049,11 +1011,11 @@
         .product-price-tit{
             font-size: 13px;
             font-weight: 400;
-      color: #45576f;
+            color: #45576F;
             margin-right: 10px;
         }
         .select-wrap{
-      width: 110px;
+            width: 150px;
         }
     }
     .product-edit-wrap{
@@ -1087,7 +1049,7 @@
                     transform: translateY(-50%);
                     width: 1px;
                     height: 12px;
-          background-color: #d9d9d9;
+                    background-color: #D9D9D9;
                 }
                 &:first-child{
                     padding-left: 0;
@@ -1099,7 +1061,7 @@
                     padding-right: 0;
                 }
                 &.item01{
-          color: #3bbb48;
+                    color: #3BBB48;
                     span{
                         background-image: url(../../public/static/images/sub/open_ico.svg);
                     }
@@ -1111,13 +1073,13 @@
                     }
                 }
                 &.item03{
-          color: #0191c9;
+                    color: #0191C9;
                     span{
                         background-image: url(../../public/static/images/sub/attachment_ico.svg);
                     }
                 }
                 &.item04{
-          color: #f16a6a;
+                    color: #F16A6A;
                     span{
                         background-image: url(../../public/static/images/sub/click_check_ico.svg);
                     }
@@ -1179,23 +1141,23 @@
     table{
         table-layout: fixed;
         border-collapse:collapse;
-    border: 1px solid #ecf0f4;
+        border: 1px solid #ECF0F4;
         border-radius: 4px;
         thead{
             th{
                 padding: 4.5px 0;
-        border-bottom: 1px solid #ecf0f4;
+                border-bottom: 1px solid #ECF0F4;
                 text-align: center;
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 font-weight: 500;
-        background-color: #f8f9fa;
+                background-color: #F8F9FA;
             }
         }
         tbody{
             td{
                 font-size: 13px;
-        color: #45576f;
+                color: #45576F;
                 text-align: center;
                 padding: 4.5px 0;
             }
@@ -1209,13 +1171,13 @@
     .simulation-tit-wrap{
         flex: none;
         padding-right: 40px;
-    border-right: 1px solid #eeeeee;
+        border-right: 1px solid #EEEEEE;
         span{
             display: block;
             position: relative;
             padding-left: 60px;
             font-size: 15px;
-      color: #14324f;
+            color: #14324F;
             font-weight: 600;
             &::before{
                 content: '';
@@ -1243,7 +1205,7 @@
             }
             dd{
                 font-size: 12px;
-        color: #45576f;
+                color: #45576F;
                 font-weight: 400;
                 line-height: 24px;
             }
@@ -1251,8 +1213,7 @@
                 margin-bottom: 0;
             }
         }
-    ul,
+        ul, ol{
-    ol {
             list-style: unset;
         }
     }
@@ -1261,10 +1222,10 @@
 .module-total{
     display: flex;
     align-items: center;
-  background-color: #f8f9fa;
+    background-color: #F8F9FA;
     padding: 9px 0;
     margin-right: 4px;
-  border: 1px solid #ecf0f4;
+    border: 1px solid #ECF0F4;
     border-top: none;
     .total-title{
         flex: 1;
@@ -1287,7 +1248,7 @@
 .information-help-wrap{
     display: flex;
     padding: 24px;
-  background-color: #f4f4f4;
+    background-color: #F4F4F4;
     border-radius: 4px;
     margin-bottom: 15px;
     .information-help-tit-wrap{
@@ -1295,7 +1256,7 @@
         display: flex;
         align-items: center;
         padding-right: 40px;
-    border-right: 1px solid #e0e0e3;
+        border-right: 1px solid #E0E0E3;
         .help-tit-icon{
             width: 40px;
             height: 40px;
@@ -1307,7 +1268,7 @@
         .help-tit{
             font-size: 13px;
             font-weight: 600;
-      color: #45576f;
+            color: #45576F;
         }
     }
     .information-help-guide{
@@ -1316,7 +1277,7 @@
             display: block;
             font-size: 12px;
             font-weight: 400;
-      color: #45576f;
+            color: #45576F;
             margin-bottom: 7px;
             &:last-child{
                 margin-bottom: 0;
@@ -1330,7 +1291,7 @@
     flex-direction: column;
     align-items: center;
     padding: 10px 0 30px 0;
-  border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid #E5E5E5;
     margin-bottom: 24px;
     .community-search-box{
         position: relative;
@@ -1349,7 +1310,7 @@
             font-weight: 400;
             color: #101010;
             &::placeholder{
-        color: #c8c8c8;
+                color: #C8C8C8;
             }
         }
         .community-search-ico{
@@ -1368,10 +1329,10 @@
     .community-search-keyword{
         font-size: 13px;
         font-weight: 400;
-    color: #45576f;
+        color: #45576F;
         span{
             font-weight: 600;
-      color: #f16a6a;
+            color: #F16A6A;
         }
     }
 }
@@ -1386,15 +1347,15 @@
         align-items: center;
         padding: 24px;
         border-radius: 4px;
-    border: 1px solid #e5e5e5;
+        border: 1px solid #E5E5E5;
-    background: #fff;
+        background: #FFF; 
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         .file-item-info{
             .item-num{
                 display: inline-block;
                 padding: 6px 17.5px;
                 border-radius: 60px;
-        background-color: #f4f4f7;
+                background-color: #F4F4F7;
                 font-size: 13px;
                 font-weight: 600;
                 color: #101010;
@@ -1426,7 +1387,7 @@
             }
         }
         &:hover{
-      background-color: #f4f4f7;
+            background-color: #F4F4F7;
         }
     }
 }
@@ -1439,7 +1400,7 @@
     height: 148px;
     padding: 24px;
     border-radius: 4px;
-  border: 1px solid #e5e5e5;
+    border: 1px solid #E5E5E5;
     font-size: 16px;
     font-weight: 500;
     color: #344356;
@@ -1451,8 +1412,8 @@
     align-items: center;
     width: 200px;
     height: 30px;
-  background-color: #fafafa;
+    background-color: #FAFAFA;
-  border: 1px solid #eee;
+    border: 1px solid #EEE;
     padding: 0 10px;
     input{
         font-size: 13px;
@@ -1576,4 +1537,5 @@
             } 
         } 
     } 
+    
 }

src/styles/_modal.scss

@@ -5,24 +5,12 @@ $pop-normal-size: 12px;
 $alert-color: #101010;
 
 @keyframes mountpop{
-  from {
+    from{opacity: 0; scale: 0.95;}
-    opacity: 0;
+    to{opacity: 1; scale: 1;}
-    scale: 0.95;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
 }
 @keyframes unmountpop{
-  from {
+    from{opacity: 1; scale: 1;}
-    opacity: 1;
+    to{opacity: 0; scale: 0.95;}
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 0.95;
-  }
 }
 
 .normal-font{
@@ -97,10 +85,10 @@ $alert-color: #101010;
         width: 900px;
     }
     &.mount{
-    animation: mountpop 0.17s ease-in-out forwards;
+        animation: mountpop .17s ease-in-out forwards;
     }
     &.unmount{
-    animation: unmountpop 0.17s ease-in-out forwards;
+        animation: unmountpop .17s ease-in-out forwards;
     }
     &.alert{
         position: absolute;
@@ -205,7 +193,7 @@ $alert-color: #101010;
         }
     }
     .outer-line-wrap{
-    border-top: 1px solid #3c3c3c;
+        border-top: 1px solid #3C3C3C;
         margin-top: 10px;
         padding-top: 15px;
         margin-bottom: 15px;
@@ -227,7 +215,7 @@ $alert-color: #101010;
 .adsorption-point{
     display: flex;
     align-items: center;
-  background-color: #3a3a3a;
+    background-color: #3A3A3A;
     border-radius: 3px;
     padding-left: 11px;
     overflow: hidden;
@@ -248,7 +236,7 @@ $alert-color: #101010;
     &.act{
         i{
             color: $pop-color;
-      background-color: #1083e3;
+            background-color: #1083E3;
         }
     }
 }
@@ -271,7 +259,7 @@ $alert-color: #101010;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #D9D9D9;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
@@ -282,7 +270,7 @@ $alert-color: #101010;
         display: flex;
         align-items: center;
         background-color: transparent;
-    border: 1px solid #3d3d3d;
+        border: 1px solid #3D3D3D;
         border-radius: 2px;
         padding: 15px 10px;
         gap: 20px;
@@ -312,9 +300,7 @@ $alert-color: #101010;
     }
 }
 .select-form{
-  .sort-select {
+    .sort-select{width: 100%;}
-    width: 100%;
-  }
 }
 .grid-select{
     flex: 1;
@@ -359,6 +345,7 @@ $alert-color: #101010;
     color: $pop-color;
     font-weight: $pop-normal-weight;
     padding-bottom: 15px;
+
 }
 .grid-direction{
     display: flex;
@@ -375,17 +362,11 @@ $alert-color: #101010;
     background-position: center;
     background-size: 16px 15px;
     border-radius: 50%;
-  transition: all 0.15s ease-in-out;
+    transition: all .15s ease-in-out;
     opacity: 0.6;
-  &.down {
+    &.down{transform: rotate(180deg);}
-    transform: rotate(180deg);
+    &.left{transform: rotate(-90deg);}
-  }
+    &.right{transform: rotate(90deg);}
-  &.left {
-    transform: rotate(-90deg);
-  }
-  &.right {
-    transform: rotate(90deg);
-  }
     &:hover,
     &.act{
         opacity: 1;
@@ -471,11 +452,10 @@ $alert-color: #101010;
     }
     &.light{
         padding: 0;
-    th,
+        th,td{
-    td {
             color: $alert-color;
             border-bottom: none;
-      border-top: 1px solid #efefef;
+            border-top: 1px solid #EFEFEF;
         }
         th{
             padding: 14px 0;
@@ -529,6 +509,7 @@ $alert-color: #101010;
         color: $pop-color;
         font-weight: $pop-normal-weight;
     }
+
 }
 
 .img-edit-wrap{
@@ -544,7 +525,7 @@ $alert-color: #101010;
         background-color: #fff;
         border-radius: 2px;
         cursor: pointer;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         .img-edit{
             width: 16px;
             height: 16px;
@@ -564,6 +545,7 @@ $alert-color: #101010;
     margin-left: 10px;
     input{
         flex: 1;
+
     }
     .img-check{
         flex: none;
@@ -589,12 +571,8 @@ $alert-color: #101010;
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
-    &.fail {
+        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
-      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
-    }
-    &.success {
-      background-image: url(../../public/static/images/canvas/img_check_success.svg);
-    }
     }
 }
 
@@ -674,7 +652,7 @@ $alert-color: #101010;
         align-items: center;
         justify-content: center;
         width: 50%;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
         border-radius: 2px ;
     }
 }
@@ -682,7 +660,7 @@ $alert-color: #101010;
 // 외벽선 속성 설정
 .properties-guide{
     font-size: $pop-normal-size;
-  color: #aaa;
+    color: #AAA;
     font-weight: $pop-normal-weight;
     margin-bottom: 14px;
 }
@@ -711,17 +689,17 @@ $alert-color: #101010;
             color: #fff;
             font-weight: 700;
             border-radius: 2px;
-      transition: all 0.15s ease-in-out;
+            transition: all .15s ease-in-out;
             &.green{
                 background-color: #305941;
-        border: 1px solid #45cd7d;
+                border: 1px solid #45CD7D;
                 &:hover{
                     background-color: #3a6b4e;
                 }
             }
             &.blue{
-        background-color: #2e5360;
+                background-color: #2E5360;
-        border: 1px solid #3fbae6;
+                border: 1px solid #3FBAE6;
                 &:hover{
                     background-color: #365f6e;
                 }
@@ -743,8 +721,8 @@ $alert-color: #101010;
         justify-content: center;
         width: 100%;
         padding: 13px;
-    background-color: #3d3d3d;
+        background-color: #3D3D3D;
-    transition: background 0.15s ease-in-out;
+        transition: background .15s ease-in-out;
         img{
             max-width: 100%;
         }
@@ -755,17 +733,13 @@ $alert-color: #101010;
         color: $pop-color;
         margin-top: 10px;
         text-align: center;
-    transition: color 0.15s ease-in-out;
+        transition: color .15s ease-in-out;
     }
     .shape-menu-box{
         &.act,
         &:hover{
-      .shape-box {
+            .shape-box{background-color: #008BFF;}
-        background-color: #008bff;
+            .shape-title{color: #008BFF;}
-      }
-      .shape-title {
-        color: #008bff;
-      }
         }
     }
 }
@@ -780,7 +754,7 @@ $alert-color: #101010;
 }
 .discrimination-box{
     padding: 16px 12px;
-  border: 1px solid #3d3d3d;
+    border: 1px solid #3D3D3D;
     border-radius: 2px;
 }
 
@@ -813,12 +787,12 @@ $alert-color: #101010;
             align-items: center;
             justify-content: center;
             padding: 5px;
-      background-color: #3d3d3d;
+            background-color: #3D3D3D;
-      border: 1px solid #3d3d3d;
+            border: 1px solid #3D3D3D;
             border-radius: 2px;
             cursor: pointer;
             &.act{
-        border: 1px solid #ed0004;
+                border: 1px solid #ED0004;
             }
         }
         &:last-child{
@@ -917,7 +891,7 @@ $alert-color: #101010;
         border: 1px solid #646464;
         border-radius: 2px;
         padding: 0 10px;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         i{
             height: 15px;
             display: block;
@@ -925,7 +899,7 @@ $alert-color: #101010;
             background-repeat: no-repeat;
             background-position: center;
             background-size: cover;
-      transition: all 0.15s ease-in-out;
+            transition: all .15s ease-in-out;
             &.allocation01{
                 background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
                 width: 15px;
@@ -978,9 +952,7 @@ $alert-color: #101010;
         height: 34px;
         background-color: #373737;
         border: 1px solid #676767;
-    transition:
+        transition: background .15s ease-in-out, border .15s ease-in-out;
-      background 0.15s ease-in-out,
-      border 0.15s ease-in-out;
         .shape-box{
             display: flex;
             justify-content: center;
@@ -992,8 +964,8 @@ $alert-color: #101010;
         }
         &.act,
         &:hover{
-      border-color: #008bff;
+            border-color: #008BFF;
-      background-color: #008bff;
+            background-color: #008BFF;
         }
     }
 }
@@ -1008,27 +980,18 @@ $alert-color: #101010;
     .library-btn{
         width: 100%;
         height: 34px;
-    border: 1px solid #6c6c6c;
+        border: 1px solid #6C6C6C;
         border-radius: 2px;
         background-color: #373737;
         background-repeat: no-repeat;
         background-position: center;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
-    &.ico01 {
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
-      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
-      background-size: 19px 18px;
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
-    }
-    &.ico02 {
-      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
-      background-size: 15px 20px;
-    }
-    &.ico03 {
-      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
-      background-size: 19px 16px;
-    }
         &:hover{
-      border-color: #1083e3;
+            border-color: #1083E3;
-      background-color: #1083e3;
+            background-color: #1083E3;
         }
     }
 }
@@ -1114,27 +1077,11 @@ $alert-color: #101010;
         position: absolute;
         font-size: 12px;
         font-weight: 500;
-    color: #b1b1b1;
+        color: #B1B1B1;
-    &.top {
+        &.top{top: 0; left: 50%; transform: translateX(-50%);}
-      top: 0;
+        &.right{top: 50%; right: 0; transform: translateY(-50%);}
-      left: 50%;
+        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
-      transform: translateX(-50%);
+        &.left{top: 50%; left: 0; transform: translateY(-50%);}
-    }
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-    }
-    &.bottom {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.left {
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-    }
     }
     .plane-btn{
         position: absolute;
@@ -1146,27 +1093,11 @@ $alert-color: #101010;
         background-repeat: no-repeat;
         background-position: center;
         border-radius: 50%;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
-    &.up {
+        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
-      top: 22px;
+        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
-      left: 50%;
+        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
-      transform: translateX(-50%);
+        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
-    }
-    &.right {
-      top: 50%;
-      right: 32px;
-      transform: translateY(-50%) rotate(90deg);
-    }
-    &.down {
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%) rotate(180deg);
-    }
-    &.left {
-      top: 50%;
-      left: 32px;
-      transform: translateY(-50%) rotate(270deg);
-    }
         &:hover,
         &.act{
             background-color: #fff;
@@ -1232,7 +1163,7 @@ $alert-color: #101010;
 .warning{
     font-size: $pop-normal-size;
     font-weight: $pop-normal-weight;
-  color: #ffafaf;
+    color: #FFAFAF;
 }
 
 // 각 변 속성 변경
@@ -1288,157 +1219,37 @@ $alert-color: #101010;
             top: 12.5px;
             left: 50%;
             font-size: 11px;
-      color: #8b8b8b;
+            color: #8B8B8B;
             font-weight: 500;
             -webkit-user-select: none;
             -moz-user-select: none;
             -ms-use-select: none;
             user-select: none;
         }
-    &:nth-child(1) {
+        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
-      transform: rotate(180deg) translate(-50%, -50%);
+        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
-      i {
+        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
-        transform: translateX(-50%) rotate(180deg);
+        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
-      }
+        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
-    }
+        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
-    &:nth-child(2) {
+        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
-      transform: rotate(195deg) translate(-50%, -50%);
+        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
-      i {
+        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
-        transform: translateX(-50%) rotate(165deg);
+        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
-      }
+        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
-    }
+        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
-    &:nth-child(3) {
+        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
-      transform: rotate(210deg) translate(-50%, -50%);
+        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
-      i {
+        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
-        transform: translateX(-50%) rotate(150deg);
+        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
-      }
+        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
-    }
+        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
-    &:nth-child(4) {
+        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
-      transform: rotate(225deg) translate(-50%, -50%);
+        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
-      i {
+        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
-        transform: translateX(-50%) rotate(135deg);
+        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
-      }
+        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
-    }
+        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
-    &:nth-child(5) {
-      transform: rotate(240deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(120deg);
-      }
-    }
-    &:nth-child(6) {
-      transform: rotate(255deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(105deg);
-      }
-    }
-    &:nth-child(7) {
-      transform: rotate(270deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(90deg);
-      }
-    }
-    &:nth-child(8) {
-      transform: rotate(285deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(75deg);
-      }
-    }
-    &:nth-child(9) {
-      transform: rotate(300deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(60deg);
-      }
-    }
-    &:nth-child(10) {
-      transform: rotate(315deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(45deg);
-      }
-    }
-    &:nth-child(11) {
-      transform: rotate(330deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(30deg);
-      }
-    }
-    &:nth-child(12) {
-      transform: rotate(345deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(15deg);
-      }
-    }
-    &:nth-child(13) {
-      transform: rotate(0deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(0deg);
-      }
-    }
-    &:nth-child(14) {
-      transform: rotate(15deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-15deg);
-      }
-    }
-    &:nth-child(15) {
-      transform: rotate(30deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-30deg);
-      }
-    }
-    &:nth-child(16) {
-      transform: rotate(45deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-45deg);
-      }
-    }
-    &:nth-child(17) {
-      transform: rotate(60deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-60deg);
-      }
-    }
-    &:nth-child(18) {
-      transform: rotate(75deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-75deg);
-      }
-    }
-    &:nth-child(19) {
-      transform: rotate(90deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-90deg);
-      }
-    }
-    &:nth-child(20) {
-      transform: rotate(105deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-105deg);
-      }
-    }
-    &:nth-child(21) {
-      transform: rotate(120deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-120deg);
-      }
-    }
-    &:nth-child(22) {
-      transform: rotate(135deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-135deg);
-      }
-    }
-    &:nth-child(23) {
-      transform: rotate(150deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-150deg);
-      }
-    }
-    &:nth-child(24) {
-      transform: rotate(165deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-165deg);
-      }
-    }
         &.act{
             &::after{
                 content: '';
@@ -1492,13 +1303,13 @@ $alert-color: #101010;
         border-radius: 2px;
         background-color: transparent;
         font-size: 12px;
-    color: #aaa;
+        color: #AAA;
         text-align: center;
         cursor: default;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &.act{
-      background-color: #1083e3;
+            background-color: #1083E3;
-      border: 1px solid #1083e3;
+            border: 1px solid #1083E3;
             color: #fff;
             font-weight: 500;
         }
@@ -1511,7 +1322,7 @@ $alert-color: #101010;
         background-position: center;
         background-size: cover;
         background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &.act{
             background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
         }
@@ -1544,9 +1355,7 @@ $alert-color: #101010;
                 top: 22px;
             }
             &.act{
-        i {
+                i{color: #8B8B8B;}
-          color: #8b8b8b;
-        }
             }
         }
     }
@@ -1578,7 +1387,7 @@ $alert-color: #101010;
         height: 30px;
         font-size: 12px;
         font-weight: 400;
-    transition: all 0.15s ease-in-out;
+        transition: all .15s ease-in-out;
         &:first-child{
             border-left: 1px solid #505050;
         }
@@ -1592,7 +1401,7 @@ $alert-color: #101010;
 
 .module-table-box{
     flex: 1;
-  background-color: #3d3d3d;
+    background-color: #3D3D3D;
     border-radius: 2px;
     .module-table-inner{
         padding: 10px;
@@ -1605,7 +1414,7 @@ $alert-color: #101010;
             padding: 10px 0;
             font-size: 12px;
             color: #fff;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .eaves-keraba-table{
             width: 100%;
@@ -1628,7 +1437,7 @@ $alert-color: #101010;
     .warning-guide{
         padding: 20px;
         .warning{
-      color: #ffcaca;
+            color: #FFCACA;
             max-height: 55px;
             overflow-y: auto;
             padding-right: 30px;
@@ -1637,7 +1446,7 @@ $alert-color: #101010;
                 background-color: transparent;
             }
             &::-webkit-scrollbar-thumb {
-        background-color: #d9d9d9;
+                background-color: #D9D9D9;
             }
             &::-webkit-scrollbar-track {
                 background-color: transparent;
@@ -1648,7 +1457,7 @@ $alert-color: #101010;
 
 .module-self-table{
     display: table;
-  border-top: 1px solid #4d4d4d;
+    border-top: 1px solid #4D4D4D;
     border-collapse: collapse;
     width: 100%;
     .self-table-item{
@@ -1657,7 +1466,7 @@ $alert-color: #101010;
         .self-item-th{
             display: table-cell;
             vertical-align: middle;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .self-item-th{
             width: 60px;
@@ -1685,7 +1494,7 @@ $alert-color: #101010;
 .hexagonal-wrap{
     .hexagonal-item{
         padding: 15px 0;
-    border-bottom: 1px solid #4d4d4d;
+        border-bottom: 1px solid #4D4D4D;
         &:first-child{
             padding-top: 0;
         }
@@ -1710,24 +1519,51 @@ $alert-color: #101010;
 // 회로 및 가대설정
 .circuit-check-inner{
     padding: 5px 0;
+    &.overflow{
+        overflow-y: auto;
+        max-height: 100px;
+        min-height: 60px;
+        &::-webkit-scrollbar {
+            width: 4px;
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #D9D9D9;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+    }
+    .d-check-box{
+        margin-bottom: 15px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+    }
 }
 
 .x-scroll-table{
-  overflow-x: auto;
+    overflow: auto;
     padding-bottom: 5px;
+    background-color: transparent;
+    max-height: 170px;
     .roof-module-table{
         min-width: 1200px;
     }
     &::-webkit-scrollbar {
+        width: 4px;
         height: 4px;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #b4b4b4;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
     }
+    &::-webkit-scrollbar-corner{
+        background-color: transparent;
+    }
 }
 
 .circuit-right-wrap{
@@ -1741,7 +1577,7 @@ $alert-color: #101010;
     gap: 5px;
     min-height: 60px;
     padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.20);
     span{
         display: inline-flex;
         align-items: center;
@@ -1766,19 +1602,24 @@ $alert-color: #101010;
 }
 
 .circuit-overflow{
-  max-height: 400px;
+    overflow-x: auto;
-  overflow-y: auto;
+    margin-bottom: 25px;
-  margin-bottom: 15px;
     &::-webkit-scrollbar {
-    width: 4px;
+        height: 4px;
         background-color: transparent;
     }
     &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
+        background-color: #D9D9D9;
     }
     &::-webkit-scrollbar-track {
         background-color: transparent;
     }
+    .module-table-box{
+        display: flex;
+        &.by-max{
+            min-width: 886px;
+        }
+    }
 }
 
 .circuit-table-flx-wrap{
@@ -1833,10 +1674,10 @@ $alert-color: #101010;
             height: 16px;
             &.pink{
                 border: 2px solid #ce1c9c;
-        background-color: #16417d;
+                background-color: #16417D;
             }
             &.white{
-        border: 2px solid #fff;
+                border: 2px solid #FFF;
                 background-color: #001027;
             }
         }
@@ -1861,7 +1702,7 @@ $alert-color: #101010;
             .react-colorful__pointer{
                 width: 15px;
                 height: 15px;
-        border: 4px solid #fff;
+                border: 4px solid #Fff;
             }
             .react-colorful__saturation{
                 border-radius: 2px;
@@ -1951,6 +1792,7 @@ $alert-color: #101010;
         min-height: 80px;
         background-color: #fff;
     }
+    
 }
 
 // 치수선 설정
@@ -2070,22 +1912,10 @@ $alert-color: #101010;
                 border-radius: 50%;
             }
         }
-    &:nth-child(1) {
+        &:nth-child(1){ top: 0; left: 0; }
-      top: 0;
+        &:nth-child(2){ top: 0; right: 0; }
-      left: 0;
+        &:nth-child(3){ bottom: 0; left: 0; }
-    }
+        &:nth-child(4){ bottom: 0; right: 0; }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-    &:nth-child(4) {
-      bottom: 0;
-      right: 0;
-    }
     }
     .size-box{
         position: absolute;
@@ -2169,6 +1999,7 @@ $alert-color: #101010;
     &.tab2{
         margin-top: 10px;
         gap: 15px;
+        
     }
     .module-flex-item{
         flex: 1;
@@ -2177,7 +2008,7 @@ $alert-color: #101010;
             font-weight: 500;
             color: #fff;
             padding-bottom: 10px;
-      border-bottom: 1px solid #4d4d4d;
+            border-bottom: 1px solid #4D4D4D;
         }
         .flex-item-btn-wrap{
             display: grid;
@@ -2225,12 +2056,12 @@ $alert-color: #101010;
 }
 .module-bottom{
     padding-bottom: 15px;
-  border-bottom: 1px solid #4d4d4d;
+    border-bottom: 1px solid #4D4D4D;
 }
 
 .reset-word{
     font-size: 12px;
-  color: #ffcaca;
+    color: #FFCACA;
     font-weight: 400;
     margin-top: 10px;
 }

src/styles/_table.scss

@@ -311,6 +311,25 @@ table{
                 }
             }
         }
+        &.min{
+            table{
+                tbody{
+                    max-height: 150px;
+                    td{
+                        height: 30px;
+                    }
+                }
+            }
+        }
+    }
+    &.min{
+        table{
+            tbody{
+                td{
+                    font-size: 11px;
+                }
+            }
+        }
     }
 }
 

src/util/canvas-util.js

@@ -259,7 +259,7 @@ export const getDegreeByChon = (chon) => {
   // tan(theta) = height / base
   const radians = Math.atan(chon / 10)
   // 라디안을 도 단위로 변환
-  return Number((radians * (180 / Math.PI)).toFixed(2))
+  return Number((radians * (180 / Math.PI)).toFixed(1))
 }
 
 /**
@@ -268,7 +268,7 @@ export const getDegreeByChon = (chon) => {
  * @returns {number}
  */
 export const getChonByDegree = (degree) => {
-  return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(2))
+  return Number((Math.tan((degree * Math.PI) / 180) * 10).toFixed(1))
 }
 
 /**