1. 로그인 흐름

[React] Login 컴포넌트

const submitHandler = (e) => {
  e.preventDefault();

  const fetchData = async () => {
    const data = await postUserLogin(user); // 서버 로그인 요청
    if (data.username) {
      dispatch(login(data));       // 리덕스 저장 + 쿠키 저장 (username)
      navigate("/");               // 메인 페이지로 이동
    }
  };

  fetchData();
};

[React] postUserLogin 함수 (userAPI.js)

export const postUserLogin = async (data) => {
  const response = await axios.post(`${USER_LOGIN}`, data, {
    withCredentials: true, // 쿠키 포함 요청
  });
  return response.data;
};

[Spring] /user/login 컨트롤러

@PostMapping("/user/login")
public ResponseEntity login(@RequestBody UserDTO userDTO) {
    ...
    // 1. Spring Security 인증
    // 2. JWT AccessToken, RefreshToken 생성
    // 3. 토큰을 HttpOnly 쿠키로 응답 헤더에 설정
    // 4. body에는 username 등 사용자 정보 반환
}

[React] 응답 수신 후 조건 분기

if (data.username) {
  dispatch(login(data)); // ✅ 여기서 Redux slice 호출됨
}

[React] loginSlice

login: (state, action) => {
  state.username = action.payload.username;
  Cookies.set("username", state.username, 1); // 쿠키 저장 (JS 접근 가능)
}

JWT 토큰 저장 위치

• AccessToken: HttpOnly Cookie → JS에서 접근 불가 (보안성 높음)
• RefreshToken: HttpOnly Cookie
• username: 일반 쿠키로 저장 (리덕스 상태 유지용)

비유로 설명하자면

• Spring 컨트롤러는 택배 회사 — 요청한 물건(JSON 사용자 정보)을 포장해서 전달해줄 뿐.
• React는 택배를 수령한 사용자 — 받은 정보(data)를 보고 리덕스에 "얘 로그인 상태야!" 라고 알려줌.
• dispatch(login(data))는 리덕스 직원에게 "로그인 상태로 바꿔줘"라고 지시하는 명령어예요.