유한 상태 머신(FSM) 도입으로 복잡한 분기 조건문(IF-ELSE) 청소하기

// 🍝 차종과 상태가 늘어날수록 컴포넌트가 비대해지고 버그가 생기기 쉬운 구조
function ReservationActionButtons({ reservation }) {
  const { status, carModel } = reservation;

  const handleAction = () => {
    if (status === "PENDING") {
      if (carModel === "Model_A") {
        // Model_A 전용 사전 검사 API 호출
      } else if (carModel === "Model_C") {
        // Model_C 전용 안전 센서 승인 요청 API 호출
      } else {
        // 일반 예약 승인 및 배정 API 호출
      }
    } else if (status === "ASSIGNED") {
      if (carModel === "Model_B") {
        // 바로 충전 개시 API 호출
      } else {
        // 일반 트레일러 이동 명령 API 호출
      }
    }
    // ... 하단으로 이어지는 수많은 중첩 if-else 분기
  };

  return (
    <div className="button-group">
      {status === "PENDING" && (
        <button onClick={handleAction}>
          {carModel === "Model_A"
            ? "사전검사 신청"
            : carModel === "Model_C"
              ? "안전 센서 승인요청"
              : "예약 승인"}
        </button>
      )}
      {status === "ASSIGNED" && (
        <button onClick={handleAction}>
          {carModel === "Model_B" ? "충전 개시" : "트레일러 이동"}
        </button>
      )}
    </div>
  );
}

// 🟢 차량 모델별 예약 상태 전이 및 액션 정의
export const RESERVATION_FSM = {
  Model_A: {
    PENDING: {
      PRE_CHECK: {
        next: "CHECKED",
        label: "사전검사 신청",
        api: api.requestPreCheck,
      },
    },
    CHECKED: {
      ASSIGN: {
        next: "ASSIGNED",
        label: "트레일러 배정",
        api: api.assignTrailer,
      },
    },
    ASSIGNED: {
      START_CHARGE: {
        next: "CHARGING",
        label: "충전 시작",
        api: api.startCharge,
      },
    },
  },
  Model_B: {
    // Model_B는 사전 검증 없이 바로 배정으로 전이
    PENDING: {
      ASSIGN: { next: "ASSIGNED", label: "즉시 배정", api: api.assignTrailer },
    },
    ASSIGNED: {
      START_CHARGE: {
        next: "CHARGING",
        label: "충전 시작",
        api: api.startCharge,
      },
    },
  },
  Default: {
    PENDING: {
      ASSIGN: { next: "ASSIGNED", label: "예약 승인", api: api.assignTrailer },
    },
  },
};

import { RESERVATION_FSM } from "./reservationFsm";

function ReservationActionButtons({ reservation, onUpdate }) {
  const { id, status, carModel } = reservation;

  // 1. 해당 차량 모델 및 현재 예약 상태에 맞는 가용 액션 규칙 조회
  const modelRules = RESERVATION_FSM[carModel] || RESERVATION_FSM["Default"];
  const allowedActions = modelRules[status] || {}; // 예: { PRE_CHECK: { next: 'CHECKED', label: '사전검사 신청', api: ... } }

  return (
    <div className="action-buttons-group">
      {/* 2. 조건문 없이 허용된 액션 배열을 순회하여 버튼을 동적으로 렌더링 */}
      {Object.entries(allowedActions).map(([actionKey, actionSpec]) => (
        <button
          key={actionKey}
          className={`btn-${actionKey.toLowerCase()}`}
          onClick={async () => {
            try {
              // 3. 약속된 API 동작 호출
              await actionSpec.api(id);
              // 4. API 성공 시 다음 상태값(next)으로 예약 상태 업데이트
              onUpdate(actionSpec.next);
            } catch (err) {
              alert("액션 수행 중 오류가 발생했습니다.");
            }
          }}
        >
          {actionSpec.label}
        </button>
      ))}
    </div>
  );
}