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

- 이벤트 정리 - 소스 코드 정리
2024-11-19 13:36:18 +09:00 · 2024-11-19 13:36:18 +09:00 · ea9f386e11
commit ea9f386e11
parent 3413347003
6 changed files with 2127 additions and 1736 deletions
--- a/src/app/floor-plan/FloorPlanProvider.js
+++ b/src/app/floor-plan/FloorPlanProvider.js
@ -1,9 +1,27 @@
 'ues client'

-import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
-import ServerError from '../error'
+// import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
+// import ServerError from '../error'
+import { createContext, useEffect, useState } from 'react'

-export const FloorPlanProvider = ({ children }) => {
-  console.log('FloorPlanProvider')
-  return <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+export const FloorPlanContext = createContext({
+  floorPlanState: {},
+  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
--- a/src/app/floor-plan/layout.js
+++ b/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 }) {
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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>
  )
 }
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/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>
--- a/src/components/floor-plan/modal/ImgLoad.jsx
+++ b/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'} />
-                <label htmlFor="ra06">アドレスを読み込む</label>
+                <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
+                <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>
--- a/yarn.lock
+++ b/yarn.lock