fix: 도면 배경 설정 기능 개발중

- 이벤트 정리
- 소스 코드 정리

src/app/floor-plan/FloorPlanProvider.js

@@ -1,9 +1,27 @@
 'ues client'
 
-import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+// import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
-import ServerError from '../error'
+// import ServerError from '../error'
+import { createContext, useEffect, useState } from 'react'
 
-export const FloorPlanProvider = ({ children }) => {
+export const FloorPlanContext = createContext({
-  console.log('FloorPlanProvider')
+  floorPlanState: {},
-  return <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+  setFloorPlanState: () => {},
+})
+
+const FloorPlanProvider = ({ children }) => {
+  const [floorPlanState, setFloorPlanState] = useState({
+    // 플랜 파일 업로드 모달 오픈 제어
+    refFileModalOpen: false,
+    // 플랜 회전 모드 제어
+    toggleRotate: false,
+  })
+
+  useEffect(() => {
+    console.log('🚀 ~ floorPlanState:', floorPlanState)
+  }, [floorPlanState])
+
+  return <FloorPlanContext.Provider value={{ floorPlanState, setFloorPlanState }}>{children}</FloorPlanContext.Provider>
 }
+
+export default FloorPlanProvider

src/app/floor-plan/layout.js

@@ -1,6 +1,6 @@
 'use client'
 import FloorPlan from '@/components/floor-plan/FloorPlan'
-import { FloorPlanProvider } from './FloorPlanProvider'
+import FloorPlanProvider from './FloorPlanProvider'
 import CanvasLayout from '@/components/floor-plan/CanvasLayout'
 
 export default function FloorPlanLayout({ children }) {

src/components/floor-plan/CanvasFrame.jsx

@@ -14,6 +14,7 @@ import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitial
 import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 import { totalDisplaySelector } from '@/store/settingAtom'
+import ImgLoad from '@/components/floor-plan/modal/ImgLoad'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -76,6 +77,8 @@ export default function CanvasFrame() {
         MENU.MODULE_CIRCUIT_SETTING.PLAN_ORIENTATION,
       ].includes(currentMenu) &&
         totalDisplay && <PanelBatchStatistics />}
+      {/* 이미지 로드 팝업 */}
+      <ImgLoad />
     </div>
   )
 }

src/components/floor-plan/CanvasMenu.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 
@@ -35,7 +35,7 @@ import { MENU } from '@/common/common'
 import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
 import { estimateState } from '@/store/floorPlanObjectAtom'
 import DocDownOptionPop from '../estimate/popup/DocDownOptionPop'
-import { button } from '@nextui-org/react'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 
 export default function CanvasMenu(props) {
   const { menuNumber, setMenuNumber } = props
@@ -68,6 +68,7 @@ export default function CanvasMenu(props) {
   const commonUtils = useRecoilValue(commonUtilsState)
   const { commonFunctions } = useCommonUtils()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
+  const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
 
   const onClickNav = (menu) => {
     setMenuNumber(menu.index)
@@ -240,7 +241,10 @@ export default function CanvasMenu(props) {
                 <QSelectBox title={'瓦53A'} option={SelectOption} />
               </div>
               <div className="btn-from">
-                <button className="btn10"></button>
+                <button
+                  className={`btn10 ${floorPlanState.refFileModalOpen && 'active'}`}
+                  onClick={() => setFloorPlanState({ ...floorPlanState, refFileModalOpen: true })}
+                ></button>
                 {/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>*/}
                 <button className="btn04" onClick={handlePopup}></button>
                 <button className="btn05"></button>

src/components/floor-plan/modal/ImgLoad.jsx

@@ -1,3 +1,6 @@
+import { useContext, useEffect } from 'react'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
+
 import { useMessage } from '@/hooks/useMessage'
 import { useRefFiles } from '@/hooks/common/useRefFiles'
 import { usePlan } from '@/hooks/usePlan'
@@ -20,9 +23,24 @@ export default function ImgLoad() {
   } = useRefFiles()
   const { currentCanvasPlan } = usePlan()
   const { getMessage } = useMessage()
+  const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
+
+  const handleModal = () => {
+    setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
+  }
+
+  useEffect(() => {
+    console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
+    console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
+  }, [floorPlanState.refFileModalOpen])
+
+  useEffect(() => {
+    const refFileMethod = currentCanvasPlan?.mapPositionAddress === null ? '1' : '2'
+    setRefFileMethod(refFileMethod)
+  }, [currentCanvasPlan])
 
   return (
-    <WithDraggable isShow={true}>
+    <WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} handle=".modal">
       <div className={`modal-pop-wrap r`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('common.input.file')}</h1>
@@ -32,7 +50,11 @@ export default function ImgLoad() {
           <div className="img-flex-box">
             <span className="normal-font mr10">サイズ調整と回転</span>
             <label className="toggle-btn">
-              <input type="checkbox" />
+              <input
+                type="checkbox"
+                checked={floorPlanState.toggleRotate}
+                onChange={(e) => setFloorPlanState({ ...floorPlanState, toggleRotate: e.target.checked })}
+              />
               <span className="slider"></span>
             </label>
           </div>
@@ -48,13 +70,18 @@ export default function ImgLoad() {
                     <span className="img-edit"></span>
                     ファイルの追加
                   </label>
-                  <input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
+                  <input
+                    type="file"
+                    id="img_file"
+                    style={{ display: 'none' }}
+                    onChange={refFileMethod === '1' ? (e) => handleRefFile(e.target.files[0]) : () => {}}
+                  />
                 </div>
                 <div className="img-name-wrap">
                   {/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
                   <button className="img-check"></button> */}
                   {currentCanvasPlan?.bgImageName === null ? (
-                    <input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
+                    <input type="text" className="input-origin al-l" value={refImage ? refImage.name : ''} readOnly />
                   ) : (
                     <input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
                   )}
@@ -64,13 +91,13 @@ export default function ImgLoad() {
             </div>
             <div className="img-load-item">
               <div className="d-check-radio pop">
-                <input type="radio" name="radio03" id="ra06" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
+                <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
-                <label htmlFor="ra06">アドレスを読み込む</label>
+                <label htmlFor="ra07">アドレスを読み込む</label>
               </div>
               <div className="img-flex-box for-address">
-                <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} />
+                <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={currentCanvasPlan?.mapPositionAddress} />
                 <div className="img-edit-wrap">
-                  <button className="img-edit-btn" onClick={handleMapImageDown}>
+                  <button className="img-edit-btn" onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}>
                     完了
                   </button>
                 </div>
@@ -80,7 +107,9 @@ export default function ImgLoad() {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">完了</button>
+            <button className="btn-frame modal act" onClick={handleModal}>
+              完了
+            </button>
           </div>
         </div>
       </div>