1. ‘강원 → 부산’ 열차 검색 시 왜 오류가 날까?

• 해당 문제 : ‘강원 → 부산’ 열차 검색 시 왜 오류가 날까?
• 문제 원인 : 국내 KTX노선 6개(경부선, 호남선, 강릉선, 중앙선 등)에서 강원에서 부산으로 가는 노선 자체가 없다. (코드 측면의 문제보다 KTX 노선이 없다는 문제.)
• 문제 해결 : datas(response data의 묶음)가 없다면 ‘해당 열차가 없음’ 컴포넌트를 보여준다.
• (코드 및 사진 첨부)

// src > app > (providers) > (root) > info > train > page.tsx

  const params = {
    pageNo: PAGE_NO,
    numOfRows: NUM_OF_ROWS,
    depPlaceId,
    arrPlaceId,
    depPlandTime
  };
  const { datas, isLoading }: { datas: TTrainInfo[]; isLoading: boolean } = useTrain(params);

  if (isLoading) return <LoadingPage />;
  if (!datas) return <NonTrainApi />;

(캡쳐사진 첨부 추후…)

2. ‘인천 → 부산’ 행 열차 검색 시 왜 오류 메시지가 뜰까?

• 해당 문제 : ‘인천 → 부산’ 행 열차 검색 시 왜 계속 로딩 중일까?
• 문제 원인 : 버스에만 있는 PlaceId(예: 인천, 세종)라서 trainStation.json 에는 없어서 PlaceId가 undefined이기 때문!
• 반대의 경우: 열차에만 있는 PlaceId는 용산, 서대전, 양평
• 문제 해결 : 커스텀훅 ‘useTrain’ 의 queryFn에서 조건을 넣었다. PlaceId의 값이 없다면(undefined) api 호출 함수를 return 한다.
• (코드 및 사진 첨부)

// src > hooks > useTrain.ts

'use client';
import api from '@/api/api';
import { useQuery } from '@tanstack/react-query';

const getTrainDataTest = async (trainParams: TTrainParams) => {
  if (!trainParams.depPlaceId || !trainParams.arrPlaceId) {
    return;
  }
  api.train.getTrainData(trainParams);
};

function useTrain(trainParams: TTrainParams) {
  const {
    data: datas,
    isLoading,
    isError
  } = useQuery({
    queryKey: ['train'],
    queryFn: () => getTrainDataTest(trainParams)
  });

  return { datas, isLoading, isError };
}

export default useTrain;