🚨chore: GlobalDataProvider context 데이터를 임시로 localStorage로 복사 기능 추가

- 임시조치이며 개발 완료 시점에 삭제 예정

src/app/GlobalDataProvider.js

@@ -1,16 +1,24 @@
 'use client'
 
-import { createContext, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
+import { useLocalStorage } from 'usehooks-ts'
 
 export const GlobalDataContext = createContext({
   managementState: {},
   setManagementState: () => {},
+  managementStateLoaded: null,
 })
 
 const GlobalDataProvider = ({ children }) => {
   const [managementState, setManagementState] = useState({})
+  // TODO: 임시 조치이며 개발 완료시 삭제 예정 -> 잊지말기...
+  const [managementStateLoaded, setManagementStateLoaded] = useLocalStorage('managementStateLoaded', null)
 
-  return <GlobalDataContext.Provider value={{ managementState, setManagementState }}>{children}</GlobalDataContext.Provider>
+  useEffect(() => {
+    setManagementStateLoaded(managementState)
+  }, [managementState])
+
+  return <GlobalDataContext.Provider value={{ managementState, setManagementState, managementStateLoaded }}>{children}</GlobalDataContext.Provider>
 }
 
 export default GlobalDataProvider

src/components/Playground.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useRef, useState, useEffect } from 'react'
+import { useRef, useState, useEffect, useContext } from 'react'
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
 import { FaAnglesUp } from 'react-icons/fa6'
@@ -26,6 +26,7 @@ import QPagination from './common/pagination/QPagination'
 import { trestleRequestModels, constructionRequestModels, trestleDetailRequestModels } from '@/models/apiModels'
 import QSelectBox from './common/select/QSelectBox'
 import SampleReducer from './sample/SampleReducer'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
 
 export default function Playground() {
   const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@@ -52,6 +53,8 @@ export default function Playground() {
 
   const [users, setUsers] = useState([])
 
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
@@ -508,6 +511,15 @@ export default function Playground() {
         <div className="my-2">
           <SampleReducer />
         </div>
+        <div className="my-2">
+          <Button onClick={() => setManagementState({ ...managementState, objectNo: '1234567890' })}>GlobalDataProvider 테스트</Button>
+        </div>
+        <div className="my-2">
+          <Button onClick={() => setManagementState({})}>GlobalDataProvider 초기화</Button>
+        </div>
+        <div className="my-2">
+          <p>{managementStateLoaded?.objectNo}</p>
+        </div>
       </div>
     </>
   )