Implement first-time user experience

- Implement default state for new users.
- Add a simple tutorial popup for first-time users.

src/components/onboarding/WelcomeDialog.tsx

@@ -0,0 +1,88 @@
+
+import React from "react";
+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";
+
+interface WelcomeDialogProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+const WelcomeDialog: React.FC<WelcomeDialogProps> = ({ open, onClose }) => {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-center text-2xl text-neuro-income mb-2">
+            젤리의 적자탈출에 오신 것을 환영합니다!
+          </DialogTitle>
+          <DialogDescription className="text-center">
+            매달 예산을 계획하고 지출을 관리하여 적자 없는 생활을 시작해보세요.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 my-2">
+          <div className="flex items-start gap-3">
+            <div className="bg-neuro-background p-2 rounded-full">
+              <Wallet className="h-5 w-5 text-neuro-income" />
+            </div>
+            <div>
+              <h3 className="font-medium">예산 설정하기</h3>
+              <p className="text-sm text-gray-500">
+                생활비, 식비 등 카테고리별 월간 예산을 설정하세요.
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-start gap-3">
+            <div className="bg-neuro-background p-2 rounded-full">
+              <PieChart className="h-5 w-5 text-neuro-income" />
+            </div>
+            <div>
+              <h3 className="font-medium">지출 기록하기</h3>
+              <p className="text-sm text-gray-500">
+                일상 속 지출을 간편하게 기록하고 카테고리별로 관리하세요.
+              </p>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-start gap-3">
+            <div className="bg-neuro-background p-2 rounded-full">
+              <LineChart className="h-5 w-5 text-neuro-income" />
+            </div>
+            <div>
+              <h3 className="font-medium">적자 탈출하기</h3>
+              <p className="text-sm text-gray-500">
+                데이터를 분석하고 지출 패턴을 파악하여 효율적인 자산 관리를 시작하세요.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <DialogFooter className="sm:justify-center">
+          <Button 
+            className="w-full sm:w-auto bg-neuro-income text-white hover:bg-neuro-income/90"
+            onClick={onClose}
+          >
+            시작하기 <ArrowRight className="ml-2 h-4 w-4" />
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default WelcomeDialog;