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

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

@ -1,14 +1,14 @@
'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 SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
import '@/styles/contents.scss'
import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall'
import { useEffect, useState } from 'react'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import '@/styles/contents.scss'
export default function FloorPlan() {
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 QSelectBox from '@/components/common/select/QSelectBox'
import { useRecoilValue } from 'recoil'
import { dimmedStore } from '@/store/commonAtom'
export const ToggleonMouse = (e, act, target) => {
const listWrap = e.target.closest(target)
@ -31,6 +33,9 @@ export default function Header(props) {
// }
const [selected, setSelected] = useState('')
const dimmedState = useRecoilValue(dimmedStore)
const isDimmed = dimmedState ? 'opacity-50 bg-black' : ''
const SelectOptions = [
{ id: 0, name: 'オンライン保証シ', link: '' },
{ id: 1, name: 'ステム', link: '' },
@ -108,7 +113,7 @@ export default function Header(props) {
return (
!(pathName.includes('login') || pathName.includes('join')) && (
<header>
<header className={isDimmed}>
<div className="header-inner">
<div className="header-right">
<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,
})