docs: 프로젝트 개발 규칙 문서 추가

- auto-trade.md: 개발 기본 원칙 및 도구 활용 가이드

.agent/rules/auto-trade.md

@@ -0,0 +1,34 @@
+---
+trigger: always_on
+---
+
+# 개발 기본 원칙
+
+## 언어 및 커뮤니케이션
+
+- 모든 응답은 **한글**로 작성
+- 코드 주석, 문서, 플랜, 결과물 모두 한글 사용
+
+## 개발 도구 활용
+
+- **Skills**: 프로젝트에 적합한 스킬을 적극 활용하여 베스트 프랙티스 적용
+- **MCP 서버**:
+  - `sequential-thinking`: 복잡한 문제 해결 시 단계별 사고 과정 정리
+  - `tavily-remote`: 최신 기술 트렌드 및 문서 검색
+  - `playwright` / `playwriter`: 브라우저 자동화 테스트
+  - `next-devtools`: Next.js 프로젝트 개발 및 디버깅
+  - `context7`: 라이브러리/프레임워크 공식 문서 참조
+  - `supabase-mcp-server`: Supabase 프로젝트 관리 및 쿼리
+
+## 코드 품질
+
+- 린트 에러는 즉시 수정
+- React 베스트 프랙티스 준수 (예: useEffect 내 setState 지양)
+- TypeScript 타입 안정성 유지
+- 접근성(a11y) 고려한 UI 구현
+
+## 테스트 및 검증
+
+- 브라우저 테스트는 MCP Playwright 활용
+- 변경 사항은 반드시 로컬에서 검증 후 완료 보고
+- 에러 발생 시 근본 원인 파악 및 해결

app/auth/callback/route.ts

@@ -1,57 +1,74 @@
 import { createClient } from "@/utils/supabase/server";
 import { NextResponse } from "next/server";
+import { AUTH_ERROR_MESSAGES, AUTH_ROUTES } from "@/features/auth/constants";
 
 /**
  * [인증 콜백 라우트 핸들러]
  *
- * Supabase 인증 이메일(회원가입 확인, 비밀번호 재설정 등)에서
+ * Supabase 인증 이메일(회원가입 확인, 비밀번호 재설정 등) 및 OAuth(소셜 로그인)
  * 리다이렉트될 때 호출되는 API 라우트입니다.
- *
- * PKCE(Proof Key for Code Exchange) 흐름:
- * 1. 사용자가 이메일 링크 클릭
- * 2. Supabase 서버가 토큰 검증 후 이 라우트로 `code` 파라미터와 함께 리다이렉트
- * 3. 이 라우트에서 `code`를 세션으로 교환
- * 4. 원래 목적지(next 파라미터)로 리다이렉트
- *
- * @param request - Next.js Request 객체
  */
 export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url);
 
-  // 1. URL에서 code와 next(리다이렉트 목적지) 추출
+  // 1. URL에서 주요 직접 파라미터 및 에러 추출
   const code = searchParams.get("code");
-  const next = searchParams.get("next") ?? "/";
+  const next = searchParams.get("next") ?? AUTH_ROUTES.HOME;
+  const error = searchParams.get("error");
+  const error_code = searchParams.get("error_code");
+  const error_description = searchParams.get("error_description");
 
-  // 2. code가 있으면 세션으로 교환
+  // 2. 인증 오류가 있는 경우 (예: 구글 로그인 취소 등)
+  if (error) {
+    console.error("Auth callback error parameter:", {
+      error,
+      error_code,
+      error_description,
+    });
+
+    let message = AUTH_ERROR_MESSAGES.DEFAULT;
+
+    // 에러 종류에 따른 메시지 분기
+    if (error === "access_denied") {
+      message = AUTH_ERROR_MESSAGES.OAUTH_ACCESS_DENIED;
+    } else if (error === "server_error") {
+      message = AUTH_ERROR_MESSAGES.OAUTH_SERVER_ERROR;
+    }
+
+    return NextResponse.redirect(
+      `${origin}${AUTH_ROUTES.LOGIN}?message=${encodeURIComponent(message)}`,
+    );
+  }
+
+  // 3. code가 있으면 세션으로 교환 (정상 플로우)
   if (code) {
     const supabase = await createClient();
-    const { error } = await supabase.auth.exchangeCodeForSession(code);
+    const { error: exchangeError } =
+      await supabase.auth.exchangeCodeForSession(code);
 
-    if (!error) {
+    if (!exchangeError) {
-      // 3. 세션 교환 성공 - 원래 목적지로 리다이렉트
+      // 세션 교환 성공 - 원래 목적지로 리다이렉트
-      // next가 절대 URL(http://...)이면 그대로 사용, 아니면 origin + next
+      const forwardedHost = request.headers.get("x-forwarded-host");
-      const forwardedHost = request.headers.get("x-forwarded-host"); // 프록시 환경 대응
       const isLocalEnv = process.env.NODE_ENV === "development";
 
       if (isLocalEnv) {
-        // 개발 환경: localhost 사용
         return NextResponse.redirect(`${origin}${next}`);
       } else if (forwardedHost) {
-        // 프로덕션 + 프록시: x-forwarded-host 사용
         return NextResponse.redirect(`https://${forwardedHost}${next}`);
       } else {
-        // 프로덕션: origin 사용
         return NextResponse.redirect(`${origin}${next}`);
       }
     }
 
-    // 에러 발생 시 로그 출력
+    // 세션 교환 실패 시 로그 및 에러 메시지 설정
-    console.error("Auth callback error:", error.message);
+    console.error("Auth exchange error:", exchangeError.message);
   }
 
-  // 4. code가 없거나 교환 실패 시 에러 페이지로 리다이렉트
+  // 4. code가 없거나 교환 실패 시 기본 에러 페이지로 리다이렉트
   const errorMessage = encodeURIComponent(
-    "인증 링크가 만료되었거나 유효하지 않습니다.",
+    AUTH_ERROR_MESSAGES.INVALID_AUTH_LINK,
+  );
+  return NextResponse.redirect(
+    `${origin}${AUTH_ROUTES.LOGIN}?message=${errorMessage}`,
   );
-  return NextResponse.redirect(`${origin}/login?message=${errorMessage}`);
 }

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { QueryProvider } from "@/providers/query-provider";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -27,7 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <QueryProvider>{children}</QueryProvider>
       </body>
     </html>
   );

