feat: 할 일 추가하기 기능 개발

Author: huuitae

src/actions/add-task.action.ts

@@ -0,0 +1,31 @@
+"use server";
+
+import { ActionState } from "@/types";
+import { revalidateTag } from "next/cache";
+
+export default async function addTaskAction(
+  prevData: ActionState,
+  formData: FormData
+): Promise<ActionState> {
+  const name = formData.get("name")?.toString();
+
+  if (!name) return { status: false, error: "할 일을 입력해주세요" };
+
+  try {
+    const response = await fetch(`${process.env.NEXT_API_URL}/items`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ name }),
+    });
+
+    if (!response.ok) return { status: false, error: response.statusText };
+
+    revalidateTag("todo");
+
+    return { status: true, error: "" };
+  } catch (error) {
+    return { status: true, error: `할 일 등록에 실패했습니다. ${error}` };
+  }
+}

src/components/addTask/taskbar.module.css

@@ -35,6 +35,7 @@
   justify-content: center;
   align-items: center;
   gap: 4px;
+  cursor: pointer;
 }
 
 .writing_task {

src/components/addTask/taskbar.tsx

@@ -2,20 +2,32 @@
 
 import Image from "next/image";
 import styles from "./taskbar.module.css";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useActionState, useEffect, useState } from "react";
 import plus from "../../../public/plus.svg";
 import plusWhite from "../../../public/plus_white.svg";
+import addTaskAction from "@/actions/add-task.action";
 
 export default function Taskbar() {
   const [task, setTask] = useState("");
+  const [state, formAction, isPending] = useActionState(addTaskAction, {
+    status: true,
+    error: "",
+  });
+
   const onChangeTask = (e: ChangeEvent<HTMLInputElement>) => {
     setTask(e.target.value);
   };
 
+  useEffect(() => {
+    if (state && !state.status) alert(state.error);
+    setTask("");
+  }, [state]);
+
   return (
-    <form>
+    <form action={formAction}>
       <div className={styles.taskbar_box}>
         <input
+          name="name"
           className={styles.taskbar}
           placeholder="할 일을 입력해주세요"
           onChange={onChangeTask}
@@ -26,13 +38,14 @@ export default function Taskbar() {
               ? `${styles.add_btn} ${styles.writing_task}`
               : styles.add_btn
           }
+          disabled={isPending ? true : false}
         >
           <Image
             src={task !== "" ? plusWhite : plus}
             width={16}
             height={16}
             alt="추가이미지"
-          />
+          />{" "}
           추가하기
         </button>
       </div>

src/components/todo/todoList.tsx

@@ -7,10 +7,9 @@ import emptyDone from "../../../public/empty_done.png";
 import TodoSection from "./todo-section";
 
 async function getAllTodoList() {
-  const response = await fetch(
-    `${process.env.NEXT_API_URL}/fe-18-sprint9/items`,
-    { next: { tags: ["todo"] } }
-  );
+  const response = await fetch(`${process.env.NEXT_API_URL}/items`, {
+    next: { tags: ["todo"] },
+  });
 
   if (!response.ok) console.error(response.statusText);
 

src/types.ts

@@ -19,3 +19,8 @@ export interface TodoSectionProps {
   imgAlt: string;
   emptyMsg: ReactNode;
 }
+
+export interface ActionState {
+  status: boolean;
+  error: string;
+}