fix(site-nav): 섹션 앵커를 홈 절대경로로 + 홈에서 hash 스크롤 처리

네비바는 모든 페이지에 렌더되는데 Services/About/FAQ/로고가
인페이지 앵커(#services 등)라 홈이 아닌 페이지에서 누르면 URL 에
# 만 붙고 동작하지 않았음.

- SiteNav: 섹션 링크·로고를 Link to="/#services" 등 홈 절대경로로
- HomePage: useLocation().hash 기반 scrollIntoView effect 추가
  (클라이언트 이동·풀 리로드 모두에서 해당 섹션으로 스크롤)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: i3months

frontend/src/pages/Home/ui/HomePage.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import { SiteNav } from '@/widgets/site-nav'
 import { HomeHero } from '@/widgets/home-hero'
 import { HomeServices } from '@/widgets/home-services'
@@ -7,6 +9,23 @@ import { HomeCta } from '@/widgets/home-cta'
 import { SiteFooter } from '@/widgets/site-footer'
 
 export default function HomePage() {
+  const { hash } = useLocation()
+
+  // 다른 페이지 또는 풀 리로드로 진입할 때 #section 으로 스크롤.
+  // (라우터는 hash 스크롤을 보장하지 않고, 풀 리로드 시 엘리먼트가
+  // 아직 마운트 전이라 브라우저 기본 스크롤이 빗나감)
+  useEffect(() => {
+    const id = hash.replace('#', '')
+    if (!id) {
+      window.scrollTo({ top: 0 })
+      return
+    }
+    const raf = requestAnimationFrame(() => {
+      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' })
+    })
+    return () => cancelAnimationFrame(raf)
+  }, [hash])
+
   return (
     <div className="min-h-svh bg-bg text-fg">
       <SiteNav />

frontend/src/widgets/site-nav/ui/SiteNav.tsx

@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom'
 import { useAuth, useLogout } from '@/features/auth'
 
 const items = [
-  { href: '#services', label: 'Services' },
-  { href: '#quote', label: 'About' },
-  { href: '#faq', label: 'FAQ' },
+  { to: '/#services', label: 'Services' },
+  { to: '/#quote', label: 'About' },
+  { to: '/#faq', label: 'FAQ' },
 ]
 
 export function SiteNav() {
@@ -31,22 +31,22 @@ export function SiteNav() {
       style={{ zIndex: 'var(--z-sticky)' }}
     >
       <div className="mx-auto max-w-content px-6 lg:px-12 h-16 flex items-center justify-between">
-        <a
-          href="#top"
+        <Link
+          to="/#top"
           className="font-heading font-extrabold tracking-[0.04em] text-sage-900 text-[15px] uppercase"
         >
           Stack Up
-        </a>
+        </Link>
 
         <nav aria-label="Primary" className="hidden md:flex items-center gap-1">
           {items.map((it) => (
-            <a
-              key={it.href}
-              href={it.href}
+            <Link
+              key={it.to}
+              to={it.to}
               className="px-3 py-2 text-button text-fg-strong/80 hover:text-fg-strong transition-colors duration-fast"
             >
               {it.label}
-            </a>
+            </Link>
           ))}
         </nav>