05 · React UI: 컴포넌트·state·폼

// 잘못된 변경
task.status = "DONE";
 
// 기존 배열에서 새 객체와 새 배열을 만든다.
setTasks((current) =>
  current.map((task) =>
    task.id === taskId ? { ...task, status: "DONE" } : task,
  ),
);

// 실제 코드를 읽기 쉽게 축약함.
"use client";
 
const [pending, setPending] = useState(false);
const [failed, setFailed] = useState(false);
 
async function handleClick() {
  setPending(true);
  setFailed(false);
  const { error } = await createClient().auth.signInWithOAuth({
    provider: "google",
    options: { redirectTo: `${window.location.origin}/auth/callback` },
  });
  if (error) {
    setPending(false);
    setFailed(true);
  }
}

// 학습용 예시: src/app/(member)/tasks/new/actions.ts
"use server";
 
import { refresh } from "next/cache";
import { requireMember } from "@/lib/auth/session";
import { createClient } from "@/lib/supabase/server";
 
export type TaskFormState = {
  message: string;
  errors?: { title?: string[] };
};
 
export async function createTask(
  _previous: TaskFormState,
  formData: FormData,
): Promise<TaskFormState> {
  await requireMember("/tasks/new", ["EXECUTIVE", "DIRECTOR"]);
  const title = String(formData.get("title") ?? "").trim();
 
  if (!title) {
    return { message: "입력값을 확인해 주세요.", errors: { title: ["업무 제목을 입력해 주세요."] } };
  }
  if (title.length > 100) {
    return { message: "입력값을 확인해 주세요.", errors: { title: ["업무 제목은 100자 이하여야 합니다."] } };
  }
 
  const supabase = await createClient();
  const { error } = await supabase.rpc("create_task", { p_title: title });
  if (error) {
    console.error("create_task failed", { code: error.code });
    return { message: "업무를 저장하지 못했습니다. 다시 시도해 주세요." };
  }
 
  refresh();
  return { message: "업무를 저장했습니다." };
}

// 학습용 예시: src/app/(member)/tasks/new/task-form.tsx
"use client";
 
import { useActionState } from "react";
import { createTask, type TaskFormState } from "./actions";
 
const initialState: TaskFormState = { message: "" };
 
export function TaskForm() {
  const [state, formAction, pending] = useActionState(createTask, initialState);
  const titleError = state.errors?.title?.[0];
 
  return (
    <form action={formAction} aria-describedby="form-message">
      <label htmlFor="task-title">업무 제목</label>
      <input
        id="task-title"
        name="title"
        required
        maxLength={100}
        aria-invalid={Boolean(titleError)}
        aria-describedby={titleError ? "task-title-error" : undefined}
        disabled={pending}
      />
      {titleError && <p id="task-title-error">{titleError}</p>}
      <button type="submit" disabled={pending}>
        {pending ? "저장 중…" : "업무 저장"}
      </button>
      <p id="form-message" aria-live="polite">{state.message}</p>
    </form>
  );
}