Fix welcome dialog persistence
The "Don't show again" checkbox on the welcome dialog was not working correctly. This commit ensures that the dialog remains hidden after the user checks the box, even after navigating to other screens.
This commit is contained in:
@@ -1,5 +1,5 @@
|
|||||||
|
|
||||||
import React, { useState } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@@ -12,6 +12,7 @@ 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";
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
interface WelcomeDialogProps {
|
interface WelcomeDialogProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@@ -21,16 +22,45 @@ interface WelcomeDialogProps {
|
|||||||
const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
|
const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
|
||||||
const [dontShowAgain, setDontShowAgain] = useState(false);
|
const [dontShowAgain, setDontShowAgain] = useState(false);
|
||||||
|
|
||||||
const handleClose = () => {
|
// 다이얼로그 열릴 때 localStorage 값 확인
|
||||||
// 체크박스가 체크되어 있으면 localStorage에 직접 저장
|
useEffect(() => {
|
||||||
if (dontShowAgain) {
|
if (open) {
|
||||||
localStorage.setItem('dontShowWelcome', 'true');
|
const savedValue = localStorage.getItem('dontShowWelcome');
|
||||||
|
console.log('저장된 dontShowWelcome 값:', savedValue);
|
||||||
|
setDontShowAgain(savedValue === 'true');
|
||||||
}
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
try {
|
||||||
|
// 체크박스가 체크되어 있으면 localStorage에 저장
|
||||||
|
if (dontShowAgain) {
|
||||||
|
localStorage.setItem('dontShowWelcome', 'true');
|
||||||
|
console.log('dontShowWelcome 값이 true로 저장되었습니다');
|
||||||
|
|
||||||
|
// 확인을 위한 즉시 재확인
|
||||||
|
const savedValue = localStorage.getItem('dontShowWelcome');
|
||||||
|
console.log('저장 직후 확인된 값:', savedValue);
|
||||||
|
|
||||||
|
// 토스트 메시지로 사용자에게 알림
|
||||||
|
toast.success('환영 메시지가 다시 표시되지 않도록 설정되었습니다');
|
||||||
|
} else {
|
||||||
|
// 체크 해제 시 null이 아닌 'false' 문자열로 명시적 저장
|
||||||
|
localStorage.setItem('dontShowWelcome', 'false');
|
||||||
|
console.log('dontShowWelcome 값이 false로 저장되었습니다');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('localStorage 저장 중 오류 발생:', error);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 부모 컴포넌트에 상태 전달
|
||||||
onClose(dontShowAgain);
|
onClose(dontShowAgain);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog open={open} onOpenChange={() => handleClose()}>
|
<Dialog open={open} onOpenChange={(isOpen) => {
|
||||||
|
if (!isOpen) handleClose();
|
||||||
|
}}>
|
||||||
<DialogContent className="w-[90%] max-w-sm mx-auto">
|
<DialogContent className="w-[90%] max-w-sm mx-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle className="text-center text-2xl text-neuro-income mb-2">
|
<DialogTitle className="text-center text-2xl text-neuro-income mb-2">
|
||||||
|
|||||||
@@ -96,10 +96,21 @@ const Index = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 환영 다이얼로그 표시 여부 결정 (데이터 초기화 후)
|
// 환영 다이얼로그 표시 여부 결정 (데이터 초기화 후)
|
||||||
const dontShowWelcome = localStorage.getItem('dontShowWelcome') === 'true';
|
const checkWelcomeDialogState = () => {
|
||||||
if (!dontShowWelcome) {
|
const dontShowWelcome = localStorage.getItem('dontShowWelcome');
|
||||||
setShowWelcome(true);
|
console.log('Index 페이지 로딩 시 dontShowWelcome 값:', dontShowWelcome);
|
||||||
}
|
|
||||||
|
// 명시적으로 'true' 문자열인 경우에만 숨김 처리
|
||||||
|
if (dontShowWelcome === 'true') {
|
||||||
|
console.log('환영 메시지 표시하지 않음 (저장된 설정)');
|
||||||
|
setShowWelcome(false);
|
||||||
|
} else {
|
||||||
|
console.log('환영 메시지 표시함');
|
||||||
|
setShowWelcome(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkWelcomeDialogState();
|
||||||
|
|
||||||
// 방문 기록 저장 (초기화 후에 저장)
|
// 방문 기록 저장 (초기화 후에 저장)
|
||||||
localStorage.setItem('hasVisitedBefore', 'true');
|
localStorage.setItem('hasVisitedBefore', 'true');
|
||||||
@@ -108,9 +119,18 @@ const Index = () => {
|
|||||||
// 환영 팝업 닫기
|
// 환영 팝업 닫기
|
||||||
const handleCloseWelcome = (dontShowAgain: boolean) => {
|
const handleCloseWelcome = (dontShowAgain: boolean) => {
|
||||||
setShowWelcome(false);
|
setShowWelcome(false);
|
||||||
|
|
||||||
|
// 사용자가 더 이상 보지 않기를 선택한 경우
|
||||||
if (dontShowAgain) {
|
if (dontShowAgain) {
|
||||||
localStorage.setItem('dontShowWelcome', 'true');
|
localStorage.setItem('dontShowWelcome', 'true');
|
||||||
console.log('환영 팝업 더 이상 표시하지 않기 설정됨');
|
console.log('환영 팝업 더 이상 표시하지 않기 설정됨:', dontShowAgain);
|
||||||
|
|
||||||
|
// 설정 확인
|
||||||
|
const savedValue = localStorage.getItem('dontShowWelcome');
|
||||||
|
console.log('설정 후 dontShowWelcome 저장값:', savedValue);
|
||||||
|
} else {
|
||||||
|
// 체크하지 않은 경우 명시적으로 false 저장
|
||||||
|
localStorage.setItem('dontShowWelcome', 'false');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user