Refactoring editor (#80)

LimSB-dev · web-flow · commit 242f8e90838d · 2024-11-03T19:51:56.000+09:00
* update editor styles

* 게시글 생성, 수정, 삭제, 취소 시 버튼 클릭 안되도록 수정
diff --git a/src/app/posts/[index]/edit/page.module.scss b/src/app/posts/[index]/edit/page.module.scss
@@ -58,17 +58,23 @@
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4 {
+    border: none !important;
+  }
+
   h2 {
     font-size: var(--h5) !important;
   }
 
-  h3,
-  h4 {
+  h3 {
     font-size: var(--h6) !important;
   }
 
-  * {
-    border: none !important;
+  h4 {
+    font-size: var(--p) !important;
   }
 
   ul {
diff --git a/src/app/posts/create/page.module.scss b/src/app/posts/create/page.module.scss
@@ -58,17 +58,23 @@
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4 {
+    border: none !important;
+  }
+
   h2 {
     font-size: var(--h5) !important;
   }
 
-  h3,
-  h4 {
+  h3 {
     font-size: var(--h6) !important;
   }
 
-  * {
-    border: none !important;
+  h4 {
+    font-size: var(--p) !important;
   }
 
   ul {
diff --git a/src/components/common/header/PostsHeader/index.tsx b/src/components/common/header/PostsHeader/index.tsx
@@ -1,9 +1,12 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+
 import styles from "./styles.module.scss";
+
 import { DefaultLogo } from "@/components/common/logo";
-import { usePathname } from "next/navigation";
 import { useAppDispatch, useAppSelector } from "@/hooks/reduxHook";
 import { setResetPost } from "@/store/modules/post";
 import { deletePost, postPost, putPost } from "@/app/api/posts";
@@ -12,6 +15,7 @@ const PostsHeader = () => {
   const dispatch = useAppDispatch();
   const user = useAppSelector((state) => state.user);
   const { title, markdownValue } = useAppSelector((state) => state.post);
+  const [loading, setLoading] = useState(false);
 
   const pathname = usePathname();
   const isAdmin = user.userType === "admin";
@@ -20,15 +24,29 @@ const PostsHeader = () => {
   const isEdit = pathname.endsWith("/edit");
   const index = Number(pathname.split("/")[2]);
 
-  const handleSave = async () => {
-    if (isEdit) await putPost({ index, title, markdownValue });
-    if (isCreate) await postPost({ title, markdownValue });
-    dispatch(setResetPost());
-  };
-
-  const handleDelete = async () => {
-    await deletePost(index);
-    dispatch(setResetPost());
+  const handleButton = async (
+    type: "create" | "edit" | "delete" | "cancel"
+  ) => {
+    try {
+      setLoading(true);
+      switch (type) {
+        case "create":
+          await postPost({ title, markdownValue });
+          break;
+        case "edit":
+          await putPost({ index, title, markdownValue });
+          break;
+        case "delete":
+          await deletePost(index);
+          break;
+        case "delete":
+        default:
+          break;
+      }
+      dispatch(setResetPost());
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -39,45 +57,52 @@ const PostsHeader = () => {
         {!isPosts && <Link href="/posts">POST</Link>}
       </nav>
 
-      {isAdmin && (
+      {isAdmin && !isPosts && (
         <div className={styles.button_container}>
-          {isPosts ? null : (
+          {isEdit || isCreate ? (
+            <>
+              <button
+                type="button"
+                className={`card-shadow ${styles.submit_button} ${
+                  loading && styles.loading
+                }`}
+                onClick={() =>
+                  isEdit ? handleButton("edit") : handleButton("create")
+                }
+                disabled={loading}
+              >
+                {isEdit ? "save" : "create"}
+              </button>
+              <Link
+                href={isEdit ? `/posts/${index}` : "/posts"}
+                className={`button-card-shadow ${styles.edit_button} ${
+                  loading && styles.loading
+                }`}
+                onClick={() => handleButton("cancel")}
+              >
+                cancel
+              </Link>
+            </>
+          ) : (
             <>
-              {!isEdit && !isCreate && (
-                <>
-                  <Link
-                    href={`/posts/${index}/edit`}
-                    className={`button-card-shadow ${styles.edit_button}`}
-                  >
-                    edit
-                  </Link>
-                  <button
-                    type="button"
-                    className={`button-card-shadow ${styles.delete_button}`}
-                    onClick={handleDelete}
-                  >
-                    delete
-                  </button>
-                </>
-              )}
-              {(isEdit || isCreate) && (
-                <>
-                  <button
-                    type="button"
-                    className={`card-shadow ${styles.submit_button}`}
-                    onClick={handleSave}
-                  >
-                    save
-                  </button>
-                  <Link
-                    href={isEdit ? `/posts/${index}` : "/posts"}
-                    className={`button-card-shadow ${styles.edit_button}`}
-                    onClick={() => dispatch(setResetPost())}
-                  >
-                    cancel
-                  </Link>
-                </>
-              )}
+              <Link
+                href={`/posts/${index}/edit`}
+                className={`button-card-shadow ${styles.edit_button} ${
+                  loading && styles.loading
+                }`}
+              >
+                edit
+              </Link>
+              <button
+                type="button"
+                className={`button-card-shadow ${styles.delete_button} ${
+                  loading && styles.loading
+                }`}
+                onClick={() => handleButton("delete")}
+                disabled={loading}
+              >
+                delete
+              </button>
             </>
           )}
         </div>
diff --git a/src/components/common/header/PostsHeader/styles.module.scss b/src/components/common/header/PostsHeader/styles.module.scss
@@ -127,3 +127,9 @@
     animation: submit-glow 4s infinite linear;
   }
 }
+
+.loading {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
diff --git a/src/components/posts/[id]/PostContent/styles.module.scss b/src/components/posts/[id]/PostContent/styles.module.scss
@@ -20,17 +20,23 @@
     }
   }
 
+  h1,
+  h2,
+  h3,
+  h4 {
+    border: none !important;
+  }
+
   h2 {
     font-size: var(--h5) !important;
   }
 
-  h3,
-  h4 {
+  h3 {
     font-size: var(--h6) !important;
   }
 
-  * {
-    border: none !important;
+  h4 {
+    font-size: var(--p) !important;
   }
 
   ul {

Original file line number	Diff line number	Diff line change
`@@ -58,17 +58,23 @@`
`58`	`58`	`}`
`59`	`59`	`}`
`60`	`60`
	`61`	`+ h1,`
	`62`	`+ h2,`
	`63`	`+ h3,`
	`64`	`+ h4 {`
	`65`	`+ border: none !important;`
	`66`	`+ }`
	`67`	`+`
`61`	`68`	`h2 {`
`62`	`69`	`font-size: var(--h5) !important;`
`63`	`70`	`}`
`64`	`71`
`65`		`- h3,`
`66`		`- h4 {`
	`72`	`+ h3 {`
`67`	`73`	`font-size: var(--h6) !important;`
`68`	`74`	`}`
`69`	`75`
`70`		`- * {`
`71`		`- border: none !important;`
	`76`	`+ h4 {`
	`77`	`+ font-size: var(--p) !important;`
`72`	`78`	`}`
`73`	`79`
`74`	`80`	`ul {`
Original file line number	Diff line number	Diff line change
`@@ -127,3 +127,9 @@`
`127`	`127`	`animation: submit-glow 4s infinite linear;`
`128`	`128`	`}`
`129`	`129`	`}`
	`130`	`+`
	`131`	`+.loading {`
	`132`	`+ cursor: not-allowed;`
	`133`	`+ opacity: 0.5;`
	`134`	`+ pointer-events: none;`
	`135`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -20,17 +20,23 @@`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`
	`23`	`+ h1,`
	`24`	`+ h2,`
	`25`	`+ h3,`
	`26`	`+ h4 {`
	`27`	`+ border: none !important;`
	`28`	`+ }`
	`29`	`+`
`23`	`30`	`h2 {`
`24`	`31`	`font-size: var(--h5) !important;`
`25`	`32`	`}`
`26`	`33`
`27`		`- h3,`
`28`		`- h4 {`
	`34`	`+ h3 {`
`29`	`35`	`font-size: var(--h6) !important;`
`30`	`36`	`}`
`31`	`37`
`32`		`- * {`
`33`		`- border: none !important;`
	`38`	`+ h4 {`
	`39`	`+ font-size: var(--p) !important;`
`34`	`40`	`}`
`35`	`41`
`36`	`42`	`ul {`