본격 연동 #4 로그인 후 기존 컨텍스트(데이터)가 있으면 메인 페이지로 이동하는 방법 (React + Context API + Axios)

🚀 개요 및 문제상황

사용자가 처음 회원가입 후 로그인을 하면, 매달 자신의 첫 가계부에 필요한 예산을 설정합니다. 

저는 이 예산을 전역 상태 관리로 하였습니다. -> goalContext.jsx

 

그러나, 분명 로그인 로직에는 goalAmount가 있으면 -> mainPage.jsx, 없으면 -> goal-setting.jsx로 가게끔 설계를 했는데

제 코드의 의도와는 다르게 계속 오류가 났습니다.

 

심지어, 이미 로그인을 하여 예산 설정을 한 사용자도 다시 goal-setting으로 가는 문제상황이 발생했습니다.

 

-> 서버(백엔드 개발자)는 한 달에 딱 한번 예산을 설정할수 있게 설계를 했는데 이 땜에 두 번 예산 설정을 하면 오류가 나는 최악의 상황이었습니다.

 

정리하면

1. 의도치않은 리다이렉션 불가

2. 1번으로 인해 서버와의 약속을 지키지 못하고 의도와 다른 오류발생!

 

🛠 해결해야 할 기능

 

✅ 로그인 성공 후, 사용자가 기존에 설정한 예산이 있다면 바로 메인 페이지(/main)로 이동

✅ 사용자가 예산을 설정하지 않았다면 /goal-setting 페이지로 이동하여 예산을 설정하도록 유도

✅ 새로고침해도 예산 데이터(goalAmount)가 유지되도록 localStorage를 활용

✅ 비동기 요청이 완료되기 전에 페이지가 이동하는 문제 방지

✅ 불필요한 API 요청을 최소화하여 성능 최적화

 

 

🔹 1. 필요한 개념 정리

 

📌 1️⃣ 로그인 후 예산 데이터를 확인해야 하는 이유

 

사용자가 로그인하면,

1. 기존 예산이 있으면 바로 메인 페이지(/main) 로 이동

2. 기존 예산이 없으면 예산 설정 페이지(/goal-setting) 로 이동하여 직접 설정하도록 유도

 

이를 위해 로그인 → 예산 조회 → 페이지 이동 순서대로 실행해야 함.

 

 

📌 2️⃣ 우리가 겪었던 문제 (삽질했던 부분 😂)

 

❌ 로그인 후 예산 데이터(goalAmount)를 확인하기 전에 페이지가 먼저 이동 → goalAmount === null로 인식되어 /goal-setting으로 이동

❌ 비동기 API 요청(fetchBudget())이 완료되기 전에 goalAmount를 검사하면 잘못된 값이 사용될 가능성 있음

❌ 새로고침하면 goalAmount가 초기화되어 /goal-setting으로 이동하는 문제 발생

 

처음 goalAmount 전역 상태의 초기값을 null로 정의했기에 발생한 문제. ( 그러나 null로 유지는 해야함)

import { createContext, useState } from 'react';
import { getBudget } from '../api/budgetApi';

export const GoalContext = createContext();

export const GoalProvider = ({ children }) => {
  const [goalAmount, setGoalAmount] = useState(null);
  const [error, setError] = useState(null);

  // ✅ 예산 데이터 가져오는 함수
  const fetchBudget = async () => {
    try {
      const data = await getBudget();
      console.log('✅ 유저 외곽오카네 정보:', data);
      console.log('✅ 유저 오카네 정보:', data.amount);
      setGoalAmount(data.amount);
      return data.amount;
      //`${userBudget.toLocaleString()} 원` -> 콤마 찍히는거임
    } catch (error) {
      console.error('🚨 예산 조회 실패:', error);
      setError(error);
    }
  };

  return (
    <GoalContext.Provider
      value={{ goalAmount, setGoalAmount, fetchBudget, error }}
    >
      {children}
    </GoalContext.Provider>
  );
};

export default GoalProvider;

 

🔹 2. 해결 방법 (전체적인 흐름)

 

✅ 1️⃣ 로그인 후 goalAmount 값을 비동기 요청으로 가져옴 

• 로그인 후 fetchBudget()을 실행하여 예산을 가져옴.

 

✅ 2️⃣ goalAmount를 localStorage에 저장하여 새로고침해도 값 유지 -> 핵심 아이디어!! 

• goalAmount 값을 localStorage에 저장하고, useState의 초기값으로 활용.

또한 추가적으로, 로그아웃 시 토큰만 지웠는데 이제 goalAmount값도 지워야함

 

✅ 3️⃣ goalAmount 값이 null인지 아닌지 확인한 후 적절한 페이지로 이동

• 값이 있으면 /main으로 이동, 없으면 /goal-setting으로 이동.

 

📌 3. 실제 코드 구현

 

🔹 Step 1️⃣ . GoalContext.jsx (예산 상태 관리)

• goalAmount 상태를 관리하고, API에서 예산 데이터를 가져오는 역할

• useEffect()를 사용하여 로그인 후 fetchBudget()을 실행

• localStorage를 활용하여 새로고침해도 데이터 유지

import { createContext, useState, useEffect } from 'react';
import { getBudget } from '../api/budgetApi';

export const GoalContext = createContext();

