8/12TIL

TIL: 약 검색 기능 개선

오늘 배운 내용

1. 클라이언트에서의 검색 요청 처리:

   • 검색 요청을 클라이언트에서 처리하기 위해 handleShapeSearch 함수를 개선했습니다.
   • API 호출 후 응답의 상태를 확인하고, 에러 처리를 추가하여 사용자에게 적절한 피드백을 제공하도록 했습니다.

   const handleShapeSearch = async (shape, color, formulation, splitLine) => {
     setLoading(true);
     try {
       const res = await fetch(
         `/api/search/searchmedi?shape=${shape}&color=${color}&formulation=${formulation}&splitLine=${splitLine}`
       );
       if (!res.ok) {
         throw new Error("약 검색에 실패했습니다.");
       }
       const data = await res.json();
       if (data.response && data.response.body && data.response.body.items) {
         setResults(data.response.body.items);
       } else {
         setResults([]);
         setError("검색 결과가 없습니다.");
       }
     } catch (error) {
       setError(error.message);
     } finally {
       setLoading(false);
     }
   };

2. 서버에서의 데이터 응답 처리:

   • 서버 측에서는 요청된 매개변수에 따라 API를 호출하고, 올바른 구조의 JSON 응답을 반환하도록 했습니다.
   • 에러 발생 시 적절한 상태 코드와 메시지를 반환하도록 개선했습니다.

   export async function GET(request) {
     const { searchParams } = new URL(request.url);
     const shape = searchParams.get("shape") || "";
     const color = searchParams.get("color") || "";
     const formulation = searchParams.get("formulation") || "";
     const splitLine = searchParams.get("splitLine") || "";
   
     const apiKey = process.env.NEXT_PUBLIC_MEDI_SEARCH_KEY;
     const baseUrl = process.env.NEXT_PUBLIC_MEDI_SEARCH_URL;
   
     const response = await fetch(
       `${baseUrl}/getMdcinGrnIdntfcInfoList01?serviceKey=${apiKey}&pageNo=1&numOfRows=10&type=json&shape=${shape}&color=${color}&formulation=${formulation}&splitLine=${splitLine}`
     );
   
     if (!response.ok) {
       return NextResponse.json({ error: "데이터를 가져오는 데 실패했습니다." }, { status: 500 });
     }
   
     const data = await response.json();
     return NextResponse.json(data);
   }

3. UI 피드백 개선:

   • 검색 결과가 없을 경우 사용자에게 "검색 결과가 없습니다."라는 메시지를 표시하도록 UI를 개선했습니다.
   • 로딩 상태와 에러 메시지를 통해 사용자 경험을 향상시켰습니다.

이러한 개선 사항을 통해 약 검색 기능이 보다 직관적이고 안정적으로 작동하도록 만들었습니다. 추가적으로, 클라이언트와 서버 간의 데이터 흐름을 명확히 하여, 유지보수성을 높일 수 있었습니다.