refactor: alert 기능 추가

Author: samuel426

front/src/app/page.tsx

@@ -1,8 +1,29 @@
+"use client"
 import Link from "next/link"
+import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/Button"
 import { ArrowRight, Github, Sparkles, BarChart3, Users, Shield } from "lucide-react"
+import { useAuth } from "@/hooks/auth/useAuth"
 
 export default function LandingPage() {
+  const router = useRouter()
+  const { isAuthed } = useAuth()
+
+  const handleStartAnalysis = () => {
+    if (!isAuthed) {
+      alert("로그인해주세요")
+      return
+    }
+    router.push("/analysis")
+  }
+
+  const handleGoCommunity = () => {
+    if (!isAuthed) {
+      alert("로그인해주세요")
+      return
+    }
+    router.push("/community")
+  }
   return (
     <div className="min-h-screen bg-background">
       {/* Hero Section */}
@@ -28,18 +49,13 @@ export default function LandingPage() {
             </p>
 
             <div className="flex flex-col items-center justify-center gap-4 sm:flex-row">
-              <Button size="lg" className="group" asChild>
-                {/* 로그인 확인하고 로그인 안 되어 있으면 회원가입 or 로그인으로, 로그인되어 있으면 /analysis로 이동동 */}
-                <Link href="/signup">
-                  분석 시작하기
-                  <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
-                </Link>
+              <Button size="lg" className="group" onClick={handleStartAnalysis}>
+                분석 시작하기
+                <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
               </Button>
-              <Button size="lg" variant="outline" asChild>
-                <Link href="/community">
-                  <Users className="mr-2 h-4 w-4" />
-                  커뮤니티 보기
-                </Link>
+              <Button size="lg" variant="outline" onClick={handleGoCommunity}>
+                <Users className="mr-2 h-4 w-4" />
+                커뮤니티 보기
               </Button>
             </div>
           </div>

front/src/components/Header.tsx

@@ -2,11 +2,23 @@
 
 import Link from "next/link"
 import { useState } from "react"
+import { useRouter } from "next/navigation"
 import { Sparkles } from "lucide-react"
 import { Button } from "@/components/ui/Button"
+import { useAuth } from "@/hooks/auth/useAuth"
 
 export default function Header() {
   const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const router = useRouter()
+  const { isAuthed } = useAuth()
+
+  const guardNav = (path: string) => () => {
+    if (!isAuthed) {
+      alert("로그인해주세요")
+      return
+    }
+    router.push(path)
+  }
 
   return (
     <nav className="border-b border-gray-200 bg-background/80 backdrop-blur-xl">
@@ -28,15 +40,15 @@ export default function Header() {
           <div className="flex items-center gap-6">
             {isLoggedIn ? (
               <>
-                <Link href="/history" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                <button onClick={guardNav("/history")} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                   히스토리
-                </Link>
-                <Link href="/community" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                </button>
+                <button onClick={guardNav("/community")} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                   커뮤니티
-                </Link>
-                <Link href="/settings" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                </button>
+                <button onClick={guardNav("/settings")} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                   마이페이지
-                </Link>
+                </button>
                 {/* 로그아웃 구현 필요요 */}
                 <Button
                   variant="ghost"
@@ -49,20 +61,18 @@ export default function Header() {
               </>
             ) : (
               <>
-                <Link href="/community" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+                <button onClick={guardNav("/community")} className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                   커뮤니티
-                </Link>
+                </button>
 
                 <div className="flex items-center gap-3">
                   {/* 현재는 로그인 누르면 바로 로그인 상태로 변경 중 */}
                   {/* 로그인 누르면 로그인 화면으로, 시작하기 누르면 회원가입으로 넘어가야 함함 */}
                   <Button variant="ghost" size="sm" onClick={() => setIsLoggedIn(true)}>
                     로그인
                   </Button>
-                  <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90" asChild>
-                    <Link href="/signup">
-                      시작하기
-                    </Link>
+                  <Button size="sm" className="bg-primary text-primary-foreground hover:bg-primary/90" onClick={guardNav("/signup")}>
+                    시작하기
                   </Button>
                 </div>
               </>