Merge pull request #375 from mosu-dev/fix#374

Fix#374 프로필 수정 및 등록 버튼 클릭시 disabled 처리 및 spinner 추가

Author: toothlessdev

mosu-app/src/pages/mypage/profile/edit.tsx

@@ -22,6 +22,7 @@ import { ButtonGroupFieldSet } from "@/shared/components/ButtonGroup";
 import { ErrorMessage } from "@/shared/components/FieldMessage/ErrorMessage";
 import { InputFieldSet } from "@/shared/components/Input";
 import { SelectFieldSet } from "@/shared/components/SelectField";
+import { Spinner } from "@/shared/components/Spinner/Spinner";
 import { ForbiddenException, HTTPException, UnauthorizedException } from "@/shared/errors/HTTPException";
 import { logger } from "@/shared/lib/logger";
 import { Button } from "@/shared/ui/button";
@@ -79,7 +80,7 @@ export default function MyPageProfilePage({ profileData }: InferGetServerSidePro
         }
     }, [educationValue, setValue]);
 
-    const { mutate } = useEditProfile();
+    const { isPending, mutate } = useEditProfile();
 
     const onSubmit = handleSubmit(
         (data) => {
@@ -203,8 +204,8 @@ export default function MyPageProfilePage({ profileData }: InferGetServerSidePro
                         )}
                     </div>
 
-                    <Button variant="default" className="my-10 h-[60px] w-full">
-                        변경하기
+                    <Button variant="default" className="my-10 h-[60px] w-full" disabled={isPending}>
+                        {isPending ? <Spinner /> : "프로필 수정하기"}
                     </Button>
                 </section>
             </form>

mosu-app/src/pages/mypage/profile/register.tsx

@@ -22,6 +22,7 @@ import { ButtonGroupFieldSet } from "@/shared/components/ButtonGroup";
 import { ErrorMessage } from "@/shared/components/FieldMessage/ErrorMessage";
 import { InputFieldSet } from "@/shared/components/Input";
 import { SelectFieldSet } from "@/shared/components/SelectField";
+import { Spinner } from "@/shared/components/Spinner/Spinner";
 import { ForbiddenException, HTTPException, UnauthorizedException } from "@/shared/errors/HTTPException";
 import { logger } from "@/shared/lib/logger";
 import { Button } from "@/shared/ui/button";
@@ -77,7 +78,7 @@ export default function MyPageProfilePage({ profileData }: InferGetServerSidePro
         }
     }, [educationValue, setValue]);
 
-    const { mutate } = useRegisterProfile();
+    const { isPending, mutate } = useRegisterProfile();
 
     const onSubmit = handleSubmit(
         (data) => {
@@ -206,8 +207,8 @@ export default function MyPageProfilePage({ profileData }: InferGetServerSidePro
                         )}
                     </div>
 
-                    <Button variant="default" className="my-10 h-[60px] w-full">
-                        등록하기
+                    <Button variant="default" className="my-10 h-[60px] w-full" disabled={isPending}>
+                        {isPending ? <Spinner /> : "등록하기"}
                     </Button>
                 </section>
             </form>