목차

이슈 #1: React Query 캐싱으로 인한 민감 데이터 유지 문제

1. 이슈 상황

항목 내용
발생 환경 사용자 A 로그아웃 → 사용자 B 로그인
증상 로그아웃 후 다른 계정으로 로그인해도 이전 사용자의 Card List, 자산 정보가 표시됨
영향 범위 Card List, Overview 자산, Spot 잔액 등 사용자별 데이터

문제 코드 예시:

// 로그아웃 시 Zustand만 초기화
const handleLogout = () => {
  useSocialStore.getState().logout();  // 토큰만 삭제
  useUserStore.getState().clearUserInfo();
  navigate('/login');
  // 문제: React Query 캐시는 그대로 유지됨
};

2. 해결 방안 후보

방안 장점 단점
A. queryClient.clear() 전체 삭제 확실한 초기화, 간단한 구현 모든 캐시 삭제로 재로그인 시 로딩 발생
B. 쿼리 키별 선택적 삭제 필요한 것만 삭제 누락 가능성, 유지보수 어려움
C. 사용자 ID를 쿼리 키에 포함 자동 분리 모든 쿼리 수정 필요, 대규모 리팩토링

3. 선택한 해결법

선택: A안 (queryClient.clear() 전체 삭제)

// service/api/index.ts
import { queryClient } from '../react_query/queryClient';

const handleLogout = () => {
  // 1. Zustand 상태 초기화
  useSocialStore.getState().logout();
  useUserStore.getState().clearUserInfo();
  useUserVerificationStore.getState().clearUserVerification();

  // 2. React Query 캐시 전체 삭제
  queryClient.clear();

  // 3. 로그인 페이지로 이동
  window.location.href = '/login';
};

// 401 에러 인터셉터에서도 동일하게 처리
axiosInstance.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      // Refresh 실패 시
      queryClient.clear();  // 캐시 전체 삭제
      useSocialStore.getState().logout();
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

4. 선택 이유

관점 이유
보안 민감한 금융 데이터(잔액, 카드 정보)가 다른 사용자에게 노출되면 안 됨
확실성 선택적 삭제는 새로운 쿼리 추가 시 누락 가능성 있음
단순성 한 줄로 모든 캐시 문제 해결
UX 트레이드오프 재로그인 시 로딩이 있지만 보안이 더 중요

이슈 #2: 다국어 전환 시 상수 데이터 갱신 안됨

1. 이슈 상황

항목 내용
발생 환경 모바일에서 언어 선택 후 앱 사용
증상 언어 변경해도 GNB 메뉴, 푸터 링크 텍스트가 이전 언어로 유지됨
영향 범위 GNB 메뉴, 드롭다운, 푸터, FAQ 링크

문제 코드 예시:

// constants/gnb/index.ts
// 문제: 앱 시작 시점에 번역이 고정됨
export const DEPOSIT_MENU = [
  { title: i18next.t('Header.deposit.crypto'), link: '/deposit/crypto' },
  { title: i18next.t('Header.deposit.fiat'), link: '/deposit/fiat' },
];

// 모바일 언어 선택
const handleLanguageChange = (lang: string) => {
  i18next.changeLanguage(lang);
  // DEPOSIT_MENU는 이미 고정된 값이라 변경 안됨!
};

2. 해결 방안 후보