정리

1. ToggleButton 컴포넌트 리팩토링

문제: 토글 버튼 첫 클릭 시 디자인이 변경되지 않음

// 기존: 내부 상태 관리
const [isLeftSelected, setIsLeftSelected] = useState(true);

// 수정: Controlled Component로 변경
interface ToggleButtonProps {
  isLeftSelected: boolean;
  onToggle: () => void;
}

해결: Controlled Component 패턴으로 변경하여 부모 컴포넌트에서 상태 관리

2. STEP 추가 기능 구현

요구사항:

• UI 변경 없이 인라인 입력 필드만 나타남
• 빈 값일 경우 "빈 STEP" 기본값
• 포커스 아웃 시 자동 저장
• 8개 제한 시 버튼 숨김

구현:

// STEP 추가 제한
const canAddStep = steps.length < 8;

// 인라인 입력 필드
{isAddingStep ? (
  <input
    value={newStepName}
    onBlur={handleBlur}
    placeholder="STEP 이름을 입력하세요"
  />
) : (
  <button onClick={toggleAddStepMode}>+ STEP 추가</button>
)}

3. STEP 삭제 기능 구현

API: DELETE /api/v1/steps/{stepId}

// useDeleteStep 훅 생성
export const useDeleteStep = () => {
  return useMutation<DeleteStepResponse, Error, number>({
    mutationFn: (stepId: number) => deleteStep(stepId),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['dashboard'] });
    },
  });
};

4. STEP 이름 수정 기능 구현

API: PATCH /api/v1/steps/{stepId}

// 인라인 편집 기능
const handleDoubleClick = () => setIsEditing(true);
const handleBlur = () => {
  onUpdateName(stepId, editName);
  setIsEditing(false);
};

5. 업무 생성 기능 구현