배치면 초기설정, 지붕면 할당 - 지붕재 선택 수정

src/components/common/select/QSelectBox.jsx

@@ -4,7 +4,7 @@ import { useOnClickOutside } from 'usehooks-ts'
 
 export default function QSelectBox({ title = '', options, onChange, value, disabled = false, params = {} }) {
   const [openSelect, setOpenSelect] = useState(false)
-  const [selected, setSelected] = useState(title === '' ? options[0].name : title)
+  const [selected, setSelected] = useState(title === '' && value ? value.name : title)
   const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
@@ -17,8 +17,8 @@ export default function QSelectBox({ title = '', options, onChange, value, disab
   }
 
   useEffect(() => {
-    value && handleClickSelectOption(value)
+    if (value) handleClickSelectOption(value)
-  }, [value])
+  }, [])
 
   useOnClickOutside(ref, handleClose)
 

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

@@ -2,6 +2,7 @@ import { forwardRef, useImperativeHandle, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useOrientation } from '@/hooks/module/useOrientation'
 import { getDegreeInOrientation } from '@/util/canvas-util'
+import { numberCheck } from '@/util/common-utils'
 
 export const Orientation = forwardRef(({ tabNum }, ref) => {
   const { getMessage } = useMessage()
@@ -18,6 +19,14 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
     nextStep()
   }
 
+  const checkDegree = (e) => {
+    if (numberCheck(Number(e)) && Number(e) >= -180 && Number(e) <= 180) {
+      setCompasDeg(Number(e))
+    } else {
+      setCompasDeg(compasDeg)
+    }
+  }
+
   return (
     <>
       <div className="properties-setting-wrap">
@@ -65,10 +74,15 @@ export const Orientation = forwardRef(({ tabNum }, ref) => {
                   className="input-origin block"
                   value={compasDeg}
                   readOnly={hasAnglePassivity}
-                  onChange={(e) =>
+                  placeholder={0}
-                    setCompasDeg(
+                  onChange={
-                      e.target.value !== '' && parseInt(e.target.value) <= 360 && parseInt(e.target.value) >= 0 ? Number.parseInt(e.target.value) : 0,
+                    (e) => checkDegree(e.target.value)
-                    )
+                    // setCompasDeg(
+
+                    // e.target.value === '-' || (e.target.value !== '' && parseInt(e.target.value) <= 180 && parseInt(e.target.value) >= -180)
+                    //   ? e.target.value
+                    //   : 0,
+                    // )
                   }
                 />
               </div>

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -13,6 +13,7 @@ import { roofMaterialsAtom } from '@/store/settingAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import QSelectBox from '@/components/common/select/QSelectBox'
+import { globalLocaleStore } from '@/store/localeAtom'
 
 export const ROOF_MATERIAL_LAYOUT = {
   PARALLEL: 'P',
@@ -24,12 +25,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const { closePopup } = usePopup()
   const { getMessage } = useMessage()
   const roofMaterials = useRecoilValue(roofMaterialsAtom)
-
   const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(basicSetting.selectedRoofMaterial)
-
+  const globalLocale = useRecoilValue(globalLocaleStore)
   const [roofLayout, setRoofLayout] = useState(basicSetting.selectedRoofMaterial.layout)
 
   const roofRef = {
@@ -40,6 +40,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     hajebichi: useRef(null),
   }
 
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ currentRoofMaterial:', currentRoofMaterial)
+  }, [currentRoofMaterial])
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     fetchBasicSettings()
@@ -49,10 +53,18 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
+    console.log('🚀 ~ handleRoofTypeChange ~ value:', value)
+    console.log('🚀 ~ handleRoofTypeChange ~ roofMaterials:', roofMaterials)
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
     setCurrentRoofMaterial(selectedRoofMaterial)
   }
 
+  const handleRafterChange = (value) => {
+    console.log('🚀 ~ handleRafterChange ~ value:', value)
+    const selectedRafter = raftCodes.find((raft) => raft.clCode === value)
+    setCurrentRoofMaterial({ ...currentRoofMaterial, raft: selectedRafter })
+  }
+
   const handleSaveBtn = () => {
     const roofInfo = {
       ...currentRoofMaterial,
@@ -81,7 +93,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap l mount`}>
+      <div className={`modal-pop-wrap ll mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -184,17 +196,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                   <td>
                     <div className="placement-option">
                       <div className="grid-select no-flx" style={{ width: '171px' }}>
-                        {/* <QSelectBox
+                        <QSelectBox
                           ref={roofRef.roofCd}
                           options={roofMaterials.map((roof, index) => {
-                            return { name: roof.roofMatlNm, value: roof.roofMatlCd }
+                            return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                           })}
-                          value={currentRoofMaterial.roofMatlCd}
+                          value={currentRoofMaterial}
-                          onChange={(e) => {
+                          onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
-                            handleRoofTypeChange(e)
+                        />
-                          }}
+                        {/* <select
-                        /> */}
-                        <select
                           className="select-light dark"
                           name="roofType"
                           ref={roofRef.roofCd}
@@ -210,9 +220,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               </option>
                             )
                           })}
-                        </select>
+                        </select> */}
                       </div>
