Add help and support page

Implements the help and support page.

src/App.tsx

@@ -11,6 +11,7 @@ import Settings from "./pages/Settings";
 import ProfileManagement from "./pages/ProfileManagement";
 import NotificationSettings from "./pages/NotificationSettings";
 import SecurityPrivacySettings from "./pages/SecurityPrivacySettings";
+import HelpSupport from "./pages/HelpSupport";
 import NotFound from "./pages/NotFound";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
@@ -32,6 +33,7 @@ const App = () => (
           <Route path="/profile-management" element={<ProfileManagement />} />
           <Route path="/notification-settings" element={<NotificationSettings />} />
           <Route path="/security-privacy-settings" element={<SecurityPrivacySettings />} />
+          <Route path="/help-support" element={<HelpSupport />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />

src/pages/HelpSupport.tsx

@@ -0,0 +1,156 @@
+
+import React, { useState } from 'react';
+import { ArrowLeft, HelpCircle, MessageCircle, Mail, ShieldQuestion, Info, ExternalLink } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+import { Card } from '@/components/ui/card';
+import { toast } from 'sonner';
+
+const HelpSupport = () => {
+  const navigate = useNavigate();
+  const [messageText, setMessageText] = useState('');
+  
+  const faqItems = [
+    {
+      question: '앱을 어떻게 사용하나요?',
+      answer: '앱은 간단합니다. 홈 화면에서 수입과 지출을 추가할 수 있으며, 거래 내역 화면에서 모든 거래를 확인할 수 있습니다. 분석 화면에서는 지출 패턴을 확인하세요.'
+    },
+    {
+      question: '거래를 어떻게 추가하나요?',
+      answer: '홈 화면 하단의 "+" 버튼을 눌러 새 거래를 추가할 수 있습니다. 금액, 카테고리, 날짜를 입력하고 저장하세요.'
+    },
+    {
+      question: '예산을 어떻게 설정하나요?',
+      answer: '홈 화면에서 예산 카드를 찾아 카테고리별 예산을 설정할 수 있습니다. 각 카테고리에 원하는 금액을 입력하여 월별 예산을 관리하세요.'
+    },
+    {
+      question: '계정 정보를 어떻게 변경하나요?',
+      answer: '설정 > 프로필 관리 메뉴에서 이름, 이메일, 전화번호 등의 개인 정보를 변경할 수 있습니다.'
+    },
+    {
+      question: '알림 설정은 어디서 변경하나요?',
+      answer: '설정 > 알림 설정 메뉴에서 원하는 알림 유형을 켜거나 끌 수 있습니다.'
+    },
+  ];
+
+  const sendMessage = () => {
+    if (!messageText.trim()) {
+      toast.error('메시지를 입력해주세요.');
+      return;
+    }
+    
+    toast.success('문의가 접수되었습니다. 빠른 시일 내에 답변 드리겠습니다.');
+    setMessageText('');
+  };
+
+  return (
+    <div className="min-h-screen bg-neuro-background pb-24">
+      <div className="max-w-md mx-auto px-6">
+        {/* Header */}
+        <header className="py-8">
+          <div className="flex items-center mb-6">
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              onClick={() => navigate('/settings')}
+              className="mr-2"
+            >
+              <ArrowLeft size={20} />
+            </Button>
+            <h1 className="text-2xl font-bold neuro-text">도움말 및 지원</h1>
+          </div>
+        </header>
+        
+        {/* Help Categories */}
+        <div className="grid grid-cols-2 gap-4 mb-8">
+          <Card className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300">
+            <div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
+              <HelpCircle size={24} />
+            </div>
+            <h3 className="font-medium">자주 묻는 질문</h3>
+          </Card>
+          
+          <Card className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300">
+            <div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
+              <Mail size={24} />
+            </div>
+            <h3 className="font-medium">이메일 문의</h3>
+          </Card>
+          
+          <Card className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300">
+            <div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
+              <MessageCircle size={24} />
+            </div>
+            <h3 className="font-medium">실시간 채팅</h3>
+          </Card>
+          
+          <Card className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300">
+            <div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
+              <Info size={24} />
+            </div>
+            <h3 className="font-medium">앱 정보</h3>
+          </Card>
+        </div>
+        
+        {/* FAQ Section */}
+        <div className="neuro-flat p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">자주 묻는 질문</h2>
+          <Accordion type="single" collapsible className="w-full">
+            {faqItems.map((item, index) => (
+              <AccordionItem key={index} value={`item-${index}`}>
+                <AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
+                <AccordionContent>
+                  {item.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+        
+        {/* Contact Support */}
+        <div className="neuro-flat p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">문의하기</h2>
+          <div className="space-y-4">
+            <textarea
+              className="w-full p-3 rounded-md neuro-pressed resize-none min-h-[120px]"
+              placeholder="문의 내용을 입력해주세요..."
+              value={messageText}
+              onChange={(e) => setMessageText(e.target.value)}
+            />
+            <Button 
+              onClick={sendMessage} 
+              className="w-full bg-neuro-income text-white hover:bg-neuro-income/90"
+            >
+              문의 보내기
+            </Button>
+          </div>
+        </div>
+        
+        {/* Resources */}
+        <div className="neuro-flat p-6 mb-8">
+          <h2 className="text-xl font-semibold mb-4">유용한 자료</h2>
+          <div className="space-y-3">
+            <a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity">
+              <ShieldQuestion size={20} className="mr-3 text-neuro-income" />
+              <span>사용자 가이드</span>
+              <ExternalLink size={16} className="ml-auto text-gray-400" />
+            </a>
+            <a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity">
+              <Info size={20} className="mr-3 text-neuro-income" />
+              <span>이용약관</span>
+              <ExternalLink size={16} className="ml-auto text-gray-400" />
+            </a>
+            <a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity">
+              <ShieldQuestion size={20} className="mr-3 text-neuro-income" />
+              <span>개인정보 보호정책</span>
+              <ExternalLink size={16} className="ml-auto text-gray-400" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HelpSupport;

src/pages/Settings.tsx

@@ -93,6 +93,7 @@ const Settings = () => {
             icon={HelpCircle} 
             label="도움말 및 지원" 
             description="FAQ 및 고객 지원"
+            onClick={() => navigate('/help-support')}
           />
         </div>