app/login/page.tsx

@@ -1,13 +1,4 @@
-import Link from "next/link";
-import {
-  login,
-  signInWithGoogle,
-  signInWithKakao,
-} from "@/features/auth/actions";
 import FormMessage from "@/components/form-message";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Card,
   CardContent,
@@ -15,8 +6,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
+import LoginForm from "@/features/auth/components/login-form";
-import { Separator } from "@/components/ui/separator";
 
 /**
  * [로그인 페이지 컴포넌트]
@@ -85,148 +75,8 @@ export default async function LoginPage({
           </CardHeader>
 
           {/* ========== 카드 콘텐츠 영역 (폼) ========== */}
-          <CardContent className="space-y-6">
+          <CardContent>
-            {/* 로그인 폼 - formAction으로 서버 액션(login) 연결 */}
+            <LoginForm />
-            <form className="space-y-5">
-              {/* ========== 이메일 입력 필드 ========== */}
-              <div className="space-y-2">
-                {/* htmlFor와 Input의 id 연결로 접근성 향상 */}
-                <Label htmlFor="email" className="text-sm font-medium">
-                  이메일
-                </Label>
-                {/* autoComplete="email": 브라우저 자동완성 기능 활성화 */}
-                {/* required: HTML5 필수 입력 검증 */}
-                <Input
-                  id="email"
-                  name="email"
-                  type="email"
-                  placeholder="your@email.com"
-                  autoComplete="email"
-                  required
-                  className="h-11 transition-all duration-200"
-                />
-              </div>
-
-              {/* ========== 비밀번호 입력 필드 ========== */}
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-sm font-medium">
-                  비밀번호
-                </Label>
-                {/* pattern: 최소 8자, 대문자, 소문자, 숫자, 특수문자 각 1개 이상 */}
-                {/* 참고: HTML pattern에서는 <, >, {, } 등 일부 특수문자 사용 시 브라우저 호환성 문제 발생 */}
-                <Input
-                  id="password"
-                  name="password"
-                  type="password"
-                  placeholder="••••••••"
-                  autoComplete="current-password"
-                  required
-                  minLength={8}
-                  pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$"
-                  title="비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다."
-                  className="h-11 transition-all duration-200"
-                />
-              </div>
-
-              {/* 로그인 유지 & 비밀번호 찾기 */}
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-2">
-                  <Checkbox id="remember" name="remember-me" />
-                  <Label
-                    htmlFor="remember"
-                    className="cursor-pointer text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    로그인 유지
-                  </Label>
-                </div>
-                {/* 비밀번호 찾기 링크 */}
-                <Link
-                  href="/forgot-password"
-                  className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
-                >
-                  비밀번호 찾기
-                </Link>
-              </div>
-
-              {/* 로그인 버튼 */}
-              <Button
-                formAction={login}
-                type="submit"
-                className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold shadow-lg transition-all duration-200 hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
-                size="lg"
-              >
-                로그인
-              </Button>
-
-              {/* 회원가입 링크 */}
-              <p className="text-center text-sm text-gray-600 dark:text-gray-400">
-                계정이 없으신가요?{" "}
-                <Link
-                  href="/signup"
-                  className="font-semibold text-gray-900 transition-colors hover:text-black dark:text-gray-100 dark:hover:text-white"
-                >
-                  회원가입 하기
-                </Link>
-              </p>
-            </form>
-
-            {/* 소셜 로그인 구분선 */}
-            <div className="relative">
-              <Separator className="my-6" />
-              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-xs font-medium text-gray-500 dark:bg-gray-900 dark:text-gray-400">
-                또는 소셜 로그인
-              </span>
-            </div>
-
-            {/* 소셜 로그인 버튼들 */}
-            <div className="grid grid-cols-2 gap-3">
-              {/* ========== Google 로그인 버튼 ========== */}
-              <form action={signInWithGoogle}>
-                <Button
-                  type="submit"
-                  variant="outline"
-                  className="h-11 w-full border-gray-200 bg-white shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-750"
-                >
-                  <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
-                    <path
-                      fill="currentColor"
-                      d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-                    />
-                  </svg>
-                  Google
-                </Button>
-              </form>
-
-              {/* ========== Kakao 로그인 버튼 ========== */}
-              <form action={signInWithKakao}>
-                <Button
-                  type="submit"
-                  variant="outline"
-                  className="h-11 w-full border-none bg-[#FEE500] font-semibold text-[#3C1E1E] shadow-sm transition-all duration-200 hover:bg-[#FDD835] hover:shadow-md"
-                >
-                  <svg
-                    className="mr-2 h-5 w-5"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                  >
-                    <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm-1.5 14.5h-3v-9h3v9zm3 0h-3v-5h3v5zm0-6h-3v-3h3v3z" />
-                  </svg>
-                  Kakao
-                </Button>
-              </form>
-            </div>
           </CardContent>
         </Card>
       </div>

app/reset-password/page.tsx

@@ -1,8 +1,5 @@
 import FormMessage from "@/components/form-message";
-import { updatePassword } from "@/features/auth/actions";
+import ResetPasswordForm from "@/features/auth/components/reset-password-form";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Card,
   CardContent,