-                      {['R', 'C'].includes(currentRoofMaterial.widAuth) && (
+                      {currentRoofMaterial && ['R', 'C'].includes(currentRoofMaterial.widAuth) && (
                         <div className="flex-ment">
                           <span>W</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -220,7 +230,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               type="text"
                               className="input-origin block"
                               ref={roofRef.width}
-                              defaultValue={parseInt(currentRoofMaterial.width)}
+                              value={parseInt(currentRoofMaterial.width)}
+                              onChange={(e) => setCurrentRoofMaterial({ ...currentRoofMaterial, width: e.target.value })}
                               readOnly={currentRoofMaterial.widAuth === 'R'}
                             />
                           </div>
@@ -234,7 +245,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                             </div> */}
                         </div>
                       )}
-                      {['R', 'C'].includes(currentRoofMaterial.lenAuth) && (
+                      {currentRoofMaterial && ['R', 'C'].includes(currentRoofMaterial.lenAuth) && (
                         <div className="flex-ment">
                           <span>L</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -242,7 +253,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               type="text"
                               className="input-origin block"
                               ref={roofRef.length}
-                              defaultValue={parseInt(currentRoofMaterial.length)}
+                              value={parseInt(currentRoofMaterial.length)}
+                              onChange={(e) => setCurrentRoofMaterial({ ...currentRoofMaterial, length: e.target.value })}
                               readOnly={currentRoofMaterial.lenAuth === 'R'}
                             />
                           </div>
@@ -256,11 +268,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           </div> */}
                         </div>
                       )}
-                      {['C', 'R'].includes(currentRoofMaterial.raftAuth) && (
+                      {currentRoofMaterial && ['C', 'R'].includes(currentRoofMaterial.raftAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          <div className="select-wrap" style={{ width: '84px' }}>
+                          <div className="select-wrap" style={{ width: '160px' }}>
-                            <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
+                            <QSelectBox
+                              ref={roofRef.rafter}
+                              options={raftCodes.map((raft, index) => {
+                                return { ...raft, name: globalLocale === 'ko' ? raft.clCodeNm : raft.clCodeNmJp }
+                              })}
+                              value={currentRoofMaterial}
+                              onChange={(e) => handleRafterChange(e.clCode)}
+                            />
+                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
                               {raftCodes.map((raft, index) => {
                                 return (
                                   <option key={index} value={raft.clCode}>
@@ -268,11 +288,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                                   </option>
                                 )
                               })}
-                            </select>
+                            </select> */}
                           </div>
                         </div>
                       )}
-                      {['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
+                      {currentRoofMaterial && ['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('hajebichi')}</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -281,6 +301,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               ref={roofRef.hajebichi}
                               value={parseInt(currentRoofMaterial.hajebichi)}
+                              onChange={(e) => setCurrentRoofMaterial({ ...currentRoofMaterial, hajebichi: e.target.value })}
                               readOnly={currentRoofMaterial.roofPchAuth === 'R'}
                             />
                           </div>

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

@@ -3,13 +3,13 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { usePopup } from '@/hooks/usePopup'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
 import { useEffect, useState } from 'react'
-import { basicSettingState } from '@/store/settingAtom'
 import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
+import { globalLocaleStore } from '@/store/localeAtom'
 
 export default function RoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@@ -29,6 +29,7 @@ export default function RoofAllocationSetting(props) {
   const { fetchBasicSettings } = useCanvasSetting()
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
+  const globalLocale = useRecoilValue(globalLocaleStore)
   useEffect(() => {
     fetchBasicSettings()
     const raftCodeList = findCommonCode('203800')
@@ -37,7 +38,7 @@ export default function RoofAllocationSetting(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)}>
@@ -90,71 +91,62 @@ export default function RoofAllocationSetting(props) {
                             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>
+                              <div className="grid-select" style={{ width: '160px' }}>
-                          <div className="grid-select" style={{ width: '84px' }}>
+                                <QSelectBox
-                            <QSelectBox
+                                  options={raftCodes.map((raft) => ({ ...raft, name: globalLocale === 'ko' ? raft.clCodeNm : raft.clCodeNmJp }))}
-                              options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
+                                  value={raftCodes.find((r) => r.id === roof.id)}
-                              value={raftCodes.find((r) => r.id === roof.id)}
+                                />
-                            />
+                              </div>
-                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
+                            </div>
-                              {raftCodes.map((raft, index) => {
-                                return (
-                                  <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 className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}>

src/locales/ja.json

@@ -156,6 +156,7 @@
   "plan.menu.estimate": "見積",
   "plan.menu.estimate.roof.alloc": "屋根面の割り当て",
   "modal.roof.alloc.info": "※配置面初期設定で保存した[基本屋根材]を変更したり、屋根材を追加して割り当てることができます。",
+  "modal.roof.alloc.default.roof.material": "基本屋根材",
   "modal.roof.alloc.select.roof.material": "屋根材の選択",
   "modal.roof.alloc.select.parallel": "並列式",
   "modal.roof.alloc.select.stairs": "カスケード",

src/locales/ko.json

@@ -160,6 +160,7 @@
   "plan.menu.estimate": "견적서",
   "plan.menu.estimate.roof.alloc": "지붕면 할당",
   "modal.roof.alloc.info": "※ 배치면 초기설정에서 저장한 [기본 지붕재]를 변경하거나,  지붕재를 추가하여 할당할 수 있습니다.",
+  "modal.roof.alloc.default.roof.material": "기본지붕재",
   "modal.roof.alloc.select.roof.material": "지붕재 선택",
   "modal.roof.alloc.select.parallel": "병렬식",
   "modal.roof.alloc.select.stairs": "계단식",

src/styles/_modal.scss

@@ -81,6 +81,9 @@ $alert-color: #101010;
     &.l{
         width: 800px;
     }
+    &.ll{
+        width: 900px;
+    }
     &.mount{
         animation: mountpop .17s ease-in-out forwards;
     }
@@ -457,6 +460,14 @@ $alert-color: #101010;
     }
 }
 
+// 2024-12-11
+// .placement-roof-btn-wrap{
+//     display: flex;
+//     align-items: center;
+//     margin-left: auto;
+//     max-width: 250px;
+// }
+
 .pop-form-radio{
     display: flex;
     align-items: center;