로그인 상태 (true – 로그인 / false – 비로그인)

로그인 여부에 따라 다르게 보여야 하는 헤더와 로그인 회원만 접근 가능한 마이페이지, 결제 등에서 사용

export const isLoggedInState = atom({
  key: 'isLoggedIn',
  default: false, // 로그인되지 않은 상태로 초기화
});

로그인 모달 상태

로그인 모달 -> 회원가입 모달 -> 회원가입 성공시-> 로그인 모달 (이 과정에 사용)

export const loginModalState = atom<boolean>({
  key: 'loginModalState',
  default: true,
});

사용자 정보

로그인 후 페이지가 렌더링되면, 헤더 컴포넌트에서 이미지, 닉네임, 마일리지 정보를 서버로부터 가져오고(useEffect 사용), 이 데이터를 전역 상태로 관리하기 시작한다.

export const userNickNameState = atom<string>({
  key: 'userNickNameState',
  default: '',
});
export const userProfileImgState = atom<string>({
  key: 'userProfileImgState',
  default: '',
});
export const userMileageState = atom<number>({
  key: 'userMileageState',
  default: 0,
});

트러블 슈팅