[트러블슈팅] 아이디, 닉네임 정보 가져오기

❌ 아이디, 닉네임 정보를 받아오지 못함

로그인 후 첫 번째 테스트에서 아이디와 닉네임 정보를 가져오지 못했다. 그러나 새로고침 후 다시 시도하면 정상적으로 받아와졌다. user 값에는 분명히 데이터가 들어가 있는데, 왜 첫 테스트에서는 가져오지 못하는 걸까?

🚨 문제

// TestPage.jsx
const TestPage = () => {
    const { user } = useAuthStore();
    const [result, setResult] = useState(null);

    const handleTestSubmit = async (answers) => {
        const result = calculateMBTI(answers);
        const resultData = {
            userId: user.id, // 🚨 id값을 가져오지 못함
            nickname: user.nickname,// 🚨 nickname값을 가져오지 못함
            result,
            answers,
            date: new Date().toISOString(),
            visibility: true,
        };
        await createTestResult(resultData);
        setResult(resultData);
    };
};

🤔 원인

원인은 확실하지 않지만, 추측컨대 user값이 회원가입이나 로그인 등 특정 시점에서 일부만 할당되기 때문에 발생한 문제일 수 있겠다.

✅ 해결

axios로 받아온 회원 정보를 직접 넘겨주는 방식으로 해결했다.

// auth.js
// 회원정보 확인
export const getUser = async (token) => {
    const response = await axios.get(`${API_URL}/user`, {
        headers: {
            Authorization: `Bearer ${token}`,
        },
    });
    return response.data;
};

// authStore.js
// 회원정보 확인
getUser: async () => {
    const token = localStorage.getItem("token");
    try {
        const userData = await getUser(token);
        set({ userInfo: userData });
    } catch (error) {
        console.error("회원정보 확인 오류: ", error.response?.data || error.message);
        throw new Error(error.response?.data.message || error.message);
    }
},

// TestPage.jsx
const TestPage = () => {
    const { userInfo, getUser } = useAuthStore();
    const [result, setResult] = useState(null);

    useEffect(() => {
        getUser(); // ✅ 페이지 로드 시 유저 정보 불러옴
    }, [getUser]);

    const handleTestSubmit = async (answers) => {
        const result = calculateMBTI(answers);
        const resultData = {
            userId: userInfo.id, // ✅ id값 잘 가져옴
            nickname: userInfo.nickname, // ✅ nickname값 잘 가져옴
            result,
            answers,
            date: new Date().toISOString(),
            visibility: true,
        };
        await createTestResult(resultData);
        setResult(resultData);
    };
};