로그인 후 메인 or 비밀번호 변경팝업 작업

모달팝업 props 관련 적용
This commit is contained in:
basssy 2024-10-08 14:03:33 +09:00
parent f95641547d
commit e13b993371
5 changed files with 26 additions and 4 deletions

View File

@ -3,9 +3,9 @@ import { getSession } from '@/lib/authActions'
export default async function Home() { export default async function Home() {
const session = await getSession() const session = await getSession()
const mainPageProps = { const mainPageProps = {
isLoggedIn: session?.isLoggedIn, isLoggedIn: session?.isLoggedIn,
pwdInitYn: session?.pwdInitYn,
} }
return ( return (

View File

@ -19,6 +19,10 @@ export default function NewLogin() {
const passwordRef = useRef(null) const passwordRef = useRef(null)
const router = useRouter() const router = useRouter()
useEffect(() => {
setOpen(false)
}, [])
useEffect(() => { useEffect(() => {
if (passwordVisible) { if (passwordVisible) {
passwordRef.current.type = 'text' passwordRef.current.type = 'text'

View File

@ -4,16 +4,25 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { Modal } from 'react-responsive-modal' import { Modal } from 'react-responsive-modal'
import { modalContent, modalState } from '@/store/modalAtom' import { modalContent, modalState, modalProps } from '@/store/modalAtom'
import 'react-responsive-modal/styles.css' import 'react-responsive-modal/styles.css'
export default function QModal() { export default function QModal() {
const [open, setOpen] = useRecoilState(modalState) const [open, setOpen] = useRecoilState(modalState)
const children = useRecoilValue(modalContent) const children = useRecoilValue(modalContent)
const props = useRecoilValue(modalProps)
const { closeOnOverlayClick = true, closeOnEsc = true, showCloseIcon = true } = props
return ( return (
<Modal open={open} onClose={() => setOpen(false)} center> <Modal
open={open}
onClose={() => setOpen(false)}
center
closeOnOverlayClick={closeOnOverlayClick}
closeOnEsc={closeOnEsc}
showCloseIcon={showCloseIcon}
>
{children} {children}
</Modal> </Modal>
) )

View File

@ -124,7 +124,7 @@ export default function Header(props) {
} }
return ( return (
!(pathName.includes('login') || pathName.includes('join')) && ( !(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">

View File

@ -13,3 +13,12 @@ export const modalContent = atom({
</> </>
), ),
}) })
export const modalProps = atom({
key: 'modalProps',
default: {
closeOnOverlayClick: true,
closeOnEsc: true,
showCloseIcon: true,
},
})