[feat] add auth layout

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

@@ -0,0 +1,41 @@
+.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;
+}
+@media screen and (min-width: 768px) {
+  .authContent {
+    max-width: 351px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .authContent {
+    max-width: 520px;
+  }
+}

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

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import styles from './layout.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,7 +7,6 @@ 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';
 
 type LoginFormInputs = {
@@ -21,6 +20,7 @@ type CustomUseFormReturn<TFieldValues extends FieldValues = FieldValues> =
       isValid: boolean;
     };
   };
+
 export default function LoginPage() {
   const {
     register,
@@ -35,7 +35,7 @@ export default function LoginPage() {
 
   const onSubmit = async (data: LoginFormInputs) => {
     try {
-      const response = await axiosInstance.post('/login', data);
+      const response = await axiosInstance.post('/auth/login', data);
       const { accessToken } = response.data;
 
       setAccessToken(accessToken);
@@ -49,19 +49,7 @@ 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' }}
-          />
-          <p className={styles.greeting}>오늘도 만나서 반가워요!</p>
-        </div>
-
+        <p className={styles.greeting}>오늘도 만나서 반가워요!</p>
         <label htmlFor="email" className={styles.label}>
           이메일
         </label>
@@ -102,7 +90,6 @@ export default function LoginPage() {
           <p className={styles.errorMessage}>{errors.password.message}</p>
         )}
       </div>
-
       <Button
         type="submit"
         disabled={!isValid}