Visual edit in Lovable

Edited UI in Lovable

src/pages/HelpSupport.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from 'react';
 import { ArrowLeft, HelpCircle, MessageCircle, Mail, ShieldQuestion, Info, ExternalLink } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
@@ -6,56 +5,39 @@ 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 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">
+  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"
-            >
+            <Button variant="ghost" size="icon" onClick={() => navigate('/settings')} className="mr-2">
               <ArrowLeft size={20} />
             </Button>
             <h1 className="text-2xl font-bold neuro-text">도움말 및 지원</h1>
@@ -97,33 +79,21 @@ const HelpSupport = () => {
         <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}`}>
+            {faqItems.map((item, index) => <AccordionItem key={index} value={`item-${index}`}>
                 <AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
                 <AccordionContent>
                   {item.answer}
                 </AccordionContent>
-              </AccordionItem>
-            ))}
+              </AccordionItem>)}
           </Accordion>
         </div>
         
         {/* Contact Support */}
         <div className="neuro-flat p-6 mb-8">
-          <h2 className="text-xl font-semibold mb-4">문의하기</h2>
+          <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>
+            <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>
         
@@ -149,8 +119,6 @@ const HelpSupport = () => {
           </div>
         </div>
       </div>
-    </div>
-  );
+    </div>;
 };
-
-export default HelpSupport;
+export default HelpSupport;