🏷️ 예약내역 페이지의 상태 필터 기능 — StatusBadgeGroup 컴포넌트 분석

예약내역 페이지에서 사용자 편의성을 높이기 위해 예약 상태별로 내역을 필터링할 수 있도록 구현한 UI 컴포넌트가 있다.
바로 StatusBadgeGroup이다.
이 글에서는 해당 컴포넌트의 기능, 구조, 그리고 페이지 내에서 어떻게 동작하는지를 상세히 다룬다.

🧩 StatusBadgeGroup의 역할

• 예약 상태에 따라 예약내역을 필터링할 수 있는 버튼 그룹 UI를 제공한다.
• 클릭 시 상위 컴포넌트의 상태 값을 변경시켜 목록을 다시 렌더링한다.
• 선택된 상태는 시각적으로 강조되어 사용자에게 현재 필터 상태를 명확히 전달한다.

🧱 컴포넌트 구조와 스타일링

const STATUS_LIST = [
  { label: "예약 완료", value: "pending" },
  { label: "예약 취소", value: "canceled" },
  { label: "예약 승인", value: "confirmed" },
  { label: "예약 거절", value: "declined" },
  { label: "체험 완료", value: "completed" },
];

• label은 UI에 표시되는 텍스트이고,
• value는 실제 예약 데이터의 status 필드와 매칭되는 값이다.
  
  

<button
  onClick={() => setSelectedStatus(status.value)}
  className={`w-[9rem] border text-16-m rounded-full $
    {selectedStatus === status.value
      ? 'bg-[#333333] text-white border-[#333333]'
      : 'border-[#d8d8d8] text-gray-950'}`}

  {status.label}
</button>

• 클릭된 상태에 따라 버튼의 색상 및 스타일이 동적으로 변경된다.
• selectedStatus 값과 버튼의 value가 일치할 경우 강조 색상 적용

🧠 상태 관리 정리 (useState)

const [selectedStatus, setSelectedStatus] = useState<string | null>(null);

• selectedStatus: 현재 선택된 예약 상태 값을 담는다.
• null이면 전체 예약을 보여주고, 특정 상태가 선택되면 해당 상태만 필터링한다.
  
  

const [filteredReservations, setFilteredReservations] = useState<MyReservationType[]>([]);

• 필터링 결과를 담아 UI에 바로 반영되도록 한다.

🔁 상위 컴포넌트와 연결 구조

<StatusBadgeGroup
  selectedStatus={selectedStatus}
  setSelectedStatus={setSelectedStatus}
/>

• 예약내역 페이지에서 직접 selectedStatus와 setter를 넘겨준다.
• 필터링 로직은 상위 컴포넌트에서 처리한다.
  
  

useEffect(() => {
  if (!selectedStatus) {
    setFilteredReservations(reservations);
  } else {
    setFilteredReservations(
      reservations.filter((r) => r.status === selectedStatus)
    );
  }
}, [selectedStatus, reservations]);

• 이 로직은 정렬이 아닌 필터링이다.
  즉, 선택한 상태값과 일치하는 예약만 추려서 보여주는 구조이다.
  예를 들어 "예약 승인"을 누르면 status === "confirmed"인 데이터만 남게 되고, 나머지는 리스트에서 제외된다.렌더링은 필터링된 filteredReservations 배열을 기반으로 다시 수행된다.

✅ 상태 버튼은 그 자체로 데이터를 바꾸지 않으며, 선택만 하고 나머지는 상위에서 처리하는 구조이다

🖥️ 결과물

📌 정리

• StatusBadgeGroup은 예약 상태별 필터 기능을 UI로 제공하는 역할을 한다.
• 상태 선택은 시각적으로 피드백을 주며 UX를 향상시킨다.
• 실질적인 필터링 로직은 상위 컴포넌트에서 수행되며, useEffect로 자동 반영된다.

컴포넌트의 책임을 명확히 분리하여 유지보수성과 확장성을 동시에 확보할 수 있는 구조이다