diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 5b85a2bc..d3432cef 100644
--- 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() {
} />
} />
+ } />
+ } />
} />
} />
} />
diff --git a/frontend/src/pages/MessagePage/BlockModal/BlockModal.tsx b/frontend/src/pages/MessagePage/BlockModal/BlockModal.tsx
index b72706f2..97ac28d0 100644
--- 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) =>
updateBlocked(nickname)}>
차단하기
diff --git a/frontend/src/pages/MessagePage/FriendsModal/FriendsModal.tsx b/frontend/src/pages/MessagePage/FriendsModal/FriendsModal.tsx
index f5e15366..cb93f992 100644
--- 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)
친구추가
diff --git a/frontend/src/pages/SignInPage/index.tsx b/frontend/src/pages/SignInPage/index.tsx
new file mode 100644
index 00000000..734fc85a
--- /dev/null
+++ 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) => {
+ setInfo({
+ ...info,
+ [e.target.name]: e.target.value,
+ });
+ };
+
+ const handleSignIn = () => {
+ console.log('signin click');
+ signIn(info);
+ };
+
+ return (
+
+
+ GhostPong
+
+
+ Login to continue
+
+
+
+
+ Log in
+
+
+ );
+}
diff --git a/frontend/src/pages/SignUpPage/index.tsx b/frontend/src/pages/SignUpPage/index.tsx
new file mode 100644
index 00000000..33983699
--- /dev/null
+++ 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) => {
+ 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 (
+
+
+ GhostPong
+
+
+ Welcome to GhostPong !
+
+
+
+
+
+
+ Sign up
+
+
+ );
+}
diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts
index 912d153c..c59b70c5 100644
--- 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';