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_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-qa.q-cells.jp:8120/qm/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-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(() => {
-    setManagementStateLoaded(managementState)
+    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 { useAxios } from '@/hooks/useAxios'
-import { globalLocaleStore } from '@/store/localeAtom'
+import { useRecoilState } from 'recoil'
 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,20 +32,25 @@ export default function QSelectBox({
    * @returns {string} 초기 상태
    */
   const handleInitState = () => {
-    //title이 있으면 우선 보여준다(다른 키들 무시)
-    if (title !== '') {
-      return title
-    }
-
-    //value가 없으면 showKey가 있으면 우선 보여준다
+    if (options.length === 0) return title !== '' ? title : '선택하세요.'
     if (showKey !== '' && !value) {
-      return options[0][showKey]
-    }
+      //value가 없으면 showKey가 있으면 우선 보여준다
+      // return options[0][showKey]
+      return title
+    } else if (showKey !== '' && value) {
+      //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
 
-    //value가 있으면 sourceKey와 targetKey를 비교하여 보여준다
-    if (showKey !== '' && value) {
-      const option = options.find((option) => option[sourceKey] === value[targetKey])
-      return option[showKey]
+      const option = options.find((option) => {
+        return option[sourceKey] === value[targetKey]
+      })
+      if (!option) {
+        return title !== '' ? title : '선택하세요.'
+      } else {
+        return option[showKey]
+      }
+    } else {
+      //일치하는 조건이 없으면 기본값을 보여준다.
+      return title !== '' ? title : '선택하세요.'
     }
   }
 
@@ -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,11 +80,12 @@ 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) => (
-          <li key={option.id || index} className="select-item" onClick={() => handleClickSelectOption(option)}>
-            <button key={option.id + 'btn'}>{showKey !== '' ? option[showKey] : option.name}</button>
-          </li>
-        ))}
+        {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>
+          ))}
       </ul>
     </div>
   )

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,11 +1250,10 @@ 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>
-              <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 className="estimate-check-btn">
+                  <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>
             {/* 견적 특이사항 코드영역시작 */}
@@ -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)
-    setCurrentMenu(menu.title)
+  // 발전시뮬레이션 메뉴 이동
+  const { objectNo, pid } = floorPlanState
 
+  // 발전시물레이션 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: [
-      {
-        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' },
-      },
-    ],
+    rows: [],
   }
-  const surfaceTypes = [
-    { id: 1, name: 'Ⅱ', value: 'Ⅱ' },
-    { id: 2, name: 'Ⅲ ∙ Ⅳ', value: 'Ⅲ ∙ Ⅳ' },
-  ]
-  const fiftingHeights = Array.from({ length: 16 }).map((data, index) => {
-    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 }
-  })
+
+  useEffect(() => {}, [roofTab])
+
+  const handleRoofTab = (tab) => {
+    setRoofTab(tab)
+  }
+
   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) => (
-                    <>
-                      <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 && header.type !== 'color-box' && <td className="al-r">{row[header.prop].name}</td>}
-                          </>
-                        ))}
-                      </tr>
-                    </>
-                  ))}
-
-                  {Array.from({ length: 3 - moduleData.rows.length }).map((_, i) => (
-                    <tr key={i}>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                      <td></td>
-                    </tr>
-                  ))}
+                  {selectedModules.itemList &&
+                    selectedModules.itemList.map((row) => (
+                      <>
+                        <tr>
+                          <td>
+                            <div className="color-wrap">
+                              <span className="color-box" style={{ backgroundColor: row.color }}></span>
+                              <span className="name">{row.itemNm}</span>
+                            </div>
+                          </td>
+                          <td className="al-r">{Number(row.shortAxis).toFixed(0)}</td>
+                          <td className="al-r">{Number(row.longAxis).toFixed(0)}</td>
+                          <td className="al-r">{Number(row.wpOut).toFixed(0)}</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>
-          <button className="module-btn">屋根材2</button>
-          <button className="module-btn">屋根材3</button>
-          <button className="module-btn">屋根材4</button>
+          {addedRoofs &&
+            addedRoofs.map((roof, index) => (
+              <button key={index} className={`module-btn ${roofTab === index ? 'act' : ''}`} onClick={() => (roof ? handleRoofTab(index) : null)}>
+                {roof !== undefined ? `屋根材${index + 1}` : '-'}
+              </button>
+            ))}
         </div>
-        <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>
+        {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 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>
-        </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: [
-      {
-        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' },
-      },
-    ],
+    rows: [],
   }
 
   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) => (
-                    <>
-                      <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" />
-                                  <label htmlFor="ch02"></label>
-                                </div>
-                              </td>
-                            )}
-                            {header.type && header.type !== 'color-box' && header.type !== 'check' && (
-                              <td className="al-r">{row[header.prop].name}</td>
-                            )}
-                          </>
-                        ))}
-                      </tr>
-                    </>
-                  ))}
-                  <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                  </tr>
+                  {selectedModules.itemList &&
+                    selectedModules.itemList.map((item) => (
+                      <>
+                        <tr>
+                          <td className="al-c">
+                            <div className="d-check-box no-text pop">
+                              <input type="checkbox" id={item.itemId} name={item.itemId} onChange={handleSelectedItem} />
+                              <label htmlFor={item.itemId}></label>
+                            </div>
+                          </td>
+                          <td>
+                            <div className="color-wrap">
+                              <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>
+                      </>
+                    ))}
                 </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' : ''}`}>
