Persist welcome dialog visibility
The welcome dialog should remain visible until the user explicitly chooses to hide it.
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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 (
|
||||||
|
|||||||
Reference in New Issue
Block a user