Merge pull request #222 from TripInfoWeb/dev_informations

Refactor: 정보 banner 이미지 교체 및 정보 태그 입력 로직 교체
TripInfoWeb · Aug 23, 2024 · 3ca501f · 3ca501f
2 parents 619bc22 + 692548c
commit 3ca501f
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 61 deletions.
diff --git a/public/banner-image.png b/public/banner-image.png
diff --git a/src/components/common/Banner.tsx b/src/components/common/Banner.tsx
@@ -33,52 +33,18 @@ const Banner = ({ content, buttonText, category }: Props) => {
             {buttonText}
           </Link>
         </div>
-        <div
-          className={`relative flex h-[14rem] w-[27rem] items-center justify-end max-[1024px]:h-[12rem] max-[744px]:justify-center`}
-        >
+        {category === "정보" && (
           <div
-            className={`absolute flex h-full w-full flex-row justify-center`}
+            className={`relative flex h-[13.5rem] w-[24.875rem] animate-bannerImage items-center justify-end max-[1024px]:mt-8 max-[1024px]:h-[10.6875rem] max-[744px]:justify-center`}
           >
-            {category === "정보" && (
-              <div className="flex h-[13.4375rem] w-[24.8125rem] flex-col max-[1024px]:mt-4 max-[1024px]:h-[10.6875rem] max-[1024px]:w-[19.8125rem] max-[744px]:mt-[1.875rem]">
-                <div className="flex justify-end pr-6">
-                  <div className="relative h-[5.8125rem] w-[11.75rem] animate-bannerImage max-[1024px]:h-[5.0625rem] max-[1024px]:w-[10.1875rem]">
-                    <Image
-                      src="/banner-image1.png"
-                      alt="banner-image1"
-                      fill={true}
-                      style={{
-                        objectFit: "contain",
-                      }}
-                    />
-                  </div>
-                </div>
-                <div className="relative z-10 -mt-[1.875rem] h-[5.75rem] w-[14.375rem] animate-bannerImage max-[1024px]:h-[4.5625rem] max-[1024px]:w-[11.5rem]">
-                  <Image
-                    src="/banner-image2.png"
-                    alt="banner-image2"
-                    fill={true}
-                    style={{
-                      objectFit: "contain",
-                    }}
-                  />
-                </div>
-                <div className="-mt-8 flex justify-end">
-                  <div className="relative h-[5.8125rem] w-[14.75rem] animate-bannerImage max-[1024px]:h-[4.625rem] max-[1024px]:w-[11.75rem]">
-                    <Image
-                      src="/banner-image3.png"
-                      alt="banner-image3"
-                      fill={true}
-                      style={{
-                        objectFit: "contain",
-                      }}
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
+            <Image
+              className="object-contain"
+              src="/banner-image.png"
+              alt="banner-image"
+              fill={true}
+            />
           </div>
-        </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
@@ -15,7 +15,7 @@ interface Props {
   editorStore: useEditorStoreType;
   locationModal: boolean;
   categoryModal: boolean;
-  hashtag: string;
+  inputTagRef: React.RefObject<HTMLInputElement>;
   imagesHook: useDragScrollType;
   hashtagsHook: useDragScrollType;
   loading: boolean;
@@ -24,15 +24,15 @@ interface Props {
   closeLocationModal: () => void;
   showCategoryModal: () => void;
   closeCategoryModal: () => void;
-  setHashtag: Dispatch<SetStateAction<string>>;
+  onChangeHashTagHandler: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 const InformationEditor = ({
   pathname,
   editorStore,
   locationModal,
   categoryModal,
-  hashtag,
+  inputTagRef,
   imagesHook,
   hashtagsHook,
   loading,
@@ -41,7 +41,7 @@ const InformationEditor = ({
   closeLocationModal,
   showCategoryModal,
   closeCategoryModal,
-  setHashtag,
+  onChangeHashTagHandler,
 }: Props) => {
   return (
     <div className="flex w-full flex-col">
@@ -136,25 +136,27 @@ const InformationEditor = ({
         <div className="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] py-2 pl-5 text-sm font-medium outline-none hover:border-b-[0.0625rem] hover:border-main focus:border-main`}
-            type="text"
-            name="hashtag"
             placeholder="#해시태그로 키워드를 써보세요!"
-            value={hashtag}
             disabled={editorStore.hashtags.length >= 10}
-            onChange={(e) => {
-              setHashtag(e.target.value.slice(0, 15));
-            }}
+            onKeyUp={onChangeHashTagHandler}
             onKeyDown={(e) => {
               if (e.key === "#") {
                 e.preventDefault();
                 e.persist();
-              } else if (e.key === "Enter") {
+              } else if (
+                e.key !== "Backspace" &&
+                inputTagRef.current !== null &&
+                inputTagRef.current.value.length >= 15
+              ) {
                 e.preventDefault();
                 e.persist();
-                editorStore.addHashtag(hashtag);
-                setHashtag("");
+                inputTagRef.current.value = inputTagRef.current.value.slice(
+                  0,
+                  15,
+                );
               }
             }}
+            ref={inputTagRef}
           />
           <div className="flex h-9 w-full flex-row items-center justify-between gap-2">
             <div
@@ -191,8 +193,12 @@ const InformationEditor = ({
               className="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);
-                setHashtag("");
+                (inputTagRef.current as HTMLInputElement).value = "";
               }}
             >
               <span className="text-main">+</span>

diff --git a/src/containers/informations/write/InformationEditorContainer.tsx b/src/containers/informations/write/InformationEditorContainer.tsx
@@ -8,7 +8,7 @@ import useAuthStore from "@/store/authStore";
 import useEditorStore from "@/store/editorStore";
 import { InformationRegisterResponseDto } from "@/types/InformationDto";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import sanitizeHtml from "sanitize-html";
 
 const InformationEditorContainer = () => {
@@ -17,7 +17,7 @@ const InformationEditorContainer = () => {
   const { id } = useAuthStore();
   const editorStore = useEditorStore();
   const initialize = editorStore.initialize;
-  const [hashtag, setHashtag] = useState<string>("");
+  const inputTagRef = useRef<HTMLInputElement>(null);
   const router = useRouter();
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -45,6 +45,18 @@ const InformationEditorContainer = () => {
     setCategoryModal(false);
   };
 
+  const onChangeHashTagHandler = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const hashtag = inputTagRef.current?.value ?? "";
+      if (hashtag === "") {
+        return;
+      }
+
+      editorStore.addHashtag(hashtag);
+      (inputTagRef.current as HTMLInputElement).value = "";
+    }
+  };
+
   const onSubmit = async () => {
     // Validate from fields using Zod
     const validatedFields = InformationCreateFormSchema.safeParse({
@@ -150,7 +162,7 @@ const InformationEditorContainer = () => {
       editorStore={editorStore}
       locationModal={locationModal}
       categoryModal={categoryModal}
-      hashtag={hashtag}
+      inputTagRef={inputTagRef}
       imagesHook={imagesHook}
       hashtagsHook={hashtagsHook}
       loading={loading}
@@ -159,7 +171,7 @@ const InformationEditorContainer = () => {
       closeLocationModal={closeLocationModal}
       showCategoryModal={showCategoryModal}
       closeCategoryModal={closeCategoryModal}
-      setHashtag={setHashtag}
+      onChangeHashTagHandler={onChangeHashTagHandler}
     />
   );
 };