식단관리 - Part1 음식 리스트 검색(openAPI)

이 글에서는 Kiloflow 프로젝트에서 공공 API를 사용하여 음식 리스트를 검색하는 기능을 구현하는 방법을 설명합니다. 이 기능을 통해 사용자는 공공 API에서 제공하는 음식 데이터를 검색할 수 있습니다.

---

 

프론트엔드

음식 리스트 컴포넌트

 

1. 상태값 정의

const FoodList: React.FC = () => {
  const [foodList, setFoodList] = useState<FoodItem[]>([]); //음식 리스트 저장
  const [searchList, setSearchList] = useState<FoodItem[]>([]); //검색 결과 저장
  const [keyWord, setKeyWord] = useState('');//검색 키워드 저장
  const [currentUserID, setCurrentUserID] = useState('');//현재 사용자 ID 저장

 

2. 키워드 변경 핸들러

  // 키워드 변경 핸들러
  const changeKeyword = (e: React.ChangeEvent<HTMLInputElement>) => {
    setKeyWord(e.target.value);
  };

 

3. 검색 핸들러

  // 검색 핸들러
  const search = (e: React.FormEvent) => {
    e.preventDefault();
    setSearchList(foodList.filter((food) => food.name.includes(keyWord)));
  };

• search : 키워드를 포함한 음식을 필터링하여 검색 결과에 저장합니다.

4.  음식 데이터 가져오기

  // 음식 데이터 가져오기
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/food/list');
        if (!response.ok) {
          throw new Error('데이터를 불러오는 데 실패했습니다.');
        }
        const data = await response.json();
        setFoodList(data);
      } catch (error) {
        console.error('API 요청 에러:', error);
      }
    };
    fetchData();
  }, []);

• fetch('/api/food/list') : 
  API를 호출하여 음식 데이터를 가져옵니다.
• setFoodList(data) :
  가져온 데이터를 상태값으로 설정합니다.
  
  

---

 

 

백엔드

 

음식 리스트 API엔드포인트

 

1. API 요청 메서드 제한 및 데이터 가져오기

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== "GET") {
    // GET 요청이 아닌 경우 405 에러 반환
    return res.status(405).json({ error: `Method ${req.method} Not Allowed` });
  }

  try {
    // 외부 API 호출하여 데이터 가져오기
    const response = await fetch(
      "http://openapi.foodsafetykorea.go.kr/api/개인키/COOKRCP01/json/1/20"
    );
    if (!response.ok) {
      throw new Error("데이터를 불러오는 데 실패했습니다.");
    }
    const data = await response.json();
    // API 데이터를 필요한 형식으로 변환
    const apiData = data.COOKRCP01.row.map((api: any) => ({
      id: `RCP_${api.RCP_SEQ}`,
      name: api.RCP_NM,
      protein: api.INFO_PRO,
      carbohydrate: api.INFO_CAR,
      fat: api.INFO_FAT,
      calorie: api.INFO_ENG,
      img: api.ATT_FILE_NO_MAIN,
    }));
    return res.status(200).json(apiData);
  } catch (error) {
    console.error("데이터를 불러오는 중 에러:", error);
    return res.status(500).json({ message: "내부 서버 오류" });
  }
}

• data.COOKRCP01.row.map : 
  API 응답 데이터를 필요한 형식으로 변환합니다.

---