카카오톡 로그인 에러

1. 로그인을 하고 새로고침을 하면 마이페이지의 데이터가 없어지는 문제
   해결 : 카카오 소셜 로그인을 했을 때 코드가 꼬였는데, 우선 카카오 로그인을 했을 때 recoil에 set 해주는 코드를 없애서 해결

2. 카카오 로그인을 하면 새로고침시 로그인이 풀리는 문제
   해결 : localStorage 에서 값이 null, undefiend, string, 'undefiend' 총 4개의 값이 있었는데, typeof를 사용하여 어느 경우에 true, false 인지 파악하여 조건문을 사용해서 로그인이 풀리는 문제를 방지하였다.

3. 카카오 로그인을 하고 마이페이지에서 새로고침시 데이터가 없어지는 문제
   해결 : json에서 불러오는 데이터가 useEffect에서 filter할 때 undefiend 값이라서 의존성 배열에 json data가 변하면 실행되도록 추가해주어 filter가 제대로 실행되서 filter된 데이터가 recoil로 관리해주는 user로 제대로 set 되었다.

전체코드

// Layout.tsx
  const [users, setUsers] = useRecoilState(userInfo);
  const reset = useResetRecoilState(userInfo);
  const { data: userDataFromJson } = useQuery('user', getUser);
  const kakaoUserInfo = useRecoilValue(userInfoState);
  const accessToken = useRecoilValue(kakaoAccessToken);

  const { pathname } = useLocation();

  // 로그인 상태를 전역적으로 관리해주는 함수
  // 로그아웃이 된 상태에서만 pHeader가 바뀐다.
  // Router.tsx에서 유저 상태관리를 해주었는데, 페이지 이동시 첫번째 useEffect가 다시 실행됨
  // Layout.tsx로 옮겨주니 해결되었다.

  useEffect(() => {
    auth.onAuthStateChanged((user) => {
      if (user) {
        setUsers({
          isLogin: true,
          userInfomation: {
            displayName: user.displayName,
            email: user.email,
            photoURL: user.photoURL,
            age: '',
            gender: '',
            phoneNumber: '',
            id: user.uid,
          },
        });
      } else if (!user && !accessToken) {
        reset();
      }
    });
  }, [auth, accessToken]);

  // kakaoToken undefined 일 때 !kakaoToken === true
  // kakaoToken null 일 때 !kakaoToken === true
  // kakaoToken string 일 때 !kakaoToken === false

  useEffect(() => {
    const kakaoId = localStorage.getItem('kakao_user_id');
    // null, undefined가 아닐때 실행
    if (accessToken !== 'undefined') {
      if (!!accessToken) {
        setUsers({
          isLogin: true,
          userInfomation: {
            displayName: '',
            email: '',
            photoURL: '',
            age: '',
            gender: '',
            phoneNumber: '',
            id: kakaoId,
          },
        });
        // string 일 때 실행됨
      }
    } else if (!accessToken) {
      reset();
    }
  }, [accessToken, kakaoUserInfo]);

  useEffect(() => {
    // 현재 유저와 users.json에 있는 user과 같으면
    const myUser = userDataFromJson?.filter((user: UserInfomation) => {
      return users.userInfomation.id === String(user.id);
    })[0];

    // myUser가 빈 값이 아닐 때
    // 한번 더 set 해주는 이유 : 성별, 나이 조회수 및 마이페이지에서 정보수정을 하기 위해서
    if (!!myUser) {
      setUsers({
        isLogin: true,
        userInfomation: {
          ...myUser,
        },
      });
    }
    // users의 isLogin의 상태가 바뀔 때 마다 설정해준다.
  }, [users.isLogin, userDataFromJson]);