design: 로딩스피너 추가

Author: huuitae

src/components/addTask/taskbar.module.css

@@ -26,6 +26,7 @@
 .add_btn {
   width: 168px;
   background-color: var(--slate-200);
+  color: var(--slate-900);
   border: 2px solid var(--slate-900);
   border-radius: 24px;
   box-shadow: 4px 3px var(--slate-900);

src/components/addTask/taskbar.tsx

@@ -6,6 +6,7 @@ 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";
+import Spinner from "../loading/spinner";
 
 export default function Taskbar() {
   const [task, setTask] = useState("");
@@ -40,13 +41,19 @@ export default function Taskbar() {
           }
           disabled={isPending ? true : false}
         >
-          <Image
-            src={task !== "" ? plusWhite : plus}
-            width={16}
-            height={16}
-            alt="추가이미지"
-          />{" "}
-          추가하기
+          {task && isPending ? (
+            <Spinner />
+          ) : (
+            <>
+              <Image
+                src={task !== "" ? plusWhite : plus}
+                width={16}
+                height={16}
+                alt="추가이미지"
+              />
+              추가하기
+            </>
+          )}
         </button>
       </div>
     </form>

src/components/loading/spinner.module.css

@@ -0,0 +1,29 @@
+.spinnerContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  /* 원형 모양을 만들기 위해 border-radius를 50%로 설정 */
+  border-radius: 50%;
+
+  /* 테두리 두께와 스타일 설정 */
+  border-width: 4px;
+  border-style: solid;
+
+  /* spin이라는 이름의 애니메이션을 1초 동안, 선형으로, 무한 반복 */
+  animation: spin 1s linear infinite;
+}
+
+/* 회전 애니메이션 정의 */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/components/loading/spinner.tsx

@@ -0,0 +1,24 @@
+import styles from "./spinner.module.css";
+
+/**
+ * 로딩 스피너 컴포넌트
+ * @param {string} size - 스피너의 크기 (e.g., '50px')
+ * @param {string} color - 스피너의 색상 (e.g., '#007bff')
+ */
+export default function Spinner({ size = "30px", color = "#7c3aed" }) {
+  // 인라인 스타일을 사용하여 props로 받은 크기와 색상을 적용
+  const spinnerStyle = {
+    width: size,
+    height: size,
+    // 테두리의 기본 색상은 연한 회색으로 설정
+    borderColor: "#e0e0e0",
+    // 회전하는 부분의 색상을 props로 받은 color로 설정
+    borderTopColor: color,
+  };
+
+  return (
+    <div className={styles.spinnerContainer}>
+      <div className={styles.spinner} style={spinnerStyle}></div>
+    </div>
+  );
+}

src/components/todo/check-list.tsx

@@ -1,12 +1,16 @@
+"use client";
+
 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";
 
 export default function CheckList({
+  id,
   name,
   isCompleted,
 }: {
+  id: number;
   name: string;
   isCompleted: boolean;
 }) {

src/components/todo/todo-section.tsx

@@ -14,13 +14,7 @@ export default function TodoSection({
     <>
       <Image src={img} width={101} height={36} alt={imgAlt} />
       {list.length > 0 ? (
-        list.map((todo) => (
-          <CheckList
-            key={todo.id}
-            name={todo.name}
-            isCompleted={todo.isCompleted}
-          />
-        ))
+        list.map((todo) => <CheckList key={todo.id} {...todo} />)
       ) : (
         <div className={styles.empty}>
           <Image src={emptyImg} width={240} height={240} alt="리스트 없음" />