feat: 메인 페이지 fetchObjectList 호출

- 두번 호출 되던 문제 해결
- 관련 변수들 context 로 위치 변경

src/app/QcastProvider.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { createContext, useEffect, useState } from 'react'
 import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import { usePlan } from '@/hooks/usePlan'
@@ -8,16 +8,29 @@ import ServerError from './error'
 
 import '@/styles/common.scss'
 
+export const QcastContext = createContext({
+  qcastState: {},
+  setQcastState: () => {},
+})
+
 export const QcastProvider = ({ children }) => {
   const [planSave, setPlanSave] = useState(false)
   const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan()
   const { commonCode, findCommonCode } = useCommonCode()
 
+  const [qcastState, setQcastState] = useState({
+    saleStoreId: '',
+    saleStoreName: '',
+    objectList: [],
+    businessCharger: null,
+    businessChargerMail: null,
+  })
+
   useEffect(() => {
     const targetElement = document.getElementById('canvas')
     if (!targetElement && currentCanvasPlan?.id && planSave) {
-        setPlanSave((prev) => !prev)
-        checkUnsavedCanvasPlan(currentCanvasPlan.userId)
+      setPlanSave((prev) => !prev)
+      checkUnsavedCanvasPlan(currentCanvasPlan.userId)
     } else if (targetElement && currentCanvasPlan?.id) {
       setPlanSave(true)
     }
@@ -30,7 +43,9 @@ export const QcastProvider = ({ children }) => {
 
   return (
     <>
-      <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+      <QcastContext.Provider value={{ qcastState, setQcastState }}>
+        <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+      </QcastContext.Provider>
     </>
   )
 }

src/components/Main.jsx

@@ -12,6 +12,7 @@ import '@/styles/contents.scss'
 import ChangePasswordPop from './main/ChangePasswordPop'
 import { searchState } from '@/store/boardAtom'
 import { SessionContext } from '@/app/SessionProvider'
+import { QcastContext } from '@/app/QcastProvider'
 
 export default function MainPage() {
   const { session } = useContext(SessionContext)
@@ -26,18 +27,20 @@ export default function MainPage() {
 
   const [searchRadioType, setSearchRadioType] = useState('object')
 
-  const [saleStoreId, setSaleStoreId] = useState('')
-  const [saleStoreName, setSaleStoreName] = useState('')
+  // const [saleStoreId, setSaleStoreId] = useState('')
+  // const [saleStoreName, setSaleStoreName] = useState('')
 
   const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
 
   const [searchForm, setSearchForm] = useRecoilState(searchState)
 
-  useEffect(() => {
-    if (session.pwdInitYn === 'Y') {
-      fetchObjectList()
-    }
-  }, [session])
+  const { qcastState } = useContext(QcastContext)
+
+  // useEffect(() => {
+  //   if (session.pwdInitYn === 'Y') {
+  //     fetchObjectList()
+  //   }
+  // }, [session])
 
   const fetchObjectList = async () => {
     try {
@@ -108,7 +111,7 @@ export default function MainPage() {
               </div>
               <span className="store-arr"></span>
               <div className="store-id-name">
-                {saleStoreId} / {saleStoreName}
+                {qcastState?.saleStoreId} / {qcastState?.saleStoreName}
               </div>
             </div>
             <div className="main-search-wrap">

src/components/main/MainContents.jsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useEffect, useState, useContext } from 'react'
 import ProductItem from './ProductItem'
 import { useMessage } from '@/hooks/useMessage'
@@ -10,6 +12,8 @@ import { globalLocaleStore } from '@/store/localeAtom'
 import { queryStringFormatter } from '@/util/common-utils'
 import MainSkeleton from '../ui/MainSkeleton'
 import { SessionContext } from '@/app/SessionProvider'
+import { useMainContentsController } from '@/hooks/main/useMainContentsController'
+import { QcastContext } from '@/app/QcastProvider'
 
 export default function MainContents() {
   const { session } = useContext(SessionContext)
@@ -19,7 +23,7 @@ export default function MainContents() {
   const { promiseGet } = useAxios(globalLocaleState)
 
   //최근 물건
-  const [objectList, setObjectList] = useState([])
+  // const [objectList, setObjectList] = useState([])
 
   //공지사항
   const [recentNoticeList, setRecentNoticeList] = useState([])
@@ -28,36 +32,42 @@ export default function MainContents() {
   const [recentFaqList, setRecentFaqList] = useState([])
 
   //Sales Contact info
-  const [businessCharger, setBusinessCharger] = useState(null)
-  const [businessChargerMail, setBusinessChargerMail] = useState(null)
+  // const [businessCharger, setBusinessCharger] = useState(null)
+  // const [businessChargerMail, setBusinessChargerMail] = useState(null)
+
+  const { qcastState } = useContext(QcastContext)
+  const { fetchObjectList, initObjectList } = useMainContentsController()
 
   useEffect(() => {
     fetchObjectList()
     fetchNoticeList()
     fetchFaqList()
+    return () => {
+      initObjectList()
+    }
   }, [])
 
   //최근 갱신 물건목록 / Sales Contact info 정보
-  const fetchObjectList = async () => {
-    try {
-      const apiUrl = `/api/main-page/object/${session?.storeId}/list`
-      await promiseGet({
-        url: apiUrl,
-      }).then((res) => {
-        if (res.status === 200) {
-          setObjectList(res.data.objectList)
-          setBusinessCharger(res.data.businessCharger)
-          setBusinessChargerMail(res.data.businessChargerMail)
-        } else {
-          setObjectList([])
-          setBusinessCharger(null)
-          setBusinessChargerMail(null)
-        }
-      })
-    } catch (error) {
-      console.error('MAIN API fetching error:', error)
-    }
-  }
+  // const fetchObjectList = async () => {
+  //   try {
+  //     const apiUrl = `/api/main-page/object/${session?.storeId}/list`
+  //     await promiseGet({
+  //       url: apiUrl,
+  //     }).then((res) => {
+  //       if (res.status === 200) {
+  //         setObjectList(res.data.objectList)
+  //         setBusinessCharger(res.data.businessCharger)
+  //         setBusinessChargerMail(res.data.businessChargerMail)
+  //       } else {
+  //         setObjectList([])
+  //         setBusinessCharger(null)
+  //         setBusinessChargerMail(null)
+  //       }
+  //     })
+  //   } catch (error) {
+  //     console.error('MAIN API fetching error:', error)
+  //   }
+  // }
 
   //공지사항 호출
   const fetchNoticeList = async () => {
@@ -109,9 +119,9 @@ export default function MainContents() {
     <div className="main-product-list-wrap">
       <div className="main-product-list">
         <ProductItem num={1} name={getMessage('main.content.objectList')}>
-          {objectList.length > 0 ? (
+          {qcastState?.objectList.length > 0 ? (
             <ul className="recently-list">
-              {objectList.map((row) => {
+              {qcastState?.objectList.map((row) => {
                 return (
                   <li
                     key={row.objectNo}
@@ -190,7 +200,7 @@ export default function MainContents() {
               <div className="icon-box">
                 <Image src="/static/images/main/user.svg" alt="react" width={20} height={20} />
               </div>
-              {(businessCharger && <div className="infor-data">{businessCharger}</div>) || (
+              {(qcastState?.businessCharger && <div className="infor-data">{qcastState?.businessCharger}</div>) || (
                 <div className="infor-data pre">{getMessage('main.content.noBusiness')}</div>
               )}
             </li>
@@ -198,7 +208,7 @@ export default function MainContents() {
               <div className="icon-box">
                 <Image src="/static/images/main/mail.svg" alt="react" width={20} height={20} />
               </div>
-              {(businessChargerMail && <div className="infor-data pre">{businessChargerMail}</div>) || (
+              {(qcastState?.businessChargerMail && <div className="infor-data pre">{qcastState?.businessChargerMail}</div>) || (
                 <div className="infor-data pre">{getMessage('main.content.noBusiness')}</div>
               )}
             </li>

src/hooks/main/useMainContentsController.js

@@ -0,0 +1,89 @@
+'use client'
+
+import { useContext } from 'react'
+import { useAxios } from '../useAxios'
+import { SessionContext } from '@/app/SessionProvider'
+import { QcastContext } from '@/app/QcastProvider'
+
+export const useMainContentsController = () => {
+  const { session } = useContext(SessionContext)
+  const { promiseGet } = useAxios()
+  const { setQcastState } = useContext(QcastContext)
+
+  /**
+   * main search area
+   */
+  // const [saleStoreId, setSaleStoreId] = useState('')
+  // const [saleStoreName, setSaleStoreName] = useState('')
+
+  /**
+   * main contents area
+   */
+  // const [objectList, setObjectList] = useState([])
+  // const [businessCharger, setBusinessCharger] = useState(null)
+  // const [businessChargerMail, setBusinessChargerMail] = useState(null)
+
+  /**
+   * 최근 물건 목록 조회
+   */
+  const fetchObjectList = async () => {
+    try {
+      const apiUrl = `/api/main-page/object/${session?.storeId}/list`
+      await promiseGet({
+        url: apiUrl,
+      }).then((res) => {
+        if (res.status === 200) {
+          // setSaleStoreId(res.data.saleStoreId)
+          // setSaleStoreName(res.data.saleStoreName)
+
+          // setObjectList(res.data.objectList)
+          // setBusinessCharger(res.data.businessCharger)
+          // setBusinessChargerMail(res.data.businessChargerMail)
+          setQcastState({
+            saleStoreId: res.data.saleStoreId,
+            saleStoreName: res.data.saleStoreName,
+            objectList: res.data.objectList,
+            businessCharger: res.data.businessCharger,
+            businessChargerMail: res.data.businessChargerMail,
+          })
+        } else {
+          // setSaleStoreId('')
+          // setSaleStoreName('')
+
+          // setObjectList([])
+          // setBusinessCharger(null)
+          // setBusinessChargerMail(null)
+          setQcastState({
+            saleStoreId: '',
+            saleStoreName: '',
+            objectList: [],
+            businessCharger: null,
+            businessChargerMail: null,
+          })
+        }
+      })
+    } catch (error) {
+      console.error('MAIN API fetching error:', error)
+    }
+  }
+
+  const initObjectList = () => {
+    setQcastState({
+      saleStoreId: '',
+      saleStoreName: '',
+      objectList: [],
+      businessCharger: null,
+      businessChargerMail: null,
+    })
+  }
+
+  return {
+    // saleStoreId,
+    // saleStoreName,
+    // objectList,
+    // businessCharger,
+    // businessChargerMail,
+    fetchObjectList,
+    initObjectList,
+  }
+}