Mt-NextJs · lumpenop · Oct 22, 2024 · Oct 22, 2024
diff --git a/src/app/admin/block/components/layout.tsx b/src/app/admin/block/components/layout.tsx
@@ -2,14 +2,15 @@
 import React, { FormEvent } from "react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import QuestionIcon from "@app/admin/block/components/question-icon";
 
 const Layout = ({
   title,
   onSubmit,
   children,
 }: Readonly<{
   title: string;
-  onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+  onSubmit?: (e: FormEvent<HTMLFormElement>) => void;
   children: React.ReactNode;
 }>) => {
   const router = useRouter();
@@ -27,21 +28,7 @@ const Layout = ({
       </div>
       <div className="flex items-center gap-1">
         <h1 className="pageName">{title}</h1>
-        <div className="group relative inline-block">
-          <Image
-            src="/assets/icons/icon_help.png"
-            alt="question"
-            width={30}
-            height={30}
-          />
-          {title === "링크 블록" && (
-            <div className="absolute left-2 top-20 w-max -translate-x-1/2 -translate-y-1/2 transform rounded bg-[#343434] px-3 py-3 text-sm text-white opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-              • 기본 정보와 공개 여부 값은 필수입니다. <br />• 예약 공개와
-              스티커는 프로 기능입니다.
-              <div className="absolute -top-3 left-1/2 h-0 w-0 rotate-90 border-y-8 border-r-8 border-y-transparent border-r-[#343434]"></div>
-            </div>
-          )}
-        </div>
+        <QuestionIcon title={title} />
       </div>
       <form onSubmit={onSubmit} className="flex flex-col gap-4">
         {children}

diff --git a/src/app/admin/block/image/components/image-box.tsx b/src/app/admin/block/image/components/image-box.tsx
@@ -3,11 +3,11 @@ import Image from "next/image";
 import ErrorBoundary from "@app/(intro)/components/error-boundary";
 
 interface Props {
-  handeInputImageClick: () => void;
+  // handeInputImageClick: () => void;
   selectedImageUrl: string;
 }
 
-const ImageBox = ({ handeInputImageClick, selectedImageUrl }: Props) => {
+const ImageBox = ({ selectedImageUrl }: Props) => {
   return (
     <div className="relative overflow-hidden rounded shadow-lg">
       {/*<button*/}

diff --git a/src/app/admin/block/image/page.tsx b/src/app/admin/block/image/page.tsx
@@ -12,91 +12,25 @@ import { useRouter } from "next/navigation";
 import { getSequence } from "../../../../lib/get-sequence";
 import FormInput from "@app/admin/block/components/form-input";
 import { checkUrl } from "../../../../lib/check-url";
+import { postBlock } from "../../../../lib/post-block";
 
 const Page = () => {
-  const inputImageRef = useRef<HTMLInputElement>(null);
+  // const inputImageRef = useRef<HTMLInputElement>(null);
   const [title, setTitle] = useState<string>("");
   const [connectingUrl, setConnectingUrl] = useState<string>("");
   const [selectedImageUrl, setSelectedImageUrl] = useState<string>("");
   const router = useRouter();
 
-  const setResponseMessage = async (response: Response) => {
-    if (response.ok) {
-      console.log("성공");
-      return response.json();
-    } else {
-      const errorResponse = await response.json();
-      const { status } = response;
-      const { message } = errorResponse;
-      console.log(status);
-      if (status === 500) {
-        alert("서버 에러");
-      }
-      console.log(`Error: ${status}, Message: ${message || "Unknown error"}`);
-      throw new Error(`Error: ${response.status}`);
-    }
-  };
-  const postBlock = async (
-    path: string,
-    params: { [index: string]: string | number },
-  ) => {
-    const token = sessionStorage.getItem("token");
-    if (!token) {
-      router.push("/login");
-      return;
-    }
-    const nowSequence = await getSequence(token);
-    params["sequence"] = nowSequence + 1;
-
-    try {
-      const response = await fetch(
-        `${process.env.NEXT_PUBLIC_API_URL}${path}`,
-        {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify(params),
-        },
-      );
-      return await setResponseMessage(response);
-    } catch (error) {
-      throw new Error(
-        error instanceof Error ? error.message : "알 수 없는 에러",
-      );
-    }
-  };
-  const newAddImageBlock = async () => {
+  const addImageBlock = () => {
     const params = {
       type: 4,
       title,
       url: connectingUrl,
       imgUrl: selectedImageUrl,
     };
-    postBlock("/api/link/add", params)
-      .then((response) => async () => {
-        if (response.ok) {
-          console.log("성공");
-          return response.json();
-        } else {
-          const errorResponse = await response.json();
-          const { status } = response;
-          const { message } = errorResponse;
-          console.log(status);
-          if (status === 500) {
-            alert("서버 에러");
-          }
-          console.log(
-            `Error: ${status}, Message: ${message || "Unknown error"}`,
-          );
-          throw new Error(`Error: ${response.status}`);
-        }
-      })
-      .catch((error) => {
-        console.error(error);
-        alert("서버 응답이 실패했습니다.");
-      });
+    postBlock("/api/link/add", params, router).then((res) => {
+      if (res) console.log(res);
+    });
   };
 
   // const addImageBlock = async () => {
@@ -137,12 +71,12 @@ const Page = () => {
   const handleAddButtonClick = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!selectedImageUrl) return;
-    newAddImageBlock().then();
+    addImageBlock();
   };
 
-  const handeInputImageClick = () => {
-    inputImageRef.current?.click();
-  };
+  // const handeInputImageClick = () => {
+  //   inputImageRef.current?.click();
+  // };
 
   // const selectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
   //   const file = e.target.files?.[0];
@@ -197,7 +131,7 @@ const Page = () => {
       {/*/>*/}
       <ImageBox
         selectedImageUrl={selectedImageUrl}
-        handeInputImageClick={handeInputImageClick}
+        // handeInputImageClick={handeInputImageClick}
       />
       <FormInput
         label="타이틀"

diff --git a/src/app/admin/block/video/page.tsx b/src/app/admin/block/video/page.tsx
@@ -35,14 +35,17 @@ const Page = () => {
     };
     console.log(nowSequence);
     try {
-      const response = await fetch(`/api/api/link/add`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/api/link/add`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify(params),
         },
-        body: JSON.stringify(params),
-      });
+      );
       if (response.ok) {
         alert("비디오 블록 추가 완료");
         router.push("/admin");

diff --git a/src/lib/post-block.ts b/src/lib/post-block.ts
@@ -0,0 +1,40 @@
+import { getSequence } from "./get-sequence";
+import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
+
+export const postBlock = async (
+  path: string,
+  params: { [index: string]: string | number },
+  router?: AppRouterInstance,
+) => {
+  const token = sessionStorage.getItem("token");
+  if (!token) {
+    if (router) router.push("/login");
+    return;
+  }
+  params["sequence"] = (await getSequence(token)) + 1;
+
+  try {
+    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${path}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(params),
+    });
+    const responseJson = await response.json();
+    if (response.ok) {
+      console.log("성공");
+      return responseJson;
+    } else {
+      const { status } = response;
+      const { message } = responseJson;
+      if (status === 500) {
+        alert("서버 에러");
+      }
+      console.log(`Error: ${status}, Message: ${message || "Unknown error"}`);
+    }
+  } catch (error) {
+    throw new Error(error instanceof Error ? error.message : "알 수 없는 에러");
+  }
+};