운동 검색 후 카테고리 버튼 작동안하는 오류

문제 설명

운동 애플리케이션의 검색 및 필터 기능을 구현하는 과정에서 문제가 발생했습니다:

카테고리 초기화 문제

• 운동 검색 후 "All" 카테고리 버튼을 클릭했을 때 모든 운동이 표시되지 않았습니다
• 전체 운동을 보려고 해도 검색 결과가 계속 유지되었습니다

문제 분석

카테고리 초기화

"전체" 카테고리 버튼이 운동 목록을 초기화하는 기능과 제대로 연결되지 않았습니다. 컴포넌트 구조를 다음과 같이 수정해야 했습니다:
1. setExercises 함수를 컴포넌트 체인을 통해 전달
2. "전체" 카테고리 선택 시 모든 운동을 가져오는 기능 추가

해결 방안 구현

카테고리 초기화를 처리하도록 BodyPart 컴포넌트 수정:

이전 코드

const BodyPart = ({ item, setBodyPart, bodyPart }) => {
  return (
    <Stack
      onClick={() => {
        setBodyPart(item);
        window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
      }}
    >
      <img src={Icon} alt="dumbbell" />
      <Typography>{item}</Typography>
    </Stack>
  );
};

수정된 코드

import { fetchData, exerciseOptions } from '../utils/fetchData';

const BodyPart = ({ item, setBodyPart, bodyPart, setExercises }) => {
  const handleClick = async () => {
    setBodyPart(item);
    
    if (item === "all") {
      try {
        const allExercises = await fetchData(
          "https://exercisedb.p.rapidapi.com/exercises",
          exerciseOptions
        );
        setExercises(allExercises);
      } catch (error) {
        console.error('운동 데이터 가져오기 오류:', error);
      }
    }
    
    window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
  };

  return (
    <Stack onClick={handleClick}>
      {/* 컴포넌트 JSX */}
    </Stack>
  );
};

import { fetchData, exerciseOptions } from '../utils/fetchData'; // 1. 필요한 import 추가

// 2. setExercises prop 추가
const BodyPart = ({ item, setBodyPart, bodyPart, setExercises }) => {
  // 3. 별도의 비동기 핸들러 함수 생성
  const handleClick = async () => {
    setBodyPart(item);
    
    // 4. "all" 카테고리 선택 시 모든 운동 데이터 가져오기
    if (item === "all") {
      try {
        const allExercises = await fetchData(
          "https://exercisedb.p.rapidapi.com/exercises",
          exerciseOptions
        );
        setExercises(allExercises);
      } catch (error) {
        console.error('운동 데이터 가져오기 오류:', error);
      }
    }
    
    window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
  };

  return (
    <Stack onClick={handleClick}>  // 5. 새로운 핸들러 함수 사용
      <img src={Icon} alt="dumbbell" />
      <Typography>{item}</Typography>
    </Stack>
  );
};

주요 변경 사항:
1. fetchData와 exerciseOptions import 추가
2. setExercises prop 추가하여 운동 목록 상태 관리 가능하도록 함
3. 비동기 작업을 처리할 수 있는 별도의 handleClick 함수 생성
4. "all" 카테고리 선택 시 모든 운동을 가져오는 로직 추가
5. 오류 처리를 위한 try-catch 구문 추가

이러한 변경을 통해:

• "전체" 카테고리 버튼 클릭 시 모든 운동이 제대로 표시됨
• 검색 후에도 카테고리 필터가 정상적으로 작동
• 비동기 작업 중 발생할 수 있는 오류를 적절히 처리

결과

• 카테고리 초기화 기능을 수정하여 카테고리 'All'을 누를시 모든 운동이 제대로 표시되도록 개선
• 검색과 카테고리 간 전환 가능으로 전반적인 사용자 경험 향상

향후 개선 사항

운동 데이터에 대한 캐싱 구현