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

fix: Add Sync SessionStore at userSession

Browse Source 
세션 스토어와 유저 세션을 동기화 하는 로직추가 / layout 컴포넌트 코드 수정
This commit is contained in:
yoosangwook 2024-09-26 14:58:32 +09:00
parent 14faacf985
commit e9009ffdd5
2 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/layout.js
View File

@ -31,6 +31,28 @@ export default async function RootLayout({ children }) {
// const isLoggedIn = await checkSession() // const isLoggedIn = await checkSession()
const session = await getSession() const session = await getSession()
console.log('session[layout]:', session) console.log('session[layout]:', session)
let sessionProps = {}
if (session.isLoggedIn) {
sessionProps = {
userId: session.userId,
saleStoreId: session.saleStoreId,
name: session.name,
mail: session.mail,
tel: session.tel,
storeId: session.storeId,
userNm: session.userNm,
userNmKana: session.userNmKana,
category: session.category,
telNo: session.telNo,
fax: session.fax,
email: session.email,
pwdInitYn: session.pwdInitYn,
isLoggedIn: session.isLoggedIn,
}
}
if (!headerPathname.includes('/login') && !session.isLoggedIn) { if (!headerPathname.includes('/login') && !session.isLoggedIn) {
redirect('/login') redirect('/login')
} }
@ -41,7 +63,7 @@ export default async function RootLayout({ children }) {
<body> <body>
{/*{headerPathname !== '/login' && <Headers />}*/} {/*{headerPathname !== '/login' && <Headers />}*/}
<div className="wrap"> <div className="wrap">
<Header loginedUserNm={session?.userNm} /> <Header userSession={sessionProps} />
<UIProvider> <UIProvider>
<div className="content"> <div className="content">
<Dimmed /> <Dimmed />

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

@ -1,13 +1,16 @@
'use client' 'use client'
import { Fragment, useState } from 'react' import { Fragment, useCallback, useEffect, useState } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation' import { usePathname } from 'next/navigation'
import { useRecoilState, useRecoilValue } from 'recoil'
import { dimmedStore, sessionStore } from '@/store/commonAtom'
import { useMessage } from '@/hooks/useMessage' 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)
@ -25,7 +28,8 @@ export const ToggleonMouse = (e, act, target) => {
} }
export default function Header(props) { export default function Header(props) {
const { loginedUserNm } = props const { userSession } = props
const [sessionState, setSessionState] = useRecoilState(sessionStore)
const { getMessage } = useMessage() const { getMessage } = useMessage()
const pathName = usePathname() const pathName = usePathname()
// if (pathName.includes('login') || pathName.includes('join')) { // if (pathName.includes('login') || pathName.includes('join')) {
@ -65,6 +69,14 @@ export default function Header(props) {
}, },
] ]
const syncSession = useCallback(() => {
setSessionState({ ...userSession })
})
useEffect(() => {
syncSession()
}, [userSession])
const onChangeSelect = (option) => { const onChangeSelect = (option) => {
setSelected(option) setSelected(option)
} }
@ -125,7 +137,7 @@ export default function Header(props) {
</div> </div>
<div className="header-left"> <div className="header-left">
<div className="profile-box"> <div className="profile-box">
<button className="profile">{loginedUserNm}</button> <button className="profile">{userSession.userNm}</button>
</div> </div>
<div className="sign-out-box"> <div className="sign-out-box">
<button className="sign-out" onClick={() => logout()}> <button className="sign-out" onClick={() => logout()}>