Refactor/#249: 회원가입 페이지 리팩토링

src/api/auth/type.ts

@@ -5,6 +5,7 @@ export interface SignUpFormData {
   passwordCheck: string;
   companyName: string;
 }
+
 export type SignUpRequest = Omit<SignUpFormData, 'passwordCheck'>;
 
 //TODO: 병합 후 수정

src/app/auths/signin/_components/LinkToSignUp.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+const LinkToSignUp = () => {
+  return (
+    <div className="flex-center gap-2">
+      <span>WE WRITE가 처음이신가요?</span>
+      <Link
+        href="/auths/signup"
+        className="text-write-main font-semibold underline"
+      >
+        회원가입
+      </Link>
+    </div>
+  );
+};
+
+export default LinkToSignUp;

src/app/auths/signin/_components/SignInForm.tsx

@@ -0,0 +1,67 @@
+'use client';
+import Button from '@/components/common/Button/Button';
+import InputForm from '@/components/common/Form/InputForm';
+import useBoolean from '@/hooks/useBoolean';
+import { useSignInForm } from '@/hooks/api/auth/useSignInForm';
+import { VisibilityOff, VisibilityOn } from '@public/assets/icons';
+import { signInValidate } from '@/utils/validators/auth';
+
+const SignInForm = () => {
+  const { value: isShowPassword, toggle: toggleIsShowPassword } = useBoolean();
+
+  const { onSubmit, register, handleSubmit, isSubmitting, errors } =
+    useSignInForm();
+
+  return (
+    <form className="flex flex-col gap-6" onSubmit={handleSubmit(onSubmit)}>
+      <InputForm
+        label="아이디"
+        name="email"
+        placeholder="이메일을 입력해주세요."
+        register={register('email', {
+          validate: (value) => signInValidate({ value, name: 'email' }),
+        })}
+        type="email"
+        hasError={!!errors.email}
+        helperText={errors.email?.message}
+      />
+
+      <InputForm
+        name="password"
+        label="비밀번호"
+        placeholder="비밀번호를 입력해주세요."
+        register={register('password', {
+          validate: (value) => signInValidate({ value, name: 'password' }),
+        })}
+        type={isShowPassword ? 'text' : 'password'}
+        hasError={!!errors.password}
+        helperText={errors.password?.message}
+        suffixIcon={
+          <button
+            type="button"
+            className="flex items-center justify-center"
+            onClick={toggleIsShowPassword}
+          >
+            {isShowPassword ? (
+              <VisibilityOn aria-label="show password" fill="currentColor" />
+            ) : (
+              <VisibilityOff aria-label="hide password" fill="currentColor" />
+            )}
+          </button>
+        }
+      />
+
+      <Button
+        role="button"
+        type="submit"
+        color="custom"
+        disabled={isSubmitting || !!errors.email || !!errors.password}
+        className={`${errors.email || errors.password ? 'bg-gray-400' : 'bg-write-main'} font-bold text-white`}
+      >
+        로그인
+      </Button>
+    </form>
+  );
+};
+
+export default SignInForm;

src/app/auths/signin/page.tsx

