feat: 로그인&로그아웃 페이지 구성 및 기능 추가

.github/workflows/ci.yml

@@ -66,7 +66,6 @@ jobs:
           NEXT_PUBLIC_SUPABASE_URL: "https://dummy.supabase.co"
           NEXT_PUBLIC_SUPABASE_ANON_KEY: "dummy-key-for-build-test"
 
-
       # 9. 성공 시 체크마크 출력
       - name: All checks passed
-        run: echo "모든 코드 품질 검사를 통과했습니다!"
+        run: echo "모든 코드 품질 검사를 통과했습니다!"

.github/workflows/production.yml

@@ -106,10 +106,9 @@ jobs:
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }} # TODO: 나중에 배포 후 입력
           vercel-args: "--prod"
 
-
       # 배포 성공 알림 (선택사항)
       - name: Deployment success notification
         run: |
           echo "프로덕션 배포 완료!"
           echo "배포 시간: ${date}"
-          echo "커밋: ${{ github.sha}}"
+          echo "커밋: ${{ github.sha}}"

src/app/auth/login/page.tsx

@@ -1,16 +1,142 @@
-import LoginPageContent from "@/components/auth/LoginPageContent";
-import { Suspense } from "react";
+"use client";
+
+import AuthGuard from "@/components/auth/AuthGuard";
+import { useAuth } from "@/hooks/auth";
+import { LoginFormValues, loginSchema } from "@/lib/validations/auth";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+
+const LoginPage = () => {
+  const { login, isLoggingIn, loginError } = useAuth();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValid },
+  } = useForm<LoginFormValues>({
+    resolver: zodResolver(loginSchema),
+    mode: "onChange", // 실시간 검증
+  });
+
+  const onSubmit = async (data: LoginFormValues) => {
+    try {
+      await login(data);
+    } catch (error) {
+      // 에러는 useAuth에서 처리됨
+      console.error("로그인 실패:", error);
+    }
+  };
 
-export default function LoginPage() {
   return (
-    <Suspense
-      fallback={
-        <div className="min-h-screen flex items-center justify-center bg-accent-50">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accent-600"></div>
+    <AuthGuard requireAuth={false}>
+      <div className="min-h-screen flex items-center justify-center bg-accent-50">
+        <div className="max-w-md w-full space-y-8 p-6">
+          <div className="text-center">
+            <Link
+              href="/"
+              className="text-3xl font-bold text-accent-700 hover:text-accent-800 transition-colors"
+            >
+              DaylyLog
+            </Link>
+            <h2 className="mt-6 text-2xl font-bold text-gray-900">로그인</h2>
+            <p className="mt-2 text-sm text-gray-600">
+              계정에 로그인하여 DaylyLog를 시작하세요.
+            </p>
+          </div>
+
+          <form className="mt-8 space-y-6" onSubmit={handleSubmit(onSubmit)}>
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700"
+                >
+                  이메일
+                </label>
+                <input
+                  id="email"
+                  type="email"
+                  autoComplete="email"
+                  {...register("email")}
+                  className={`mt-1 block w-full px-3 py-2 border rounded-lg text-gray-900 placeholder-gray-400 hover:border-accent-400 focus:outline-none focus:ring-1 focus:ring-accent-500 transition-colors ${
+                    errors.email
+                      ? "border-red-300 focus:border-red-500"
+                      : "border-gray-300 focus:border-accent-500"
+                  }`}
+                  placeholder="[email protected]"
+                />
+                {errors.email && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {errors.email.message}
+                  </p>
+                )}
+              </div>
+
+              <div>
+                <label
+                  htmlFor="password"
+                  className="block text-sm font-medium text-gray-700"
+                >
+                  비밀번호
+                </label>
+                <input
+                  id="password"
+                  type="password"
+                  autoComplete="current-password"
+                  {...register("password")}
+                  className={`mt-1 block w-full px-3 py-2 border rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-1 hover:border-accent-400 focus:ring-accent-500 transition-colors ${
+                    errors.password
+                      ? "border-red-300 focus:border-red-500"
+                      : "border-gray-300 focus:border-accent-500"
+                  }`}
+                  placeholder="••••••••"
+                />
+                {errors.password && (
+                  <p className="mt-1 text-sm text-red-600">
+                    {errors.password.message}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* 전역 에러 표시 */}
+            {loginError && (
+              <p className="text-sm text-red-600">
+                {loginError.message ||
+                  "로그인에 실패했습니다. 다시 시도해주세요."}
+              </p>
+            )}
+
+            <div>
+              <button
+                type="submit"
+                disabled={isLoggingIn || !isValid}
+                className="hover:cursor-pointer w-full flex justify-center py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-accent-600 hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              >
+                {isLoggingIn ? "로그인 중..." : "로그인"}
+              </button>
+            </div>
+
+            <div className="flex flex-col gap-2 items-center">
+              <Link
+                href="/auth/signup"
+                className="text-accent-600 hover:text-accent-500 text-sm font-medium transition-colors"
+              >
+                계정이 없으신가요? 회원가입
+              </Link>
+              <Link
+                href="/"
+                className="text-gray-500 hover:text-gray-700 text-sm transition-colors"
+              >
+                메인 화면으로 돌아가기
+              </Link>
+            </div>
+          </form>
         </div>
-      }
-    >
-      <LoginPageContent />
-    </Suspense>
+      </div>
+    </AuthGuard>
   );
-}
+};
+
+export default LoginPage;

src/app/auth/signup/page.tsx

@@ -316,21 +316,19 @@ export default function SignupPage() {
               </button>
             </div>
 
-            <div className="text-center space-y-2">
+            <div className="flex flex-col gap-2 items-center">
               <Link
-                href="/auth/signup"
+                href="/auth/login"
                 className="text-accent-600 hover:text-accent-500 text-sm font-medium transition-colors"
               >
-                계정이 없으신가요? 회원가입
+                회원이신가요? 로그인
+              </Link>
+              <Link
+                href="/"
+                className="text-gray-500 hover:text-gray-700 text-sm transition-colors"
+              >
+                메인 화면으로 돌아가기
               </Link>
-              <div>
-                <Link
-                  href="/"
-                  className="text-gray-500 hover:text-gray-700 text-sm transition-colors"
-                >
-                  메인 화면으로 돌아가기
-                </Link>
-              </div>
             </div>
           </form>
         </div>