[이태경] Sprint9/Refactor

src/app/actions.ts

@@ -0,0 +1,22 @@
+"use server";
+
+import { revalidateTag } from "next/cache";
+
+import { createTodoItem } from "@/features/todo/services/todoApi";
+
+export async function createTodoItemAction(_: any, formData: FormData) {
+  const name = formData.get("name")?.toString();
+
+  if (!name) return;
+
+  try {
+    const data = await createTodoItem(name);
+
+    revalidateTag("todoList");
+
+    return data;
+  } catch (err) {
+    console.log(err);
+    return;
+  }
+}

src/app/layout.tsx

@@ -1,5 +1,7 @@
 import localFont from "next/font/local";
+
 import type { Metadata } from "next";
+
 import "./globals.css";
 import Header from "@/components/Header";
 

src/features/todo/components/TodoAddForm.tsx

@@ -1,38 +1,32 @@
 "use client";
 
+import { ChangeEvent, useActionState, useEffect, useState } from "react";
+
+import { createTodoItemAction } from "@/app/actions";
 import Button from "@/components/Button";
-import { createTodoItem } from "@/features/todo/services/todoApi";
-import { useRouter } from "next/navigation";
-import { ChangeEvent, FormEvent, useRef, useState } from "react";
 
 const TodoAddForm = () => {
+  const [state, formAction, isPending] = useActionState(
+    createTodoItemAction,
+    null
+  );
   const [todoText, setTodoText] = useState("");
-  const loadingRef = useRef<boolean>(false);
-  const router = useRouter();
-  const isValid = !(todoText.trim().length > 0) || loadingRef.current;
+  const isValid = todoText.trim().length === 0 || isPending;
 
   const handleChange = (e: ChangeEvent<HTMLInputElement>) =>
     setTodoText(e.target.value);
 
-  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    if (loadingRef.current) return; // 중복 요청 방지
-    try {
-      loadingRef.current = true;
-      await createTodoItem(todoText.trim());
-      router.refresh(); // 서버컴포넌트 새로고침
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setTodoText(""); // input 초기화
-      loadingRef.current = false;
+  useEffect(() => {
+    if (state) {
+      setTodoText("");
     }
-  };
+  }, [state]);
 
   return (
-    <form className="flex gap-5" onSubmit={handleSubmit}>
+    <form className="flex gap-5" action={formAction}>
       <input
         type="text"
+        name="name"
         value={todoText}
         onChange={handleChange}
         placeholder="할 일을 입력해주세요"

src/features/todo/components/TodoListArea.tsx

@@ -1,23 +1,24 @@
 "use client";
 
-import DoneEmpty from "@/features/todo/components/DoneEmpty";
+import { startTransition, useOptimistic, useRef } from "react";
+
+import DoneEmpty from "@/app/_components/Empty/DoneEmpty";
+import TodoEmpty from "@/app/_components/Empty/TodoEmpty";
 import TodoContent from "@/features/todo/components/TodoContent";
-import TodoEmpty from "@/features/todo/components/TodoEmpty";
 import { updateTodoItem } from "@/features/todo/services/todoApi";
 import { TodoItemType } from "@/types/todoTypes";
-import { startTransition, useEffect, useOptimistic, useState } from "react";
 
 interface Props {
   data: TodoItemType[];
   onUpdate?: (id: number) => void;
 }
 
 const TodoListArea = ({ data }: Props) => {
-  const [todoAll, setTodoAll] = useState(data);
+  const initialDataRef = useRef<TodoItemType[]>(data);
   const [optimisticState, toggleOptimisticState] = useOptimistic<
     TodoItemType[],
     number
-  >(todoAll, (currentState, id) => {
+  >(initialDataRef.current, (currentState, id) => {
     return currentState.map((todo) =>
       todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo
     );
@@ -28,30 +29,23 @@ const TodoListArea = ({ data }: Props) => {
       // 낙관적 업데이트
       toggleOptimisticState(id);
 
-      const targetCheck = todoAll.find((todo) => todo.id === id)?.isCompleted;
+      const targetCheck = optimisticState.find(
+        (todo) => todo.id === id
+      )?.isCompleted;
       const updateData = { isCompleted: !targetCheck };
 
-      const prevTodoAll = todoAll;
-
       try {
-        setTodoAll((prevTodoAll) =>
-          prevTodoAll.map((todo) =>
-            todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo
-          )
-        );
         await updateTodoItem(id, updateData);
+        const updateTodo = initialDataRef.current.map((todo) =>
+          todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo
+        );
+        initialDataRef.current = updateTodo;
       } catch (error) {
         console.error(error);
-
-        setTodoAll(prevTodoAll);
       }
     });
   };
 
-  useEffect(() => {
-    setTodoAll(data);
-  }, [data]);
-
   const todoData = optimisticState.filter((item) => !item.isCompleted);
   const doneData = optimisticState.filter((item) => item.isCompleted);
 

src/features/todo/services/todoApi.ts

@@ -1,6 +1,5 @@
 import {
-  PatchTodoResponse,
-  PostTodoResponse,
+  TodoResponseType,
   TodoItemType,
   UpdateTodoData,
 } from "@/types/todoTypes";
@@ -10,7 +9,9 @@ const API_END_POINT = process.env.NEXT_PUBLIC_SERVER_COMMON_END_POINT;
 const BASE_URL = `${API_URL}${API_END_POINT}`;
 
 export async function getTodoList(): Promise<TodoItemType[]> {
-  const res = await fetch(`${BASE_URL}/items`);
+  const res = await fetch(`${BASE_URL}/items`, {
+    next: { tags: ["todoList"] },
+  });
 
   if (!res.ok) throw new Error(res.statusText);
 
@@ -19,7 +20,7 @@ export async function getTodoList(): Promise<TodoItemType[]> {
   return data;
 }
 
-export async function createTodoItem(name: string): Promise<PostTodoResponse> {
+export async function createTodoItem(name: string): Promise<TodoResponseType> {
   const res = await fetch(`${BASE_URL}/items`, {
     method: "POST",
     headers: {
@@ -38,7 +39,7 @@ export async function createTodoItem(name: string): Promise<PostTodoResponse> {
 export async function updateTodoItem(
   id: number,
   updateData: UpdateTodoData
-): Promise<PatchTodoResponse> {
+): Promise<TodoResponseType> {
   const res = await fetch(`${BASE_URL}/items/${id}`, {
     method: "PATCH",
     headers: {

src/types/todoTypes.d.ts

@@ -11,15 +11,11 @@ export interface UpdateTodoData {
   isCompleted?: boolean;
 }
 
-interface TodoResponseBase {
+export interface TodoResponseType {
   id: number;
   tenantId: string;
   name: string;
   memo: string | null;
   imageUrl: string | null;
   isCompleted: boolean;
 }
-
-export interface PostTodoResponse extends TodoResponseBase {}
-
-export interface PatchTodoResponse extends TodoResponseBase {}