@@ -105,38 +102,7 @@ export default async function ResetPasswordPage({
 
           {/* ========== 폼 영역 ========== */}
           <CardContent className="space-y-6">
-            {/* 비밀번호 업데이트 폼 */}
+            <ResetPasswordForm />
-            <form className="space-y-5">
-              {/* ========== 새 비밀번호 입력 ========== */}
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-sm font-medium">
-                  새 비밀번호
-                </Label>
-                <Input
-                  id="password"
-                  name="password"
-                  type="password"
-                  placeholder="••••••••"
-                  autoComplete="new-password"
-                  required
-                  minLength={8}
-                  pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$"
-                  title="비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다."
-                  className="h-11 transition-all duration-200"
-                />
-                <p className="text-xs text-gray-500 dark:text-gray-400">
-                  최소 8자 이상, 대문자, 소문자, 숫자, 특수문자 포함
-                </p>
-              </div>
-
-              {/* ========== 비밀번호 변경 버튼 ========== */}
-              <Button
-                formAction={updatePassword}
-                className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
-              >
-                비밀번호 변경
-              </Button>
-            </form>
           </CardContent>
         </Card>
       </div>

app/signup/page.tsx

@@ -1,9 +1,6 @@
 import Link from "next/link";
-import { signup } from "@/features/auth/actions";
 import FormMessage from "@/components/form-message";
-import { Button } from "@/components/ui/button";
+import SignupForm from "@/features/auth/components/signup-form";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import {
   Card,
   CardContent,
@@ -46,58 +43,11 @@ export default async function SignupPage({
             </CardDescription>
           </CardHeader>
 
+          {/* ========== 폼 영역 ========== */}
           <CardContent className="space-y-6">
-            <form className="space-y-5">
+            <SignupForm />
-              {/* 이메일 입력 */}
-              <div className="space-y-2">
-                <Label htmlFor="email" className="text-sm font-medium">
-                  이메일
-                </Label>
-                <Input
-                  id="email"
-                  name="email"
-                  type="email"
-                  placeholder="your@email.com"
-                  required
-                  className="h-11 transition-all duration-200"
-                />
-              </div>
 
-              {/* 비밀번호 입력 */}
+            {/* ========== 로그인 링크 ========== */}
-              <div className="space-y-2">
-                <Label htmlFor="password" className="text-sm font-medium">
-                  비밀번호
-                </Label>
-                {/* pattern: 최소 8자, 대문자, 소문자, 숫자, 특수문자 각 1개 이상 */}
-                {/* 참고: HTML pattern에서는 <, >, {, } 등 일부 특수문자 사용 시 브라우저 호환성 문제 발생 */}
-                <Input
-                  id="password"
-                  name="password"
-                  type="password"
-                  placeholder="••••••••"
-                  autoComplete="new-password"
-                  required
-                  minLength={6}
-                  pattern="^(?=.*[0-9])(?=.*[!@#$%^&*]).{6,}$"
-                  title="비밀번호는 최소 6자 이상, 숫자와 특수문자를 각각 1개 이상 포함해야 합니다."
-                  className="h-11 transition-all duration-200"
-                />
-                <p className="text-xs text-gray-500 dark:text-gray-400">
-                  최소 6자 이상, 숫자, 특수문자 포함 (한글 가능)
-                </p>
-              </div>
-
-              {/* 회원가입 버튼 */}
-              <Button
-                formAction={signup}
-                type="submit"
-                className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold shadow-lg transition-all duration-200 hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
-                size="lg"
-              >
-                회원가입 완료
-              </Button>
-
-              {/* 로그인 링크 */}
             <p className="text-center text-sm text-gray-600 dark:text-gray-400">
               이미 계정이 있으신가요?{" "}
               <Link
@@ -107,7 +57,6 @@ export default async function SignupPage({
                 로그인 하러 가기
               </Link>
             </p>
-            </form>
           </CardContent>
         </Card>
       </div>

components/ui/loading-spinner.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * [로딩 스피너 컴포넌트]
+ *
+ * 전역적으로 사용 가능한 로딩 스피너입니다.
+ * - 크기 조절 가능 (sm, md, lg)
+ * - 색상 커스터마이징 가능
+ * - 텍스트와 함께 사용 가능
+ *
+ * @example
+ * // 기본 사용
+ * <LoadingSpinner />
+ *
+ * @example
+ * // 크기 및 텍스트 지정
+ * <LoadingSpinner size="lg" text="로딩 중..." />
+ *
+ * @example
+ * // 버튼 내부에서 사용
+ * <Button disabled={isLoading}>
+ *   {isLoading ? <LoadingSpinner size="sm" /> : "제출"}
+ * </Button>
+ */
+
+interface LoadingSpinnerProps {
+  /** 스피너 크기 */
+  size?: "sm" | "md" | "lg";
+  /** 스피너와 함께 표시할 텍스트 */
+  text?: string;
+  /** 추가 CSS 클래스 */
+  className?: string;
+  /** 스피너 색상 (Tailwind 클래스) */
+  color?: string;
+}
+
+export function LoadingSpinner({
+  size = "md",
+  text,
+  className,
+  color = "border-gray-900 dark:border-white",
+}: LoadingSpinnerProps) {
+  // 크기별 스타일 매핑
+  const sizeClasses = {
+    sm: "h-4 w-4 border-2",
+    md: "h-8 w-8 border-3",
+    lg: "h-12 w-12 border-4",
+  };
+
+  return (
+    <div className={cn("flex items-center justify-center gap-2", className)}>
+      {/* ========== 회전 스피너 ========== */}
+      <div
+        className={cn(
+          "animate-spin rounded-full border-solid border-t-transparent",
+          sizeClasses[size],
+          color,
+        )}
+        role="status"
+        aria-label="로딩 중"
+      />
+      {/* ========== 로딩 텍스트 (선택적) ========== */}
+      {text && (
+        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+          {text}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * [인라인 스피너 컴포넌트]
+ *
+ * 버튼 내부나 작은 공간에서 사용하기 적합한 미니 스피너입니다.
+ *
+ * @example
+ * <Button disabled={isLoading}>
+ *   {isLoading && <InlineSpinner />}
+ *   로그인
+ * </Button>
+ */
+export function InlineSpinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("h-4 w-4 animate-spin", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-label="로딩 중"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      />
+    </svg>
+  );
+}

features/auth/actions.ts

@@ -46,15 +46,31 @@ function extractAuthData(formData: FormData): AuthFormData {
  * @returns AuthError | null - 에러가 있으면 에러 객체, 없으면 null
  */
 function validatePassword(password: string): AuthError | null {
-  // 1. 최소 길이 체크 (6자 이상)
+  // 1. 최소 길이 체크 (8자 이상)
-  if (password.length < 6) {
+  if (password.length < 8) {
     return {
       message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_SHORT,
       type: "validation",
     };
   }
 
-  // 2. 숫자 포함 여부
+  // 2. 대문자 포함 여부
+  if (!/[A-Z]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // 3. 소문자 포함 여부
+  if (!/[a-z]/.test(password)) {
+    return {
+      message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
+      type: "validation",
+    };
+  }
+
+  // 4. 숫자 포함 여부
   if (!/[0-9]/.test(password)) {
     return {
       message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
@@ -62,7 +78,7 @@ function validatePassword(password: string): AuthError | null {
     };
   }
 
-  // 3. 특수문자 포함 여부
+  // 5. 특수문자 포함 여부
   if (!/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
     return {
       message: AUTH_ERROR_MESSAGES.PASSWORD_TOO_WEAK,
@@ -82,7 +98,7 @@ function validatePassword(password: string): AuthError | null {
  * 검증 항목:
  * 1. 빈 값 체크 - 이메일 또는 비밀번호가 비어있는지 확인
  * 2. 이메일 형식 - '@' 포함 여부로 간단한 형식 검증
- * 3. 비밀번호 길이 - 최소 6자 이상인지 확인 (Supabase 기본 요구사항)
+ * 3. 비밀번호 강도 - 8자 이상, 대소문자/숫자/특수문자 포함 확인
  *
  * @param email - 사용자 이메일
  * @param password - 사용자 비밀번호

features/auth/components/login-form.tsx

@@ -0,0 +1,220 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import {
+  login,
+  signInWithGoogle,
+  signInWithKakao,
+} from "@/features/auth/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+
+/**
+ * [로그인 폼 클라이언트 컴포넌트]
+ *
+ * 이메일 기억하기 기능을 제공하는 로그인 폼입니다.
+ * - localStorage를 사용하여 이메일 저장/불러오기
+ * - 체크박스 선택 시 이메일 자동 저장
+ * - 서버 액션(login)과 연동
+ */
+export default function LoginForm() {
+  // ========== 상태 관리 ==========
+  // 초기 상태를 함수로 지연 초기화하여 localStorage 읽기
+  const [email, setEmail] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("auto-trade-saved-email") || "";
+    }
+    return "";
+  });
+
+  const [rememberMe, setRememberMe] = useState(() => {
+    if (typeof window !== "undefined") {
+      return !!localStorage.getItem("auto-trade-saved-email");
+    }
+    return false;
+  });
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  // ========== 폼 제출 핸들러 ==========
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    const formData = new FormData(e.currentTarget);
+
+    // localStorage 처리 (동기)
+    if (rememberMe) {
+      localStorage.setItem("auto-trade-saved-email", email);
+    } else {
+      localStorage.removeItem("auto-trade-saved-email");
+    }
+
+    // 서버 액션 호출 (리다이렉트 발생)
+    try {
+      await login(formData);
+    } catch (error) {
+      console.error("Login error:", error);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* ========== 로그인 폼 ========== */}
+      <form className="space-y-5" onSubmit={handleSubmit}>
+        {/* ========== 이메일 입력 필드 ========== */}
+        <div className="space-y-2">
+          <Label htmlFor="email" className="text-sm font-medium">
+            이메일
+          </Label>
+          <Input
+            id="email"
+            name="email"
+            type="email"
+            placeholder="your@email.com"
+            autoComplete="email"
+            required
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="h-11 transition-all duration-200"
+          />
+        </div>
+
+        {/* ========== 비밀번호 입력 필드 ========== */}
+        <div className="space-y-2">
+          <Label htmlFor="password" className="text-sm font-medium">
+            비밀번호
+          </Label>
+          <Input
+            id="password"
+            name="password"
+            type="password"
+            placeholder="••••••••"
+            autoComplete="current-password"
+            required
+            minLength={8}
+            pattern="^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&*]).{8,}$"
+            title="비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다."
+            className="h-11 transition-all duration-200"
+          />
+        </div>
+
+        {/* ========== 이메일 기억하기 & 비밀번호 찾기 ========== */}
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Checkbox
+              id="remember"
+              checked={rememberMe}
+              onCheckedChange={(checked) => setRememberMe(checked === true)}
+            />
+            <Label
+              htmlFor="remember"
+              className="cursor-pointer text-sm font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            >
+              이메일 기억하기
+            </Label>
+          </div>
+          {/* 비밀번호 찾기 링크 */}
+          <Link
+            href="/forgot-password"
+            className="text-sm font-medium text-gray-700 hover:text-black dark:text-gray-300 dark:hover:text-white"
+          >
+            비밀번호 찾기
+          </Link>
+        </div>
+
+        {/* ========== 로그인 버튼 ========== */}
+        <Button
+          type="submit"
+          disabled={isLoading}
+          className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold shadow-lg transition-all duration-200 hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
+          size="lg"
+        >
+          {isLoading ? (
+            <span className="flex items-center gap-2">
+              <InlineSpinner />
+              로그인 중...
+            </span>
+          ) : (
+            "로그인"
+          )}
+        </Button>
+
+        {/* ========== 회원가입 링크 ========== */}
+        <p className="text-center text-sm text-gray-600 dark:text-gray-400">
+          계정이 없으신가요?{" "}
+          <Link
+            href="/signup"
+            className="font-semibold text-gray-900 transition-colors hover:text-black dark:text-gray-100 dark:hover:text-white"
+          >
+            회원가입 하기
+          </Link>
+        </p>
+      </form>
+
+      {/* ========== 소셜 로그인 구분선 ========== */}
+      <div className="relative">
+        <Separator className="my-6" />
+        <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-xs font-medium text-gray-500 dark:bg-gray-900 dark:text-gray-400">
+          또는 소셜 로그인
+        </span>
+      </div>
+
+      {/* ========== 소셜 로그인 버튼들 ========== */}
+      <div className="grid grid-cols-2 gap-3">
+        {/* ========== Google 로그인 버튼 ========== */}
+        <form action={signInWithGoogle}>
+          <Button
+            type="submit"
+            variant="outline"
+            className="h-11 w-full border-gray-200 bg-white shadow-sm transition-all duration-200 hover:bg-gray-50 hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-750"
+          >
+            <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
+              <path
+                fill="currentColor"
+                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              />
+              <path
+                fill="currentColor"
+                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              />
+              <path
+                fill="currentColor"
+                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              />
+            </svg>
+            Google
+          </Button>
+        </form>
+
+        {/* ========== Kakao 로그인 버튼 ========== */}
+        <form action={signInWithKakao}>
+          <Button
+            type="submit"
+            variant="outline"
+            className="h-11 w-full border-none bg-[#FEE500] font-semibold text-[#3C1E1E] shadow-sm transition-all duration-200 hover:bg-[#FDD835] hover:shadow-md"
+          >
+            <svg
+              className="mr-2 h-5 w-5"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9-4.03-9-9-9zm-1.5 14.5h-3v-9h3v9zm3 0h-3v-5h3v5zm0-6h-3v-3h3v3z" />
+            </svg>
+            Kakao
+          </Button>
+        </form>
+      </div>
+    </div>
+  );
+}

features/auth/components/reset-password-form.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { updatePassword } from "@/features/auth/actions";
+import {
+  resetPasswordSchema,
+  type ResetPasswordFormData,
+} from "@/features/auth/schemas/auth-schema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+import { useState } from "react";
+
+/**
+ * [비밀번호 재설정 폼 클라이언트 컴포넌트 - React Hook Form 버전]
+ *
+ * React Hook Form과 Zod를 사용한 비밀번호 재설정 폼입니다.
+ * - 타입 안전한 폼 검증
+ * - 비밀번호/비밀번호 확인 일치 검증
+ * - 로딩 상태 표시
+ *
+ * @see app/reset-password/page.tsx - 이 컴포넌트를 사용하는 페이지
+ */
+export default function ResetPasswordForm() {
+  // ========== 로딩 상태 ==========
+  const [isLoading, setIsLoading] = useState(false);
+  const [serverError, setServerError] = useState("");
+
+  // ========== React Hook Form 설정 ==========
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<ResetPasswordFormData>({
+    resolver: zodResolver(resetPasswordSchema),
+    mode: "onBlur",
+  });
+
+  // 비밀번호 실시간 감시
+  const password = watch("password");
+  const confirmPassword = watch("confirmPassword");
+
+  // ========== 폼 제출 핸들러 ==========
+  const onSubmit = async (data: ResetPasswordFormData) => {
+    setServerError("");
+    setIsLoading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("password", data.password);
+
+      await updatePassword(formData);
+    } catch (error) {
+      console.error("Password reset error:", error);
+      setServerError("비밀번호 변경 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
+      {/* ========== 서버 에러 메시지 표시 ========== */}
+      {serverError && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/50 dark:text-red-200">
+          {serverError}
+        </div>
+      )}
+
+      {/* ========== 새 비밀번호 입력 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="password" className="text-sm font-medium">
+          새 비밀번호
+        </Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="••••••••"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("password")}
+          className="h-11 transition-all duration-200"
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          최소 8자 이상, 대문자, 소문자, 숫자, 특수문자 포함
+        </p>
+        {errors.password && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 비밀번호 확인 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword" className="text-sm font-medium">
+          비밀번호 확인
+        </Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          placeholder="••••••••"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("confirmPassword")}
+          className="h-11 transition-all duration-200"
+        />
+        {/* 비밀번호 불일치 시 실시간 피드백 */}
+        {confirmPassword &&
+          password !== confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-red-600 dark:text-red-400">
+              비밀번호가 일치하지 않습니다
+            </p>
+          )}
+        {/* 비밀번호 일치 시 확인 메시지 */}
+        {confirmPassword &&
+          password === confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-green-600 dark:text-green-400">
+              비밀번호가 일치합니다 ✓
+            </p>
+          )}
+        {/* Zod 검증 에러 */}
+        {errors.confirmPassword && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.confirmPassword.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 비밀번호 변경 버튼 ========== */}
+      <Button
+        type="submit"
+        disabled={isLoading}
+        className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold text-white shadow-lg transition-all hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
+      >
+        {isLoading ? (
+          <span className="flex items-center gap-2">
+            <InlineSpinner />
+            변경 중...
+          </span>
+        ) : (
+          "비밀번호 변경"
+        )}
+      </Button>
+    </form>
+  );
+}

features/auth/components/signup-form.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { signup } from "@/features/auth/actions";
+import {
+  signupSchema,
+  type SignupFormData,
+} from "@/features/auth/schemas/auth-schema";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { InlineSpinner } from "@/components/ui/loading-spinner";
+import { useState } from "react";
+
+/**
+ * [회원가입 폼 클라이언트 컴포넌트 - React Hook Form 버전]
+ *
+ * React Hook Form과 Zod를 사용한 회원가입 폼입니다.
+ * - 타입 안전한 폼 검증
+ * - 자동 에러 메시지 관리
+ * - 비밀번호/비밀번호 확인 일치 검증
+ * - 로딩 상태 표시
+ *
+ * @see app/signup/page.tsx - 이 컴포넌트를 사용하는 페이지
+ */
+export default function SignupForm() {
+  // ========== 로딩 상태 ==========
+  const [isLoading, setIsLoading] = useState(false);
+  const [serverError, setServerError] = useState("");
+
+  // ========== React Hook Form 설정 ==========
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    watch,
+  } = useForm<SignupFormData>({
+    resolver: zodResolver(signupSchema),
+    mode: "onBlur", // 포커스 아웃 시 검증
+  });
+
+  // 비밀번호 실시간 감시 (일치 여부 표시용)
+  const password = watch("password");
+  const confirmPassword = watch("confirmPassword");
+
+  // ========== 폼 제출 핸들러 ==========
+  const onSubmit = async (data: SignupFormData) => {
+    setServerError("");
+    setIsLoading(true);
+
+    try {
+      const formData = new FormData();
+      formData.append("email", data.email);
+      formData.append("password", data.password);
+
+      await signup(formData);
+    } catch (error) {
+      console.error("Signup error:", error);
+      setServerError("회원가입 중 오류가 발생했습니다.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
+      {/* ========== 서버 에러 메시지 표시 ========== */}
+      {serverError && (
+        <div className="rounded-md bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/50 dark:text-red-200">
+          {serverError}
+        </div>
+      )}
+
+      {/* ========== 이메일 입력 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="email" className="text-sm font-medium">
+          이메일
+        </Label>
+        <Input
+          id="email"
+          type="email"
+          placeholder="your@email.com"
+          autoComplete="email"
+          disabled={isLoading}
+          {...register("email")}
+          className="h-11 transition-all duration-200"
+        />
+        {errors.email && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.email.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 비밀번호 입력 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="password" className="text-sm font-medium">
+          비밀번호
+        </Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="••••••••"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("password")}
+          className="h-11 transition-all duration-200"
+        />
+        <p className="text-xs text-gray-500 dark:text-gray-400">
+          최소 8자 이상, 대문자, 소문자, 숫자, 특수문자 포함
+        </p>
+        {errors.password && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.password.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 비밀번호 확인 필드 ========== */}
+      <div className="space-y-2">
+        <Label htmlFor="confirmPassword" className="text-sm font-medium">
+          비밀번호 확인
+        </Label>
+        <Input
+          id="confirmPassword"
+          type="password"
+          placeholder="••••••••"
+          autoComplete="new-password"
+          disabled={isLoading}
+          {...register("confirmPassword")}
+          className="h-11 transition-all duration-200"
+        />
+        {/* 비밀번호 불일치 시 실시간 피드백 */}
+        {confirmPassword &&
+          password !== confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-red-600 dark:text-red-400">
+              비밀번호가 일치하지 않습니다
+            </p>
+          )}
+        {/* 비밀번호 일치 시 확인 메시지 */}
+        {confirmPassword &&
+          password === confirmPassword &&
+          !errors.confirmPassword && (
+            <p className="text-xs text-green-600 dark:text-green-400">
+              비밀번호가 일치합니다 ✓
+            </p>
+          )}
+        {/* Zod 검증 에러 */}
+        {errors.confirmPassword && (
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {errors.confirmPassword.message}
+          </p>
+        )}
+      </div>
+
+      {/* ========== 회원가입 버튼 ========== */}
+      <Button
+        type="submit"
+        disabled={isLoading}
+        className="h-11 w-full bg-gradient-to-r from-gray-900 to-black font-semibold shadow-lg transition-all duration-200 hover:from-black hover:to-gray-800 hover:shadow-xl dark:from-white dark:to-gray-100 dark:text-black dark:hover:from-gray-100 dark:hover:to-white"
+      >
+        {isLoading ? (
+          <span className="flex items-center gap-2">
+            <InlineSpinner />
+            회원가입 중...
+          </span>
+        ) : (
+          "회원가입 완료"
+        )}
+      </Button>
+    </form>
+  );
+}

features/auth/constants.ts

@@ -27,9 +27,10 @@ export const AUTH_ERROR_MESSAGES = {
   INVALID_EMAIL: "올바른 이메일 형식이 아닙니다.",
 
   // === 비밀번호 관련 ===
-  PASSWORD_TOO_SHORT: "비밀번호는 최소 6자 이상이어야 합니다.",
+  PASSWORD_TOO_SHORT: "비밀번호는 최소 8자 이상이어야 합니다.",
   PASSWORD_TOO_WEAK:
-    "비밀번호는 최소 6자 이상, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다.",
+    "비밀번호는 최소 8자 이상, 대문자, 소문자, 숫자, 특수문자를 각각 1개 이상 포함해야 합니다.",
+  PASSWORD_MISMATCH: "비밀번호가 일치하지 않습니다.",
   PASSWORD_SAME_AS_OLD: "새 비밀번호는 기존 비밀번호와 달라야 합니다.",
 
   // === 비밀번호 재설정 ===
@@ -40,6 +41,16 @@ export const AUTH_ERROR_MESSAGES = {
   // === 인증 링크 ===
   INVALID_AUTH_LINK: "인증 링크가 만료되었거나 유효하지 않습니다.",
 
+  // === 소셜 로그인 (OAuth) 관련 ===
+  OAUTH_ACCESS_DENIED: "로그인이 취소되었습니다.",
+  OAUTH_SERVER_ERROR:
+    "인증 서버 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.",
+  OAUTH_INVALID_SCOPE:
+    "필요한 권한이 설정되지 않았습니다. 개발자 설정 확인이 필요합니다.",
+  OAUTH_UNAUTHORIZED_CLIENT:
+    "인증 앱 설정(Client ID/Secret)에 문제가 있습니다.",
+  OAUTH_UNKNOWN_ERROR: "소셜 로그인 중 알 수 없는 오류가 발생했습니다.",
+
   // === Rate Limit ===
   EMAIL_RATE_LIMIT:
     "이메일 발송 제한을 초과했습니다. 잠시 후 다시 시도해 주세요.",
@@ -86,9 +97,16 @@ export const PUBLIC_AUTH_PAGES = [
 
 /**
  * 비밀번호 검증 규칙
+ * - 최소 8자 이상
+ * - 대문자 1개 이상
+ * - 소문자 1개 이상
+ * - 숫자 1개 이상
+ * - 특수문자 1개 이상
  */
 export const PASSWORD_RULES = {
-  MIN_LENGTH: 6,
+  MIN_LENGTH: 8,
+  REQUIRE_UPPERCASE: true,
+  REQUIRE_LOWERCASE: true,
   REQUIRE_NUMBER: true,
   REQUIRE_SPECIAL_CHAR: true,
 } as const;

features/auth/schemas/auth-schema.ts

@@ -0,0 +1,94 @@
+import { z } from "zod";
+import { PASSWORD_RULES } from "@/features/auth/constants";
+
+/**
+ * [비밀번호 검증 스키마]
+ *
+ * 비밀번호 강도 요구사항:
+ * - 최소 8자 이상
+ * - 대문자 1개 이상
+ * - 소문자 1개 이상
+ * - 숫자 1개 이상
+ * - 특수문자 1개 이상
+ */
+const passwordSchema = z
+  .string()
+  .min(PASSWORD_RULES.MIN_LENGTH, {
+    message: `비밀번호는 최소 ${PASSWORD_RULES.MIN_LENGTH}자 이상이어야 합니다.`,
+  })
+  .regex(/[A-Z]/, {
+    message: "비밀번호에 대문자가 최소 1개 이상 포함되어야 합니다.",
+  })
+  .regex(/[a-z]/, {
+    message: "비밀번호에 소문자가 최소 1개 이상 포함되어야 합니다.",
+  })
+  .regex(/[0-9]/, {
+    message: "비밀번호에 숫자가 최소 1개 이상 포함되어야 합니다.",
+  })
+  .regex(/[!@#$%^&*(),.?":{}|<>]/, {
+    message: "비밀번호에 특수문자가 최소 1개 이상 포함되어야 합니다.",
+  });
+
+/**
+ * [회원가입 폼 스키마]
+ *
+ * 회원가입 시 필요한 필드 검증
+ */
+export const signupSchema = z
+  .object({
+    email: z
+      .string()
+      .min(1, { message: "이메일을 입력해주세요." })
+      .email({ message: "올바른 이메일 형식이 아닙니다." }),
+    password: passwordSchema,
+    confirmPassword: z
+      .string()
+      .min(1, { message: "비밀번호 확인을 입력해주세요." }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "비밀번호가 일치하지 않습니다.",
+    path: ["confirmPassword"],
+  });
+
+/**
+ * [비밀번호 재설정 폼 스키마]
+ */
+export const resetPasswordSchema = z
+  .object({
+    password: passwordSchema,
+    confirmPassword: z
+      .string()
+      .min(1, { message: "비밀번호 확인을 입력해주세요." }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "비밀번호가 일치하지 않습니다.",
+    path: ["confirmPassword"],
+  });
+
+/**
+ * [로그인 폼 스키마]
+ */
+export const loginSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "이메일을 입력해주세요." })
+    .email({ message: "올바른 이메일 형식이 아닙니다." }),
+  password: z.string().min(1, { message: "비밀번호를 입력해주세요." }),
+  rememberMe: z.boolean().optional(),
+});
+
+/**
+ * [비밀번호 찾기 폼 스키마]
+ */
+export const forgotPasswordSchema = z.object({
+  email: z
+    .string()
+    .min(1, { message: "이메일을 입력해주세요." })
+    .email({ message: "올바른 이메일 형식이 아닙니다." }),
+});
+
+// TypeScript 타입 추론
+export type SignupFormData = z.infer<typeof signupSchema>;
+export type ResetPasswordFormData = z.infer<typeof resetPasswordSchema>;
+export type LoginFormData = z.infer<typeof loginSchema>;
+export type ForgotPasswordFormData = z.infer<typeof forgotPasswordSchema>;

hooks/queries/use-user-query.ts

@@ -0,0 +1,42 @@
+import { useQuery } from "@tanstack/react-query";
+import { createClient } from "@/utils/supabase/client";
+
+/**
+ * [사용자 정보 조회 쿼리]
+ *
+ * 현재 로그인한 사용자의 정보를 조회합니다.
+ * - 자동 캐싱 및 재검증
+ * - 로딩/에러 상태 자동 관리
+ *
+ * @example
+ * ```tsx
+ * import { useUserQuery } from '@/hooks/queries/use-user-query';
+ *
+ * function Profile() {
+ *   const { data: user, isLoading, error } = useUserQuery();
+ *
+ *   if (isLoading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!user) return <div>Not logged in</div>;
+ *
+ *   return <div>Welcome, {user.email}</div>;
+ * }
+ * ```
+ */
+export function useUserQuery() {
+  return useQuery({
+    queryKey: ["user"],
+    queryFn: async () => {
+      const supabase = createClient();
+      const {
+        data: { user },
+        error,
+      } = await supabase.auth.getUser();
+
+      if (error) throw error;
+      return user;
+    },
+    staleTime: 5 * 60 * 1000, // 5분 - 사용자 정보는 자주 변경되지 않음
+    retry: 1,
+  });
+}

package-lock.json

@@ -8,6 +8,7 @@
       "name": "auto-trade",
       "version": "0.1.0",
       "dependencies": {
+        "@hookform/resolvers": "^5.2.2",
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-separator": "^1.1.8",
@@ -15,6 +16,7 @@
         "@supabase/ssr": "^0.8.0",
         "@supabase/supabase-js": "^2.93.3",
         "@tanstack/react-query": "^5.90.20",
+        "@tanstack/react-query-devtools": "^5.91.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "lucide-react": "^0.563.0",
@@ -25,7 +27,8 @@
         "tailwind-merge": "^3.4.0",
         "tailwindcss-animate": "^1.0.7",
         "tw-animate-css": "^1.4.0",
-        "zustand": "^5.0.10"
+        "zod": "^4.3.6",
+        "zustand": "^5.0.11"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
@@ -469,6 +472,18 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz",
+      "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -1552,6 +1567,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@supabase/auth-js": {
       "version": "2.93.3",
       "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.93.3.tgz",
@@ -1934,6 +1955,16 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tanstack/query-devtools": {
+      "version": "5.93.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.93.0.tgz",
+      "integrity": "sha512-+kpsx1NQnOFTZsw6HAFCW3HkKg0+2cepGtAWXjiiSOJJ1CtQpt72EE2nyZb+AjAbLRPoeRmPJ8MtQd8r8gsPdg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@tanstack/react-query": {
       "version": "5.90.20",
       "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.20.tgz",
@@ -1950,6 +1981,23 @@
         "react": "^18 || ^19"
       }
     },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "5.91.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.91.3.tgz",
+      "integrity": "sha512-nlahjMtd/J1h7IzOOfqeyDh5LNfG0eULwlltPEonYy0QL+nqrBB+nyzJfULV+moL7sZyxc2sHdNJki+vLA9BSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-devtools": "5.93.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "^5.90.20",
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
@@ -7091,7 +7139,6 @@
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
@@ -7111,9 +7158,9 @@
       }
     },
     "node_modules/zustand": {
-      "version": "5.0.10",
+      "version": "5.0.11",
-      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.11.tgz",
-      "integrity": "sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==",
+      "integrity": "sha512-fdZY+dk7zn/vbWNCYmzZULHRrss0jx5pPFiOuMZ/5HJN6Yv3u+1Wswy/4MpZEkEGhtNH+pwxZB8OKgUBPzYAGg==",
       "license": "MIT",
       "engines": {
         "node": ">=12.20.0"

package.json

@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-separator": "^1.1.8",
@@ -16,6 +17,7 @@
     "@supabase/ssr": "^0.8.0",
     "@supabase/supabase-js": "^2.93.3",
     "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-query-devtools": "^5.91.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.563.0",
@@ -26,7 +28,8 @@
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
-    "zustand": "^5.0.10"
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

providers/query-provider.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useState } from "react";
+
+/**
+ * [React Query Provider]
+ *
+ * 애플리케이션 전역에 React Query 기능을 제공합니다.
+ * - 서버 상태 관리
+ * - 자동 캐싱 및 재검증
+ * - 로딩/에러 상태 관리
+ * - DevTools 통합 (개발 환경)
+ *
+ * @see https://tanstack.com/query/latest
+ */
+export function QueryProvider({ children }: { children: React.ReactNode }) {
+  // ========== QueryClient 생성 ==========
+  // useState로 감싸서 리렌더링 시에도 동일한 인스턴스 유지
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            // ========== 쿼리 기본 옵션 ==========
+            staleTime: 60 * 1000, // 1분 - 데이터가 신선한 것으로 간주되는 시간
+            gcTime: 5 * 60 * 1000, // 5분 - 캐시 유지 시간 (이전 cacheTime)
+            retry: 1, // 실패 시 재시도 횟수
+            refetchOnWindowFocus: false, // 윈도우 포커스 시 자동 재검증 비활성화
+          },
+          mutations: {
+            // ========== Mutation 기본 옵션 ==========
+            retry: 0, // Mutation은 재시도하지 않음
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      {/* ========== DevTools (개발 환경에서만 표시) ========== */}
+      <ReactQueryDevtools initialIsOpen={false} position="bottom" />
+    </QueryClientProvider>
+  );
+}

stores/auth-store.ts

@@ -0,0 +1,79 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/**
+ * [사용자 정보 타입]
+ */
+export interface User {
+  id: string;
+  email: string;
+  name?: string;
+  avatar?: string;
+  createdAt?: string;
+}
+
+/**
+ * [인증 상태 인터페이스]
+ */
+interface AuthState {
+  // ========== 상태 ==========
+  user: User | null;
+  isAuthenticated: boolean;
+
+  // ========== 액션 ==========
+  setUser: (user: User | null) => void;
+  updateUser: (updates: Partial<User>) => void;
+  logout: () => void;
+}
+
+/**
+ * [인증 스토어]
+ *
+ * 전역 사용자 인증 상태를 관리합니다.
+ * - localStorage에 자동 저장 (persist 미들웨어)
+ * - 페이지 새로고침 시에도 상태 유지
+ *
+ * @example
+ * ```tsx
+ * import { useAuthStore } from '@/stores/auth-store';
+ *
+ * function Profile() {
+ *   const { user, isAuthenticated, setUser } = useAuthStore();
+ *
+ *   if (!isAuthenticated) return <Login />;
+ *   return <div>Welcome, {user?.email}</div>;
+ * }
+ * ```
+ */
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set) => ({
+      // ========== 초기 상태 ==========
+      user: null,
+      isAuthenticated: false,
+
+      // ========== 사용자 설정 ==========
+      setUser: (user) =>
+        set({
+          user,
+          isAuthenticated: !!user,
+        }),
+
+      // ========== 사용자 정보 업데이트 ==========
+      updateUser: (updates) =>
+        set((state) => ({
+          user: state.user ? { ...state.user, ...updates } : null,
+        })),
+
+      // ========== 로그아웃 ==========
+      logout: () =>
+        set({
+          user: null,
+          isAuthenticated: false,
+        }),
+    }),
+    {
+      name: "auth-storage", // localStorage 키 이름
+    },
+  ),
+);

stores/ui-store.ts

@@ -0,0 +1,111 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/**
+ * [UI 상태 인터페이스]
+ */
+interface UIState {
+  // ========== 테마 ==========
+  theme: "light" | "dark" | "system";
+  setTheme: (theme: "light" | "dark" | "system") => void;
+
+  // ========== 사이드바 ==========
+  isSidebarOpen: boolean;
+  toggleSidebar: () => void;
+  setSidebarOpen: (isOpen: boolean) => void;
+
+  // ========== 모달 ==========
+  isModalOpen: boolean;
+  modalContent: React.ReactNode | null;
+  openModal: (content: React.ReactNode) => void;
+  closeModal: () => void;
+
+  // ========== 토스트/알림 ==========
+  toasts: Toast[];
+  addToast: (toast: Omit<Toast, "id">) => void;
+  removeToast: (id: string) => void;
+}
+
+/**
+ * [토스트 메시지 타입]
+ */
+export interface Toast {
+  id: string;
+  type: "success" | "error" | "warning" | "info";
+  message: string;
+  duration?: number;
+}
+
+/**
+ * [UI 스토어]
+ *
+ * 전역 UI 상태를 관리합니다.
+ * - 테마 설정 (다크/라이트 모드)
+ * - 사이드바 열림/닫힘
+ * - 모달 상태
+ * - 토스트 알림
+ *
+ * @example
+ * ```tsx
+ * import { useUIStore } from '@/stores/ui-store';
+ *
+ * function Header() {
+ *   const { theme, setTheme, toggleSidebar } = useUIStore();
+ *
+ *   return (
+ *     <header>
+ *       <button onClick={toggleSidebar}>Menu</button>
+ *       <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+ *         Toggle Theme
+ *       </button>
+ *     </header>
+ *   );
+ * }
+ * ```
+ */
+export const useUIStore = create<UIState>()(
+  persist(
+    (set) => ({
+      // ========== 테마 ==========
+      theme: "system",
+      setTheme: (theme) => set({ theme }),
+
+      // ========== 사이드바 ==========
+      isSidebarOpen: true,
+      toggleSidebar: () =>
+        set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
+      setSidebarOpen: (isOpen) => set({ isSidebarOpen: isOpen }),
+
+      // ========== 모달 ==========
+      isModalOpen: false,
+      modalContent: null,
+      openModal: (content) => set({ isModalOpen: true, modalContent: content }),
+      closeModal: () => set({ isModalOpen: false, modalContent: null }),
+
+      // ========== 토스트 ==========
+      toasts: [],
+      addToast: (toast) =>
+        set((state) => ({
+          toasts: [
+            ...state.toasts,
+            {
+              ...toast,
+              id: `toast-${Date.now()}-${Math.random()}`,
+            },
+          ],
+        })),
+      removeToast: (id) =>
+        set((state) => ({
+          toasts: state.toasts.filter((toast) => toast.id !== id),
+        })),
+    }),
+    {
+      name: "ui-storage", // localStorage 키 이름
+      // 일부 상태는 지속하지 않음 (모달, 토스트)
+      partialize: (state) => ({
+        theme: state.theme,
+        isSidebarOpen: state.isSidebarOpen,
+      }),
+    },
+  ),
+);