✨ [Feature] Update login/signup pages (#623)

GhostPangPang · Aug 24, 2023 · 513ebc8 · 513ebc8
1 parent 021ac42
commit 513ebc8
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 4 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -23,6 +23,8 @@ import { TwoFactorLoginPage } from './pages/TwoFactorLoginPage';
 import { ProtectedRoute } from './ProtectedRoute';
 import { DebugObserver } from './DebugObserver';
 import { RouteErrorPage } from './pages/RouteErrorPage';
+import SignInPage from './pages/SignInPage';
+import SignUpPage from './pages/SignUpPage';
 
 function App() {
   return (
@@ -52,6 +54,8 @@ function App() {
 
                 <Route path="/pre" element={<PrePage />} />
                 <Route path="/auth?/" element={<AuthHandler />} />
+                <Route path="/auth/signin" element={<SignInPage />} />
+                <Route path="/auth/signup" element={<SignUpPage />} />
                 <Route path="/auth/register" element={<RegisterPage />} />
                 <Route path="/auth/2fa" element={<TwoFactorLoginPage />} />
                 <Route path="/error" element={<RouteErrorPage code={404} />} />

diff --git a/frontend/src/pages/MessagePage/BlockModal/BlockModal.tsx b/frontend/src/pages/MessagePage/BlockModal/BlockModal.tsx
@@ -43,10 +43,10 @@ export const BlockModal = ({ isOpen, onClose }: Omit<ModalProps, 'children'>) =>
           <GameInput
             value={nickname}
             onChange={handleNicknameChange}
-            sizes="lg"
+            sizes="sm"
             color="secondary"
             placeholder="플레이어 닉네임"
-            style={{ flexGrow: 1 }}
+            style={{ flexGrow: 1, width: '24rem' }}
           />
           <GameButton size="sm" style={{ flexGrow: 0 }} onClick={() => updateBlocked(nickname)}>
             차단하기

diff --git a/frontend/src/pages/MessagePage/FriendsModal/FriendsModal.tsx b/frontend/src/pages/MessagePage/FriendsModal/FriendsModal.tsx
@@ -52,10 +52,10 @@ export const FriendsModal = ({ isOpen, onClose }: Omit<ModalProps, 'children'>)
           <GameInput
             value={nickname}
             onChange={handleNicknameChange}
-            sizes="lg"
+            sizes="sm"
             color="secondary"
             placeholder="플레이어 닉네임"
-            style={{ flexGrow: 1 }}
+            style={{ flexGrow: 1, width: '24rem' }}
           />
           <GameButton size="sm" style={{ flexGrow: 0 }} onClick={handleFriendRequest}>
             친구추가

diff --git a/frontend/src/pages/SignInPage/index.tsx b/frontend/src/pages/SignInPage/index.tsx
@@ -0,0 +1,78 @@
+import { GameButton, GameInput, Grid, Text } from '@/common';
+import { ApiError, ApiResponse, post } from '@/libs/api';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+
+type SignInInfo = {
+  email: string;
+  password: string;
+};
+
+const postSignIn = async (info: SignInInfo) => {
+  return await post('auth/login/local', info);
+};
+
+export default function SignInPage() {
+  const [info, setInfo] = useState({
+    email: '',
+    password: '',
+  });
+  const { mutate: signIn } = useMutation(postSignIn, {
+    onSuccess: (message: ApiResponse) => {
+      console.log('login', message);
+    },
+    onError: (error: ApiError) => {
+      alert(error.message);
+    },
+  });
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInfo({
+      ...info,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSignIn = () => {
+    console.log('signin click');
+    signIn(info);
+  };
+
+  return (
+    <Grid
+      as="section"
+      container="flex"
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      rowGap={1}
+      size={{ height: '100%' }}
+    >
+      <Text as="h1" fontFamily="game" size="xxxl" weight="black">
+        GhostPong
+      </Text>
+      <Text as="h1" size="sm" color="gray100" style={{ marginBottom: '1rem' }}>
+        Login to continue
+      </Text>
+      <GameInput
+        name="email"
+        sizes="lg"
+        color="secondary"
+        placeholder="email"
+        value={info.email}
+        onChange={handleInput}
+      />
+      <GameInput
+        name="password"
+        sizes="lg"
+        color="secondary"
+        placeholder="password"
+        value={info.password}
+        onChange={handleInput}
+      />
+      <GameButton size="lg" color="primary" onClick={handleSignIn}>
+        Log in
+      </GameButton>
+    </Grid>
+  );
+}
diff --git a/frontend/src/pages/SignUpPage/index.tsx b/frontend/src/pages/SignUpPage/index.tsx
@@ -0,0 +1,123 @@
+import { GameButton, GameInput, Grid, Text } from '@/common';
+import { ApiError, ApiResponse, post } from '@/libs/api';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+
+type SignUpInfo = {
+  email: string;
+  nickname: string;
+  password: string;
+};
+
+const postSignUp = async ({ email, nickname, password }: SignUpInfo) => {
+  return await post('auth/signup/local', {
+    email,
+    nickname,
+    password,
+  });
+};
+
+export default function SignUpPage() {
+  const [info, setInfo] = useState({
+    email: '',
+    nickname: '',
+    password: '',
+    passwordcheck: '',
+  });
+  const { mutate: signUp } = useMutation(postSignUp, {
+    onSuccess: (message: ApiResponse) => {
+      console.log('signup', message);
+    },
+    onError: (error: ApiError) => {
+      alert(error.message);
+    },
+  });
+
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInfo({
+      ...info,
+      [e.target.name]: e.target.value,
+    });
+    console.log(info);
+  };
+
+  const handleSignUp = () => {
+    console.log('signup click');
+    if (info.email === '' || info.nickname === '' || info.password === '' || info.passwordcheck === '') {
+      alert('정보를 입력해주세요.');
+      console.log(info);
+      return;
+    }
+    if (info.password !== info.passwordcheck) {
+      alert('비밀번호가 일치하지 않습니다.');
+      setInfo({
+        ...info,
+        password: '',
+        passwordcheck: '',
+      });
+      return;
+    }
+    signUp(info);
+  };
+
+  return (
+    <Grid
+      as="section"
+      container="flex"
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      rowGap={1}
+      size={{ height: '100%' }}
+    >
+      <Text as="h1" fontFamily="game" size="xxxl" weight="black">
+        GhostPong
+      </Text>
+      <Text as="h1" size="sm" color="gray100" style={{ marginBottom: '1rem' }}>
+        Welcome to GhostPong !
+      </Text>
+      <GameInput
+        name="email"
+        sizes="lg"
+        color="secondary"
+        placeholder="email"
+        value={info.email}
+        onChange={handleInput}
+      />
+      <GameInput
+        name="nickname"
+        sizes="lg"
+        color="secondary"
+        placeholder="nickname"
+        value={info.nickname}
+        onChange={handleInput}
+      />
+      <GameInput
+        name="password"
+        type="password"
+        sizes="lg"
+        color="secondary"
+        placeholder="password"
+        value={info.password}
+        onChange={handleInput}
+      />
+      <GameInput
+        name="passwordcheck"
+        type="password"
+        sizes="lg"
+        color="secondary"
+        placeholder="password check"
+        value={info.passwordcheck}
+        onChange={handleInput}
+      />
+      <GameButton
+        size="lg"
+        color="primary"
+        onClick={handleSignUp}
+        style={{ marginBottom: '1.5rem', marginTop: '1rem' }}
+      >
+        Sign up
+      </GameButton>
+    </Grid>
+  );
+}
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
@@ -8,3 +8,5 @@ export * from './MessagePage';
 export * from './PrePage';
 export * from './ProfilePage';
 export * from './RegisterPage';
+export * from './SignInPage';
+export * from './SignUpPage';