Feature/CDP-200-LoginMain

src/app/(auth)/layout.tsx

@@ -9,7 +9,7 @@ export const metadata = makePageMetadata({
 export default function AuthLayout({ children }: AuthCommonProps) {
   return (
     <div className="flex items-center justify-center min-h-screen bg-background">
-      <div className="flex flex-col gap-20 w-full max-w-[500px]">{children}</div>
+      <div className="flex flex-col  gap-10 w-full max-w-[450px] mx-10">{children}</div>
     </div>
   );
 }

src/app/(auth)/login/page.tsx

@@ -1,4 +1,6 @@
 import { AuthHeader } from "@/components/auth/AuthHeader";
+import { AuthMain } from "@/components/auth/AuthMain";
+import { LoginForm } from "@/components/auth/login/LoginForm";
 import { LoginPageTitle } from "@/components/auth/login/LoginPageTitle";
 import { LoginSubtitle } from "@/components/auth/login/LoginSubtitle";
 import { makePageMetadata } from "@/seo/metadata";
@@ -20,14 +22,9 @@ export default function LoginPage() {
         <LoginSubtitle />
       </AuthHeader>
 
-      <main>
-        {/* TODO: 나중에 LoginMain + AuthCard + LoginForm 구조로 확장 */}
-        <div className="rounded-2xl bg-[var(--color-white)] px-6 py-8 shadow-[var(--shadow-md)]">
-          <p className="t-14-m text-[var(--color-gray-600)]">
-            여기에는 로그인 폼이 들어갈 예정입니다.
-          </p>
-        </div>
-      </main>
+      <AuthMain>
+        <LoginForm />
+      </AuthMain>
     </>
   );
 }

src/components/auth/AuthHeader.tsx

@@ -3,9 +3,9 @@ import type { AuthCommonProps } from "@/types/auth";
 
 export function AuthHeader({ children }: AuthCommonProps) {
   return (
-    <header className="flex flex-col items-center text-center gap-2">
+    <header className="flex flex-col items-center text-center gap-3">
       <AppLogo />
-      <div className="space-y-3">{children}</div>
+      <div>{children}</div>
     </header>
   );
 }

src/components/auth/AuthMain.tsx

@@ -0,0 +1,9 @@
+import type { AuthCommonProps } from "@/types/auth";
+
+export function AuthMain({ children }: AuthCommonProps) {
+  return (
+    <main className="w-full" aria-label="인증 본문">
+      {children}
+    </main>
+  );
+}

src/components/auth/login/LoginForm.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/shared/button";
+import { Icon } from "@/shared/Icon";
+import { Input } from "@/shared/input";
+import { useAuthFormStore } from "@/stores/authForm.store";
+import Link from "next/link";
+import type { ChangeEvent, FormEvent } from "react";
+
+export function LoginForm() {
+  const {
+    email,
+    password,
+    emailError,
+    passwordError,
+    isPasswordVisible,
+    setEmail,
+    setPassword,
+    clearEmailError,
+    clearPasswordError,
+    togglePasswordVisible,
+    validateLogin,
+  } = useAuthFormStore();
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault(); // 기본 form submit 동작 막기
+
+    const isValid = validateLogin();
+    if (!isValid) {
+      // 에러 상태/값 초기화는 스토어에서 이미 처리
+      return;
+    }
+
+    // TODO: 실제 로그인 요청 로직
+    // ex) await login({ email, password });
+  };
+
+  const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setEmail(event.target.value);
+  };
+
+  const handlePasswordChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setPassword(event.target.value);
+  };
+
+  return (
+    <form
+      className={cn(
+        "flex flex-col gap-10 rounded-2xl border border-[var(--color-gray-200)] bg-[var(--color-white)] px-4 py-6",
+        "md:px-6 md:py-8",
+      )}
+      aria-label="로그인 폼"
+      onSubmit={handleSubmit}
+      noValidate
+    >
+      {/* 이메일 필드 */}
+      <div className="flex w-full max-w-[36.6rem] flex-col gap-4 mx-auto">
+        <div className="flex items-center justify-between">
+          <label htmlFor="login-email" className="t-14-m text-[var(--color-gray-700)]">
+            이메일
+          </label>
+
+          {emailError && (
+            <span className="t-12-m text-[var(--color-red-500)]">이메일 정보를 확인해 주세요.</span>
+          )}
+        </div>
+        <Input
+          id="login-email"
+          name="email"
+          type="email"
+          placeholder="이메일을 입력하세요"
+          status={emailError ? "error" : "default"}
+          autoComplete="email"
+          required
+          value={email}
+          onChange={handleEmailChange}
+          onFocus={clearEmailError} // 다시 클릭하면 에러 해제 → 검은 테두리
+        />
+      </div>
+
+      {/* 비밀번호 필드 + 표시 토글 */}
+      <div className="flex w-full max-w-[36.6rem] flex-col gap-4 mx-auto">
+        <div className="flex items-center justify-between">
+          <label htmlFor="login-password" className="t-14-m text-[var(--color-gray-700)]">
+            비밀번호
+          </label>
+
+          {passwordError && (
+            <span className="t-12-m text-[var(--color-red-500)]">비밀번호를 확인해 주세요.</span>
+          )}
+        </div>
+        <div className="relative w-full">
+          <Input
+            id="login-password"
+            name="password"
+            type={isPasswordVisible ? "text" : "password"}
+            status={passwordError ? "error" : "default"}
+            autoComplete="current-password"
+            required
+            className="w-full pr-10"
+            value={password}
+            onChange={handlePasswordChange}
+            onFocus={clearPasswordError} // 다시 클릭하면 에러 해제
+          />
+          {/* 비밀번호 표시/숨김 토글 아이콘 */}
+          <button
+            type="button"
+            className="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer"
+            aria-label={isPasswordVisible ? "비밀번호 숨기기" : "비밀번호 표시"}
+            aria-pressed={isPasswordVisible}
+            onClick={togglePasswordVisible}
+          >
+            <Icon
+              name={isPasswordVisible ? "eyeOff" : "eye"}
+              size={18}
+              className="text-[var(--color-gray-500)]"
+            />
+          </button>
+        </div>
+      </div>
+
+      {/* 로그인 버튼 */}
+      <div className="w-full max-w-[36.6rem] mx-auto">
+        <Button type="submit" preset="signup" bg="basic" className="w-full">
+          로그인
+        </Button>
+      </div>
+
+      {/* 헬퍼 링크: 비밀번호 찾기 / 회원가입 */}
+      <div className="flex w-full max-w-[36.6rem] flex-col gap-4 text-center mx-auto">
+        <p className="t-14-m text-[var(--color-gray-600)]">
+          비밀번호를 잊으셨나요?{" "}
+          <Link
+            href="/forgot-password"
+            className="t-14-m text-[var(--color-gray-900)] underline-offset-2 hover:underline"
+          >
+            비밀번호 찾기
+          </Link>
+        </p>
+        <p className="t-14-m text-[var(--color-gray-600)]">
+          회원이 아니신가요?{" "}
+          <Link
+            href="/signup"
+            className="t-14-m text-[var(--color-gray-900)] underline-offset-2 hover:underline"
+          >
+            회원가입하기
+          </Link>
+        </p>
+      </div>
+
+      {/* 간편 로그인 + 소셜 버튼 */}
+      <div className="flex w-full max-w-[36.6rem] flex-col gap-4 pt-2 mx-auto">
+        <div className="flex items-center gap-4 w-full">
+          <div className="h-px flex-1 bg-[var(--color-gray-200)]" />
+          <span className="t-14-m text-[var(--color-gray-500)]">간편 로그인</span>
+          <div className="h-px flex-1 bg-[var(--color-gray-200)]" />
+        </div>
+
+        <div className="flex w-full flex-col items-center gap-5">
+          <Button type="button" preset="signup" bg="kakao" className="w-full">
+            <span>카카오톡으로 로그인</span>
+          </Button>
+
+          <Button type="button" preset="signup" bg="google" className="w-full">
+            <span>구글로 로그인</span>
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}

