Visual edit in Lovable

Edited UI in Lovable

src/components/onboarding/WelcomeDialog.tsx

@@ -1,25 +1,18 @@
-
 import React, { useState, useEffect } from "react";
-import {
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { ArrowRight, Wallet, PieChart, LineChart } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { toast } from "sonner";
-
 interface WelcomeDialogProps {
   open: boolean;
   onClose: (dontShowAgain: boolean) => void;
 }
-
+const WelcomeDialog: React.FC<WelcomeDialogProps> = ({
-const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
+  open,
+  onClose
+}) => {
   const [dontShowAgain, setDontShowAgain] = useState(false);
 
   // 다이얼로그 열릴 때 localStorage 값 확인
@@ -34,7 +27,6 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
       }
     }
   }, [open]);
-
   const handleClose = () => {
     try {
       // 체크박스가 체크되어 있으면 localStorage에 저장
@@ -43,11 +35,11 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
         localStorage.setItem('dontShowWelcome', 'true');
         sessionStorage.setItem('dontShowWelcome', 'true');
         console.log('WelcomeDialog - dontShowWelcome 값이 true로 저장되었습니다');
-        
+
         // 확인을 위한 즉시 재확인
         const savedValue = localStorage.getItem('dontShowWelcome');
         console.log('WelcomeDialog - 저장 직후 확인된 값:', savedValue);
-        
+
         // 토스트 메시지로 사용자에게 알림
         toast.success('환영 메시지가 다시 표시되지 않도록 설정되었습니다');
       } else {
@@ -59,18 +51,16 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
     } catch (error) {
       console.error('WelcomeDialog - localStorage 저장 중 오류 발생:', error);
     }
-    
+
     // 부모 컴포넌트에 상태 전달
     onClose(dontShowAgain);
   };
-
+  return <Dialog open={open} onOpenChange={isOpen => {
-  return (
+    if (!isOpen) handleClose();
-    <Dialog open={open} onOpenChange={(isOpen) => {
+  }}>
-      if (!isOpen) handleClose();
-    }}>
       <DialogContent className="w-[90%] max-w-sm mx-auto">
         <DialogHeader>
-          <DialogTitle className="text-center text-2xl text-neuro-income mb-2">
+          <DialogTitle className="text-center text-neuro-income mb-2 text-xl">
             젤리의 적자탈출에 오신 것을 환영합니다!
           </DialogTitle>
           <DialogDescription className="text-center">
@@ -121,31 +111,18 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
         </div>
 
         <div className="flex items-center space-x-2 mt-4">
-          <Checkbox 
+          <Checkbox id="dont-show-again" checked={dontShowAgain} onCheckedChange={checked => setDontShowAgain(checked === true)} className="focus:outline-none focus:ring-0 focus:ring-offset-0" />
-            id="dont-show-again" 
+          <label htmlFor="dont-show-again" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-            checked={dontShowAgain} 
-            onCheckedChange={(checked) => setDontShowAgain(checked === true)}
-            className="focus:outline-none focus:ring-0 focus:ring-offset-0"
-          />
-          <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">
-          <Button 
+          <Button className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90 focus:outline-none focus:ring-0" onClick={handleClose}>
-            className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90 focus:outline-none focus:ring-0"
-            onClick={handleClose}
-          >
             시작하기 <ArrowRight className="ml-2 h-4 w-4" />
           </Button>
         </DialogFooter>
       </DialogContent>
-    </Dialog>
+    </Dialog>;
-  );
 };
-
+export default WelcomeDialog;
-export default WelcomeDialog;