Persist welcome dialog visibility

The welcome dialog should remain visible until the user explicitly chooses to hide it.
This commit is contained in:
gpt-engineer-app[bot]
2025-03-15 22:53:12 +00:00
parent 6553a3afc9
commit 5da1d76fbd
2 changed files with 33 additions and 5 deletions

View File

@@ -1,5 +1,5 @@
import React from "react"; import React, { useState } from "react";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -11,15 +11,22 @@ import {
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { ArrowRight, Wallet, PieChart, LineChart } from "lucide-react"; import { ArrowRight, Wallet, PieChart, LineChart } from "lucide-react";
import { Checkbox } from "@/components/ui/checkbox";
interface WelcomeDialogProps { interface WelcomeDialogProps {
open: boolean; open: boolean;
onClose: () => void; onClose: (dontShowAgain: boolean) => void;
} }
const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => { const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
const [dontShowAgain, setDontShowAgain] = useState(false);
const handleClose = () => {
onClose(dontShowAgain);
};
return ( return (
<Dialog open={open} onOpenChange={onClose}> <Dialog open={open} onOpenChange={() => handleClose()}>
<DialogContent className="sm:max-w-md"> <DialogContent className="sm:max-w-md">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-center text-2xl text-neuro-income mb-2"> <DialogTitle className="text-center text-2xl text-neuro-income mb-2">
@@ -72,10 +79,24 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
</div> </div>
</div> </div>
<div className="flex items-center space-x-2 mt-4">
<Checkbox
id="dont-show-again"
checked={dontShowAgain}
onCheckedChange={(checked) => setDontShowAgain(checked === true)}
/>
<label
htmlFor="dont-show-again"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
</label>
</div>
<DialogFooter className="sm:justify-center"> <DialogFooter className="sm:justify-center">
<Button <Button
className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90 focus:outline-none focus:ring-0" className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90 focus:outline-none focus:ring-0"
onClick={onClose} onClick={handleClose}
> >
<ArrowRight className="ml-2 h-4 w-4" /> <ArrowRight className="ml-2 h-4 w-4" />
</Button> </Button>

View File

@@ -30,6 +30,7 @@ const Index = () => {
// 첫 방문 여부 확인 및 데이터 초기화 // 첫 방문 여부 확인 및 데이터 초기화
useEffect(() => { useEffect(() => {
const hasVisitedBefore = localStorage.getItem('hasVisitedBefore'); const hasVisitedBefore = localStorage.getItem('hasVisitedBefore');
const dontShowWelcome = localStorage.getItem('dontShowWelcome') === 'true';
if (!hasVisitedBefore) { if (!hasVisitedBefore) {
// 첫 로그인으로 가정하고 모든 데이터 초기화 // 첫 로그인으로 가정하고 모든 데이터 초기화
@@ -37,12 +38,18 @@ const Index = () => {
setShowWelcome(true); setShowWelcome(true);
// 방문 기록 저장 // 방문 기록 저장
localStorage.setItem('hasVisitedBefore', 'true'); localStorage.setItem('hasVisitedBefore', 'true');
} else if (!dontShowWelcome) {
// '더 이상 보지 않기'를 선택하지 않았다면 계속 환영 팝업 표시
setShowWelcome(true);
} }
}, []); }, []);
// 환영 팝업 닫기 // 환영 팝업 닫기
const handleCloseWelcome = () => { const handleCloseWelcome = (dontShowAgain: boolean) => {
setShowWelcome(false); setShowWelcome(false);
if (dontShowAgain) {
localStorage.setItem('dontShowWelcome', 'true');
}
}; };
return ( return (