qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

GlobalLoading 수정

Browse Source
This commit is contained in:
LEEYONGJAE 2025-01-21 11:14:27 +09:00
parent 297f1f563b
commit 16708b3ef3
5 changed files with 94 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/GlobalLoadingProvider.js Normal file
View File

@ -0,0 +1,11 @@
'use client'
import { useContext } from 'react'
import { QcastContext } from './QcastProvider'
import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
export default function GlobalLoadingProvider({ children }) {
const { isGlobalLoading } = useContext(QcastContext)
return <QcastContext.Provider>{isGlobalLoading && <GlobalSpinner />}</QcastContext.Provider>
}

8
src/app/QcastProvider.js
View File

@ -6,7 +6,6 @@ import { useCommonCode } from '@/hooks/common/useCommonCode'
import ServerError from './error' import ServerError from './error'
import '@/styles/common.scss' import '@/styles/common.scss'
import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
export const QcastContext = createContext({ export const QcastContext = createContext({
qcastState: {}, qcastState: {},
@ -17,7 +16,7 @@ export const QcastContext = createContext({
export const QcastProvider = ({ children }) => { export const QcastProvider = ({ children }) => {
const [planSave, setPlanSave] = useState(false) const [planSave, setPlanSave] = useState(false)
const [isGlobalLoading, setIsGlobalLoading] = useState(false) const [isGlobalLoading, setIsGlobalLoading] = useState(true)
const { commonCode, findCommonCode } = useCommonCode() const { commonCode, findCommonCode } = useCommonCode()
const [qcastState, setQcastState] = useState({ const [qcastState, setQcastState] = useState({
@ -35,11 +34,6 @@ export const QcastProvider = ({ children }) => {
return ( return (
<> <>
{isGlobalLoading && (
<div className="fixed inset-0 bg-white z-50 flex items-center justify-center">
<GlobalSpinner />
</div>
)}
<QcastContext.Provider value={{ qcastState, setQcastState, isGlobalLoading, setIsGlobalLoading }}> <QcastContext.Provider value={{ qcastState, setQcastState, isGlobalLoading, setIsGlobalLoading }}>
<ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary> <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
</QcastContext.Provider> </QcastContext.Provider>

6
src/app/layout.js
View File

@ -8,15 +8,13 @@ import SessionProvider from './SessionProvider'
import GlobalDataProvider from './GlobalDataProvider' import GlobalDataProvider from './GlobalDataProvider'
import Header from '@/components/header/Header' import Header from '@/components/header/Header'
import QModal from '@/components/common/modal/QModal' import QModal from '@/components/common/modal/QModal'
import Dimmed from '@/components/ui/Dimmed'
import PopupManager from '@/components/common/popupManager/PopupManager' import PopupManager from '@/components/common/popupManager/PopupManager'
import './globals.css' import './globals.css'
import '../styles/style.scss' import '../styles/style.scss'
import '../styles/contents.scss' import '../styles/contents.scss'
import Footer from '@/components/footer/Footer' import Footer from '@/components/footer/Footer'
import { Suspense } from 'react' import GlobalLoadingProvider from './GlobalLoadingProvider'
import GlobalSpinner from '@/components/common/spinner/GlobalSpinner'
export const metadata = { export const metadata = {
title: 'Create Next App', title: 'Create Next App',
@ -70,10 +68,10 @@ export default async function RootLayout({ children }) {
<QcastProvider>{children}</QcastProvider> <QcastProvider>{children}</QcastProvider>
) : ( ) : (
<QcastProvider> <QcastProvider>
<GlobalLoadingProvider />
<div className="wrap"> <div className="wrap">
<Header userSession={sessionProps} /> <Header userSession={sessionProps} />
<div className="content"> <div className="content">
<Dimmed />
<SessionProvider useSession={sessionProps}>{children}</SessionProvider> <SessionProvider useSession={sessionProps}>{children}</SessionProvider>
</div> </div>
<Footer /> <Footer />

2
src/components/header/Header.jsx
View File

@ -221,7 +221,7 @@ export default function Header(props) {
return ( return (
<> <>
{!isGlobalLoading && !(pathName.includes('login') || pathName.includes('join') || sessionState.pwdInitYn === 'N') && ( {!(pathName.includes('login') || pathName.includes('join') || sessionState.pwdInitYn === 'N') && (
<header className={isDimmed}> <header className={isDimmed}>
<div className="header-inner"> <div className="header-inner">
<div className="header-right"> <div className="header-right">

160
src/components/management/StuffSubHeader.jsx
View File

@ -66,87 +66,85 @@ export default function StuffSubHeader({ type }) {
} }
return ( return (
!isGlobalLoading && ( <>
<> <div className="sub-header">
<div className="sub-header"> <div className="sub-header-inner">
<div className="sub-header-inner"> {type === 'list' && (
{type === 'list' && ( <>
<> <Link href={'#'}>
<Link href={'#'}> <h1 className="sub-header-title">{getMessage('header.menus.management')}</h1>
<h1 className="sub-header-title">{getMessage('header.menus.management')}</h1> </Link>
</Link> <ul className="sub-header-location">
<ul className="sub-header-location"> <li className="location-item">
<li className="location-item"> <span className="home">
<span className="home"> <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} /> </span>
</span> </li>
</li> <li className="location-item">
<li className="location-item"> <span>{getMessage('header.menus.management')}</span>
<span>{getMessage('header.menus.management')}</span> </li>
</li> <li className="location-item">
<li className="location-item"> <span>{getMessage('header.menus.management.stuffList')}</span>
<span>{getMessage('header.menus.management.stuffList')}</span> </li>
</li> </ul>
</ul> </>
</> )}
)} {type === 'temp' && (
{type === 'temp' && ( <>
<> <ul className="sub-header-title-wrap">
<ul className="sub-header-title-wrap"> <li className="title-item">
<li className="title-item"> <Link className="sub-header-title" href={'#'}>
<Link className="sub-header-title" href={'#'}> {getMessage('stuff.temp.subTitle')}
{getMessage('stuff.temp.subTitle')} </Link>
</Link> </li>
</li> </ul>
</ul> <ul className="sub-header-location">
<ul className="sub-header-location"> <li className="location-item">
<li className="location-item"> <span className="home">
<span className="home"> <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} /> </span>
</span> </li>
</li> <li className="location-item">
<li className="location-item"> <span>{getMessage('header.menus.management')}</span>
<span>{getMessage('header.menus.management')}</span> </li>
</li> <li className="location-item">
<li className="location-item"> <span>{getMessage('header.menus.management.newStuff')}</span>
<span>{getMessage('header.menus.management.newStuff')}</span> </li>
</li> </ul>
</ul> </>
</> )}
)} {type === 'detail' && (
{type === 'detail' && ( <>
<> <ul className="sub-header-title-wrap">
<ul className="sub-header-title-wrap"> <li className="title-item">
<li className="title-item"> <Link className="sub-header-title" href={'#'}>
<Link className="sub-header-title" href={'#'}> {getMessage('stuff.temp.subTitle')}
{getMessage('stuff.temp.subTitle')} </Link>
</Link> </li>
</li> <li className="title-item" style={{ display: buttonStyle }}>
<li className="title-item" style={{ display: buttonStyle }}> <a className="sub-header-title" onClick={moveFloorPlan}>
<a className="sub-header-title" onClick={moveFloorPlan}> <span className="icon drawing"></span>
<span className="icon drawing"></span> {getMessage('stuff.temp.subTitle2')}
{getMessage('stuff.temp.subTitle2')} </a>
</a> </li>
</li> </ul>
</ul> <ul className="sub-header-location">
<ul className="sub-header-location"> <li className="location-item">
<li className="location-item"> <span className="home">
<span className="home"> <Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} />
<Image src="/static/images/main/home_icon.svg" alt="react" width={16} height={16} /> </span>
</span> </li>
</li> <li className="location-item">
<li className="location-item"> <span>{getMessage('header.menus.management')}</span>
<span>{getMessage('header.menus.management')}</span> </li>
</li> <li className="location-item">
<li className="location-item"> <span>{getMessage('header.menus.management.detail')}</span>
<span>{getMessage('header.menus.management.detail')}</span> </li>
</li> </ul>
</ul> </>
</> )}
)}
</div>
</div> </div>
</> </div>
) </>
) )
} }