Visual edit in Lovable

Edited UI in Lovable

src/components/onboarding/WelcomeDialog.tsx

@@ -1,25 +1,18 @@
-
 import React, { useState, useEffect } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
+import { 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> = ({ open, onClose }) => {
+const WelcomeDialog: React.FC<WelcomeDialogProps> = ({
+  open,
+  onClose
+}) => {
   const [dontShowAgain, setDontShowAgain] = useState(false);
 
   // 다이얼로그 열릴 때 localStorage 값 확인
@@ -34,7 +27,6 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
       }
     }
   }, [open]);
-
   const handleClose = () => {
     try {
       // 체크박스가 체크되어 있으면 localStorage에 저장
@@ -63,14 +55,12 @@ const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
     // 부모 컴포넌트에 상태 전달
     onClose(dontShowAgain);
   };
-
-  return (
-    <Dialog open={open} onOpenChange={(isOpen) => {
+  return <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 
-            id="dont-show-again" 
-            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"
-          >
+          <Checkbox id="dont-show-again" 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 
-            className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90 focus:outline-none focus:ring-0"
-            onClick={handleClose}
-          >
+          <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}>
             시작하기 <ArrowRight className="ml-2 h-4 w-4" />
           </Button>
         </DialogFooter>
       </DialogContent>
-    </Dialog>
-  );
+    </Dialog>;
 };
-
 export default WelcomeDialog;