fix: handles register loading

Author: velopert

src/components/common/RoundButton.tsx

@@ -78,6 +78,9 @@ const RoundButtonBlock = styled.button<RoundButtonBlockProps>`
     box-shadow: 0px 2px 12px #00000030;
   }
   cursor: pointer;
+  &:disabled {
+    background: ${themedPalette.bg_element2};
+  }
 `;
 
 type ButtonProps = React.DetailedHTMLProps<

src/components/register/RegisterForm.tsx

@@ -35,13 +35,15 @@ export interface RegisterFormProps {
     displayName: string;
     username: string;
   } | null;
+  loading: boolean;
 }
 
 const RegisterForm: React.FC<RegisterFormProps> = ({
   onSubmit,
   fixedEmail,
   error,
   defaultInfo,
+  loading,
 }) => {
   const [form, onChange] = useInputs({
     displayName: defaultInfo ? defaultInfo.displayName : '',
@@ -99,6 +101,7 @@ const RegisterForm: React.FC<RegisterFormProps> = ({
               onSubmit({ ...form, email: fixedEmail || form.email })
             }
             size="LARGE"
+            disabled={loading}
           >
             다음
           </RoundButton>

src/containers/register/RegisterFormContainer.tsx

@@ -28,6 +28,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
     ignoreQueryPrefix: true,
   });
   const client = useApolloClient();
+  const [loading, setLoading] = useState(false);
 
   const [error, setError] = useState<null | string>(null);
   const [socialProfile, setSocialProfile] = useState<SocialProfile | null>(
@@ -97,6 +98,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
     }
 
     try {
+      setLoading(true);
       if (query.code) {
         // local email register
         const formWithoutEmail = { ...form } as Partial<RegisterFormType>;
@@ -114,6 +116,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
         });
       }
     } catch (e) {
+      setLoading(false);
       if ((e as any).response.status === 409) {
         setError('이미 존재하는 아이디입니다.');
         return;
@@ -139,6 +142,7 @@ const RegisterFormContainer: React.FC<RegisterFormContainerProps> = ({
 
   return (
     <RegisterForm
+      loading={loading}
       onSubmit={onSubmit}
       fixedEmail={
         (registerToken && registerToken.email) ||