🟡[P2] feat(frontend): adopt React 19 useActionState / useFormStatus / useOptimistic for server actions

[teddylee777]

컨텍스트 블록

Key	Value
Category	frontend
Checklist	ISS-UI-12 — React 19 features not used (useOptimistic/useFormStatus/useActionState for server actions)
Priority	P2 🟡
Scan Date	2026-04-16
Flagged By	main-session verification

요약

• WHAT: React 19.1을 사용 중이지만 폼·서버 액션에 useActionState, useFormStatus, useOptimistic 같은 React 19 신규 훅이 거의 활용되지 않음. 대신 수동 useState + useTransition 조합으로 pending state 관리
• WHY: 신규 훅들은 (1) 보일러플레이트 감소, (2) 자동 pending 상태, (3) form-level 에러 처리 표준화, (4) 낙관적 업데이트로 UX 향상을 제공. 미적용 시 회원가입/로그인/admin 폼 등 곳곳에 반복 코드 존재
• WHERE: frontend/src/app/(auth)/login/EmailLoginForm.tsx, (auth)/register/page.tsx, (main)/admin/components/SettingsForm.tsx, shared/components/settings/ConnectionList.tsx, features/admin/components/UserTable.tsx
• SEVERITY: MEDIUM (개선) — 기능 결함은 아니나 React 19 best practice 미준수, 코드 품질 영향

Evidence

#	File	Line	Finding	Flagged By	Confidence
1	frontend/package.json	—	React 19.1 사용 중 — 신규 훅 사용 가능	main-session	High
2	frontend/src/app/(auth)/login/EmailLoginForm.tsx	—	disabled={isLoading} 같은 수동 pending state 관리	@code-review	High
3	frontend/src/app/(auth)/register/page.tsx	—	disabled={isPending} 수동 관리	@code-review	High
4	frontend/src/app/actions/**	—	server actions 정의, 클라이언트 호출 시 useActionState 미사용	main-session	Medium
5	frontend/src/features/admin/components/UserTable.tsx	—	isLoading(user.id) 수동 추적 — useOptimistic로 즉시 반영 가능	@code-review	Medium

영향 분석

영향 범위

• 모든 인증 폼 (로그인/회원가입/이메일/API 키)
• admin 사용자 액션 (suspend/approve/reactivate) — 낙관적 업데이트 적용 시 즉각적 UX
• ConnectionList 추가/전환 폼

장애 시나리오

• 직접적 장애는 없음. 단, 다음과 같은 코드 품질 이슈:
  1. 동일한 useState/useTransition 보일러플레이트 5+ 곳에 반복
  2. 폼 에러를 각 컴포넌트가 자체 state로 관리 — useActionState의 state.error로 표준화 가능
  3. UserTable의 "Suspend" 클릭 시 서버 응답까지 row 상태 변경 안됨 — useOptimistic로 즉시 변경 가능

긴급도

• 신규 기능 추가 시 점진적으로 도입 (새 폼부터)
• 기존 코드 마이그레이션은 별도 PR로 분리 가능

제안 해결 방안

접근 방법

EmailLoginForm — useActionState 도입 예시:

import { useActionState } from \"react\";

export function EmailLoginForm() {
  const [state, formAction, isPending] = useActionState(loginAction, {
    error: null,
    success: false,
  });

  return (
    <form action={formAction}>
      <input name=\"email\" />
      {state.error && <div className=\"text-red-500\">{state.error}</div>}
      <button disabled={isPending}>
        {isPending ? \"Signing in...\" : \"Sign in\"}
      </button>
    </form>
  );
}

UserTable — useOptimistic 도입:

const [optimisticUsers, applyOptimistic] = useOptimistic(
  users,
  (state, action: { id: string; status: UserStatus }) =>
    state.map(u => u.id === action.id ? { ...u, status: action.status } : u)
);

const handleSuspend = (userId: string) => {
  applyOptimistic({ id: userId, status: \"suspended\" });
  startTransition(() => suspendAction(userId));
};

SubmitButton — useFormStatus 표준화:

function SubmitButton({ children }: { children: React.ReactNode }) {
  const { pending } = useFormStatus();
  return <button disabled={pending}>{pending ? \"…\" : children}</button>;
}

대안

• 현 코드 유지: 동작은 하지만 React 19 베스트 프랙티스 미준수
• react-hook-form 도입: 다른 추상화 — 학습 비용, 신규 의존성 증가

수용 기준

• 최소 1개 폼(EmailLoginForm 또는 RegisterPage)을 useActionState로 마이그레이션 (시범)
• 1개 admin 액션 (suspend/approve)을 useOptimistic로 마이그레이션
• 마이그레이션 패턴을 docs/에 ADR 형식으로 기록 (또는 README 보강)
• 향후 신규 폼은 React 19 패턴 사용 권장 명시
• 테스트 커맨드: cd frontend && pnpm test

참조

• 관련 파일: 위 evidence의 5개 파일
• Checklist 항목: ISS-UI-12
• React 19: useActionState
• React 19: useFormStatus
• React 19: useOptimistic
• 관련 이슈: 없음

재현 방법

사전 조건

• 현 시점 코드 상태

단계

1. grep -r \"useActionState\\|useFormStatus\\|useOptimistic\" frontend/src/
2. 결과 카운트 확인

기대 결과

주요 폼/액션에서 신규 훅 사용 다수

실제 결과

0건 또는 극소수 — 수동 useState/useTransition 패턴 일색

관련 코드 컨텍스트

File	Role	Relevance
frontend/src/app/(auth)/login/EmailLoginForm.tsx	이메일 로그인 폼	시범 마이그레이션
frontend/src/app/(auth)/register/page.tsx	회원가입 페이지	시범 마이그레이션
frontend/src/features/admin/components/UserTable.tsx	admin 사용자 테이블	useOptimistic 적용
frontend/src/app/actions/auth.ts	인증 server actions	useActionState와 결합

---

Detected by oh-my-braincrew `omb:issue` scan
Category: frontend | Scan date: 2026-04-16
`omb-issue-scan category=frontend checklist=ISS-UI-12`