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

.gitignore

@@ -41,4 +41,5 @@ next-env.d.ts
 #lock files
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 certificates

src/app/QcastProvider.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { createContext, useEffect, useState } from 'react'
+import { createContext, useState } from 'react'
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import ServerError from './error'

src/components/floor-plan/CanvasFrame.jsx

@@ -1,32 +1,28 @@
 'use client'
 
-import { useContext, useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { useRecoilValue } from 'recoil'
 
+import QContextMenu from '@/components/common/context-menu/QContextMenu'
+import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
+import ImgLoad from '@/components/floor-plan/modal/ImgLoad'
 import { useCanvas } from '@/hooks/useCanvas'
-import { useEvent } from '@/hooks/useEvent'
 import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
-import { currentMenuState } from '@/store/canvasAtom'
-import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
-import { MENU } from '@/common/common'
+import { currentMenuState } from '@/store/canvasAtom'
-import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 import { totalDisplaySelector } from '@/store/settingAtom'
-import ImgLoad from '@/components/floor-plan/modal/ImgLoad'
+import { MENU } from '@/common/common'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
-  const { canvas, handleBackImageLoadToCanvas } = useCanvas('canvas')
+  const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
   const currentMenu = useRecoilValue(currentMenuState)
   const { contextMenu, handleClick } = useContextMenu()
-  const { selectedPlan, currentCanvasPlan } = usePlan()
+  const { selectedPlan } = usePlan()
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
-  // useEvent()
-  // const { initEvent } = useContext(EventContext)
-  // initEvent()
 
   const loadCanvas = () => {
     if (canvas) {

src/components/floor-plan/CanvasLayout.jsx

@@ -3,12 +3,12 @@
 import { useContext, useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+import { SessionContext } from '@/app/SessionProvider'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
-import { globalLocaleStore } from '@/store/localeAtom'
-import { SessionContext } from '@/app/SessionProvider'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { globalLocaleStore } from '@/store/localeAtom'
 
 export default function CanvasLayout({ children }) {
   // const { menuNumber } = props

src/components/floor-plan/CanvasMenu.jsx

@@ -2,54 +2,47 @@
 
 import { useContext, useEffect, useState } from 'react'
 
+import { usePathname, useRouter } from 'next/navigation'
+
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 
-import { usePathname, useRouter } from 'next/navigation'
+import { v4 as uuidv4 } from 'uuid'
+
 import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
-import { v4 as uuidv4 } from 'uuid'
+import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
+import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import EstimateCopyPop from '../estimate/popup/EstimateCopyPop'
+import DocDownOptionPop from '../estimate/popup/DocDownOptionPop'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { useMessage } from '@/hooks/useMessage'
 import { usePlan } from '@/hooks/usePlan'
 import { useSwal } from '@/hooks/useSwal'
 import { useEvent } from '@/hooks/useEvent'
+import { usePopup } from '@/hooks/usePopup'
+import { useCanvasEvent } from '@/hooks/useCanvasEvent'
+import { useCommonUtils } from '@/hooks/common/useCommonUtils'
+import useMenu from '@/hooks/common/useMenu'
+import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
+import { useAxios } from '@/hooks/useAxios'
+import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import {
+import { addedRoofsState, basicSettingState, selectedRoofMaterialSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
-  addedRoofsSelector,
+import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
-  addedRoofsState,
+import { commonUtilsState } from '@/store/commonUtilsAtom'
-  basicSettingState,
+import { menusState, menuTypeState } from '@/store/menuAtom'
-  roofMaterialsSelector,
+import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-  selectedRoofMaterialSelector,
+import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
-  settingModalFirstOptionsState,
+import { isObjectNotEmpty } from '@/util/common-utils'
-} from '@/store/settingAtom'
 
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
-import { useCanvasEvent } from '@/hooks/useCanvasEvent'
-import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
-import { usePopup } from '@/hooks/usePopup'
-import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
-import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
-import { useCommonUtils } from '@/hooks/common/useCommonUtils'
 
-import { commonUtilsState } from '@/store/commonUtilsAtom'
-import { menusState, menuTypeState } from '@/store/menuAtom'
-import useMenu from '@/hooks/common/useMenu'
 import { MENU } from '@/common/common'
 
-import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
-import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
-import DocDownOptionPop from '../estimate/popup/DocDownOptionPop'
-import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
-import EstimateCopyPop from '../estimate/popup/EstimateCopyPop'
-import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
-import { useAxios } from '@/hooks/useAxios'
-
-import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { isObjectNotEmpty } from '@/util/common-utils'
-
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
   const pathname = usePathname()
@@ -58,8 +51,8 @@ export default function CanvasMenu(props) {
   const canvasMenus = useRecoilValue(menusState)
   const [type, setType] = useRecoilState(menuTypeState)
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
-  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
-  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
+  const setCurrentMenu = useSetRecoilState(currentMenuState)
   const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
   const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
   const canvasSetting = useRecoilValue(canvasSettingState)
@@ -123,13 +116,6 @@ export default function CanvasMenu(props) {
     if (pathname !== '/floor-plan') router.push('/floor-plan')
   }
 
-  useEffect(() => {
-    console.log('addedRoofs', addedRoofs)
-  }, [addedRoofs])
-  useEffect(() => {
-    console.log('selectedRoofMaterial', selectedRoofMaterial)
-  }, [selectedRoofMaterial])
-
   const changeSelectedRoofMaterial = (e) => {
     setBasicSetting({ ...basicSetting, selectedRoofMaterial: e })
   }

src/components/floor-plan/FloorPlan.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useContext, useEffect } from 'react'
+import { useEffect } from 'react'
 //import { useRecoilState } from 'recoil'
 import CanvasMenu from '@/components/floor-plan/CanvasMenu'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'

src/components/floor-plan/MenuDepth01.jsx

@@ -1,11 +1,12 @@
 'use client'
 
+import { useEffect } from 'react'
+
 import { useMessage } from '@/hooks/useMessage'
+import useMenu from '@/hooks/common/useMenu'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { menuTypeState, subMenusState } from '@/store/menuAtom'
-import useMenu from '@/hooks/common/useMenu'
-import { useEffect } from 'react'
 
 export default function MenuDepth01() {
   const type = useRecoilValue(menuTypeState)

src/components/floor-plan/RoofCoveringMenu.jsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { useMessage } from '@/hooks/useMessage'
 import { useRecoilState, useSetRecoilState } from 'recoil'
-import { currentMenuState } from '@/store/canvasAtom'
+
 import { MENU } from '@/common/common'
-import { modalState } from '@/store/modalAtom'
 import { ToggleonMouse } from '@/components/header/Header'
+import { useMessage } from '@/hooks/useMessage'
+import { currentMenuState } from '@/store/canvasAtom'
+import { modalState } from '@/store/modalAtom'
 
 export default function RoofCoveringMenu() {
   const { getMessage } = useMessage()

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

@@ -28,6 +28,7 @@ export default function ContextRoofAllocationSetting(props) {
     handleChangeRaft,
     handleChangeLayout,
     handleSaveContext,
+    currentRoofList,
   } = useRoofAllocationSetting(id)
 
   const { findCommonCode } = useCommonCode()
@@ -39,7 +40,7 @@ export default function ContextRoofAllocationSetting(props) {
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap ml mount`}>
+      <div className={`modal-pop-wrap lr mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -53,10 +54,14 @@ export default function ContextRoofAllocationSetting(props) {
             <div className="grid-select">
               <QSelectBox
                 options={roofMaterials}
+                value={roofMaterials[0]}
                 onChange={(e) => {
-                  const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                  // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
-                  setCurrentRoofMaterial(selected)
+                  setCurrentRoofMaterial(e)
                 }}
+                showKey={'roofMatlNm'}
+                sourceKey={'roofMatlCd'}
+                targetKey={'roofMatlCd'}
               />
             </div>
             <button
@@ -70,7 +75,7 @@ export default function ContextRoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {roofList.map((roof, index) => {
+            {currentRoofList.map((roof, index) => {
               return (
                 <div className="grid-option-box" key={index}>
                   <div className="d-check-radio pop no-text">
@@ -88,78 +93,74 @@ export default function ContextRoofAllocationSetting(props) {
                         <div className="grid-select" style={{ width: '248px' }}>
                           <QSelectBox
                             options={roofMaterials}
-                            value={roofMaterials.find((r) => r.id === roof.id)}
+                            value={roof}
+                            showKey={'roofMatlNm'}
+                            sourceKey={'roofMatlCd'}
+                            targetKey={'roofMatlCd'}
                             onChange={(e) => handleChangeRoofMaterial(e, index)}
                           />
                         </div>
-                        {index === 0 && <span className="dec">基本屋根材</span>}
+                        {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
                         {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
                       </div>
                     </div>
-                    <div className="block-box">
+                    {(roof.widAuth || roof.lenAuth) && (
-                      {roof.widAuth && (
+                      <div className="block-box">
-                        <div className="flex-ment">
+                        {roof.widAuth && (
-                          <span>W</span>
+                          <div className="flex-ment">
-                          <div className="input-grid" style={{ width: '100px' }}>
+                            <span>W</span>
-                            <input type="text" className="input-origin block" defaultValue={roof.width} readOnly />
+                            <div className="input-grid" style={{ width: '100px' }}>
+                              <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
+                            </div>
                           </div>
-                          {/* <div className="select-wrap" style={{ width: '84px' }}>
+                        )}
-                            <select className="select-light dark" name="" id="">
+                        {roof.lenAuth && (
-                              <option>265</option>
+                          <div className="flex-ment">
-                            </select>
+                            <span>L</span>
-                          </div> */}
+                            <div className="input-grid" style={{ width: '100px' }}>
-                        </div>
+                              <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
-                      )}
+                            </div>
-                      {roof.lenAuth && (
-                        <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 />
                           </div>
-                          {/* <div className="select-wrap" style={{ width: '84px' }}>
+                        )}
-                            <select className="select-light dark" name="" id="">
+                      </div>
-                              <option>235</option>
+                    )}
-                            </select>
+                    {(roof.raftAuth || roof.roofPchAuth) && (
-                          </div> */}
+                      <div className="block-box">
-                        </div>
+                        {roof.raftAuth && (
-                      )}
+                          <div className="block-box">
-                      {roof.raftAuth && (
+                            <div className="flex-ment">
-                        <div className="flex-ment">
+                              <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                              {raftCodes.length > 0 && (
-                          <div className="grid-select" style={{ width: '84px' }}>
+                                <div className="grid-select" style={{ width: '160px' }}>
-                            {raftCodes.length > 0 && (
+                                  <QSelectBox
-                              <QSelectBox
+                                    options={raftCodes}
-                                options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
+                                    value={roof}
-                                onChange={(e) => handleChangeRaft(e, index)}
+                                    showKey={'clCodeNm'}
-                                value={raftCodes.find((r) => r.value === roof.raft)}
+                                    sourceKey={'clCode'}
-                              />
+                                    targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
-                            )}
+                                  />
-                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
+                                </div>
-                              {raftCodes.map((raft, index) => {
+                              )}
-                                return (
+                            </div>
-                                  <option key={index} value={raft.clCode}>
-                                    {raft.clCodeNm}
-                                  </option>
-                                )
-                              })}
-                            </select> */}
                           </div>
-                        </div>
+                        )}
-                      )}
+                        {roof.roofPchAuth && (
-                      {roof.roofPchAuth && (
+                          <div className="block-box">
-                        <div className="flex-ment">
+                            <div className="flex-ment">
-                          <span>{getMessage('hajebichi')}</span>
+                              <span>{getMessage('hajebichi')}</span>
-                          <div className="input-grid" style={{ width: '84px' }}>
+                              <div className="input-grid" style={{ width: '84px' }}>
-                            <input type="text" className="input-origin block" value={parseInt(roof.hajebichi)} readOnly={roof.roofPchAuth === 'R'} />
+                                <input
+                                  type="text"
+                                  className="input-origin block"
+                                  value={parseInt(roof.hajebichi)}
+                                  readOnly={roof.roofPchAuth === 'R'}
+                                />
+                              </div>
+                            </div>
                           </div>
-                          {/* <div className="grid-select no-flx" style={{ width: '84px' }}>
+                        )}
-                            <select className="select-light dark" name="" id="">
+                      </div>
-                              <option>265</option>
+                    )}
-                            </select>
-                          </div> */}
-                        </div>
-                      )}
-                    </div>
                     <div className="block-box">
                       <div className="icon-btn-wrap">
                         <button

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

@@ -27,6 +27,7 @@ export default function RoofAllocationSetting(props) {
     handleChangeRoofMaterial,
     handleChangeRaft,
     handleChangeLayout,
+    currentRoofList,
   } = useRoofAllocationSetting(id)
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
@@ -73,7 +74,7 @@ export default function RoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {roofList.map((roof, index) => {
+            {currentRoofList.map((roof, index) => {
               return (
                 <div className="grid-option-box" key={index}>
                   <div className="d-check-radio pop no-text">

src/hooks/option/useCanvasSetting.js

@@ -269,17 +269,6 @@ export function useCanvasSetting() {
               roofSizeSet: item.roofSizeSet,
               roofAngleSet: item.roofAngleSet,
             }
-
-            roofsArray = {
-              roofApply: true,
-              roofSeq: 1,
-              roofMatlCd: 'ROOF_ID_WA_53A',
-              roofWidth: 265,
-              roofHeight: 235,
-              roofHajebichi: 0,
-              roofGap: 'HEI_455',
-              roofLayout: 'P',
-            }
           })
         } else {
           roofsRow = [

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -13,6 +13,7 @@ import useMenu from '@/hooks/common/useMenu'
 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'
 
 // 지붕면 할당
 export function useRoofAllocationSetting(id) {
@@ -32,7 +33,7 @@ export function useRoofAllocationSetting(id) {
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
   const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
-  const isFirstRef = useRef(0)
+  const [currentRoofList, setCurrentRoofList] = useState(roofList)
 
   const { setSurfaceShapePattern } = useRoofFn()
 
@@ -76,20 +77,25 @@ export function useRoofAllocationSetting(id) {
   }, [])
 
   const onAddRoofMaterial = () => {
-    if (roofList.length >= 4) {
+    if (currentRoofList.length >= 4) {
       swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') })
       return
     }
-    setRoofList([...roofList, { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm }])
+    setCurrentRoofList([
+      ...currentRoofList,
+      { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm },
+    ])
   }
 
   const onDeleteRoofMaterial = (idx) => {
-    setRoofList([...roofList.filter((_, index) => index !== idx)])
+    const isSelected = currentRoofList[idx].selected
+    const newRoofList = [...currentRoofList].filter((_, index) => index !== idx)
+    if (isSelected) {
+      newRoofList[0].selected = true
+    }
+    setCurrentRoofList(newRoofList)
   }
 
-  const { handleMenu } = useMenu()
-  const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
-
   // 선택한 지붕재로 할당
   const handleSave = () => {
     // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정
@@ -102,7 +108,7 @@ export function useRoofAllocationSetting(id) {
 
   // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우
   const handleSaveContext = () => {
-    const selectedRoofMaterial = roofList.find((roof) => roof.selected)
+    const selectedRoofMaterial = currentRoofList.find((roof) => roof.selected)
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial)
     closeAll()
   }
@@ -169,11 +175,11 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting((prev) => {
       return {
         ...prev,
-        selectedRoofMaterial: roofList.find((roof) => roof.selected),
+        selectedRoofMaterial: currentRoofList.find((roof) => roof.selected),
       }
     })
 
-    setRoofList(roofList)
+    setRoofList(currentRoofList)
 
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
 
@@ -182,7 +188,12 @@ export function useRoofAllocationSetting(id) {
       roof.set({
         isFixed: true,
       })
-      setSurfaceShapePattern(roof, roofDisplay.column)
+      setSurfaceShapePattern(
+        roof,
+        roofDisplay.column,
+        false,
+        currentRoofList.find((roof) => roof.selected),
+      )
       drawDirectionArrow(roof)
     })
 
@@ -216,54 +227,53 @@ export function useRoofAllocationSetting(id) {
 
   // 지붕재 변경
   const handleChangeRoofMaterial = (value, index) => {
-    if (isFirstRef.current === 0) {
+    const selectedIndex = roofMaterials.findIndex((roof) => roof.selected)
-      isFirstRef.current++
-      return
-    }
 
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...selectedRoofMaterial }
       }
       return roof
     })
 
-    setRoofList(newRoofList)
+    newRoofList[selectedIndex].selected = true
+
+    setCurrentRoofList(newRoofList)
   }
 
   // 기본 지붕재 radio값 변경
   const handleDefaultRoofMaterial = (index) => {
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       return { ...roof, selected: idx === index }
     })
 
-    setRoofList(newRoofList)
+    setCurrentRoofList(newRoofList)
   }
 
   // 서까래 변경
   const handleChangeRaft = (e, index) => {
     const raftValue = e.value
 
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...roof, raft: raftValue }
       }
       return roof
     })
 
-    setRoofList(newRoofList)
+    setCurrentRoofList(newRoofList)
   }
 
   const handleChangeLayout = (layoutValue, index) => {
-    const newRoofList = roofList.map((roof, idx) => {
+    const newRoofList = currentRoofList.map((roof, idx) => {
       if (idx === index) {
         return { ...roof, layout: layoutValue }
       }
       return roof
     })
 
-    setRoofList(newRoofList)
+    setCurrentRoofList(newRoofList)
   }
 
   return {
@@ -278,11 +288,11 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting,
     currentRoofMaterial,
     setCurrentRoofMaterial,
-    roofList,
     handleDefaultRoofMaterial,
     handleChangeRoofMaterial,
     handleChangeRaft,
     handleChangeLayout,
     handleSaveContext,
+    currentRoofList,
   }
 }

src/store/settingAtom.js

@@ -224,9 +224,9 @@ export const roofMaterialsAtom = atom({
 export const selectedRoofMaterialSelector = selector({
   key: 'selectedRoofMaterialSelector',
   get: ({ get }) => {
-    const basicSetting = get(basicSettingState)
+    const addedRoofs = get(addedRoofsState)
 
-    return { ...basicSetting.selectedRoofMaterial }
+    return addedRoofs.find((roof) => roof.selected)
   },
 })