@@ -1,139 +1,26 @@
-'use client';
-import Button from '@/components/common/Button/Button';
-import InputForm from '@/components/common/Form/InputForm';
+import SignInForm from './_components/SignInForm';
+import getMyInfoOnServer from '@/providers/auth-provider/getMyInfoOnServer';
+import { headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import LinkToSignUp from './_components/LinkToSignUp';
 
-import { VisibilityOff, VisibilityOn } from '@public/assets/icons';
-import { usePostSignin } from '@/hooks/api/auth/usePostSignin';
-import { SigninRequest } from '@/api/auth/type';
+const SignIn = async () => {
+  const { isSignIn } = await getMyInfoOnServer();
+  const referer = (await headers()).get('referer');
 
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-
-import { useEffect } from 'react';
-import { SubmitHandler, useForm } from 'react-hook-form';
-import useBoolean from '@/hooks/useBoolean';
-import { useAuth } from '@/providers/auth-provider/AuthProvider.client';
-import { APP_ROUTES } from '@/constants/appRoutes';
-import useReferer from '@/hooks/useReferer';
-
-const SignIn = () => {
-  const { value: isShowPassword, toggle: toggleIsShowPassword } = useBoolean();
-  const { redirectPath } = useReferer();
-  const router = useRouter();
-  const {
-    register,
-    handleSubmit,
-    setError,
-    formState: { isSubmitting, errors },
-  } = useForm<SigninRequest>();
-  const { mutate: signIn, isPending } = usePostSignin();
-  const { isSignIn } = useAuth();
-  const onSubmit: SubmitHandler<SigninRequest> = (data) => {
-    if (isSubmitting || isPending) return;
-    signIn(data, {
-      onSuccess: () => {
-        router.replace(redirectPath);
-      },
-      onError: (error: Error) => {
-        const errorData = JSON.parse(error.message);
-        if (
-          errorData.code === 'VALIDATION_ERROR' ||
-          errorData.code === 'USER_NOT_FOUND'
-        ) {
-          setError('email', {
-            type: 'manual',
-            message: errorData.message,
-          });
-        }
-        if (errorData.code === 'INVALID_CREDENTIALS') {
-          setError('password', {
-            type: 'manual',
-            message: errorData.message,
-          });
-        }
-      },
-    });
-  };
-  useEffect(() => {
-    if (isSignIn) {
-      router.push(APP_ROUTES.social);
-    }
-  }, []);
   if (isSignIn) {
-    return <div>Loading...</div>;
+    redirect(referer ?? '/');
   }
+
   return (
     <div className="flex h-screen w-full flex-col items-center justify-center">
       <div className="flex max-h-[478px] w-[343px] flex-col gap-10 rounded-3xl bg-white px-4 py-6 sm:px-4 md:w-[608px] md:px-13 lg:max-h-[478px] lg:w-[508px]">
         <h1 className="text-write-main text-center text-xl font-bold">
           로그인
         </h1>
-        <form className="flex flex-col gap-6" onSubmit={handleSubmit(onSubmit)}>
-          <div className="flex flex-col gap-2">
-            <InputForm
-              label="아이디"
-              name="email"
-              type="email"
-              placeholder="이메일을 입력해주세요."
-              register={{
-                ...register('email', { required: '이메일을 입력해주세요.' }),
-              }}
-              helperText={errors.email?.message}
-              hasError={!!errors.email}
-            />
-          </div>
-          <div>
-            <InputForm
-              label="비밀번호"
-              name="password"
-              placeholder="비밀번호를 입력해주세요."
-              register={{
-                ...register('password', {
-                  required: '비밀번호를 입력해주세요.',
-                }),
-              }}
-              hasError={!!errors.password}
-              helperText={errors.password?.message}
-              suffixIcon={
-                <button
-                  type="button"
-                  className="flex items-center justify-center"
-                  onClick={toggleIsShowPassword}
-                >
-                  {isShowPassword ? (
-                    <VisibilityOn
-                      aria-label="show password"
-                      fill="currentColor"
-                    />
-                  ) : (
-                    <VisibilityOff
-                      aria-label="hide password"
-                      fill="currentColor"
-                    />
-                  )}
-                </button>
-              }
-              type={isShowPassword ? 'text' : 'password'}
-            />
-          </div>
-          <Button
-            role="button"
-            type="submit"
-            isDisabled={isPending || !!errors.email || !!errors.password}
-            isLoading={isSubmitting || isPending}
-          >
-            로그인
-          </Button>
-        </form>
-        <div className="flex items-center justify-center gap-2">
-          <span>WE WRITE가 처음이신가요?</span>
-          <Link
-            href="/auths/signup"
-            className="text-write-main font-semibold underline"
-          >
-            회원가입
-          </Link>
-        </div>
+
+        <SignInForm />
+        <LinkToSignUp />
       </div>
     </div>
   );

src/app/auths/signup/_components/LinkToSignIn.tsx

@@ -0,0 +1,17 @@
+import { APP_ROUTES } from '@/constants/appRoutes';
+import Link from 'next/link';
+
+const LinkToSignIn = () => {
+  return (
+    <div className="flex-center gap-2">
+      <span>이미 회원이신가요?</span>
+      <Link
+        href={APP_ROUTES.signin}
+        className="text-write-main font-semibold underline"
+      >
+        로그인
+      </Link>
+    </div>
+  );
+};
+export default LinkToSignIn;