Merge pull request #272 from TripInfoWeb/dev_informations

Feat: 정보 등록, 수정 페이지에서 useForm 사용
TripInfoWeb · Sep 7, 2024 · aee60fb · aee60fb
2 parents 1de881e + 6af0760
commit aee60fb
Show file tree

Hide file tree

Showing 16 changed files with 372 additions and 359 deletions.
diff --git a/public/delete-icon.svg b/public/delete-icon.svg
diff --git a/public/edit-icon.svg b/public/edit-icon.svg
diff --git a/src/components/common/icons/DeleteIcon.tsx b/src/components/common/icons/DeleteIcon.tsx
@@ -0,0 +1,52 @@
+interface Props {
+  className?: string;
+}
+
+const DeleteIcon = ({ className }: Props) => {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1.04688 2.96985H16.8998"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <path
+        d="M6.00098 13.8593L6.00098 5.93969"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <path
+        d="M8.97363 13.8593L8.97363 5.93969"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <path
+        d="M11.9453 13.8593L11.9453 5.93969"
+        stroke-width="1.5"
+        stroke-linecap="round"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M7.00977 1.5H10.9362C11.2124 1.5 11.4362 1.72386 11.4362 2V2.4598H6.50977V2C6.50977 1.72386 6.73362 1.5 7.00977 1.5ZM5.00977 2C5.00977 0.895429 5.9052 0 7.00977 0H10.9362C12.0408 0 12.9362 0.895431 12.9362 2V2.4598V2.96985H5.00977V2.4598V2Z"
+        fill="#A3A3A3"
+        stroke-width="0.5"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M2.03711 4.94978V13.8191C2.03711 16.0283 3.82797 17.8191 6.03711 17.8191H11.9084C14.1176 17.8191 15.9084 16.0283 15.9084 13.8191V4.94978H14.4084V13.8191C14.4084 15.1998 13.2891 16.3191 11.9084 16.3191H6.03711C4.6564 16.3191 3.53711 15.1998 3.53711 13.8191V4.94978H2.03711Z"
+        fill="#A3A3A3"
+        stroke-width="0.5"
+      />
+    </svg>
+  );
+};
+
+export default DeleteIcon;
diff --git a/src/components/common/icons/EditIcon.tsx b/src/components/common/icons/EditIcon.tsx
@@ -0,0 +1,31 @@
+interface Props {
+  className?: string;
+}
+
+const EditIcon = ({ className }: Props) => {
+  return (
+    <svg
+      className={className}
+      width="20"
+      height="20"
+      viewBox="0 0 22 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.5288 1.9437C15.0172 1.45576 15.809 1.45576 16.2974 1.9437L19.0726 4.7165C19.5609 5.20444 19.5609 5.99556 19.0726 6.4835L9.05327 16.4941C8.85152 16.6957 8.58685 16.8223 8.30318 16.8529L5.19226 17.1883C4.39872 17.2738 3.72913 16.6048 3.81477 15.812L4.15048 12.7038C4.18109 12.4203 4.30778 12.1559 4.50953 11.9543L14.5288 1.9437Z"
+        stroke-width="1.5"
+      />
+      <rect
+        x="0.350303"
+        width="3.46633"
+        height="0.495189"
+        transform="matrix(0.707413 0.7068 0.707413 -0.7068 13.5341 4.70214)"
+        fill="white"
+        stroke-width="0.495189"
+      />
+    </svg>
+  );
+};
+
+export default EditIcon;
diff --git a/src/components/diary/detail/DiaryViewer.tsx b/src/components/diary/detail/DiaryViewer.tsx
@@ -1,3 +1,5 @@
+import DeleteIcon from "@/components/common/icons/DeleteIcon";
+import EditIcon from "@/components/common/icons/EditIcon";
 import { FEELING_STATUS } from "@/constants/diary/feelingStatus";
 import DiaryDeleteModalContainer from "@/containers/diary/detail/DiaryDeleteModalContainer";
 import { GetDiaryResponseDto } from "@/types/DiaryDto";
