목차

이슈 #1: 다국어 API 엔드포인트 분기 처리

1. 이슈 상황

항목 내용
발생 환경 한국어/영어 언어 전환 시 API 호출
증상 언어별로 다른 API 서버를 호출해야 하는 요구사항
영향 범위 모든 API 호출 (검색, 패싯, 리소스, 사이트맵)

문제 상황:

// 단일 API로는 언어별 데이터를 가져올 수 없음
const { data } = useQuery({ queryKey: ['facet', param] });  // 어떤 언어?

2. 해결 방안 후보

방안 장점 단점
A. 단일 훅 + 언어 파라미터 코드 중복 없음 훅 내부 조건문 복잡
B. 언어별 훅 분리 (ko/en) 명확한 책임 분리, 타입 안전성 훅 코드 중복
C. Axios 인터셉터 동적 변경 중앙 관리 요청 시점 예측 어려움
D. 이중 Axios 인스턴스 + 언어별 훅 깔끔한 구조, 타입 안전성 초기 설정 복잡

3. 선택한 해결법

선택: D안 (이중 Axios 인스턴스 + 언어별 훅)

Axios 인스턴스 분리:

// apis/axios.ts
export const api_en = axios.create({
    baseURL: '<http://kodex2.eventpool.kr/api/>'
})

export const api_ko = axios.create({
    baseURL: '<http://platform2.eventpool.kr/api/>'
})

언어별 훅 분리:

// apis/ko/useFacet.ts
export const useFacetKo = (param: string | undefined, language: TLanguage) => {
    return useQuery({
        queryKey: QUERY_KEYS.FACET.facet(JSON.stringify(param + 'ko')),
        queryFn: () => getFacetKo(param || ''),
        enabled: !!param && language === 'ko',
        staleTime: 1000 * 60 * 5,
    })
}

// apis/en/useFacet.ts
export const useFacetEn = (param: string | undefined, language: TLanguage) => {
    return useQuery({
        queryKey: QUERY_KEYS.FACET.facet(JSON.stringify(param + 'en')),
        queryFn: () => getFacetEn(param || ''),
        enabled: !!param && language === 'en',
        staleTime: 1000 * 60 * 5,
    })
}

컴포넌트에서 사용:

// 언어에 따라 훅 동적 선택
const { data: facetList, isLoading } =
    language === 'en'
        ? useFacetEn(facetName ? facetName : facet, language)
        : useFacetKo(facetName ? facetName : facet, language)

4. 선택 이유

관점 이유
타입 안전성 각 훅이 해당 언어의 응답 타입만 처리
캐시 분리 언어별 쿼리 키로 캐시 충돌 방지
조건부 활성화 enabled 옵션으로 불필요한 API 호출 방지
디버깅 용이성 React Query DevTools에서 언어별 쿼리 명확히 구분

이슈 #2: RDF 데이터 타입 안전 처리