[design] 기존 home UI 전면 개편

src/app/page.tsx

@@ -1,8 +1,9 @@
 'use client';
 
-import ServerSearchForm from '@/components/ServerSearchForm';
-import KoreanStandardTime from '@/components/KoreanStandaradTime';
+import Header from '@/components/ui/Header';
+import SearchForm from '@/components/ServerSearchForm';
 import { useRouter } from 'next/navigation';
+import KoreanStandardTime from '@/components/KoreanStandaradTime';
 
 export default function Home() {
   const router = useRouter();
@@ -12,20 +13,35 @@ export default function Home() {
   };
 
   return (
-    <main className="flex min-h-screen flex-col bg-primary items-center justify-center px-4">
-      <h1 className="text-5xl font-bold text-brand-blue-500">Check Time</h1>
-      <h2 className="mt-4 text-2xl font-semibold text-black">
-        지금, 서버 시간은 몇시인가요?
-      </h2>
+    <div className="min-h-screen bg-gray-50 text-gray-900">
+      {/* Header */}
+      <Header />
+
+      {/* Hero */}
+      <section className="text-center py-16">
+        <div className="inline-flex items-center gap-2 bg-indigo-100 text-indigo-600 text-sm font-medium px-3 py-1 rounded-full mb-6">
+          ✨ 정확한 서버 시간 확인 서비스
+        </div>
+        <h1 className="text-6xl md:text-5xl font-bold tracking-tight bg-gradient-to-br from-black to-gray-600 text-transparent bg-clip-text mb-6">
+          티켓팅 성공을 위한
+          <br />
+          정확한 시간 동기화
+        </h1>
+        <p className="text-gray-600 text-lg max-w-2xl mx-auto leading-relaxed">
+          서버와의 시간 차이를 실시간으로 확인하고, 완벽한 타이밍으로 티켓팅에
+          성공하세요.
+        </p>
+      </section>
+
+      {/* URL Input */}
+      <section className="max-w-xl mx-auto">
+        <SearchForm onSubmit={handleSubmit} />
+      </section>
 
-      <div className="mt-8 w-full max-w-2xl">
-        {/* 검색 input + 버튼 */}
-        <ServerSearchForm onSubmit={handleSubmit} />
-      </div>
-      <div className="mt-8 max-w-3xl w-full">
-        {/* 한국 표준 시간 컴포넌트 */}
-        <KoreanStandardTime />
-      </div>
-    </main>
+      {/* Current Time */}
+      <section className="max-w-3xl mx-auto mb-20 p-10">
+        <KoreanStandardTime showToggle={false} />
+      </section>
+    </div>
   );
 }

src/components/KoreanStandaradTime.tsx

@@ -4,8 +4,10 @@ import { useEffect, useState } from 'react';
 
 export default function KoreanStandardTime({
   showMilliseconds = true,
+  showToggle = true, // 밀리초 체크박스 표시 여부
 }: {
   showMilliseconds?: boolean;
+  showToggle?: boolean;
 }) {
   const [time, setTime] = useState<Date | null>(null);
 
@@ -64,7 +66,7 @@ export default function KoreanStandardTime({
       </div>
 
       <div className="text-center">
-        <div className="flex items-center justify-center gap-4 text-6xl font-bold text-gray-800">
+        <div className="flex items-center justify-center gap-4 text-5xl font-bold text-gray-800">
           {(() => {
             const [h, m, s, ms] = formatTime(time).split(/[:.]/);
             return (
@@ -78,24 +80,27 @@ export default function KoreanStandardTime({
                   <>
                     <span className="text-gray-400">:</span>
                     <span className="text-4xl">{ms}</span>
+
+                    {showToggle && (
+                      <span className="flex items-center text-xl text-gray-500 ml-2 gap-2">
+                        밀리초
+                        <input
+                          type="checkbox"
+                          checked={showMilliseconds}
+                          onChange={(e) =>
+                            typeof window !== 'undefined' &&
+                            document.dispatchEvent(
+                              new CustomEvent('toggleMilliseconds', {
+                                detail: e.target.checked,
+                              }),
+                            )
+                          }
+                          className="w-4 h-4"
+                        />
+                      </span>
+                    )}
                   </>
                 )}
-                <span className="flex items-center text-2xl text-gray-500 ml-2 gap-2">
-                  밀리초
-                  <input
-                    type="checkbox"
-                    checked={showMilliseconds}
-                    onChange={(e) =>
-                      typeof window !== 'undefined' &&
-                      document.dispatchEvent(
-                        new CustomEvent('toggleMilliseconds', {
-                          detail: e.target.checked,
-                        }),
-                      )
-                    }
-                    className="w-4 h-4"
-                  />
-                </span>
               </>
             );
           })()}

src/components/ui/Button.tsx

@@ -9,7 +9,7 @@ export const Button = React.forwardRef<
     <button
       ref={ref}
       className={clsx(
-        'px-4 py-2 rounded-md font-semibold text-white bg-brand-blue-500 hover:bg-brand-blue-700 active:bg-brand-blue-900 transition-colors',
+        'px-6 py-4 rounded-md font-semibold bg-indigo-500 hover:bg-indigo-600 text-white transition-colors',
         className,
       )}
       {...props}

src/components/ui/Header.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import clsx from 'clsx';
+
+export default function Header() {
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 100);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <header
+      className={clsx(
+        'sticky top-0 z-50 backdrop-blur transition-colors duration-300',
+        scrolled
+          ? 'bg-white/95 border-b border-black/10'
+          : 'bg-white/80 border-b border-black/5',
+      )}
+    >
+      <div className="max-w-7xl mx-auto flex items-center justify-between px-6 py-3">
+        {/* 로고 */}
+        <Link
+          href="/"
+          className="flex items-center gap-2 text-black font-semibold text-base"
+        >
+          <div className="w-7 h-7 rounded-md flex items-center justify-center text-white text-sm bg-gradient-to-br from-indigo-400 to-purple-500">
+            ⏰
+          </div>
+          Check Time
+        </Link>
+
+        {/* 네비게이션 */}
+        <nav className="hidden md:flex items-center gap-8 text-sm text-gray-600 font-medium">
+          <Link href="#" className="hover:text-black transition-colors">
+            실시간 랭킹
+          </Link>
+          <Link href="#" className="hover:text-black transition-colors">
+            반응속도 게임
+          </Link>
+          <Link href="#" className="hover:text-black transition-colors">
+            북마크
+          </Link>
+          <Link href="#" className="hover:text-black transition-colors">
+            도움말
+          </Link>
+        </nav>
+
+        {/* 액션 버튼 */}
+        <div className="flex items-center gap-3">
+          <Link
+            href="#"
+            className="text-gray-600 hover:bg-gray-100 px-4 py-2 rounded-md text-sm transition-colors"
+          >
+            로그인
+          </Link>
+          <Link
+            href="#"
+            className="bg-black text-white hover:bg-black/80 px-4 py-2 rounded-md text-sm transition"
+          >
+            시작하기
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}