`useOptimisticAction` + `react-hook-form`으로 낙관적 업데이트와 서버 검증 오류 한 번에 처리하기 (next-safe-action)

// lib/safe-action.ts — 프로젝트 전체에서 공유하는 액션 클라이언트
import { createSafeActionClient } from "next-safe-action";
 
export const actionClient = createSafeActionClient();

// v6 (구버전)
useOptimisticAction(action, currentState, updateFn, callbacks);
 
// v7 (현재) — 두 번째 인수가 단일 옵션 객체로 통합
useOptimisticAction(action, {
  currentState,
  updateFn,
  onSuccess,
  onError,
});

const { hookFormValidationErrors } = useHookFormActionErrorMapper(
  action.result.validationErrors,
  { joinBy: "\n" }
);
 
const form = useForm({
  resolver: zodResolver(schema),
  errors: hookFormValidationErrors, // 서버 오류가 폼 필드에 자동 연결
});

// app/todos/actions.ts
"use server";
import { actionClient } from "@/lib/safe-action";
import { z } from "zod";
import { db } from "@/lib/db";
import { revalidatePath } from "next/cache";
 
const addTodoSchema = z.object({
  newTodo: z.string().min(1, "할 일을 입력해 주세요"),
});
 
export const addTodoAction = actionClient
  .schema(addTodoSchema)
  .action(async ({ parsedInput }) => {
    await db.todo.create({ data: { text: parsedInput.newTodo } });
    revalidatePath("/todos"); // 서버 성공 후 실제 데이터로 교체
    return { success: true };
  });

// app/todos/AddTodoForm.tsx
"use client";
import { useState } from "react";
import { useOptimisticAction } from "next-safe-action/hooks";
import { addTodoAction } from "./actions";
 
type Props = { todos: string[] };
 
export function AddTodoForm({ todos }: Props) {
  const [input, setInput] = useState("");
 
  const { execute, optimisticState, isExecuting } = useOptimisticAction(
    addTodoAction,
    {
      currentState: { todos },
      // input의 타입은 addTodoSchema에서 자동 추론 — { newTodo: string }
      updateFn: (state, input) => ({
        todos: [...state.todos, input.newTodo],
      }),
      onSuccess: () => setInput(""),
      onError: ({ error }) => {
        console.error("서버 오류:", error);
        // updateFn의 낙관적 상태는 자동으로 currentState로 롤백
      },
    }
  );
 
  return (
    <div>
      <ul>
        {optimisticState.todos.map((todo, i) => (
          // 실제 코드에서는 DB의 고유 id를 key로 사용하는 것을 권장합니다
          <li key={`todo-${i}`}>{todo}</li>
        ))}
      </ul>
      <div className="flex gap-2 mt-4">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="새 할 일을 입력하세요"
          className="border rounded px-3 py-2 flex-1"
        />
        <button
          onClick={() => {
            if (!input.trim()) return;
            execute({ newTodo: input });
          }}
          disabled={isExecuting}
          className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
        >
          {isExecuting ? "저장 중..." : "추가"}
        </button>
      </div>
    </div>
  );
}

// app/todos/page.tsx
import { AddTodoForm } from "./AddTodoForm";
import { db } from "@/lib/db";
 
export default async function TodoPage() {
  const todos = await db.todo.findMany({ select: { text: true } });
 
  // App Router의 기본 패턴: 서버에서 데이터를 가져온 뒤 클라이언트 컴포넌트에 초기 상태로 전달
  return <AddTodoForm todos={todos.map((t) => t.text)} />;
}

// app/login/LoginForm.tsx
"use client";
import { useHookFormActionErrorMapper } from "@next-safe-action/adapter-react-hook-form/hooks";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { useAction } from "next-safe-action/hooks";
import { z } from "zod";
import { loginAction } from "./actions";
 
const loginSchema = z.object({
  email: z.string().email("올바른 이메일 형식이 아닙니다"),
  password: z.string().min(8, "비밀번호는 8자 이상이어야 합니다"),
});
 
type LoginInput = z.infer<typeof loginSchema>;
 
export function LoginForm() {
  const action = useAction(loginAction);
 
  const { hookFormValidationErrors } = useHookFormActionErrorMapper(
    action.result.validationErrors,
    { joinBy: "\n" }
  );
 
  const form = useForm<LoginInput>({
    resolver: zodResolver(loginSchema),
    errors: hookFormValidationErrors, // 서버 오류 → 폼 필드 자동 바인딩
  });
 
  // executeAsync는 Promise를 반환하므로
  // form.handleSubmit의 인자 시그니처와 타입 에러 없이 호환됩니다
  return (
    <form onSubmit={form.handleSubmit(action.executeAsync)}>
      <div>
        <input
          {...form.register("email")}
          placeholder="이메일"
          type="email"
          className="border rounded px-3 py-2 w-full"
        />
        {form.formState.errors.email && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.email.message}
          </p>
        )}
      </div>
      <div className="mt-3">
        <input
          {...form.register("password")}
          placeholder="비밀번호"
          type="password"
          className="border rounded px-3 py-2 w-full"
        />
        {form.formState.errors.password && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.password.message}
          </p>
        )}
      </div>
      <button
        type="submit"
        disabled={action.isExecuting}
        className="mt-4 bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
      >
        {action.isExecuting ? "로그인 중..." : "로그인"}
      </button>
    </form>
  );
}

// app/todos/AddTodoForm.tsx
"use client";
import { useHookFormOptimisticAction } from "@next-safe-action/adapter-react-hook-form/hooks";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { addTodoAction } from "./actions";
 
const addTodoSchema = z.object({
  newTodo: z.string().min(1, "할 일을 입력해 주세요"),
});
 
type Props = { todos: string[] };
 
export function AddTodoForm({ todos }: Props) {
  const { form, action, handleSubmitWithAction } = useHookFormOptimisticAction(
    addTodoAction,
    zodResolver(addTodoSchema),
    {
      actionProps: {
        currentState: { todos },
        updateFn: (state, input) => ({
          todos: [...state.todos, input.newTodo],
        }),
      },
      formProps: {
        defaultValues: { newTodo: "" },
      },
      errorMapProps: { joinBy: " | " },
    }
  );
 
  return (
    <div>
      {/* action.optimisticState로 낙관적 목록 렌더링 — execute 직후 즉시 반영 */}
      <ul className="mb-4 space-y-1">
        {action.optimisticState.todos.map((todo, i) => (
          <li key={`todo-${i}`} className="text-sm">
            {todo}
          </li>
        ))}
      </ul>
 
      <form onSubmit={handleSubmitWithAction} className="flex gap-2">
        <input
          {...form.register("newTodo")}
          placeholder="새 할 일을 입력하세요"
          className="border rounded px-3 py-2 flex-1"
        />
        {form.formState.errors.newTodo && (
          <p className="text-red-500 text-sm mt-1">
            {form.formState.errors.newTodo.message}
          </p>
        )}
        <button
          type="submit"
          disabled={action.isExecuting}
          className="bg-blue-600 text-white px-4 py-2 rounded disabled:opacity-50"
        >
          {action.isExecuting ? "저장 중..." : "추가"}
        </button>
      </form>
    </div>
  );
}