From 131233fe7b506f6a1a31039b336c0ae94a32230e Mon Sep 17 00:00:00 2001
From: HyunJinNo <nhj9831@naver.com>
Date: Sat, 7 Sep 2024 00:33:41 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=A0=95=EB=B3=B4=20=EB=93=B1=EB=A1=9D?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20useForm=20=EC=82=AC=EC=9A=A9?=
 =?UTF-8?q?=20=EC=8B=9C=20validation=20message=20=EC=B6=9C=EB=A0=A5?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                             |  51 +++++-
 src/components/diary/write/DiaryEditor.tsx    |  21 +--
 .../informations/write/InformationEditor.tsx  | 112 +++++++-----
 .../diary/edit/DiaryEditorContainer.tsx       |  17 ++
 .../diary/write/DiaryEditorContainer.tsx      |  18 ++
 .../write/InformationEditorContainer.tsx      | 162 ++++++++++--------
 .../zod/schema/InformationCreateFormSchema.ts |   1 +
 7 files changed, 243 insertions(+), 139 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 42abfe52..6aba1f15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "lottie-react": "^2.4.0",
         "next": "14.2.3",
         "node-html-parser": "^6.1.13",
+        "rc-slider": "^11.1.5",
         "react": "^18",
         "react-date-range": "^2.0.1",
         "react-dom": "^18",
@@ -33,6 +34,7 @@
       },
       "devDependencies": {
         "@types/node": "^20",
+        "@types/rc-slider": "^9.3.1",
         "@types/react": "^18",
         "@types/react-date-range": "^1.4.9",
         "@types/react-dom": "^18",
@@ -61,7 +63,6 @@
       "version": "7.24.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.6.tgz",
       "integrity": "sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -962,6 +963,16 @@
         "parchment": "^1.1.2"
       }
     },
