feat: 할 일 완료/진행 중 상태 변경 기능 추가

Author: huuitae

src/actions/add-task.action.ts

@@ -12,7 +12,7 @@ export default async function addTaskAction(
   if (!name) return { status: false, error: "할 일을 입력해주세요" };
 
   try {
-    const response = await fetch(`${process.env.NEXT_API_URL}/items`, {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/items`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

src/actions/revalidate-todo.action.ts

@@ -0,0 +1,7 @@
+"use server";
+
+import { revalidateTag } from "next/cache";
+
+export default async function revalidateTodo() {
+  revalidateTag("todo");
+}

src/components/todo/check-list.module.css

@@ -13,11 +13,17 @@
   letter-spacing: 0%;
 }
 
+.check_list_container > button {
+  background: none; /* 배경 제거 */
+  border: none; /* 테두리 제거 */
+  padding: 0; /* 패딩 제거 */
+  font: inherit; /* 부모 요소의 폰트 상속 */
+  color: inherit; /* 부모 요소의 글자색 상속 */
+  cursor: pointer; /* 마우스 커서를 포인터로 설정 */
+  outline: inherit; /* focus 시 나타나는 외곽선 상속 */
+}
+
 .checked {
   background-color: var(--violet-100);
   text-decoration: line-through;
 }
-
-.check_btn {
-  cursor: pointer;
-}

src/components/todo/check-list.tsx

@@ -4,6 +4,10 @@ import Image from "next/image";
 import styles from "./check-list.module.css";
 import notCheck from "../../../public/not_check.svg";
 import checkedIcon from "../../../public/checked.svg";
+import { useState } from "react";
+import useCompleteTodo from "@/hooks/useCompleteTodo";
+import { TodoDetailData } from "@/types";
+import Spinner from "../loading/spinner";
 
 export default function CheckList({
   id,
@@ -14,6 +18,12 @@ export default function CheckList({
   name: string;
   isCompleted: boolean;
 }) {
+  const [task, setTask] = useState<TodoDetailData | null>(null);
+  const { isLoading } = useCompleteTodo(id, task);
+  const onClickSetTask = () => {
+    setTask({ name, memo: "", imageUrl: "", isCompleted: !isCompleted });
+  };
+
   return (
     <div
       className={
@@ -22,13 +32,22 @@ export default function CheckList({
           : styles.check_list_container
       }
     >
-      <Image
-        className={styles.check_btn}
-        src={isCompleted ? checkedIcon : notCheck}
-        width={32}
-        height={32}
-        alt={isCompleted ? "완료" : "미완료"}
-      />
+      <button
+        type="button"
+        onClick={onClickSetTask}
+        disabled={isLoading ? true : false}
+      >
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <Image
+            src={isCompleted ? checkedIcon : notCheck}
+            width={32}
+            height={32}
+            alt={isCompleted ? "완료" : "미완료"}
+          />
+        )}
+      </button>
       <p>{name}</p>
     </div>
   );

src/components/todo/todo-section.tsx

@@ -12,12 +12,18 @@ export default function TodoSection({
 }: TodoSectionProps) {
   return (
     <>
-      <Image src={img} width={101} height={36} alt={imgAlt} />
+      <Image src={img} width={101} height={36} alt={imgAlt} priority />
       {list.length > 0 ? (
         list.map((todo) => <CheckList key={todo.id} {...todo} />)
       ) : (
         <div className={styles.empty}>
-          <Image src={emptyImg} width={240} height={240} alt="리스트 없음" />
+          <Image
+            src={emptyImg}
+            width={240}
+            height={240}
+            alt="리스트 없음"
+            priority
+          />
           <p className={styles.empty_msg}>{emptyMsg}</p>
         </div>
       )}

src/components/todo/todoList.tsx

@@ -7,7 +7,7 @@ import emptyDone from "../../../public/empty_done.png";
 import TodoSection from "./todo-section";
 
 async function getAllTodoList() {
-  const response = await fetch(`${process.env.NEXT_API_URL}/items`, {
+  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/items`, {
     next: { tags: ["todo"] },
   });
 

src/hooks/useCompleteTodo.tsx

@@ -0,0 +1,53 @@
+import revalidateTodo from "@/actions/revalidate-todo.action";
+import { TodoDetailData } from "@/types";
+import { useEffect, useState } from "react";
+
+export default function useCompleteTodo(
+  id: number,
+  todoData: TodoDetailData | null
+) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [error, setError] = useState<boolean>(false);
+
+  const onClickComplete = async (taskId: number, data: TodoDetailData) => {
+    setIsLoading(true);
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/items/${taskId}`,
+        {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(data),
+        }
+      );
+
+      if (!response.ok) {
+        alert(`완료하지 못했습니다`);
+        setError(true);
+        return;
+      }
+
+      revalidateTodo();
+    } catch (error) {
+      alert("완료하지 못했습니다");
+      setError(true);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!todoData) return;
+
+    onClickComplete(id, todoData);
+  }, [id, todoData]);
+
+  return {
+    isLoading,
+    error,
+    onClickComplete,
+  };
+}

src/types.ts

@@ -7,6 +7,13 @@ export interface TodoData {
   isCompleted: boolean;
 }
 
+export interface TodoDetailData {
+  name: string;
+  isCompleted: boolean;
+  memo: string;
+  imageUrl: string;
+}
+
 export interface SeparatedTodos {
   completed: TodoData[];
   incomplete: TodoData[];