@@ -97,17 +99,17 @@ const DiaryViewer = ({
       />
       <div className="mb-32 mt-6 flex w-full flex-row items-center justify-end gap-3 text-sm">
         <Link
-          className="flex flex-row items-center gap-1 hover:text-main dark:text-slate-400"
+          className="flex flex-row items-center gap-1 stroke-gray2 text-sm text-gray1 hover:stroke-main hover:text-main dark:text-slate-400"
           href={`/diary/edit/${data.diaryContentResponse.diaryId}`}
         >
-          <GoPencil />
+          <EditIcon />
           수정
         </Link>
         <button
-          className="flex flex-row items-center gap-1 hover:text-main dark:text-slate-400"
+          className="flex flex-row items-center gap-1 stroke-gray2 text-sm text-gray1 hover:stroke-main hover:text-main dark:text-slate-400"
           onClick={() => openModal()}
         >
-          <FaRegTrashCan />
+          <DeleteIcon />
           삭제
         </button>
       </div>

diff --git a/src/components/informations/detail/ButtonList.tsx b/src/components/informations/detail/ButtonList.tsx
@@ -1,8 +1,8 @@
+import DeleteIcon from "@/components/common/icons/DeleteIcon";
+import EditIcon from "@/components/common/icons/EditIcon";
 import InformationDeleteModalContainer from "@/containers/informations/detail/InformationDeleteModalContainer";
 import Link from "next/link";
 import { Dispatch, SetStateAction } from "react";
-import { FaRegTrashCan } from "react-icons/fa6";
-import { GoPencil } from "react-icons/go";
 
 interface Props {
   visible: boolean;
@@ -30,17 +30,17 @@ const ButtonList = ({
         />
       )}
       <Link
-        className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400"
+        className="flex flex-row items-center gap-1 stroke-gray2 text-sm text-gray1 hover:stroke-main hover:text-main dark:text-slate-400"
         href={`/informations/edit/${informationId}`}
       >
-        <GoPencil />
+        <EditIcon />
         수정
       </Link>
       <button
-        className="flex flex-row items-center gap-1 text-sm hover:text-main dark:text-slate-400"
+        className="flex flex-row items-center gap-1 stroke-gray2 text-sm text-gray1 hover:stroke-main hover:text-main dark:text-slate-400"
         onClick={() => setModalVisible(true)}
       >
-        <FaRegTrashCan />
+        <DeleteIcon />
         삭제
       </button>
     </div>

diff --git a/src/components/informations/write/ImageUploadItem.tsx b/src/components/informations/write/ImageUploadItem.tsx
@@ -65,9 +65,10 @@ const ImageUploadItem = ({
     <div>
       <HashSpinner loading={loading} />
       <label
-        className={`${index >= 12 ? "hidden" : ""} flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-center rounded-xl border-[0.0625rem] hover:border-main dark:bg-slate-800`}
+        className={`${index >= 12 ? "hidden" : ""} flex h-[9.375rem] w-40 cursor-pointer flex-col items-center justify-center rounded-xl border-[0.0625rem] hover:border-main focus:border-main dark:bg-slate-800`}
         htmlFor="file"
-        onClick={onUploadButtonClicked}
+        onClick={() => onUploadButtonClicked()}
+        onTouchEnd={() => onUploadButtonClicked()}
       >
         <div className="flex h-12 w-12 items-center justify-center rounded-full border-[0.0625rem] border-main text-xl text-main">
           +

diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
@@ -63,7 +63,7 @@ const InformationEditor = ({
         <input
           className={`${formContext.formState.errors.informationTitle ? "border-red-500" : "border-gray3 hover:border-main focus:border-main"} h-full flex-grow rounded-full border-[0.0625rem] bg-transparent px-5 text-sm font-medium outline-none`}
           type="text"
-          placeholder="제목을 입력하세요."
+          placeholder="제목을 입력하세요. (최대 50자)"
           {...formContext.register("informationTitle")}
           maxLength={50}
           onChange={(e) => {
@@ -156,7 +156,7 @@ const InformationEditor = ({
         <div className="relative flex w-full flex-col gap-2">
           <input
             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="#해시태그로 키워드를 써보세요!"
+            placeholder="#해시태그로 키워드를 써보세요! (2 ~ 15자)"
             disabled={formContext.getValues("hashtags").length >= 10}
             onKeyUp={onChangeHashTagHandler}
             onKeyDown={(e) => {
@@ -238,24 +238,45 @@ const InformationEditor = ({
         <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={`${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="나만의 혼플 팁을 알려주세요."
-                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();
-                    e.persist();
-                  }
-                }}
-              />
+              {pathname === "등록" ? (
+                <input
+                  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="나만의 혼플 팁을 알려주세요."
+                  onChange={(e) => {
+                    const tips: string[] = formContext.getValues("tips");
+                    tips[index] = e.target.value;
+                    formContext.setValue("tips", tips);
+                    formContext.trigger("tips");
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === ";") {
+                      e.preventDefault();
+                      e.persist();
+                    }
+                  }}
+                />
+              ) : (
+                <input
+                  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) => {
+                    const tips: string[] = formContext.getValues("tips");
+                    tips[index] = e.target.value;
+                    formContext.setValue("tips", tips);
+                    formContext.trigger("tips");
+                  }}
+                  onKeyDown={(e) => {
+                    if (e.key === ";") {
+                      e.preventDefault();
+                      e.persist();
+                    }
+                  }}
+                />
+              )}
+
               {index >= 1 && (
                 <MdClose
                   className="absolute right-[0.875rem] top-[0.625rem] cursor-pointer rounded-full bg-gray-100 p-2 text-main hover:scale-110"

diff --git a/src/containers/common/KakaoMapAddressContainer.tsx b/src/containers/common/KakaoMapAddressContainer.tsx