Show welcome dialog in settings

- Added functionality to display the welcome dialog from the help and support settings.
- Replaced the "App Info" card with the welcome dialog trigger in the help and support section.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-22 06:12:02 +00:00
parent 292eddc6e0
commit c37cb565bb

View File

@@ -1,15 +1,17 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { ArrowLeft, HelpCircle, Info, ExternalLink, ShieldQuestion } from 'lucide-react'; import { ArrowLeft, HelpCircle, Book, 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';
import WelcomeDialog from '@/components/onboarding/WelcomeDialog';
const HelpSupport = () => { const HelpSupport = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [messageText, setMessageText] = useState(''); const [messageText, setMessageText] = useState('');
const [showWelcomeDialog, setShowWelcomeDialog] = useState(false);
const faqItems = [ const faqItems = [
{ {
@@ -44,6 +46,18 @@ const HelpSupport = () => {
setMessageText(''); setMessageText('');
}; };
const handleShowWelcomeDialog = () => {
setShowWelcomeDialog(true);
};
const handleCloseWelcomeDialog = (dontShowAgain: boolean) => {
setShowWelcomeDialog(false);
if (dontShowAgain) {
toast.info('환영 화면이 더 이상 표시되지 않도록 설정되었습니다.');
}
};
return ( return (
<div className="min-h-screen bg-neuro-background pb-24"> <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">
@@ -66,11 +80,14 @@ 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"> <Card
className="neuro-flat p-4 flex flex-col items-center text-center cursor-pointer hover:shadow-neuro-convex transition-all duration-300"
onClick={handleShowWelcomeDialog}
>
<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} /> <Book size={24} />
</div> </div>
<h3 className="font-medium"> </h3> <h3 className="font-medium"> </h3>
</Card> </Card>
</div> </div>
@@ -118,7 +135,7 @@ const HelpSupport = () => {
<ExternalLink size={16} className="ml-auto text-gray-400" /> <ExternalLink size={16} className="ml-auto text-gray-400" />
</a> </a>
<a href="#" className="flex items-center p-3 neuro-pressed rounded-md hover:opacity-80 transition-opacity"> <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" /> <ShieldQuestion size={20} className="mr-3 text-neuro-income" />
<span></span> <span></span>
<ExternalLink size={16} className="ml-auto text-gray-400" /> <ExternalLink size={16} className="ml-auto text-gray-400" />
</a> </a>
@@ -130,6 +147,9 @@ const HelpSupport = () => {
</div> </div>
</div> </div>
</div> </div>
{/* 환영 다이얼로그 */}
<WelcomeDialog open={showWelcomeDialog} onClose={handleCloseWelcomeDialog} />
</div> </div>
); );
}; };