Remove email and chat cards
Removed the email inquiry and real-time chat cards from the help page.
This commit is contained in:
@@ -1,38 +1,51 @@
|
|||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { ArrowLeft, HelpCircle, MessageCircle, Mail, ShieldQuestion, Info, ExternalLink } from 'lucide-react';
|
import { ArrowLeft, HelpCircle, Info, ExternalLink, ShieldQuestion } from 'lucide-react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||||||
import { Card } from '@/components/ui/card';
|
import { Card } from '@/components/ui/card';
|
||||||
import { toast } from 'sonner';
|
import { toast } from 'sonner';
|
||||||
|
|
||||||
const HelpSupport = () => {
|
const HelpSupport = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [messageText, setMessageText] = useState('');
|
const [messageText, setMessageText] = useState('');
|
||||||
const faqItems = [{
|
|
||||||
question: '앱을 어떻게 사용하나요?',
|
const faqItems = [
|
||||||
answer: '앱은 간단합니다. 홈 화면에서 수입과 지출을 추가할 수 있으며, 거래 내역 화면에서 모든 거래를 확인할 수 있습니다. 분석 화면에서는 지출 패턴을 확인하세요.'
|
{
|
||||||
}, {
|
question: '앱을 어떻게 사용하나요?',
|
||||||
question: '거래를 어떻게 추가하나요?',
|
answer: '앱은 간단합니다. 홈 화면에서 수입과 지출을 추가할 수 있으며, 거래 내역 화면에서 모든 거래를 확인할 수 있습니다. 분석 화면에서는 지출 패턴을 확인하세요.'
|
||||||
answer: '홈 화면 하단의 "+" 버튼을 눌러 새 거래를 추가할 수 있습니다. 금액, 카테고리, 날짜를 입력하고 저장하세요.'
|
},
|
||||||
}, {
|
{
|
||||||
question: '예산을 어떻게 설정하나요?',
|
question: '거래를 어떻게 추가하나요?',
|
||||||
answer: '홈 화면에서 예산 카드를 찾아 카테고리별 예산을 설정할 수 있습니다. 각 카테고리에 원하는 금액을 입력하여 월별 예산을 관리하세요.'
|
answer: '홈 화면 하단의 "+" 버튼을 눌러 새 거래를 추가할 수 있습니다. 금액, 카테고리, 날짜를 입력하고 저장하세요.'
|
||||||
}, {
|
},
|
||||||
question: '계정 정보를 어떻게 변경하나요?',
|
{
|
||||||
answer: '설정 > 프로필 관리 메뉴에서 이름, 이메일, 전화번호 등의 개인 정보를 변경할 수 있습니다.'
|
question: '예산을 어떻게 설정하나요?',
|
||||||
}, {
|
answer: '홈 화면에서 예산 카드를 찾아 카테고리별 예산을 설정할 수 있습니다. 각 카테고리에 원하는 금액을 입력하여 월별 예산을 관리하세요.'
|
||||||
question: '알림 설정은 어디서 변경하나요?',
|
},
|
||||||
answer: '설정 > 알림 설정 메뉴에서 원하는 알림 유형을 켜거나 끌 수 있습니다.'
|
{
|
||||||
}];
|
question: '계정 정보를 어떻게 변경하나요?',
|
||||||
|
answer: '설정 > 프로필 관리 메뉴에서 이름, 이메일, 전화번호 등의 개인 정보를 변경할 수 있습니다.'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: '알림 설정은 어디서 변경하나요?',
|
||||||
|
answer: '설정 > 알림 설정 메뉴에서 원하는 알림 유형을 켜거나 끌 수 있습니다.'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
const sendMessage = () => {
|
const sendMessage = () => {
|
||||||
if (!messageText.trim()) {
|
if (!messageText.trim()) {
|
||||||
toast.error('메시지를 입력해주세요.');
|
toast.error('메시지를 입력해주세요.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
toast.success('문의가 접수되었습니다. 빠른 시일 내에 답변 드리겠습니다.');
|
toast.success('문의가 접수되었습니다. 빠른 시일 내에 답변 드리겠습니다.');
|
||||||
setMessageText('');
|
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">
|
<div className="max-w-md mx-auto px-6">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<header className="py-8">
|
<header className="py-8">
|
||||||
@@ -53,20 +66,6 @@ const HelpSupport = () => {
|
|||||||
<h3 className="font-medium">자주 묻는 질문</h3>
|
<h3 className="font-medium">자주 묻는 질문</h3>
|
||||||
</Card>
|
</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">
|
<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">
|
<div className="neuro-pressed p-3 rounded-full text-neuro-income mb-2">
|
||||||
<Info size={24} />
|
<Info size={24} />
|
||||||
@@ -79,12 +78,14 @@ const HelpSupport = () => {
|
|||||||
<div className="neuro-flat p-6 mb-8">
|
<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>
|
||||||
<Accordion type="single" collapsible className="w-full">
|
<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>
|
<AccordionTrigger className="text-left">{item.question}</AccordionTrigger>
|
||||||
<AccordionContent>
|
<AccordionContent>
|
||||||
{item.answer}
|
{item.answer}
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</AccordionItem>)}
|
</AccordionItem>
|
||||||
|
))}
|
||||||
</Accordion>
|
</Accordion>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -92,8 +93,18 @@ const HelpSupport = () => {
|
|||||||
<div className="neuro-flat p-6 mb-8">
|
<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">
|
<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)} />
|
<textarea
|
||||||
<Button onClick={sendMessage} className="w-full bg-neuro-income text-white hover:bg-neuro-income/90">보내기</Button>
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -119,6 +130,8 @@ const HelpSupport = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default HelpSupport;
|
export default HelpSupport;
|
||||||
Reference in New Issue
Block a user