+    "node_modules/@types/rc-slider": {
+      "version": "9.3.1",
+      "resolved": "https://registry.npmjs.org/@types/rc-slider/-/rc-slider-9.3.1.tgz",
+      "integrity": "sha512-apvhMnpQltIzLIvKfZGeI5uvBK4CoDAnqXlV7rtFRVn4Ecwe5Db32I4LF1sNlhAVevLjLJuE+7Fpi3OnG1mVbg==",
+      "deprecated": "This is a stub types definition. rc-slider provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "rc-slider": "*"
+      }
+    },
     "node_modules/@types/react": {
       "version": "18.3.3",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.3.tgz",
@@ -4664,6 +4675,41 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/rc-slider": {
+      "version": "11.1.5",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.5.tgz",
+      "integrity": "sha512-b77H5PbjMKsvkYXAYIkn50QuFX6ICQmCTibDinI9q+BHx65/TV4TeU25+oadhSRzykxs0/vBWeKBwRyySOeWlg==",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.43.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.43.0.tgz",
+      "integrity": "sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -4822,8 +4868,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "dev": true
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
     "node_modules/regexp.prototype.flags": {
       "version": "1.5.2",
diff --git a/src/components/diary/write/DiaryEditor.tsx b/src/components/diary/write/DiaryEditor.tsx
index 07de20a6..83242d33 100644
--- a/src/components/diary/write/DiaryEditor.tsx
+++ b/src/components/diary/write/DiaryEditor.tsx
@@ -5,7 +5,6 @@ import { useDiaryEditorStoreType } from "@/store/diaryEditorStore";
 import dynamic from "next/dynamic";
 import QuillEditorSkeleton from "@/components/skeleton/common/QuillEditorSkeleton";
 import { useFormContext } from "react-hook-form";
-import { parse } from "node-html-parser";
 
 const QuillEditorContainer = dynamic(
   () => import("@/containers/diary/write/QuillEditorContainer"),
@@ -208,25 +207,7 @@ const DiaryEditor = ({
       <button
         className={`${diaryEditorStore.days > 0 ? "bg-main hover:scale-105" : "cursor-not-allowed bg-gray1"} mb-[5.3125rem] mt-10 flex h-[2.625rem] w-[9.625rem] items-center justify-center self-end rounded-full text-[0.9375rem] text-white`}
         type="submit"
-        onClick={() => {
-          const imageUrl =
-            parse(formContext.getValues("contents")[0])
-              .querySelector("img")
-              ?.getAttribute("src") ?? "";
-
-          if (imageUrl === "") {
-            alert("Day1에 최소 1장의 이미지를 등록해 주세요.");
-            return;
-          }
-
-          formContext.setValue("image", imageUrl);
-
-          if (!formContext.formState.isValid) {
-            formContext.trigger();
-          } else {
-            onSubmit();
-          }
-        }}
+        onClick={() => onSubmit()}
         disabled={diaryEditorStore.days === 0 || loading}
       >
         {loading ? (
diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
index e1b4426d..2721ee55 100644
--- a/src/components/informations/write/InformationEditor.tsx
+++ b/src/components/informations/write/InformationEditor.tsx
@@ -153,11 +153,11 @@ const InformationEditor = ({
         <h2 className="flex w-44 flex-row items-center text-nowrap pt-3 text-lg font-bold text-black dark:text-slate-200">
           해시태그<span className="text-main">*</span>
         </h2>
-        <div className="flex w-full flex-col gap-2">
+        <div className="relative flex w-full flex-col gap-2">
           <input
-            className={`${editorStore.hashtags.length >= 10 ? "bg-gray-100" : "bg-transparent"} h-[3.3125rem] w-full rounded-3xl border-[0.0625rem] border-gray3 py-2 pl-5 text-sm font-medium outline-none hover:border-b-[0.0625rem] hover:border-main focus:border-main`}
+            className={`${formContext.getValues("hashtags").length >= 10 ? "bg-gray-100" : "bg-transparent"} ${formContext.formState.errors.hashtags ? "border-red-500" : "border-gray3 hover:border-main focus:border-main"} h-[3.3125rem] w-full rounded-3xl border-[0.0625rem] py-2 pl-5 text-sm font-medium outline-none hover:border-b-[0.0625rem]`}
             placeholder="#해시태그로 키워드를 써보세요!"
-            disabled={editorStore.hashtags.length >= 10}
+            disabled={formContext.getValues("hashtags").length >= 10}
             onKeyUp={onChangeHashTagHandler}
             onKeyDown={(e) => {
               if (e.key === "#" || e.key === " ") {
@@ -178,36 +178,50 @@ const InformationEditor = ({
             }}
             ref={inputTagRef}
           />
+          {formContext.formState.errors.hashtags && (
+            <p className="absolute bottom-5 left-4 text-xs font-medium text-red-500">
+              {formContext.formState.errors.hashtags.message as String}
+            </p>
+          )}
           <div className="flex w-full flex-row items-center justify-between gap-2">
             <div className="flex flex-1 flex-row flex-wrap items-center gap-2 overflow-auto py-1 pl-5">
-              {editorStore.hashtags.map((hashtag, index) => (
-                <ItemTag
-                  key={index}
-                  tag={hashtag}
-                  borderColor="border-main"
-                  textColor="text-main"
-                  cursorPointer={true}
-                  hover="hover:scale-105"
-                  removable={true}
-                  onClick={() =>
-                    editorStore.setEditor({
-                      hashtags: editorStore.hashtags.filter(
+              {formContext
+                .getValues("hashtags")
+                .map((hashtag: string, index: number) => (
+                  <ItemTag
+                    key={index}
+                    tag={hashtag}
+                    borderColor="border-main"
+                    textColor="text-main"
+                    cursorPointer={true}
+                    hover="hover:scale-105"
+                    removable={true}
+                    onClick={() => {
+                      const hashtags: string[] =
+                        formContext.getValues("hashtags");
+                      const filteredHashtags = hashtags.filter(
                         (_, i) => index !== i,
-                      ),
-                    })
-                  }
-                />
-              ))}
+                      );
+                      formContext.setValue("hashtags", filteredHashtags);
+                      formContext.trigger("hashtags");
+                    }}
+                  />
+                ))}
             </div>
             <button
-              className="text-sm font-medium text-gray1 hover:text-main dark:text-slate-400"
+              className="h-9 text-sm font-medium text-gray1 hover:text-main dark:text-slate-400"
               type="button"
               onClick={() => {
                 const hashtag = inputTagRef.current?.value ?? "";
                 if (hashtag === "") {
                   return;
                 }
-                editorStore.addHashtag(hashtag);
+                const hashtags = formContext.getValues("hashtags");
+                if (!hashtags.includes(hashtag) && hashtag.trim().length >= 2) {
+                  hashtags.push(hashtag);
+                }
+                formContext.setValue("hashtags", hashtags);
+                formContext.trigger("hashtags");
                 (inputTagRef.current as HTMLInputElement).value = "";
               }}
             >
@@ -221,16 +235,20 @@ const InformationEditor = ({
         <h2 className="w-36 pt-3 text-lg font-bold text-black dark:text-slate-200">
           생생한 혼플 TIP<span className="text-main">*</span>
         </h2>
-        <div className="flex flex-grow flex-col gap-4 max-[744px]:w-full">
-          {editorStore.tips.map((tip, index) => (
+        <div className="relative flex flex-grow flex-col gap-4 max-[744px]:w-full">
+          {formContext.getValues("tips").map((tip: string, index: number) => (
             <div key={index} className="relative w-full">
               <input
-                className={`${index >= 1 ? "pr-14" : "pr-5"} h-[3.3125rem] w-full rounded-3xl border-[0.0625rem] border-gray3 pl-5 text-sm outline-none hover:border-main focus:border-main`}
+                className={`${formContext.formState.errors.tips && tip.trim() === "" ? "border-red-500" : "border-gray3 hover:border-main focus:border-main"} ${index >= 1 ? "pr-14" : "pr-5"} h-[3.3125rem] w-full rounded-3xl border-[0.0625rem] pl-5 text-sm outline-none`}
                 type="text"
                 placeholder="나만의 혼플 팁을 알려주세요."
-                value={tip}
-                onChange={(e) => editorStore.changeTip(index, e.target.value)}
-                required={true}
+                onChange={(e) => {
+                  const tips: string[] = formContext.getValues("tips");
+                  tips[index] = e.target.value;
+                  console.log(tips);
+                  formContext.setValue("tips", tips);
+                  formContext.trigger("tips");
+                }}
                 onKeyDown={(e) => {
                   if (e.key === ";") {
                     e.preventDefault();
@@ -243,30 +261,37 @@ const InformationEditor = ({
                   className="absolute right-[0.875rem] top-[0.625rem] cursor-pointer rounded-full bg-gray-100 p-2 text-main hover:scale-110"
                   size="2rem"
                   onClick={() => {
-                    editorStore.setEditor({
-                      tips: editorStore.tips.filter((_, idx) => idx !== index),
-                    });
+                    const tips: string[] = formContext.getValues("tips");
+                    const filteredTips = tips.filter((_, idx) => idx !== index);
+                    formContext.setValue("tips", filteredTips);
+                    formContext.trigger("tips");
                   }}
                 />
               )}
             </div>
           ))}
+          {formContext.formState.errors.tips && (
+            <p className="absolute -bottom-6 left-4 text-xs font-medium text-red-500">
+              비어있는 Tip을 입력하거나 항목을 삭제해 주세요.
+            </p>
+          )}
         </div>
       </div>
       <div className="flex flex-col items-end">
         <div className="mt-3 flex flex-row items-center gap-5 text-sm font-medium text-gray1 dark:text-slate-400">
           <button
-            className={`${editorStore.tips.length <= 1 ? "text-gray3 dark:text-slate-600" : "hover:text-main"}`}
+            className={`${formContext.getValues("tips").length <= 1 ? "text-gray3 dark:text-slate-600" : "hover:text-main"}`}
             type="button"
-            onClick={() =>
-              editorStore.setEditor({
-                tips: editorStore.tips.slice(0, editorStore.tips.length - 1),
-              })
-            }
-            disabled={editorStore.tips.length <= 1}
+            onClick={() => {
+              const tips: string[] = formContext.getValues("tips");
+              tips.pop();
+              formContext.setValue("tips", tips);
+              formContext.trigger("tips");
+            }}
+            disabled={formContext.getValues("tips").length <= 1}
           >
             <span
-              className={`${editorStore.tips.length <= 1 ? "text-gray3" : "text-main"}`}
+              className={`${formContext.getValues("tips").length <= 1 ? "text-gray3" : "text-main"}`}
             >
               -
             </span>
@@ -275,9 +300,12 @@ const InformationEditor = ({
           <button
             className="hover:text-main"
             type="button"
-            onClick={() =>
-              editorStore.setEditor({ tips: [...editorStore.tips, ""] })
-            }
+            onClick={() => {
+              const tips = formContext.getValues("tips");
+              tips.push("");
+              formContext.setValue("tips", tips);
+              formContext.trigger("tips");
+            }}
           >
             <span className="text-main">+</span>
             {" 항목 추가"}
diff --git a/src/containers/diary/edit/DiaryEditorContainer.tsx b/src/containers/diary/edit/DiaryEditorContainer.tsx
index f0f9a5fb..5cfb3ba2 100644
--- a/src/containers/diary/edit/DiaryEditorContainer.tsx
+++ b/src/containers/diary/edit/DiaryEditorContainer.tsx
@@ -41,6 +41,23 @@ const DiaryEditorContainer = ({ diaryData }: Props) => {
   });
 
   const onSubmit = async () => {
+    const imageUrl =
+      parse(methods.getValues("contents")[0])
+        .querySelector("img")
+        ?.getAttribute("src") ?? "";
+
+    if (imageUrl === "") {
+      alert("Day1에 최소 1장의 이미지를 등록해 주세요.");
+      return;
+    }
+
+    methods.setValue("image", imageUrl);
+
+    if (!methods.formState.isValid) {
+      methods.trigger();
+      return;
+    }
+
     const { title, image, startDate, endDate, contents, moodLevels, address } =
       methods.getValues();
 
diff --git a/src/containers/diary/write/DiaryEditorContainer.tsx b/src/containers/diary/write/DiaryEditorContainer.tsx
index 3f6d9b4f..0d5f855c 100644
--- a/src/containers/diary/write/DiaryEditorContainer.tsx
+++ b/src/containers/diary/write/DiaryEditorContainer.tsx
@@ -12,6 +12,7 @@ import { useEffect, useState } from "react";
 import sanitizeHtml from "sanitize-html";
 import { FormProvider, useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
+import parse from "node-html-parser";
 
 const DiaryEditorContainer = () => {
   const router = useRouter();
@@ -37,6 +38,23 @@ const DiaryEditorContainer = () => {
   });
 
   const onSubmit = async () => {
+    const imageUrl =
+      parse(methods.getValues("contents")[0])
+        .querySelector("img")
+        ?.getAttribute("src") ?? "";
+
+    if (imageUrl === "") {
+      alert("Day1에 최소 1장의 이미지를 등록해 주세요.");
+      return;
+    }
+
+    methods.setValue("image", imageUrl);
+
+    if (!methods.formState.isValid) {
+      methods.trigger();
+      return;
+    }
+
     const { title, image, startDate, endDate, contents, moodLevels, address } =
       methods.getValues();
 
diff --git a/src/containers/informations/write/InformationEditorContainer.tsx b/src/containers/informations/write/InformationEditorContainer.tsx
index 59b4d091..5f3b9d51 100644
--- a/src/containers/informations/write/InformationEditorContainer.tsx
+++ b/src/containers/informations/write/InformationEditorContainer.tsx
@@ -44,7 +44,7 @@ const InformationEditorContainer = () => {
       mainImageIndex: 0,
       informationContent: "",
       contentLength: 0,
-      hashtags: [],
+      hashtags: Array<string>(0),
       tips: [""],
     },
     mode: "onChange",
@@ -88,84 +88,98 @@ const InformationEditorContainer = () => {
         return;
       }
 
-      editorStore.addHashtag(hashtag);
+      const hashtags = methods.getValues("hashtags");
+      if (!hashtags.includes(hashtag) && hashtag.trim().length >= 2) {
+        hashtags.push(hashtag);
+      }
+      methods.setValue("hashtags", hashtags);
+      methods.trigger("hashtags");
       (inputTagRef.current as HTMLInputElement).value = "";
     }
   };
 
   const onSubmit = async () => {
-    alert("테스트");
-
-    // // Validate from fields using Zod
-    // const validatedFields = InformationCreateFormSchema.safeParse({
-    //   userId: id,
-    //   informationTitle: editorStore.title,
-    //   informationAddress: editorStore.address,
-    //   province: editorStore.province,
-    //   city: editorStore.city,
-    //   placeId: editorStore.placeId,
-    //   placeXAxis: editorStore.placeXAxis,
-    //   placeYAxis: editorStore.placeYAxis,
-    //   placeName: editorStore.placeName,
-    //   categoryId: editorStore.categoryId,
-    //   thumbnailImageUrl: editorStore.images[editorStore.mainImageIndex],
-    //   contentImagesUrl: editorStore.images.filter(
-    //     (url, index) => index !== editorStore.mainImageIndex && url !== "",
-    //   ),
-    //   informationContent: sanitizeHtml(editorStore.content, sanitizeOption),
-    //   hashtags: editorStore.hashtags,
-    //   tips: editorStore.tips,
-    // });
-
-    // // If validation fails, return errors early. Otherwise, continue.
-    // if (!validatedFields.success) {
-    //   console.log(validatedFields.error.issues);
-    //   alert(validatedFields.error.issues[0].message);
-    //   return;
-    // }
-
-    // const data: CreateInformationRequestDto = {
-    //   informationTitle: validatedFields.data.informationTitle,
-    //   informationAddress: validatedFields.data.informationAddress,
-    //   informationContent: validatedFields.data.informationContent,
-    //   informationTips: validatedFields.data.tips.join(";"),
-    //   placeRegisterRequest: {
-    //     searchId: validatedFields.data.placeId,
-    //     name: validatedFields.data.placeName,
-    //     xAxis: validatedFields.data.placeXAxis,
-    //     yAxis: validatedFields.data.placeYAxis,
-    //     address: validatedFields.data.informationAddress,
-    //   },
-    //   categoryId: validatedFields.data.categoryId,
-    //   zoneCategoryNameParent: validatedFields.data.province,
-    //   zoneCategoryNameChild: validatedFields.data.city,
-    //   thumbNailImageUrl: validatedFields.data.thumbnailImageUrl,
-    //   contentImagesUrl: validatedFields.data.contentImagesUrl,
-    //   tagRegisterRequests: validatedFields.data.hashtags.map((tag) => ({
-    //     name: tag,
-    //   })),
-    // };
-
-    // setLoading(true);
-
-    // const response = await fetch("/api/informations", {
-    //   method: "POST",
-    //   headers: {
-    //     "Content-Type": "application/json",
-    //   },
-    //   body: JSON.stringify(data),
-    //   cache: "no-store",
-    // });
-
-    // if (!response.ok) {
-    //   alert("정보 등록에 실패하였습니다.");
-    //   setLoading(false);
-    //   throw new Error(response.statusText);
-    // }
-
-    // const result: InformationRegisterResponseDto = await response.json();
-    // router.push(`/informations/${result.id}`);
-    // router.refresh();
+    if (editorStore.images.filter((image) => image !== "").length === 0) {
+      alert("최소 한 장의 사진을 추가해 주세요.");
+      return;
+    }
+
+    methods.setValue(
+      "thumbnailImageUrl",
+      editorStore.images[editorStore.mainImageIndex],
+    );
+    methods.setValue(
+      "contentImagesUrl",
+      editorStore.images.filter(
+        (url, index) => index !== editorStore.mainImageIndex && url !== "",
+      ),
+    );
+
+    if (!methods.formState.isValid) {
+      methods.trigger();
+      alert("모든 정보를 입력해 주세요.");
+      return;
+    }
+
+    const {
+      informationTitle,
+      informationAddress,
+      informationContent,
+      tips,
+      placeId,
+      placeName,
+      placeXAxis,
+      placeYAxis,
+      categoryId,
+      province,
+      city,
+      thumbnailImageUrl,
+      contentImagesUrl,
+      hashtags,
+    } = methods.getValues();
+
+    const data: CreateInformationRequestDto = {
+      informationTitle: informationTitle,
+      informationAddress: informationAddress,
+      informationContent: sanitizeHtml(informationContent, sanitizeOption),
+      informationTips: tips.join(";"),
+      placeRegisterRequest: {
+        searchId: placeId,
+        name: placeName,
+        xAxis: placeXAxis,
+        yAxis: placeYAxis,
+        address: informationAddress,
+      },
+      categoryId: categoryId,
+      zoneCategoryNameParent: province,
+      zoneCategoryNameChild: city,
+      thumbNailImageUrl: thumbnailImageUrl,
+      contentImagesUrl: contentImagesUrl,
+      tagRegisterRequests: hashtags.map((tag) => ({
+        name: tag,
+      })),
+    };
+
+    setLoading(true);
+
+    const response = await fetch("/api/informations", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+      cache: "no-store",
+    });
+
+    if (!response.ok) {
+      alert("정보 등록에 실패하였습니다.");
+      setLoading(false);
+      throw new Error(response.statusText);
+    }
+
+    const result: InformationRegisterResponseDto = await response.json();
+    router.push(`/informations/${result.id}`);
+    router.refresh();
   };
 
   // 로그인을 하지 않은 사용자의 경우 로그인 페이지로 리다이렉트.
diff --git a/src/lib/zod/schema/InformationCreateFormSchema.ts b/src/lib/zod/schema/InformationCreateFormSchema.ts
index 9e92a308..29377d05 100644
--- a/src/lib/zod/schema/InformationCreateFormSchema.ts
+++ b/src/lib/zod/schema/InformationCreateFormSchema.ts
@@ -95,6 +95,7 @@ export const InformationCreateFormSchema = z.object({
       required_error: "Tip is required.",
       invalid_type_error: "Tip must be a string.",
     })
+    .min(1, { message: "최소 하나의 Tip을 입력해 주세요." })
     .array()
     .min(1, { message: "최소 하나의 Tip을 입력해 주세요." }),
 });