Merge pull request #8 from Team-Ampersand/fix/notice-button-click

🔀 공지사항 중복 게시 해결
Team-Ampersand · Sep 14, 2024 · b5967bc · b5967bc
2 parents 42731ac + 41328d6
commit b5967bc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 6 deletions.
diff --git a/src/components/Notice/atoms/NoticeOptionBtn/index.tsx b/src/components/Notice/atoms/NoticeOptionBtn/index.tsx
@@ -8,6 +8,7 @@ export interface Props {
   borderRadius?: string;
   onClick: () => void;
   type?: 'button' | 'submit' | 'reset';
+  isSubmitting?: boolean;
 }
 
 const NoticeOptionBtn = ({
@@ -18,6 +19,7 @@ const NoticeOptionBtn = ({
   borderRadius,
   onClick,
   type = 'button',
+  isSubmitting,
 }: Props) => {
   return (
     <>
@@ -28,6 +30,7 @@ const NoticeOptionBtn = ({
         border={border}
         borderRadius={borderRadius}
         onClick={() => onClick()}
+        disabled={isSubmitting}
       >
         {children}
       </NoticeOptionButton>

diff --git a/src/components/Notice/molecules/BottomBtnBox/index.tsx b/src/components/Notice/molecules/BottomBtnBox/index.tsx
@@ -4,7 +4,11 @@ import { isNoticeModify, isNoticeWrite } from 'recoilAtoms/recoilAtomContainer';
 import { Palette } from 'styles/globals';
 import * as S from './style';
 
-const BottomBtnBox = () => {
+interface Props {
+  isSubmitting: boolean;
+}
+
+const BottomBtnBox = ({ isSubmitting }: Props) => {
   const setNoticeWrite = useSetRecoilState(isNoticeWrite);
   const setNoticeModify = useSetRecoilState(isNoticeModify);
 
@@ -31,6 +35,7 @@ const BottomBtnBox = () => {
           return;
         }}
         type="submit"
+        isSubmitting={isSubmitting}
       >
         확인
       </NoticeOptionBtn>

diff --git a/src/components/Notice/organisms/NoticeWrite/index.tsx b/src/components/Notice/organisms/NoticeWrite/index.tsx
@@ -21,10 +21,16 @@ import * as S from './style';
 
 const NoticeWrite = () => {
   const router = useRouter();
-  const { register, watch, handleSubmit, setValue, resetField } =
-    useForm<noticeFormType>({
-      defaultValues: { title: '', content: '' },
-    });
+  const {
+    register,
+    watch,
+    handleSubmit,
+    setValue,
+    resetField,
+    formState: { isSubmitting },
+  } = useForm<noticeFormType>({
+    defaultValues: { title: '', content: '' },
+  });
 
   const [imgList, setImgList] = useState<string[]>([]);
   const [postImgList, setPostImgList] = useState<File[]>([]);
@@ -88,7 +94,7 @@ const NoticeWrite = () => {
         data={imgList}
         onDelete={(id: number) => onImgDelete(id)}
       />
-      <BottomBtnBox />
+      <BottomBtnBox isSubmitting={isSubmitting} />
     </S.Layer>
   );
 };