[feat] add auth layout

src/app/(user-access)/AuthLayout.module.css

@@ -0,0 +1,51 @@
+.authContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  width: 100%;
+  background-color: var(--white);
+}
+
+.authContent {
+  width: 100%;
+  max-width: 400px;
+  box-sizing: border-box;
+  display: flex;
+
+  justify-content: center;
+  background-color: var(--white);
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 16px 0;
+}
+
+.logo {
+  width: 100%;
+  height: auto;
+}
+
+.greeting {
+  margin-top: 16px;
+  font-size: 20px;
+  text-align: center;
+}
+@media screen and (min-width: 768px) {
+  .authContent {
+    max-width: 351px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .authContent {
+    max-width: 520px;
+  }
+}

src/app/(user-access)/AuthLayout.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import styles from './AuthLayout.module.css';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+
+interface AuthLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function AuthLayout({ children }: AuthLayoutProps) {
+  const router = useRouter();
+
+  return (
+    <div className={styles.authContainer}>
+      <div className={styles.logoContainer}>
+        <Image
+          src="/images/logo_main.svg"
+          alt="로고"
+          width={100}
+          height={100}
+          className={styles.logo}
+          onClick={() => router.push('/')}
+          style={{ cursor: 'pointer' }}
+        />
+      </div>
+      <div className={styles.authContent}>{children}</div>
+    </div>
+  );
+}

src/app/(user-access)/login/loginPage.module.css

@@ -4,7 +4,6 @@
   gap: 18px;
   width: 100%;
   max-width: 400px;
-  margin: 0 auto;
 }
 
 .inputWrapper {
@@ -20,6 +19,7 @@
 }
 
 .input {
+  width: 100%;
   padding: 8px;
   border: 1px solid var(--gray-300);
   border-radius: 8px;
@@ -39,28 +39,13 @@
   margin-top: 10px;
 }
 
-.logoContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 16px 0;
-  margin-top: 209px;
-}
-
-.logo {
-  width: 50%;
-  height: auto;
+.disabled {
+  background-color: var(--gray-400);
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .greeting {
-  margin-top: 16px;
   font-size: 20px;
   text-align: center;
 }
-
-.disabled {
-  background-color: var(--gray-400);
-  cursor: not-allowed;
-  opacity: 0.5;
-}

src/app/(user-access)/login/page.tsx

@@ -7,8 +7,8 @@ import useAuthStore from '@/store/authStore';
 import Button from '@/components/Button';
 import styles from './loginPage.module.css';
 import axiosInstance from '@/lib/axiosInstance';
-import Image from 'next/image';
 import { ERROR_MESSAGES } from '@/constants/message';
+import AuthLayout from '@/app/(user-access)/AuthLayout';
 
 type LoginFormInputs = {
   email: string;
@@ -21,6 +21,7 @@ type CustomUseFormReturn<TFieldValues extends FieldValues = FieldValues> =
       isValid: boolean;
     };
   };
+
 export default function LoginPage() {
   const {
     register,
@@ -47,85 +48,74 @@ export default function LoginPage() {
   };
 
   return (
-    <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      <div className={styles.inputWrapper}>
-        <div className={styles.logoContainer}>
-          <Image
-            src="/images/logo_main.svg"
-            alt="로고"
-            width={100}
-            height={100}
-            className={styles.logo}
-            onClick={() => router.push('/')}
-            style={{ cursor: 'pointer' }}
-          />
+    <AuthLayout>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.inputWrapper}>
           <p className={styles.greeting}>오늘도 만나서 반가워요!</p>
+          <label htmlFor="email" className={styles.label}>
+            이메일
+          </label>
+          <input
+            id="email"
+            type="email"
+            className={`${styles.input} ${errors.email ? styles.inputError : ''}`}
+            {...register('email', {
+              required: ERROR_MESSAGES.REQUIRED_EMAIL,
+              pattern: {
+                value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+                message: ERROR_MESSAGES.INVALID_EMAIL,
+              },
+            })}
+          />
+          {errors.email && (
+            <span className={styles.errorMessage}>{errors.email.message}</span>
+          )}
         </div>
 
-        <label htmlFor="email" className={styles.label}>
-          이메일
-        </label>
-        <input
-          id="email"
-          type="email"
-          className={`${styles.input} ${errors.email ? styles.inputError : ''}`}
-          {...register('email', {
-            required: ERROR_MESSAGES.REQUIRED_EMAIL,
-            pattern: {
-              value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
-              message: ERROR_MESSAGES.INVALID_EMAIL,
-            },
-          })}
-        />
-        {errors.email && (
-          <span className={styles.errorMessage}>{errors.email.message}</span>
-        )}
-      </div>
-
-      <div className={styles.inputWrapper}>
-        <label htmlFor="password" className={styles.label}>
-          비밀번호
-        </label>
-        <input
-          id="password"
-          type="password"
-          className={`${styles.input} ${errors.password ? styles.inputError : ''}`}
-          {...register('password', {
-            required: ERROR_MESSAGES.PASSWORD_REQUIRE,
-            minLength: {
-              value: 8,
-              message: ERROR_MESSAGES.PASSWORD_TOO_SHORT,
-            },
-          })}
-        />
-        {errors.password && (
-          <p className={styles.errorMessage}>{errors.password.message}</p>
-        )}
-      </div>
-
-      <Button
-        type="submit"
-        disabled={!isValid}
-        className={!isValid ? styles.disabled : ''}
-        style={{ height: '40px' }}
-      >
-        로그인
-      </Button>
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
-        <p>
-          회원이 아니신가요?{' '}
-          <span
-            style={{
-              color: 'var(--violet)',
-              textDecoration: 'underline',
-              cursor: 'pointer',
-            }}
-            onClick={() => router.push('/signup')}
-          >
-            회원가입하기
-          </span>{' '}
-        </p>
-      </div>
-    </form>
+        <div className={styles.inputWrapper}>
+          <label htmlFor="password" className={styles.label}>
+            비밀번호
+          </label>
+          <input
+            id="password"
+            type="password"
+            className={`${styles.input} ${errors.password ? styles.inputError : ''}`}
+            {...register('password', {
+              required: ERROR_MESSAGES.PASSWORD_REQUIRE,
+              minLength: {
+                value: 8,
+                message: ERROR_MESSAGES.PASSWORD_TOO_SHORT,
+              },
+            })}
+          />
+          {errors.password && (
+            <p className={styles.errorMessage}>{errors.password.message}</p>
+          )}
+        </div>
+        <Button
+          type="submit"
+          disabled={!isValid}
+          className={!isValid ? styles.disabled : ''}
+          style={{ height: '40px' }}
+        >
+          로그인
+        </Button>
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <p>
+            회원이 아니신가요?{' '}
+            <span
+              style={{
+                color: 'var(--violet)',
+                textDecoration: 'underline',
+                cursor: 'pointer',
+              }}
+              onClick={() => router.push('/signup')}
+            >
+              회원가입하기
+            </span>{' '}
+          </p>
+        </div>
+      </form>
+    </AuthLayout>
   );
 }