Refactor: 폴더 삭제 시 url /link 로 이동 / SearchInput debounce 적용

Refactor: 폴더 삭제 시 url /link 로 이동 / SearchInput debounce 적용

Author: hongggyelim

components/Folder/AddFolderButton.tsx

@@ -19,7 +19,7 @@ export const AddFolderButton = ({
     <button
       className={
         !isModal
-          ? "w-[100px] mt-auto text-purple100"
+          ? "md:mt-auto xl:mt-0 text-purple100"
           : "fixed-bottom w-[120px] h-[35px] rounded-[20px] bg-purple100 text-white hover:bg-purple50"
       }
       onClick={() => openModal("AddFolderModal")}

components/Search/SearchInput.tsx

@@ -1,27 +1,36 @@
-import { ChangeEvent, FormEvent, useState } from "react";
+import { ChangeEvent, useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import Image from "next/image";
+import useDebounce from "@/hooks/useDebounce";
 
 export const SearchInput = () => {
   const router = useRouter();
   const [value, setValue] = useState("");
 
+  const debouncedValue = useDebounce(value, 200);
+
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
     setValue(e.target.value);
   };
 
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    router.push({
-      pathname: router.pathname,
-      query: { ...router.query, search: value },
-    });
+  useEffect(() => {
+    if (debouncedValue) {
+      router.push({
+        pathname: router.pathname,
+        query: { ...router.query, search: debouncedValue },
+      });
+    }
+  }, [debouncedValue]);
+
+  const handleClick = () => {
     setValue("");
+    router.push("/link");
   };
 
   return (
     <form
-      onSubmit={handleSubmit}
+      onSubmit={(e) => e.preventDefault()}
       className="flex gap-[8px] w-full h-[54px] items-center px-[16px] py-[15px] bg-gray-100 rounded-[10px] md:h-[54px] sm:h-[43px] transition-all"
     >
       <Image
@@ -36,6 +45,15 @@ export const SearchInput = () => {
         placeholder="링크를 검색해 보세요."
         className="flex-grow bg-transparent placeholder:text-gray-500"
       />
+      {value && (
+        <button
+          className="rounded-full bg-white size-6 font-bold text-gray-500 flex items-center justify-center"
+          type="button"
+          onClick={handleClick}
+        >
+          ×
+        </button>
+      )}
     </form>
   );
 };

components/modal/AddModal.tsx

@@ -12,7 +12,7 @@ import { useRouter } from "next/router";
 const AddModal = ({ list, link }: { list: FolderItemType[]; link: string }) => {
   const [selectedId, setSelectedId] = useState<number | null>(null);
   const { closeModal } = useModalStore();
-  const route = useRouter();
+  const router = useRouter();
 
   const handleSubmit = async () => {
     const body = {
@@ -25,7 +25,7 @@ const AddModal = ({ list, link }: { list: FolderItemType[]; link: string }) => {
       try {
         await postLink(body);
         toast.success(toastMessages.success.addLink);
-        route.push(`/link?folder=${selectedId}`);
+        router.push(`/link?folder=${selectedId}`);
       } catch (error) {
         toast.error(toastMessages.error.addLink);
       } finally {

components/modal/DeleteFolderModal.tsx

@@ -4,6 +4,7 @@ import SubmitButton from "../SubMitButton";
 import ModalContainer from "./modalComponents/ModalContainer";
 import toast from "react-hot-toast";
 import toastMessages from "@/lib/toastMessage";
+import { useRouter } from "next/router";
 
 const DeleteFolderModal = ({
   // folderName,
@@ -15,16 +16,17 @@ const DeleteFolderModal = ({
   linkCount: number;
 }) => {
   const { closeModal } = useModalStore();
+  const router = useRouter();
   const handleSubmit = async () => {
     // 폴더 내에 링크 개수 0 일때만 폴더 삭제 가능 -> 링크 1개 이상이면 error toast 띄우고 있음 or 전체 링크 삭제 후 폴더 삭제
-
     if (linkCount !== 0) {
       toast.error(toastMessages.error.deleteNonEmptyFolder);
       closeModal();
     } else {
       try {
         await deleteFolder(folderId);
         toast.success(toastMessages.success.deleteFolder);
+        router.push("/link");
       } catch (error) {
         toast.error(toastMessages.error.deleteFolder);
       } finally {

components/modal/modalComponents/FolderItemRadio.tsx

@@ -1,5 +1,5 @@
-import { bindCls } from "@/lib/utils";
 import { FolderItemType } from "@/types/modalTypes";
+import { bindClass } from "@/util/bindClass";
 import { FaCheck } from "react-icons/fa6";
 
 const FolderItemRadio = ({
@@ -20,7 +20,7 @@ const FolderItemRadio = ({
   };
   return (
     <li
-      className={bindCls(
+      className={bindClass(
         bgColor,
         "w-full p-2 flex h-10 rounded-lg items-center justify-between cursor-pointer"
       )}

components/modal/modalComponents/ModalInput.tsx

@@ -1,4 +1,4 @@
-import { bindCls } from "@/lib/utils";
+import { bindClass } from "@/util/bindClass";
 import { ChangeEvent } from "react";
 
 const ModalInput = ({
@@ -19,7 +19,7 @@ const ModalInput = ({
       id={name}
       value={value}
       onChange={onChange}
-      className={bindCls(
+      className={bindClass(
         "w-full rounded-lg border border-gray300 py-[18px] px-[15px] mb-6 text-black300",
         "placeholder:text-base placeholder:text-gray400",
         "focus:outline-1px focus:outline-purple100"

hooks/useDebounce.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const useDebounce = (value: any, delay: number) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value]);
+
+  return debouncedValue;
+};
+
+export default useDebounce;

hooks/useThrottle.ts

@@ -1,8 +1,3 @@
-// tailwind 동적 스타일을 위한 함수
-export const bindCls = (...cls: string[]) => {
-  return cls.join(" ");
-};
-
 // 데이터나 API에서 이미지 URL이 //로 오는 경우 자동으로 프로토콜 추가
 export const ensureAbsoluteUrl = (url: string) => {
   return url.startsWith("//") ? `https:${url}` : url;

lib/utils.ts

@@ -0,0 +1,4 @@
+// tailwind 동적 스타일을 위한 함수
+export const bindClass = (...cls: string[]) => {
+  return cls.join(" ");
+};