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

feat: Add Dimmed component & state recoil

Browse Source
This commit is contained in:
yoosangwook 2024-09-23 09:24:32 +09:00
parent 1430b187fa
commit d57481c1b5
5 changed files with 44 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/layout.js
View File

@ -1,4 +1,4 @@
import { Inter } from 'next/font/google' // import { Inter } from 'next/font/google'
import { headers } from 'next/headers' import { headers } from 'next/headers'
import { redirect } from 'next/navigation' import { redirect } from 'next/navigation'
@ -8,14 +8,15 @@ import UIProvider from './UIProvider'
import { ToastContainer } from 'react-toastify' import { ToastContainer } from 'react-toastify'
import { QcastProvider } from './QcastProvider'
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 { QcastProvider } from './QcastProvider'
import './globals.css' import './globals.css'
import '../styles/style.scss' import '../styles/style.scss'
import Dimmed from '@/components/ui/Dimmed'
const inter = Inter({ subsets: ['latin'] }) // const inter = Inter({ subsets: ['latin'] })
export const metadata = { export const metadata = {
title: 'Create Next App', title: 'Create Next App',
@ -35,22 +36,23 @@ export default async function RootLayout({ children }) {
} }
return ( return (
<html lang="en"> <RecoilRootWrapper>
<body className={inter.className}> <html lang="en">
{/*{headerPathname !== '/login' && <Headers />}*/} <body>
<RecoilRootWrapper> {/*{headerPathname !== '/login' && <Headers />}*/}
<div className="wrap"> <div className="wrap">
<Header loginedUserNm={session?.userNm} /> <Header loginedUserNm={session?.userNm} />
<div className="content"> <UIProvider>
<UIProvider> <div className="content">
<Dimmed />
<QcastProvider>{children}</QcastProvider> <QcastProvider>{children}</QcastProvider>
</UIProvider> </div>
</div> </UIProvider>
</div> </div>
<ToastContainer /> <ToastContainer />
<QModal /> <QModal />
</RecoilRootWrapper> </body>
</body> </html>
</html> </RecoilRootWrapper>
) )
} }

10
src/components/floor-plan/FloorPlan.jsx
View File

@ -1,14 +1,14 @@
'use client' 'use client'
import { useEffect, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import CanvasMenu from '@/components/floor-plan/CanvasMenu' import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import CanvasLayout from '@/components/floor-plan/CanvasLayout' import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import '@/styles/contents.scss'
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall' import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
import { useEffect, useState } from 'react' import '@/styles/contents.scss'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
export default function FloorPlan() { export default function FloorPlan() {
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)

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

@ -6,6 +6,8 @@ import { useMessage } from '@/hooks/useMessage'
import { logout } from '@/lib/authActions' import { logout } from '@/lib/authActions'
import QSelectBox from '@/components/common/select/QSelectBox' import QSelectBox from '@/components/common/select/QSelectBox'
import { useRecoilValue } from 'recoil'
import { dimmedStore } from '@/store/commonAtom'
export const ToggleonMouse = (e, act, target) => { export const ToggleonMouse = (e, act, target) => {
const listWrap = e.target.closest(target) const listWrap = e.target.closest(target)
@ -31,6 +33,9 @@ export default function Header(props) {
// } // }
const [selected, setSelected] = useState('') const [selected, setSelected] = useState('')
const dimmedState = useRecoilValue(dimmedStore)
const isDimmed = dimmedState ? 'opacity-50 bg-black' : ''
const SelectOptions = [ const SelectOptions = [
{ id: 0, name: 'オンライン保証シ', link: '' }, { id: 0, name: 'オンライン保証シ', link: '' },
{ id: 1, name: 'ステム', link: '' }, { id: 1, name: 'ステム', link: '' },
@ -108,7 +113,7 @@ export default function Header(props) {
return ( return (
!(pathName.includes('login') || pathName.includes('join')) && ( !(pathName.includes('login') || pathName.includes('join')) && (
<header> <header className={isDimmed}>
<div className="header-inner"> <div className="header-inner">
<div className="header-right"> <div className="header-right">
<h1 className="logo"> <h1 className="logo">

11
src/components/ui/Dimmed.jsx Normal file
View File

@ -0,0 +1,11 @@
'use client'
import { useRecoilValue } from 'recoil'
import { dimmedStore } from '@/store/commonAtom'
export default function Dimmed() {
const dimmedState = useRecoilValue(dimmedStore)
const isDimmed = dimmedState ? 'fixed top-0 left-0 w-full h-full z-100 opacity-50 bg-black' : ''
return <div className={isDimmed}></div>
}

6
src/store/commonAtom.js Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil'
export const dimmedStore = atom({
key: 'dimmedState',
default: false,
})