Merge pull request #356 from TripInfoWeb/dev_gathering

fix: 태그 입력시 2글자 이상 입력되게 처리
TripInfoWeb · Sep 21, 2024 · 74d1fb5 · 74d1fb5
2 parents bdb4d3b + ad0f7e8
commit 74d1fb5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/src/components/gathering/createUpdate/editor/GatheringEditorHashTag.tsx b/src/components/gathering/createUpdate/editor/GatheringEditorHashTag.tsx
@@ -30,7 +30,7 @@ const GatheringEditorHashTag = ({
         </div>
         <div className="relative w-full">
           <input
-            placeholder="해시태그로 키워드를 써보세요!"
+            placeholder="태그로 키워드를 써보세요! (2 ~ 15자)"
             className="h-[3.25rem] w-full rounded-[3rem] px-[1rem] pr-[3rem] outline outline-[1px] outline-offset-[-1px] outline-[#E3E3E3]" // 오른쪽 padding 추가
             onKeyUp={onChangeHashTagHandler}
             disabled={tags.length > 9}

diff --git a/src/containers/gathering/createUpdate/editor/GatheringEditorHashTagContainer.tsx b/src/containers/gathering/createUpdate/editor/GatheringEditorHashTagContainer.tsx
@@ -24,6 +24,10 @@ const onChangeHashTagHandler = (
       .replace(/,$/, "")
       .trim();
     if (tempTag === "") return;
+    if (tempTag.length < 2) {
+      (inputTagRef.current as HTMLInputElement).value = "";
+      return;
+    }
     setTags((prev) => Array.from(new Set([...prev, tempTag])));
     (inputTagRef.current as HTMLInputElement).value = "";
     formContext.setValue("hashtags", Array.from(new Set([...tags, tempTag])));
@@ -36,7 +40,11 @@ const onChangeHashTagHandler = (
       const tempTag = (inputTagRef.current as HTMLInputElement).value
         .replace(/,$/, "")
         .trim();
-      if (tempTag === "") return;
+    if (tempTag === "") return;
+    if (tempTag.length < 2) {
+      (inputTagRef.current as HTMLInputElement).value = "";
+      return;
+    }
       setTags((prev) => Array.from(new Set([...prev, tempTag])));
       (inputTagRef.current as HTMLInputElement).value = "";
       formContext.setValue("hashtags", Array.from(new Set([...tags, tempTag])));

diff --git a/src/containers/gathering/read/GatheringSearchContainer.tsx b/src/containers/gathering/read/GatheringSearchContainer.tsx
@@ -1,10 +1,12 @@
 import GatheringSearch from "@/components/gathering/read/GatheringSearch";
+import useToastifyStore from "@/store/toastifyStore";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 
 interface IGatheringSearchContainer {}
 const GatheringSearchContainer = (props: IGatheringSearchContainer) => {
   const searchParams = useSearchParams();
+  const toastifyStore = useToastifyStore();
   const [searchValue, setSearchValue] = useState<string>(
     searchParams.get("search") || searchParams.get("tagName") || "",
   );
@@ -17,7 +19,6 @@ const GatheringSearchContainer = (props: IGatheringSearchContainer) => {
     const url = new URL(window.location.href);
     const params = new URLSearchParams(url.search);
     if (dropdownValue == "태그") {
-      // 태그 검색일 경우
       params.set("tagName", searchValue);
       params.delete("page");
       url.search = params.toString();
@@ -36,6 +37,7 @@ const GatheringSearchContainer = (props: IGatheringSearchContainer) => {
 
   const dropDownHandler = (value: string) => {
     setDropdownValue(value);
+    if (value == dropdownValue) return;
     const url = new URL(window.location.href);
     const params = new URLSearchParams(url.search);
     params.delete("page");
@@ -47,8 +49,10 @@ const GatheringSearchContainer = (props: IGatheringSearchContainer) => {
     }
     params.delete("search");
     // 태그 검색인 경우 글자 수 제한이 15글자이므로 글자를 제거해주는 작업
-    setSearchValue(searchValue.trim().slice(0, 15));
-    params.set("tagName", searchValue.trim().slice(0, 15) || "");
+    let _text = searchValue.trim().slice(0, 15) || "";
+    if (_text.length < 2) _text = "";
+    setSearchValue(_text);
+    params.set("tagName", _text);
     url.search = params.toString();
     window.history.pushState({}, "", url.toString());
   };