setAuthModalState open 파라미터 동작 에러

[Cori1304-Seong]

영상에서 모달을 닫을려고 하였는데 닫지 못했습니다. 코드 같이 첨부합니다.

import { AuthModalState } from '@/atoms/authModal';
import { useForm } from 'react-hook-form';
// ..

const SignUp: React.FC = () => {
    // ...
    const [msg, setMsg] = useState('');
    const [authModalState, setAuthModalState] = useRecoilState(AuthModalState); // 이용하려던 코드
    const [error, setError] = useState('');
// ...

<Text
  cursor="pointer"
  onClick={() =>
    setAuthModalState((prev) => ({
      ...prev,
      open: false,
    }))
  }
>
 mock close
</Text>

https://github.com/SeongTeam/hoodone/assets/160833798/80654351-69d2-41e6-8883-34c2b6551396

[Cori1304-Seong]

원인

login.tsx 에서 사용한 open 파라미터는 존재하지 않는데 창이 닫이는 오류가 발생 그렇기에 똑같이 따라했지만 sign-up.tsx에서는 모달이 닫히지 않았는 에러 발생

느낀점

왜? 파라미터 이름이 다른데 동작할 수 있었던 것인지 궁금하다...

`` AuthModalState 코드

import { atom } from "recoil";

export interface AuthModalState {
  isOpen: boolean;
  view: "login" | "signup" | "resetPassword";
}

const defaultModalState: AuthModalState = {
  isOpen: false,
  view: "login",
};

export const AuthModalState = atom<AuthModalState>({
  key: "AuthModalState",
  default: defaultModalState,
});

// login.tsx 

//...
 const loginWithEmailAndPassword = async (email: string, password: string) => {
        const res = await fetch(`/api/auth/login/`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email,
                password,
            }),
        });

        const data = await res.json();

        if (res.ok) {
            /*TODO
        - nickname 등의 유저 정보를 서버에서 가져오는 로직 필요 
        */
            setUserState((prev) => ({
                ...prev,
                email: email,
                isLogin: true,
            }));
            setAuthModelState((prev) => ({
                ...prev,
                open: false, // 문제 원인,  AuthModalState에는 isOpen이라고 정의되어 있음
            }));
        } else {
            setMsg(data.error);
            console.log('login error', data.error);
        }
    };
//...