[FE] fix: 리뷰, 꿀조합 작성 함수 디바운스 적용 (#644)

woowacourse-teams · Sep 15, 2023 · 4ca93de · 4ca93de
1 parent b17c35b
commit 4ca93de
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/frontend/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx b/frontend/src/components/Recipe/RecipeRegisterForm/RecipeRegisterForm.tsx
@@ -7,7 +7,7 @@ import RecipeNameInput from '../RecipeNameInput/RecipeNameInput';
 import RecipeUsedProducts from '../RecipeUsedProducts/RecipeUsedProducts';
 
 import { ImageUploader, SvgIcon } from '@/components/Common';
-import { useImageUploader, useFormData } from '@/hooks/common';
+import { useImageUploader, useFormData, useTimeout } from '@/hooks/common';
 import { useRecipeFormValueContext, useRecipeFormActionContext } from '@/hooks/context';
 import { useRecipeRegisterFormMutation } from '@/hooks/queries/recipe';
 import type { RecipeRequest } from '@/types/recipe';
@@ -61,6 +61,8 @@ const RecipeRegisterForm = ({ closeRecipeDialog }: RecipeRegisterFormProps) => {
     });
   };
 
+  const [debouncedRecipeSubmit] = useTimeout(handleRecipeFormSubmit, 200);
+
   return (
     <RecipeRegisterFormContainer>
       <RecipeHeading tabIndex={0}>나만의 꿀조합 만들기🍯</RecipeHeading>
@@ -69,7 +71,7 @@ const RecipeRegisterForm = ({ closeRecipeDialog }: RecipeRegisterFormProps) => {
       </CloseButton>
       <Divider />
       <Spacing size={36} />
-      <form onSubmit={handleRecipeFormSubmit}>
+      <form onSubmit={debouncedRecipeSubmit}>
         <RecipeNameInput recipeName={recipeFormValue.title} />
         <Spacing size={40} />
         <RecipeUsedProducts />

diff --git a/frontend/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx b/frontend/src/components/Review/ReviewRegisterForm/ReviewRegisterForm.tsx
@@ -10,7 +10,7 @@ import StarRate from '../StarRate/StarRate';
 import { ImageUploader, SvgIcon } from '@/components/Common';
 import { ProductOverviewItem } from '@/components/Product';
 import { MIN_DISPLAYED_TAGS_LENGTH } from '@/constants';
-import { useFormData, useImageUploader, useScroll } from '@/hooks/common';
+import { useFormData, useImageUploader, useScroll, useTimeout } from '@/hooks/common';
 import { useReviewFormActionContext, useReviewFormValueContext } from '@/hooks/context';
 import { useProductDetailQuery } from '@/hooks/queries/product';
 import { useReviewRegisterFormMutation } from '@/hooks/queries/review';
@@ -77,6 +77,8 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe
     });
   };
 
+  const [debouncedReviewSubmit] = useTimeout(handleSubmit, 200);
+
   return (
     <ReviewRegisterFormContainer>
       <ReviewHeading tabIndex={0}>리뷰 작성</ReviewHeading>
@@ -88,7 +90,7 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe
         <ProductOverviewItem name={productDetail.name} image={productDetail.image} />
       </ProductOverviewItemWrapper>
       <Divider customHeight="4px" variant="disabled" />
-      <RegisterForm onSubmit={handleSubmit}>
+      <RegisterForm onSubmit={debouncedReviewSubmit}>
         <ReviewImageUploaderContainer>
           <Heading as="h2" size="xl" tabIndex={0}>
             구매한 상품 사진이 있다면 올려주세요.
@@ -110,7 +112,7 @@ const ReviewRegisterForm = ({ productId, targetRef, closeReviewDialog, initTabMe
         <RebuyCheckbox />
         <Spacing size={16} />
         <Text size="sm" color={theme.textColors.disabled}>
-          [작성시 유의사항] 신뢰성 확보에 저해되는 게시물은 삭제하거나 보이지 않게 할 수 있습니다.{' '}
+          [작성시 유의사항] 신뢰성 확보에 저해되는 게시물은 삭제하거나 보이지 않게 할 수 있습니다.
         </Text>
         <Spacing size={10} />
         <FormButton type="submit" customWidth="100%" customHeight="60px" size="xl" weight="bold" disabled={!isValid}>