fix: signUp, signIn style

src/pages/SignInPage.tsx

@@ -1,4 +1,4 @@
-import { Button, PasswordInput, TextInput } from '@mantine/core';
+import { Button, Container, PasswordInput, TextInput } from '@mantine/core';
 import { useState } from 'react';
 import useUser from '../hooks/useUser';
 import { Circles } from 'react-loader-spinner';
@@ -28,23 +28,26 @@ function SignInPage() {
           <Circles />
         </>
       ) : (
-        <>
+        <Container size="xs">
           <h1>Sign In</h1>
           {error && <p style={{ color: 'red' }}>{error}</p>}
           <TextInput
             label="Login ID"
             value={loginId}
             onChange={(event) => setLoginId(event.currentTarget.value)}
             required
+            style={{ marginBottom: 5 }}
           />
           <PasswordInput
             label="Password"
             value={password}
             onChange={(event) => setPassword(event.currentTarget.value)}
             required
           />
-          <Button onClick={handleLogin}>Sign In</Button>
-        </>
+          <Button onClick={handleLogin} style={{ marginTop: 20 }}>
+            Sign In
+          </Button>
+        </Container>
       )}
     </>
   );

src/pages/SignUpPage.tsx

@@ -1,16 +1,26 @@
-import { Button, PasswordInput, TextInput } from '@mantine/core';
+import { Button, Container, PasswordInput, TextInput } from '@mantine/core';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { register } from '../api/auth';
+import Swal from 'sweetalert2';
 
 function SignUpPage() {
   const [name, setName] = useState('');
   const [registerId, setRegisterId] = useState('');
   const [password, setPassword] = useState('');
+  const [passwordConfirm, setPasswordConfirm] = useState('');
   const [error, setError] = useState('');
   const navigate = useNavigate();
 
   const handleSignUp = async () => {
+    if (password !== passwordConfirm) {
+      Swal.fire({
+        title: 'Password not match',
+        text: 'please enter again',
+        icon: 'error',
+      });
+      return;
+    }
     try {
       const response = await register({ name, registerId, password });
       if (response.message) {
@@ -20,35 +30,49 @@ function SignUpPage() {
       }
     } catch (err: any) {
       setError(
-        'Sign up failed: ' + (err.response?.data?.message || err.message),
+        'Sign up failed: ' + (err.response?.data?.message || err.message)
       );
     }
   };
 
   return (
-    <>
+    <Container size="xs">
       <h1>Sign Up</h1>
       {error && <p style={{ color: 'red' }}>{error}</p>}
       <TextInput
         label="Name"
         value={name}
         onChange={(event) => setName(event.currentTarget.value)}
         required
+        style={{ marginBottom: 5 }}
       />
       <TextInput
         label="Register ID"
         value={registerId}
         onChange={(event) => setRegisterId(event.currentTarget.value)}
         required
+        style={{ marginBottom: 5 }}
       />
       <PasswordInput
         label="Password"
         value={password}
         onChange={(event) => setPassword(event.currentTarget.value)}
         required
+        style={{ marginBottom: 5 }}
+        placeholder="(6자리 이상)"
+      />
+      <PasswordInput
+        label="Password Confirm"
+        value={passwordConfirm}
+        onChange={(event) => setPasswordConfirm(event.currentTarget.value)}
+        required
+        style={{ marginBottom: 5 }}
+        placeholder="(6자리 이상)"
       />
-      <Button onClick={handleSignUp}>Sign Up</Button>
-    </>
+      <Button onClick={handleSignUp} style={{ marginTop: 15 }}>
+        Sign Up
+      </Button>
+    </Container>
   );
 }