Mixed Branches → Component per Role

#2ReadabilityEasy

Mixed Branches → Component per Role

Mixed Branches — 역할별 컴포넌트 분리

하나의 SubmitButton 컴포넌트가 admin과 일반 사용자의 코드를 모두 안고 있습니다. if (isAdmin) return ... 와 일반 분기가 섞여 있어, 읽는 사람이 두 흐름을 동시에 추적해야 합니다.

할 일

AdminSubmitButton 과 UserSubmitButton 을 별도 컴포넌트로 분리
SubmitButton 은 role에 따라 둘 중 하나를 선택하는 얇은 dispatcher로 남김
동작은 유지 — 기존 테스트 모두 통과

좋은 fix

역할별 컴포넌트로 코드 흐름을 분리 (한 컴포넌트 한 책임)
props 시그니처도 역할별로 단순화

안 되는 fix

Factory pattern 같은 과한 추상화
분기는 그대로 두고 주석만 추가

학습 포인트

다른 사용자 역할의 코드가 같이 있으면 각 흐름의 일부 만 보기 어려움
컴포넌트 분리는 가장 직접적인 결합 해소 도구

import { useEffect } from 'react';

export interface SubmitButtonProps {
  isAdmin: boolean;
  canSubmit: boolean;
  onAdminSubmit: () => void;
  onUserSubmit: () => void;
  onAdminMount?: () => void; // admin 진입 시 애니메이션 등 부수효과
}

// TODO: AdminSubmitButton 과 UserSubmitButton 을 별도 컴포넌트로 분리하고,
//       SubmitButton 은 role에 따라 둘 중 하나를 렌더하는 dispatcher로 만들어라.
export function SubmitButton({ isAdmin, canSubmit, onAdminSubmit, onUserSubmit, onAdminMount }: SubmitButtonProps) {
  useEffect(() => {
    if (!isAdmin) return;
    onAdminMount?.();
  }, [isAdmin, onAdminMount]);

  if (isAdmin) {
    return (
      <button data-testid="btn" className="admin-btn" onClick={onAdminSubmit}>
        Approve & Submit
      </button>
    );
  }

  return (
    <button data-testid="btn" className="user-btn" disabled={!canSubmit} onClick={onUserSubmit}>
      Submit for Review
    </button>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useEffect } from 'react';

export interface SubmitButtonProps {
  isAdmin: boolean;
  canSubmit: boolean;
  onAdminSubmit: () => void;
  onUserSubmit: () => void;
  onAdminMount?: () => void; // admin 진입 시 애니메이션 등 부수효과
}

// TODO: AdminSubmitButton 과 UserSubmitButton 을 별도 컴포넌트로 분리하고,
//       SubmitButton 은 role에 따라 둘 중 하나를 렌더하는 dispatcher로 만들어라.
export function SubmitButton({ isAdmin, canSubmit, onAdminSubmit, onUserSubmit, onAdminMount }: SubmitButtonProps) {
  useEffect(() => {
    if (!isAdmin) return;
    onAdminMount?.();
  }, [isAdmin, onAdminMount]);

  if (isAdmin) {
    return (
      <button data-testid="btn" className="admin-btn" onClick={onAdminSubmit}>
        Approve & Submit
      </button>
    );
  }

  return (
    <button data-testid="btn" className="user-btn" disabled={!canSubmit} onClick={onUserSubmit}>
      Submit for Review
    </button>
  );
}

Open Sandbox