From 09643332f2e329cffabb91842f9fa5e15820700f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=AF=BC=ED=97=8C?= <min815371@gmail.com>
Date: Tue, 16 Jun 2026 14:33:23 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20front:=20=EC=9D=B8=EC=A6=9D(auth)=20?=
 =?UTF-8?q?=ED=94=BC=EC=B2=98=20=EC=B6=94=EA=B0=80=20=E2=80=94=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=ED=8F=BC/=ED=9B=85/=EC=9E=84=EC=8B=9C=20m?=
 =?UTF-8?q?utation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../features/auth/components/LoginForm.tsx    | 60 +++++++++++++++++++
 front/src/features/auth/hooks/useLogin.ts     | 55 +++++++++++++++++
 .../features/auth/hooks/useLoginMutation.ts   | 20 +++++++
 front/src/features/auth/index.ts              |  1 +
 4 files changed, 136 insertions(+)
 create mode 100644 front/src/features/auth/components/LoginForm.tsx
 create mode 100644 front/src/features/auth/hooks/useLogin.ts
 create mode 100644 front/src/features/auth/hooks/useLoginMutation.ts
 create mode 100644 front/src/features/auth/index.ts

diff --git a/front/src/features/auth/components/LoginForm.tsx b/front/src/features/auth/components/LoginForm.tsx
new file mode 100644
index 0000000..403c1c4
--- /dev/null
+++ b/front/src/features/auth/components/LoginForm.tsx
@@ -0,0 +1,60 @@
+import { Button, Input } from '@/components'
+import { useLogin } from '@/features/auth/hooks/useLogin'
+
+const inputClassName = 'h-12 rounded-md px-4 text-base'
+
+export function LoginForm() {
+  const {
+    id,
+    password,
+    errorMessage,
+    isLoading,
+    onIdChange,
+    onPasswordChange,
+    onLogin,
+  } = useLogin()
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        onLogin()
+      }}
+      className="flex w-full flex-col justify-center gap-6"
+    >
+      <div className="flex flex-col gap-3">
+        <Input
+          type="text"
+          aria-label="아이디"
+          placeholder="아이디를 입력해주세요."
+          value={id}
+          onChange={(e) => onIdChange(e.target.value)}
+          autoComplete="username"
+          className={inputClassName}
+        />
+        <Input
+          type="password"
+          aria-label="비밀번호"
+          placeholder="비밀번호를 입력해주세요."
+          value={password}
+          onChange={(e) => onPasswordChange(e.target.value)}
+          autoComplete="current-password"
+          className={inputClassName}
+        />
+        <p
+          className="text-sm tracking-[-0.28px] text-destructive"
+          role="alert"
+          aria-live="polite"
+        >
+          {errorMessage || ' '}
+        </p>
+      </div>
+
+      <Button type="submit" size="lg" className="w-full" disabled={isLoading}>
+        {isLoading ? '로그인 중…' : '로그인'}
+      </Button>
+    </form>
+  )
+}
+
+export default LoginForm
diff --git a/front/src/features/auth/hooks/useLogin.ts b/front/src/features/auth/hooks/useLogin.ts
new file mode 100644
index 0000000..37a0470
--- /dev/null
+++ b/front/src/features/auth/hooks/useLogin.ts
@@ -0,0 +1,55 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router'
+import { useLoginMutation } from '@/features/auth/hooks/useLoginMutation'
+
+export function useLogin() {
+  const navigate = useNavigate()
+  const loginMutation = useLoginMutation()
+  const [id, setId] = useState('')
+  const [password, setPassword] = useState('')
+  const [errorMessage, setErrorMessage] = useState('')
+
+  const onIdChange = (value: string) => {
+    setId(value)
+    if (errorMessage) setErrorMessage('')
+  }
+
+  const onPasswordChange = (value: string) => {
+    setPassword(value)
+    if (errorMessage) setErrorMessage('')
+  }
+
+  const onLogin = () => {
+    if (!id || !password) {
+      setErrorMessage('아이디와 비밀번호를 입력해주세요.')
+      return
+    }
+
+    loginMutation.mutate(
+      { id, password },
+      {
+        onSuccess: () => {
+          setErrorMessage('')
+          navigate('/list')
+        },
+        onError: (error) => {
+          setErrorMessage(
+            error instanceof Error
+              ? error.message
+              : '아이디 또는 비밀번호가 올바르지 않습니다.',
+          )
+        },
+      },
+    )
+  }
+
+  return {
+    id,
+    password,
+    errorMessage,
+    isLoading: loginMutation.isPending,
+    onIdChange,
+    onPasswordChange,
+    onLogin,
+  }
+}
diff --git a/front/src/features/auth/hooks/useLoginMutation.ts b/front/src/features/auth/hooks/useLoginMutation.ts
new file mode 100644
index 0000000..d783d7f
--- /dev/null
+++ b/front/src/features/auth/hooks/useLoginMutation.ts
@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query'
+
+export interface LoginParams {
+  id: string
+  password: string
+}
+
+/**
+ * 로그인 mutation (임시 stub).
+ *
+ * TODO: mutationFn 을 실제 백엔드 호출로 교체.
+ *       현재는 API 미연동 상태라 검증만 통과하면 성공 처리한다.
+ */
+export function useLoginMutation() {
+  return useMutation<void, Error, LoginParams>({
+    mutationFn: async () => {
+      // TODO: 실제 로그인 API 연동
+    },
+  })
+}
diff --git a/front/src/features/auth/index.ts b/front/src/features/auth/index.ts
new file mode 100644
index 0000000..ad04e7b
--- /dev/null
+++ b/front/src/features/auth/index.ts
@@ -0,0 +1 @@
+export { LoginForm } from './components/LoginForm'