[feature] help

src/app/help/page.tsx

@@ -0,0 +1,28 @@
+import FaqSection from '@/components/FaqSection';
+
+export default function HelpPage() {
+  return (
+    <div className="max-w-3xl mx-auto p-8">
+      {/* 1. 페이지 제목 및 설명 */}
+      <header className="text-center mb-12">
+        <h1 className="text-4xl font-bold mb-2">도움말</h1>
+        <p className="text-lg text-slate-500">
+          Check Time 서비스에 대해 궁금한 점을 해결해 보세요.
+        </p>
+      </header>
+
+      {/* 2. 자주 묻는 질문 (FAQ) 컴포넌트 */}
+      <FaqSection />
+
+      {/* 3. 추가 문의 섹션 */}
+      <section className="text-center mt-12">
+        <h3 className="text-xl font-semibold mb-4">
+          원하는 답변을 찾지 못하셨나요?
+        </h3>
+        <p className="text-slate-600 mb-6 font-medium">
+          💬 1:1 문의하기 [clolc410@gmail.com]
+        </p>
+      </section>
+    </div>
+  );
+}

src/app/ranking/page.tsx

@@ -26,7 +26,7 @@ export default function RankingPage() {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  const categories = ['전체', '티켓팅', '대학교'];
+  const categories = ['전체', '티켓팅', '대학'];
 
   const fetchSites = useCallback(async () => {
     setLoading(true);

src/components/FaqSection.tsx

@@ -0,0 +1,47 @@
+// file: components/FaqSection.tsx
+
+import FaqItem from './ui/FaqItem';
+
+// FAQ 데이터는 동일하게 유지합니다.
+const faqData = [
+  {
+    id: 1,
+    question: '체크타임의 서버 시간은 정확한가요?',
+    answer:
+      '네, 체크타임은 주요 티켓팅 사이트의 표준 서버 시간을 실시간으로 동기화하여 오차 없는 정확한 시간을 제공합니다.',
+  },
+  {
+    id: 2,
+    question: '지원하는 티켓팅 사이트는 어디인가요?',
+    answer:
+      '현재 인터파크, YES24, 멜론티켓, 티켓링크 등 국내 주요 티켓팅 사이트를 지원하고 있습니다.',
+  },
+  {
+    id: 3,
+    question: '반응속도 게임은 티켓팅에 어떤 도움이 되나요?',
+    answer:
+      '반응속도 게임을 통해 자신의 클릭 반응속도를 측정하고 개선할 수 있습니다. 기록은 데이터베이스에 저장되어, 알림 기능 개선에 활용됩니다.',
+  },
+  {
+    id: 4,
+    question: '알림 기능은 어떠한 원리로 작동하나요?',
+    answer:
+      '체크타임의 알림 기능은 url 서버 시간에 rtt(왕복 시간)과 사용자 반응속도 기록을 반영하여 최적의 타이밍에 알림을 제공합니다.',
+  },
+];
+
+export default function FaqSection() {
+  return (
+    <main className="bg-white rounded-xl shadow-lg">
+      <div className="divide-y divide-slate-100">
+        {faqData.map((item) => (
+          <FaqItem
+            key={item.id}
+            question={item.question}
+            answer={item.answer}
+          />
+        ))}
+      </div>
+    </main>
+  );
+}

src/components/ui/FaqItem.tsx

@@ -0,0 +1,20 @@
+'use client';
+
+interface FaqItemProps {
+  question: string;
+  answer: string;
+}
+
+export default function FaqItem({ question, answer }: FaqItemProps) {
+  return (
+    <details className="group p-6">
+      <summary className="flex justify-between items-center font-bold text-lg cursor-pointer list-none">
+        {question}
+        <span className="transition-transform duration-200 group-open:rotate-45">
+          +
+        </span>
+      </summary>
+      <div className="text-slate-600 mt-4 leading-relaxed">{answer}</div>
+    </details>
+  );
+}

src/components/ui/Header.tsx

@@ -67,7 +67,7 @@ export default function Header(props: HeaderProps) {
           >
             북마크
           </Link>
-          <Link href="#" className="hover:text-black transition-colors">
+          <Link href="/help" className="hover:text-black transition-colors">
             도움말
           </Link>
         </nav>