src/lib/variants/button.signup.ts

@@ -4,7 +4,7 @@ export const signupButtonVariants = cva(
   [
     // Layout (공통)
     "inline-flex items-center justify-center",
-    "w-[36.6rem] h-[6.2rem] px-[3rem] rounded-lg cursor-pointer",
+    "max-w-[36.6rem] h-[4.6rem] px-[3rem] rounded-lg cursor-pointer",
 
     // Typography (공통)
     "t-16-m",

src/lib/variants/input.auth.ts

@@ -1,17 +1,9 @@
-// src/lib/variants/input.auth.ts
 import { cva, type VariantProps } from "class-variance-authority";
 
-/**
- * 로그인 인풋 컴포넌트의 스타일 variant
- * - 기본: 1px + gray-300
- * - 포커스: 1.5px + gray-900
- * - 에러: 1.5px + danger-600
- * - 에러 상태에서 포커스 시: 포커스 규칙(gray-900)로 복귀
- */
 export const authInputVariants = cva(
   [
     // === 기본 레이아웃 ===
-    "w-[36.6rem] h-[4.6rem] px-6 rounded-lg bg-white t-14-m outline-none",
+    "max-w-[36.6rem] h-[4.6rem] px-6 rounded-lg bg-white t-14-m outline-none",
 
     // === 플레이스홀더 ===
     "placeholder:text-[var(--color-gray-500)]",

src/stores/authForm.store.ts

@@ -0,0 +1,55 @@
+import type { AuthFormState } from "@/types/authForm";
+import { create } from "zustand";
+
+export const useAuthFormStore = create<AuthFormState>((set, get) => ({
+  email: "",
+  password: "",
+  emailError: false,
+  passwordError: false,
+  isPasswordVisible: false,
+
+  setEmail: (value) => set({ email: value }),
+  setPassword: (value) => set({ password: value }),
+
+  clearEmailError: () => set({ emailError: false }),
+  clearPasswordError: () => set({ passwordError: false }),
+
+  togglePasswordVisible: () => set((state) => ({ isPasswordVisible: !state.isPasswordVisible })),
+
+  validateLogin: () => {
+    const { email, password } = get();
+
+    let emailError = false;
+    let passwordError = false;
+
+    // 이메일: 비어 있거나 형식이 올바르지 않으면 에러
+    const trimmedEmail = email.trim();
+    const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail);
+
+    if (!trimmedEmail || !isValidEmail) {
+      emailError = true;
+    }
+
+    // 비밀번호: 6자리 이상 + 특수문자 1개 이상
+    const hasMinLength = password.length >= 6;
+    const hasSpecialChar = /[^A-Za-z0-9]/.test(password);
+
+    if (!hasMinLength || !hasSpecialChar) {
+      passwordError = true;
+    }
+
+    // 하나라도 에러가 있으면 해당 필드 값 초기화 + 에러 플래그 세팅
+    if (emailError || passwordError) {
+      set({
+        email: emailError ? "" : email,
+        password: passwordError ? "" : password,
+        emailError,
+        passwordError,
+      });
+      return false;
+    }
+
+    set({ emailError: false, passwordError: false });
+    return true;
+  },
+}));

src/types/authForm.ts

@@ -0,0 +1,17 @@
+export interface AuthFormState {
+  email: string;
+  password: string;
+  emailError: boolean;
+  passwordError: boolean;
+  isPasswordVisible: boolean;
+
+  setEmail: (value: string) => void;
+  setPassword: (value: string) => void;
+
+  clearEmailError: () => void;
+  clearPasswordError: () => void;
+
+  togglePasswordVisible: () => void;
+
+  validateLogin: () => boolean;
+}