export const GoalProvider = ({ children }) => {
  const [goalAmount, setGoalAmount] = useState(() => {
    // ✅ localStorage에서 기존 예산 값을 불러오기 (새로고침 시 값 유지)
    const savedGoal = localStorage.getItem('goalAmount');
    return savedGoal ? JSON.parse(savedGoal) : null;
  });

  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ✅ 목표 금액을 가져오는 함수
  const fetchBudget = async () => {
    setLoading(true);
    try {
      const data = await getBudget(); // API 호출
      setGoalAmount(data.amount);
      localStorage.setItem('goalAmount', JSON.stringify(data.amount)); // ✅ localStorage 저장
    } catch (error) {
      console.error('🚨 예산 조회 실패:', error.response?.data || error.message);
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const accessToken = localStorage.getItem('accessToken');
    if (accessToken) {
      fetchBudget();
    }
  }, []);

  return (
    <GoalContext.Provider value={{ goalAmount, setGoalAmount, fetchBudget, loading, error }}>
      {children}
    </GoalContext.Provider>
  );
};

export default GoalProvider;

 

 

🔹 Step 2️⃣ LoginPage.js (로그인 후 예산 체크 & 페이지 이동)

• 로그인 성공 후, fetchBudget()을 호출하여 예산 데이터 확인 (여긴 자명함)

 

• 비동기 요청이 끝날 때까지 goalAmount 값을 기다린 후 페이지 이동 -> const budgetAmount = await fetchBudget()

-> 여기에도 아주 좋은 내용들이 많음. ( 사용자 경험 개선이라던지 비동기 처리의 이해)

 

• goalAmount가 있으면 /main으로, 없으면 /goal-setting으로 이동

 

import { useContext, useState, useEffect } from 'react';
import '../style/LoginPage.scss';
import SignupPage from './SignupPage';
import { useNavigate } from 'react-router-dom';
import { GoalContext } from '../context/GoalContext';
import { login } from '../api/authApi.jsx';
import { css, keyframes } from '@emotion/react';

// 로딩 시 필요한
const spin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`;

const spinnerStyle = css`
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ${spin} 1s linear infinite;
  margin-left: 10px;
`;

const LoginPage = () => {
  const [isSignupOpen, setIsSignupOpen] = useState(false); // 회원가입 모달 상태
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false); // 로딩 상태 추가
  const [modalMessage, setModalMessage] = useState({ type: '', message: '' });
  const [fetchingBudget, setFetchingBudget] = useState(false); //예산 데이터 불러오고있는지?
  const navigate = useNavigate();
  const { goalAmount, fetchBudget } = useContext(GoalContext); //get하는 함수도 가져오자.

  // 회원가입 모달 여닫기
  const openSignupModal = () => setIsSignupOpen(true);
  const closeSignupModal = () => setIsSignupOpen(false);

  // 로그인 처리 함수
  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true); // 로그인 시작 시 로딩 상태 활성화

    try {
      const data = await login(email, password);
      // const { token, refreshToken } = data; (토큰 key명 바꿈)
      const { accessToken, refreshToken } = data.data;
      console.log('🔹 로그인 응답 데이터:', data); // 응답 구조 확인 디버깅용임
      console.log('🔑 저장할 accessToken:', accessToken);
      console.log('🔄 저장할 refreshToken:', refreshToken);

      //로그인 성공시 로컬스토리지에서 받아온 토큰들 저장.
      localStorage.setItem('accessToken', accessToken);
      localStorage.setItem('refreshToken', refreshToken);

      setModalMessage({
        type: 'success',
        message: '로그인 성공! 데이터를 불러오고 있습니다!',
      });

      setFetchingBudget(true);
      const budgetAmount = await fetchBudget(); //로그인 성공하면 갖고 있는 예산 있는지 확인
      setFetchingBudget(false);

      console.log('🏦 로그인 후 받은 예산 금액:', budgetAmount); // 디버깅용 코드임

      //  goalAmount가 업데이트되기 전에 budgetAmount를 기반으로 페이지 이동 (성능 개선 가능성? )
      setTimeout(() => {
        if (budgetAmount !== null && budgetAmount > 0) {
          navigate('/main');
        } else {
          navigate('/initial');
        }
      }, 500);
    } catch (error) {
      console.error('로그인 실패:', error);
      setModalMessage({
        type: 'error',
        message: '로그인 실패! 다시 시도해주세요.',
      });
    } finally {
      setLoading(false); // 응답 완료 후 로딩 해제
    }
  };

  return (
    <div className="login-page-container">
      <h1>Login Page</h1>
      <p>로그인을 진행해주세요.</p>

      <form className="form" onSubmit={handleLogin}>
        <input
          type="email"
          placeholder="이메일"
          className="input-field"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
          disabled={loading}
        />
        <input
          type="password"
          placeholder="비밀번호"
          className="input-field"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
          disabled={loading}
        />
        <button
          type="submit"
          className="login-button"
          disabled={loading || fetchingBudget}
        >
          {loading ? '로딩 중...' : '로그인'}
          {loading && <span css={spinnerStyle} />}
        </button>
        {fetchingBudget && (
          <div className="loading-container">
            <p>예산 정보를 불러오는 중...</p>
            <span css={spinnerStyle} />
          </div>
        )}
        {modalMessage.message && (
          <div className={`modal-message ${modalMessage.type}`}>
            {modalMessage.message}
          </div>
        )}
      </form>

      <p className="sign-up-prompt">
        계정이 없으신가요?{' '}
        <span className="sign-up-link" onClick={() => setIsSignupOpen(true)}>
          회원가입
        </span>
      </p>

      {isSignupOpen && (
        <SignupPage closeSignupModal={() => setIsSignupOpen(false)} />
      )}
    </div>
  );
};

export default LoginPage;

 

🔹 Step 3️⃣ MainPage.js (메인 페이지로 이동)

 

🚀 최종 동작 확인

 

✔️ 로그아웃하면 accessToken, refreshToken, goalAmount 모두 삭제됨

✔️ 로그아웃 후 /login 페이지로 정상 이동

✔️ 새로운 로그인 시 기존 goalAmount 값이 남아있지 않아 올바른 데이터 표시됨