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

2024-12-30 10:58:51 +09:00 · 2024-12-30 10:58:51 +09:00 · 15b4d8f74e
commit 15b4d8f74e
parent 860ddec138 42e6cb38e0
13 changed files with 150 additions and 164 deletions
--- a/.gitignore
+++ b/.gitignore
@ -41,4 +41,5 @@ next-env.d.ts
 #lock files
 yarn.lock
 package-lock.json
+pnpm-lock.yaml
 certificates
--- a/src/app/QcastProvider.js
+++ b/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'
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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 PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
+import { currentMenuState } from '@/store/canvasAtom'
 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) {
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/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
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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 {
-  addedRoofsSelector,
-  addedRoofsState,
-  basicSettingState,
-  roofMaterialsSelector,
-  selectedRoofMaterialSelector,
-  settingModalFirstOptionsState,
-} from '@/store/settingAtom'
+import { addedRoofsState, basicSettingState, selectedRoofMaterialSelector, settingModalFirstOptionsState } from '@/store/settingAtom'
+import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
+import { menusState, menuTypeState } from '@/store/menuAtom'
+import { estimateState, floorPlanObjectState } from '@/store/floorPlanObjectAtom'
+import { pwrGnrSimTypeState } from '@/store/simulatorAtom'
+import { isObjectNotEmpty } from '@/util/common-utils'

 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 [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
+  const setAppMessageState = useSetRecoilState(appMessageStore)
+  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 })
  }
--- a/src/components/floor-plan/FloorPlan.jsx
+++ b/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'
--- a/src/components/floor-plan/MenuDepth01.jsx
+++ b/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)
--- a/src/components/floor-plan/RoofCoveringMenu.jsx
+++ b/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()
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/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)
-                  setCurrentRoofMaterial(selected)
+                  // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                  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 && (
-                        <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 || 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'} />
+                            </div>
                          </div>
-                          {/* <div className="select-wrap" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>265</option>
-                            </select>
-                          </div> */}
-                        </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 />
+                        )}
+                        {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={roof.lenAuth === 'R'} />
+                            </div>
                          </div>
-                          {/* <div className="select-wrap" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>235</option>
-                            </select>
-                          </div> */}
-                        </div>
-                      )}
-                      {roof.raftAuth && (
-                        <div className="flex-ment">
-                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          <div className="grid-select" style={{ width: '84px' }}>
-                            {raftCodes.length > 0 && (
-                              <QSelectBox
-                                options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
-                                onChange={(e) => handleChangeRaft(e, index)}
-                                value={raftCodes.find((r) => r.value === roof.raft)}
-                              />
-                            )}
-                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
-                              {raftCodes.map((raft, index) => {
-                                return (
-                                  <option key={index} value={raft.clCode}>
-                                    {raft.clCodeNm}
-                                  </option>
-                                )
-                              })}
-                            </select> */}
+                        )}
+                      </div>
+                    )}
+                    {(roof.raftAuth || roof.roofPchAuth) && (
+                      <div className="block-box">
+                        {roof.raftAuth && (
+                          <div className="block-box">
+                            <div className="flex-ment">
+                              <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                              {raftCodes.length > 0 && (
+                                <div className="grid-select" style={{ width: '160px' }}>
+                                  <QSelectBox
+                                    options={raftCodes}
+                                    value={roof}
+                                    showKey={'clCodeNm'}
+                                    sourceKey={'clCode'}
+                                    targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                  />
+                                </div>
+                              )}
+                            </div>
                          </div>
-                        </div>
-                      )}
-                      {roof.roofPchAuth && (
-                        <div className="flex-ment">
-                          <span>{getMessage('hajebichi')}</span>
-                          <div className="input-grid" style={{ width: '84px' }}>
-                            <input type="text" className="input-origin block" value={parseInt(roof.hajebichi)} readOnly={roof.roofPchAuth === 'R'} />
+                        )}
+                        {roof.roofPchAuth && (
+                          <div className="block-box">
+                            <div className="flex-ment">
+                              <span>{getMessage('hajebichi')}</span>
+                              <div className="input-grid" style={{ width: '84px' }}>
+                                <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="">
-                              <option>265</option>
-                            </select>
-                          </div> */}
-                        </div>
-                      )}
-                    </div>
+                        )}
+                      </div>
+                    )}
                    <div className="block-box">
                      <div className="icon-btn-wrap">
                        <button
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/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">
--- a/src/hooks/option/useCanvasSetting.js
+++ b/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 = [
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/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) {
-      isFirstRef.current++
-      return
-    }
+    const selectedIndex = roofMaterials.findIndex((roof) => roof.selected)

    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,
  }
 }
--- a/src/store/settingAtom.js
+++ b/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)
  },
 })