From a98fb8b017d43d03fbe0b7427206e154f73dd794 Mon Sep 17 00:00:00 2001
From: changkyu choi <okoookoo@naver.com>
Date: Mon, 14 Oct 2024 11:28:45 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=ED=99=94=EB=A9=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../placementShape/PlacementShapeSetting.jsx  | 369 ++++++++++++++++--
 1 file changed, 344 insertions(+), 25 deletions(-)

diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 637ebb0a..55cfcb6b 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -1,14 +1,163 @@
 import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
 import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
 import WithDraggable from '@/components/common/draggable/WithDraggable'
-import { Fragment, useState } from 'react'
+import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
+import { useRecoilState } from 'recoil'
+import { Fragment, useEffect, useState } from 'react'
+import { canvasSettingState } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
+import { useAxios } from '@/hooks/useAxios'
+import { useSwal } from '@/hooks/useSwal'
 
 export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
+  const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
-  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState('A')
+  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
+  const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
+  const [basicSetting, setBasicSettings] = useState({
+    roofSizeSet: 1,
+    roofAngleSet: 'slope',
+    roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }],
+  })
+
   const { getMessage } = useMessage()
+  const { get, post } = useAxios()
+  const { swalFire } = useSwal()
+
+  // 데이터를 최초 한 번만 조회
+  useEffect(() => {
+    console.log('PlacementShapeSetting useEffect 실행')
+
+    fetchSettings()
+  }, [objectNo])
+
+  // PlacementShapeSetting 조회 및 초기화
+  const fetchSettings = async () => {
+    try {
+      await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${objectNo}` }).then((res) => {
+        if (res.length == 0) return
+
+        // 'roofs' 배열을 생성하여 각 항목을 추가
+        const roofsRow = res.map((item) => {
+          return {
+            roofSizeSet: item.roofSizeSet,
+            roofAngleSet: item.roofAngleSet,
+          }
+        })
+
+        const roofsArray = res.some((item) => !item.roofSeq)
+          ? //최초 지붕재 추가 정보의 경우 roofsArray를 초기화 설정
+            res.map(() => ({
+              roofApply: true,
+              roofSeq: 1,
+              roofType: 1,
+              roofWidth: 200,
+              roofHeight: 200,
+              roofHajebichi: 200,
+              roofGap: 0,
+              roofLayout: 'parallel',
+            }))
+          : res.map((item) => ({
+              roofApply: item.roofApply === '' || item.roofApply === false ? false : true,
+              roofSeq: item.roofSeq,
+              roofType: item.roofType,
+              roofWidth: item.roofWidth,
+              roofHeight: item.roofHeight,
+              roofHajebichi: item.roofHajebichi,
+              roofGap: item.roofGap,
+              roofLayout: item.roofLayout,
+            }))
+        console.log('roofsArray ', roofsArray)
+        // 나머지 데이터와 함께 'roofs' 배열을 patternData에 넣음
+        const patternData = {
+          roofSizeSet: roofsRow[0].roofSizeSet, // 첫 번째 항목의 값을 사용
+          roofAngleSet: roofsRow[0].roofAngleSet, // 첫 번째 항목의 값을 사용
+          roofs: roofsArray, // 만들어진 roofs 배열
+        }
+
+        // 데이터 설정
+        setBasicSettings({ ...patternData })
+      })
+    } catch (error) {
+      console.error('Data fetching error:', error)
+    }
+
+    if (!(Object.keys(canvasSetting).length === 0 && canvasSetting.constructor === Object)) {
+      setBasicSettings({ ...canvasSetting })
+    }
+  }
+
+  const submitCanvasConfig = async () => {
+    try {
+      const patternData = {
+        objectNo,
+        roofSizeSet: basicSetting.roofSizeSet,
+        roofAngleSet: basicSetting.roofAngleSet,
+        roofMaterialsAddList: basicSetting.roofs,
+      }
+
+      await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
+
+      //Recoil 설정
+      setCanvasSetting({ ...basicSetting })
+    } catch (error) {
+      swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
+    }
+  }
+
+  // Function to update the roofType and corresponding values
+  const handleRoofTypeChange = (index, value) => {
+    const updatedRoofs = [...basicSetting.roofs]
+    const roofType = parseInt(value, 10)
+
+    // Reset other values based on the selected roofType
+    if (roofType === 1) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 1,
+        roofWidth: 265,
+        roofHeight: 235,
+        roofGap: 455,
+        hajebichi: 0,
+      }
+    } else if (roofType === 2) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 2,
+        roofGap: 265,
+        roofHajebichi: 265,
+        roofWidth: 0,
+        roofHeight: 0,
+      }
+    } else if (roofType === 3) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 3,
+        roofHajebichi: 265,
+        roofGap: 0,
+        roofWidth: 0,
+        roofHeight: 0,
+      }
+    } else if (roofType === 4) {
+      updatedRoofs[index] = {
+        ...updatedRoofs[index],
+        roofType: 4,
+        roofHeight: 265,
+        roofGap: 265,
+        roofHajebichi: 0,
+        roofWidth: 0,
+      }
+    }
+
+    setBasicSettings({
+      ...basicSetting,
+      roofs: updatedRoofs,
+    })
+  }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap l mount`}>
@@ -38,15 +187,36 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                   <td>
                     <div className="pop-form-radio">
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio01" id="ra01" />
+                        <input
+                          type="radio"
+                          name="roofSizeSet"
+                          id="ra01"
+                          value="1" // roofSizeSet 값이 '1'인 경우
+                          checked={basicSetting.roofSizeSet == '1'} // 선택 여부 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra01">{getMessage('modal.placement.initial.setting.size.roof')}</label>
                       </div>
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio01" id="ra02" />
+                        <input
+                          type="radio"
+                          name="roofSizeSet"
+                          id="ra02"
+                          value="2" // roofSizeSet 값이 '2'인 경우
+                          checked={basicSetting.roofSizeSet == '2'} // 선택 여부 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra02">{getMessage('modal.placement.initial.setting.size.actual')}</label>
                       </div>
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio01" id="ra03" />
+                        <input
+                          type="radio"
+                          name="roofSizeSet"
+                          id="ra03"
+                          value="3" // roofSizeSet 값이 '3'인 경우
+                          checked={basicSetting.roofSizeSet == '3'} // 선택 여부 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra03">{getMessage('modal.placement.initial.setting.size.none.pitch')}</label>
                       </div>
                     </div>
@@ -57,11 +227,25 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                   <td>
                     <div className="pop-form-radio">
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio02" id="ra04" />
+                        <input
+                          type="radio"
+                          name="roofAngleSet"
+                          id="ra04"
+                          value="slope" // 첫 번째 라디오 버튼의 값
+                          checked={basicSetting.roofAngleSet == 'slope'} // 현재 선택된 값인지 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra04">{getMessage('modal.placement.initial.setting.roof.pitch')}</label>
                       </div>
                       <div className="d-check-radio pop">
-                        <input type="radio" name="radio02" id="ra05" />
+                        <input
+                          type="radio"
+                          name="roofAngleSet"
+                          id="ra05"
+                          value="flat" // 두 번째 라디오 버튼의 값
+                          checked={basicSetting.roofAngleSet == 'flat'} // 현재 선택된 값인지 확인
+                          onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
+                        />
                         <label htmlFor="ra05">{getMessage('modal.placement.initial.setting.roof.angle')}</label>
                       </div>
                     </div>
@@ -75,19 +259,40 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                   <td>
                     <div className="placement-option">
                       <div className="select-wrap" style={{ width: '171px' }}>
-                        <select className="select-light dark" name="" id="" onChange={(e) => setSelectedRoofMaterial(e.target.value)}>
-                          <option value={'A'}>瓦 type A</option>
-                          <option value={'B'}>瓦 type B</option>
-                          <option value={'C'}>瓦 type C</option>
-                          <option value={'D'}>瓦 type D</option>
+                        <select
+                          className="select-light dark"
+                          name="roofType"
+                          value={basicSetting.roofs[0].roofType}
+                          onChange={(e) => handleRoofTypeChange(0, e.target.value)}
+                        >
+                          <option value="1">瓦 type A</option>
+                          <option value="2">瓦 type B</option>
+                          <option value="3">瓦 type C</option>
+                          <option value="4">瓦 type D</option>
                         </select>
                       </div>
-                      {selectedRoofMaterial === 'A' ? (
+                      {basicSetting.roofs[0].roofType === 1 ? (
                         <>
                           <div className="flex-ment">
                             <span>W</span>
                             <div className="select-wrap" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofWidth"
+                                value={basicSetting.roofs[0].roofWidth}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofWidth: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -95,7 +300,23 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <div className="flex-ment">
                             <span>L</span>
                             <div className="select-wrap" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHeight"
+                                value={basicSetting.roofs[0].roofHeight}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHeight: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>235</option>
                               </select>
                             </div>
@@ -103,18 +324,50 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <div className="flex-ment">
                             <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                             <div className="select-wrap" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofGap"
+                                value={basicSetting.roofs[0].roofGap}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofGap: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>455</option>
                               </select>
                             </div>
                           </div>
                         </>
-                      ) : selectedRoofMaterial === 'B' ? (
+                      ) : basicSetting.roofs[0].roofType === 2 ? (
                         <>
                           <div className="flex-ment">
                             <span>{getMessage('hajebichi')}</span>
                             <div className="grid-select no-flx" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHajebichi"
+                                value={basicSetting.roofs[0].roofHajebichi}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHajebichi: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -122,29 +375,77 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <div className="flex-ment">
                             <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                             <div className="grid-select no-flx right" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofGap"
+                                value={basicSetting.roofs[0].roofGap}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofGap: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
                           </div>
                         </>
-                      ) : selectedRoofMaterial === 'C' ? (
+                      ) : basicSetting.roofs[0].roofType === 3 ? (
                         <>
                           <div className="flex-ment">
                             <span>{getMessage('hajebichi')}</span>
                             <div className="grid-select no-flx" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHajebichi"
+                                value={basicSetting.roofs[0].roofHajebichi}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHajebichi: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
                           </div>
                         </>
-                      ) : selectedRoofMaterial === 'D' ? (
+                      ) : basicSetting.roofs[0].roofType === 4 ? (
                         <>
                           <div className="flex-ment">
                             <span>L</span>
                             <div className="grid-select no-flx" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofHeight"
+                                value={basicSetting.roofs[0].roofHeight}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofHeight: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -152,7 +453,23 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
                           <div className="flex-ment">
                             <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                             <div className="grid-select no-flx right" style={{ width: '84px' }}>
-                              <select className="select-light dark" name="" id="">
+                              <select
+                                className="select-light dark"
+                                name="roofGap"
+                                value={basicSetting.roofs[0].roofGap}
+                                onChange={(e) => {
+                                  // 상태 업데이트 함수 호출
+                                  setBasicSettings({
+                                    ...basicSetting,
+                                    roofs: [
+                                      {
+                                        ...basicSetting.roofs[0],
+                                        roofGap: e.target.value,
+                                      },
+                                    ],
+                                  })
+                                }}
+                              >
                                 <option>265</option>
                               </select>
                             </div>
@@ -168,7 +485,9 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
             </table>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
+            <button className="btn-frame modal act" onClick={() => submitCanvasConfig()}>
+              {getMessage('modal.common.save')}
+            </button>
           </div>
         </div>
         {showSizeGuideModal && <SizeGuide setShowSizeGuidModal={setShowSizeGuidModal} />}