-              {getMessage('modal.circuit.trestle.setting.power.conditional.select')}
+            <div className={`module-tab-bx act`}>{getMessage('modal.circuit.trestle.setting.power.conditional.select')}</div>
+            <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>
-            <div className={`module-tab-bx ${tabNum === 3 ? 'act' : ''}`}>{getMessage('modal.circuit.trestle.setting.step.up.allocation')}</div>
           </div>
-          {tabNum === 1 && <PowerConditionalSelect />}
-          {tabNum === 2 && <CircuitAllocation {...circuitProps} />}
-          {tabNum === 3 && <StepUp />}
-          <div className="grid-btn-wrap">
-            {tabNum !== 1 && (
-              <button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && <PowerConditionalSelect {...powerConditionalSelectProps} />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.PASSIVITY && <PassivityCircuitAllocation {...powerConditionalSelectProps} />}
+          {tabNum === 2 && <StepUp />}
+          {tabNum === 1 && allocationType === ALLOCATION_TYPE.AUTO && (
+            <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={() => 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>
-            )}
-            {tabNum !== 3 && (
-              <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
-                Next
+              <button className="btn-frame modal act" onClick={() => setTabNum(2)}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation')}({getMessage('modal.circuit.trestle.setting.step.up.allocation')})
               </button>
-            )}
-            {tabNum === 3 && (
-              <button className="btn-frame modal act">
-                {`${getMessage('modal.common.save')} (${getMessage('modal.circuit.trestle.setting.alloc.trestle')})`}
+            </div>
+          )}
+          {tabNum === 2 && (
+            <div className="grid-btn-wrap">
+              <button className="btn-frame modal mr5" onClick={() => setTabNum(1)}>
+                {getMessage('modal.common.prev')}
               </button>
-            )}
-          </div>
+              <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,89 +1,91 @@
 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 = {
-    header: [
-      { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
-        width: '10%',
-        prop: 'ratedOutput',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
-        width: '10%',
-        prop: 'circuitAmount',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
-        width: '10%',
-        prop: 'maxConnection',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`,
-        width: '10%',
-        prop: 'maxOverload',
-      },
-      {
-        name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`,
-        width: '10%',
-        prop: 'outputCurrent',
-      },
-    ],
-    rows: [
-      {
-        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: '-' },
-      },
-    ],
+  const globalLocale = useRecoilValue(globalLocaleStore)
+  const modelHeader = [
+    { name: getMessage('명칭'), width: '15%', prop: 'name', type: 'color-box' },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.rated.output')} (kW)`,
+      width: '10%',
+      prop: 'ratedOutput',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.circuit.amount')}`,
+      width: '10%',
+      prop: 'circuitAmount',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.connection')}`,
+      width: '10%',
+      prop: 'maxConnection',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.max.overload')}`,
+      width: '10%',
+      prop: 'maxOverload',
+    },
+    {
+      name: `${getMessage('modal.circuit.trestle.setting.power.conditional.select.output.current')}`,
+      width: '10%',
+      prop: 'outputCurrent',
+    },
+  ]
+  const onCheckSeries = (series) => {
+    setSeries((prev) => prev.map((s) => ({ ...s, selected: s.pcsSerCd === series.pcsSerCd ? !s.selected : s.selected })))
   }
   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="d-check-box pop mb15 sel">
-              <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" />
-              <label htmlFor="ch02">屋外マルチPCS（HQJP-RA5シリーズ）</label>
-            </div>
+          <div className="circuit-check-inner overflow">
+            {series?.map((series, index) => (
+              <div className="d-check-box pop sel">
+                <input type="checkbox" id={`"ch0"${index}`} onClick={() => onCheckSeries(series)} />
+                <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,13 +104,15 @@ export default function PowerConditionalSelect({ setTabNum }) {
                   </tr>
                 </thead>
                 <tbody>
-                  {seriesData.rows.map((row, index) => (
-                    <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
-                      {seriesData.header.map((header) => (
-                        <td>{row[header.prop].name}</td>
-                      ))}
-                    </tr>
-                  ))}
+                  {models
+                    ?.filter((model) => model.series === selectedSeries?.code)
+                    .map((row, index) => (
+                      <tr key={index} onClick={() => setSelectedRowIndex(index)} className={index === selectedRowIndex ? 'on' : ''}>
+                        {modelHeader.map((header) => (
+                          <td>{row[header.prop]}</td>
+                        ))}
+                      </tr>
+                    ))}
                 </tbody>
               </table>
             </div>
@@ -117,22 +121,18 @@ export default function PowerConditionalSelect({ setTabNum }) {
             <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>
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
-            </span>
-            <span className="normal-font">
-              HQJP-KA40-5 <button className="del"></button>
-            </span>
+            {selectedModels?.map((model) => (
+              <span className="normal-font">
+                {model.name} <button className="del"></button>
+              </span>
+            ))}
           </div>
         </div>
       </div>
       <div className="slope-wrap">
         <div className="d-check-box pop mb15">
           <input type="checkbox" id="ch03" />
-          <label htmlFor="ch03"> {getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
+          <label htmlFor="ch03">{getMessage('modal.circuit.trestle.setting.power.conditional.select.check1')}</label>
         </div>
         <div className="d-check-box pop">
           <input type="checkbox" id="ch04" />
@@ -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,395 +1,114 @@
 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">
-            <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>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
-                        <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</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">{getMessage('modal.circuit.trestle.setting.step.up.allocation.connected')}</div>
-                  <div className="roof-module-table mb10">
+          {/* 3개일때 className = by-max */}
+          <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 min">
                     <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.circuit.amount')}</th>
-                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.circuit.amount')}</th>
+                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.serial.amount')}</th>
+                          <th>{getMessage('modal.circuit.trestle.setting.step.up.allocation.total.amount')}</th>
                         </tr>
                       </thead>
                       <tbody>
-                        <tr>
-                          <td className="al-c">KTN-CBD4C</td>
-                          <td className="al-r">4</td>
+                        <tr className="on">
+                          <td className="al-r">10</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">10</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">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 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 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 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 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="roof-module-table min mb10">
+                        <table>
+                          <thead>
+                            <tr>
+                              <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>
+                          </thead>
+                          <tbody>
+                            <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>
-                    <div className="circuit-data-form">
-                      <span className="normal-font">
-                        HQJP-KA40-5<button className="del"></button>
-                      </span>
+                  )}
+                  {moduleTab === 2 && (
+                    <div className="circuit-table-flx-box">
+                      <div className="roof-module-table min mb10">
+                        <table>
+                          <thead>
+                            <tr>
+                              <th>名称</th>
+                              <th>昇圧回路数</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr>
+                              <td className="al-c">-</td>
+                              <td className="al-c">-</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
                     </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>
-                          <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 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,74 +32,79 @@ export default function PassivityCircuitAllocation() {
   }
   return (
     <>
-      <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>
-          <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
-          <div className="roof-module-table overflow-y">
-            <table>
-              <thead>
-                <tr>
-                  {moduleData.header.map((header) => (
-                    <th key={header.prop}>{header.name}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {moduleData.rows.map((row, index) => (
-                  <tr key={index}>
+      <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>
+            <div className="normal-font mb15">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.info')}</div>
+            <div className="roof-module-table overflow-y">
+              <table>
+                <thead>
+                  <tr>
                     {moduleData.header.map((header) => (
-                      <td key={header.prop}>{row[header.prop].name}</td>
+                      <th key={header.prop}>{header.name}</th>
                     ))}
                   </tr>
-                ))}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {moduleData.rows.map((row, index) => (
+                    <tr key={index}>
+                      {moduleData.header.map((header) => (
+                        <td className="al-c" key={header.prop}>
+                          {row[header.prop].name}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
           </div>
         </div>
-      </div>
-      <div className="module-table-box mb10">
-        <div className="module-table-inner">
-          <div className="hexagonal-wrap">
-            <div className="hexagonal-item">
-              <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
-            </div>
-            <div className="hexagonal-item">
-              <div className="d-check-radio pop mb10">
-                <input type="radio" name="radio01" id="ra01" />
-                <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+        <div className="module-table-box mb10">
+          <div className="module-table-inner">
+            <div className="hexagonal-wrap">
+              <div className="hexagonal-item">
+                <div className="bold-font">{getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional')}</div>
               </div>
-              <div className="d-check-radio pop mb10">
-                <input type="radio" name="radio01" id="ra02" />
-                <label htmlFor="ra02">HQJP-KA55-5 (標準回路2枚～10枚)</label>
-              </div>
-              <div className="d-check-radio pop">
-                <input type="radio" name="radio01" id="ra03" />
-                <label htmlFor="ra03">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+              <div className="hexagonal-item">
+                <div className="d-check-radio pop mb10">
+                  <input type="radio" name="radio01" id="ra01" />
+                  <label htmlFor="ra01">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+                </div>
+                <div className="d-check-radio pop mb10">
+                  <input type="radio" name="radio01" id="ra02" />
+                  <label htmlFor="ra02">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+                </div>
+                <div className="d-check-radio pop">
+                  <input type="radio" name="radio01" id="ra03" />
+                  <label htmlFor="ra03">HQJP-KA55-5 (標準回路2枚～10枚)</label>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div className="slope-wrap">
-        <div className="circuit-right-wrap mb15">
-          <div className="outline-form">
-            <span className="mr10" style={{ width: 'auto' }}>
-              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
-            </span>
-            <div className="input-grid mr5" style={{ width: '70px' }}>
-              <input type="text" className="input-origin block" />
+        <div className="slope-wrap">
+          <div className="circuit-right-wrap mb15">
+            <div className="outline-form">
+              <span className="mr10" style={{ width: 'auto' }}>
+                {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num')}
+              </span>
+              <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>
-        <div className="circuit-right-wrap">
-          <button className="btn-frame roof mr5">
-            {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset')}
-          </button>
-          <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 className="circuit-right-wrap">
+            <button className="btn-frame roof mr5">
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.selected.power.conditional.reset')}
+            </button>
+            <button className="btn-frame roof mr5">
+              {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.reset')}
+            </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,
-          horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
-          verticalInterval: currentSetting.INTERVAL.verticalInterval,
-          ratioInterval: currentSetting.INTERVAL.ratioInterval,
-          dimension: currentSetting.INTERVAL.dimension,
+          type: copyCurrentSetting.INTERVAL.type,
+          horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
+          verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
+          ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
+          dimension: copyCurrentSetting.INTERVAL.dimension,
         },
-        DOT: currentSetting.DOT,
-        LINE: currentSetting.LINE,
+        DOT: copyCurrentSetting.DOT,
+        LINE: copyCurrentSetting.LINE,
       }
       //setDotLineGridSettingState({ ...currentSetting })
     })
@@ -90,16 +93,18 @@ export default function DotLineGrid(props) {
     setSettingsData({
       ...settingsData,
       INTERVAL: {
-        type: currentSetting.INTERVAL.type,
-        horizontalInterval: currentSetting.INTERVAL.horizontalInterval,
-        verticalInterval: currentSetting.INTERVAL.verticalInterval,
-        ratioInterval: currentSetting.INTERVAL.ratioInterval,
-        dimension: currentSetting.INTERVAL.dimension,
+        type: copyCurrentSetting.INTERVAL.type,
+        horizontalInterval: copyCurrentSetting.INTERVAL.horizontalInterval,
+        verticalInterval: copyCurrentSetting.INTERVAL.verticalInterval,
+        ratioInterval: copyCurrentSetting.INTERVAL.ratioInterval,
+        dimension: copyCurrentSetting.INTERVAL.dimension,
       },
-      DOT: currentSetting.DOT,
-      LINE: currentSetting.LINE,
+      DOT: copyCurrentSetting.DOT,
+      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}
-                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
+                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 1}
+                  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}
-                  readOnly={!currentSetting.DOT && !currentSetting.LINE}
+                  checked={(copyCurrentSetting.DOT || copyCurrentSetting.LINE) && copyCurrentSetting.INTERVAL.type === 2}
+                  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: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
-                  { id: 2, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                  { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
+                  { id: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}`, target: '_blank' },
+                  { 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: 1, name: 'Q.ORDER', link: `${qOrderUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                    { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
+                    { 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: 1, name: 'Q.Musubi', link: `${qMusubiUrl}?autoLoginParam1=${encodeURIComponent(res.data)}` },
+                    { id: 0, name: getMessage('site.header.link1'), target: '_blank' },
+                    { 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 { setSession } from '@/lib/authActions'
-import { logout } from '@/lib/authActions'
+import { logout, setSession, login } 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()
-            //로그인 화면으로 이동해서 다시 로그인해야되서 setSessionState필요없음
-            // setSessionState({ ...sessionState, pwdInitYn: 'Y' })
-            //props.setChagePasswordPopOpen(false)
-            //router.push('/login')
+            const result = { ...sessionState, pwdInitYn: 'Y' }
+            setSession(result)
+            setSessionState(result)
+            props.setChagePasswordPopOpen(false)
+            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">
-                          {getMessage('main.popup.login.newPassword1')}
-                          <span className="important">*</span>
-                        </div>
+                        <div className="tit-b">{getMessage('main.popup.login.newPassword1')}</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">
-                          {getMessage('main.popup.login.newPassword2')}
-                          <span className="important">*</span>
-                        </div>
+                        <div className="tit-b">{getMessage('main.popup.login.newPassword2')}</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-title pre">{row.title}</div>
+                      <div className="faq-num pre">FAQ {row.totCnt - row.rowNumber + 1}</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이 아니면 버튼숨기기
-            buttonStyle = { display: 'none' }
+            //createUser가 T01인데 로그인사용자가 T01이 아니면 버튼숨기기 적용할지 미정!!!!!!!!
+            //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,57 +1265,59 @@ export default function StuffDetail() {
       return alert(getMessage('stuff.detail.save.valierror2'))
     }
 
-    let detail_sort = Object.keys(managementState)
-      .sort()
-      .reduce((obj, key) => ((obj[key] = managementState[key]), obj), {})
-    let params_sort = Object.keys(params)
-      .sort()
-      .reduce((obj, key) => ((obj[key] = params[key]), obj), {})
+    if (managementState) {
+      let detail_sort = Object.keys(managementState)
+        .sort()
+        .reduce((obj, key) => ((obj[key] = managementState[key]), obj), {})
+      let params_sort = Object.keys(params)
+        .sort()
+        .reduce((obj, key) => ((obj[key] = params[key]), obj), {})
 
-    delete detail_sort.areaName
-    delete detail_sort.contentsPath
-    delete detail_sort.createDatetime
-    delete detail_sort.createUserName
-    delete detail_sort.dispCompanyName
-    delete detail_sort.firstAgentId
-    delete detail_sort.lastEditDatetime
-    delete detail_sort.lastEditUserName
-    delete detail_sort.planList
-    delete detail_sort.planNo
-    delete detail_sort.planTotCnt
-    delete detail_sort.receiveCompanyName
-    delete detail_sort.saleStoreName
-    delete detail_sort.rowNumber
-    delete detail_sort.prefName
-    delete detail_sort.sameObjectInfo
-    delete detail_sort.specificationConfirmDate
-    delete detail_sort.totCnt
-    delete detail_sort.workNo
-    delete detail_sort.workName
+      delete detail_sort.areaName
+      delete detail_sort.contentsPath
+      delete detail_sort.createDatetime
+      delete detail_sort.createUserName
+      delete detail_sort.dispCompanyName
+      delete detail_sort.firstAgentId
+      delete detail_sort.lastEditDatetime
+      delete detail_sort.lastEditUserName
+      delete detail_sort.planList
+      delete detail_sort.planNo
+      delete detail_sort.planTotCnt
+      delete detail_sort.receiveCompanyName
+      delete detail_sort.saleStoreName
+      delete detail_sort.rowNumber
+      delete detail_sort.prefName
+      delete detail_sort.sameObjectInfo
+      delete detail_sort.specificationConfirmDate
+      delete detail_sort.totCnt
+      delete detail_sort.workNo
+      delete detail_sort.workName
 
-    delete params_sort.areaName
-    delete params_sort.contentsPath
-    delete params_sort.createDatetime
-    delete params_sort.createUserName
-    delete params_sort.dispCompanyName
-    delete params_sort.firstAgentId
-    delete params_sort.lastEditDatetime
-    delete params_sort.lastEditUserName
-    delete params_sort.planList
-    delete params_sort.planNo
-    delete params_sort.planTotCnt
-    delete params_sort.receiveCompanyName
-    delete params_sort.saleStoreName
-    delete params_sort.rowNumber
-    delete params_sort.prefName
-    delete params_sort.sameObjectInfo
-    delete params_sort.specificationConfirmDate
-    delete params_sort.totCnt
-    delete params_sort.workNo
-    delete params_sort.workName
+      delete params_sort.areaName
+      delete params_sort.contentsPath
+      delete params_sort.createDatetime
+      delete params_sort.createUserName
+      delete params_sort.dispCompanyName
+      delete params_sort.firstAgentId
+      delete params_sort.lastEditDatetime
+      delete params_sort.lastEditUserName
+      delete params_sort.planList
+      delete params_sort.planNo
+      delete params_sort.planTotCnt
+      delete params_sort.receiveCompanyName
+      delete params_sort.saleStoreName
+      delete params_sort.rowNumber
+      delete params_sort.prefName
+      delete params_sort.sameObjectInfo
+      delete params_sort.specificationConfirmDate
+      delete params_sort.totCnt
+      delete params_sort.workNo
+      delete params_sort.workName
 
-    if (Object.entries(detail_sort).toString() === Object.entries(params_sort).toString()) {
-      return alert(getMessage('stuff.detail.noChgData'))
+      if (Object.entries(detail_sort).toString() === Object.entries(params_sort).toString()) {
+        return alert(getMessage('stuff.detail.noChgData'))
+      }
     }
 
     if (params?.receiveUser !== '') {
@@ -1316,6 +1325,12 @@ export default function StuffDetail() {
         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={
-                                  managementState?.tempFlg === '0'
-                                    ? true
-                                    : session?.storeLvl === '1' && form.watch('saleStoreId') != ''
-                                      ? false
-                                      : true
-                                }
-                                isClearable={managementState?.tempFlg === '0' ? false : session?.storeLvl === '1' ? true : false}
+                                // isDisabled={
+                                //   managementState?.tempFlg === '0'
+                                //     ? true
+                                //     : session?.storeLvl === '1' && form.watch('saleStoreId') != ''
+                                //       ? false
+                                //       : 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',
@@ -105,25 +110,51 @@ export default function StuffSearchCondition() {
           pageSize: stuffSearch?.pageSize,
         })
       } else {
-        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?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : '',
-          schOtherSelSaleStoreId: stuffSearch?.schOtherSelSaleStoreId ? stuffSearch.schOtherSelSaleStoreId : '',
-          schReceiveUser: receiveUser ? receiveUser.trim() : '',
-          schDateType: dateType,
-          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,
-        })
+        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(),
+            schSaleStoreName: saleStoreName ? saleStoreName.trim() : '',
+            schAddress: address ? address.trim() : '',
+            schObjectName: objectName ? objectName.trim() : '',
+            schDispCompanyName: dispCompanyName ? dispCompanyName.trim() : '',
+            schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? 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 if (stuffSearch.code === 'FINISH') {
       setStuffSearch({
@@ -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 : '',
-          schOtherSelSaleStoreId: otherSaleStoreId,
+          schSelSaleStoreId: myDataCheck ? schSelSaleStoreId : otherSaleStoreId ? schSelSaleStoreId : '',
+          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,36 +341,76 @@ export default function StuffSearchCondition() {
         pageSize: 100,
       })
     } else {
-      if (otherSaleStoreList.length > 1) {
-        handleClear2()
-        setOtherSaleStoreId('')
-        stuffSearch.schObjectNo = ''
-        stuffSearch.schAddress = ''
-        stuffSearch.schObjectName = ''
-        stuffSearch.schSaleStoreName = ''
-        stuffSearch.schReceiveUser = ''
-        stuffSearch.schDispCompanyName = ''
-        stuffSearch.schDateType = 'U'
+      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.startRow = 1
-        stuffSearch.endRow = 100
-        stuffSearch.schSortType = 'U'
-        stuffSearch.pageNo = 1
-        stuffSearch.pageSize = 100
+          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 = ''
+          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
+        }
       }
     }
   }
@@ -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,13 +494,31 @@ export default function StuffSearchCondition() {
               setOtherSaleStoreList(otherList)
 
               //선택한 2차점 세션으로 자동셋팅
-              setOtherSaleStoreId(session?.storeId)
-              setStuffSearch({
-                ...stuffSearch,
-                code: 'S',
-                schSelSaleStoreId: res[0].saleStoreId,
-                schOtherSelSaleStoreId: otherList[0].saleStoreId,
-              })
+              if (otherList.length === 1) {
+                setOtherSaleStoreId(session?.storeId)
+                setStuffSearch({
+                  ...stuffSearch,
+                  code: 'S',
+                  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차점 값
-      stuffSearch.schSelSaleStoreId = schSelSaleStoreId
+      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>
-                </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"
-                          name="radio_ptype"
-                          id="radio_u"
-                          defaultChecked={stuffSearch.schDateType === '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"
-                          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 className="d-check-box light">
+                      <input
+                        type="checkbox"
+                        id="schMine"
+                        checked={stuffSearch.schMyDataCheck ? true : false}
+                        onChange={(e) => {
+                          checkMyData(e)
+                          stuffSearch.schMyDataCheck = e.target.checked
+                        }}
+                      />
+                      <label htmlFor="schMine">{getMessage('stuff.search.schMine')}</label>
                     </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)}>
-                {getMessage('stuff.addressPopup.btn1')}
-              </button>
-              <button className="btn-origin navy " onClick={applyAddress}>
+              <button className="btn-origin navy mr5" 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',
-        headerName: getMessage('stuff.planReqPopup.gridHeader.planStatName'),
-        minWidth: 150,
-        checkboxSelection: true,
-        showDisabledCheckboxes: true,
-      },
+      // {
+      //   field: 'planStatName',
+      //   headerName: getMessage('stuff.planReqPopup.gridHeader.planStatName'),
+      //   minWidth: 150,
+      //   checkboxSelection: 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) //상태
-    if (code1 != null) {
-      setPlanStatCdList(code1)
-    }
-  }, [commonCode])
+    onSubmit(pageNo, 'S')
+  }, [])
 
   // 숫자만 입력 가능
   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)}>
-                {getMessage('stuff.planReqPopup.btn3')}
-              </button>
-              <button className="btn-origin navy" onClick={applyPlanReq}>
+              <button className="btn-origin navy mr5" 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)}>
-                {getMessage('stuff.windSelectPopup.btn1')}
-              </button>
-              <button className="btn-origin navy" onClick={applyWindSpeed}>
+              <button className="btn-origin navy mr5" 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 { useRecoilValue, useRecoilState } from 'recoil'
-import { floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { useEffect, useState, useRef, useContext } from 'react'
+import { useRecoilState } from 'recoil'
+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 plan = plans.find((plan) => plan.isCurrent === true)
+  const { floorPlanState } = useContext(FloorPlanContext)
+  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,
-      gridVertical: dotLineGridSetting.INTERVAL.verticalInterval / 10,
+      gridHorizon: (dotLineGridSetting.INTERVAL.horizontalInterval / 10) * (dotLineGridSetting.INTERVAL.dimension ?? 1),
+      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'))
-          router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
+          swalFire({
+            text: getMessage('estimate.detail.estimateCopyPopup.copy.alertMessage'),
+            type: 'alert',
+            confirmFn: () => {
+              router.push(`/management/stuff/detail?objectNo=${newObjectNo.toString()}`, { scroll: false })
+            },
+          })
         }
       }
     })

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) {
-      swalFire({ text: '외벽선이 없습니다.' })
-      // setShowRoofShapeSettingModal(false)
-      closePopup(id)
-    }
+    // if (!outerLineFix || outerLines.length === 0) {
+    //   swalFire({ text: '외벽선이 없습니다.' })
+    //   // setShowRoofShapeSettingModal(false)
+    //   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,10 +203,12 @@ export function usePlan() {
    * 현재 plan의 작업상태를 저장 후 이동
    */
   const handleCurrentPlan = async (newCurrentId) => {
-    if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-      await saveCanvas()
-      updateCurrentPlan(newCurrentId)
+    if (pathname === '/floor-plan') {
+      if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
+        await saveCanvas()
+      }
     }
+    updateCurrentPlan(newCurrentId)
   }
 
   const updateCurrentPlan = (newCurrentId) => {
@@ -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/_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))
 }
 
 /**