From dd694d541328eff88f40b2f9a193bf12540b478c Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Tue, 16 Sep 2025 13:12:29 +0900
Subject: [PATCH 01/12] =?UTF-8?q?fix:=20=ED=9A=8C=EA=B3=A0=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1=20=EC=98=A4=EB=A5=98=20&=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EB=A6=AC=EB=8B=A4=EC=9D=B4=EB=A0=89=ED=8A=B8=20?=
 =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/reflections/[id]/page.tsx             | 117 +++++++-------
 src/app/reflections/new/page.tsx              |  32 ++--
 src/app/reflections/page.tsx                  | 150 +++++++++---------
 src/components/reflections/ReflectionCard.tsx |  33 ++--
 src/hooks/reflections/useReflections.ts       |  16 +-
 5 files changed, 181 insertions(+), 167 deletions(-)

diff --git a/src/app/reflections/[id]/page.tsx b/src/app/reflections/[id]/page.tsx
index e160c53..b796314 100644
--- a/src/app/reflections/[id]/page.tsx
+++ b/src/app/reflections/[id]/page.tsx
@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import AuthGuard from "@/components/auth/AuthGuard";
-import { useAuth } from "@/hooks/auth";
-import { useReflections } from "@/hooks/reflections/useReflections";
-import { supabase } from "@/lib/supabase";
-import { ReflectionWithKeywords } from "@/types/reflections";
-import { format } from "date-fns";
+import AuthGuard from '@/components/auth/AuthGuard';
+import { useAuth } from '@/hooks/auth';
+import { useReflections } from '@/hooks/reflections/useReflections';
+import { supabase } from '@/lib/supabase';
+import { ReflectionWithKeywords } from '@/types/reflections';
+import { format } from 'date-fns';
 import {
   ArrowLeft,
   Calendar,
@@ -17,10 +17,10 @@ import {
   Share2,
   Trash2,
   User,
-} from "lucide-react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+} from 'lucide-react';
+import Link from 'next/link';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
 
 export interface KeywordRelation {
   keyword: {
@@ -43,7 +43,7 @@ const ReflectionDetailPage = () => {
   });
 
   const [reflection, setReflection] = useState<ReflectionWithKeywords | null>(
-    null,
+    null
   );
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -56,7 +56,7 @@ const ReflectionDetailPage = () => {
       try {
         setIsLoading(true);
         const { data, error } = await supabase
-          .from("reflections")
+          .from('reflections')
           .select(
             `
             *,
@@ -64,15 +64,15 @@ const ReflectionDetailPage = () => {
             keywords:reflection_keyword_relations(
               keyword:reflection_keywords(*)
             )
-          `,
+          `
           )
-          .eq("id", id)
-          .single();
+          .eq('id', id)
+          .maybeSingle();
 
         if (error) throw error;
 
         if (!data) {
-          setError("회고를 찾을 수 없습니다.");
+          setError('회고를 찾을 수 없습니다.');
           return;
         }
 
@@ -81,19 +81,19 @@ const ReflectionDetailPage = () => {
         const isPublic = data.is_public && data.is_neighbor_visible;
 
         if (!isOwn && !isPublic) {
-          setError("이 회고에 접근할 권한이 없습니다.");
+          setError('이 회고에 접근할 권한이 없습니다.');
           return;
         }
 
         // 데이터 변환
         const keywords =
           data.keywords?.map((rk: KeywordRelation) => rk.keyword) || [];
-        const effective_visibility: "public" | "neighbors" | "private" =
+        const effective_visibility: 'public' | 'neighbors' | 'private' =
           data.is_public && data.is_neighbor_visible
-            ? "public"
+            ? 'public'
             : data.is_public && !data.is_neighbor_visible
-              ? "neighbors"
-              : "private";
+              ? 'neighbors'
+              : 'private';
 
         setReflection({
           ...data,
@@ -102,8 +102,8 @@ const ReflectionDetailPage = () => {
           is_own: isOwn,
         });
       } catch (err) {
-        console.error("회고 조회 실패:", err);
-        setError("회고를 불러오는 중 오류가 발생했습니다.");
+        console.error('회고 조회 실패:', err);
+        setError('회고를 불러오는 중 오류가 발생했습니다.');
       } finally {
         setIsLoading(false);
       }
@@ -112,60 +112,69 @@ const ReflectionDetailPage = () => {
     fetchReflection();
   }, [id, user?.id]);
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!reflection) return;
 
-    if (confirm("정말 삭제하시겠습니까? 삭제된 회고는 복구할 수 없습니다.")) {
-      deleteReflection(reflection.id);
-      router.push("./reflections");
+    if (confirm('정말 삭제하시겠습니까? 삭제된 회고는 복구할 수 없습니다.')) {
+      try {
+        await new Promise((resolve, reject) => {
+          deleteReflection(reflection.id, {
+            onSuccess: resolve,
+            onError: reject,
+          });
+        });
+        router.push('/reflections');
+      } catch (error) {
+        console.error('삭제 실패:', error);
+      }
     }
   };
 
   const handleShare = async () => {
     if (!reflection) return;
 
-    if (reflection.effective_visibility === "private") {
-      alert("비공개 회고는 공유할 수 없습니다.");
+    if (reflection.effective_visibility === 'private') {
+      alert('비공개 회고는 공유할 수 없습니다.');
       return;
     }
 
     try {
       await navigator.share({
-        title: reflection.title || "회고",
-        text: reflection.content.slice(1, 100) + "...",
+        title: reflection.title || '회고',
+        text: reflection.content.slice(1, 100) + '...',
         url: window.location.href,
       });
     } catch {
       // Web Share API를 지원하지 않는 경우 URL 복사
       await navigator.clipboard.writeText(window.location.href);
-      alert("링크가 클립보드에 복사되었습니다.");
+      alert('링크가 클립보드에 복사되었습니다.');
     }
   };
 
   const getVisibilityInfo = (
-    visibility: "public" | "neighbors" | "private",
+    visibility: 'public' | 'neighbors' | 'private'
   ) => {
     switch (visibility) {
-      case "public":
+      case 'public':
         return {
           icon: Eye,
-          label: "전체 공개",
-          color: "text-green-600",
-          bgColor: "bg-green-100",
+          label: '전체 공개',
+          color: 'text-green-600',
+          bgColor: 'bg-green-100',
         };
-      case "neighbors":
+      case 'neighbors':
         return {
           icon: User,
-          label: "이웃 공개",
-          color: "text-blue-600",
-          bgColor: "bg-blue-100",
+          label: '이웃 공개',
+          color: 'text-blue-600',
+          bgColor: 'bg-blue-100',
         };
-      case "private":
+      case 'private':
         return {
           icon: Lock,
-          label: "비공개",
-          color: "text-gray-600",
-          bgColor: "bg-gray-100",
+          label: '비공개',
+          color: 'text-gray-600',
+          bgColor: 'bg-gray-100',
         };
     }
   };
@@ -214,7 +223,7 @@ const ReflectionDetailPage = () => {
         <div className="max-w-4xl mx-auto p-4 text-center py-8">
           <div className="bg-white rounded-lg p-8 shadow-sm border">
             <h3 className="text-lg font-medium text-gray-600 mb-2">
-              {error || "회고를 찾을 수 없습니다"}
+              {error || '회고를 찾을 수 없습니다'}
             </h3>
             <Link
               href="/reflections"
@@ -228,7 +237,7 @@ const ReflectionDetailPage = () => {
     );
   }
 
-  const isGratitude = reflection.category?.name === "gratitude";
+  const isGratitude = reflection.category?.name === 'gratitude';
   const TypeIcon = isGratitude ? Heart : Lightbulb;
   const visibilityInfo = getVisibilityInfo(reflection.effective_visibility);
   const VisibilityIcon = visibilityInfo.icon;
@@ -287,19 +296,19 @@ const ReflectionDetailPage = () => {
           <div className="flex flex-col pb-2 border-b border-accent-400">
             <div className="flex gap-2 items-center">
               <div
-                className={`p-3 rounded-lg ${isGratitude ? "bg-orange-100" : "bg-blue-100"}`}
+                className={`p-3 rounded-lg ${isGratitude ? 'bg-orange-100' : 'bg-blue-100'}`}
               >
                 <TypeIcon
-                  className={`w-6 h-6 ${isGratitude ? "text-orange-600" : "text-blue-600"}`}
+                  className={`w-6 h-6 ${isGratitude ? 'text-orange-600' : 'text-blue-600'}`}
                 />
               </div>
               <div className="flex flex-col items-start">
                 <div className="flex items-center gap-1 text-sm text-accent-700">
                   <Calendar className="w-4 h-4" />
-                  {format(new Date(reflection.created_at), "yyyy. M. d. HH:mm")}
+                  {format(new Date(reflection.created_at), 'yyyy. M. d. HH:mm')}
                 </div>
                 <span
-                  className={`text-sm font-medium ${isGratitude ? "text-orange-600" : "text-blue-600"}`}
+                  className={`text-sm font-medium ${isGratitude ? 'text-orange-600' : 'text-blue-600'}`}
                 >
                   {reflection.category?.display_name}
                 </span>
@@ -312,8 +321,8 @@ const ReflectionDetailPage = () => {
             <div className="flex justify-end text-sm text-gray-500">
               {reflection.updated_at !== reflection.created_at && (
                 <span className="text-accent-700">
-                  수정일:{" "}
-                  {format(new Date(reflection.updated_at), "yyyy. M. d. HH:mm")}
+                  수정일:{' '}
+                  {format(new Date(reflection.updated_at), 'yyyy. M. d. HH:mm')}
                 </span>
               )}
             </div>
diff --git a/src/app/reflections/new/page.tsx b/src/app/reflections/new/page.tsx
index ce04b41..48c8c8a 100644
--- a/src/app/reflections/new/page.tsx
+++ b/src/app/reflections/new/page.tsx
@@ -1,14 +1,14 @@
-"use client";
+'use client';
 
-import AuthGuard from "@/components/auth/AuthGuard";
-import ReflectionForm from "@/components/reflections/ReflectionForm";
-import { useAuth } from "@/hooks/auth";
-import { useReflections } from "@/hooks/reflections/useReflections";
-import { ReflectionFormData } from "@/types/reflections";
-import { ArrowLeft, BookOpen } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+import AuthGuard from '@/components/auth/AuthGuard';
+import ReflectionForm from '@/components/reflections/ReflectionForm';
+import { useAuth } from '@/hooks/auth';
+import { useReflections } from '@/hooks/reflections/useReflections';
+import { ReflectionFormData } from '@/types/reflections';
+import { ArrowLeft, BookOpen } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 const NewReflectionPage = () => {
   const router = useRouter();
@@ -27,18 +27,18 @@ const NewReflectionPage = () => {
       { ...formData, user_id: user.id },
       {
         onSuccess: () => {
-          router.push("/reflections");
+          router.push('/reflections');
         },
         onError: (error) => {
-          console.error("회고 작성 실패:", error);
-          setError("회고 작성 중 오류가 발생했습니다. 다시 시도해주세요.");
+          console.error('회고 작성 실패:', error);
+          setError('회고 작성 중 오류가 발생했습니다. 다시 시도해주세요.');
         },
-      },
+      }
     );
   };
 
   const handleCancel = () => {
-    if (confirm("작성을 취소하시겠습니까? 작성된 내용이 사라집니다.")) {
+    if (confirm('작성을 취소하시겠습니까? 작성된 내용이 사라집니다.')) {
       router.back();
     }
   };
@@ -73,7 +73,7 @@ const NewReflectionPage = () => {
         {/* 브레드크럼 네비게이션 */}
         <div>
           <button
-            onClick={router.back}
+            onClick={() => router.back()}
             className="flex items-center transition-colors hover:text-accent-500 hover:cursor-pointer"
           >
             <ArrowLeft className="w-5 h-5" />
diff --git a/src/app/reflections/page.tsx b/src/app/reflections/page.tsx
index 9ebda6e..153e55f 100644
--- a/src/app/reflections/page.tsx
+++ b/src/app/reflections/page.tsx
@@ -1,12 +1,12 @@
-"use client";
-
-import AuthGuard from "@/components/auth/AuthGuard";
-import ReflectionCard from "@/components/reflections/ReflectionCard";
-import { useAuth } from "@/hooks/auth";
-import { useKeywords } from "@/hooks/reflections/useKeywords";
-import { useReflections } from "@/hooks/reflections/useReflections";
-import { DateRangePeriod, ReflectionFilters } from "@/types/reflections";
-import { format, subMonths, subWeeks, subYears } from "date-fns";
+'use client';
+
+import AuthGuard from '@/components/auth/AuthGuard';
+import ReflectionCard from '@/components/reflections/ReflectionCard';
+import { useAuth } from '@/hooks/auth';
+import { useKeywords } from '@/hooks/reflections/useKeywords';
+import { useReflections } from '@/hooks/reflections/useReflections';
+import { DateRangePeriod, ReflectionFilters } from '@/types/reflections';
+import { format, subMonths, subWeeks, subYears } from 'date-fns';
 import {
   BarChart3,
   BookOpen,
@@ -16,10 +16,10 @@ import {
   Plus,
   RefreshCw,
   Search,
-} from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
+} from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useMemo, useState } from 'react';
 
 const ReflectionsPage = () => {
   const router = useRouter();
@@ -27,16 +27,16 @@ const ReflectionsPage = () => {
 
   // 기본 필터 상태
   const [filters, setFilters] = useState<ReflectionFilters>({
-    type: "all",
+    type: 'all',
     keywords: [],
-    searchTerm: "",
-    visibility: "all",
+    searchTerm: '',
+    visibility: 'all',
   });
 
   // 임의 기간 설정 상태
   const [showCustomPeriod, setShowCustomPeriod] = useState(false);
-  const [customStartDate, setCustomStartDate] = useState("");
-  const [customEndDate, setCustomEndDate] = useState("");
+  const [customStartDate, setCustomStartDate] = useState('');
+  const [customEndDate, setCustomEndDate] = useState('');
 
   // 전체 통계용 (필터 없음)
   const { statistics: totalStats } = useReflections({
@@ -57,34 +57,34 @@ const ReflectionsPage = () => {
     const today = new Date();
     return [
       {
-        label: "전체",
-        value: "all",
-        startDate: "",
-        endDate: "",
+        label: '전체',
+        value: 'all',
+        startDate: '',
+        endDate: '',
       },
       {
-        label: "최근 1주일",
-        value: "1week",
-        startDate: format(subWeeks(today, 1), "yyyy-MM-dd"),
-        endDate: format(today, "yyyy-MM-dd"),
+        label: '최근 1주일',
+        value: '1week',
+        startDate: format(subWeeks(today, 1), 'yyyy-MM-dd'),
+        endDate: format(today, 'yyyy-MM-dd'),
       },
       {
-        label: "최근 1개월",
-        value: "1month",
-        startDate: format(subMonths(today, 1), "yyyy-MM-dd"),
-        endDate: format(today, "yyyy-MM-dd"),
+        label: '최근 1개월',
+        value: '1month',
+        startDate: format(subMonths(today, 1), 'yyyy-MM-dd'),
+        endDate: format(today, 'yyyy-MM-dd'),
       },
       {
-        label: "최근 3개월",
-        value: "3months",
-        startDate: format(subMonths(today, 3), "yyyy-MM-dd"),
-        endDate: format(today, "yyyy-MM-dd"),
+        label: '최근 3개월',
+        value: '3months',
+        startDate: format(subMonths(today, 3), 'yyyy-MM-dd'),
+        endDate: format(today, 'yyyy-MM-dd'),
       },
       {
-        label: "최근 1년",
-        value: "1year",
-        startDate: format(subYears(today, 1), "yyyy-MM-dd"),
-        endDate: format(today, "yyyy-MM-dd"),
+        label: '최근 1년',
+        value: '1year',
+        startDate: format(subYears(today, 1), 'yyyy-MM-dd'),
+        endDate: format(today, 'yyyy-MM-dd'),
       },
     ];
   }, []);
@@ -106,7 +106,7 @@ const ReflectionsPage = () => {
   };
 
   const handlePeriodChange = (period: string) => {
-    if (period === "custom") {
+    if (period === 'custom') {
       // 임의기간 클릭 시
       if (showCustomPeriod || isCustomPeriod()) {
         // 이미 임의기간이 활성화되어 있으면 해제
@@ -130,7 +130,7 @@ const ReflectionsPage = () => {
     setShowCustomPeriod(false);
 
     const preset = periodPresets.find((p) => p.value === period);
-    if (preset && preset.value !== "all") {
+    if (preset && preset.value !== 'all') {
       // 같은 기간을 다시 클릭하면 해제
       if (filters.startDate === preset.startDate) {
         handleFiltersChange({
@@ -158,10 +158,10 @@ const ReflectionsPage = () => {
     }
   };
 
-  const handleTypeChange = (type: "all" | "gratitude" | "reflection") => {
+  const handleTypeChange = (type: 'all' | 'gratitude' | 'reflection') => {
     // 같은 타입을 다시 클릭하면 전체로 변경
-    if (filters.type === type && type !== "all") {
-      handleFiltersChange({ type: "all" });
+    if (filters.type === type && type !== 'all') {
+      handleFiltersChange({ type: 'all' });
     } else {
       handleFiltersChange({ type });
     }
@@ -187,21 +187,21 @@ const ReflectionsPage = () => {
 
   const clearFilters = () => {
     setFilters({
-      type: "all",
+      type: 'all',
       keywords: [],
-      searchTerm: "",
-      visibility: "all",
+      searchTerm: '',
+      visibility: 'all',
     });
     setShowCustomPeriod(false);
-    setCustomStartDate("");
-    setCustomEndDate("");
+    setCustomStartDate('');
+    setCustomEndDate('');
   };
 
   const hasActiveFilters =
-    filters.type !== "all" ||
+    filters.type !== 'all' ||
     (filters.keywords?.length ?? 0) > 0 ||
     filters.searchTerm ||
-    filters.visibility !== "all" ||
+    filters.visibility !== 'all' ||
     filters.startDate ||
     filters.endDate;
 
@@ -210,17 +210,17 @@ const ReflectionsPage = () => {
   };
 
   const handleDelete = (id: string) => {
-    if (confirm("정말 삭제하시겠습니까?")) {
+    if (confirm('정말 삭제하시겠습니까?')) {
       deleteReflection(id);
     }
   };
 
   // 현재 선택된 기간 표시
   const getCurrentPeriodLabel = () => {
-    if (!filters.startDate) return "전체";
+    if (!filters.startDate) return '전체';
     const preset = periodPresets.find((p) => p.startDate === filters.startDate);
     if (preset) return preset.label;
-    return "임의기간";
+    return '임의기간';
   };
 
   if (!user?.id) {
@@ -306,7 +306,7 @@ const ReflectionsPage = () => {
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
             <input
               type="text"
-              value={filters.searchTerm || ""}
+              value={filters.searchTerm || ''}
               onChange={(e) =>
                 handleFiltersChange({ searchTerm: e.target.value })
               }
@@ -342,23 +342,23 @@ const ReflectionsPage = () => {
                   key={preset.value}
                   onClick={() => handlePeriodChange(preset.value)}
                   className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors hover:cursor-pointer ${
-                    (preset.value === "all" &&
+                    (preset.value === 'all' &&
                       !filters.startDate &&
                       !showCustomPeriod) ||
                     preset.startDate === filters.startDate
-                      ? "bg-accent-600 text-white"
-                      : "bg-gray-100 text-gray-700 hover:bg-accent-100"
+                      ? 'bg-accent-600 text-white'
+                      : 'bg-gray-100 text-gray-700 hover:bg-accent-100'
                   }`}
                 >
                   {preset.label}
                 </button>
               ))}
               <button
-                onClick={() => handlePeriodChange("custom")}
+                onClick={() => handlePeriodChange('custom')}
                 className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors hover:cursor-pointer ${
                   showCustomPeriod || isCustomPeriod()
-                    ? "bg-accent-600 text-white"
-                    : "bg-gray-100 text-gray-700 hover:bg-accent-100"
+                    ? 'bg-accent-600 text-white'
+                    : 'bg-gray-100 text-gray-700 hover:bg-accent-100'
                 }`}
               >
                 임의기간
@@ -418,17 +418,17 @@ const ReflectionsPage = () => {
             </label>
             <div className="flex gap-2">
               {[
-                { value: "all" as const, label: "전체" },
-                { value: "gratitude" as const, label: "감사" },
-                { value: "reflection" as const, label: "성찰" },
+                { value: 'all' as const, label: '전체' },
+                { value: 'gratitude' as const, label: '감사' },
+                { value: 'reflection' as const, label: '성찰' },
               ].map((type) => (
                 <button
                   key={type.value}
                   onClick={() => handleTypeChange(type.value)}
                   className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors hover:cursor-pointer ${
                     filters.type === type.value
-                      ? "bg-accent-600 text-white"
-                      : "bg-gray-100 text-gray-700 hover:bg-accent-100"
+                      ? 'bg-accent-600 text-white'
+                      : 'bg-gray-100 text-gray-700 hover:bg-accent-100'
                   }`}
                 >
                   {type.label}
@@ -450,15 +450,15 @@ const ReflectionsPage = () => {
                     onClick={() => handleKeywordToggle(keyword.name)}
                     className={`px-2 py-1 rounded-md text-xs font-medium transition-colors hover:cursor-pointer ${
                       filters.keywords?.includes(keyword.name)
-                        ? "text-white"
-                        : "hover:opacity-80"
+                        ? 'text-white'
+                        : 'hover:opacity-80'
                     }`}
                     style={{
                       backgroundColor: filters.keywords?.includes(keyword.name)
                         ? keyword.color
                         : `${keyword.color}20`,
                       color: filters.keywords?.includes(keyword.name)
-                        ? "white"
+                        ? 'white'
                         : keyword.color,
                     }}
                   >
@@ -476,7 +476,7 @@ const ReflectionsPage = () => {
             <div className="flex items-center gap-2">
               <Search className="w-5 h-5 text-accent-600" />
               <h2 className="text-lg font-semibold text-gray-900">
-                {hasActiveFilters ? "검색 결과" : "전체"}
+                {hasActiveFilters ? '검색 결과' : '전체'}
               </h2>
             </div>
             {hasActiveFilters && (
@@ -495,11 +495,11 @@ const ReflectionsPage = () => {
                     <span>{getCurrentPeriodLabel()}</span>
                   </>
                 )}
-                {filters.type !== "all" && (
+                {filters.type !== 'all' && (
                   <>
                     <span>•</span>
                     <span>
-                      {filters.type === "gratitude" ? "감사" : "성찰"}
+                      {filters.type === 'gratitude' ? '감사' : '성찰'}
                     </span>
                   </>
                 )}
@@ -574,13 +574,13 @@ const ReflectionsPage = () => {
               </div>
               <h3 className="text-xl font-medium text-gray-600 mb-2">
                 {hasActiveFilters
-                  ? "필터 조건에 맞는 회고가 없습니다."
-                  : "아직 작성한 회고가 없습니다."}
+                  ? '필터 조건에 맞는 회고가 없습니다.'
+                  : '아직 작성한 회고가 없습니다.'}
               </h3>
               <p className="text-gray-500 mb-6">
                 {hasActiveFilters
-                  ? "다른 필터 조건으로 시도해보세요."
-                  : "첫 번째 회고를 작성해서 성장의 여정을 시작해보세요."}
+                  ? '다른 필터 조건으로 시도해보세요.'
+                  : '첫 번째 회고를 작성해서 성장의 여정을 시작해보세요.'}
               </p>
 
               {hasActiveFilters ? (
diff --git a/src/components/reflections/ReflectionCard.tsx b/src/components/reflections/ReflectionCard.tsx
index 8b0e128..64644a2 100644
--- a/src/components/reflections/ReflectionCard.tsx
+++ b/src/components/reflections/ReflectionCard.tsx
@@ -1,17 +1,17 @@
-"use client";
+'use client';
 
-import { ReflectionWithKeywords } from "@/types/reflections/ui";
+import { ReflectionWithKeywords } from '@/types/reflections/ui';
 import {
   getReflectionTypeBgColor,
   getReflectionTypeColor,
   getReflectionTypeLabel,
   getVisibilityLabel,
   getVisibilityStatus,
-} from "@/utils/reflections/helpers";
-import { format } from "date-fns";
-import { ko } from "date-fns/locale";
-import { Calendar, Edit, Heart, Lightbulb, Trash2 } from "lucide-react";
-import Link from "next/link";
+} from '@/utils/reflections/helpers';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { Calendar, Edit, Heart, Lightbulb, Trash2 } from 'lucide-react';
+import Link from 'next/link';
 
 interface ReflectionCardProps {
   reflection: ReflectionWithKeywords;
@@ -24,7 +24,7 @@ const ReflectionCard = ({
   onEdit,
   onDelete,
 }: ReflectionCardProps) => {
-  const isGratitude = reflection.category?.name === "gratitude";
+  const isGratitude = reflection.category?.name === 'gratitude';
   const TypeIcon = isGratitude ? Heart : Lightbulb;
 
   const handleEdit = (e: React.MouseEvent) => {
@@ -35,6 +35,7 @@ const ReflectionCard = ({
 
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation();
+    e.preventDefault();
     onDelete(reflection.id);
   };
 
@@ -47,10 +48,10 @@ const ReflectionCard = ({
       <div className="flex justify-between mb-3">
         <div className="flex items-center gap-2">
           <div
-            className={`p-2 rounded-lg ${getReflectionTypeBgColor(reflection.category?.name || "gratitude")}`}
+            className={`p-2 rounded-lg ${getReflectionTypeBgColor(reflection.category?.name || 'gratitude')}`}
           >
             <TypeIcon
-              className={`w-4 h-4 ${getReflectionTypeColor(reflection.category?.name || "gratitude")}`}
+              className={`w-4 h-4 ${getReflectionTypeColor(reflection.category?.name || 'gratitude')}`}
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -58,27 +59,27 @@ const ReflectionCard = ({
               <span
                 title={getVisibilityLabel(
                   reflection.is_public,
-                  reflection.is_neighbor_visible,
+                  reflection.is_neighbor_visible
                 )}
               >
                 {getVisibilityStatus(
                   reflection.is_public,
-                  reflection.is_neighbor_visible,
+                  reflection.is_neighbor_visible
                 )}
               </span>
               <span
-                className={`text-sm font-medium ${getReflectionTypeColor(reflection.category?.name || "gratitude")}`}
+                className={`text-sm font-medium ${getReflectionTypeColor(reflection.category?.name || 'gratitude')}`}
               >
                 {reflection.category?.display_name ||
                   getReflectionTypeLabel(
-                    reflection.category?.name || "gratitude",
+                    reflection.category?.name || 'gratitude'
                   )}
               </span>
             </div>
 
             <div className="flex items-center gap-2 text-xs text-gray-500">
               <Calendar className="w-3 h-3" />
-              {format(new Date(reflection.date), "yyyy. M. d.", {
+              {format(new Date(reflection.date), 'yyyy. M. d.', {
                 locale: ko,
               })}
             </div>
@@ -113,7 +114,7 @@ const ReflectionCard = ({
             {reflection.title}
           </h3>
         ) : (
-          <h3 className="text-lg font-medium min-h-[18px]">{""}</h3>
+          <h3 className="text-lg font-medium min-h-[18px]">{''}</h3>
         )}
 
         {/* 내용 */}
diff --git a/src/hooks/reflections/useReflections.ts b/src/hooks/reflections/useReflections.ts
index 8315e6c..d6a3b53 100644
--- a/src/hooks/reflections/useReflections.ts
+++ b/src/hooks/reflections/useReflections.ts
@@ -144,14 +144,18 @@ export const useReflections = ({
   // 회고 생성
   const createReflectionMutation = useMutation({
     mutationFn: async (formData: ReflectionFormData & { user_id: string }) => {
-      const { keywords: keywordNames, ...reflectionData } = formData;
+      const { keywords: keywordNames } = formData;
 
       // 기본값 설정
-      const dataWithDefaults = {
-        ...reflectionData,
-        is_public: reflectionData.is_public ?? true,
-        is_neighbor_visible: reflectionData.is_neighbor_visible ?? true,
-      };
+    const dataWithDefaults = {
+      user_id: formData.user_id,
+      category_id: formData.category_id,
+      title: formData.title,
+      content: formData.content,
+      date: formData.date,
+      is_public: formData.is_public ?? true,
+      is_neighbor_visible: formData.is_neighbor_visible ?? true,
+    };
 
       // 1. 회고 생성
       const { data: reflection, error: reflectionError } = await supabase

From 7902ccb80ee7bf0f620b464df627cffb8cd5ee21 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Tue, 16 Sep 2025 22:10:30 +0900
Subject: [PATCH 02/12] =?UTF-8?q?remove:=20=EB=AA=A9=ED=91=9C=20=EB=8F=84?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EC=B4=88=EA=B8=B0=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/goals/page.tsx                        | 328 ------------------
 src/app/layout.tsx                            |  29 +-
 .../budget/TransactionAlertProvider.tsx       |  54 ---
 src/components/goals/GoalCard.tsx             | 106 ------
 .../goals/GoalCompletionNotification.tsx      |  64 ----
 .../goals/GoalCompletionProvider.tsx          |  30 --
 src/components/goals/GoalEditModal.tsx        | 206 -----------
 .../goals/GoalUpdateNotification.tsx          |  96 -----
 src/components/layout/Header.tsx              |  62 ++--
 src/hooks/budget/useTransactionAlert.ts       |  44 ---
 src/hooks/goals/useFoalCompletionAlert.ts     |  30 --
 src/hooks/goals/useGoalChecker.ts             |  84 -----
 src/hooks/goals/useGoalStatusUpdater.ts       | 153 --------
 src/hooks/goals/useGoals.ts                   | 210 -----------
 14 files changed, 44 insertions(+), 1452 deletions(-)
 delete mode 100644 src/app/goals/page.tsx
 delete mode 100644 src/components/budget/TransactionAlertProvider.tsx
 delete mode 100644 src/components/goals/GoalCard.tsx
 delete mode 100644 src/components/goals/GoalCompletionNotification.tsx
 delete mode 100644 src/components/goals/GoalCompletionProvider.tsx
 delete mode 100644 src/components/goals/GoalEditModal.tsx
 delete mode 100644 src/components/goals/GoalUpdateNotification.tsx
 delete mode 100644 src/hooks/budget/useTransactionAlert.ts
 delete mode 100644 src/hooks/goals/useFoalCompletionAlert.ts
 delete mode 100644 src/hooks/goals/useGoalChecker.ts
 delete mode 100644 src/hooks/goals/useGoalStatusUpdater.ts
 delete mode 100644 src/hooks/goals/useGoals.ts

diff --git a/src/app/goals/page.tsx b/src/app/goals/page.tsx
deleted file mode 100644
index b4b32bf..0000000
--- a/src/app/goals/page.tsx
+++ /dev/null
@@ -1,328 +0,0 @@
-"use client";
-
-import AuthGuard from "@/components/auth/AuthGuard";
-import GoalCard from "@/components/goals/GoalCard";
-import { useAuth } from "@/hooks/auth";
-import { useGoals } from "@/hooks/goals/useGoals";
-import {
-  Calendar,
-  Clock,
-  Filter,
-  Plus,
-  Search,
-  Target,
-  TrendingUp,
-  Trophy,
-} from "lucide-react";
-import Link from "next/link";
-import { useMemo, useState } from "react";
-
-const GoalsPage = () => {
-  const { user } = useAuth();
-  const { goals, activeGoals, completedGoals, isLoading } = useGoals({
-    userId: user?.id,
-  });
-
-  // 필터 상태
-  const [activeTab, setActiveTab] = useState<
-    "active" | "completed" | "paused" | "cancelled" | "all"
-  >("active");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [typeFilter, setTypeFilter] = useState<"all" | "income" | "expense">(
-    "all",
-  );
-
-  // 필터링된 목표들
-  const filteredGoals = useMemo(() => {
-    let filtered = goals;
-
-    if (activeTab !== "all") {
-      filtered = goals.filter((goal) => goal.status === activeTab);
-    }
-
-    if (searchTerm) {
-      filtered = filtered.filter(
-        (goal) =>
-          goal.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          goal.description?.toLowerCase().includes(searchTerm.toLowerCase()),
-      );
-    }
-
-    if (typeFilter !== "all") {
-      filtered = filtered.filter((goal) => {
-        return typeFilter === "income"
-          ? goal.type === "increase_income"
-          : goal.type === "reduce_expense";
-      });
-    }
-
-    return filtered;
-  }, [goals, activeTab, searchTerm, typeFilter]);
-
-  // 통계 계산
-  const statistics = {
-    total: goals.length,
-    active: activeGoals.length,
-    completed: completedGoals.length,
-    completionRate:
-      goals.length > 0 ? (completedGoals.length / goals.length) * 100 : 0,
-  };
-
-  // 핸들러들
-  const handleTypeFilterChange = (value: string) => {
-    if (value === "all" || value === "income" || value === "expense") {
-      setTypeFilter(value);
-    }
-  };
-
-  if (!user?.id) {
-    return (
-      <AuthGuard>
-        <div className="max-w-7xl mx-auto p-4 text-center py-8">
-          <div className="bg-white rounded-lg p-8 shadow-sm border">
-            <h3 className="text-lg font-medium text-gray-600 mb-2">
-              로그인이 필요합니다
-            </h3>
-            <p className="text-gray-500">
-              목표를 관리하려면 먼저 로그인해주세요.
-            </p>
-          </div>
-        </div>
-      </AuthGuard>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <AuthGuard>
-        <div className="max-w-7xl mx-auto p-4 space-y-6">
-          <div className="animate-pulse space-y-4">
-            <div className="h-8 bg-gray-200 rounded w-1/4"></div>
-            <div className="grid grid-cols-1 gap-4">
-              {[...Array(6)].map((_, i) => (
-                <div key={i} className="h-48 bg-gray-200 rounded-lg"></div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </AuthGuard>
-    );
-  }
-
-  return (
-    <AuthGuard>
-      <div className="max-w-7xl mx-auto p-4 space-y-6">
-        {/* 헤더 */}
-        <div className="flex flex-col gap-4">
-          <div>
-            <h1 className="text-2xl font-bold text-gray-900">내 목표</h1>
-            <p className="text-gray-600 mt-1">
-              진행 중인 챌린지와 달성한 목표를 확인하세요.
-            </p>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <button className="flex items-center gap-2 px-4 py-2 bg-accent-600 text-white rounded-lg hover:bg-accent-700 transition-colors">
-              <Plus className="w-4 h-4" />
-              목표 추가
-            </button>
-          </div>
-        </div>
-
-        {/* 통계 카드 */}
-        <div className="grid grid-cols-2 gap-4">
-          <div className="bg-white p-4 rounded-lg border shadow-sm">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-blue-100 rounded-lg">
-                <Target className="w-5 h-5 text-blue-600" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">전체</p>
-                <p className="text-xl font-bold text-gray-900">
-                  {statistics.total}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-4 rounded-lg border shadow-sm">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-orange-100 rounded-lg">
-                <Clock className="w-5 h-5 text-orange-600" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">진행 중</p>
-                <p className="text-xl font-bold text-gray-900">
-                  {statistics.active}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-4 rounded-lg border shadow-sm">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-green-100 rounded-lg">
-                <Trophy className="w-5 h-5 text-green-600" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">완료</p>
-                <p className="text-xl font-bold text-gray-900">
-                  {statistics.completed}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <div className="bg-white p-4 rounded-lg border shadow-sm">
-            <div className="flex items-center gap-3">
-              <div className="p-2 bg-purple-100 rounded-lg">
-                <Calendar className="w-5 h-5 text-purple-600" />
-              </div>
-              <div>
-                <p className="text-sm text-gray-600">달성률</p>
-                <p className="text-xl font-bold text-gray-900">
-                  {Math.round(statistics.completionRate)}%
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* 필터 및 검색 */}
-        <div className="bg-white p-4 rounded-lg border shadow-sm">
-          <div className="flex flex-col md:flex-row gap-4">
-            {/* 탭 */}
-            <div className="flex bg-gray-100 rounded-lg p-1">
-              <button
-                onClick={() => setActiveTab("active")}
-                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === "active"
-                    ? "bg-white text-gray-900 shadow-sm"
-                    : "text-gray-600 hover:text-gray-900"
-                }`}
-              >
-                진행 ({statistics.active})
-              </button>
-              <button
-                onClick={() => setActiveTab("completed")}
-                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === "completed"
-                    ? "bg-white text-gray-900 shadow-sm"
-                    : "text-gray-600 hover:text-gray-900"
-                }`}
-              >
-                완료 ({statistics.completed})
-              </button>
-              <button
-                onClick={() => setActiveTab("paused")}
-                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === "completed"
-                    ? "bg-white text-gray-900 shadow-sm"
-                    : "text-gray-600 hover:text-gray-900"
-                }`}
-              >
-                멈춤 ({statistics.completed})
-              </button>
-              <button
-                onClick={() => setActiveTab("cancelled")}
-                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === "completed"
-                    ? "bg-white text-gray-900 shadow-sm"
-                    : "text-gray-600 hover:text-gray-900"
-                }`}
-              >
-                취소 ({statistics.completed})
-              </button>
-              <button
-                onClick={() => setActiveTab("all")}
-                className={`flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === "all"
-                    ? "bg-white text-gray-900 shadow-sm"
-                    : "text-gray-600 hover:text-gray-900"
-                }`}
-              >
-                전체 ({statistics.total})
-              </button>
-            </div>
-
-            {/* 검색 */}
-            <div className="flex-1 relative">
-              <Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
-              <input
-                type="text"
-                placeholder="목표 제목이나 설명으로 검색..."
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-              />
-            </div>
-
-            {/* 타입 필터 */}
-            <div className="flex items-center gap-2">
-              <Filter className="w-4 h-4 text-gray-400" />
-              <select
-                value={typeFilter}
-                onChange={(e) => handleTypeFilterChange(e.target.value)}
-                className="px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-              >
-                <option value="all">전체</option>
-                <option value="income">수입 증가</option>
-                <option value="expense">지출 감소</option>
-              </select>
-            </div>
-          </div>
-        </div>
-
-        {/* 목표 목록 */}
-        {filteredGoals.length > 0 ? (
-          <div className="grid grid-cols-1 gap-6">
-            {filteredGoals.map((goal) => (
-              <GoalCard key={goal.id} goal={goal} />
-            ))}
-          </div>
-        ) : (
-          <div className="bg-white rounded-lg p-12 shadow-sm border text-center">
-            <div className="text-gray-400 mb-4">
-              <Target className="w-16 h-16 mx-auto" />
-            </div>
-            <h3 className="text-xl font-medium text-gray-600 mb-2">
-              {activeTab === "active"
-                ? "진행 중인 목표가 없습니다."
-                : activeTab === "completed"
-                  ? "완료된 목표가 없습니다."
-                  : searchTerm
-                    ? "검색 결과가 없습니다."
-                    : "아직 목표가 없습니다."}
-            </h3>
-            <p className="text-gray-500 mb-6">
-              {activeTab === "active"
-                ? "가계부에서 챌린지를 시작하거나 새로운 목표를 만들어보세요."
-                : activeTab === "completed"
-                  ? "목표를 달성하면 여기에 표시됩니다."
-                  : searchTerm
-                    ? "다른 검색어로 시도해보세요."
-                    : "첫 번째 목표를 만들어 성장을 시작해보세요."}
-            </p>
-            {!searchTerm && (
-              <div className="flex flex-col justify-center">
-                <button className="inline-flex items-center gap-2 px-6 py-3 bg-accent-600 text-white rounded-lg hover:bg-accent-700 transition-colors">
-                  <Plus className="w-4 h-4" />
-                  목표 추가
-                </button>
-                <Link
-                  href="/budget"
-                  className="inline-flex items-center gap-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
-                >
-                  <TrendingUp className="w-4 h-4" />
-                  가계부 챌린지
-                </Link>
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </AuthGuard>
-  );
-};
-
-export default GoalsPage;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1dafc92..dd04ad7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,15 +1,14 @@
-import { Inter } from "next/font/google";
-import "./globals.css";
-import Providers from "./providers";
-import Header from "@/components/layout/Header";
-import TransactionAlertProvider from "@/components/budget/TransactionAlertProvider";
-const inter = Inter({ subsets: ["latin"] });
+import { Inter } from 'next/font/google';
+import './globals.css';
+import Providers from './providers';
+import Header from '@/components/layout/Header';
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
-  title: "DaylyLog - 매일의 기록이 만드는 특별한 변화",
+  title: 'DaylyLog - 매일의 기록이 만드는 특별한 변화',
   description:
-    "일상을 기록하고, 목표를 달성하며, 성장을 추적하는 스마트한 방법",
-  keywords: "가계부, 목표달성, 일상기록, 성찰, 자기계발",
+    '일상을 기록하고, 목표를 달성하며, 성장을 추적하는 스마트한 방법',
+  keywords: '가계부, 목표달성, 일상기록, 성찰, 자기계발',
 };
 
 export default function RootLayout({
@@ -25,13 +24,11 @@ export default function RootLayout({
       </head>
       <body className={`${inter.className} bg-gray-50 min-h-screen`}>
         <Providers>
-          <TransactionAlertProvider>
-            <div className="min-h-screen flex flex-col">
-              <Header />
-              <main className="flex-1">{children}</main>
-              {/* // TODO: Footer 추가 */}
-            </div>
-          </TransactionAlertProvider>
+          <div className="min-h-screen flex flex-col">
+            <Header />
+            <main className="flex-1">{children}</main>
+            {/* // TODO: Footer 추가 */}
+          </div>
         </Providers>
       </body>
     </html>
diff --git a/src/components/budget/TransactionAlertProvider.tsx b/src/components/budget/TransactionAlertProvider.tsx
deleted file mode 100644
index 8d2e8a9..0000000
--- a/src/components/budget/TransactionAlertProvider.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-"use client";
-
-import { createContext, ReactNode, useContext } from "react";
-import GoalUpdateNotification from "../goals/GoalUpdateNotification";
-import { useTransactionAlert } from "@/hooks/budget/useTransactionAlert";
-
-interface TransactionAlertContextType {
-  showAlert: (categoryName: string, type: "income" | "expense") => void;
-  hideAlert: (categoryName: string) => void;
-  clearAllAlerts: () => void;
-}
-
-const TransactionAlertContext =
-  createContext<TransactionAlertContextType | null>(null);
-
-export const useTransactionAlertContext = () => {
-  const context = useContext(TransactionAlertContext);
-  if (!context) {
-    throw new Error(
-      "useTransactionAlertContext must be used within a TransactionAlertProvider",
-    );
-  }
-  return context;
-};
-
-interface TransactionAlertProviderProps {
-  children: ReactNode;
-}
-
-const TransactionAlertProvider = ({
-  children,
-}: TransactionAlertProviderProps) => {
-  const { alerts, showAlert, hideAlert, clearAllAlerts } =
-    useTransactionAlert();
-
-  return (
-    <TransactionAlertContext.Provider
-      value={{ showAlert, hideAlert, clearAllAlerts }}
-    >
-      {children}
-
-      {/* 알림들 렌더링 */}
-      {alerts.map((alert) => (
-        <GoalUpdateNotification
-          key={`${alert.categoryName}-${alert.type}`}
-          categoryName={alert.categoryName}
-          onClose={() => hideAlert(alert.categoryName)}
-        />
-      ))}
-    </TransactionAlertContext.Provider>
-  );
-};
-
-export default TransactionAlertProvider;
diff --git a/src/components/goals/GoalCard.tsx b/src/components/goals/GoalCard.tsx
deleted file mode 100644
index 1225bab..0000000
--- a/src/components/goals/GoalCard.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Goal, GoalProgressInfo } from "@/types/goals";
-import { format } from "date-fns";
-import { ko } from "date-fns/locale";
-import { CheckCircle, TrendingDown, TrendingUp } from "lucide-react";
-
-interface GoalCardProps {
-  goal: Goal & { progress: GoalProgressInfo };
-}
-
-const GoalCard = ({ goal }: GoalCardProps) => {
-  const { progress } = goal;
-
-  return (
-    <div
-      className={`bg-white rounded-lg p-6 shadow-sm border transition-all hover:shadow-md ${
-        progress.isComplete
-          ? "border-green-200 bg-green-50/30"
-          : "border-gray-200"
-      }`}
-    >
-      <div className="flex items-start justify-between mb-4">
-        <div className="flex items-center gap-3">
-          <div
-            className={`p-2 rounded-lg ${
-              goal.type === "increase_income"
-                ? "bg-green-100 text-green-600"
-                : "bg-red-100 text-red-600"
-            }`}
-          >
-            {goal.type === "increase_income" ? (
-              <TrendingUp className="w-5 h-5" />
-            ) : (
-              <TrendingDown className="w-5 h-5" />
-            )}
-          </div>
-          <div>
-            <h3 className="font-semibold text-gray-900">{goal.title}</h3>
-            <p className="text-sm text-gray-600">{progress.progressText}</p>
-          </div>
-        </div>
-
-        {progress.isComplete && (
-          <CheckCircle className="w-6 h-6 text-green-600" />
-        )}
-      </div>
-
-      {/* 진행률 바 */}
-      <div className="mb-4">
-        <div className="flex justify-between text-sm text-gray-600 mb-2">
-          <span>진행률</span>
-          <span>{Math.round(progress.overallProgress)}%</span>
-        </div>
-        <div className="w-full bg-gray-200 rounded-full h-2">
-          <div
-            className={`h-2 rounded-full transition-all duration-300 ${
-              progress.isComplete ? "bg-green-500" : "bg-accent-500"
-            }`}
-            style={{ width: `${Math.min(100, progress.overallProgress)}%` }}
-          />
-        </div>
-      </div>
-
-      {/* 목표 상세 정보 */}
-      <div className="space-y-2 text-sm">
-        {goal.target_amount && (
-          <div className="flex justify-between">
-            <span className="text-gray-600">금액 목표:</span>
-            <span className="font-medium">
-              {goal.current_amount.toLocaleString()} /{" "}
-              {goal.target_amount.toLocaleString()}원
-            </span>
-          </div>
-        )}
-
-        {goal.target_count && (
-          <div className="flex justify-between">
-            <span className="text-gray-600">횟수 목표:</span>
-            <span className="font-medium">
-              {goal.current_count} / {goal.target_count}회
-            </span>
-          </div>
-        )}
-
-        {goal.target_date && (
-          <div className="flex justify-between">
-            <span className="text-gray-600">마감일:</span>
-            <span className="font-medium">
-              {format(new Date(goal.target_date), "yyyy년 M월 d일", {
-                locale: ko,
-              })}
-            </span>
-          </div>
-        )}
-      </div>
-
-      {/* 이유 */}
-      {goal.reason && (
-        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
-          <p className="text-sm text-gray-700">{goal.reason}</p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default GoalCard;
diff --git a/src/components/goals/GoalCompletionNotification.tsx b/src/components/goals/GoalCompletionNotification.tsx
deleted file mode 100644
index 56e5756..0000000
--- a/src/components/goals/GoalCompletionNotification.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { CheckCircle, Trophy, X } from "lucide-react";
-import { useEffect, useState } from "react";
-
-interface GoalCompletionNotificationProps {
-  goalTitle: string;
-  onClose: () => void;
-  autoCloseDelay?: number;
-}
-
-const GoalCompletionNotification = ({
-  goalTitle,
-  onClose,
-  autoCloseDelay = 5000,
-}: GoalCompletionNotificationProps) => {
-  const [isVisible, setIsVisible] = useState(true);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsVisible(false);
-      setTimeout(onClose, 300);
-    }, autoCloseDelay);
-
-    return () => clearTimeout(timer);
-  }, [autoCloseDelay, onClose]);
-
-  if (!isVisible) return null;
-
-  return (
-    <div className="fixed top-4 right-4 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg shadow-2xl p-6 max-w-sm z-50 animate-in slide-in-from-right duration-300">
-      <div className="flex items-start gap-4">
-        <div className="p-2 bg-white/20 rounded-full">
-          <Trophy className="w-6 h-6" />
-        </div>
-
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <CheckCircle className="w-5 h-5" />
-            <h3 className="font-bold text-lg">목표 달성!</h3>
-          </div>
-          <p className="text-green-100 text-sm mb-2">
-            {goalTitle} 챌린지를 성공적으로 완료했습니다!
-          </p>
-          <p className="text-green-200 text-xs">
-            축하합니다! 꾸준한 노력이 결실을 맺었네요.
-          </p>
-        </div>
-
-        <button
-          onClick={() => {
-            setIsVisible(false);
-            setTimeout(onClose, 300);
-          }}
-          className="p-1 text-white/80 hover:text-white transition-colors"
-        >
-          <X className="w-4 h-4" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default GoalCompletionNotification;
diff --git a/src/components/goals/GoalCompletionProvider.tsx b/src/components/goals/GoalCompletionProvider.tsx
deleted file mode 100644
index 83c38b4..0000000
--- a/src/components/goals/GoalCompletionProvider.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import { useGoalCompletionAlert } from "@/hooks/goals/useFoalCompletionAlert";
-import { ReactNode } from "react";
-import GoalCompletionNotification from "./GoalCompletionNotification";
-
-interface GoalCompletionProviderProps {
-  children: ReactNode;
-}
-
-const GoalCompletionProvider = ({ children }: GoalCompletionProviderProps) => {
-  const { completedGoals, hideCompletionAlert } = useGoalCompletionAlert();
-
-  return (
-    <>
-      {children}
-
-      {/* 완료 알림들 렌더링 */}
-      {completedGoals.map((goal) => (
-        <GoalCompletionNotification
-          key={goal.id}
-          goalTitle={goal.title}
-          onClose={() => hideCompletionAlert(goal.id)}
-        />
-      ))}
-    </>
-  );
-};
-
-export default GoalCompletionProvider;
diff --git a/src/components/goals/GoalEditModal.tsx b/src/components/goals/GoalEditModal.tsx
deleted file mode 100644
index 6fec423..0000000
--- a/src/components/goals/GoalEditModal.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-"use client";
-
-import { useGoals } from "@/hooks/goals/useGoals";
-import { Goal } from "@/types/goals";
-import { useState } from "react";
-import Modal from "../common/Modal";
-import { Target, TrendingDown, TrendingUp } from "lucide-react";
-import { format } from "date-fns";
-
-interface GoalEditModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  goals: Array<{ goal: Goal; currentAmount: number; currentCount: number }>;
-  currentIndex: number;
-  totalCount: number;
-}
-
-const GoalEditModal = ({
-  isOpen,
-  onClose,
-  goals,
-  currentIndex,
-  totalCount,
-}: GoalEditModalProps) => {
-  const { updateGoal, isUpdatingGoal } = useGoals();
-
-  const currentGoalData = goals[currentIndex];
-  const { goal, currentAmount, currentCount } = currentGoalData;
-
-  const [formData, setFormData] = useState({
-    target_amount: goal.target_amount?.toString() || "",
-    target_count: goal.target_count?.toString() || "",
-    target_date: goal.target_date?.toString() || "",
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    updateGoal({
-      id: goal.id,
-      target_amount: formData.target_amount
-        ? Number(formData.target_amount)
-        : null,
-      target_count: formData.target_count
-        ? Number(formData.target_count)
-        : null,
-      target_date: formData.target_date || null,
-    });
-
-    // 다음 목표로 이동 또는 완료
-    if (currentIndex + 1 < totalCount) {
-      // 다음 목표의 데이터로 폼 초기화
-      const nextGoal = goals[currentIndex + 1].goal;
-      setFormData({
-        target_amount: nextGoal.target_amount?.toString() || "",
-        target_count: nextGoal.target_count?.toString() || "",
-        target_date: nextGoal.target_date?.toString() || "",
-      });
-    }
-
-    onClose(); // 부모 컴포넌트에서 다음 목표 처리
-  };
-
-  const isIncome = goal.type === "increase_income";
-
-  return (
-    <Modal isOpen={isOpen} onClose={onClose} size="md">
-      <Modal.Header>
-        <div className="flex items-center gap-3">
-          <div className="p-2 bg-amber-100 rounded-lg">
-            <Target className="w-5 h-5 text-amber-600" />
-          </div>
-          <div>
-            <Modal.Title>
-              챌린지 수정 ({currentIndex + 1}/{totalCount})
-            </Modal.Title>
-            <Modal.Description>
-              거래 내역 변경으로 인해 목표를 조정하세요.
-            </Modal.Description>
-          </div>
-        </div>
-      </Modal.Header>
-
-      <Modal.Body>
-        <div className="space-y-6">
-          {/* 현재 상황 표시 */}
-          <div className="bg-gray-50 rounded-lg p-4">
-            <h3 className="font-medium text-gray-900 mb-3 flex items-center gap-2">
-              {isIncome ? (
-                <TrendingUp className="w-4 h-4 text-green-600" />
-              ) : (
-                <TrendingDown className="w-4 h-4 text-red-600" />
-              )}
-              {goal.title}
-            </h3>
-
-            <div className="grid grid-cols-2 gap-4 text-sm">
-              <div>
-                <span className="text-gray-600">현재 실제:</span>
-                <div className="font-medium">
-                  {currentAmount.toLocaleString()}원 ({currentCount}건)
-                </div>
-              </div>
-              <div>
-                <span className="text-gray-600">기존 목표:</span>
-                <div className="font-medium">
-                  {goal.target_amount?.toLocaleString() || 0}원 (
-                  {goal.target_count || 0}건)
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            {/* 목표 금액 */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                목표 금액
-              </label>
-              <div className="relative">
-                <input
-                  type="number"
-                  value={formData.target_amount}
-                  onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      target_amount: e.target.value,
-                    }))
-                  }
-                  placeholder={currentAmount.toString()}
-                  className="w-full px-3 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-                />
-                <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
-                  원
-                </span>
-              </div>
-              <p className="text-xs text-gray-500 mt-1">
-                현재 실제 금액: {currentAmount.toLocaleString()}원
-              </p>
-            </div>
-
-            {/* 목표 횟수 */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                목표 횟수
-              </label>
-              <div className="relative">
-                <input
-                  type="number"
-                  value={formData.target_count}
-                  onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      target_count: e.target.value,
-                    }))
-                  }
-                  placeholder={currentCount.toString()}
-                  className="w-full px-3 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-                />
-                <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
-                  회
-                </span>
-              </div>
-              <p className="text-xs text-gray-500 mt-1">
-                현재 실제 횟수: {currentCount}회
-              </p>
-            </div>
-
-            {/* 마감일 */}
-            <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                마감일
-              </label>
-              <input
-                type="date"
-                value={formData.target_date}
-                onChange={(e) =>
-                  setFormData((prev) => ({
-                    ...prev,
-                    target_date: e.target.value,
-                  }))
-                }
-                min={format(new Date(), "yyyy-MM-dd")}
-                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-              />
-            </div>
-          </form>
-        </div>
-      </Modal.Body>
-
-      <Modal.Footer>
-        <Modal.CloseButton>취소</Modal.CloseButton>
-        <Modal.Button
-          type="submit"
-          form="goal-edit-form"
-          loading={isUpdatingGoal}
-          onClick={handleSubmit}
-        >
-          수정하기
-        </Modal.Button>
-      </Modal.Footer>
-    </Modal>
-  );
-};
-
-export default GoalEditModal;
diff --git a/src/components/goals/GoalUpdateNotification.tsx b/src/components/goals/GoalUpdateNotification.tsx
deleted file mode 100644
index 36b46bf..0000000
--- a/src/components/goals/GoalUpdateNotification.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-"use client";
-
-import { useAuth } from "@/hooks/auth";
-import { useGoalChecker } from "@/hooks/goals/useGoalChecker";
-import { AlertTriangle, Edit3, X } from "lucide-react";
-import { useState } from "react";
-import GoalEditModal from "./GoalEditModal";
-
-interface GoalUpdateNotificationProps {
-  categoryName: string;
-  onClose: () => void;
-}
-
-const GoalUpdateNotification = ({
-  categoryName,
-  onClose,
-}: GoalUpdateNotificationProps) => {
-  const { user } = useAuth();
-  const { affectedGoals, hasAffectedGoals } = useGoalChecker(
-    user?.id,
-    categoryName,
-  );
-  const [currentEditIndex, setCurrentEditIndex] = useState(-1);
-
-  // 편집할 목표들 준비
-  const editableGoals = affectedGoals.map((goalData) => ({
-    goal: goalData,
-    currentAmount: goalData.currentMonthAmount,
-    currentCount: goalData.currentMonthCount,
-  }));
-
-  if (!hasAffectedGoals) return null;
-
-  return (
-    <>
-      <div className="fixed bottom-4 right-4 bg-white border border-amber-200 rounded-lg shadow-lg p-4 max-w-sm z-50">
-        <div className="flex items-start gap-3">
-          <AlertTriangle className="w-5 h-5 text-amber-500 flex-shrink-0 mt-0.5" />
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-gray-900">
-              {categoryName} 챌린지 업데이트 필요
-            </p>
-            <p className="text-xs text-gray-600 mt-1">
-              내역이 변경되어 {affectedGoals.length}개의 챌린지를 수정해야
-              합니다.
-            </p>
-
-            {affectedGoals.length === 1 ? (
-              <button
-                onClick={() => setCurrentEditIndex(0)}
-                className="flex items-center gap-1 px-2 py-1 text-xs bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors"
-              >
-                <Edit3 className="w-3 h-3" />
-                챌린지 수정
-              </button>
-            ) : (
-              <button
-                onClick={() => setCurrentEditIndex(0)}
-                className="flex items-center gap-1 px-2 py-1 text-xs bg-amber-600 text-white rounded hover:bg-amber-700 transition-colors"
-              >
-                <Edit3 className="w-3 h-3" />
-                챌린지 수정 (1/{affectedGoals.length})
-              </button>
-            )}
-          </div>
-
-          <button
-            onClick={onClose}
-            className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
-          >
-            <X className="w-4 h-4" />
-          </button>
-        </div>
-      </div>
-
-      {currentEditIndex >= 0 && (
-        <GoalEditModal
-          isOpen={true}
-          onClose={() => {
-            if (currentEditIndex + 1 < editableGoals.length) {
-              setCurrentEditIndex((prev) => prev + 1);
-            } else {
-              setCurrentEditIndex(-1);
-              onClose();
-            }
-          }}
-          goals={editableGoals}
-          currentIndex={currentEditIndex}
-          totalCount={editableGoals.length}
-        />
-      )}
-    </>
-  );
-};
-
-export default GoalUpdateNotification;
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 582c3a8..bf5b63c 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 import {
   BarChart3,
   Target,
@@ -12,9 +12,9 @@ import {
   User,
   Settings,
   LogOut,
-} from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { useAuth } from "@/hooks/auth";
+} from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { useAuth } from '@/hooks/auth';
 
 export default function Header() {
   const pathname = usePathname();
@@ -34,46 +34,46 @@ export default function Header() {
       }
     };
 
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
   // preview 페이지에서는 헤더를 렌더링하지 않음
-  if (pathname === "/preview" || pathname?.startsWith("/auth/")) {
+  if (pathname === '/preview' || pathname?.startsWith('/auth/')) {
     return null;
   }
 
   // 네비게이션 메뉴 항목
   const navigationItems = [
     {
-      name: "가계부",
-      href: "/budget",
+      name: '가계부',
+      href: '/budget',
       icon: BarChart3,
-      description: "지출 관리",
+      description: '지출 관리',
     },
     {
-      name: "목표",
-      href: "/goals",
+      name: '목표',
+      href: '/goals',
       icon: Target,
-      description: "목표 설정",
+      description: '목표 설정',
     },
     {
-      name: "질문",
-      href: "/questions",
+      name: '질문',
+      href: '/questions',
       icon: MessageSquare,
-      description: "성찰 질문",
+      description: '성찰 질문',
     },
     {
-      name: "회고",
-      href: "/reflections",
+      name: '회고',
+      href: '/reflections',
       icon: BookOpen,
-      description: "일상 회고",
+      description: '일상 회고',
     },
   ];
 
   // 현재 경로가 활성 상태인지 확인
   const isActiveRoute = (href: string) => {
-    return pathname === href || pathname?.startsWith(href + "/");
+    return pathname === href || pathname?.startsWith(href + '/');
   };
 
   // 로그아웃 처리
@@ -82,15 +82,15 @@ export default function Header() {
       logout();
       setIsUserMenuOpen(false);
       // 로그아웃 후 즉시 메인화면으로 이동
-      window.location.href = "/";
+      window.location.href = '/';
     } catch (error) {
-      console.error("로그아웃 실패:", error);
+      console.error('로그아웃 실패:', error);
     }
   };
 
   // 사용자 이름 표시
   const getUserDisplayName = () => {
-    if (!user) return "사용자";
+    if (!user) return '사용자';
 
     // 프로필에서 우선 조회
     if (profile?.nickname) return profile.nickname;
@@ -101,7 +101,7 @@ export default function Header() {
     const name = user.user_metadata?.name;
     const email = user.email;
 
-    return nickname || name || email?.split("@")[0] || "사용자";
+    return nickname || name || email?.split('@')[0] || '사용자';
   };
 
   return (
@@ -111,7 +111,7 @@ export default function Header() {
           {/* 로고 */}
           <div className="flex items-center">
             <Link
-              href={isAuthenticated ? "/dashboard" : "/"}
+              href={isAuthenticated ? '/dashboard' : '/'}
               className="text-xl mobile:text-2xl font-bold text-accent-700 hover:text-accent-800 transition-colors"
             >
               DaylyLog
@@ -133,8 +133,8 @@ export default function Header() {
                       flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 text-sm laptop:text-base
                       ${
                         isActive
-                          ? "bg-accent-100 text-accent-700 font-semibold"
-                          : "text-accent-600 hover:text-accent-800 hover:bg-accent-50"
+                          ? 'bg-accent-100 text-accent-700 font-semibold'
+                          : 'text-accent-600 hover:text-accent-800 hover:bg-accent-50'
                       }
                     `}
                   >
@@ -239,8 +239,8 @@ export default function Header() {
                       flex items-center gap-3 px-3 py-3 rounded-lg transition-all duration-200
                       ${
                         isActive
-                          ? "bg-accent-100 text-accent-700 font-semibold"
-                          : "text-accent-600 hover:text-accent-800 hover:bg-accent-50"
+                          ? 'bg-accent-100 text-accent-700 font-semibold'
+                          : 'text-accent-600 hover:text-accent-800 hover:bg-accent-50'
                       }
                     `}
                   >
diff --git a/src/hooks/budget/useTransactionAlert.ts b/src/hooks/budget/useTransactionAlert.ts
deleted file mode 100644
index 101f5b3..0000000
--- a/src/hooks/budget/useTransactionAlert.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useCallback, useState } from "react";
-
-interface TransactionAlert {
-  categoryName: string;
-  type: "income" | "expense";
-  isVisible: boolean;
-}
-
-export const useTransactionAlert = () => {
-  const [alerts, setAlerts] = useState<TransactionAlert[]>([]);
-
-  const showAlert = useCallback(
-    (categoryName: string, type: "income" | "expense") => {
-      // 중복 알림 방지
-      setAlerts((prev) => {
-        const exists = prev.some(
-          (alert) => alert.categoryName === categoryName && alert.type === type,
-        );
-
-        if (exists) return prev;
-
-        return [...prev, { categoryName, type, isVisible: true }];
-      });
-    },
-    [],
-  );
-
-  const hideAlert = useCallback((categoryName: string) => {
-    setAlerts((prev) =>
-      prev.filter((alert) => alert.categoryName !== categoryName),
-    );
-  }, []);
-
-  const clearAllAlerts = useCallback(() => {
-    setAlerts([]);
-  }, []);
-
-  return {
-    alerts,
-    showAlert,
-    hideAlert,
-    clearAllAlerts,
-  };
-};
diff --git a/src/hooks/goals/useFoalCompletionAlert.ts b/src/hooks/goals/useFoalCompletionAlert.ts
deleted file mode 100644
index b44dd46..0000000
--- a/src/hooks/goals/useFoalCompletionAlert.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useCallback, useState } from "react";
-
-interface CompletedGoal {
-  id: string;
-  title: string;
-}
-
-export const useGoalCompletionAlert = () => {
-  const [completedGoals, setCompletedGoals] = useState<CompletedGoal[]>([]);
-
-  const showCompletionAlert = useCallback((goal: CompletedGoal) => {
-    setCompletedGoals((prev) => {
-      // 중복 방지
-      const exists = prev.some((g) => g.id === goal.id);
-      if (exists) return prev;
-
-      return [...prev, goal];
-    });
-  }, []);
-
-  const hideCompletionAlert = useCallback((goalId: string) => {
-    setCompletedGoals((prev) => prev.filter((g) => g.id !== goalId));
-  }, []);
-
-  return {
-    completedGoals,
-    showCompletionAlert,
-    hideCompletionAlert,
-  };
-};
diff --git a/src/hooks/goals/useGoalChecker.ts b/src/hooks/goals/useGoalChecker.ts
deleted file mode 100644
index 952ad7c..0000000
--- a/src/hooks/goals/useGoalChecker.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { supabase } from "@/lib/supabase";
-import { Goal } from "@/types/goals";
-import { useQuery } from "@tanstack/react-query";
-import { endOfMonth, format, startOfMonth } from "date-fns";
-
-interface GoalWithCurrentData extends Goal {
-  currentMonthAmount: number;
-  currentMonthCount: number;
-  hasDataMismatch: boolean;
-}
-
-export const useGoalChecker = (userId?: string, categoryName?: string) => {
-  const { data: affectedGoals = [] } = useQuery({
-    queryKey: ["affected-goals", userId, categoryName],
-    queryFn: async (): Promise<GoalWithCurrentData[]> => {
-      if (!userId || !categoryName) return [];
-
-      // 현재 월의 시작일과 종료일
-      const now = new Date();
-      const monthStart = format(startOfMonth(now), "yyyy-MM-dd");
-      const monthEnd = format(endOfMonth(now), "yyyy-MM-dd");
-      // 활성화된 목표들 조회
-      const { data: goals, error: goalsError } = await supabase
-        .from("goals")
-        .select("*")
-        .eq("user_id", userId)
-        .eq("status", "active");
-
-      if (goalsError) throw goalsError;
-      if (!goals || goals.length === 0) return [];
-
-      // 각 목표에 대해 현재 월 실제 데이터 계산
-      const goalsWithCurrentData = await Promise.all(
-        goals.map(async (goal) => {
-          const tableName =
-            goal.type === "increase_income" ? "incomes" : "expenses";
-
-          // 해당 목표와 연관될 수 있는 카테고리의 현재 월 데이터 조회
-          const { data: transactions } = await supabase
-            .from(tableName)
-            .select("amount, category:categories(name)")
-            .eq("user_id", userId)
-            .gte("date", monthStart)
-            .lte("date", monthEnd);
-
-          // 해당 카테고리 이름과 관련된 데이터 집계
-          const relatedTransactions = (transactions || []).filter(
-            (t) =>
-              t.category &&
-              "name" in t.category &&
-              t.category.name === categoryName,
-          );
-
-          const currentMonthAmount = relatedTransactions.reduce(
-            (sum, t) => sum + t.amount,
-            0,
-          );
-          const currentMonthCount = relatedTransactions.length;
-
-          // 데이터 불일치 여부 확인
-          const hasDataMismatch =
-            goal.current_amount !== currentMonthAmount || // 1원 이상 차이
-            goal.current_count !== currentMonthCount; // 1회 이상 차이
-
-          return {
-            ...goal,
-            currentMonthAmount,
-            currentMonthCount,
-            hasDataMismatch,
-          };
-        }),
-      );
-
-      // 불일치가 있는 목표들만 반환
-      return goalsWithCurrentData.filter((goal) => goal.hasDataMismatch);
-    },
-    enabled: !!userId && !!categoryName,
-  });
-
-  return {
-    affectedGoals,
-    hasAffectedGoals: affectedGoals.length > 0,
-  };
-};
diff --git a/src/hooks/goals/useGoalStatusUpdater.ts b/src/hooks/goals/useGoalStatusUpdater.ts
deleted file mode 100644
index 64a46cd..0000000
--- a/src/hooks/goals/useGoalStatusUpdater.ts
+++ /dev/null
@@ -1,153 +0,0 @@
-import { supabase } from "@/lib/supabase";
-import { useQueryClient } from "@tanstack/react-query";
-import { useGoalCompletionAlert } from "./useFoalCompletionAlert";
-
-export const useGoalStatusUpdater = () => {
-  const queryClient = useQueryClient();
-  const { showCompletionAlert } = useGoalCompletionAlert();
-
-  const checkAndUpdateGoalStatus = async (goalId: string, userId: string) => {
-    try {
-      // 목표 정보 조회
-      const { data: goal, error: goalError } = await supabase
-        .from("goals")
-        .select("*")
-        .eq("id", goalId)
-        .eq("user_id", userId)
-        .single();
-
-      if (goalError || !goal) {
-        console.error("목표 조회 실패:", goalError);
-        return;
-      }
-
-      // 이미 완료된 목표는 건너뛰기
-      if (goal.status === "completed") return;
-
-      // 현재 월의 실제 데이터 조회
-      const now = new Date();
-      const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
-        .toISOString()
-        .split("T")[0];
-      const monthEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0)
-        .toISOString()
-        .split("T")[0];
-
-      const tableName =
-        goal.type === "increase_income" ? "incomes" : "expenses";
-
-      const { data: transactions } = await supabase
-        .from(tableName)
-        .select("amount")
-        .eq("user_id", userId)
-        .gte("date", monthStart)
-        .lte("date", monthEnd);
-
-      if (!transactions) return;
-
-      // 실제 달성 현황 계산
-      const actualAmount = transactions.reduce((sum, t) => sum + t.amount, 0);
-      const actualCount = transactions.length;
-
-      // 목표 달성 여부 확인
-      let isCompleted = false;
-
-      if (goal.challenge_mode === "amount") {
-        isCompleted = goal.target_amount
-          ? actualAmount >= goal.target_amount
-          : false;
-      } else if (goal.challenge_mode === "count") {
-        isCompleted = goal.target_count
-          ? actualCount >= goal.target_count
-          : false;
-      } else {
-        // 'both' - OR 조건
-        const amountComplete = goal.target_amount
-          ? actualAmount >= goal.target_amount
-          : true;
-        const countComplete = goal.target_count
-          ? actualCount >= goal.target_count
-          : true;
-        isCompleted = amountComplete || countComplete;
-      }
-
-      // 목표 달성 시 상태 업데이트
-      if (isCompleted) {
-        const { error: updateError } = await supabase
-          .from("goals")
-          .update({
-            status: "completed",
-            current_amount: actualAmount,
-            current_count: actualCount,
-          })
-          .eq("id", goalId);
-
-        if (updateError) {
-          console.error("목표 상태 업데이트 실패:", updateError);
-        } else {
-          // 캐시 무효화
-          queryClient.invalidateQueries({ queryKey: ["goals"] });
-
-          // 완료 알림 표시
-          showCompletionAlert({
-            id: goal.id,
-            title: goal.totle,
-          });
-        }
-      } else {
-        // 완료되지 않았지만 current 값은 업데이트
-        const { error: updateError } = await supabase
-          .from("goals")
-          .update({
-            current_amount: actualAmount,
-            current_count: actualCount,
-          })
-          .eq("id", goalId);
-
-        if (updateError) {
-          console.error("목표 진행률 업데이트 실패:", updateError);
-        }
-      }
-    } catch (error) {
-      console.error("목표 상태 확인 중 오류:", error);
-    }
-  };
-
-  // 여러 목표를 배치로 확인
-  const checkMultipleGoals = async (goalIds: string[], userId: string) => {
-    await Promise.allSettled(
-      goalIds.map((goalId) => checkAndUpdateGoalStatus(goalId, userId)),
-    );
-  };
-
-  // 특정 카테고리와 관련된 모든 목표 확인
-  const checkGoalsByCategory = async (
-    userId: string,
-    categoryName: string,
-    type: "income" | "expense",
-  ) => {
-    try {
-      const goalType = type === "income" ? "increase_income" : "reduce_expense";
-
-      const { data: goals } = await supabase
-        .from("goals")
-        .select("id")
-        .eq("user_id", userId)
-        .eq("type", goalType)
-        .eq("status", "active");
-
-      if (goals && goals.length > 0) {
-        const goalIds = goals.map((g) => g.id);
-        await checkMultipleGoals(goalIds, userId);
-      }
-    } catch (error) {
-      console.error("카테고리별 목표 확인 실패:", error);
-    }
-  };
-
-  return {
-    checkAndUpdateGoalStatus,
-    checkMultipleGoals,
-    checkGoalsByCategory,
-  };
-};
diff --git a/src/hooks/goals/useGoals.ts b/src/hooks/goals/useGoals.ts
deleted file mode 100644
index ceb35df..0000000
--- a/src/hooks/goals/useGoals.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import { supabase } from "@/lib/supabase";
-import { Goal, GoalFormData, GoalProgressInfo } from "@/types/goals";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useMemo } from "react";
-
-interface UseGoalsProps {
-  userId?: string;
-  status?: Goal["status"];
-}
-
-export const useGoals = ({ userId, status }: UseGoalsProps = {}) => {
-  const queryClient = useQueryClient();
-
-  // 목표 조회
-  const {
-    data: goals = [],
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["goals", userId, status],
-    queryFn: async (): Promise<Goal[]> => {
-      let query = supabase
-        .from("goals")
-        .select(
-          `
-          *,
-          category:categories(*)
-        `,
-        )
-        .order("created_at", { ascending: false });
-
-      if (userId) {
-        query = query.eq("user_id", userId);
-      }
-
-      if (status) {
-        query = query.eq("status", status);
-      }
-
-      const { data, error } = await query;
-      if (error) throw error;
-      return data || [];
-    },
-    enabled: !!userId,
-  });
-
-  // 목표 생성
-  const createGoalMutation = useMutation({
-    mutationFn: async (newGoal: GoalFormData & { user_id: string }) => {
-      const goalData = {
-        ...newGoal,
-        current_amount: 0,
-        current_count: 0,
-        status: "active" as const,
-        created_from_date: new Date().toISOString().split("T")[0],
-      };
-
-      const { data, error } = await supabase
-        .from("goals")
-        .insert([goalData])
-        .select(
-          `
-          *,
-          category:categories(*)
-        `,
-        )
-        .single();
-
-      if (error) throw error;
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["goals"] });
-    },
-  });
-
-  // 목표 수정
-  const updateGoalMutation = useMutation({
-    mutationFn: async (updates: { id: string } & Partial<Goal>) => {
-      const { id, ...goalUpdates } = updates;
-
-      const { data, error } = await supabase
-        .from("goals")
-        .update(goalUpdates)
-        .eq("id", id)
-        .select(
-          `
-          *,
-          category:categories(*)
-        `,
-        )
-        .single();
-
-      if (error) throw error;
-      return data;
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["goals"] });
-    },
-  });
-
-  // 목표 진행률 계산
-  const goalsWithProgress = useMemo(() => {
-    return goals.map((goal) => {
-      const progressInfo = calculateGoalProgress(goal);
-      return {
-        ...goal,
-        progress: progressInfo,
-      };
-    });
-  }, [goals]);
-
-  // 활성 목표만 필터링
-  const activeGoals = useMemo(() => {
-    return goalsWithProgress.filter((goal) => goal.status === "active");
-  }, [goalsWithProgress]);
-
-  // 완료된 목표만 필터링
-  const completedGoals = useMemo(() => {
-    return goalsWithProgress.filter((goal) => goal.status === "completed");
-  }, [goalsWithProgress]);
-
-  return {
-    goals: goalsWithProgress,
-    activeGoals,
-    completedGoals,
-    isLoading,
-    error,
-    createGoal: createGoalMutation.mutate,
-    isCreatingGoal: createGoalMutation.isPending,
-    updateGoal: updateGoalMutation.mutate,
-    isUpdatingGoal: updateGoalMutation.isPending,
-  };
-};
-
-// 목표 진행률 계산 함수
-const calculateGoalProgress = (goal: Goal): GoalProgressInfo => {
-  const currentDate = new Date();
-  const targetDate = goal.target_date ? new Date(goal.target_date) : null;
-
-  // 남은 일수 계산
-  const daysLeft = targetDate
-    ? Math.max(
-        0,
-        Math.ceil(
-          (targetDate.getTime() - currentDate.getTime()) /
-            (1000 * 60 * 60 * 24),
-        ),
-      )
-    : 0;
-
-  // 금액 진행률 계산
-  const amountProgress =
-    goal.target_amount && goal.target_amount > 0
-      ? Math.min(100, (goal.current_amount / goal.target_amount) * 100)
-      : 0;
-
-  // 횟수 진행률 계산
-  const countProgress =
-    goal.target_count && goal.target_count > 0
-      ? Math.min(100, (goal.current_count / goal.target_count) * 100)
-      : 0;
-
-  // 완료 상태 체크
-  const isAmountComplete = goal.target_amount
-    ? goal.current_amount >= goal.target_amount
-    : true;
-  const isCountComplete = goal.target_count
-    ? goal.current_count >= goal.target_count
-    : true;
-
-  // 전체 진행률 계산 (OR 조건 - 하나만 완료해도 성공)
-  let overallProgress = 0;
-  let isComplete = false;
-
-  if (goal.challenge_mode === "amount") {
-    overallProgress = amountProgress;
-    isComplete = isAmountComplete;
-  } else if (goal.challenge_mode === "count") {
-    overallProgress = countProgress;
-    isComplete = isCountComplete;
-  } else {
-    // 'both' - OR 조건
-    overallProgress = Math.max(amountProgress, countProgress);
-    isComplete = isAmountComplete || isCountComplete;
-  }
-
-  // 진행 상태 텍스트
-  let progressText = "";
-  if (isComplete) {
-    progressText = "목표 달성! 🎉";
-  } else if (daysLeft === 0 && targetDate) {
-    progressText = "기한 만료";
-  } else if (daysLeft > 0) {
-    progressText = `${daysLeft}일 남음`;
-  } else {
-    progressText = "진행 중";
-  }
-
-  return {
-    amountProgress,
-    countProgress,
-    overallProgress,
-    isAmountComplete,
-    isCountComplete,
-    isComplete,
-    daysLeft,
-    progressText,
-  };
-};

From c3ba11839a64409250b2570a9afc070d8fedeab9 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Tue, 16 Sep 2025 22:11:34 +0900
Subject: [PATCH 03/12] =?UTF-8?q?feat:=20Budget=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EC=B1=8C=EB=A6=B0=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=EA=B3=BC=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=ED=95=AD=EB=AA=A9=20=EA=B0=AF=EC=88=98=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EC=8B=9C=20=EC=88=98=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EB=82=98?=
 =?UTF-8?q?=ED=83=80=EB=82=98=EA=B8=B0=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/goals/[id]/edit/page.tsx          | 293 +++++++++
 src/app/goals/[id]/page.tsx               | 293 +++++++++
 src/app/goals/page.tsx                    | 147 +++++
 src/components/budget/BudgetForm.tsx      | 743 ++++++++++++----------
 src/components/budget/GoalUpdateModal.tsx | 166 +++++
 src/hooks/budget/useBudget.ts             | 170 ++++-
 src/hooks/budget/useChallenge.ts          |  77 ++-
 src/hooks/goals/useGoals.ts               |  48 ++
 src/hooks/goals/useGoalsByBudget.ts       |  56 ++
 9 files changed, 1622 insertions(+), 371 deletions(-)
 create mode 100644 src/app/goals/[id]/edit/page.tsx
 create mode 100644 src/app/goals/[id]/page.tsx
 create mode 100644 src/app/goals/page.tsx
 create mode 100644 src/components/budget/GoalUpdateModal.tsx
 create mode 100644 src/hooks/goals/useGoals.ts
 create mode 100644 src/hooks/goals/useGoalsByBudget.ts

diff --git a/src/app/goals/[id]/edit/page.tsx b/src/app/goals/[id]/edit/page.tsx
new file mode 100644
index 0000000..0dfbc88
--- /dev/null
+++ b/src/app/goals/[id]/edit/page.tsx
@@ -0,0 +1,293 @@
+'use client';
+
+import { useAuth } from '@/hooks/auth';
+import { useGoals } from '@/hooks/goals/useGoals';
+import { useParams, useRouter } from 'next/navigation';
+
+const GoalDetailPage = () => {
+  const { user } = useAuth();
+  const { goals, isLoading } = useGoals({ userId: user?.id });
+  const params = useParams();
+  const router = useRouter();
+
+  const goalId = params.id as string;
+  const goal = goals.find((g) => g.id === goalId);
+
+  // 로딩 상태
+  if (isLoading) {
+    return (
+      <div>
+        <h1>목표 상세</h1>
+        <p>로딩 중...</p>
+      </div>
+    );
+  }
+
+  // 사용자 인증 확인
+  if (!user?.id) {
+    return (
+      <div>
+        <h1>목표 상세</h1>
+        <p>로그인이 필요합니다.</p>
+      </div>
+    );
+  }
+
+  // 목표를 찾을 수 없는 경우
+  if (!goal) {
+    return (
+      <div>
+        <h1>목표 상세</h1>
+        <p>목표를 찾을 수 없습니다.</p>
+        <button onClick={() => router.push('/goals')}>
+          목표 목록으로 돌아가기
+        </button>
+      </div>
+    );
+  }
+
+  const handleEdit = () => {
+    router.push(`/goals/${goalId}/edit`);
+  };
+
+  const handleDelete = () => {
+    if (confirm('정말로 이 목표를 삭제하시겠습니까?')) {
+      // TODO: 목표 삭제 구현
+      console.log('목표 삭제:', goalId);
+      router.push('/goals');
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'active':
+        return '진행 중';
+      case 'completed':
+        return '완료됨';
+      case 'paused':
+        return '일시정지';
+      case 'cancelled':
+        return '취소됨';
+      default:
+        return status;
+    }
+  };
+
+  const getTypeText = (type: string) => {
+    switch (type) {
+      case 'save_money':
+        return '돈 저축';
+      case 'reduce_expense':
+        return '지출 줄이기';
+      case 'increase_income':
+        return '수입 늘리기';
+      case 'custom':
+        return '사용자 정의';
+      default:
+        return type;
+    }
+  };
+
+  const getChallengeMode = (mode: string) => {
+    switch (mode) {
+      case 'amount':
+        return '금액';
+      case 'count':
+        return '횟수';
+      case 'both':
+        return '금액 + 횟수';
+      default:
+        return mode;
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px' }}>
+        <button onClick={() => router.push('/goals')}>
+          ← 목표 목록으로 돌아가기
+        </button>
+      </div>
+
+      <h1>{goal.title}</h1>
+
+      {/* 기본 정보 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h2>기본 정보</h2>
+        <div>
+          <p>
+            <strong>설명:</strong> {goal.description || '설명 없음'}
+          </p>
+          <p>
+            <strong>이유:</strong> {goal.reason || '이유 없음'}
+          </p>
+          <p>
+            <strong>타입:</strong> {getTypeText(goal.type)}
+          </p>
+          <p>
+            <strong>상태:</strong> {getStatusText(goal.status)}
+          </p>
+          <p>
+            <strong>챌린지 모드:</strong>{' '}
+            {getChallengeMode(goal.challenge_mode)}
+          </p>
+          {goal.category && (
+            <p>
+              <strong>카테고리:</strong> {goal.category.name}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* 목표 정보 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h2>목표 정보</h2>
+        <div>
+          {goal.target_amount && (
+            <p>
+              <strong>목표 금액:</strong> {goal.target_amount.toLocaleString()}
+              원
+              {goal.current_amount !== undefined && (
+                <span> (현재: {goal.current_amount.toLocaleString()}원)</span>
+              )}
+            </p>
+          )}
+          {goal.target_count && (
+            <p>
+              <strong>목표 횟수:</strong> {goal.target_count}회
+              {goal.current_count !== undefined && (
+                <span> (현재: {goal.current_count}회)</span>
+              )}
+            </p>
+          )}
+          {goal.target_date && (
+            <p>
+              <strong>목표 날짜:</strong>{' '}
+              {new Date(goal.target_date).toLocaleDateString()}
+            </p>
+          )}
+          {goal.created_from_date && (
+            <p>
+              <strong>시작 날짜:</strong>{' '}
+              {new Date(goal.created_from_date).toLocaleDateString()}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* 진행률 */}
+      {goal.target_amount && goal.current_amount !== undefined && (
+        <div style={{ marginBottom: '30px' }}>
+          <h2>금액 진행률</h2>
+          <div>
+            <p>
+              진행률:{' '}
+              {((goal.current_amount / goal.target_amount) * 100).toFixed(1)}%
+            </p>
+            <div
+              style={{
+                width: '100%',
+                height: '20px',
+                backgroundColor: '#e0e0e0',
+                borderRadius: '10px',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                style={{
+                  width: `${Math.min((goal.current_amount / goal.target_amount) * 100, 100)}%`,
+                  height: '100%',
+                  backgroundColor:
+                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
+                  borderRadius: '10px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 횟수 진행률 */}
+      {goal.target_count && goal.current_count !== undefined && (
+        <div style={{ marginBottom: '30px' }}>
+          <h2>횟수 진행률</h2>
+          <div>
+            <p>
+              진행률:{' '}
+              {((goal.current_count / goal.target_count) * 100).toFixed(1)}%
+            </p>
+            <div
+              style={{
+                width: '100%',
+                height: '20px',
+                backgroundColor: '#e0e0e0',
+                borderRadius: '10px',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                style={{
+                  width: `${Math.min((goal.current_count / goal.target_count) * 100, 100)}%`,
+                  height: '100%',
+                  backgroundColor:
+                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
+                  borderRadius: '10px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 날짜 정보 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h2>날짜 정보</h2>
+        <div>
+          <p>
+            <strong>생성일:</strong>{' '}
+            {new Date(goal.created_at).toLocaleDateString()}
+          </p>
+          <p>
+            <strong>수정일:</strong>{' '}
+            {new Date(goal.updated_at).toLocaleDateString()}
+          </p>
+        </div>
+      </div>
+
+      {/* 액션 버튼들 */}
+      {goal.status === 'active' && (
+        <div style={{ marginBottom: '20px' }}>
+          <button
+            onClick={handleEdit}
+            style={{
+              marginRight: '10px',
+              padding: '10px 20px',
+              backgroundColor: '#3b82f6',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+          >
+            수정
+          </button>
+          <button
+            onClick={handleDelete}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#ef4444',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+          >
+            삭제
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GoalDetailPage;
diff --git a/src/app/goals/[id]/page.tsx b/src/app/goals/[id]/page.tsx
new file mode 100644
index 0000000..0dfbc88
--- /dev/null
+++ b/src/app/goals/[id]/page.tsx
@@ -0,0 +1,293 @@
+'use client';
+
+import { useAuth } from '@/hooks/auth';
+import { useGoals } from '@/hooks/goals/useGoals';
+import { useParams, useRouter } from 'next/navigation';
+
+const GoalDetailPage = () => {
+  const { user } = useAuth();
+  const { goals, isLoading } = useGoals({ userId: user?.id });
+  const params = useParams();
+  const router = useRouter();
+
+  const goalId = params.id as string;
+  const goal = goals.find((g) => g.id === goalId);
+
+  // 로딩 상태
+  if (isLoading) {
+    return (
+      <div>
+        <h1>목표 상세</h1>
+        <p>로딩 중...</p>
+      </div>
+    );
+  }
+
+  // 사용자 인증 확인
+  if (!user?.id) {
+    return (
+      <div>
+        <h1>목표 상세</h1>
+        <p>로그인이 필요합니다.</p>
+      </div>
+    );
+  }
+
+  // 목표를 찾을 수 없는 경우
+  if (!goal) {
+    return (
+      <div>
+        <h1>목표 상세</h1>
+        <p>목표를 찾을 수 없습니다.</p>
+        <button onClick={() => router.push('/goals')}>
+          목표 목록으로 돌아가기
+        </button>
+      </div>
+    );
+  }
+
+  const handleEdit = () => {
+    router.push(`/goals/${goalId}/edit`);
+  };
+
+  const handleDelete = () => {
+    if (confirm('정말로 이 목표를 삭제하시겠습니까?')) {
+      // TODO: 목표 삭제 구현
+      console.log('목표 삭제:', goalId);
+      router.push('/goals');
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'active':
+        return '진행 중';
+      case 'completed':
+        return '완료됨';
+      case 'paused':
+        return '일시정지';
+      case 'cancelled':
+        return '취소됨';
+      default:
+        return status;
+    }
+  };
+
+  const getTypeText = (type: string) => {
+    switch (type) {
+      case 'save_money':
+        return '돈 저축';
+      case 'reduce_expense':
+        return '지출 줄이기';
+      case 'increase_income':
+        return '수입 늘리기';
+      case 'custom':
+        return '사용자 정의';
+      default:
+        return type;
+    }
+  };
+
+  const getChallengeMode = (mode: string) => {
+    switch (mode) {
+      case 'amount':
+        return '금액';
+      case 'count':
+        return '횟수';
+      case 'both':
+        return '금액 + 횟수';
+      default:
+        return mode;
+    }
+  };
+
+  return (
+    <div>
+      <div style={{ marginBottom: '20px' }}>
+        <button onClick={() => router.push('/goals')}>
+          ← 목표 목록으로 돌아가기
+        </button>
+      </div>
+
+      <h1>{goal.title}</h1>
+
+      {/* 기본 정보 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h2>기본 정보</h2>
+        <div>
+          <p>
+            <strong>설명:</strong> {goal.description || '설명 없음'}
+          </p>
+          <p>
+            <strong>이유:</strong> {goal.reason || '이유 없음'}
+          </p>
+          <p>
+            <strong>타입:</strong> {getTypeText(goal.type)}
+          </p>
+          <p>
+            <strong>상태:</strong> {getStatusText(goal.status)}
+          </p>
+          <p>
+            <strong>챌린지 모드:</strong>{' '}
+            {getChallengeMode(goal.challenge_mode)}
+          </p>
+          {goal.category && (
+            <p>
+              <strong>카테고리:</strong> {goal.category.name}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* 목표 정보 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h2>목표 정보</h2>
+        <div>
+          {goal.target_amount && (
+            <p>
+              <strong>목표 금액:</strong> {goal.target_amount.toLocaleString()}
+              원
+              {goal.current_amount !== undefined && (
+                <span> (현재: {goal.current_amount.toLocaleString()}원)</span>
+              )}
+            </p>
+          )}
+          {goal.target_count && (
+            <p>
+              <strong>목표 횟수:</strong> {goal.target_count}회
+              {goal.current_count !== undefined && (
+                <span> (현재: {goal.current_count}회)</span>
+              )}
+            </p>
+          )}
+          {goal.target_date && (
+            <p>
+              <strong>목표 날짜:</strong>{' '}
+              {new Date(goal.target_date).toLocaleDateString()}
+            </p>
+          )}
+          {goal.created_from_date && (
+            <p>
+              <strong>시작 날짜:</strong>{' '}
+              {new Date(goal.created_from_date).toLocaleDateString()}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* 진행률 */}
+      {goal.target_amount && goal.current_amount !== undefined && (
+        <div style={{ marginBottom: '30px' }}>
+          <h2>금액 진행률</h2>
+          <div>
+            <p>
+              진행률:{' '}
+              {((goal.current_amount / goal.target_amount) * 100).toFixed(1)}%
+            </p>
+            <div
+              style={{
+                width: '100%',
+                height: '20px',
+                backgroundColor: '#e0e0e0',
+                borderRadius: '10px',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                style={{
+                  width: `${Math.min((goal.current_amount / goal.target_amount) * 100, 100)}%`,
+                  height: '100%',
+                  backgroundColor:
+                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
+                  borderRadius: '10px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 횟수 진행률 */}
+      {goal.target_count && goal.current_count !== undefined && (
+        <div style={{ marginBottom: '30px' }}>
+          <h2>횟수 진행률</h2>
+          <div>
+            <p>
+              진행률:{' '}
+              {((goal.current_count / goal.target_count) * 100).toFixed(1)}%
+            </p>
+            <div
+              style={{
+                width: '100%',
+                height: '20px',
+                backgroundColor: '#e0e0e0',
+                borderRadius: '10px',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                style={{
+                  width: `${Math.min((goal.current_count / goal.target_count) * 100, 100)}%`,
+                  height: '100%',
+                  backgroundColor:
+                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
+                  borderRadius: '10px',
+                }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 날짜 정보 */}
+      <div style={{ marginBottom: '30px' }}>
+        <h2>날짜 정보</h2>
+        <div>
+          <p>
+            <strong>생성일:</strong>{' '}
+            {new Date(goal.created_at).toLocaleDateString()}
+          </p>
+          <p>
+            <strong>수정일:</strong>{' '}
+            {new Date(goal.updated_at).toLocaleDateString()}
+          </p>
+        </div>
+      </div>
+
+      {/* 액션 버튼들 */}
+      {goal.status === 'active' && (
+        <div style={{ marginBottom: '20px' }}>
+          <button
+            onClick={handleEdit}
+            style={{
+              marginRight: '10px',
+              padding: '10px 20px',
+              backgroundColor: '#3b82f6',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+          >
+            수정
+          </button>
+          <button
+            onClick={handleDelete}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#ef4444',
+              color: 'white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+            }}
+          >
+            삭제
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GoalDetailPage;
diff --git a/src/app/goals/page.tsx b/src/app/goals/page.tsx
new file mode 100644
index 0000000..a7f6e28
--- /dev/null
+++ b/src/app/goals/page.tsx
@@ -0,0 +1,147 @@
+'use client';
+
+import { useAuth } from '@/hooks/auth';
+import { useGoals } from '@/hooks/goals/useGoals';
+
+const GoalsPage = () => {
+  const { user, isLoading: isAuthLoading } = useAuth();
+
+  const {
+    activeGoals,
+    completedGoals,
+    goals,
+    isLoading: isGoalsLoading,
+  } = useGoals({
+    userId: user?.id,
+  });
+
+  // 로딩 상태
+  if (isAuthLoading || isGoalsLoading) {
+    return (
+      <div>
+        <h1>목표 관리</h1>
+        <p>로딩 중...</p>
+      </div>
+    );
+  }
+
+  // 사용자 인증 확인
+  if (!user?.id) {
+    return (
+      <div>
+        <h1>목표 관리</h1>
+        <p>로그인이 필요합니다.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>목표 관리</h1>
+
+      {/* 기본 통계 */}
+      <div>
+        <h2>목표 현황</h2>
+        <ul>
+          <li>전체 목표: {goals.length}개</li>
+          <li>진행 중인 목표: {activeGoals.length}개</li>
+          <li>완료된 목표: {completedGoals.length}개</li>
+        </ul>
+      </div>
+
+      {/* 진행 중인 목표들 */}
+      <div>
+        <h2>진행 중인 목표</h2>
+        {activeGoals.length === 0 ? (
+          <p>진행 중인 목표가 없습니다.</p>
+        ) : (
+          <ul>
+            {activeGoals.map((goal) => (
+              <li key={goal.id}>
+                <div>
+                  <h3>{goal.title}</h3>
+                  <p>{goal.description}</p>
+                  <p>타입: {goal.type}</p>
+                  <p>상태: {goal.status}</p>
+                  {goal.target_amount && (
+                    <p>
+                      목표 금액: {goal.target_amount.toLocaleString()}원
+                      {goal.current_amount !== undefined && (
+                        <span>
+                          {' '}
+                          (현재: {goal.current_amount.toLocaleString()}원)
+                        </span>
+                      )}
+                    </p>
+                  )}
+                  {goal.target_count && (
+                    <p>
+                      목표 횟수: {goal.target_count}회
+                      {goal.current_count !== undefined && (
+                        <span> (현재: {goal.current_count}회)</span>
+                      )}
+                    </p>
+                  )}
+                  {goal.target_date && <p>목표 날짜: {goal.target_date}</p>}
+                  {goal.challenge_mode && (
+                    <p>
+                      챌린지 모드:{' '}
+                      {goal.challenge_mode === 'both'
+                        ? '금액 + 횟수'
+                        : goal.challenge_mode === 'amount'
+                          ? '금액'
+                          : '횟수'}
+                    </p>
+                  )}
+                  {goal.category && <p>카테고리: {goal.category.name}</p>}
+                  <p>
+                    생성일: {new Date(goal.created_at).toLocaleDateString()}
+                  </p>
+                  <hr />
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* 완료된 목표들 */}
+      {completedGoals.length > 0 && (
+        <div>
+          <h2>완료된 목표</h2>
+          <ul>
+            {completedGoals.map((goal) => (
+              <li key={goal.id}>
+                <div>
+                  <h3>{goal.title}</h3>
+                  <p>{goal.description}</p>
+                  <p>타입: {goal.type}</p>
+                  {goal.target_amount && (
+                    <p>달성 금액: {goal.current_amount?.toLocaleString()}원</p>
+                  )}
+                  {goal.target_count && (
+                    <p>달성 횟수: {goal.current_count}회</p>
+                  )}
+                  <p>
+                    완료일: {new Date(goal.updated_at).toLocaleDateString()}
+                  </p>
+                  <hr />
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* 목표가 없을 때 */}
+      {goals.length === 0 && (
+        <div>
+          <h2>아직 목표가 없습니다</h2>
+          <p>예산 페이지에서 챌린지를 만들어 목표를 시작해보세요!</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GoalsPage;
diff --git a/src/components/budget/BudgetForm.tsx b/src/components/budget/BudgetForm.tsx
index 22b56c2..c55027b 100644
--- a/src/components/budget/BudgetForm.tsx
+++ b/src/components/budget/BudgetForm.tsx
@@ -1,11 +1,12 @@
-"use client";
-
-import { useAuth } from "@/hooks/auth";
-import { supabase } from "@/lib/supabase";
-import { BudgetFormProps, Category } from "@/types/budget";
-import { useQueryClient } from "@tanstack/react-query";
-import { format, parseISO } from "date-fns";
-import { ko } from "date-fns/locale";
+'use client';
+
+import { useAuth } from '@/hooks/auth';
+import { supabase } from '@/lib/supabase';
+import { BudgetFormProps, Category } from '@/types/budget';
+import { Goal } from '@/types/goals';
+import { useQueryClient } from '@tanstack/react-query';
+import { format, parseISO } from 'date-fns';
+import { ko } from 'date-fns/locale';
 import {
   ArrowLeft,
   ChevronDown,
@@ -17,9 +18,10 @@ import {
   TrendingDown,
   TrendingUp,
   X,
-} from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import GoalUpdateModal, { CategoryChangeData } from './GoalUpdateModal';
 
 export default function BudgetForm({
   selectedDate,
@@ -33,10 +35,79 @@ export default function BudgetForm({
   const queryClient = useQueryClient();
   const router = useRouter();
   const { user } = useAuth();
+  const [goalUpdateModal, setGoalUpdateModal] = useState<{
+    isOpen: boolean;
+    goals: Goal[];
+    categoryChange: CategoryChangeData | null;
+  }>({
+    isOpen: false,
+    goals: [],
+    categoryChange: null,
+  });
+
+  useEffect(() => {
+    const handleGoalUpdateNeeded = (event: CustomEvent) => {
+      const {
+        categoryName,
+        newAmount,
+        newCount,
+        oldAmount,
+        oldCount,
+        type,
+        goals,
+      } = event.detail;
+
+      triggerGoalUpdateModal({
+        categoryName,
+        newAmount,
+        newCount,
+        oldAmount,
+        oldCount,
+        type,
+        goals,
+      });
+    };
+
+    window.addEventListener(
+      'goalUpdateNeeded',
+      handleGoalUpdateNeeded as EventListener
+    );
+
+    return () => {
+      window.removeEventListener(
+        'goalUpdateNeeded',
+        handleGoalUpdateNeeded as EventListener
+      );
+    };
+  }, []);
+
+  // 목표 업데이트 모달 트리거
+  const triggerGoalUpdateModal = (data: {
+    categoryName: string;
+    newAmount: number;
+    newCount: number;
+    oldAmount: number;
+    oldCount: number;
+    type: 'income' | 'expense';
+    goals: Goal[];
+  }) => {
+    setGoalUpdateModal({
+      isOpen: true,
+      goals: data.goals,
+      categoryChange: {
+        categoryName: data.categoryName,
+        newAmount: data.newAmount,
+        newCount: data.newCount,
+        oldAmount: data.oldAmount,
+        oldCount: data.oldCount,
+        type: data.type,
+      },
+    });
+  };
 
   const deletedCategories = allCategories.filter(
     (cat) =>
-      cat.type === `${newItem.type}_${newItem.categoryType}` && cat.is_deleted,
+      cat.type === `${newItem.type}_${newItem.categoryType}` && cat.is_deleted
   );
 
   // 삭제된 카테고리 관리
@@ -53,7 +124,7 @@ export default function BudgetForm({
     e.preventDefault();
 
     if (!newItem.newCategoryName.trim()) {
-      console.error("카테고리 이름이 비어있습니다");
+      console.error('카테고리 이름이 비어있습니다');
       return;
     }
 
@@ -63,18 +134,18 @@ export default function BudgetForm({
       (cat) =>
         cat.name === newItem.newCategoryName.trim() &&
         cat.type === categoryType &&
-        cat.is_deleted,
+        cat.is_deleted
     );
 
     if (existingCategory) {
       const shouldRestore = confirm(
-        `'${newItem.newCategoryName.trim()}' 카테고리를 복원하시겠습니까?`,
+        `'${newItem.newCategoryName.trim()}' 카테고리를 복원하시겠습니까?`
       );
 
       if (shouldRestore) {
         await handleRestoreCategory(existingCategory.id);
         onNewItemChange({
-          newCategoryName: "",
+          newCategoryName: '',
           category: existingCategory.name,
           isCreatingCategory: false,
         });
@@ -86,17 +157,17 @@ export default function BudgetForm({
   };
 
   // 날짜 네비게이션 핸들러 추가
-  const handleDateChange = (direction: "prev" | "next") => {
+  const handleDateChange = (direction: 'prev' | 'next') => {
     const currentDateObj = parseISO(selectedDate);
     const newDate = new Date(currentDateObj);
 
-    if (direction === "prev") {
+    if (direction === 'prev') {
       newDate.setDate(newDate.getDate() - 1);
     } else {
       newDate.setDate(newDate.getDate() + 1);
     }
 
-    const newDateString = format(newDate, "yyyy-MM-dd");
+    const newDateString = format(newDate, 'yyyy-MM-dd');
     router.push(`/budget/${newDateString}`);
   };
 
@@ -112,28 +183,28 @@ export default function BudgetForm({
     // 선택된 카테고리 해제
     const deletedCategory = allCategories.find((cat) => cat.id === categoryId);
     if (newItem.category === deletedCategory?.name) {
-      onNewItemChange({ category: "" });
+      onNewItemChange({ category: '' });
     }
 
     // 올바른 queryClient 인스턴스 사용
     queryClient.setQueryData(
-      ["categories", user?.id],
+      ['categories', user?.id],
       (oldData: Category[] = []) =>
         oldData.map((cat) =>
-          cat.id === categoryId ? { ...cat, is_deleted: true } : cat,
-        ),
+          cat.id === categoryId ? { ...cat, is_deleted: true } : cat
+        )
     );
 
     try {
       const { error } = await supabase
-        .from("categories")
+        .from('categories')
         .update({ is_deleted: true })
-        .eq("id", categoryId);
+        .eq('id', categoryId);
 
       if (error) throw error;
     } catch (error) {
-      console.error("카테고리 삭제 실패:", error);
-      queryClient.invalidateQueries({ queryKey: ["categories", user?.id] });
+      console.error('카테고리 삭제 실패:', error);
+      queryClient.invalidateQueries({ queryKey: ['categories', user?.id] });
     }
   };
 
@@ -141,346 +212,364 @@ export default function BudgetForm({
   const handleRestoreCategory = async (categoryId: string) => {
     // 낙관적 업데이트
     queryClient.setQueryData(
-      ["categories", user?.id],
+      ['categories', user?.id],
       (oldData: Category[] = []) =>
         oldData.map((cat) =>
-          cat.id === categoryId ? { ...cat, is_deleted: false } : cat,
-        ),
+          cat.id === categoryId ? { ...cat, is_deleted: false } : cat
+        )
     );
 
     try {
       const { error } = await supabase
-        .from("categories")
+        .from('categories')
         .update({ is_deleted: false })
-        .eq("id", categoryId);
+        .eq('id', categoryId);
 
       if (error) throw error;
     } catch (error) {
-      console.error("카테고리 복구 실패:", error);
+      console.error('카테고리 복구 실패:', error);
       // 실패 시 롤백
-      queryClient.invalidateQueries({ queryKey: ["categories", user?.id] });
+      queryClient.invalidateQueries({ queryKey: ['categories', user?.id] });
     }
   };
 
   return (
-    <div className="bg-white flex flex-col gap-2 rounded-lg p-4 shadow-sm border">
-      <div className="flex justify-between">
-        <div className="flex items-center">
-          <button
-            onClick={() => handleDateChange("prev")}
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <ChevronLeft className="w-6 h-6" />
-          </button>
-
-          <h2 className="text-xl font-semibold">
-            {format(parseISO(selectedDate), "M월 d일", { locale: ko })}
-          </h2>
-
-          <button
-            onClick={() => handleDateChange("next")}
-            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-          >
-            <ChevronRight className="w-6 h-6" />
-          </button>
-        </div>
+    <>
+      <div className="bg-white flex flex-col gap-2 rounded-lg p-4 shadow-sm border">
+        <div className="flex justify-between">
+          <div className="flex items-center">
+            <button
+              onClick={() => handleDateChange('prev')}
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+
+            <h2 className="text-xl font-semibold">
+              {format(parseISO(selectedDate), 'M월 d일', { locale: ko })}
+            </h2>
 
-        <div className="flex flex-col gap-2">
-          <div className="flex justify-end">
             <button
-              onClick={onBackToMonth}
-              className=" text-accent-600 hover:text-accent-700 px-2 py-1 border border-accent-300 rounded-lg text-sm transition-colors"
+              onClick={() => handleDateChange('next')}
+              className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
             >
-              <ArrowLeft className="w-4 h-4" />
+              <ChevronRight className="w-6 h-6" />
             </button>
           </div>
 
-          {/* 날짜 직접 선택 */}
-          <input
-            type="date"
-            value={selectedDate}
-            onChange={handleDatePicker}
-            className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
-          />
-        </div>
-      </div>
+          <div className="flex flex-col gap-2">
+            <div className="flex justify-end">
+              <button
+                onClick={onBackToMonth}
+                className=" text-accent-600 hover:text-accent-700 px-2 py-1 border border-accent-300 rounded-lg text-sm transition-colors"
+              >
+                <ArrowLeft className="w-4 h-4" />
+              </button>
+            </div>
 
-      {/* 항목 추가 폼 */}
-      <div>
-        <div className="flex items-center justify-between mb-3">
-          <h3 className="font-medium text-gray-700 text-sm">항목</h3>
+            {/* 날짜 직접 선택 */}
+            <input
+              type="date"
+              value={selectedDate}
+              onChange={handleDatePicker}
+              className="px-2 py-1 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-accent-500"
+            />
+          </div>
         </div>
 
-        {/* 수입/지출 타입 선택 */}
-        <div className="flex mb-3 ">
-          <button
-            type="button"
-            onClick={() =>
-              onNewItemChange({
-                type: "income",
-                categoryType: "fixed",
-                category: "",
-              })
-            }
-            className={`flex-1 px-3 py-2 rounded-l-lg border text-sm transition-colors flex items-center justify-center gap-2 ${
-              newItem.type === "income"
-                ? "bg-green-500 text-white border-green-500"
-                : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
-            }`}
-          >
-            <TrendingUp className="w-4 h-4" />
-            수입
-          </button>
-          <button
-            type="button"
-            onClick={() =>
-              onNewItemChange({
-                type: "expense",
-                categoryType: "variable",
-                category: "",
-              })
-            }
-            className={`flex-1 px-3 py-2 rounded-r-lg border text-sm transition-colors flex items-center justify-center gap-2 ${
-              newItem.type === "expense"
-                ? "bg-red-500 text-white border-red-500"
-                : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
-            }`}
-          >
-            <TrendingDown className="w-4 h-4" />
-            지출
-          </button>
-        </div>
+        {/* 항목 추가 폼 */}
+        <div>
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="font-medium text-gray-700 text-sm">항목</h3>
+          </div>
 
-        {/* 고정/변동 타입 선택 */}
-        <div className="flex mb-3">
-          <button
-            type="button"
-            onClick={() =>
-              onNewItemChange({ categoryType: "fixed", category: "" })
-            }
-            className={`flex-1 px-3  py-2 rounded-l-lg border text-sm transition-colors ${
-              newItem.categoryType === "fixed"
-                ? "bg-accent-500 text-white border-accent-500"
-                : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
-            }`}
-          >
-            고정
-          </button>
-          <button
-            type="button"
-            onClick={() =>
-              onNewItemChange({ categoryType: "variable", category: "" })
-            }
-            className={`flex-1 px-3  py-2 rounded-r-lg border text-sm  transition-colors ${
-              newItem.categoryType === "variable"
-                ? "bg-accent-500 text-white border-accent-500"
-                : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
-            }`}
-          >
-            변동
-          </button>
-        </div>
+          {/* 수입/지출 타입 선택 */}
+          <div className="flex mb-3 ">
+            <button
+              type="button"
+              onClick={() =>
+                onNewItemChange({
+                  type: 'income',
+                  categoryType: 'fixed',
+                  category: '',
+                })
+              }
+              className={`flex-1 px-3 py-2 rounded-l-lg border text-sm transition-colors flex items-center justify-center gap-2 ${
+                newItem.type === 'income'
+                  ? 'bg-green-500 text-white border-green-500'
+                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+              }`}
+            >
+              <TrendingUp className="w-4 h-4" />
+              수입
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                onNewItemChange({
+                  type: 'expense',
+                  categoryType: 'variable',
+                  category: '',
+                })
+              }
+              className={`flex-1 px-3 py-2 rounded-r-lg border text-sm transition-colors flex items-center justify-center gap-2 ${
+                newItem.type === 'expense'
+                  ? 'bg-red-500 text-white border-red-500'
+                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+              }`}
+            >
+              <TrendingDown className="w-4 h-4" />
+              지출
+            </button>
+          </div>
 
-        <form onSubmit={handleSubmit} className="space-y-3 ">
-          {/* 카테고리 선택/생성 */}
-          <div className="space-y-3">
-            <div>
-              <label className="block text-xs font-medium mb-1 text-gray-700">
-                카테고리
-              </label>
-
-              {newItem.isCreatingCategory ? (
-                <div className="space-y-3">
-                  <div className="flex gap-2">
-                    <input
-                      type="text"
-                      placeholder="카테고리 이름"
-                      value={newItem.newCategoryName}
-                      onChange={(e) =>
-                        onNewItemChange({ newCategoryName: e.target.value })
-                      }
-                      className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-                    />
-                    <button
-                      type="button"
-                      onClick={handleAddCategory}
-                      className="bg-accent-500 text-white px-4 py-2 rounded-lg hover:bg-accent-600 text-sm transition-colors"
-                    >
-                      등록
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() =>
-                        onNewItemChange({
-                          isCreatingCategory: false,
-                          newCategoryName: "",
-                        })
-                      }
-                      className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 text-sm transition-colors"
-                    >
-                      취소
-                    </button>
+          {/* 고정/변동 타입 선택 */}
+          <div className="flex mb-3">
+            <button
+              type="button"
+              onClick={() =>
+                onNewItemChange({ categoryType: 'fixed', category: '' })
+              }
+              className={`flex-1 px-3  py-2 rounded-l-lg border text-sm transition-colors ${
+                newItem.categoryType === 'fixed'
+                  ? 'bg-accent-500 text-white border-accent-500'
+                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+              }`}
+            >
+              고정
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                onNewItemChange({ categoryType: 'variable', category: '' })
+              }
+              className={`flex-1 px-3  py-2 rounded-r-lg border text-sm  transition-colors ${
+                newItem.categoryType === 'variable'
+                  ? 'bg-accent-500 text-white border-accent-500'
+                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+              }`}
+            >
+              변동
+            </button>
+          </div>
+
+          <form onSubmit={handleSubmit} className="space-y-3 ">
+            {/* 카테고리 선택/생성 */}
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs font-medium mb-1 text-gray-700">
+                  카테고리
+                </label>
+
+                {newItem.isCreatingCategory ? (
+                  <div className="space-y-3">
+                    <div className="flex gap-2">
+                      <input
+                        type="text"
+                        placeholder="카테고리 이름"
+                        value={newItem.newCategoryName}
+                        onChange={(e) =>
+                          onNewItemChange({ newCategoryName: e.target.value })
+                        }
+                        className="flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
+                      />
+                      <button
+                        type="button"
+                        onClick={handleAddCategory}
+                        className="bg-accent-500 text-white px-4 py-2 rounded-lg hover:bg-accent-600 text-sm transition-colors"
+                      >
+                        등록
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() =>
+                          onNewItemChange({
+                            isCreatingCategory: false,
+                            newCategoryName: '',
+                          })
+                        }
+                        className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 text-sm transition-colors"
+                      >
+                        취소
+                      </button>
+                    </div>
                   </div>
-                </div>
-              ) : (
-                <div className="space-y-3">
-                  {/* 활성 카테고리 태그들 */}
-                  <div className="flex flex-wrap gap-2">
-                    {allCategories
-                      .filter(
-                        (cat) =>
-                          cat.type ===
-                            `${newItem.type}_${newItem.categoryType}` &&
-                          !cat.is_deleted,
-                      )
-                      .map((category) => (
-                        <div
-                          key={category.id}
-                          className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
-                            newItem.category === category.name
-                              ? newItem.type === "income"
-                                ? "bg-green-500 text-white"
-                                : "bg-red-500 text-white"
-                              : "bg-gray-100 text-gray-700 hover:bg-gray-200"
-                          }`}
-                        >
-                          <button
-                            type="button"
-                            onClick={() =>
-                              onNewItemChange({ category: category.name })
-                            }
-                            className="flex-1 text-left"
-                          >
-                            {category.name}
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => handleDeleteCategory(category.id)}
-                            className={`ml-1 w-4 h-4 flex items-center justify-center hover:opacity-70 ${
+                ) : (
+                  <div className="space-y-3">
+                    {/* 활성 카테고리 태그들 */}
+                    <div className="flex flex-wrap gap-2">
+                      {allCategories
+                        .filter(
+                          (cat) =>
+                            cat.type ===
+                              `${newItem.type}_${newItem.categoryType}` &&
+                            !cat.is_deleted
+                        )
+                        .map((category) => (
+                          <div
+                            key={category.id}
+                            className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
                               newItem.category === category.name
-                                ? "text-white"
-                                : "text-gray-500 hover:text-red-500"
+                                ? newItem.type === 'income'
+                                  ? 'bg-green-500 text-white'
+                                  : 'bg-red-500 text-white'
+                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                             }`}
-                            title="카테고리 삭제"
                           >
-                            <X className="w-3 h-3" />
-                          </button>
-                        </div>
-                      ))}
-
-                    {/* 카테고리 추가 버튼 */}
-                    <button
-                      type="button"
-                      onClick={() =>
-                        onNewItemChange({ isCreatingCategory: true })
-                      }
-                      className="px-3 py-1.5 rounded-full text-sm font-medium bg-accent-100 text-accent-600 hover:bg-accent-200 transition-colors flex items-center gap-1"
-                    >
-                      <Plus className="w-3 h-3" />
-                      추가
-                    </button>
-                  </div>
-                  {/* 사용하지 않는 카테고리 섹션 */}
-                  {/* TODO: 삭제할 때, 일괄적으로 삭제할 수 있도록 하기. 소프트
-                  삭제를 하되 언제든지 다시 복구할 수 있도록 하기 
-                  또한 해당 카테고리의 건수가 0일 경우에는 카테고리를 영구삭제 할 수 있도록 하기
-                  소프트 삭제를 고려한 이유는 데이터 보존을 위해 UI 측면에서만 작동하도록 한 것이다.*/}
-                  {deletedCategories.length > 0 && (
-                    <div className="border-t pt-3">
+                            <button
+                              type="button"
+                              onClick={() =>
+                                onNewItemChange({ category: category.name })
+                              }
+                              className="flex-1 text-left"
+                            >
+                              {category.name}
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() => handleDeleteCategory(category.id)}
+                              className={`ml-1 w-4 h-4 flex items-center justify-center hover:opacity-70 ${
+                                newItem.category === category.name
+                                  ? 'text-white'
+                                  : 'text-gray-500 hover:text-red-500'
+                              }`}
+                              title="카테고리 삭제"
+                            >
+                              <X className="w-3 h-3" />
+                            </button>
+                          </div>
+                        ))}
+
+                      {/* 카테고리 추가 버튼 */}
                       <button
                         type="button"
                         onClick={() =>
-                          setShowDeletedCategories(!showDeletedCategories)
+                          onNewItemChange({ isCreatingCategory: true })
                         }
-                        className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                        className="px-3 py-1.5 rounded-full text-sm font-medium bg-accent-100 text-accent-600 hover:bg-accent-200 transition-colors flex items-center gap-1"
                       >
-                        {showDeletedCategories ? (
-                          <ChevronUp className="w-4 h-4" />
-                        ) : (
-                          <ChevronDown className="w-4 h-4" />
-                        )}
-                        삭제된 카테고리 ({deletedCategories.length}개)
+                        <Plus className="w-3 h-3" />
+                        추가
                       </button>
-
-                      {showDeletedCategories && (
-                        <div className="mt-2 flex flex-wrap gap-2">
-                          {deletedCategories.map((category) => (
-                            <div
-                              key={category.id}
-                              className="flex items-center gap-1 px-3 py-1.5 bg-gray-50 border border-gray-300 rounded-full text-sm"
-                            >
-                              <span className="text-gray-600">
-                                {category.name}
-                              </span>
-                              <span className="text-xs text-gray-400">
-                                ({category.transactionCount || 0}건)
-                              </span>
-                              <button
-                                type="button"
-                                onClick={() =>
-                                  handleRestoreCategory(category.id)
-                                }
-                                className="ml-1 text-accent-600 hover:text-accent-700 text-xs underline"
-                              >
-                                <RotateCw className="w-3 h-3" />
-                              </button>
-                            </div>
-                          ))}
-                        </div>
-                      )}
                     </div>
-                  )}
-                </div>
-              )}
-            </div>
-
-            <div>
-              <label className="block text-xs font-medium mb-1 text-gray-700">
-                항목명
-              </label>
-              <input
-                type="text"
-                placeholder="항목명"
-                value={newItem.name}
-                onChange={(e) => onNewItemChange({ name: e.target.value })}
-                className="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-              />
-            </div>
-          </div>
-
-          <div className="space-y-3">
-            <div>
-              <label className="block text-xs font-medium mb-1 text-gray-700">
-                금액
-              </label>
-              <input
-                type="number"
-                placeholder="금액"
-                value={newItem.amount}
-                onChange={(e) => onNewItemChange({ amount: e.target.value })}
-                className="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
-              />
+                    {/* 사용하지 않는 카테고리 섹션 */}
+                    {/* TODO: 삭제할 때, 일괄적으로 삭제할 수 있도록 하기. 소프트
+                  삭제를 하되 언제든지 다시 복구할 수 있도록 하기 
+                  또한 해당 카테고리의 건수가 0일 경우에는 카테고리를 영구삭제 할 수 있도록 하기
+                  소프트 삭제를 고려한 이유는 데이터 보존을 위해 UI 측면에서만 작동하도록 한 것이다.*/}
+                    {deletedCategories.length > 0 && (
+                      <div className="border-t pt-3">
+                        <button
+                          type="button"
+                          onClick={() =>
+                            setShowDeletedCategories(!showDeletedCategories)
+                          }
+                          className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                        >
+                          {showDeletedCategories ? (
+                            <ChevronUp className="w-4 h-4" />
+                          ) : (
+                            <ChevronDown className="w-4 h-4" />
+                          )}
+                          삭제된 카테고리 ({deletedCategories.length}개)
+                        </button>
+
+                        {showDeletedCategories && (
+                          <div className="mt-2 flex flex-wrap gap-2">
+                            {deletedCategories.map((category) => (
+                              <div
+                                key={category.id}
+                                className="flex items-center gap-1 px-3 py-1.5 bg-gray-50 border border-gray-300 rounded-full text-sm"
+                              >
+                                <span className="text-gray-600">
+                                  {category.name}
+                                </span>
+                                <span className="text-xs text-gray-400">
+                                  ({category.transactionCount || 0}건)
+                                </span>
+                                <button
+                                  type="button"
+                                  onClick={() =>
+                                    handleRestoreCategory(category.id)
+                                  }
+                                  className="ml-1 text-accent-600 hover:text-accent-700 text-xs underline"
+                                >
+                                  <RotateCw className="w-3 h-3" />
+                                </button>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium mb-1 text-gray-700">
+                  항목명
+                </label>
+                <input
+                  type="text"
+                  placeholder="항목명"
+                  value={newItem.name}
+                  onChange={(e) => onNewItemChange({ name: e.target.value })}
+                  className="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
+                />
+              </div>
             </div>
 
-            <div className="flex items-end">
-              <button
-                type="submit"
-                className={`w-full rounded-lg px-3 py-1.5 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm transition-colors ${
-                  newItem.type === "income"
-                    ? "bg-green-500 text-white hover:bg-green-600"
-                    : "bg-red-500 text-white hover:bg-red-600"
-                }`}
-                disabled={
-                  !newItem.name.trim() || !newItem.amount || !newItem.category
-                }
-              >
-                <Plus className="w-3 h-3" />
-                추가
-              </button>
+            <div className="space-y-3">
+              <div>
+                <label className="block text-xs font-medium mb-1 text-gray-700">
+                  금액
+                </label>
+                <input
+                  type="number"
+                  placeholder="금액"
+                  value={newItem.amount}
+                  onChange={(e) => onNewItemChange({ amount: e.target.value })}
+                  className="w-full border border-gray-300 rounded-lg px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500"
+                />
+              </div>
+
+              <div className="flex items-end">
+                <button
+                  type="submit"
+                  className={`w-full rounded-lg px-3 py-1.5 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm transition-colors ${
+                    newItem.type === 'income'
+                      ? 'bg-green-500 text-white hover:bg-green-600'
+                      : 'bg-red-500 text-white hover:bg-red-600'
+                  }`}
+                  disabled={
+                    !newItem.name.trim() || !newItem.amount || !newItem.category
+                  }
+                >
+                  <Plus className="w-3 h-3" />
+                  추가
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       </div>
-    </div>
+
+      {/* 목표 업데이트 모달 */}
+      {goalUpdateModal.categoryChange && (
+        <GoalUpdateModal
+          isOpen={goalUpdateModal.isOpen}
+          onClose={() =>
+            setGoalUpdateModal({
+              isOpen: false,
+              goals: [],
+              categoryChange: null,
+            })
+          }
+          goals={goalUpdateModal.goals}
+          categoryChange={goalUpdateModal.categoryChange}
+        />
+      )}
+    </>
   );
 }
diff --git a/src/components/budget/GoalUpdateModal.tsx b/src/components/budget/GoalUpdateModal.tsx
new file mode 100644
index 0000000..a6a3c84
--- /dev/null
+++ b/src/components/budget/GoalUpdateModal.tsx
@@ -0,0 +1,166 @@
+import { Goal } from '@/types/goals';
+import Modal from '../common/Modal';
+import { Target, TrendingDown, TrendingUp } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export interface CategoryChangeData {
+  categoryName: string;
+  newAmount: number;
+  newCount: number;
+  oldAmount: number;
+  oldCount: number;
+  type: 'income' | 'expense';
+}
+
+interface GoalUpdateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  goals: Goal[];
+  categoryChange: CategoryChangeData;
+}
+
+const GoalUpdateModal = ({
+  isOpen,
+  onClose,
+  goals,
+  categoryChange,
+}: GoalUpdateModalProps) => {
+  const router = useRouter();
+
+  const handleGoalEdit = (goalId: string) => {
+    router.push(`/goals/${goalId}/edit`);
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg">
+      <Modal.Header>
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-blue-100 rounded-lg">
+            <Target className="w-5 h-5 text-blue-600" />
+          </div>
+          <div>
+            <Modal.Title>목표 업데이트</Modal.Title>
+            <Modal.Description>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 text-sm text-blue-700">
+                <strong>{categoryChange.categoryName}</strong> 카테고리의
+                데이터가 변경되었습니다. 관련 목표들을 확인하고
+                수정하시겠습니까?
+              </div>
+            </Modal.Description>
+          </div>
+        </div>
+      </Modal.Header>
+
+      <Modal.Body className="space-y-4">
+        {/* 변경사항 요약 */}
+        <div className="bg-gray-50 rounded-lg p-4">
+          <h4 className="font-medium text-gray-800 mb-2 flex items-center gap-2">
+            {categoryChange.type === 'income' ? (
+              <TrendingUp className="w-4 h-4 text-green-600" />
+            ) : (
+              <TrendingDown className="w-4 h-4 text-red-600" />
+            )}
+            카테고리 변경사항
+          </h4>
+
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-gray-600">금액:</span>
+              <span>
+                {categoryChange.oldAmount.toLocaleString()}원 →{' '}
+                {categoryChange.newAmount.toLocaleString()}원
+                <span
+                  className={`ml-1 ${
+                    categoryChange.newAmount > categoryChange.oldAmount
+                      ? 'text-green-600'
+                      : 'text-red-600'
+                  }`}
+                >
+                  (
+                  {categoryChange.newAmount > categoryChange.oldAmount
+                    ? '+'
+                    : ''}
+                  {(
+                    ((categoryChange.newAmount - categoryChange.oldAmount) /
+                      categoryChange.oldAmount) *
+                    100
+                  ).toFixed(1)}
+                  %)
+                </span>
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-gray-600">횟수:</span>
+              <span>
+                {categoryChange.oldCount}회 → {categoryChange.newCount}회
+                <span
+                  className={`ml-1 ${
+                    categoryChange.newCount > categoryChange.oldCount
+                      ? 'text-green-600'
+                      : 'text-red-600'
+                  }`}
+                >
+                  (
+                  {categoryChange.newCount > categoryChange.oldCount ? '+' : ''}
+                  {categoryChange.newCount - categoryChange.oldCount})
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* 관련 목표 리스트 */}
+        <div className="space-y-3">
+          <h4 className="font-medium text-gray-800">관련 목표들</h4>
+          {goals.map((goal) => (
+            <div
+              key={goal.id}
+              className="border rounded-lg p-4 cursor-pointer hover:bg-gray-50 transition-colors"
+              onClick={() => handleGoalEdit(goal.id)}
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <h5 className="font-medium text-gray-800">{goal.title}</h5>
+                  <p className="text-sm text-gray-600 mt-1">
+                    {goal.description}
+                  </p>
+
+                  <div className="mt-2 flex gap-4 text-sm">
+                    {goal.target_amount && (
+                      <span className="text-gray-600">
+                        목표 금액: {goal.target_amount.toLocaleString()}원
+                      </span>
+                    )}
+                    {goal.target_count && (
+                      <span className="text-gray-600">
+                        목표 횟수: {goal.target_count}회
+                      </span>
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex flex-col items-end gap-1">
+                  <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
+                    {goal.challenge_mode === 'both'
+                      ? '금액 + 횟수'
+                      : goal.challenge_mode === 'amount'
+                        ? '금액'
+                        : '횟수'}
+                  </span>
+                  <span className="text-xs text-blue-600">클릭하여 수정</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Modal.Body>
+
+      <Modal.Footer>
+        <Modal.CloseButton>나중에 수정</Modal.CloseButton>
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default GoalUpdateModal;
diff --git a/src/hooks/budget/useBudget.ts b/src/hooks/budget/useBudget.ts
index 403657a..8a68fc9 100644
--- a/src/hooks/budget/useBudget.ts
+++ b/src/hooks/budget/useBudget.ts
@@ -1,4 +1,3 @@
-import { useTransactionAlertContext } from "@/components/budget/TransactionAlertProvider";
 import { supabase } from "@/lib/supabase";
 import {
   BudgetFormData,
@@ -10,7 +9,6 @@ import {
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { endOfMonth, format, parseISO, startOfMonth } from "date-fns";
 import { useMemo } from "react";
-import { useGoalStatusUpdater } from "../goals/useGoalStatusUpdater";
 
 interface UseBudgetProps {
   userId?: string;
@@ -20,8 +18,6 @@ interface UseBudgetProps {
 
 export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
   const queryClient = useQueryClient();
-  const { showAlert } = useTransactionAlertContext();
-  const { checkGoalsByCategory } = useGoalStatusUpdater();
 
   // 통합 데이터 조회 (수입 + 지출)
   const {
@@ -270,6 +266,21 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
       const tableName =
         newTransaction.type === "income" ? "incomes" : "expenses";
 
+      const { data: categoryInfo } = await supabase
+        .from("categories")
+        .select('name')
+        .eq('id', newTransaction.category_id)
+        .single();
+
+      const categoryName = categoryInfo?.name || '';
+
+      // 트랜잭션 추가 전 카테고리 통계 저장
+      const beforeStats = await getCategoryStats(
+        newTransaction.user_id,
+        categoryName,
+        newTransaction.type
+      );
+
       const { type, ...transactionData } = newTransaction;
 
       const { data, error } = await supabase
@@ -284,25 +295,46 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
         .single();
 
       if (error) throw error;
-      return { ...data, type };
+
+      // 트랜잭션 추가 후 카테고리 통계 조회
+      const afterStats = await getCategoryStats(
+        newTransaction.user_id,
+        data.category?.name || '',
+        type
+      );
+
+      return { ...data, type, beforeStats, afterStats };
     },
-    onSuccess: async (newTransaction) => {
+    onSuccess: async (result) => {
       queryClient.invalidateQueries({ queryKey: ["budget"] });
       queryClient.invalidateQueries({ queryKey: ["goals"] });
 
-      // 알림 표시
-      if (newTransaction.category?.name && userId) {
-        // 목표 상태 확인 (알림보다 먼저 실행)
-        await checkGoalsByCategory(
+      // 카테고리 통계가 변경되었는지 확인
+      const { beforeStats, afterStats, category } = result;
+
+      if (beforeStats && afterStats && category?.name && userId && (beforeStats.amount !== afterStats.amount || beforeStats.count !== afterStats.count)) {
+        // 해당 카테고리에 연결된 목표들이 있는지 확인
+        const categoryGoals = await checkCategoryGoals(
           userId,
-          newTransaction.category.name,
-          newTransaction.type,
+          category.name,
+          result.type
         );
 
-        // 지연을 두어 TanStack Query 업데이트 후 알림 표시
-        setTimeout(() => {
-          showAlert(newTransaction.category!.name, newTransaction.type);
-        }, 100);
+        if (categoryGoals.length > 0) {
+          // 목표 업데이트 모달 트리거 - 컴포넌트에서 처리
+          // 여기서는 상태만 업데이트, 실제 모달은 컴포넌트에서 처리
+          window.dispatchEvent(new CustomEvent('goalUpdateNeeded', {
+            detail: {
+              categoryName: category.name,
+              newAmount: afterStats.amount,
+              newCount: afterStats.count,
+              oldAmount: beforeStats.amount,
+              oldCount: beforeStats.count,
+              type: result.type,
+              goals: categoryGoals
+            }
+          }))
+        }
       }
     },
   });
@@ -324,21 +356,54 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
         .eq("id", id)
         .single();
 
-      const { error } = await supabase.from(tableName).delete().eq("id", id);
+      if (!transactionToDelete) throw new Error('삭제할 거래를 찾을 수 없습니다.');
 
+      // 삭제 전 카테고리 통계 저장
+      const beforeStats = await getCategoryStats(
+        transactionToDelete.user_id,
+        transactionToDelete.category?.name || '',
+        type
+      );
+
+      const { error } = await supabase.from(tableName).delete().eq("id", id);
       if (error) throw error;
 
-      return { deletedTransaction: transactionToDelete, type };
+      // 삭제 후 카테고리 통계 조회
+      const afterStats = await getCategoryStats(
+        transactionToDelete.user_id,
+        transactionToDelete.category?.name || '',
+        type
+      );
+
+      return { deletedTransaction: transactionToDelete, type, beforeStats, afterStats };
     },
-    onSuccess: ({ deletedTransaction, type }) => {
+    onSuccess: async ({ deletedTransaction, type, beforeStats, afterStats }) => {
       queryClient.invalidateQueries({ queryKey: ["budget"] });
       queryClient.invalidateQueries({ queryKey: ["goals"] });
 
-      // 알림 표시
-      if (deletedTransaction?.category?.name && userId) {
-        setTimeout(() => {
-          showAlert(deletedTransaction.category!.name, type);
-        }, 100);
+      // 카테고리 통계가 변경되었는지 확인
+      if (beforeStats && afterStats && deletedTransaction?.category?.name && userId) {
+        if (beforeStats.amount !== afterStats.amount || beforeStats.count !== afterStats.count) {
+          const categoryGoals = await checkCategoryGoals(
+            userId,
+            deletedTransaction.category.name,
+            type
+          );
+
+          if (categoryGoals.length > 0) {
+            window.dispatchEvent(new CustomEvent('goalUpdateNeeded', {
+              detail: {
+                categoryName: deletedTransaction.category.name,
+                newAmount: afterStats.amount,
+                newCount: afterStats.count,
+                oldAmount: beforeStats.amount,
+                oldCount: beforeStats.count,
+                type: type,
+                goals: categoryGoals
+              }
+            }));
+          }
+        }
       }
     },
   });
@@ -393,3 +458,60 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
     isUpdatingTransaction: updateTransactionMutation.isPending,
   };
 };
+
+// 카테고리별 통계 조회 헬퍼 함수
+const getCategoryStats = async (userId: string, categoryName: string, type: "income" | "expense") => {
+  const startOfMonth = format(new Date(new Date().getFullYear(), new Date().getMonth(), 1), "yyyy-MM-dd");
+  const endOfMonth = format(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0), "yyyy-MM-dd");
+  
+  const tableName = type === "income" ? "incomes" : "expenses";
+  
+  const { data, error } = await supabase
+    .from(tableName)
+    .select(`
+      amount,
+      category:categories!inner(name)
+    `)
+    .eq("user_id", userId)
+    .eq("category.name", categoryName)
+    .gte("date", startOfMonth)
+    .lte("date", endOfMonth);
+
+  if (error) throw error;
+  
+  return {
+    amount: data?.reduce((sum, item) => sum + item.amount, 0) || 0,
+    count: data?.length || 0
+  };
+};
+
+// 카테고리별 목표 조회 헬퍼 함수
+const checkCategoryGoals = async (
+  userId: string, 
+  categoryName: string, 
+  type: "income" | "expense"
+) => {
+  const { data: categoryData } = await supabase
+    .from("categories")
+    .select("id")
+    .eq("user_id", userId)
+    .eq("name", categoryName)
+    .in("type", [`${type}_fixed`, `${type}_variable`]);
+
+  if (!categoryData || categoryData.length === 0) return [];
+
+  const categoryIds = categoryData.map(cat => cat.id);
+
+  const { data, error } = await supabase
+    .from("goals")
+    .select(`
+      *,
+      category:categories(*)
+    `)
+    .eq("user_id", userId)
+    .in("category_id", categoryIds)
+    .eq("status", "active");
+
+  if (error) throw error;
+  return data || [];
+};
\ No newline at end of file
diff --git a/src/hooks/budget/useChallenge.ts b/src/hooks/budget/useChallenge.ts
index e96372a..ad812ae 100644
--- a/src/hooks/budget/useChallenge.ts
+++ b/src/hooks/budget/useChallenge.ts
@@ -1,5 +1,4 @@
 import { supabase } from "@/lib/supabase";
-import { GoalFormData } from "@/types/goals";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 interface CreateChallengeData {
@@ -30,10 +29,16 @@ export const useChallenge = () => {
       }
 
       // 목표 타입 결정
-      const goalType =
-        data.categoryType === "income" ? "increase_income" : "reduce_expense";
+      const goalType = data.categoryType === "income" ? "increase_income" : "reduce_expense";
 
-      const goalData: GoalFormData & { user_id: string } = {
+      // 카테고리 ID 조회
+      const categoryId = await getCategoryIdByName(
+        data.category, 
+        data.categoryType, 
+        data.userId
+      );
+
+      const goalData = {
         user_id: data.userId,
         title: data.title,
         description: data.description || null,
@@ -43,33 +48,30 @@ export const useChallenge = () => {
         target_count: data.enableCountGoal ? Number(data.targetCount) : null,
         target_date: data.targetDate,
         challenge_mode: challengeMode,
-        category_id: null, // TODO:카테고리별 목표가 필요하다면 추후 구현
+        category_id: categoryId,
+        current_amount: 0,
+        current_count: 0,
+        status: "active" as const,
+        created_from_date: new Date().toISOString().split("T")[0],
       };
 
       const { data: result, error } = await supabase
         .from("goals")
-        .insert([
-          {
-            ...goalData,
-            current_amount: 0,
-            current_count: 0,
-            status: "active",
-            created_from_date: new Date().toISOString().split("T")[0],
-          },
-        ])
-        .select(
-          `
+        .insert([goalData])
+        .select(`
           *,
           category:categories(*)
-        `,
-        )
+        `)
         .single();
 
-      if (error) throw error;
+      if (error) {
+        console.error("목표 생성 에러:", error);
+        throw error;
+      }
+      
       return result;
     },
     onSuccess: () => {
-      // goals 관련 쿼리들 무효화
       queryClient.invalidateQueries({ queryKey: ["goals"] });
     },
   });
@@ -80,3 +82,38 @@ export const useChallenge = () => {
     createChallengeError: createChallengeMutation.error,
   };
 };
+
+const getCategoryIdByName = async (
+  categoryName: string, 
+  categoryType: "income" | "expense", 
+  userId: string
+): Promise<string | null> => {
+  try {
+    // 두 타입 모두 한 번에 조회
+    const { data: categories, error } = await supabase
+      .from("categories")
+      .select("id, type")
+      .eq("user_id", userId)
+      .eq("name", categoryName)
+      .in("type", [`${categoryType}_fixed`, `${categoryType}_variable`]);
+
+    if (error) {
+      console.error("카테고리 조회 에러:", error);
+      return null;
+    }
+
+    if (!categories || categories.length === 0) {
+      console.warn(`카테고리를 찾을 수 없습니다: ${categoryName} (${categoryType})`);
+      return null;
+    }
+
+    const fixedCategory = categories.find(cat => cat.type === `${categoryType}_fixed`);
+    const variableCategory = categories.find(cat => cat.type === `${categoryType}_variable`);
+
+    return fixedCategory?.id || variableCategory?.id || null;
+
+  } catch (error) {
+    console.error("카테고리 ID 조회 실패:", error);
+    return null;
+  }
+};
\ No newline at end of file
diff --git a/src/hooks/goals/useGoals.ts b/src/hooks/goals/useGoals.ts
new file mode 100644
index 0000000..7f06727
--- /dev/null
+++ b/src/hooks/goals/useGoals.ts
@@ -0,0 +1,48 @@
+import { supabase } from '@/lib/supabase';
+import { Goal } from '@/types/goals';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+interface UseGoalsProps {
+  userId?: string;
+}
+
+export const useGoals = ({ userId }: UseGoalsProps = {}) => {
+  const { data: goals = [], isLoading } = useQuery({
+    queryKey: ['goals', userId],
+    queryFn: async (): Promise<Goal[]> => {
+      if (!userId) return [];
+
+      const { data, error } = await supabase
+        .from('goals')
+        .select(`
+          *,
+          category:categories(*)
+        `)
+        .eq('user_id', userId)
+        .order('created_at', { ascending: false });
+
+      if (error) throw error;
+      return data || [];
+    },
+    enabled: !!userId,
+  });
+
+  // 목표 상태별 분류
+  const { activeGoals, completedGoals } = useMemo(() => {
+    const active = goals.filter(goal => goal.status === 'active');
+    const completed = goals.filter(goal => goal.status === 'completed');
+
+    return {
+      activeGoals: active,
+      completedGoals: completed,
+    };
+  }, [goals]);
+
+  return {
+    goals,
+    activeGoals,
+    completedGoals,
+    isLoading,
+  };
+};
\ No newline at end of file
diff --git a/src/hooks/goals/useGoalsByBudget.ts b/src/hooks/goals/useGoalsByBudget.ts
new file mode 100644
index 0000000..67f8696
--- /dev/null
+++ b/src/hooks/goals/useGoalsByBudget.ts
@@ -0,0 +1,56 @@
+import { supabase } from '@/lib/supabase';
+import { Goal } from '@/types/goals';
+import { useQuery } from '@tanstack/react-query';
+
+interface UseGoalsByBudgetProps {
+  userId?: string;
+  categoryName?: string;
+  type?: "income" | "expense";
+}
+
+export const useGoalsByBudget = ({
+  userId,
+  categoryName,
+  type,
+}: UseGoalsByBudgetProps = {}) => {
+  const { data: goals = [], isLoading } = useQuery({
+    queryKey: ["goals-by-budget", userId, categoryName, type],
+    queryFn: async (): Promise<Goal[]> => {
+      if (!userId || !categoryName) return [];
+
+      // 카테고리와 연결된 목표들 조회
+      const { data: categoryData } = await supabase
+        .from("categories")
+        .select("id")
+        .eq("user_id", userId)
+        .eq("name", categoryName)
+        .in("type", [`${type}_variable`, `${type}_fixed`]);
+
+      if (!categoryData || categoryData.length === 0) return [];
+
+      const categoryIds = categoryData.map(cat => cat.id);
+
+      const { data, error } = await supabase
+        .from("goals")
+        .select(`
+          *,
+          category:categories(*)
+        `)
+        .eq("user_id", userId)
+        .in("category_id", categoryIds)
+        .eq("status", "active");
+
+      if (error) throw error;
+      return data || [];
+    },
+    enabled: !!userId && !!categoryName && !!type,
+  });
+
+  return {
+    goals,
+    isLoading,
+    hasMultipleGoals: goals.length > 1,
+    hasSingleGoal: goals.length === 1,
+    hasNoGoals: goals.length === 0,
+  };
+};
\ No newline at end of file

From db84293dbf667fa9a098aedd3bb94e703c80c1dc Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 12:11:34 +0900
Subject: [PATCH 04/12] =?UTF-8?q?feat:=20=EB=AA=A9=ED=91=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EA=B8=B0=EB=8A=A5?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/goals/useGoals.ts | 51 +++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/hooks/goals/useGoals.ts b/src/hooks/goals/useGoals.ts
index 7f06727..30112f5 100644
--- a/src/hooks/goals/useGoals.ts
+++ b/src/hooks/goals/useGoals.ts
@@ -1,6 +1,6 @@
 import { supabase } from '@/lib/supabase';
-import { Goal } from '@/types/goals';
-import { useQuery } from '@tanstack/react-query';
+import { Goal, GoalFormData } from '@/types/goals';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useMemo } from 'react';
 
 interface UseGoalsProps {
@@ -8,6 +8,8 @@ interface UseGoalsProps {
 }
 
 export const useGoals = ({ userId }: UseGoalsProps = {}) => {
+  const queryClient = useQueryClient();
+
   const { data: goals = [], isLoading } = useQuery({
     queryKey: ['goals', userId],
     queryFn: async (): Promise<Goal[]> => {
@@ -28,6 +30,47 @@ export const useGoals = ({ userId }: UseGoalsProps = {}) => {
     enabled: !!userId,
   });
 
+  // 목표 업데이트
+  const updateGoalMutation = useMutation({
+    mutationFn: async ({ id, updates }: { id: string; updates: Partial<GoalFormData> }) => {
+      const updateData = {
+        ...updates,
+        updated_at: new Date().toISOString(),
+      };
+
+      const { data, error } = await supabase
+        .from('goals')
+        .update(updateData)
+        .eq('id', id)
+        .select(`
+          *,
+          category:categories(*)
+        `)
+        .single();
+
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['goals'] });
+    },
+  });
+
+  // 목표 삭제
+  const deleteGoalMutation = useMutation({
+    mutationFn: async (goalId: string) => {
+      const { error } = await supabase
+        .from('goals')
+        .delete()
+        .eq('id', goalId);
+
+      if (error) throw error;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['goals'] });
+    },
+  });
+
   // 목표 상태별 분류
   const { activeGoals, completedGoals } = useMemo(() => {
     const active = goals.filter(goal => goal.status === 'active');
@@ -44,5 +87,9 @@ export const useGoals = ({ userId }: UseGoalsProps = {}) => {
     activeGoals,
     completedGoals,
     isLoading,
+    updateGoal: updateGoalMutation.mutate,
+    isUpdatingGoal: updateGoalMutation.isPending,
+    deleteGoal: deleteGoalMutation.mutate,
+    isDeletingGoal: deleteGoalMutation.isPending,
   };
 };
\ No newline at end of file

From 1369b220b0795d247a940afd8f89e896665cecd3 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 12:11:59 +0900
Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20=EC=B1=8C=EB=A6=B0=EC=A7=80?=
 =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/goals/database.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/types/goals/database.ts b/src/types/goals/database.ts
index ad0debe..ad3e7d9 100644
--- a/src/types/goals/database.ts
+++ b/src/types/goals/database.ts
@@ -29,6 +29,7 @@ export interface GoalFormData {
   target_amount?: number | null;
   target_count?: number | null;
   target_date?: string | null;
+  status: "active" | "completed" | "paused" | "cancelled";
   challenge_mode: "amount" | "count" | "both";
   category_id?: string | null;
 }

From 4e22b6cc0ecabe3c1036835e31f28db02221e879 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 12:12:22 +0900
Subject: [PATCH 06/12] =?UTF-8?q?refactor:=20goals=20=EB=8F=84=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B8=20=ED=97=AC=ED=8D=BC=ED=95=A8=EC=88=98=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/goals/goalsHelpers.ts | 105 ++++++++++++++++++++++++++++++++
 1 file changed, 105 insertions(+)
 create mode 100644 src/utils/goals/goalsHelpers.ts

diff --git a/src/utils/goals/goalsHelpers.ts b/src/utils/goals/goalsHelpers.ts
new file mode 100644
index 0000000..681de4c
--- /dev/null
+++ b/src/utils/goals/goalsHelpers.ts
@@ -0,0 +1,105 @@
+export const getStatusText = (status: string): string => {
+  switch (status) {
+    case 'active':
+      return '진행 중';
+    case 'completed':
+      return '완료됨';
+    case 'paused':
+      return '일시정지';
+    case 'cancelled':
+      return '취소됨';
+    default:
+      return status;
+  }
+};
+
+export const getTypeText = (type: string): string => {
+  switch (type) {
+    case 'save_money':
+      return '돈 저축';
+    case 'reduce_expense':
+      return '지출 줄이기';
+    case 'increase_income':
+      return '수입 늘리기';
+    case 'custom':
+      return '사용자 정의';
+    default:
+      return type;
+  }
+};
+
+export const getChallengeMode = (mode: string): string => {
+  switch (mode) {
+    case 'amount':
+      return '금액';
+    case 'count':
+      return '횟수';
+    case 'both':
+      return '금액 + 횟수';
+    default:
+      return mode;
+  }
+};
+
+export const calculateProgress = (current: number, target: number): number => {
+  if (target === 0) return 0;
+  return Math.round((current / target) * 100);
+};
+
+export const getDaysLeft = (targetDate: string | null | undefined): number | null => {
+  if (!targetDate) return null;
+  const daysLeft = Math.ceil(
+    (new Date(targetDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
+  );
+  return daysLeft;
+};
+
+export const getGoalProgress = (goal: {
+  target_amount?: number | null;
+  current_amount?: number;
+  target_count?: number | null;
+  current_count?: number;
+}) => {
+  const amountProgress = goal.target_amount && goal.current_amount !== undefined 
+    ? calculateProgress(goal.current_amount, goal.target_amount) 
+    : 0;
+  
+  const countProgress = goal.target_count && goal.current_count !== undefined 
+    ? calculateProgress(goal.current_count, goal.target_count) 
+    : 0;
+  
+  // 종합 진행률 (둘 다 있으면 평균, 하나만 있으면 그것을 사용)
+  let overallProgress = 0;
+  if (goal.target_amount && goal.target_count) {
+    overallProgress = (amountProgress + countProgress) / 2;
+  } else if (goal.target_amount) {
+    overallProgress = amountProgress;
+  } else if (goal.target_count) {
+    overallProgress = countProgress;
+  }
+  
+  return {
+    amountProgress,
+    countProgress,
+    overallProgress: Math.round(overallProgress),
+  };
+};
+
+export const getStatusColorClass = (status: string): string => {
+  switch (status) {
+    case 'active':
+      return 'bg-blue-100 text-blue-800';
+    case 'completed':
+      return 'bg-green-100 text-green-800';
+    case 'paused':
+      return 'bg-yellow-100 text-yellow-800';
+    case 'cancelled':
+      return 'bg-red-100 text-red-800';
+    default:
+      return 'bg-gray-100 text-gray-800';
+  }
+};
+
+export const getProgressBarColor = (type: string): string => {
+  return type === 'increase_income' ? '#22c55e' : '#ef4444';
+};
\ No newline at end of file

From 635ca40830e0aa65a396860785df0f0a532053dc Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 14:57:12 +0900
Subject: [PATCH 07/12] =?UTF-8?q?feat:=20=EB=AA=A9=ED=91=9C=20=EB=8F=84?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EA=B5=AC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/goals/[id]/edit/page.tsx         | 688 +++++++++++++++--------
 src/app/goals/[id]/page.tsx              | 467 ++++++++-------
 src/app/goals/page.tsx                   | 297 ++++++----
 src/components/budget/ChallengeModal.tsx |   6 +-
 src/components/goals/ActionButton.tsx    |  44 ++
 src/components/goals/GoalCard.tsx        | 178 ++++++
 src/components/goals/InfoSection.tsx     |  53 ++
 src/components/goals/ProgressBar.tsx     | 109 ++++
 src/components/goals/StatCard.tsx        |  47 ++
 src/components/goals/StatusBadge.tsx     |  71 +++
 src/hooks/goals/useGoalStatistics.ts     |  34 ++
 11 files changed, 1402 insertions(+), 592 deletions(-)
 create mode 100644 src/components/goals/ActionButton.tsx
 create mode 100644 src/components/goals/GoalCard.tsx
 create mode 100644 src/components/goals/InfoSection.tsx
 create mode 100644 src/components/goals/ProgressBar.tsx
 create mode 100644 src/components/goals/StatCard.tsx
 create mode 100644 src/components/goals/StatusBadge.tsx
 create mode 100644 src/hooks/goals/useGoalStatistics.ts

diff --git a/src/app/goals/[id]/edit/page.tsx b/src/app/goals/[id]/edit/page.tsx
index 0dfbc88..ff0dd29 100644
--- a/src/app/goals/[id]/edit/page.tsx
+++ b/src/app/goals/[id]/edit/page.tsx
@@ -2,23 +2,183 @@
 
 import { useAuth } from '@/hooks/auth';
 import { useGoals } from '@/hooks/goals/useGoals';
+import { GoalFormData } from '@/types/goals';
+import {
+  getChallengeMode,
+  getStatusText,
+  getTypeText,
+} from '@/utils/goals/goalsHelpers';
+import { format } from 'date-fns';
+import {
+  BarChart3,
+  Calendar,
+  Edit3,
+  HandCoins,
+  Hash,
+  Save,
+  Target,
+  X,
+} from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
+import { FormEvent, useEffect, useState } from 'react';
 
-const GoalDetailPage = () => {
+interface GoalEditFormData {
+  title: string;
+  description: string;
+  reason: string;
+  target_amount: string;
+  target_count: string;
+  target_date: string;
+  status: 'active' | 'completed' | 'paused' | 'cancelled';
+  challenge_mode: 'amount' | 'count' | 'both';
+}
+
+const GoalEditPage = () => {
   const { user } = useAuth();
-  const { goals, isLoading } = useGoals({ userId: user?.id });
+  const {
+    goals,
+    isLoading: isGoalsLoading,
+    updateGoal,
+    isUpdatingGoal,
+  } = useGoals({ userId: user?.id });
   const params = useParams();
   const router = useRouter();
 
   const goalId = params.id as string;
   const goal = goals.find((g) => g.id === goalId);
 
+  const [formData, setFormData] = useState<GoalEditFormData>({
+    title: '',
+    description: '',
+    reason: '',
+    target_amount: '',
+    target_count: '',
+    target_date: '',
+    status: 'active',
+    challenge_mode: 'amount',
+  });
+
+  const [errors, setErrors] = useState<Partial<GoalEditFormData>>({});
+
+  // 목표 데이터로 폼 초기화
+  useEffect(() => {
+    if (goal) {
+      setFormData({
+        title: goal.title || '',
+        description: goal.description || '',
+        reason: goal.reason || '',
+        target_amount: goal.target_amount ? goal.target_amount.toString() : '',
+        target_count: goal.target_count ? goal.target_count.toString() : '',
+        target_date: goal.target_date
+          ? format(new Date(goal.target_date), 'yyyy-MM-dd')
+          : '',
+        status: goal.status,
+        challenge_mode: goal.challenge_mode,
+      });
+    }
+  }, [goal]);
+
+  const handleInputChange = (field: keyof GoalEditFormData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    // 에러 클리어
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
+  };
+
+  const validateForm = (): boolean => {
+    const newErrors: Partial<GoalEditFormData> = {};
+
+    if (!formData.title.trim()) {
+      newErrors.title = '목표 제목은 필수 입니다.';
+    }
+
+    if (
+      formData.challenge_mode === 'amount' ||
+      formData.challenge_mode === 'both'
+    ) {
+      if (!formData.target_amount || Number(formData.target_amount) <= 0) {
+        newErrors.target_amount = '목표 금액을 올바르게 입력해주세요.';
+      }
+    }
+
+    if (
+      formData.challenge_mode === 'count' ||
+      formData.challenge_mode === 'both'
+    ) {
+      if (!formData.target_count || Number(formData.target_count) <= 0) {
+        newErrors.target_count = '목표 횟수를 올바르게 입력해주세요.';
+      }
+    }
+
+    if (!formData.target_date) {
+      newErrors.target_date = '목표 날짜는 필수입니다.';
+    } else {
+      const targetDate = new Date(formData.target_date);
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      if (targetDate < today) {
+        newErrors.target_date = '목표 날짜는 오늘 이후여야 합니다.';
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    const updateData: Partial<GoalFormData> = {
+      title: formData.title.trim(),
+      description: formData.description.trim() || null,
+      reason: formData.reason.trim() || null,
+      target_date: formData.target_date || null,
+      status: formData.status,
+      challenge_mode: formData.challenge_mode,
+    };
+
+    // 챌린지 모드에 따라 목표값 설정
+    if (formData.challenge_mode === 'amount') {
+      updateData.target_amount = Number(formData.target_amount);
+      updateData.target_count = null;
+    } else if (formData.challenge_mode === 'count') {
+      updateData.target_count = Number(formData.target_count);
+      updateData.target_amount = null;
+    } else {
+      updateData.target_amount = Number(formData.target_amount);
+      updateData.target_count = Number(formData.target_count);
+    }
+
+    try {
+      updateGoal({ id: goalId, updates: updateData });
+      alert('목표가 성공적으로 수정되었습니다.');
+      router.push(`/goals/${goalId}`);
+    } catch (error) {
+      console.error('목표 수정 실패:', error);
+      alert('목표 수정에 실패했습니다.');
+    }
+  };
+
   // 로딩 상태
-  if (isLoading) {
+  if (isGoalsLoading) {
     return (
-      <div>
-        <h1>목표 상세</h1>
-        <p>로딩 중...</p>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 border border-gray-100">
+          <div className="relative w-16 h-16 mx-auto mb-6">
+            <div className="absolute inset-0 border-4 border-accent-200 rounded-full animate-pulse" />
+            <div className="absolute inset-0 border-4 border-accent-500 border-t-transparent rounded-full animate-spin" />
+          </div>
+          <p className="text-lg font-medium text-gray-700 mb-2">
+            목표를 불러오는 중
+          </p>
+          <p className="text-sm text-gray-500">잠시만 기다려주세요...</p>
+        </div>
       </div>
     );
   }
@@ -26,9 +186,14 @@ const GoalDetailPage = () => {
   // 사용자 인증 확인
   if (!user?.id) {
     return (
-      <div>
-        <h1>목표 상세</h1>
-        <p>로그인이 필요합니다.</p>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md border border-gray-100">
+          <div className="p-4 bg-gradient-to-br from-accent-500 to-accent-400 rounded-2xl w-fit mx-auto mb-6 shadow-lg">
+            <Target className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-3">목표 수정</h1>
+          <p className="text-gray-600 mb-6">로그인이 필요한 서비스입니다.</p>
+        </div>
       </div>
     );
   }
@@ -36,258 +201,295 @@ const GoalDetailPage = () => {
   // 목표를 찾을 수 없는 경우
   if (!goal) {
     return (
-      <div>
-        <h1>목표 상세</h1>
-        <p>목표를 찾을 수 없습니다.</p>
-        <button onClick={() => router.push('/goals')}>
-          목표 목록으로 돌아가기
-        </button>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md border border-gray-100">
+          <div className="p-4 bg-gradient-to-br from-red-500 to-pink-500 rounded-2xl w-fit mx-auto mb-6 shadow-lg">
+            <Target className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-3">
+            목표를 찾을 수 없습니다
+          </h1>
+          <p className="text-gray-600 mb-6">
+            수정하려는 목표가 존재하지 않거나 삭제되었습니다.
+          </p>
+          <button
+            onClick={() => router.push('/goals')}
+            className="px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
+          >
+            목표 목록으로 돌아가기
+          </button>
+        </div>
       </div>
     );
   }
 
-  const handleEdit = () => {
-    router.push(`/goals/${goalId}/edit`);
-  };
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50">
+      <div className="flex flex-col gap-4 max-w-4xl mx-auto px-4 py-8">
+        {/* 메인 폼 */}
+        <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
+          {/* 헤더 섹션 */}
+          <div className="bg-gradient-to-r from-accent-400 to-accent-600 py-6 px-4 text-white">
+            <div className="flex items-center gap-3 mb-4">
+              <Edit3 className="w-8 h-8" />
+              <h1 className="text-3xl font-bold">목표 수정</h1>
+            </div>
+            <div className="flex gap-4 text-sm">
+              {goal.category && (
+                <>
+                  <span>{goal.category.name}</span>
+                  <span>•</span>
+                </>
+              )}
+              <span>{getTypeText(goal.type)}</span>
+              <span>•</span>
+              <span>{getStatusText(goal.status)}</span>
+            </div>
+          </div>
 
-  const handleDelete = () => {
-    if (confirm('정말로 이 목표를 삭제하시겠습니까?')) {
-      // TODO: 목표 삭제 구현
-      console.log('목표 삭제:', goalId);
-      router.push('/goals');
-    }
-  };
+          <form onSubmit={handleSubmit} className="flex flex-col gap-8">
+            {/* 기본 정보 섹션 */}
+            <div className="bg-gray-50 backdrop-blur-sm rounded-xl p-4 border border-gray-100">
+              <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
+                <Target className="w-5 h-5 text-accent-600" />
+                기본 정보
+              </h2>
 
-  const getStatusText = (status: string) => {
-    switch (status) {
-      case 'active':
-        return '진행 중';
-      case 'completed':
-        return '완료됨';
-      case 'paused':
-        return '일시정지';
-      case 'cancelled':
-        return '취소됨';
-      default:
-        return status;
-    }
-  };
+              <div className="space-y-6">
+                {/* 목표 제목 */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    제목 <strong className="text-red-500">*</strong>
+                  </label>
+                  <input
+                    type="text"
+                    value={formData.title}
+                    onChange={(e) => handleInputChange('title', e.target.value)}
+                    className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors hover:border-accent-300 ${
+                      errors.title ? 'border-red-500' : 'border-gray-400'
+                    }`}
+                    placeholder="목표 제목을 작성하세요."
+                  />
+                  {errors.title && (
+                    <p className="mt-1 text-sm text-red-600">{errors.title}</p>
+                  )}
+                </div>
 
-  const getTypeText = (type: string) => {
-    switch (type) {
-      case 'save_money':
-        return '돈 저축';
-      case 'reduce_expense':
-        return '지출 줄이기';
-      case 'increase_income':
-        return '수입 늘리기';
-      case 'custom':
-        return '사용자 정의';
-      default:
-        return type;
-    }
-  };
+                {/* 목표 설명 */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    설명
+                  </label>
+                  <textarea
+                    value={formData.description}
+                    onChange={(e) =>
+                      handleInputChange('description', e.target.value)
+                    }
+                    rows={3}
+                    className="w-full px-4 py-3 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 resize-none hover:border-accent-300"
+                    placeholder="목표에 대한 자세한 설명을 작성하세요."
+                  />
+                </div>
 
-  const getChallengeMode = (mode: string) => {
-    switch (mode) {
-      case 'amount':
-        return '금액';
-      case 'count':
-        return '횟수';
-      case 'both':
-        return '금액 + 횟수';
-      default:
-        return mode;
-    }
-  };
+                {/* 목표 이유 */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    이유
+                  </label>
+                  <textarea
+                    value={formData.reason}
+                    onChange={(e) =>
+                      handleInputChange('reason', e.target.value)
+                    }
+                    rows={2}
+                    className="w-full px-4 py-3 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 resize-none hover:border-accent-300"
+                    placeholder="목표를 설정한 이유를 간단히 적어보세요."
+                  />
+                </div>
 
-  return (
-    <div>
-      <div style={{ marginBottom: '20px' }}>
-        <button onClick={() => router.push('/goals')}>
-          ← 목표 목록으로 돌아가기
-        </button>
-      </div>
+                {/* 목표 상태 */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    상태
+                  </label>
+                  <select
+                    value={formData.status}
+                    onChange={(e) =>
+                      handleInputChange('status', e.target.value)
+                    }
+                    className="w-full px-4 py-3 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 hover:border-accent-300 hover:cursor-pointer"
+                  >
+                    <option value="active">진행 중</option>
+                    <option value="completed">완료됨</option>
+                    <option value="paused">일시정지</option>
+                    <option value="cancelled">취소됨</option>
+                  </select>
+                </div>
+              </div>
+            </div>
 
-      <h1>{goal.title}</h1>
+            {/* 목표 설정 섹션 */}
+            <div className="bg-gray-50 backdrop-blur-sm rounded-xl p-4 border border-gray-100 ">
+              <h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center gap-2">
+                <BarChart3 className="w-5 h-5 text-accent-600" />
+                목표 설정
+              </h2>
 
-      {/* 기본 정보 */}
-      <div style={{ marginBottom: '30px' }}>
-        <h2>기본 정보</h2>
-        <div>
-          <p>
-            <strong>설명:</strong> {goal.description || '설명 없음'}
-          </p>
-          <p>
-            <strong>이유:</strong> {goal.reason || '이유 없음'}
-          </p>
-          <p>
-            <strong>타입:</strong> {getTypeText(goal.type)}
-          </p>
-          <p>
-            <strong>상태:</strong> {getStatusText(goal.status)}
-          </p>
-          <p>
-            <strong>챌린지 모드:</strong>{' '}
-            {getChallengeMode(goal.challenge_mode)}
-          </p>
-          {goal.category && (
-            <p>
-              <strong>카테고리:</strong> {goal.category.name}
-            </p>
-          )}
-        </div>
-      </div>
+              <div className="flex flex-col gap-6">
+                {/* 챌린지 모드 */}
+                <div className="grid grid-cols-3 gap-4">
+                  {(['amount', 'count', 'both'] as const).map((mode) => (
+                    <label
+                      key={mode}
+                      className={`flex items-center justify-center p-4 border-2 rounded-lg cursor-pointer transition-all ${
+                        formData.challenge_mode === mode
+                          ? 'border-accent-500 bg-accent-50'
+                          : 'border-gray-300 hover:border-accent-300'
+                      }`}
+                    >
+                      <input
+                        type="radio"
+                        value={mode}
+                        checked={formData.challenge_mode === mode}
+                        onChange={(e) =>
+                          handleInputChange('challenge_mode', e.target.value)
+                        }
+                        className="hidden"
+                      />
+                      <span className="text-sm font-medium">
+                        {getChallengeMode(mode)}
+                      </span>
+                    </label>
+                  ))}
+                </div>
 
-      {/* 목표 정보 */}
-      <div style={{ marginBottom: '30px' }}>
-        <h2>목표 정보</h2>
-        <div>
-          {goal.target_amount && (
-            <p>
-              <strong>목표 금액:</strong> {goal.target_amount.toLocaleString()}
-              원
-              {goal.current_amount !== undefined && (
-                <span> (현재: {goal.current_amount.toLocaleString()}원)</span>
-              )}
-            </p>
-          )}
-          {goal.target_count && (
-            <p>
-              <strong>목표 횟수:</strong> {goal.target_count}회
-              {goal.current_count !== undefined && (
-                <span> (현재: {goal.current_count}회)</span>
-              )}
-            </p>
-          )}
-          {goal.target_date && (
-            <p>
-              <strong>목표 날짜:</strong>{' '}
-              {new Date(goal.target_date).toLocaleDateString()}
-            </p>
-          )}
-          {goal.created_from_date && (
-            <p>
-              <strong>시작 날짜:</strong>{' '}
-              {new Date(goal.created_from_date).toLocaleDateString()}
-            </p>
-          )}
-        </div>
-      </div>
+                {/* 목표 금액 */}
+                {(formData.challenge_mode === 'amount' ||
+                  formData.challenge_mode === 'both') && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      금액 <strong className="text-red-500">*</strong>
+                    </label>
+                    <div className="relative">
+                      <HandCoins className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-accent-500" />
+                      <input
+                        type="number"
+                        value={formData.target_amount}
+                        onChange={(e) =>
+                          handleInputChange('target_amount', e.target.value)
+                        }
+                        className={`w-full pl-12 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors ${
+                          errors.target_amount
+                            ? 'border-red-500'
+                            : 'border-gray-400 hover:border-accent-400'
+                        }`}
+                        placeholder="목표 금액을 입력하세요."
+                        min="1"
+                      />
+                      <span className="absolute right-10 top-1/2 transform -translate-y-1/2 text-accent-600">
+                        원
+                      </span>
+                    </div>
+                    {errors.target_amount && (
+                      <p className="mt-1 text-sm text-red-600">
+                        {errors.target_amount}
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {/* 목표 횟수 */}
+                {(formData.challenge_mode === 'count' ||
+                  formData.challenge_mode === 'both') && (
+                  <div>
+                    <label className="block text-sm font-medium text-gray-700 mb-2">
+                      횟수 <strong className="text-red-500">*</strong>
+                    </label>
+                    <div className="relative">
+                      <Hash className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-accent-500" />
+                      <input
+                        type="number"
+                        value={formData.target_count}
+                        onChange={(e) =>
+                          handleInputChange('target_count', e.target.value)
+                        }
+                        className={`w-full pl-12 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors ${
+                          errors.target_count
+                            ? 'border-red-500'
+                            : 'border-gray-400 hover:border-accent-400'
+                        }`}
+                        placeholder="목표 횟수를 입력하세요."
+                        min="1"
+                      />
+                      <span className="absolute right-10 top-1/2 transform -translate-y-1/2 text-accent-600">
+                        회
+                      </span>
+                    </div>
+                    {errors.target_count && (
+                      <p className="mt-1 text-sm text-red-600">
+                        {errors.target_count}
+                      </p>
+                    )}
+                  </div>
+                )}
 
-      {/* 진행률 */}
-      {goal.target_amount && goal.current_amount !== undefined && (
-        <div style={{ marginBottom: '30px' }}>
-          <h2>금액 진행률</h2>
-          <div>
-            <p>
-              진행률:{' '}
-              {((goal.current_amount / goal.target_amount) * 100).toFixed(1)}%
-            </p>
-            <div
-              style={{
-                width: '100%',
-                height: '20px',
-                backgroundColor: '#e0e0e0',
-                borderRadius: '10px',
-                overflow: 'hidden',
-              }}
-            >
-              <div
-                style={{
-                  width: `${Math.min((goal.current_amount / goal.target_amount) * 100, 100)}%`,
-                  height: '100%',
-                  backgroundColor:
-                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
-                  borderRadius: '10px',
-                }}
-              />
+                {/* 목표 날짜 */}
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-2">
+                    완료일 <strong className="text-red-500">*</strong>
+                  </label>
+                  <div className="relative">
+                    <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-accent-500" />
+                    <input
+                      type="date"
+                      value={formData.target_date}
+                      onChange={(e) =>
+                        handleInputChange('target_date', e.target.value)
+                      }
+                      className={`w-full pl-12 pr-10 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors hover:cursor-pointer ${
+                        errors.target_date
+                          ? 'border-red-500'
+                          : 'border-gray-400 hover:border-accent-400'
+                      }`}
+                    />
+                  </div>
+                  {errors.target_date && (
+                    <p className="mt-1 text-sm text-red-600">
+                      {errors.target_date}
+                    </p>
+                  )}
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      )}
-
-      {/* 횟수 진행률 */}
-      {goal.target_count && goal.current_count !== undefined && (
-        <div style={{ marginBottom: '30px' }}>
-          <h2>횟수 진행률</h2>
-          <div>
-            <p>
-              진행률:{' '}
-              {((goal.current_count / goal.target_count) * 100).toFixed(1)}%
-            </p>
-            <div
-              style={{
-                width: '100%',
-                height: '20px',
-                backgroundColor: '#e0e0e0',
-                borderRadius: '10px',
-                overflow: 'hidden',
-              }}
-            >
-              <div
-                style={{
-                  width: `${Math.min((goal.current_count / goal.target_count) * 100, 100)}%`,
-                  height: '100%',
-                  backgroundColor:
-                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
-                  borderRadius: '10px',
-                }}
-              />
+
+            {/* 액션 버튼 */}
+            <div className="flex justify-end gap-4">
+              <button
+                type="button"
+                onClick={() => router.push(`/goals/${goalId}`)}
+                className="flex items-center gap-2 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors hover:cursor-pointer"
+              >
+                <X className="w-4 h-4" />
+                취소
+              </button>
+              <button
+                type="submit"
+                disabled={isUpdatingGoal}
+                className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all duration-200 transform shadow-lg ${
+                  isUpdatingGoal
+                    ? 'bg-gray-400 cursor-not-allowed'
+                    : 'bg-gradient-to-r from-accent-400 to-accent-600 text-white hover:shadow-xl hover:-translate-y-1 hover:cursor-pointer'
+                }`}
+              >
+                <Save className="w-4 h-4" />
+                {isUpdatingGoal ? '저장 중...' : '수정'}
+              </button>
             </div>
-          </div>
-        </div>
-      )}
-
-      {/* 날짜 정보 */}
-      <div style={{ marginBottom: '30px' }}>
-        <h2>날짜 정보</h2>
-        <div>
-          <p>
-            <strong>생성일:</strong>{' '}
-            {new Date(goal.created_at).toLocaleDateString()}
-          </p>
-          <p>
-            <strong>수정일:</strong>{' '}
-            {new Date(goal.updated_at).toLocaleDateString()}
-          </p>
+          </form>
         </div>
       </div>
-
-      {/* 액션 버튼들 */}
-      {goal.status === 'active' && (
-        <div style={{ marginBottom: '20px' }}>
-          <button
-            onClick={handleEdit}
-            style={{
-              marginRight: '10px',
-              padding: '10px 20px',
-              backgroundColor: '#3b82f6',
-              color: 'white',
-              border: 'none',
-              borderRadius: '5px',
-              cursor: 'pointer',
-            }}
-          >
-            수정
-          </button>
-          <button
-            onClick={handleDelete}
-            style={{
-              padding: '10px 20px',
-              backgroundColor: '#ef4444',
-              color: 'white',
-              border: 'none',
-              borderRadius: '5px',
-              cursor: 'pointer',
-            }}
-          >
-            삭제
-          </button>
-        </div>
-      )}
     </div>
   );
 };
 
-export default GoalDetailPage;
+export default GoalEditPage;
diff --git a/src/app/goals/[id]/page.tsx b/src/app/goals/[id]/page.tsx
index 0dfbc88..a7bb1ce 100644
--- a/src/app/goals/[id]/page.tsx
+++ b/src/app/goals/[id]/page.tsx
@@ -1,34 +1,83 @@
 'use client';
 
+import ActionButtons from '@/components/goals/ActionButton';
+import InfoSection, { InfoItem } from '@/components/goals/InfoSection';
+import ProgressBar from '@/components/goals/ProgressBar';
+import StatusBadge from '@/components/goals/StatusBadge';
 import { useAuth } from '@/hooks/auth';
 import { useGoals } from '@/hooks/goals/useGoals';
+import { supabase } from '@/lib/supabase';
+import {
+  getChallengeMode,
+  getGoalProgress,
+  getTypeText,
+} from '@/utils/goals/goalsHelpers';
+import { useQueryClient } from '@tanstack/react-query';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { ArrowLeft, Calendar, Info, Target } from 'lucide-react';
 import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
 
 const GoalDetailPage = () => {
   const { user } = useAuth();
-  const { goals, isLoading } = useGoals({ userId: user?.id });
+  const { goals } = useGoals({ userId: user?.id });
   const params = useParams();
   const router = useRouter();
+  const queryClient = useQueryClient();
+  const [isDeleting, setIsDeleting] = useState(false);
 
   const goalId = params.id as string;
   const goal = goals.find((g) => g.id === goalId);
 
-  // 로딩 상태
-  if (isLoading) {
-    return (
-      <div>
-        <h1>목표 상세</h1>
-        <p>로딩 중...</p>
-      </div>
-    );
-  }
+  const handleEdit = () => {
+    router.push(`/goals/${goalId}/edit`);
+  };
+
+  const handleDelete = async () => {
+    if (!confirm('정말로 이 목표를 삭제하시겠습니까?')) {
+      return;
+    }
+
+    setIsDeleting(true);
+
+    try {
+      const { error } = await supabase.from('goals').delete().eq('id', goalId);
+
+      if (error) {
+        console.error('목표 삭제 실패:', error);
+        alert('목표 삭제에 실패했습니다.');
+        return;
+      }
+
+      queryClient.invalidateQueries({ queryKey: ['goals'] });
+      alert('목표가 성공적으로 삭제되었습니다.');
+      router.push('/goals');
+    } catch (error) {
+      console.error('목표 삭제 오류:', error);
+      alert('목표 삭제 중 오류가 발생했습니다.');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
 
   // 사용자 인증 확인
   if (!user?.id) {
     return (
-      <div>
-        <h1>목표 상세</h1>
-        <p>로그인이 필요합니다.</p>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md border border-gray-100">
+          <div className="p-4 bg-gradient-to-br from-accent-500 to-accent-400 rounded-2xl w-fit mx-auto mb-6 shadow-lg">
+            <Target className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-3">목표 상세</h1>
+          <p className="text-gray-600 mb-6">로그인이 필요한 서비스입니다.</p>
+          <button
+            onClick={() => router.push('/auth/login')}
+            className="px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
+          >
+            로그인하기
+          </button>
+        </div>
       </div>
     );
   }
@@ -36,256 +85,190 @@ const GoalDetailPage = () => {
   // 목표를 찾을 수 없는 경우
   if (!goal) {
     return (
-      <div>
-        <h1>목표 상세</h1>
-        <p>목표를 찾을 수 없습니다.</p>
-        <button onClick={() => router.push('/goals')}>
-          목표 목록으로 돌아가기
-        </button>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md border border-gray-100">
+          <div className="p-4 bg-gradient-to-br from-red-500 to-pink-500 rounded-2xl w-fit mx-auto mb-6 shadow-lg">
+            <Target className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-3">
+            목표를 찾을 수 없습니다.
+          </h1>
+          <p className="text-gray-600 mb-6">
+            요청한 목표가 존재하지 않거나 삭제되었습니다.
+          </p>
+          <button
+            onClick={() => router.push('/goals')}
+            className="px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
+          >
+            목표 목록으로 돌아가기
+          </button>
+        </div>
       </div>
     );
   }
 
-  const handleEdit = () => {
-    router.push(`/goals/${goalId}/edit`);
-  };
-
-  const handleDelete = () => {
-    if (confirm('정말로 이 목표를 삭제하시겠습니까?')) {
-      // TODO: 목표 삭제 구현
-      console.log('목표 삭제:', goalId);
-      router.push('/goals');
-    }
-  };
-
-  const getStatusText = (status: string) => {
-    switch (status) {
-      case 'active':
-        return '진행 중';
-      case 'completed':
-        return '완료됨';
-      case 'paused':
-        return '일시정지';
-      case 'cancelled':
-        return '취소됨';
-      default:
-        return status;
-    }
-  };
+  // 진행률 계산
+  const progress = getGoalProgress(goal);
 
-  const getTypeText = (type: string) => {
-    switch (type) {
-      case 'save_money':
-        return '돈 저축';
-      case 'reduce_expense':
-        return '지출 줄이기';
-      case 'increase_income':
-        return '수입 늘리기';
-      case 'custom':
-        return '사용자 정의';
-      default:
-        return type;
-    }
-  };
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50">
+      <div className="flex flex-col gap-4 max-w-4xl mx-auto px-4 py-8">
+        {/* 헤더 */}
+        <div className="flex items-center">
+          <button
+            onClick={() => router.push('/goals')}
+            className="hover:text-accent-500 text-gray-800 hover:cursor-pointer"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </button>
+        </div>
 
-  const getChallengeMode = (mode: string) => {
-    switch (mode) {
-      case 'amount':
-        return '금액';
-      case 'count':
-        return '횟수';
-      case 'both':
-        return '금액 + 횟수';
-      default:
-        return mode;
-    }
-  };
+        {/* 메인 컨텐츠 */}
+        <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
+          {/* 헤더 섹션 */}
+          <div className="bg-gradient-to-r from-accent-400 to-accent-600 py-6 px-4 text-white relative">
+            <div className="flex flex-col gap-1 mb-4">
+              <div className="flex justify-end pt-4">
+                <StatusBadge
+                  status={goal.status}
+                  targetDate={goal.target_date}
+                  className="top-2 right-2 absolute"
+                />
+              </div>
+              <h1 className="text-2xl font-bold">{goal.title}</h1>
+              {goal.description && (
+                <p className="text-white text-lg leading-relaxed">
+                  {goal.description}
+                </p>
+              )}
+            </div>
+          </div>
 
-  return (
-    <div>
-      <div style={{ marginBottom: '20px' }}>
-        <button onClick={() => router.push('/goals')}>
-          ← 목표 목록으로 돌아가기
-        </button>
-      </div>
+          <div className="flex flex-col gap-4">
+            {/* 기본 정보 */}
+            <InfoSection title="기본 정보" icon={<Info className="w-5 h-5" />}>
+              <div className="flex items-center justify-end gap-2 border-b border-accent-300">
+                {goal.category && (
+                  <InfoItem label="" value={goal.category.name} important />
+                )}
+                <InfoItem label="" value={getTypeText(goal.type)} important />({' '}
+                <InfoItem
+                  label=""
+                  value={getChallengeMode(goal.challenge_mode)}
+                />
+                )
+              </div>
 
-      <h1>{goal.title}</h1>
+              {goal.category && (
+                <InfoItem
+                  label={
+                    goal.type === 'reduce_expense' ? '현재 사용' : '현재 달성'
+                  }
+                  value={`${goal.current_amount?.toLocaleString()}원`}
+                  important
+                />
+              )}
+              {goal.reason && <InfoItem label="" value={goal.reason} />}
+            </InfoSection>
 
-      {/* 기본 정보 */}
-      <div style={{ marginBottom: '30px' }}>
-        <h2>기본 정보</h2>
-        <div>
-          <p>
-            <strong>설명:</strong> {goal.description || '설명 없음'}
-          </p>
-          <p>
-            <strong>이유:</strong> {goal.reason || '이유 없음'}
-          </p>
-          <p>
-            <strong>타입:</strong> {getTypeText(goal.type)}
-          </p>
-          <p>
-            <strong>상태:</strong> {getStatusText(goal.status)}
-          </p>
-          <p>
-            <strong>챌린지 모드:</strong>{' '}
-            {getChallengeMode(goal.challenge_mode)}
-          </p>
-          {goal.category && (
-            <p>
-              <strong>카테고리:</strong> {goal.category.name}
-            </p>
-          )}
-        </div>
-      </div>
+            {/* 목표 정보 */}
+            <InfoSection
+              title="목표 정보"
+              icon={<Target className="w-5 h-5" />}
+            >
+              <div className="flex gap-2 items-center justify-end border-b border-accent-300">
+                {goal.created_from_date && (
+                  <InfoItem
+                    label=""
+                    value={format(
+                      new Date(goal.created_from_date),
+                      'yy. MM. dd.',
+                      {
+                        locale: ko,
+                      }
+                    )}
+                    important
+                  />
+                )}{' '}
+                ~
+                {goal.target_date && (
+                  <InfoItem
+                    label=""
+                    value={format(new Date(goal.target_date), 'yy. MM. dd.', {
+                      locale: ko,
+                    })}
+                    important
+                  />
+                )}
+              </div>
+              {goal.target_amount && goal.current_amount !== undefined && (
+                <ProgressBar
+                  current={goal.current_amount}
+                  target={goal.target_amount}
+                  type={goal.type}
+                  title="금액 달성률"
+                  unit="원"
+                />
+              )}
 
-      {/* 목표 정보 */}
-      <div style={{ marginBottom: '30px' }}>
-        <h2>목표 정보</h2>
-        <div>
-          {goal.target_amount && (
-            <p>
-              <strong>목표 금액:</strong> {goal.target_amount.toLocaleString()}
-              원
-              {goal.current_amount !== undefined && (
-                <span> (현재: {goal.current_amount.toLocaleString()}원)</span>
+              {goal.target_count && goal.current_count !== undefined && (
+                <div className={goal.target_amount ? 'mt-6' : ''}>
+                  <ProgressBar
+                    current={goal.current_count}
+                    target={goal.target_count}
+                    type={goal.type}
+                    title="횟수 달성률"
+                    unit="회"
+                  />
+                </div>
               )}
-            </p>
-          )}
-          {goal.target_count && (
-            <p>
-              <strong>목표 횟수:</strong> {goal.target_count}회
-              {goal.current_count !== undefined && (
-                <span> (현재: {goal.current_count}회)</span>
+
+              {/* 종합 진행률 (둘 다 있을 때만) */}
+              {goal.target_amount && goal.target_count && (
+                <div className="mt-6 p-4 bg-gradient-to-r from-accent-100 to-accent-200 rounded-xl">
+                  <div className="flex justify-between items-center">
+                    <span className="text-lg font-semibold text-gray-900">
+                      종합 달성률
+                    </span>
+                    <span className="text-3xl font-bold bg-gradient-to-r from-accent-400 to-accent-600 bg-clip-text text-transparent">
+                      {progress.overallProgress}%
+                    </span>
+                  </div>
+                </div>
               )}
-            </p>
-          )}
-          {goal.target_date && (
-            <p>
-              <strong>목표 날짜:</strong>{' '}
-              {new Date(goal.target_date).toLocaleDateString()}
-            </p>
-          )}
-          {goal.created_from_date && (
-            <p>
-              <strong>시작 날짜:</strong>{' '}
-              {new Date(goal.created_from_date).toLocaleDateString()}
-            </p>
-          )}
-        </div>
-      </div>
+            </InfoSection>
 
-      {/* 진행률 */}
-      {goal.target_amount && goal.current_amount !== undefined && (
-        <div style={{ marginBottom: '30px' }}>
-          <h2>금액 진행률</h2>
-          <div>
-            <p>
-              진행률:{' '}
-              {((goal.current_amount / goal.target_amount) * 100).toFixed(1)}%
-            </p>
-            <div
-              style={{
-                width: '100%',
-                height: '20px',
-                backgroundColor: '#e0e0e0',
-                borderRadius: '10px',
-                overflow: 'hidden',
-              }}
+            {/* 날짜 정보 */}
+            <InfoSection
+              title="생성 정보"
+              icon={<Calendar className="w-5 h-5" />}
             >
-              <div
-                style={{
-                  width: `${Math.min((goal.current_amount / goal.target_amount) * 100, 100)}%`,
-                  height: '100%',
-                  backgroundColor:
-                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
-                  borderRadius: '10px',
-                }}
+              <InfoItem
+                label="생성일"
+                value={format(new Date(goal.created_at), 'yy. MM. dd. HH:mm', {
+                  locale: ko,
+                })}
               />
-            </div>
-          </div>
-        </div>
-      )}
+              <InfoItem
+                label="마지막 수정일"
+                value={format(new Date(goal.updated_at), 'yy. MM. dd. HH:mm', {
+                  locale: ko,
+                })}
+              />
+            </InfoSection>
 
-      {/* 횟수 진행률 */}
-      {goal.target_count && goal.current_count !== undefined && (
-        <div style={{ marginBottom: '30px' }}>
-          <h2>횟수 진행률</h2>
-          <div>
-            <p>
-              진행률:{' '}
-              {((goal.current_count / goal.target_count) * 100).toFixed(1)}%
-            </p>
-            <div
-              style={{
-                width: '100%',
-                height: '20px',
-                backgroundColor: '#e0e0e0',
-                borderRadius: '10px',
-                overflow: 'hidden',
-              }}
-            >
-              <div
-                style={{
-                  width: `${Math.min((goal.current_count / goal.target_count) * 100, 100)}%`,
-                  height: '100%',
-                  backgroundColor:
-                    goal.type === 'increase_income' ? '#22c55e' : '#ef4444',
-                  borderRadius: '10px',
-                }}
+            {/* 액션 버튼 */}
+            <div className="flex justify-end">
+              <ActionButtons
+                goalStatus={goal.status}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+                isDeleting={isDeleting}
               />
             </div>
           </div>
         </div>
-      )}
-
-      {/* 날짜 정보 */}
-      <div style={{ marginBottom: '30px' }}>
-        <h2>날짜 정보</h2>
-        <div>
-          <p>
-            <strong>생성일:</strong>{' '}
-            {new Date(goal.created_at).toLocaleDateString()}
-          </p>
-          <p>
-            <strong>수정일:</strong>{' '}
-            {new Date(goal.updated_at).toLocaleDateString()}
-          </p>
-        </div>
       </div>
-
-      {/* 액션 버튼들 */}
-      {goal.status === 'active' && (
-        <div style={{ marginBottom: '20px' }}>
-          <button
-            onClick={handleEdit}
-            style={{
-              marginRight: '10px',
-              padding: '10px 20px',
-              backgroundColor: '#3b82f6',
-              color: 'white',
-              border: 'none',
-              borderRadius: '5px',
-              cursor: 'pointer',
-            }}
-          >
-            수정
-          </button>
-          <button
-            onClick={handleDelete}
-            style={{
-              padding: '10px 20px',
-              backgroundColor: '#ef4444',
-              color: 'white',
-              border: 'none',
-              borderRadius: '5px',
-              cursor: 'pointer',
-            }}
-          >
-            삭제
-          </button>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/app/goals/page.tsx b/src/app/goals/page.tsx
index a7f6e28..0e07992 100644
--- a/src/app/goals/page.tsx
+++ b/src/app/goals/page.tsx
@@ -2,6 +2,21 @@
 
 import { useAuth } from '@/hooks/auth';
 import { useGoals } from '@/hooks/goals/useGoals';
+import {
+  Target,
+  Clock,
+  TrendingUp,
+  BarChart3,
+  Plus,
+  Zap,
+  Trophy,
+  ArrowRight,
+  Star,
+} from 'lucide-react';
+import Link from 'next/link';
+import GoalCard from '@/components/goals/GoalCard';
+import StatCard from '@/components/goals/StatCard';
+import useGoalStatistics from '@/hooks/goals/useGoalStatistics';
 
 const GoalsPage = () => {
   const { user, isLoading: isAuthLoading } = useAuth();
@@ -15,12 +30,22 @@ const GoalsPage = () => {
     userId: user?.id,
   });
 
+  const statistics = useGoalStatistics(goals);
+
   // 로딩 상태
   if (isAuthLoading || isGoalsLoading) {
     return (
-      <div>
-        <h1>목표 관리</h1>
-        <p>로딩 중...</p>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 border border-gray-100">
+          <div className="relative w-16 h-16 mx-auto mb-6">
+            <div className="absolute inset-0 border-4 border-accent-200 rounded-full animate-pulse" />
+            <div className="absolute inset-0 border-4 border-accent-500 border-t-transparent rounded-full animate-spin" />
+          </div>
+          <p className="text-lg font-medium text-gray-700 mb-2">
+            목표를 불러오는 중
+          </p>
+          <p className="text-sm text-gray-500">잠시만 기다려주세요...</p>
+        </div>
       </div>
     );
   }
@@ -28,118 +53,184 @@ const GoalsPage = () => {
   // 사용자 인증 확인
   if (!user?.id) {
     return (
-      <div>
-        <h1>목표 관리</h1>
-        <p>로그인이 필요합니다.</p>
+      <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-blue-50 flex items-center justify-center p-4">
+        <div className="text-center bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-8 max-w-md border border-gray-100">
+          <div className="p-4 bg-gradient-to-br from-accent-500 to-accent-400 rounded-2xl w-fit mx-auto mb-6 shadow-lg">
+            <Target className="w-12 h-12 text-white" />
+          </div>
+          <h1 className="text-2xl font-bold text-gray-900 mb-3">목표 관리</h1>
+          <p className="text-gray-600 mb-6 leading-relaxed">
+            나만의 목표를 설정하고 달성 과정을 추적해보세요
+          </p>
+          <Link
+            href="/auth/login"
+            className="group inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
+          >
+            시작하기
+            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
+          </Link>
+        </div>
       </div>
     );
   }
 
   return (
-    <div>
-      <h1>목표 관리</h1>
+    <div className="min-h-screen bg-gradient-to-br from-accent-50 via-white to-accent-100">
+      <div className="flex flex-col gap-8 max-w-7xl mx-auto px-4 py-8">
+        {/* 헤더 */}
+        <div className="flex flex-col gap-3">
+          <div className="flex justify-between items-center">
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-accent-500 to-accent-700 bg-clip-text text-transparent">
+              목표 관리
+            </h1>
+            <Link
+              href="/goals/new"
+              className="group inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
+            >
+              <Plus className="w-5 h-5" />
+              추가
+            </Link>
+          </div>
+          <p className="text-lg text-gray-600 leading-relaxed">
+            목표를 설정하고 꾸준히 달성해보세요 ✨
+          </p>
+        </div>
 
-      {/* 기본 통계 */}
-      <div>
-        <h2>목표 현황</h2>
-        <ul>
-          <li>전체 목표: {goals.length}개</li>
-          <li>진행 중인 목표: {activeGoals.length}개</li>
-          <li>완료된 목표: {completedGoals.length}개</li>
-        </ul>
-      </div>
+        {/* 목표가 없을 때 */}
+        {statistics.total === 0 && (
+          <div className="text-center py-20">
+            <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-12 max-w-2xl mx-auto border border-gray-100">
+              <div className="p-6 bg-gradient-to-br from-accent-100 to-blue-100 rounded-2xl w-fit mx-auto">
+                <Target className="w-16 h-16 text-accent-500" />
+              </div>
+              <h2 className="text-3xl font-bold text-gray-900 mb-4">
+                첫 번째 목표를 만들어보세요!
+              </h2>
+              <p className="text-lg text-gray-600 mb-8 leading-relaxed max-w-md mx-auto">
+                예산 페이지에서 챌린지를 생성하여 <br />
+                목표 달성 여정을 시작하세요.
+              </p>
+              <Link
+                href="/budget"
+                className="group inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-accent-500 to-accent-400 text-white text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
+              >
+                <Plus className="w-5 h-5" />
+                목표 만들기
+                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              </Link>
+            </div>
+          </div>
+        )}
 
-      {/* 진행 중인 목표들 */}
-      <div>
-        <h2>진행 중인 목표</h2>
-        {activeGoals.length === 0 ? (
-          <p>진행 중인 목표가 없습니다.</p>
-        ) : (
-          <ul>
-            {activeGoals.map((goal) => (
-              <li key={goal.id}>
-                <div>
-                  <h3>{goal.title}</h3>
-                  <p>{goal.description}</p>
-                  <p>타입: {goal.type}</p>
-                  <p>상태: {goal.status}</p>
-                  {goal.target_amount && (
-                    <p>
-                      목표 금액: {goal.target_amount.toLocaleString()}원
-                      {goal.current_amount !== undefined && (
-                        <span>
-                          {' '}
-                          (현재: {goal.current_amount.toLocaleString()}원)
-                        </span>
-                      )}
-                    </p>
-                  )}
-                  {goal.target_count && (
-                    <p>
-                      목표 횟수: {goal.target_count}회
-                      {goal.current_count !== undefined && (
-                        <span> (현재: {goal.current_count}회)</span>
-                      )}
+        {/* 목표가 있을 때 */}
+        {statistics.total > 0 && (
+          <>
+            {/* 통계 카드들 */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
+              <StatCard
+                icon={<BarChart3 className="w-6 h-6" />}
+                title="전체 목표"
+                value={`${statistics.total}개`}
+                color="accent"
+              />
+              <StatCard
+                icon={<Zap className="w-6 h-6" />}
+                title="진행 중"
+                value={`${statistics.active}개`}
+                color="purple"
+              />
+              <StatCard
+                icon={<Trophy className="w-6 h-6" />}
+                title="완료 목표"
+                value={`${statistics.completed}개`}
+                color="green"
+              />
+              <StatCard
+                icon={<Clock className="w-6 h-6" />}
+                title="곧 마감"
+                value={`${statistics.soonDue}개`}
+                color={statistics.soonDue > 0 ? 'yellow' : 'accent'}
+              />
+            </div>
+
+            {/* 완료율 표시 */}
+            <div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg p-6 border border-gray-100">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-bold text-gray-900">
+                  전체 달성률
+                </h2>
+                <div className="flex items-center gap-2">
+                  <div className="text-right">
+                    <span className="text-4xl font-bold bg-gradient-to-r from-accent-400 to-accent-600 bg-clip-text text-transparent">
+                      {statistics.completionRate}%
+                    </span>
+                  </div>
+                  <div className="p-2 bg-gradient-to-br from-accent-100 to-accent-200 rounded-lg">
+                    <TrendingUp className="w-6 h-6 text-accent-500" />
+                  </div>
+                </div>
+              </div>
+              <div className="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                  className="absolute left-0 top-0 h-full bg-gradient-to-r from-accent-400 via-accent-500 to-blue-500 rounded-full transition-all duration-1000 ease-out"
+                  style={{ width: `${statistics.completionRate}%` }}
+                />
+                {statistics.completionRate >= 80 && (
+                  <Star className="absolute right-2 top-1 w-2 h-2 text-white animate-bounce" />
+                )}
+              </div>
+            </div>
+
+            {/* 진행 중인 목표들 */}
+            {activeGoals.length > 0 && (
+              <div className="mb-12">
+                <div className="flex items-center gap-3 mb-8">
+                  <div className="p-2 bg-gradient-to-br from-purple-100 to-pink-100 rounded-lg">
+                    <Zap className="w-6 h-6 text-purple-500" />
+                  </div>
+                  <div>
+                    <h2 className="text-2xl font-bold text-gray-900">
+                      진행 중인 목표
+                    </h2>
+                    <p className="text-gray-600">
+                      {activeGoals.length}개의 목표가 진행 중입니다.
                     </p>
-                  )}
-                  {goal.target_date && <p>목표 날짜: {goal.target_date}</p>}
-                  {goal.challenge_mode && (
-                    <p>
-                      챌린지 모드:{' '}
-                      {goal.challenge_mode === 'both'
-                        ? '금액 + 횟수'
-                        : goal.challenge_mode === 'amount'
-                          ? '금액'
-                          : '횟수'}
+                  </div>
+                </div>
+                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                  {activeGoals.map((goal) => (
+                    <GoalCard key={goal.id} goal={goal} />
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* 완료된 목표들 */}
+            {completedGoals.length > 0 && (
+              <div className="mb-8">
+                <div className="flex items-center gap-3 mb-8">
+                  <div className="p-2 bg-gradient-to-br from-green-100 to-emerald-100 rounded-lg">
+                    <Trophy className="w-6 h-6 text-green-500" />
+                  </div>
+                  <div>
+                    <h2 className="text-2xl font-bold text-gray-900">
+                      완료 목표
+                    </h2>
+                    <p className="text-gray-600">
+                      {completedGoals.length}개의 목표를 달성했습니다.
                     </p>
-                  )}
-                  {goal.category && <p>카테고리: {goal.category.name}</p>}
-                  <p>
-                    생성일: {new Date(goal.created_at).toLocaleDateString()}
-                  </p>
-                  <hr />
+                  </div>
                 </div>
-              </li>
-            ))}
-          </ul>
+                <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
+                  {completedGoals.map((goal) => (
+                    <GoalCard key={goal.id} goal={goal} />
+                  ))}
+                </div>
+              </div>
+            )}
+          </>
         )}
       </div>
-
-      {/* 완료된 목표들 */}
-      {completedGoals.length > 0 && (
-        <div>
-          <h2>완료된 목표</h2>
-          <ul>
-            {completedGoals.map((goal) => (
-              <li key={goal.id}>
-                <div>
-                  <h3>{goal.title}</h3>
-                  <p>{goal.description}</p>
-                  <p>타입: {goal.type}</p>
-                  {goal.target_amount && (
-                    <p>달성 금액: {goal.current_amount?.toLocaleString()}원</p>
-                  )}
-                  {goal.target_count && (
-                    <p>달성 횟수: {goal.current_count}회</p>
-                  )}
-                  <p>
-                    완료일: {new Date(goal.updated_at).toLocaleDateString()}
-                  </p>
-                  <hr />
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* 목표가 없을 때 */}
-      {goals.length === 0 && (
-        <div>
-          <h2>아직 목표가 없습니다</h2>
-          <p>예산 페이지에서 챌린지를 만들어 목표를 시작해보세요!</p>
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/components/budget/ChallengeModal.tsx b/src/components/budget/ChallengeModal.tsx
index d1db13a..43ac83b 100644
--- a/src/components/budget/ChallengeModal.tsx
+++ b/src/components/budget/ChallengeModal.tsx
@@ -268,12 +268,10 @@ const ChallengeModal = ({
                           type="number"
                           value={formData.targetAmount}
                           onChange={(e) =>
-                            handleFormDataChange("targetAmount", e.target.value)
+                            handleFormDataChange('targetAmount', e.target.value)
                           }
                           placeholder="목표금액"
-                          min="1"
-                          max={challengeData.amount - 1}
-                          step={1000}
+                          max={challengeData.amount}
                           className="w-full px-3 py-2 pr-12 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm"
                           required={formData.enableAmountGoal}
                         />
diff --git a/src/components/goals/ActionButton.tsx b/src/components/goals/ActionButton.tsx
new file mode 100644
index 0000000..55b9161
--- /dev/null
+++ b/src/components/goals/ActionButton.tsx
@@ -0,0 +1,44 @@
+import { Edit, Trash2 } from 'lucide-react';
+
+interface ActionButtonsProps {
+  goalStatus: string;
+  onEdit: () => void;
+  onDelete: () => void;
+  isDeleting: boolean;
+}
+
+const ActionButtons = ({
+  goalStatus,
+  onEdit,
+  onDelete,
+  isDeleting,
+}: ActionButtonsProps) => {
+  return (
+    <div className="flex gap-3">
+      {goalStatus === 'active' && (
+        <button
+          onClick={onEdit}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-all duration-200 transform hover:-translate-y-1 shadow-lg hover:shadow-xl hover:cursor-pointer"
+        >
+          <Edit className="w-4 h-4" />
+          수정
+        </button>
+      )}
+
+      <button
+        onClick={onDelete}
+        disabled={isDeleting}
+        className={`flex items-center gap-2 px-4 py-2 font-semibold rounded-lg transition-all duration-200 transform shadow-lg ${
+          isDeleting
+            ? 'bg-gray-400 cursor-not-allowed'
+            : 'bg-red-500 hover:bg-red-600 text-white hover:-translate-y-1 hover:shadow-xl hover:cursor-pointer'
+        }`}
+      >
+        <Trash2 className="w-4 h-4" />
+        {isDeleting ? '삭제 중...' : '삭제'}
+      </button>
+    </div>
+  );
+};
+
+export default ActionButtons;
diff --git a/src/components/goals/GoalCard.tsx b/src/components/goals/GoalCard.tsx
new file mode 100644
index 0000000..6fccdb2
--- /dev/null
+++ b/src/components/goals/GoalCard.tsx
@@ -0,0 +1,178 @@
+'use client';
+
+import { Goal } from '@/types/goals';
+import {
+  getChallengeMode,
+  getDaysLeft,
+  getGoalProgress,
+  getTypeText,
+} from '@/utils/goals/goalsHelpers';
+import { useRouter } from 'next/navigation';
+import StatusBadge from './StatusBadge';
+import { Calendar, CheckCircle, Star, Target } from 'lucide-react';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+
+const GoalCard = ({ goal }: { goal: Goal }) => {
+  const router = useRouter();
+  const progress = getGoalProgress(goal);
+  const daysLeft = getDaysLeft(goal.target_date);
+  const isCompleted = goal.status === 'completed';
+
+  const handleCardClick = () => {
+    router.push(`/goals/${goal.id}`);
+  };
+
+  return (
+    <div
+      onClick={handleCardClick}
+      className="group relative bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 overflow-hidden hover:cursor-pointer hover:border-accent-400"
+    >
+      {/* 상태 배지 */}
+      <div className="absolute top-4 right-4 z-10">
+        <StatusBadge status={goal.status} targetDate={goal.target_date} />
+      </div>
+
+      {/* 그라데이션 배경 */}
+      <div className="absolute inset-0 bg-gradient-to-br from-accent-50 to-blue-50 opacity-50" />
+
+      <div className="relative p-6">
+        {/* 제목과 설명 */}
+        <div className="mb-4">
+          <div className="flex items-center gap-2 mb-3">
+            {isCompleted ? (
+              <CheckCircle className="w-6 h-6 text-green-500 flex-shrink-0" />
+            ) : (
+              <Target className="w-6 h-6 text-accent-500 flex-shrink-0" />
+            )}
+            <h3 className="text-xl font-bold text-gray-900 group-hover:text-accent-600 transition-colors line-clamp-2 select-none">
+              {goal.title}
+            </h3>
+          </div>
+          {goal.description && (
+            <p className="text-gray-600 text-sm line-clamp-2 leading-relaxed select-none">
+              {goal.description}
+            </p>
+          )}
+        </div>
+
+        {/* 목표 정보 그리드 */}
+        <div className="space-y-4">
+          {/* 타입과 카테고리 */}
+          <div className="flex flex-wrap gap-2">
+            <span className="px-3 py-1 bg-accent-100 text-accent-700 text-xs font-medium rounded-full">
+              {getTypeText(goal.type)}
+            </span>
+            {goal.category && (
+              <span className="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">
+                {goal.category.name}
+              </span>
+            )}
+            {goal.challenge_mode && (
+              <span className="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">
+                {getChallengeMode(goal.challenge_mode)}
+              </span>
+            )}
+          </div>
+
+          {/* 목표 값들 */}
+          <div className="grid grid-cols-1 gap-3">
+            {goal.target_amount && (
+              <div className="flex justify-between items-center p-3 bg-white/70 rounded-xl border border-gray-100">
+                <div>
+                  <p className="text-xs text-gray-500 mb-1">목표 금액</p>
+                  <p className="font-bold text-gray-900">
+                    {goal.target_amount.toLocaleString()}원
+                  </p>
+                </div>
+                {goal.current_amount !== undefined && (
+                  <div className="text-right">
+                    <p className="text-xs text-gray-500 mb-1">현재</p>
+                    <p className="font-bold text-accent-600">
+                      {goal.current_amount.toLocaleString()}원
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {goal.target_count && (
+              <div className="flex justify-between items-center p-3 bg-white/70 rounded-xl border border-gray-100">
+                <div>
+                  <p className="text-xs text-gray-500 mb-1">목표 횟수</p>
+                  <p className="font-bold text-gray-900">
+                    {goal.target_count}회
+                  </p>
+                </div>
+                {goal.current_count !== undefined && (
+                  <div className="text-right">
+                    <p className="text-xs text-gray-500 mb-1">현재</p>
+                    <p className="font-bold text-accent-600">
+                      {goal.current_count}회
+                    </p>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* 진행률 바 */}
+          {progress.overallProgress > 0 && (
+            <div className="space-y-2">
+              <div className="flex justify-between items-center">
+                <span className="text-xs text-gray-600 font-medium">
+                  진행률
+                </span>
+                <span className="text-sm font-bold text-accent-600">
+                  {progress.overallProgress}%
+                </span>
+              </div>
+              <div className="relative w-full h-3 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                  className={`absolute left-0 top-0 h-full rounded-full transition-all duration-1000 ease-out ${
+                    progress.overallProgress >= 100
+                      ? 'bg-gradient-to-r from-green-400 to-emerald-500'
+                      : 'bg-gradient-to-r from-accent-400 to-accent-500'
+                  }`}
+                  style={{
+                    width: `${Math.min(progress.overallProgress, 100)}%`,
+                  }}
+                />
+                {progress.overallProgress >= 100 && (
+                  <Star className="absolute right-1 top-0.5 w-2 h-2 text-white animate-pulse" />
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* 날짜 정보 */}
+          <div className="flex justify-between items-center text-xs text-gray-500 pt-2 border-t border-gray-100">
+            <span>
+              시작: {format(new Date(goal.created_at), 'MM.dd', { locale: ko })}
+            </span>
+            {goal.target_date && (
+              <div className="flex items-center gap-1">
+                <Calendar className="w-3 h-3" />
+                <span
+                  className={
+                    daysLeft !== null && daysLeft <= 7
+                      ? 'text-orange-600 font-medium'
+                      : ''
+                  }
+                >
+                  {daysLeft !== null && daysLeft > 0
+                    ? `${daysLeft}일 남음`
+                    : format(new Date(goal.target_date), 'MM.dd', {
+                        locale: ko,
+                      })}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GoalCard;
diff --git a/src/components/goals/InfoSection.tsx b/src/components/goals/InfoSection.tsx
new file mode 100644
index 0000000..76c9a33
--- /dev/null
+++ b/src/components/goals/InfoSection.tsx
@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+
+interface InfoSectionProps {
+  title: string;
+  children: ReactNode;
+  icon?: ReactNode;
+}
+
+const InfoSection = ({ title, children, icon }: InfoSectionProps) => {
+  return (
+    <div className="bg-gray-50 backdrop-blur-sm rounded-xl p-4 border border-gray-100">
+      <div className="flex items-center gap-2 mb-2">
+        {icon && (
+          <div className="p-2 bg-accent-100 rounded-lg text-accent-600">
+            {icon}
+          </div>
+        )}
+        <h2 className="text-xl font-bold text-gray-900">{title}</h2>
+      </div>
+      <div className="space-y-2">{children}</div>
+    </div>
+  );
+};
+
+// 정보 항목 컴포넌트
+interface InfoItemProps {
+  label: string;
+  value: string | number | ReactNode;
+  important?: boolean;
+}
+
+export const InfoItem = ({
+  label,
+  value,
+  important = false,
+}: InfoItemProps) => {
+  return (
+    <div className={'flex justify-between items-center'}>
+      <span className="text-gray-600 font-medium">{label}</span>
+      <span
+        className={`${
+          important
+            ? 'text-lg font-bold text-accent-600'
+            : 'text-gray-900 font-semibold'
+        }`}
+      >
+        {value}
+      </span>
+    </div>
+  );
+};
+
+export default InfoSection;
diff --git a/src/components/goals/ProgressBar.tsx b/src/components/goals/ProgressBar.tsx
new file mode 100644
index 0000000..ea83ba5
--- /dev/null
+++ b/src/components/goals/ProgressBar.tsx
@@ -0,0 +1,109 @@
+interface ProgressBarProps {
+  current: number;
+  target: number;
+  type: string;
+  title: string;
+  unit?: string;
+}
+
+const ProgressBar = ({
+  current,
+  target,
+  type,
+  title,
+  unit = '',
+}: ProgressBarProps) => {
+  let progress: number;
+  let statusMessage: string;
+  let barColor: string;
+  let targetLabel: string;
+
+  if (type === 'reduce_expense') {
+    // 지출 챌린지: 한도 대비 사용량
+    progress = Math.round((current / target) * 100);
+    const remaining = Math.max(0, target - current);
+    statusMessage =
+      remaining > 0
+        ? `${remaining.toLocaleString()}${unit} 더 사용 가능`
+        : `${(current - target).toLocaleString()}${unit} 초과`;
+    targetLabel = '한도';
+
+    // 사용량에 따른 색상
+    if (progress > 100) {
+      barColor = '#ef4444'; // 빨간색 (초과)
+    } else if (progress > 80) {
+      barColor = '#f59e0b'; // 노란색 (주의)
+    } else {
+      barColor = '#22c55e'; // 초록색 (양호)
+    }
+  } else {
+    // 수입 챌린지: 기존 로직
+    progress = Math.round((current / target) * 100);
+    const remaining = Math.max(0, target - current);
+    statusMessage =
+      remaining > 0
+        ? `목표까지 ${remaining.toLocaleString()}${unit} 남음`
+        : `목표 달성!`;
+    targetLabel = '목표';
+    barColor = progress >= 100 ? '#22c55e' : '#3b82f6';
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-semibold text-gray-900">
+          {type === 'reduce_expense' ? '지출 한도 사용률' : title}
+        </h3>
+        <span
+          className={`text-2xl font-bold ${
+            type === 'reduce_expense' && progress > 100
+              ? 'text-red-600'
+              : 'text-accent-600'
+          }`}
+        >
+          {progress}%
+        </span>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm text-gray-600">
+          <span>
+            현재 사용: {current.toLocaleString()}
+            {unit}
+          </span>
+          <span>
+            {targetLabel}: {target.toLocaleString()}
+            {unit}
+          </span>
+        </div>
+
+        <div className="relative w-full h-4 bg-gray-200 rounded-full overflow-hidden">
+          <div
+            className="absolute left-0 top-0 h-full rounded-full transition-all duration-1000 ease-out"
+            style={{
+              width: `${Math.min(progress, 100)}%`,
+              backgroundColor: barColor,
+            }}
+          />
+          {progress >= 100 && (
+            <div className="absolute right-2 top-0.5 text-white text-xs">
+              {type === 'reduce_expense' ? '!' : '✓'}
+            </div>
+          )}
+        </div>
+
+        <p
+          className={`text-xs text-center ${
+            type === 'reduce_expense' && progress > 100
+              ? 'text-red-600 font-medium'
+              : 'text-gray-500'
+          }`}
+        >
+          {statusMessage}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/components/goals/StatCard.tsx b/src/components/goals/StatCard.tsx
new file mode 100644
index 0000000..7ad58ed
--- /dev/null
+++ b/src/components/goals/StatCard.tsx
@@ -0,0 +1,47 @@
+const StatCard = ({
+  icon,
+  title,
+  value,
+  color = 'accent',
+  subtitle,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  value: number | string;
+  color?: 'accent' | 'green' | 'yellow' | 'purple' | 'red';
+  subtitle?: string;
+}) => {
+  const colorClasses = {
+    accent: 'from-accent-500 to-accent-400 text-white',
+    green: 'from-green-500 to-emerald-400 text-white',
+    yellow: 'from-yellow-500 to-orange-400 text-white',
+    purple: 'from-purple-500 to-pink-400 text-white',
+    red: 'from-red-500 to-pink-400 text-white',
+  };
+
+  return (
+    <div className="group relative bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100 overflow-hidden">
+      <div
+        className={`absolute inset-0 bg-gradient-to-br ${colorClasses[color]} opacity-10 group-hover:opacity-20 transition-opacity`}
+      />
+      <div className="relative p-6">
+        <div className="flex items-center justify-between">
+          <div
+            className={`p-3 rounded-xl bg-gradient-to-br ${colorClasses[color]} shadow-lg`}
+          >
+            {icon}
+          </div>
+          <div className="text-right">
+            <p className="text-2xl font-bold text-gray-900 mb-1">{value}</p>
+            <p className="text-sm font-medium text-gray-600">{title}</p>
+            {subtitle && (
+              <p className="text-xs text-gray-500 mt-1">{subtitle}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;
diff --git a/src/components/goals/StatusBadge.tsx b/src/components/goals/StatusBadge.tsx
new file mode 100644
index 0000000..3daaf4f
--- /dev/null
+++ b/src/components/goals/StatusBadge.tsx
@@ -0,0 +1,71 @@
+import {
+  getDaysLeft,
+  getStatusColorClass,
+  getStatusText,
+} from '@/utils/goals/goalsHelpers';
+import { CheckCircle, Clock, Pause, X, Target } from 'lucide-react';
+
+interface StatusBadgeProps {
+  status: string;
+  targetDate?: string | null;
+  className?: string;
+}
+
+const StatusBadge = ({ status, targetDate, className }: StatusBadgeProps) => {
+  const statusText = getStatusText(status);
+  const statusColor = getStatusColorClass(status);
+  const daysLeft = getDaysLeft(targetDate);
+
+  // 아이콘 선택
+  const getStatusIcon = () => {
+    switch (status) {
+      case 'active':
+        return <Target className="w-4 h-4" />;
+      case 'completed':
+        return <CheckCircle className="w-4 h-4" />;
+      case 'paused':
+        return <Pause className="w-4 h-4" />;
+      case 'cancelled':
+        return <X className="w-4 h-4" />;
+      default:
+        return <Target className="w-4 h-4" />;
+    }
+  };
+
+  // 긴급도에 따른 추가 배지
+  const getUrgencyBadge = () => {
+    if (status !== 'active' || !daysLeft) return null;
+
+    if (daysLeft <= 3 && daysLeft > 0) {
+      return (
+        <span className="flex items-center gap-1 px-2 py-1 bg-red-100 text-red-800 text-xs font-semibold rounded-full">
+          <Clock className="w-3 h-3" />
+          {daysLeft}일 남음
+        </span>
+      );
+    } else if (daysLeft <= 7 && daysLeft > 3) {
+      return (
+        <span className="flex items-center gap-1 px-2 py-1 bg-yellow-100 text-yellow-800 text-xs font-semibold rounded-full">
+          <Clock className="w-3 h-3" />
+          {daysLeft}일 남음
+        </span>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <span
+        className={`flex items-center gap-1 px-3 py-1 text-sm font-semibold rounded-full ${statusColor} ${className}`}
+      >
+        {getStatusIcon()}
+        {statusText}
+      </span>
+      {getUrgencyBadge()}
+    </div>
+  );
+};
+
+export default StatusBadge;
diff --git a/src/hooks/goals/useGoalStatistics.ts b/src/hooks/goals/useGoalStatistics.ts
new file mode 100644
index 0000000..d80d5a7
--- /dev/null
+++ b/src/hooks/goals/useGoalStatistics.ts
@@ -0,0 +1,34 @@
+import { Goal } from '@/types/goals';
+import { useMemo } from 'react';
+
+const useGoalStatistics = (goals: Goal[]) => {
+  return useMemo(() => {
+    const total = goals.length;
+    const active = goals.filter((goal) => goal.status === 'active');
+    const completed = goals.filter((goal) => goal.status === 'completed');
+
+    // 곧 마감되는 목표들 (7일 이내)
+    const soonDue = active.filter((goal) => {
+      if (!goal.target_date) return false;
+      const daysLeft = Math.ceil(
+        (new Date(goal.target_date).getTime() - new Date().getTime()) /
+          (1000 * 60 * 60 * 24)
+      );
+      return daysLeft <= 7 && daysLeft > 0;
+    });
+
+    // 완료율 계산
+    const completionRate =
+      total > 0 ? Math.round((completed.length / total) * 100) : 0;
+
+    return {
+      total,
+      active: active.length,
+      completed: completed.length,
+      soonDue: soonDue.length,
+      completionRate,
+    };
+  }, [goals]);
+};
+
+export default useGoalStatistics;
\ No newline at end of file

From 2292d631fffee2824f3b41c0b7bb7c66c9b4311c Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 14:57:32 +0900
Subject: [PATCH 08/12] =?UTF-8?q?feat:=20=EC=A7=80=EC=B6=9C=20=EB=AA=A9?=
 =?UTF-8?q?=ED=91=9C=EC=99=80=20=EC=88=98=EC=9E=85=20=EB=AA=A9=ED=91=9C=20?=
 =?UTF-8?q?=EC=84=B8=EB=B6=84=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/budget/ChallengeModal.tsx | 124 +++++++++++------------
 src/hooks/budget/useChallenge.ts         |   6 +-
 src/utils/goals/goalsHelpers.ts          |  30 ++++--
 3 files changed, 90 insertions(+), 70 deletions(-)

diff --git a/src/components/budget/ChallengeModal.tsx b/src/components/budget/ChallengeModal.tsx
index 43ac83b..ca5ac04 100644
--- a/src/components/budget/ChallengeModal.tsx
+++ b/src/components/budget/ChallengeModal.tsx
@@ -1,10 +1,10 @@
-"use client";
+'use client';
 
-import { addDays, addMonths, format } from "date-fns";
-import { useState } from "react";
-import Modal from "../common/Modal";
-import { Calendar, Target, TrendingDown, TrendingUp } from "lucide-react";
-import { ko } from "date-fns/locale";
+import { addDays, addMonths, format } from 'date-fns';
+import { useState } from 'react';
+import Modal from '../common/Modal';
+import { Calendar, Target, TrendingDown, TrendingUp } from 'lucide-react';
+import { ko } from 'date-fns/locale';
 
 interface ChallengeFormData {
   title: string;
@@ -24,27 +24,27 @@ interface ChallengeModalProps {
   onSubmit: (
     data: ChallengeFormData & {
       category: string;
-      categoryType: "income" | "expense";
-    },
+      categoryType: 'income' | 'expense';
+    }
   ) => void;
   challengeData: {
     name: string;
     amount: number;
     category: string;
     count?: number;
-    type: "income" | "expense";
+    type: 'income' | 'expense';
   };
   isSubmitting?: boolean;
 }
 
 // 미리 정의된 기간 옵션
 const DURATION_PRESETS = [
-  { label: "1주일", value: "1week", days: 7 },
-  { label: "2주일", value: "2weeks", days: 14 },
-  { label: "1개월", value: "1month", days: 30 },
-  { label: "3개월", value: "3months", days: 90 },
-  { label: "6개월", value: "6months", days: 180 },
-  { label: "직접 입력", value: "custom", days: 0 },
+  { label: '1주일', value: '1week', days: 7 },
+  { label: '2주일', value: '2weeks', days: 14 },
+  { label: '1개월', value: '1month', days: 30 },
+  { label: '3개월', value: '3months', days: 90 },
+  { label: '6개월', value: '6months', days: 180 },
+  { label: '직접 입력', value: 'custom', days: 0 },
 ] as const;
 
 const ChallengeModal = ({
@@ -54,29 +54,29 @@ const ChallengeModal = ({
   challengeData,
   isSubmitting = false,
 }: ChallengeModalProps) => {
-  const isIncome = challengeData.type === "income";
+  const isIncome = challengeData.type === 'income';
 
   const [formData, setFormData] = useState<ChallengeFormData>({
-    title: "",
-    description: "",
-    reason: "",
+    title: '',
+    description: '',
+    reason: '',
     enableAmountGoal: true,
     enableCountGoal: isIncome
       ? (challengeData.count || 0) >= 1
       : (challengeData.count || 0) > 1,
     targetAmount: Math.max(
       1,
-      Math.floor(challengeData.amount * 0.1),
+      Math.floor(challengeData.amount * 0.1)
     ).toString(),
     targetCount: isIncome
       ? challengeData.count
         ? Math.max(challengeData.count + 1, 2).toString()
-        : "2"
+        : '2'
       : challengeData.count
         ? Math.max(1, challengeData.count - 1).toString()
-        : "1",
-    duration: "1month",
-    targetDate: format(addMonths(new Date(), 1), "yyyy-MM-dd"),
+        : '1',
+    duration: '1month',
+    targetDate: format(addMonths(new Date(), 1), 'yyyy-MM-dd'),
   });
 
   const [isCustomDuration, setIsCustomDuration] = useState(false);
@@ -84,21 +84,21 @@ const ChallengeModal = ({
   // 폼 데이터 업데이트 핸들러
   const handleFormDataChange = <K extends keyof ChallengeFormData>(
     field: K,
-    value: ChallengeFormData[K],
+    value: ChallengeFormData[K]
   ) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
   // 체크박스 핸들러
   const handleCheckboxChange =
-    (field: "enableAmountGoal" | "enableCountGoal") =>
+    (field: 'enableAmountGoal' | 'enableCountGoal') =>
     (e: React.ChangeEvent<HTMLInputElement>) => {
       handleFormDataChange(field, e.target.checked);
     };
 
   // 기간 선택 핸들러
   const handleDurationChange = (duration: string) => {
-    const isCustom = duration === "custom";
+    const isCustom = duration === 'custom';
     setIsCustomDuration(isCustom);
 
     if (!isCustom) {
@@ -108,7 +108,7 @@ const ChallengeModal = ({
         setFormData((prev) => ({
           ...prev,
           duration,
-          targetDate: format(targetDate, "yyyy-MM-dd"),
+          targetDate: format(targetDate, 'yyyy-MM-dd'),
         }));
       }
     } else {
@@ -158,26 +158,26 @@ const ChallengeModal = ({
   // 모달이 닫힐 때 폼 초기화
   const handleClose = () => {
     setFormData({
-      title: "",
-      description: "",
-      reason: "",
+      title: '',
+      description: '',
+      reason: '',
       enableAmountGoal: true,
       enableCountGoal: isIncome
         ? (challengeData.count || 0) >= 1
         : (challengeData.count || 0) > 1,
       targetAmount: Math.max(
         1,
-        Math.floor(challengeData.amount * 0.1),
+        Math.floor(challengeData.amount * 0.1)
       ).toString(),
       targetCount: isIncome
         ? challengeData.count
           ? Math.max(challengeData.count + 1, 2).toString()
-          : "2"
+          : '2'
         : challengeData.count
           ? Math.max(1, challengeData.count - 1).toString()
-          : "1",
-      duration: "1month",
-      targetDate: format(addMonths(new Date(), 1), "yyyy-MM-dd"),
+          : '1',
+      duration: '1month',
+      targetDate: format(addMonths(new Date(), 1), 'yyyy-MM-dd'),
     });
     setIsCustomDuration(false);
     onClose();
@@ -211,7 +211,7 @@ const ChallengeModal = ({
             <input
               type="text"
               value={formData.title}
-              onChange={(e) => handleFormDataChange("title", e.target.value)}
+              onChange={(e) => handleFormDataChange('title', e.target.value)}
               placeholder="예: 카페 지출 줄이기 챌린지"
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm"
               required
@@ -242,9 +242,9 @@ const ChallengeModal = ({
               </div>
 
               <span
-                className={`font-semibold ${isIncome ? "text-green-600" : "text-red-600"}`}
+                className={`font-semibold ${isIncome ? 'text-green-600' : 'text-red-600'}`}
               >
-                {isIncome ? "+" : "-"}
+                {isIncome ? '+' : '-'}
                 {challengeData.amount.toLocaleString()}원
               </span>
             </div>
@@ -255,7 +255,7 @@ const ChallengeModal = ({
                 <input
                   type="checkbox"
                   checked={formData.enableAmountGoal}
-                  onChange={handleCheckboxChange("enableAmountGoal")}
+                  onChange={handleCheckboxChange('enableAmountGoal')}
                   className="mt-1 w-4 h-4 text-accent-600 bg-gray-100 border-gray-300 rounded focus:ring-accent-500"
                 />
                 <div className="flex-1">
@@ -282,21 +282,21 @@ const ChallengeModal = ({
                       <div
                         className={`text-xs ${
                           Number(formData.targetAmount) >= challengeData.amount
-                            ? "text-red-500"
-                            : "text-gray-400"
+                            ? 'text-red-500'
+                            : 'text-gray-400'
                         }`}
                       >
                         {isIncome ? (
                           // 수입
                           <>
-                            현재보다{" "}
+                            현재보다{' '}
                             {Math.round(
                               (Number(formData.targetAmount) /
                                 challengeData.amount) *
-                                100,
+                                100
                             )}
                             % 늘리기 ({challengeData.amount.toLocaleString()}원
-                            →{" "}
+                            →{' '}
                             {(
                               challengeData.amount +
                               Number(formData.targetAmount)
@@ -313,14 +313,14 @@ const ChallengeModal = ({
                           </>
                         ) : (
                           <>
-                            현재 지출의{" "}
+                            현재 지출의{' '}
                             {Math.round(
                               (Number(formData.targetAmount) /
                                 challengeData.amount) *
-                                100,
+                                100
                             )}
                             % 절약 목표 ({challengeData.amount.toLocaleString()}
-                            원 →{" "}
+                            원 →{' '}
                             {(
                               challengeData.amount -
                               Number(formData.targetAmount)
@@ -341,7 +341,7 @@ const ChallengeModal = ({
                 <input
                   type="checkbox"
                   checked={formData.enableCountGoal}
-                  onChange={handleCheckboxChange("enableCountGoal")}
+                  onChange={handleCheckboxChange('enableCountGoal')}
                   disabled={
                     isIncome
                       ? !challengeData.count || challengeData.count < 1
@@ -353,8 +353,8 @@ const ChallengeModal = ({
                         ? !challengeData.count || challengeData.count < 1
                         : !challengeData.count || challengeData.count <= 1
                     )
-                      ? "opacity-50 cursor-not-allowed"
-                      : ""
+                      ? 'opacity-50 cursor-not-allowed'
+                      : ''
                   }`}
                 />
                 <div className="flex-1">
@@ -374,7 +374,7 @@ const ChallengeModal = ({
                           type="number"
                           value={formData.targetCount}
                           onChange={(e) =>
-                            handleFormDataChange("targetCount", e.target.value)
+                            handleFormDataChange('targetCount', e.target.value)
                           }
                           placeholder="목표 횟수"
                           min={
@@ -403,7 +403,7 @@ const ChallengeModal = ({
                           ? isIncome
                             ? `현재 월 ${challengeData.count}회에서 ${formData.targetCount}회로 늘리기 (${Math.round(((Number(formData.targetCount) - challengeData.count) / challengeData.count) * 100)}% 증가)`
                             : `현재 월 ${challengeData.count}회에서 ${formData.targetCount}회로 줄이기 (${Math.round(((challengeData.count - Number(formData.targetCount)) / challengeData.count) * 100)}% 감소)`
-                          : ""}
+                          : ''}
                       </div>
                     </div>
                   )}
@@ -428,8 +428,8 @@ const ChallengeModal = ({
                     px-3 py-2 text-xs font-medium rounded-lg border transition-all duration-200
                     ${
                       formData.duration === preset.value
-                        ? "bg-accent-100 border-accent-300 text-accent-700"
-                        : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
+                        ? 'bg-accent-100 border-accent-300 text-accent-700'
+                        : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
                     }
                   `}
                 >
@@ -447,9 +447,9 @@ const ChallengeModal = ({
                   type="date"
                   value={formData.targetDate}
                   onChange={(e) =>
-                    handleFormDataChange("targetDate", e.target.value)
+                    handleFormDataChange('targetDate', e.target.value)
                   }
-                  min={format(new Date(), "yyyy-MM-dd")}
+                  min={format(new Date(), 'yyyy-MM-dd')}
                   className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm"
                 />
               </div>
@@ -458,12 +458,12 @@ const ChallengeModal = ({
             <div className="text-sm text-gray-600 bg-blue-50 rounded-lg p-3 flex items-center gap-2">
               <Calendar className="w-4 h-4 text-blue-600" />
               <span>
-                종료일:{" "}
+                종료일:{' '}
                 <strong>
                   {format(
                     new Date(formData.targetDate),
-                    "yyyy년 M월 d일 (EEEE)",
-                    { locale: ko },
+                    'yyyy년 M월 d일 (EEEE)',
+                    { locale: ko }
                   )}
                 </strong>
               </span>
@@ -477,7 +477,7 @@ const ChallengeModal = ({
             </label>
             <textarea
               value={formData.reason}
-              onChange={(e) => handleFormDataChange("reason", e.target.value)}
+              onChange={(e) => handleFormDataChange('reason', e.target.value)}
               placeholder="예: 매월 카페 지출이 너무 많아서 가계에 부담이 되고 있어요. 건강한 소비 습관을 만들고 싶습니다."
               rows={3}
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm resize-none"
@@ -493,7 +493,7 @@ const ChallengeModal = ({
             <textarea
               value={formData.description}
               onChange={(e) =>
-                handleFormDataChange("description", e.target.value)
+                handleFormDataChange('description', e.target.value)
               }
               placeholder="예: 주 3회 이상 카페를 이용하지 않기, 집에서 커피 내려먹기 등 구체적인 실행 방법을 적어보세요."
               rows={2}
diff --git a/src/hooks/budget/useChallenge.ts b/src/hooks/budget/useChallenge.ts
index ad812ae..ccf7aa9 100644
--- a/src/hooks/budget/useChallenge.ts
+++ b/src/hooks/budget/useChallenge.ts
@@ -44,7 +44,11 @@ export const useChallenge = () => {
         description: data.description || null,
         reason: data.reason || null,
         type: goalType,
-        target_amount: data.enableAmountGoal ? Number(data.targetAmount) : null,
+        target_amount: data.enableAmountGoal ? 
+          (data.categoryType === 'expense'
+            ? Number(data.targetAmount)
+            : Number(data.targetAmount)
+          ) : null,
         target_count: data.enableCountGoal ? Number(data.targetCount) : null,
         target_date: data.targetDate,
         challenge_mode: challengeMode,
diff --git a/src/utils/goals/goalsHelpers.ts b/src/utils/goals/goalsHelpers.ts
index 681de4c..4bb0de6 100644
--- a/src/utils/goals/goalsHelpers.ts
+++ b/src/utils/goals/goalsHelpers.ts
@@ -59,14 +59,30 @@ export const getGoalProgress = (goal: {
   current_amount?: number;
   target_count?: number | null;
   current_count?: number;
+  type: string;
 }) => {
-  const amountProgress = goal.target_amount && goal.current_amount !== undefined 
-    ? calculateProgress(goal.current_amount, goal.target_amount) 
-    : 0;
-  
-  const countProgress = goal.target_count && goal.current_count !== undefined 
-    ? calculateProgress(goal.current_count, goal.target_count) 
-    : 0;
+  let amountProgress = 0;
+  let countProgress = 0;
+
+  if (goal.target_amount && goal.current_amount !== undefined) {
+    if (goal.type === 'reduce_expense') {
+      // 지출 목표: 현재 사용량이 목표보다 적을수록 좋음
+      amountProgress = goal.current_amount <= goal.target_amount ? 100 :
+        Math.max(0, Math.round((1 - (goal.current_amount / goal.target_amount)) * 100));
+    } else {
+      // 수입 목표
+      amountProgress = Math.round((goal.current_amount / goal.target_amount) * 100);
+    }
+  }
+
+    if (goal.target_count && goal.current_count !== undefined) {
+    if (goal.type === 'reduce_expense') {
+      countProgress = goal.current_count <= goal.target_count ? 100 :
+        Math.max(0, Math.round((1 - (goal.current_count / goal.target_count)) * 100));
+    } else {
+      countProgress = Math.round((goal.current_count / goal.target_count) * 100);
+    }
+  }
   
   // 종합 진행률 (둘 다 있으면 평균, 하나만 있으면 그것을 사용)
   let overallProgress = 0;

From f97d61d1b93b16034d8f4e9bff486e848d2f7ba4 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 16:45:17 +0900
Subject: [PATCH 09/12] =?UTF-8?q?remove:=20=EB=A9=94=EC=9D=B8=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A3=BC=EC=84=9D?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b4989eb..7dd2363 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from "next/link";
+import Link from 'next/link';
 import {
   ArrowRight,
   BarChart3,
@@ -14,7 +14,7 @@ import {
   Hash,
   PlayCircle,
   Sparkles,
-} from "lucide-react";
+} from 'lucide-react';
 
 export default function Home() {
   return (
@@ -30,7 +30,7 @@ export default function Home() {
                 DaylyLog
               </h1>
               <p className="text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed">
-                매일의 기록이 만드는{" "}
+                매일의 기록이 만드는{' '}
                 <span className="font-bold text-accent-600">특별한 변화</span>
                 <br />
                 <span className="text-wrap">
@@ -95,7 +95,7 @@ export default function Home() {
                     <div className="h-2 bg-gray-200 rounded-full">
                       <div
                         className="h-2 bg-green-500 rounded-full"
-                        style={{ width: "76%" }}
+                        style={{ width: '76%' }}
                       ></div>
                     </div>
                     <div className="text-center text-lg font-bold text-green-600">
@@ -126,7 +126,7 @@ export default function Home() {
                     <div className="h-2 bg-gray-200 rounded-full">
                       <div
                         className="h-2 bg-green-500 rounded-full"
-                        style={{ width: "85%" }}
+                        style={{ width: '85%' }}
                       ></div>
                     </div>
                     <div className="flex items-center gap-1 text-sm text-green-600">
@@ -156,7 +156,7 @@ export default function Home() {
                     <div className="h-2 bg-gray-200 rounded-full">
                       <div
                         className="h-2 bg-blue-500 rounded-full"
-                        style={{ width: "75%" }}
+                        style={{ width: '75%' }}
                       ></div>
                     </div>
                     <div className="flex items-center gap-2">
@@ -172,8 +172,8 @@ export default function Home() {
               </div>
             </div>
 
-            {/* 통계 */}
-            <div className="pt-8 grid grid-cols-3 gap-8 max-w-md mx-auto">
+            {/* 통계 TODO: 실제 후기 및 통계 데이터 사용*/}
+            {/* <div className="pt-8 grid grid-cols-3 gap-8 max-w-md mx-auto">
               <div className="text-center">
                 <div className="text-2xl font-bold text-accent-600">1,000+</div>
                 <div className="text-sm text-gray-600">활성 사용자</div>
@@ -188,7 +188,7 @@ export default function Home() {
                 <div className="text-2xl font-bold text-accent-400">98%</div>
                 <div className="text-sm text-gray-600">사용자 만족도</div>
               </div>
-            </div>
+            </div> */}
           </div>
         </div>
       </section>
@@ -409,7 +409,7 @@ export default function Home() {
                     <div className="w-12 h-12 bg-gradient-to-r from-accent-400 to-accent-300 rounded-full flex-shrink-0"></div>
                     <div className="min-w-0">
                       <div className="text-white font-semibold">
-                        민지님이 목표를 달성했어요!
+                        OO님이 목표를 달성했어요!
                       </div>
                       <div className="text-accent-200 text-sm">
                         독서 목표 100% 완료
@@ -420,7 +420,7 @@ export default function Home() {
                     <div className="w-12 h-12 bg-gradient-to-r from-accent-300 to-accent-400 rounded-full flex-shrink-0"></div>
                     <div className="min-w-0">
                       <div className="text-white font-semibold">
-                        수현님이 질문에 답변했어요
+                        OO님이 질문에 답변했어요
                       </div>
                       <div className="text-accent-200 text-sm">
                         가장 감사한 순간은...
@@ -431,7 +431,7 @@ export default function Home() {
                     <div className="w-12 h-12 bg-gradient-to-r from-accent-400 to-accent-500 rounded-full flex-shrink-0"></div>
                     <div className="min-w-0">
                       <div className="text-white font-semibold">
-                        지훈님이 회고를 작성했어요
+                        OO님이 회고를 작성했어요
                       </div>
                       <div className="text-accent-200 text-sm">
                         오늘의 소중한 경험
@@ -446,7 +446,7 @@ export default function Home() {
       </section>
 
       {/* 사용자 후기 */}
-      <section className="py-20 bg-white/70">
+      {/* <section className="py-20 bg-white/70">
         <div className="max-w-7xl mx-auto px-4">
           <div className="text-center mb-16">
             <h2 className="text-4xl font-bold text-gray-900 mb-6">
@@ -525,13 +525,13 @@ export default function Home() {
             </div>
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* 마지막 CTA */}
       <section className="py-20 bg-gradient-to-br from-accent-900 to-accent-800">
         <div className="max-w-4xl mx-auto text-center px-4">
           <h2 className="text-5xl font-bold text-white mb-6">
-            변화는{" "}
+            변화는{' '}
             <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-400 to-accent-300">
               오늘
             </span>

From c6cf6d739bed3b77a0dfd2f215cdb2d65f6b449c Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 16:45:48 +0900
Subject: [PATCH 10/12] =?UTF-8?q?style:=20=ED=8F=AC=EB=A7=B7=ED=8C=85=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/goals/[id]/edit/page.tsx              | 132 +++++++--------
 src/app/goals/[id]/page.tsx                   |  72 ++++----
 src/app/goals/page.tsx                        |  18 +-
 src/app/layout.tsx                            |  16 +-
 src/app/page.tsx                              |  14 +-
 src/app/reflections/[id]/page.tsx             | 104 ++++++------
 src/app/reflections/new/page.tsx              |  30 ++--
 src/app/reflections/page.tsx                  | 150 ++++++++---------
 src/components/budget/BudgetForm.tsx          | 150 ++++++++---------
 src/components/budget/ChallengeModal.tsx      | 126 +++++++-------
 src/components/budget/GoalUpdateModal.tsx     |  38 ++---
 src/components/goals/ActionButton.tsx         |  10 +-
 src/components/goals/GoalCard.tsx             |  30 ++--
 src/components/goals/InfoSection.tsx          |   8 +-
 src/components/goals/ProgressBar.tsx          |  32 ++--
 src/components/goals/StatCard.tsx             |  14 +-
 src/components/goals/StatusBadge.tsx          |  14 +-
 src/components/layout/Header.tsx              |  62 +++----
 src/components/reflections/ReflectionCard.tsx |  32 ++--
 src/hooks/budget/useBudget.ts                 | 156 +++++++++++-------
 src/hooks/budget/useChallenge.ts              |  44 +++--
 src/hooks/goals/useGoalStatistics.ts          |  12 +-
 src/hooks/goals/useGoals.ts                   |  55 +++---
 src/hooks/goals/useGoalsByBudget.ts           |  16 +-
 src/hooks/reflections/useReflections.ts       |  18 +-
 src/utils/goals/goalsHelpers.ts               | 109 ++++++------
 26 files changed, 770 insertions(+), 692 deletions(-)

diff --git a/src/app/goals/[id]/edit/page.tsx b/src/app/goals/[id]/edit/page.tsx
index ff0dd29..0670b1a 100644
--- a/src/app/goals/[id]/edit/page.tsx
+++ b/src/app/goals/[id]/edit/page.tsx
@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import { useAuth } from '@/hooks/auth';
-import { useGoals } from '@/hooks/goals/useGoals';
-import { GoalFormData } from '@/types/goals';
+import { useAuth } from "@/hooks/auth";
+import { useGoals } from "@/hooks/goals/useGoals";
+import { GoalFormData } from "@/types/goals";
 import {
   getChallengeMode,
   getStatusText,
   getTypeText,
-} from '@/utils/goals/goalsHelpers';
-import { format } from 'date-fns';
+} from "@/utils/goals/goalsHelpers";
+import { format } from "date-fns";
 import {
   BarChart3,
   Calendar,
@@ -18,9 +18,9 @@ import {
   Save,
   Target,
   X,
-} from 'lucide-react';
-import { useParams, useRouter } from 'next/navigation';
-import { FormEvent, useEffect, useState } from 'react';
+} from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { FormEvent, useEffect, useState } from "react";
 
 interface GoalEditFormData {
   title: string;
@@ -29,8 +29,8 @@ interface GoalEditFormData {
   target_amount: string;
   target_count: string;
   target_date: string;
-  status: 'active' | 'completed' | 'paused' | 'cancelled';
-  challenge_mode: 'amount' | 'count' | 'both';
+  status: "active" | "completed" | "paused" | "cancelled";
+  challenge_mode: "amount" | "count" | "both";
 }
 
 const GoalEditPage = () => {
@@ -48,14 +48,14 @@ const GoalEditPage = () => {
   const goal = goals.find((g) => g.id === goalId);
 
   const [formData, setFormData] = useState<GoalEditFormData>({
-    title: '',
-    description: '',
-    reason: '',
-    target_amount: '',
-    target_count: '',
-    target_date: '',
-    status: 'active',
-    challenge_mode: 'amount',
+    title: "",
+    description: "",
+    reason: "",
+    target_amount: "",
+    target_count: "",
+    target_date: "",
+    status: "active",
+    challenge_mode: "amount",
   });
 
   const [errors, setErrors] = useState<Partial<GoalEditFormData>>({});
@@ -64,14 +64,14 @@ const GoalEditPage = () => {
   useEffect(() => {
     if (goal) {
       setFormData({
-        title: goal.title || '',
-        description: goal.description || '',
-        reason: goal.reason || '',
-        target_amount: goal.target_amount ? goal.target_amount.toString() : '',
-        target_count: goal.target_count ? goal.target_count.toString() : '',
+        title: goal.title || "",
+        description: goal.description || "",
+        reason: goal.reason || "",
+        target_amount: goal.target_amount ? goal.target_amount.toString() : "",
+        target_count: goal.target_count ? goal.target_count.toString() : "",
         target_date: goal.target_date
-          ? format(new Date(goal.target_date), 'yyyy-MM-dd')
-          : '',
+          ? format(new Date(goal.target_date), "yyyy-MM-dd")
+          : "",
         status: goal.status,
         challenge_mode: goal.challenge_mode,
       });
@@ -90,36 +90,36 @@ const GoalEditPage = () => {
     const newErrors: Partial<GoalEditFormData> = {};
 
     if (!formData.title.trim()) {
-      newErrors.title = '목표 제목은 필수 입니다.';
+      newErrors.title = "목표 제목은 필수 입니다.";
     }
 
     if (
-      formData.challenge_mode === 'amount' ||
-      formData.challenge_mode === 'both'
+      formData.challenge_mode === "amount" ||
+      formData.challenge_mode === "both"
     ) {
       if (!formData.target_amount || Number(formData.target_amount) <= 0) {
-        newErrors.target_amount = '목표 금액을 올바르게 입력해주세요.';
+        newErrors.target_amount = "목표 금액을 올바르게 입력해주세요.";
       }
     }
 
     if (
-      formData.challenge_mode === 'count' ||
-      formData.challenge_mode === 'both'
+      formData.challenge_mode === "count" ||
+      formData.challenge_mode === "both"
     ) {
       if (!formData.target_count || Number(formData.target_count) <= 0) {
-        newErrors.target_count = '목표 횟수를 올바르게 입력해주세요.';
+        newErrors.target_count = "목표 횟수를 올바르게 입력해주세요.";
       }
     }
 
     if (!formData.target_date) {
-      newErrors.target_date = '목표 날짜는 필수입니다.';
+      newErrors.target_date = "목표 날짜는 필수입니다.";
     } else {
       const targetDate = new Date(formData.target_date);
       const today = new Date();
       today.setHours(0, 0, 0, 0);
 
       if (targetDate < today) {
-        newErrors.target_date = '목표 날짜는 오늘 이후여야 합니다.';
+        newErrors.target_date = "목표 날짜는 오늘 이후여야 합니다.";
       }
     }
 
@@ -144,10 +144,10 @@ const GoalEditPage = () => {
     };
 
     // 챌린지 모드에 따라 목표값 설정
-    if (formData.challenge_mode === 'amount') {
+    if (formData.challenge_mode === "amount") {
       updateData.target_amount = Number(formData.target_amount);
       updateData.target_count = null;
-    } else if (formData.challenge_mode === 'count') {
+    } else if (formData.challenge_mode === "count") {
       updateData.target_count = Number(formData.target_count);
       updateData.target_amount = null;
     } else {
@@ -157,11 +157,11 @@ const GoalEditPage = () => {
 
     try {
       updateGoal({ id: goalId, updates: updateData });
-      alert('목표가 성공적으로 수정되었습니다.');
+      alert("목표가 성공적으로 수정되었습니다.");
       router.push(`/goals/${goalId}`);
     } catch (error) {
-      console.error('목표 수정 실패:', error);
-      alert('목표 수정에 실패했습니다.');
+      console.error("목표 수정 실패:", error);
+      alert("목표 수정에 실패했습니다.");
     }
   };
 
@@ -213,7 +213,7 @@ const GoalEditPage = () => {
             수정하려는 목표가 존재하지 않거나 삭제되었습니다.
           </p>
           <button
-            onClick={() => router.push('/goals')}
+            onClick={() => router.push("/goals")}
             className="px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
           >
             목표 목록으로 돌아가기
@@ -264,9 +264,9 @@ const GoalEditPage = () => {
                   <input
                     type="text"
                     value={formData.title}
-                    onChange={(e) => handleInputChange('title', e.target.value)}
+                    onChange={(e) => handleInputChange("title", e.target.value)}
                     className={`w-full px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors hover:border-accent-300 ${
-                      errors.title ? 'border-red-500' : 'border-gray-400'
+                      errors.title ? "border-red-500" : "border-gray-400"
                     }`}
                     placeholder="목표 제목을 작성하세요."
                   />
@@ -283,7 +283,7 @@ const GoalEditPage = () => {
                   <textarea
                     value={formData.description}
                     onChange={(e) =>
-                      handleInputChange('description', e.target.value)
+                      handleInputChange("description", e.target.value)
                     }
                     rows={3}
                     className="w-full px-4 py-3 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 resize-none hover:border-accent-300"
@@ -299,7 +299,7 @@ const GoalEditPage = () => {
                   <textarea
                     value={formData.reason}
                     onChange={(e) =>
-                      handleInputChange('reason', e.target.value)
+                      handleInputChange("reason", e.target.value)
                     }
                     rows={2}
                     className="w-full px-4 py-3 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 resize-none hover:border-accent-300"
@@ -315,7 +315,7 @@ const GoalEditPage = () => {
                   <select
                     value={formData.status}
                     onChange={(e) =>
-                      handleInputChange('status', e.target.value)
+                      handleInputChange("status", e.target.value)
                     }
                     className="w-full px-4 py-3 border border-gray-400 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 hover:border-accent-300 hover:cursor-pointer"
                   >
@@ -338,13 +338,13 @@ const GoalEditPage = () => {
               <div className="flex flex-col gap-6">
                 {/* 챌린지 모드 */}
                 <div className="grid grid-cols-3 gap-4">
-                  {(['amount', 'count', 'both'] as const).map((mode) => (
+                  {(["amount", "count", "both"] as const).map((mode) => (
                     <label
                       key={mode}
                       className={`flex items-center justify-center p-4 border-2 rounded-lg cursor-pointer transition-all ${
                         formData.challenge_mode === mode
-                          ? 'border-accent-500 bg-accent-50'
-                          : 'border-gray-300 hover:border-accent-300'
+                          ? "border-accent-500 bg-accent-50"
+                          : "border-gray-300 hover:border-accent-300"
                       }`}
                     >
                       <input
@@ -352,7 +352,7 @@ const GoalEditPage = () => {
                         value={mode}
                         checked={formData.challenge_mode === mode}
                         onChange={(e) =>
-                          handleInputChange('challenge_mode', e.target.value)
+                          handleInputChange("challenge_mode", e.target.value)
                         }
                         className="hidden"
                       />
@@ -364,8 +364,8 @@ const GoalEditPage = () => {
                 </div>
 
                 {/* 목표 금액 */}
-                {(formData.challenge_mode === 'amount' ||
-                  formData.challenge_mode === 'both') && (
+                {(formData.challenge_mode === "amount" ||
+                  formData.challenge_mode === "both") && (
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
                       금액 <strong className="text-red-500">*</strong>
@@ -376,12 +376,12 @@ const GoalEditPage = () => {
                         type="number"
                         value={formData.target_amount}
                         onChange={(e) =>
-                          handleInputChange('target_amount', e.target.value)
+                          handleInputChange("target_amount", e.target.value)
                         }
                         className={`w-full pl-12 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors ${
                           errors.target_amount
-                            ? 'border-red-500'
-                            : 'border-gray-400 hover:border-accent-400'
+                            ? "border-red-500"
+                            : "border-gray-400 hover:border-accent-400"
                         }`}
                         placeholder="목표 금액을 입력하세요."
                         min="1"
@@ -399,8 +399,8 @@ const GoalEditPage = () => {
                 )}
 
                 {/* 목표 횟수 */}
-                {(formData.challenge_mode === 'count' ||
-                  formData.challenge_mode === 'both') && (
+                {(formData.challenge_mode === "count" ||
+                  formData.challenge_mode === "both") && (
                   <div>
                     <label className="block text-sm font-medium text-gray-700 mb-2">
                       횟수 <strong className="text-red-500">*</strong>
@@ -411,12 +411,12 @@ const GoalEditPage = () => {
                         type="number"
                         value={formData.target_count}
                         onChange={(e) =>
-                          handleInputChange('target_count', e.target.value)
+                          handleInputChange("target_count", e.target.value)
                         }
                         className={`w-full pl-12 pr-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors ${
                           errors.target_count
-                            ? 'border-red-500'
-                            : 'border-gray-400 hover:border-accent-400'
+                            ? "border-red-500"
+                            : "border-gray-400 hover:border-accent-400"
                         }`}
                         placeholder="목표 횟수를 입력하세요."
                         min="1"
@@ -444,12 +444,12 @@ const GoalEditPage = () => {
                       type="date"
                       value={formData.target_date}
                       onChange={(e) =>
-                        handleInputChange('target_date', e.target.value)
+                        handleInputChange("target_date", e.target.value)
                       }
                       className={`w-full pl-12 pr-10 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors hover:cursor-pointer ${
                         errors.target_date
-                          ? 'border-red-500'
-                          : 'border-gray-400 hover:border-accent-400'
+                          ? "border-red-500"
+                          : "border-gray-400 hover:border-accent-400"
                       }`}
                     />
                   </div>
@@ -477,12 +477,12 @@ const GoalEditPage = () => {
                 disabled={isUpdatingGoal}
                 className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all duration-200 transform shadow-lg ${
                   isUpdatingGoal
-                    ? 'bg-gray-400 cursor-not-allowed'
-                    : 'bg-gradient-to-r from-accent-400 to-accent-600 text-white hover:shadow-xl hover:-translate-y-1 hover:cursor-pointer'
+                    ? "bg-gray-400 cursor-not-allowed"
+                    : "bg-gradient-to-r from-accent-400 to-accent-600 text-white hover:shadow-xl hover:-translate-y-1 hover:cursor-pointer"
                 }`}
               >
                 <Save className="w-4 h-4" />
-                {isUpdatingGoal ? '저장 중...' : '수정'}
+                {isUpdatingGoal ? "저장 중..." : "수정"}
               </button>
             </div>
           </form>
diff --git a/src/app/goals/[id]/page.tsx b/src/app/goals/[id]/page.tsx
index a7bb1ce..d625088 100644
--- a/src/app/goals/[id]/page.tsx
+++ b/src/app/goals/[id]/page.tsx
@@ -1,23 +1,23 @@
-'use client';
+"use client";
 
-import ActionButtons from '@/components/goals/ActionButton';
-import InfoSection, { InfoItem } from '@/components/goals/InfoSection';
-import ProgressBar from '@/components/goals/ProgressBar';
-import StatusBadge from '@/components/goals/StatusBadge';
-import { useAuth } from '@/hooks/auth';
-import { useGoals } from '@/hooks/goals/useGoals';
-import { supabase } from '@/lib/supabase';
+import ActionButtons from "@/components/goals/ActionButton";
+import InfoSection, { InfoItem } from "@/components/goals/InfoSection";
+import ProgressBar from "@/components/goals/ProgressBar";
+import StatusBadge from "@/components/goals/StatusBadge";
+import { useAuth } from "@/hooks/auth";
+import { useGoals } from "@/hooks/goals/useGoals";
+import { supabase } from "@/lib/supabase";
 import {
   getChallengeMode,
   getGoalProgress,
   getTypeText,
-} from '@/utils/goals/goalsHelpers';
-import { useQueryClient } from '@tanstack/react-query';
-import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
-import { ArrowLeft, Calendar, Info, Target } from 'lucide-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
+} from "@/utils/goals/goalsHelpers";
+import { useQueryClient } from "@tanstack/react-query";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import { ArrowLeft, Calendar, Info, Target } from "lucide-react";
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
 
 const GoalDetailPage = () => {
   const { user } = useAuth();
@@ -35,27 +35,27 @@ const GoalDetailPage = () => {
   };
 
   const handleDelete = async () => {
-    if (!confirm('정말로 이 목표를 삭제하시겠습니까?')) {
+    if (!confirm("정말로 이 목표를 삭제하시겠습니까?")) {
       return;
     }
 
     setIsDeleting(true);
 
     try {
-      const { error } = await supabase.from('goals').delete().eq('id', goalId);
+      const { error } = await supabase.from("goals").delete().eq("id", goalId);
 
       if (error) {
-        console.error('목표 삭제 실패:', error);
-        alert('목표 삭제에 실패했습니다.');
+        console.error("목표 삭제 실패:", error);
+        alert("목표 삭제에 실패했습니다.");
         return;
       }
 
-      queryClient.invalidateQueries({ queryKey: ['goals'] });
-      alert('목표가 성공적으로 삭제되었습니다.');
-      router.push('/goals');
+      queryClient.invalidateQueries({ queryKey: ["goals"] });
+      alert("목표가 성공적으로 삭제되었습니다.");
+      router.push("/goals");
     } catch (error) {
-      console.error('목표 삭제 오류:', error);
-      alert('목표 삭제 중 오류가 발생했습니다.');
+      console.error("목표 삭제 오류:", error);
+      alert("목표 삭제 중 오류가 발생했습니다.");
     } finally {
       setIsDeleting(false);
     }
@@ -72,7 +72,7 @@ const GoalDetailPage = () => {
           <h1 className="text-2xl font-bold text-gray-900 mb-3">목표 상세</h1>
           <p className="text-gray-600 mb-6">로그인이 필요한 서비스입니다.</p>
           <button
-            onClick={() => router.push('/auth/login')}
+            onClick={() => router.push("/auth/login")}
             className="px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
           >
             로그인하기
@@ -97,7 +97,7 @@ const GoalDetailPage = () => {
             요청한 목표가 존재하지 않거나 삭제되었습니다.
           </p>
           <button
-            onClick={() => router.push('/goals')}
+            onClick={() => router.push("/goals")}
             className="px-6 py-3 bg-gradient-to-r from-accent-500 to-accent-400 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
           >
             목표 목록으로 돌아가기
@@ -116,7 +116,7 @@ const GoalDetailPage = () => {
         {/* 헤더 */}
         <div className="flex items-center">
           <button
-            onClick={() => router.push('/goals')}
+            onClick={() => router.push("/goals")}
             className="hover:text-accent-500 text-gray-800 hover:cursor-pointer"
           >
             <ArrowLeft className="w-5 h-5" />
@@ -151,7 +151,7 @@ const GoalDetailPage = () => {
                 {goal.category && (
                   <InfoItem label="" value={goal.category.name} important />
                 )}
-                <InfoItem label="" value={getTypeText(goal.type)} important />({' '}
+                <InfoItem label="" value={getTypeText(goal.type)} important />({" "}
                 <InfoItem
                   label=""
                   value={getChallengeMode(goal.challenge_mode)}
@@ -162,7 +162,7 @@ const GoalDetailPage = () => {
               {goal.category && (
                 <InfoItem
                   label={
-                    goal.type === 'reduce_expense' ? '현재 사용' : '현재 달성'
+                    goal.type === "reduce_expense" ? "현재 사용" : "현재 달성"
                   }
                   value={`${goal.current_amount?.toLocaleString()}원`}
                   important
@@ -182,19 +182,19 @@ const GoalDetailPage = () => {
                     label=""
                     value={format(
                       new Date(goal.created_from_date),
-                      'yy. MM. dd.',
+                      "yy. MM. dd.",
                       {
                         locale: ko,
-                      }
+                      },
                     )}
                     important
                   />
-                )}{' '}
+                )}{" "}
                 ~
                 {goal.target_date && (
                   <InfoItem
                     label=""
-                    value={format(new Date(goal.target_date), 'yy. MM. dd.', {
+                    value={format(new Date(goal.target_date), "yy. MM. dd.", {
                       locale: ko,
                     })}
                     important
@@ -212,7 +212,7 @@ const GoalDetailPage = () => {
               )}
 
               {goal.target_count && goal.current_count !== undefined && (
-                <div className={goal.target_amount ? 'mt-6' : ''}>
+                <div className={goal.target_amount ? "mt-6" : ""}>
                   <ProgressBar
                     current={goal.current_count}
                     target={goal.target_count}
@@ -245,13 +245,13 @@ const GoalDetailPage = () => {
             >
               <InfoItem
                 label="생성일"
-                value={format(new Date(goal.created_at), 'yy. MM. dd. HH:mm', {
+                value={format(new Date(goal.created_at), "yy. MM. dd. HH:mm", {
                   locale: ko,
                 })}
               />
               <InfoItem
                 label="마지막 수정일"
-                value={format(new Date(goal.updated_at), 'yy. MM. dd. HH:mm', {
+                value={format(new Date(goal.updated_at), "yy. MM. dd. HH:mm", {
                   locale: ko,
                 })}
               />
diff --git a/src/app/goals/page.tsx b/src/app/goals/page.tsx
index 0e07992..4a4f87f 100644
--- a/src/app/goals/page.tsx
+++ b/src/app/goals/page.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import { useAuth } from '@/hooks/auth';
-import { useGoals } from '@/hooks/goals/useGoals';
+import { useAuth } from "@/hooks/auth";
+import { useGoals } from "@/hooks/goals/useGoals";
 import {
   Target,
   Clock,
@@ -12,11 +12,11 @@ import {
   Trophy,
   ArrowRight,
   Star,
-} from 'lucide-react';
-import Link from 'next/link';
-import GoalCard from '@/components/goals/GoalCard';
-import StatCard from '@/components/goals/StatCard';
-import useGoalStatistics from '@/hooks/goals/useGoalStatistics';
+} from "lucide-react";
+import Link from "next/link";
+import GoalCard from "@/components/goals/GoalCard";
+import StatCard from "@/components/goals/StatCard";
+import useGoalStatistics from "@/hooks/goals/useGoalStatistics";
 
 const GoalsPage = () => {
   const { user, isLoading: isAuthLoading } = useAuth();
@@ -149,7 +149,7 @@ const GoalsPage = () => {
                 icon={<Clock className="w-6 h-6" />}
                 title="곧 마감"
                 value={`${statistics.soonDue}개`}
-                color={statistics.soonDue > 0 ? 'yellow' : 'accent'}
+                color={statistics.soonDue > 0 ? "yellow" : "accent"}
               />
             </div>
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index dd04ad7..84600c6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,14 @@
-import { Inter } from 'next/font/google';
-import './globals.css';
-import Providers from './providers';
-import Header from '@/components/layout/Header';
-const inter = Inter({ subsets: ['latin'] });
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Providers from "./providers";
+import Header from "@/components/layout/Header";
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: 'DaylyLog - 매일의 기록이 만드는 특별한 변화',
+  title: "DaylyLog - 매일의 기록이 만드는 특별한 변화",
   description:
-    '일상을 기록하고, 목표를 달성하며, 성장을 추적하는 스마트한 방법',
-  keywords: '가계부, 목표달성, 일상기록, 성찰, 자기계발',
+    "일상을 기록하고, 목표를 달성하며, 성장을 추적하는 스마트한 방법",
+  keywords: "가계부, 목표달성, 일상기록, 성찰, 자기계발",
 };
 
 export default function RootLayout({
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7dd2363..32d6df0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import Link from 'next/link';
+import Link from "next/link";
 import {
   ArrowRight,
   BarChart3,
@@ -14,7 +14,7 @@ import {
   Hash,
   PlayCircle,
   Sparkles,
-} from 'lucide-react';
+} from "lucide-react";
 
 export default function Home() {
   return (
@@ -30,7 +30,7 @@ export default function Home() {
                 DaylyLog
               </h1>
               <p className="text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed">
-                매일의 기록이 만드는{' '}
+                매일의 기록이 만드는{" "}
                 <span className="font-bold text-accent-600">특별한 변화</span>
                 <br />
                 <span className="text-wrap">
@@ -95,7 +95,7 @@ export default function Home() {
                     <div className="h-2 bg-gray-200 rounded-full">
                       <div
                         className="h-2 bg-green-500 rounded-full"
-                        style={{ width: '76%' }}
+                        style={{ width: "76%" }}
                       ></div>
                     </div>
                     <div className="text-center text-lg font-bold text-green-600">
@@ -126,7 +126,7 @@ export default function Home() {
                     <div className="h-2 bg-gray-200 rounded-full">
                       <div
                         className="h-2 bg-green-500 rounded-full"
-                        style={{ width: '85%' }}
+                        style={{ width: "85%" }}
                       ></div>
                     </div>
                     <div className="flex items-center gap-1 text-sm text-green-600">
@@ -156,7 +156,7 @@ export default function Home() {
                     <div className="h-2 bg-gray-200 rounded-full">
                       <div
                         className="h-2 bg-blue-500 rounded-full"
-                        style={{ width: '75%' }}
+                        style={{ width: "75%" }}
                       ></div>
                     </div>
                     <div className="flex items-center gap-2">
@@ -531,7 +531,7 @@ export default function Home() {
       <section className="py-20 bg-gradient-to-br from-accent-900 to-accent-800">
         <div className="max-w-4xl mx-auto text-center px-4">
           <h2 className="text-5xl font-bold text-white mb-6">
-            변화는{' '}
+            변화는{" "}
             <span className="text-transparent bg-clip-text bg-gradient-to-r from-accent-400 to-accent-300">
               오늘
             </span>
diff --git a/src/app/reflections/[id]/page.tsx b/src/app/reflections/[id]/page.tsx
index b796314..d68d7f1 100644
--- a/src/app/reflections/[id]/page.tsx
+++ b/src/app/reflections/[id]/page.tsx
@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import AuthGuard from '@/components/auth/AuthGuard';
-import { useAuth } from '@/hooks/auth';
-import { useReflections } from '@/hooks/reflections/useReflections';
-import { supabase } from '@/lib/supabase';
-import { ReflectionWithKeywords } from '@/types/reflections';
-import { format } from 'date-fns';
+import AuthGuard from "@/components/auth/AuthGuard";
+import { useAuth } from "@/hooks/auth";
+import { useReflections } from "@/hooks/reflections/useReflections";
+import { supabase } from "@/lib/supabase";
+import { ReflectionWithKeywords } from "@/types/reflections";
+import { format } from "date-fns";
 import {
   ArrowLeft,
   Calendar,
@@ -17,10 +17,10 @@ import {
   Share2,
   Trash2,
   User,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+} from "lucide-react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export interface KeywordRelation {
   keyword: {
@@ -43,7 +43,7 @@ const ReflectionDetailPage = () => {
   });
 
   const [reflection, setReflection] = useState<ReflectionWithKeywords | null>(
-    null
+    null,
   );
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -56,7 +56,7 @@ const ReflectionDetailPage = () => {
       try {
         setIsLoading(true);
         const { data, error } = await supabase
-          .from('reflections')
+          .from("reflections")
           .select(
             `
             *,
@@ -64,15 +64,15 @@ const ReflectionDetailPage = () => {
             keywords:reflection_keyword_relations(
               keyword:reflection_keywords(*)
             )
-          `
+          `,
           )
-          .eq('id', id)
+          .eq("id", id)
           .maybeSingle();
 
         if (error) throw error;
 
         if (!data) {
-          setError('회고를 찾을 수 없습니다.');
+          setError("회고를 찾을 수 없습니다.");
           return;
         }
 
@@ -81,19 +81,19 @@ const ReflectionDetailPage = () => {
         const isPublic = data.is_public && data.is_neighbor_visible;
 
         if (!isOwn && !isPublic) {
-          setError('이 회고에 접근할 권한이 없습니다.');
+          setError("이 회고에 접근할 권한이 없습니다.");
           return;
         }
 
         // 데이터 변환
         const keywords =
           data.keywords?.map((rk: KeywordRelation) => rk.keyword) || [];
-        const effective_visibility: 'public' | 'neighbors' | 'private' =
+        const effective_visibility: "public" | "neighbors" | "private" =
           data.is_public && data.is_neighbor_visible
-            ? 'public'
+            ? "public"
             : data.is_public && !data.is_neighbor_visible
-              ? 'neighbors'
-              : 'private';
+              ? "neighbors"
+              : "private";
 
         setReflection({
           ...data,
@@ -102,8 +102,8 @@ const ReflectionDetailPage = () => {
           is_own: isOwn,
         });
       } catch (err) {
-        console.error('회고 조회 실패:', err);
-        setError('회고를 불러오는 중 오류가 발생했습니다.');
+        console.error("회고 조회 실패:", err);
+        setError("회고를 불러오는 중 오류가 발생했습니다.");
       } finally {
         setIsLoading(false);
       }
@@ -115,7 +115,7 @@ const ReflectionDetailPage = () => {
   const handleDelete = async () => {
     if (!reflection) return;
 
-    if (confirm('정말 삭제하시겠습니까? 삭제된 회고는 복구할 수 없습니다.')) {
+    if (confirm("정말 삭제하시겠습니까? 삭제된 회고는 복구할 수 없습니다.")) {
       try {
         await new Promise((resolve, reject) => {
           deleteReflection(reflection.id, {
@@ -123,9 +123,9 @@ const ReflectionDetailPage = () => {
             onError: reject,
           });
         });
-        router.push('/reflections');
+        router.push("/reflections");
       } catch (error) {
-        console.error('삭제 실패:', error);
+        console.error("삭제 실패:", error);
       }
     }
   };
@@ -133,48 +133,48 @@ const ReflectionDetailPage = () => {
   const handleShare = async () => {
     if (!reflection) return;
 
-    if (reflection.effective_visibility === 'private') {
-      alert('비공개 회고는 공유할 수 없습니다.');
+    if (reflection.effective_visibility === "private") {
+      alert("비공개 회고는 공유할 수 없습니다.");
       return;
     }
 
     try {
       await navigator.share({
-        title: reflection.title || '회고',
-        text: reflection.content.slice(1, 100) + '...',
+        title: reflection.title || "회고",
+        text: reflection.content.slice(1, 100) + "...",
         url: window.location.href,
       });
     } catch {
       // Web Share API를 지원하지 않는 경우 URL 복사
       await navigator.clipboard.writeText(window.location.href);
-      alert('링크가 클립보드에 복사되었습니다.');
+      alert("링크가 클립보드에 복사되었습니다.");
     }
   };
 
   const getVisibilityInfo = (
-    visibility: 'public' | 'neighbors' | 'private'
+    visibility: "public" | "neighbors" | "private",
   ) => {
     switch (visibility) {
-      case 'public':
+      case "public":
         return {
           icon: Eye,
-          label: '전체 공개',
-          color: 'text-green-600',
-          bgColor: 'bg-green-100',
+          label: "전체 공개",
+          color: "text-green-600",
+          bgColor: "bg-green-100",
         };
-      case 'neighbors':
+      case "neighbors":
         return {
           icon: User,
-          label: '이웃 공개',
-          color: 'text-blue-600',
-          bgColor: 'bg-blue-100',
+          label: "이웃 공개",
+          color: "text-blue-600",
+          bgColor: "bg-blue-100",
         };
-      case 'private':
+      case "private":
         return {
           icon: Lock,
-          label: '비공개',
-          color: 'text-gray-600',
-          bgColor: 'bg-gray-100',
+          label: "비공개",
+          color: "text-gray-600",
+          bgColor: "bg-gray-100",
         };
     }
   };
@@ -223,7 +223,7 @@ const ReflectionDetailPage = () => {
         <div className="max-w-4xl mx-auto p-4 text-center py-8">
           <div className="bg-white rounded-lg p-8 shadow-sm border">
             <h3 className="text-lg font-medium text-gray-600 mb-2">
-              {error || '회고를 찾을 수 없습니다'}
+              {error || "회고를 찾을 수 없습니다"}
             </h3>
             <Link
               href="/reflections"
@@ -237,7 +237,7 @@ const ReflectionDetailPage = () => {
     );
   }
 
-  const isGratitude = reflection.category?.name === 'gratitude';
+  const isGratitude = reflection.category?.name === "gratitude";
   const TypeIcon = isGratitude ? Heart : Lightbulb;
   const visibilityInfo = getVisibilityInfo(reflection.effective_visibility);
   const VisibilityIcon = visibilityInfo.icon;
@@ -296,19 +296,19 @@ const ReflectionDetailPage = () => {
           <div className="flex flex-col pb-2 border-b border-accent-400">
             <div className="flex gap-2 items-center">
               <div
-                className={`p-3 rounded-lg ${isGratitude ? 'bg-orange-100' : 'bg-blue-100'}`}
+                className={`p-3 rounded-lg ${isGratitude ? "bg-orange-100" : "bg-blue-100"}`}
               >
                 <TypeIcon
-                  className={`w-6 h-6 ${isGratitude ? 'text-orange-600' : 'text-blue-600'}`}
+                  className={`w-6 h-6 ${isGratitude ? "text-orange-600" : "text-blue-600"}`}
                 />
               </div>
               <div className="flex flex-col items-start">
                 <div className="flex items-center gap-1 text-sm text-accent-700">
                   <Calendar className="w-4 h-4" />
-                  {format(new Date(reflection.created_at), 'yyyy. M. d. HH:mm')}
+                  {format(new Date(reflection.created_at), "yyyy. M. d. HH:mm")}
                 </div>
                 <span
-                  className={`text-sm font-medium ${isGratitude ? 'text-orange-600' : 'text-blue-600'}`}
+                  className={`text-sm font-medium ${isGratitude ? "text-orange-600" : "text-blue-600"}`}
                 >
                   {reflection.category?.display_name}
                 </span>
@@ -321,8 +321,8 @@ const ReflectionDetailPage = () => {
             <div className="flex justify-end text-sm text-gray-500">
               {reflection.updated_at !== reflection.created_at && (
                 <span className="text-accent-700">
-                  수정일:{' '}
-                  {format(new Date(reflection.updated_at), 'yyyy. M. d. HH:mm')}
+                  수정일:{" "}
+                  {format(new Date(reflection.updated_at), "yyyy. M. d. HH:mm")}
                 </span>
               )}
             </div>
diff --git a/src/app/reflections/new/page.tsx b/src/app/reflections/new/page.tsx
index 48c8c8a..c94eead 100644
--- a/src/app/reflections/new/page.tsx
+++ b/src/app/reflections/new/page.tsx
@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
-import AuthGuard from '@/components/auth/AuthGuard';
-import ReflectionForm from '@/components/reflections/ReflectionForm';
-import { useAuth } from '@/hooks/auth';
-import { useReflections } from '@/hooks/reflections/useReflections';
-import { ReflectionFormData } from '@/types/reflections';
-import { ArrowLeft, BookOpen } from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import AuthGuard from "@/components/auth/AuthGuard";
+import ReflectionForm from "@/components/reflections/ReflectionForm";
+import { useAuth } from "@/hooks/auth";
+import { useReflections } from "@/hooks/reflections/useReflections";
+import { ReflectionFormData } from "@/types/reflections";
+import { ArrowLeft, BookOpen } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 const NewReflectionPage = () => {
   const router = useRouter();
@@ -27,18 +27,18 @@ const NewReflectionPage = () => {
       { ...formData, user_id: user.id },
       {
         onSuccess: () => {
-          router.push('/reflections');
+          router.push("/reflections");
         },
         onError: (error) => {
-          console.error('회고 작성 실패:', error);
-          setError('회고 작성 중 오류가 발생했습니다. 다시 시도해주세요.');
+          console.error("회고 작성 실패:", error);
+          setError("회고 작성 중 오류가 발생했습니다. 다시 시도해주세요.");
         },
-      }
+      },
     );
   };
 
   const handleCancel = () => {
-    if (confirm('작성을 취소하시겠습니까? 작성된 내용이 사라집니다.')) {
+    if (confirm("작성을 취소하시겠습니까? 작성된 내용이 사라집니다.")) {
       router.back();
     }
   };
diff --git a/src/app/reflections/page.tsx b/src/app/reflections/page.tsx
index 153e55f..9ebda6e 100644
--- a/src/app/reflections/page.tsx
+++ b/src/app/reflections/page.tsx
@@ -1,12 +1,12 @@
-'use client';
-
-import AuthGuard from '@/components/auth/AuthGuard';
-import ReflectionCard from '@/components/reflections/ReflectionCard';
-import { useAuth } from '@/hooks/auth';
-import { useKeywords } from '@/hooks/reflections/useKeywords';
-import { useReflections } from '@/hooks/reflections/useReflections';
-import { DateRangePeriod, ReflectionFilters } from '@/types/reflections';
-import { format, subMonths, subWeeks, subYears } from 'date-fns';
+"use client";
+
+import AuthGuard from "@/components/auth/AuthGuard";
+import ReflectionCard from "@/components/reflections/ReflectionCard";
+import { useAuth } from "@/hooks/auth";
+import { useKeywords } from "@/hooks/reflections/useKeywords";
+import { useReflections } from "@/hooks/reflections/useReflections";
+import { DateRangePeriod, ReflectionFilters } from "@/types/reflections";
+import { format, subMonths, subWeeks, subYears } from "date-fns";
 import {
   BarChart3,
   BookOpen,
@@ -16,10 +16,10 @@ import {
   Plus,
   RefreshCw,
   Search,
-} from 'lucide-react';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useMemo, useState } from 'react';
+} from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
 
 const ReflectionsPage = () => {
   const router = useRouter();
@@ -27,16 +27,16 @@ const ReflectionsPage = () => {
 
   // 기본 필터 상태
   const [filters, setFilters] = useState<ReflectionFilters>({
-    type: 'all',
+    type: "all",
     keywords: [],
-    searchTerm: '',
-    visibility: 'all',
+    searchTerm: "",
+    visibility: "all",
   });
 
   // 임의 기간 설정 상태
   const [showCustomPeriod, setShowCustomPeriod] = useState(false);
-  const [customStartDate, setCustomStartDate] = useState('');
-  const [customEndDate, setCustomEndDate] = useState('');
+  const [customStartDate, setCustomStartDate] = useState("");
+  const [customEndDate, setCustomEndDate] = useState("");
 
   // 전체 통계용 (필터 없음)
   const { statistics: totalStats } = useReflections({
@@ -57,34 +57,34 @@ const ReflectionsPage = () => {
     const today = new Date();
     return [
       {
-        label: '전체',
-        value: 'all',
-        startDate: '',
-        endDate: '',
+        label: "전체",
+        value: "all",
+        startDate: "",
+        endDate: "",
       },
       {
-        label: '최근 1주일',
-        value: '1week',
-        startDate: format(subWeeks(today, 1), 'yyyy-MM-dd'),
-        endDate: format(today, 'yyyy-MM-dd'),
+        label: "최근 1주일",
+        value: "1week",
+        startDate: format(subWeeks(today, 1), "yyyy-MM-dd"),
+        endDate: format(today, "yyyy-MM-dd"),
       },
       {
-        label: '최근 1개월',
-        value: '1month',
-        startDate: format(subMonths(today, 1), 'yyyy-MM-dd'),
-        endDate: format(today, 'yyyy-MM-dd'),
+        label: "최근 1개월",
+        value: "1month",
+        startDate: format(subMonths(today, 1), "yyyy-MM-dd"),
+        endDate: format(today, "yyyy-MM-dd"),
       },
       {
-        label: '최근 3개월',
-        value: '3months',
-        startDate: format(subMonths(today, 3), 'yyyy-MM-dd'),
-        endDate: format(today, 'yyyy-MM-dd'),
+        label: "최근 3개월",
+        value: "3months",
+        startDate: format(subMonths(today, 3), "yyyy-MM-dd"),
+        endDate: format(today, "yyyy-MM-dd"),
       },
       {
-        label: '최근 1년',
-        value: '1year',
-        startDate: format(subYears(today, 1), 'yyyy-MM-dd'),
-        endDate: format(today, 'yyyy-MM-dd'),
+        label: "최근 1년",
+        value: "1year",
+        startDate: format(subYears(today, 1), "yyyy-MM-dd"),
+        endDate: format(today, "yyyy-MM-dd"),
       },
     ];
   }, []);
@@ -106,7 +106,7 @@ const ReflectionsPage = () => {
   };
 
   const handlePeriodChange = (period: string) => {
-    if (period === 'custom') {
+    if (period === "custom") {
       // 임의기간 클릭 시
       if (showCustomPeriod || isCustomPeriod()) {
         // 이미 임의기간이 활성화되어 있으면 해제
@@ -130,7 +130,7 @@ const ReflectionsPage = () => {
     setShowCustomPeriod(false);
 
     const preset = periodPresets.find((p) => p.value === period);
-    if (preset && preset.value !== 'all') {
+    if (preset && preset.value !== "all") {
       // 같은 기간을 다시 클릭하면 해제
       if (filters.startDate === preset.startDate) {
         handleFiltersChange({
@@ -158,10 +158,10 @@ const ReflectionsPage = () => {
     }
   };
 
-  const handleTypeChange = (type: 'all' | 'gratitude' | 'reflection') => {
+  const handleTypeChange = (type: "all" | "gratitude" | "reflection") => {
     // 같은 타입을 다시 클릭하면 전체로 변경
-    if (filters.type === type && type !== 'all') {
-      handleFiltersChange({ type: 'all' });
+    if (filters.type === type && type !== "all") {
+      handleFiltersChange({ type: "all" });
     } else {
       handleFiltersChange({ type });
     }
@@ -187,21 +187,21 @@ const ReflectionsPage = () => {
 
   const clearFilters = () => {
     setFilters({
-      type: 'all',
+      type: "all",
       keywords: [],
-      searchTerm: '',
-      visibility: 'all',
+      searchTerm: "",
+      visibility: "all",
     });
     setShowCustomPeriod(false);
-    setCustomStartDate('');
-    setCustomEndDate('');
+    setCustomStartDate("");
+    setCustomEndDate("");
   };
 
   const hasActiveFilters =
-    filters.type !== 'all' ||
+    filters.type !== "all" ||
     (filters.keywords?.length ?? 0) > 0 ||
     filters.searchTerm ||
-    filters.visibility !== 'all' ||
+    filters.visibility !== "all" ||
     filters.startDate ||
     filters.endDate;
 
@@ -210,17 +210,17 @@ const ReflectionsPage = () => {
   };
 
   const handleDelete = (id: string) => {
-    if (confirm('정말 삭제하시겠습니까?')) {
+    if (confirm("정말 삭제하시겠습니까?")) {
       deleteReflection(id);
     }
   };
 
   // 현재 선택된 기간 표시
   const getCurrentPeriodLabel = () => {
-    if (!filters.startDate) return '전체';
+    if (!filters.startDate) return "전체";
     const preset = periodPresets.find((p) => p.startDate === filters.startDate);
     if (preset) return preset.label;
-    return '임의기간';
+    return "임의기간";
   };
 
   if (!user?.id) {
@@ -306,7 +306,7 @@ const ReflectionsPage = () => {
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
             <input
               type="text"
-              value={filters.searchTerm || ''}
+              value={filters.searchTerm || ""}
               onChange={(e) =>
                 handleFiltersChange({ searchTerm: e.target.value })
               }
@@ -342,23 +342,23 @@ const ReflectionsPage = () => {
                   key={preset.value}
                   onClick={() => handlePeriodChange(preset.value)}
                   className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors hover:cursor-pointer ${
-                    (preset.value === 'all' &&
+                    (preset.value === "all" &&
                       !filters.startDate &&
                       !showCustomPeriod) ||
                     preset.startDate === filters.startDate
-                      ? 'bg-accent-600 text-white'
-                      : 'bg-gray-100 text-gray-700 hover:bg-accent-100'
+                      ? "bg-accent-600 text-white"
+                      : "bg-gray-100 text-gray-700 hover:bg-accent-100"
                   }`}
                 >
                   {preset.label}
                 </button>
               ))}
               <button
-                onClick={() => handlePeriodChange('custom')}
+                onClick={() => handlePeriodChange("custom")}
                 className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors hover:cursor-pointer ${
                   showCustomPeriod || isCustomPeriod()
-                    ? 'bg-accent-600 text-white'
-                    : 'bg-gray-100 text-gray-700 hover:bg-accent-100'
+                    ? "bg-accent-600 text-white"
+                    : "bg-gray-100 text-gray-700 hover:bg-accent-100"
                 }`}
               >
                 임의기간
@@ -418,17 +418,17 @@ const ReflectionsPage = () => {
             </label>
             <div className="flex gap-2">
               {[
-                { value: 'all' as const, label: '전체' },
-                { value: 'gratitude' as const, label: '감사' },
-                { value: 'reflection' as const, label: '성찰' },
+                { value: "all" as const, label: "전체" },
+                { value: "gratitude" as const, label: "감사" },
+                { value: "reflection" as const, label: "성찰" },
               ].map((type) => (
                 <button
                   key={type.value}
                   onClick={() => handleTypeChange(type.value)}
                   className={`px-3 py-1 rounded-lg text-sm font-medium transition-colors hover:cursor-pointer ${
                     filters.type === type.value
-                      ? 'bg-accent-600 text-white'
-                      : 'bg-gray-100 text-gray-700 hover:bg-accent-100'
+                      ? "bg-accent-600 text-white"
+                      : "bg-gray-100 text-gray-700 hover:bg-accent-100"
                   }`}
                 >
                   {type.label}
@@ -450,15 +450,15 @@ const ReflectionsPage = () => {
                     onClick={() => handleKeywordToggle(keyword.name)}
                     className={`px-2 py-1 rounded-md text-xs font-medium transition-colors hover:cursor-pointer ${
                       filters.keywords?.includes(keyword.name)
-                        ? 'text-white'
-                        : 'hover:opacity-80'
+                        ? "text-white"
+                        : "hover:opacity-80"
                     }`}
                     style={{
                       backgroundColor: filters.keywords?.includes(keyword.name)
                         ? keyword.color
                         : `${keyword.color}20`,
                       color: filters.keywords?.includes(keyword.name)
-                        ? 'white'
+                        ? "white"
                         : keyword.color,
                     }}
                   >
@@ -476,7 +476,7 @@ const ReflectionsPage = () => {
             <div className="flex items-center gap-2">
               <Search className="w-5 h-5 text-accent-600" />
               <h2 className="text-lg font-semibold text-gray-900">
-                {hasActiveFilters ? '검색 결과' : '전체'}
+                {hasActiveFilters ? "검색 결과" : "전체"}
               </h2>
             </div>
             {hasActiveFilters && (
@@ -495,11 +495,11 @@ const ReflectionsPage = () => {
                     <span>{getCurrentPeriodLabel()}</span>
                   </>
                 )}
-                {filters.type !== 'all' && (
+                {filters.type !== "all" && (
                   <>
                     <span>•</span>
                     <span>
-                      {filters.type === 'gratitude' ? '감사' : '성찰'}
+                      {filters.type === "gratitude" ? "감사" : "성찰"}
                     </span>
                   </>
                 )}
@@ -574,13 +574,13 @@ const ReflectionsPage = () => {
               </div>
               <h3 className="text-xl font-medium text-gray-600 mb-2">
                 {hasActiveFilters
-                  ? '필터 조건에 맞는 회고가 없습니다.'
-                  : '아직 작성한 회고가 없습니다.'}
+                  ? "필터 조건에 맞는 회고가 없습니다."
+                  : "아직 작성한 회고가 없습니다."}
               </h3>
               <p className="text-gray-500 mb-6">
                 {hasActiveFilters
-                  ? '다른 필터 조건으로 시도해보세요.'
-                  : '첫 번째 회고를 작성해서 성장의 여정을 시작해보세요.'}
+                  ? "다른 필터 조건으로 시도해보세요."
+                  : "첫 번째 회고를 작성해서 성장의 여정을 시작해보세요."}
               </p>
 
               {hasActiveFilters ? (
diff --git a/src/components/budget/BudgetForm.tsx b/src/components/budget/BudgetForm.tsx
index c55027b..b9dc294 100644
--- a/src/components/budget/BudgetForm.tsx
+++ b/src/components/budget/BudgetForm.tsx
@@ -1,12 +1,12 @@
-'use client';
-
-import { useAuth } from '@/hooks/auth';
-import { supabase } from '@/lib/supabase';
-import { BudgetFormProps, Category } from '@/types/budget';
-import { Goal } from '@/types/goals';
-import { useQueryClient } from '@tanstack/react-query';
-import { format, parseISO } from 'date-fns';
-import { ko } from 'date-fns/locale';
+"use client";
+
+import { useAuth } from "@/hooks/auth";
+import { supabase } from "@/lib/supabase";
+import { BudgetFormProps, Category } from "@/types/budget";
+import { Goal } from "@/types/goals";
+import { useQueryClient } from "@tanstack/react-query";
+import { format, parseISO } from "date-fns";
+import { ko } from "date-fns/locale";
 import {
   ArrowLeft,
   ChevronDown,
@@ -18,10 +18,10 @@ import {
   TrendingDown,
   TrendingUp,
   X,
-} from 'lucide-react';
-import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import GoalUpdateModal, { CategoryChangeData } from './GoalUpdateModal';
+} from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import GoalUpdateModal, { CategoryChangeData } from "./GoalUpdateModal";
 
 export default function BudgetForm({
   selectedDate,
@@ -69,14 +69,14 @@ export default function BudgetForm({
     };
 
     window.addEventListener(
-      'goalUpdateNeeded',
-      handleGoalUpdateNeeded as EventListener
+      "goalUpdateNeeded",
+      handleGoalUpdateNeeded as EventListener,
     );
 
     return () => {
       window.removeEventListener(
-        'goalUpdateNeeded',
-        handleGoalUpdateNeeded as EventListener
+        "goalUpdateNeeded",
+        handleGoalUpdateNeeded as EventListener,
       );
     };
   }, []);
@@ -88,7 +88,7 @@ export default function BudgetForm({
     newCount: number;
     oldAmount: number;
     oldCount: number;
-    type: 'income' | 'expense';
+    type: "income" | "expense";
     goals: Goal[];
   }) => {
     setGoalUpdateModal({
@@ -107,7 +107,7 @@ export default function BudgetForm({
 
   const deletedCategories = allCategories.filter(
     (cat) =>
-      cat.type === `${newItem.type}_${newItem.categoryType}` && cat.is_deleted
+      cat.type === `${newItem.type}_${newItem.categoryType}` && cat.is_deleted,
   );
 
   // 삭제된 카테고리 관리
@@ -124,7 +124,7 @@ export default function BudgetForm({
     e.preventDefault();
 
     if (!newItem.newCategoryName.trim()) {
-      console.error('카테고리 이름이 비어있습니다');
+      console.error("카테고리 이름이 비어있습니다");
       return;
     }
 
@@ -134,18 +134,18 @@ export default function BudgetForm({
       (cat) =>
         cat.name === newItem.newCategoryName.trim() &&
         cat.type === categoryType &&
-        cat.is_deleted
+        cat.is_deleted,
     );
 
     if (existingCategory) {
       const shouldRestore = confirm(
-        `'${newItem.newCategoryName.trim()}' 카테고리를 복원하시겠습니까?`
+        `'${newItem.newCategoryName.trim()}' 카테고리를 복원하시겠습니까?`,
       );
 
       if (shouldRestore) {
         await handleRestoreCategory(existingCategory.id);
         onNewItemChange({
-          newCategoryName: '',
+          newCategoryName: "",
           category: existingCategory.name,
           isCreatingCategory: false,
         });
@@ -157,17 +157,17 @@ export default function BudgetForm({
   };
 
   // 날짜 네비게이션 핸들러 추가
-  const handleDateChange = (direction: 'prev' | 'next') => {
+  const handleDateChange = (direction: "prev" | "next") => {
     const currentDateObj = parseISO(selectedDate);
     const newDate = new Date(currentDateObj);
 
-    if (direction === 'prev') {
+    if (direction === "prev") {
       newDate.setDate(newDate.getDate() - 1);
     } else {
       newDate.setDate(newDate.getDate() + 1);
     }
 
-    const newDateString = format(newDate, 'yyyy-MM-dd');
+    const newDateString = format(newDate, "yyyy-MM-dd");
     router.push(`/budget/${newDateString}`);
   };
 
@@ -183,28 +183,28 @@ export default function BudgetForm({
     // 선택된 카테고리 해제
     const deletedCategory = allCategories.find((cat) => cat.id === categoryId);
     if (newItem.category === deletedCategory?.name) {
-      onNewItemChange({ category: '' });
+      onNewItemChange({ category: "" });
     }
 
     // 올바른 queryClient 인스턴스 사용
     queryClient.setQueryData(
-      ['categories', user?.id],
+      ["categories", user?.id],
       (oldData: Category[] = []) =>
         oldData.map((cat) =>
-          cat.id === categoryId ? { ...cat, is_deleted: true } : cat
-        )
+          cat.id === categoryId ? { ...cat, is_deleted: true } : cat,
+        ),
     );
 
     try {
       const { error } = await supabase
-        .from('categories')
+        .from("categories")
         .update({ is_deleted: true })
-        .eq('id', categoryId);
+        .eq("id", categoryId);
 
       if (error) throw error;
     } catch (error) {
-      console.error('카테고리 삭제 실패:', error);
-      queryClient.invalidateQueries({ queryKey: ['categories', user?.id] });
+      console.error("카테고리 삭제 실패:", error);
+      queryClient.invalidateQueries({ queryKey: ["categories", user?.id] });
     }
   };
 
@@ -212,24 +212,24 @@ export default function BudgetForm({
   const handleRestoreCategory = async (categoryId: string) => {
     // 낙관적 업데이트
     queryClient.setQueryData(
-      ['categories', user?.id],
+      ["categories", user?.id],
       (oldData: Category[] = []) =>
         oldData.map((cat) =>
-          cat.id === categoryId ? { ...cat, is_deleted: false } : cat
-        )
+          cat.id === categoryId ? { ...cat, is_deleted: false } : cat,
+        ),
     );
 
     try {
       const { error } = await supabase
-        .from('categories')
+        .from("categories")
         .update({ is_deleted: false })
-        .eq('id', categoryId);
+        .eq("id", categoryId);
 
       if (error) throw error;
     } catch (error) {
-      console.error('카테고리 복구 실패:', error);
+      console.error("카테고리 복구 실패:", error);
       // 실패 시 롤백
-      queryClient.invalidateQueries({ queryKey: ['categories', user?.id] });
+      queryClient.invalidateQueries({ queryKey: ["categories", user?.id] });
     }
   };
 
@@ -239,18 +239,18 @@ export default function BudgetForm({
         <div className="flex justify-between">
           <div className="flex items-center">
             <button
-              onClick={() => handleDateChange('prev')}
+              onClick={() => handleDateChange("prev")}
               className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
             >
               <ChevronLeft className="w-6 h-6" />
             </button>
 
             <h2 className="text-xl font-semibold">
-              {format(parseISO(selectedDate), 'M월 d일', { locale: ko })}
+              {format(parseISO(selectedDate), "M월 d일", { locale: ko })}
             </h2>
 
             <button
-              onClick={() => handleDateChange('next')}
+              onClick={() => handleDateChange("next")}
               className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
             >
               <ChevronRight className="w-6 h-6" />
@@ -289,15 +289,15 @@ export default function BudgetForm({
               type="button"
               onClick={() =>
                 onNewItemChange({
-                  type: 'income',
-                  categoryType: 'fixed',
-                  category: '',
+                  type: "income",
+                  categoryType: "fixed",
+                  category: "",
                 })
               }
               className={`flex-1 px-3 py-2 rounded-l-lg border text-sm transition-colors flex items-center justify-center gap-2 ${
-                newItem.type === 'income'
-                  ? 'bg-green-500 text-white border-green-500'
-                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+                newItem.type === "income"
+                  ? "bg-green-500 text-white border-green-500"
+                  : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
               }`}
             >
               <TrendingUp className="w-4 h-4" />
@@ -307,15 +307,15 @@ export default function BudgetForm({
               type="button"
               onClick={() =>
                 onNewItemChange({
-                  type: 'expense',
-                  categoryType: 'variable',
-                  category: '',
+                  type: "expense",
+                  categoryType: "variable",
+                  category: "",
                 })
               }
               className={`flex-1 px-3 py-2 rounded-r-lg border text-sm transition-colors flex items-center justify-center gap-2 ${
-                newItem.type === 'expense'
-                  ? 'bg-red-500 text-white border-red-500'
-                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+                newItem.type === "expense"
+                  ? "bg-red-500 text-white border-red-500"
+                  : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
               }`}
             >
               <TrendingDown className="w-4 h-4" />
@@ -328,12 +328,12 @@ export default function BudgetForm({
             <button
               type="button"
               onClick={() =>
-                onNewItemChange({ categoryType: 'fixed', category: '' })
+                onNewItemChange({ categoryType: "fixed", category: "" })
               }
               className={`flex-1 px-3  py-2 rounded-l-lg border text-sm transition-colors ${
-                newItem.categoryType === 'fixed'
-                  ? 'bg-accent-500 text-white border-accent-500'
-                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+                newItem.categoryType === "fixed"
+                  ? "bg-accent-500 text-white border-accent-500"
+                  : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
               }`}
             >
               고정
@@ -341,12 +341,12 @@ export default function BudgetForm({
             <button
               type="button"
               onClick={() =>
-                onNewItemChange({ categoryType: 'variable', category: '' })
+                onNewItemChange({ categoryType: "variable", category: "" })
               }
               className={`flex-1 px-3  py-2 rounded-r-lg border text-sm  transition-colors ${
-                newItem.categoryType === 'variable'
-                  ? 'bg-accent-500 text-white border-accent-500'
-                  : 'bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200'
+                newItem.categoryType === "variable"
+                  ? "bg-accent-500 text-white border-accent-500"
+                  : "bg-gray-100 text-gray-700 border-gray-300 hover:bg-gray-200"
               }`}
             >
               변동
@@ -385,7 +385,7 @@ export default function BudgetForm({
                         onClick={() =>
                           onNewItemChange({
                             isCreatingCategory: false,
-                            newCategoryName: '',
+                            newCategoryName: "",
                           })
                         }
                         className="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 text-sm transition-colors"
@@ -403,17 +403,17 @@ export default function BudgetForm({
                           (cat) =>
                             cat.type ===
                               `${newItem.type}_${newItem.categoryType}` &&
-                            !cat.is_deleted
+                            !cat.is_deleted,
                         )
                         .map((category) => (
                           <div
                             key={category.id}
                             className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-sm font-medium transition-all ${
                               newItem.category === category.name
-                                ? newItem.type === 'income'
-                                  ? 'bg-green-500 text-white'
-                                  : 'bg-red-500 text-white'
-                                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                ? newItem.type === "income"
+                                  ? "bg-green-500 text-white"
+                                  : "bg-red-500 text-white"
+                                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
                             }`}
                           >
                             <button
@@ -430,8 +430,8 @@ export default function BudgetForm({
                               onClick={() => handleDeleteCategory(category.id)}
                               className={`ml-1 w-4 h-4 flex items-center justify-center hover:opacity-70 ${
                                 newItem.category === category.name
-                                  ? 'text-white'
-                                  : 'text-gray-500 hover:text-red-500'
+                                  ? "text-white"
+                                  : "text-gray-500 hover:text-red-500"
                               }`}
                               title="카테고리 삭제"
                             >
@@ -538,9 +538,9 @@ export default function BudgetForm({
                 <button
                   type="submit"
                   className={`w-full rounded-lg px-3 py-1.5 disabled:bg-gray-300 disabled:cursor-not-allowed flex items-center justify-center gap-2 text-sm transition-colors ${
-                    newItem.type === 'income'
-                      ? 'bg-green-500 text-white hover:bg-green-600'
-                      : 'bg-red-500 text-white hover:bg-red-600'
+                    newItem.type === "income"
+                      ? "bg-green-500 text-white hover:bg-green-600"
+                      : "bg-red-500 text-white hover:bg-red-600"
                   }`}
                   disabled={
                     !newItem.name.trim() || !newItem.amount || !newItem.category
diff --git a/src/components/budget/ChallengeModal.tsx b/src/components/budget/ChallengeModal.tsx
index ca5ac04..d7149fb 100644
--- a/src/components/budget/ChallengeModal.tsx
+++ b/src/components/budget/ChallengeModal.tsx
@@ -1,10 +1,10 @@
-'use client';
+"use client";
 
-import { addDays, addMonths, format } from 'date-fns';
-import { useState } from 'react';
-import Modal from '../common/Modal';
-import { Calendar, Target, TrendingDown, TrendingUp } from 'lucide-react';
-import { ko } from 'date-fns/locale';
+import { addDays, addMonths, format } from "date-fns";
+import { useState } from "react";
+import Modal from "../common/Modal";
+import { Calendar, Target, TrendingDown, TrendingUp } from "lucide-react";
+import { ko } from "date-fns/locale";
 
 interface ChallengeFormData {
   title: string;
@@ -24,27 +24,27 @@ interface ChallengeModalProps {
   onSubmit: (
     data: ChallengeFormData & {
       category: string;
-      categoryType: 'income' | 'expense';
-    }
+      categoryType: "income" | "expense";
+    },
   ) => void;
   challengeData: {
     name: string;
     amount: number;
     category: string;
     count?: number;
-    type: 'income' | 'expense';
+    type: "income" | "expense";
   };
   isSubmitting?: boolean;
 }
 
 // 미리 정의된 기간 옵션
 const DURATION_PRESETS = [
-  { label: '1주일', value: '1week', days: 7 },
-  { label: '2주일', value: '2weeks', days: 14 },
-  { label: '1개월', value: '1month', days: 30 },
-  { label: '3개월', value: '3months', days: 90 },
-  { label: '6개월', value: '6months', days: 180 },
-  { label: '직접 입력', value: 'custom', days: 0 },
+  { label: "1주일", value: "1week", days: 7 },
+  { label: "2주일", value: "2weeks", days: 14 },
+  { label: "1개월", value: "1month", days: 30 },
+  { label: "3개월", value: "3months", days: 90 },
+  { label: "6개월", value: "6months", days: 180 },
+  { label: "직접 입력", value: "custom", days: 0 },
 ] as const;
 
 const ChallengeModal = ({
@@ -54,29 +54,29 @@ const ChallengeModal = ({
   challengeData,
   isSubmitting = false,
 }: ChallengeModalProps) => {
-  const isIncome = challengeData.type === 'income';
+  const isIncome = challengeData.type === "income";
 
   const [formData, setFormData] = useState<ChallengeFormData>({
-    title: '',
-    description: '',
-    reason: '',
+    title: "",
+    description: "",
+    reason: "",
     enableAmountGoal: true,
     enableCountGoal: isIncome
       ? (challengeData.count || 0) >= 1
       : (challengeData.count || 0) > 1,
     targetAmount: Math.max(
       1,
-      Math.floor(challengeData.amount * 0.1)
+      Math.floor(challengeData.amount * 0.1),
     ).toString(),
     targetCount: isIncome
       ? challengeData.count
         ? Math.max(challengeData.count + 1, 2).toString()
-        : '2'
+        : "2"
       : challengeData.count
         ? Math.max(1, challengeData.count - 1).toString()
-        : '1',
-    duration: '1month',
-    targetDate: format(addMonths(new Date(), 1), 'yyyy-MM-dd'),
+        : "1",
+    duration: "1month",
+    targetDate: format(addMonths(new Date(), 1), "yyyy-MM-dd"),
   });
 
   const [isCustomDuration, setIsCustomDuration] = useState(false);
@@ -84,21 +84,21 @@ const ChallengeModal = ({
   // 폼 데이터 업데이트 핸들러
   const handleFormDataChange = <K extends keyof ChallengeFormData>(
     field: K,
-    value: ChallengeFormData[K]
+    value: ChallengeFormData[K],
   ) => {
     setFormData((prev) => ({ ...prev, [field]: value }));
   };
 
   // 체크박스 핸들러
   const handleCheckboxChange =
-    (field: 'enableAmountGoal' | 'enableCountGoal') =>
+    (field: "enableAmountGoal" | "enableCountGoal") =>
     (e: React.ChangeEvent<HTMLInputElement>) => {
       handleFormDataChange(field, e.target.checked);
     };
 
   // 기간 선택 핸들러
   const handleDurationChange = (duration: string) => {
-    const isCustom = duration === 'custom';
+    const isCustom = duration === "custom";
     setIsCustomDuration(isCustom);
 
     if (!isCustom) {
@@ -108,7 +108,7 @@ const ChallengeModal = ({
         setFormData((prev) => ({
           ...prev,
           duration,
-          targetDate: format(targetDate, 'yyyy-MM-dd'),
+          targetDate: format(targetDate, "yyyy-MM-dd"),
         }));
       }
     } else {
@@ -158,26 +158,26 @@ const ChallengeModal = ({
   // 모달이 닫힐 때 폼 초기화
   const handleClose = () => {
     setFormData({
-      title: '',
-      description: '',
-      reason: '',
+      title: "",
+      description: "",
+      reason: "",
       enableAmountGoal: true,
       enableCountGoal: isIncome
         ? (challengeData.count || 0) >= 1
         : (challengeData.count || 0) > 1,
       targetAmount: Math.max(
         1,
-        Math.floor(challengeData.amount * 0.1)
+        Math.floor(challengeData.amount * 0.1),
       ).toString(),
       targetCount: isIncome
         ? challengeData.count
           ? Math.max(challengeData.count + 1, 2).toString()
-          : '2'
+          : "2"
         : challengeData.count
           ? Math.max(1, challengeData.count - 1).toString()
-          : '1',
-      duration: '1month',
-      targetDate: format(addMonths(new Date(), 1), 'yyyy-MM-dd'),
+          : "1",
+      duration: "1month",
+      targetDate: format(addMonths(new Date(), 1), "yyyy-MM-dd"),
     });
     setIsCustomDuration(false);
     onClose();
@@ -211,7 +211,7 @@ const ChallengeModal = ({
             <input
               type="text"
               value={formData.title}
-              onChange={(e) => handleFormDataChange('title', e.target.value)}
+              onChange={(e) => handleFormDataChange("title", e.target.value)}
               placeholder="예: 카페 지출 줄이기 챌린지"
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm"
               required
@@ -242,9 +242,9 @@ const ChallengeModal = ({
               </div>
 
               <span
-                className={`font-semibold ${isIncome ? 'text-green-600' : 'text-red-600'}`}
+                className={`font-semibold ${isIncome ? "text-green-600" : "text-red-600"}`}
               >
-                {isIncome ? '+' : '-'}
+                {isIncome ? "+" : "-"}
                 {challengeData.amount.toLocaleString()}원
               </span>
             </div>
@@ -255,7 +255,7 @@ const ChallengeModal = ({
                 <input
                   type="checkbox"
                   checked={formData.enableAmountGoal}
-                  onChange={handleCheckboxChange('enableAmountGoal')}
+                  onChange={handleCheckboxChange("enableAmountGoal")}
                   className="mt-1 w-4 h-4 text-accent-600 bg-gray-100 border-gray-300 rounded focus:ring-accent-500"
                 />
                 <div className="flex-1">
@@ -268,7 +268,7 @@ const ChallengeModal = ({
                           type="number"
                           value={formData.targetAmount}
                           onChange={(e) =>
-                            handleFormDataChange('targetAmount', e.target.value)
+                            handleFormDataChange("targetAmount", e.target.value)
                           }
                           placeholder="목표금액"
                           max={challengeData.amount}
@@ -282,21 +282,21 @@ const ChallengeModal = ({
                       <div
                         className={`text-xs ${
                           Number(formData.targetAmount) >= challengeData.amount
-                            ? 'text-red-500'
-                            : 'text-gray-400'
+                            ? "text-red-500"
+                            : "text-gray-400"
                         }`}
                       >
                         {isIncome ? (
                           // 수입
                           <>
-                            현재보다{' '}
+                            현재보다{" "}
                             {Math.round(
                               (Number(formData.targetAmount) /
                                 challengeData.amount) *
-                                100
+                                100,
                             )}
                             % 늘리기 ({challengeData.amount.toLocaleString()}원
-                            →{' '}
+                            →{" "}
                             {(
                               challengeData.amount +
                               Number(formData.targetAmount)
@@ -313,14 +313,14 @@ const ChallengeModal = ({
                           </>
                         ) : (
                           <>
-                            현재 지출의{' '}
+                            현재 지출의{" "}
                             {Math.round(
                               (Number(formData.targetAmount) /
                                 challengeData.amount) *
-                                100
+                                100,
                             )}
                             % 절약 목표 ({challengeData.amount.toLocaleString()}
-                            원 →{' '}
+                            원 →{" "}
                             {(
                               challengeData.amount -
                               Number(formData.targetAmount)
@@ -341,7 +341,7 @@ const ChallengeModal = ({
                 <input
                   type="checkbox"
                   checked={formData.enableCountGoal}
-                  onChange={handleCheckboxChange('enableCountGoal')}
+                  onChange={handleCheckboxChange("enableCountGoal")}
                   disabled={
                     isIncome
                       ? !challengeData.count || challengeData.count < 1
@@ -353,8 +353,8 @@ const ChallengeModal = ({
                         ? !challengeData.count || challengeData.count < 1
                         : !challengeData.count || challengeData.count <= 1
                     )
-                      ? 'opacity-50 cursor-not-allowed'
-                      : ''
+                      ? "opacity-50 cursor-not-allowed"
+                      : ""
                   }`}
                 />
                 <div className="flex-1">
@@ -374,7 +374,7 @@ const ChallengeModal = ({
                           type="number"
                           value={formData.targetCount}
                           onChange={(e) =>
-                            handleFormDataChange('targetCount', e.target.value)
+                            handleFormDataChange("targetCount", e.target.value)
                           }
                           placeholder="목표 횟수"
                           min={
@@ -403,7 +403,7 @@ const ChallengeModal = ({
                           ? isIncome
                             ? `현재 월 ${challengeData.count}회에서 ${formData.targetCount}회로 늘리기 (${Math.round(((Number(formData.targetCount) - challengeData.count) / challengeData.count) * 100)}% 증가)`
                             : `현재 월 ${challengeData.count}회에서 ${formData.targetCount}회로 줄이기 (${Math.round(((challengeData.count - Number(formData.targetCount)) / challengeData.count) * 100)}% 감소)`
-                          : ''}
+                          : ""}
                       </div>
                     </div>
                   )}
@@ -428,8 +428,8 @@ const ChallengeModal = ({
                     px-3 py-2 text-xs font-medium rounded-lg border transition-all duration-200
                     ${
                       formData.duration === preset.value
-                        ? 'bg-accent-100 border-accent-300 text-accent-700'
-                        : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+                        ? "bg-accent-100 border-accent-300 text-accent-700"
+                        : "bg-white border-gray-300 text-gray-700 hover:bg-gray-50"
                     }
                   `}
                 >
@@ -447,9 +447,9 @@ const ChallengeModal = ({
                   type="date"
                   value={formData.targetDate}
                   onChange={(e) =>
-                    handleFormDataChange('targetDate', e.target.value)
+                    handleFormDataChange("targetDate", e.target.value)
                   }
-                  min={format(new Date(), 'yyyy-MM-dd')}
+                  min={format(new Date(), "yyyy-MM-dd")}
                   className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm"
                 />
               </div>
@@ -458,12 +458,12 @@ const ChallengeModal = ({
             <div className="text-sm text-gray-600 bg-blue-50 rounded-lg p-3 flex items-center gap-2">
               <Calendar className="w-4 h-4 text-blue-600" />
               <span>
-                종료일:{' '}
+                종료일:{" "}
                 <strong>
                   {format(
                     new Date(formData.targetDate),
-                    'yyyy년 M월 d일 (EEEE)',
-                    { locale: ko }
+                    "yyyy년 M월 d일 (EEEE)",
+                    { locale: ko },
                   )}
                 </strong>
               </span>
@@ -477,7 +477,7 @@ const ChallengeModal = ({
             </label>
             <textarea
               value={formData.reason}
-              onChange={(e) => handleFormDataChange('reason', e.target.value)}
+              onChange={(e) => handleFormDataChange("reason", e.target.value)}
               placeholder="예: 매월 카페 지출이 너무 많아서 가계에 부담이 되고 있어요. 건강한 소비 습관을 만들고 싶습니다."
               rows={3}
               className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-500 focus:border-accent-500 text-sm resize-none"
@@ -493,7 +493,7 @@ const ChallengeModal = ({
             <textarea
               value={formData.description}
               onChange={(e) =>
-                handleFormDataChange('description', e.target.value)
+                handleFormDataChange("description", e.target.value)
               }
               placeholder="예: 주 3회 이상 카페를 이용하지 않기, 집에서 커피 내려먹기 등 구체적인 실행 방법을 적어보세요."
               rows={2}
diff --git a/src/components/budget/GoalUpdateModal.tsx b/src/components/budget/GoalUpdateModal.tsx
index a6a3c84..c79a8a0 100644
--- a/src/components/budget/GoalUpdateModal.tsx
+++ b/src/components/budget/GoalUpdateModal.tsx
@@ -1,7 +1,7 @@
-import { Goal } from '@/types/goals';
-import Modal from '../common/Modal';
-import { Target, TrendingDown, TrendingUp } from 'lucide-react';
-import { useRouter } from 'next/navigation';
+import { Goal } from "@/types/goals";
+import Modal from "../common/Modal";
+import { Target, TrendingDown, TrendingUp } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 export interface CategoryChangeData {
   categoryName: string;
@@ -9,7 +9,7 @@ export interface CategoryChangeData {
   newCount: number;
   oldAmount: number;
   oldCount: number;
-  type: 'income' | 'expense';
+  type: "income" | "expense";
 }
 
 interface GoalUpdateModalProps {
@@ -56,7 +56,7 @@ const GoalUpdateModal = ({
         {/* 변경사항 요약 */}
         <div className="bg-gray-50 rounded-lg p-4">
           <h4 className="font-medium text-gray-800 mb-2 flex items-center gap-2">
-            {categoryChange.type === 'income' ? (
+            {categoryChange.type === "income" ? (
               <TrendingUp className="w-4 h-4 text-green-600" />
             ) : (
               <TrendingDown className="w-4 h-4 text-red-600" />
@@ -68,19 +68,19 @@ const GoalUpdateModal = ({
             <div className="flex justify-between">
               <span className="text-gray-600">금액:</span>
               <span>
-                {categoryChange.oldAmount.toLocaleString()}원 →{' '}
+                {categoryChange.oldAmount.toLocaleString()}원 →{" "}
                 {categoryChange.newAmount.toLocaleString()}원
                 <span
                   className={`ml-1 ${
                     categoryChange.newAmount > categoryChange.oldAmount
-                      ? 'text-green-600'
-                      : 'text-red-600'
+                      ? "text-green-600"
+                      : "text-red-600"
                   }`}
                 >
                   (
                   {categoryChange.newAmount > categoryChange.oldAmount
-                    ? '+'
-                    : ''}
+                    ? "+"
+                    : ""}
                   {(
                     ((categoryChange.newAmount - categoryChange.oldAmount) /
                       categoryChange.oldAmount) *
@@ -97,12 +97,12 @@ const GoalUpdateModal = ({
                 <span
                   className={`ml-1 ${
                     categoryChange.newCount > categoryChange.oldCount
-                      ? 'text-green-600'
-                      : 'text-red-600'
+                      ? "text-green-600"
+                      : "text-red-600"
                   }`}
                 >
                   (
-                  {categoryChange.newCount > categoryChange.oldCount ? '+' : ''}
+                  {categoryChange.newCount > categoryChange.oldCount ? "+" : ""}
                   {categoryChange.newCount - categoryChange.oldCount})
                 </span>
               </span>
@@ -142,11 +142,11 @@ const GoalUpdateModal = ({
 
                 <div className="flex flex-col items-end gap-1">
                   <span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">
-                    {goal.challenge_mode === 'both'
-                      ? '금액 + 횟수'
-                      : goal.challenge_mode === 'amount'
-                        ? '금액'
-                        : '횟수'}
+                    {goal.challenge_mode === "both"
+                      ? "금액 + 횟수"
+                      : goal.challenge_mode === "amount"
+                        ? "금액"
+                        : "횟수"}
                   </span>
                   <span className="text-xs text-blue-600">클릭하여 수정</span>
                 </div>
diff --git a/src/components/goals/ActionButton.tsx b/src/components/goals/ActionButton.tsx
index 55b9161..a8f0c3c 100644
--- a/src/components/goals/ActionButton.tsx
+++ b/src/components/goals/ActionButton.tsx
@@ -1,4 +1,4 @@
-import { Edit, Trash2 } from 'lucide-react';
+import { Edit, Trash2 } from "lucide-react";
 
 interface ActionButtonsProps {
   goalStatus: string;
@@ -15,7 +15,7 @@ const ActionButtons = ({
 }: ActionButtonsProps) => {
   return (
     <div className="flex gap-3">
-      {goalStatus === 'active' && (
+      {goalStatus === "active" && (
         <button
           onClick={onEdit}
           className="flex items-center gap-2 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-all duration-200 transform hover:-translate-y-1 shadow-lg hover:shadow-xl hover:cursor-pointer"
@@ -30,12 +30,12 @@ const ActionButtons = ({
         disabled={isDeleting}
         className={`flex items-center gap-2 px-4 py-2 font-semibold rounded-lg transition-all duration-200 transform shadow-lg ${
           isDeleting
-            ? 'bg-gray-400 cursor-not-allowed'
-            : 'bg-red-500 hover:bg-red-600 text-white hover:-translate-y-1 hover:shadow-xl hover:cursor-pointer'
+            ? "bg-gray-400 cursor-not-allowed"
+            : "bg-red-500 hover:bg-red-600 text-white hover:-translate-y-1 hover:shadow-xl hover:cursor-pointer"
         }`}
       >
         <Trash2 className="w-4 h-4" />
-        {isDeleting ? '삭제 중...' : '삭제'}
+        {isDeleting ? "삭제 중..." : "삭제"}
       </button>
     </div>
   );
diff --git a/src/components/goals/GoalCard.tsx b/src/components/goals/GoalCard.tsx
index 6fccdb2..76f309d 100644
--- a/src/components/goals/GoalCard.tsx
+++ b/src/components/goals/GoalCard.tsx
@@ -1,23 +1,23 @@
-'use client';
+"use client";
 
-import { Goal } from '@/types/goals';
+import { Goal } from "@/types/goals";
 import {
   getChallengeMode,
   getDaysLeft,
   getGoalProgress,
   getTypeText,
-} from '@/utils/goals/goalsHelpers';
-import { useRouter } from 'next/navigation';
-import StatusBadge from './StatusBadge';
-import { Calendar, CheckCircle, Star, Target } from 'lucide-react';
-import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
+} from "@/utils/goals/goalsHelpers";
+import { useRouter } from "next/navigation";
+import StatusBadge from "./StatusBadge";
+import { Calendar, CheckCircle, Star, Target } from "lucide-react";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
 
 const GoalCard = ({ goal }: { goal: Goal }) => {
   const router = useRouter();
   const progress = getGoalProgress(goal);
   const daysLeft = getDaysLeft(goal.target_date);
-  const isCompleted = goal.status === 'completed';
+  const isCompleted = goal.status === "completed";
 
   const handleCardClick = () => {
     router.push(`/goals/${goal.id}`);
@@ -131,8 +131,8 @@ const GoalCard = ({ goal }: { goal: Goal }) => {
                 <div
                   className={`absolute left-0 top-0 h-full rounded-full transition-all duration-1000 ease-out ${
                     progress.overallProgress >= 100
-                      ? 'bg-gradient-to-r from-green-400 to-emerald-500'
-                      : 'bg-gradient-to-r from-accent-400 to-accent-500'
+                      ? "bg-gradient-to-r from-green-400 to-emerald-500"
+                      : "bg-gradient-to-r from-accent-400 to-accent-500"
                   }`}
                   style={{
                     width: `${Math.min(progress.overallProgress, 100)}%`,
@@ -148,7 +148,7 @@ const GoalCard = ({ goal }: { goal: Goal }) => {
           {/* 날짜 정보 */}
           <div className="flex justify-between items-center text-xs text-gray-500 pt-2 border-t border-gray-100">
             <span>
-              시작: {format(new Date(goal.created_at), 'MM.dd', { locale: ko })}
+              시작: {format(new Date(goal.created_at), "MM.dd", { locale: ko })}
             </span>
             {goal.target_date && (
               <div className="flex items-center gap-1">
@@ -156,13 +156,13 @@ const GoalCard = ({ goal }: { goal: Goal }) => {
                 <span
                   className={
                     daysLeft !== null && daysLeft <= 7
-                      ? 'text-orange-600 font-medium'
-                      : ''
+                      ? "text-orange-600 font-medium"
+                      : ""
                   }
                 >
                   {daysLeft !== null && daysLeft > 0
                     ? `${daysLeft}일 남음`
-                    : format(new Date(goal.target_date), 'MM.dd', {
+                    : format(new Date(goal.target_date), "MM.dd", {
                         locale: ko,
                       })}
                 </span>
diff --git a/src/components/goals/InfoSection.tsx b/src/components/goals/InfoSection.tsx
index 76c9a33..d526250 100644
--- a/src/components/goals/InfoSection.tsx
+++ b/src/components/goals/InfoSection.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 interface InfoSectionProps {
   title: string;
@@ -35,13 +35,13 @@ export const InfoItem = ({
   important = false,
 }: InfoItemProps) => {
   return (
-    <div className={'flex justify-between items-center'}>
+    <div className={"flex justify-between items-center"}>
       <span className="text-gray-600 font-medium">{label}</span>
       <span
         className={`${
           important
-            ? 'text-lg font-bold text-accent-600'
-            : 'text-gray-900 font-semibold'
+            ? "text-lg font-bold text-accent-600"
+            : "text-gray-900 font-semibold"
         }`}
       >
         {value}
diff --git a/src/components/goals/ProgressBar.tsx b/src/components/goals/ProgressBar.tsx
index ea83ba5..d604b05 100644
--- a/src/components/goals/ProgressBar.tsx
+++ b/src/components/goals/ProgressBar.tsx
@@ -11,14 +11,14 @@ const ProgressBar = ({
   target,
   type,
   title,
-  unit = '',
+  unit = "",
 }: ProgressBarProps) => {
   let progress: number;
   let statusMessage: string;
   let barColor: string;
   let targetLabel: string;
 
-  if (type === 'reduce_expense') {
+  if (type === "reduce_expense") {
     // 지출 챌린지: 한도 대비 사용량
     progress = Math.round((current / target) * 100);
     const remaining = Math.max(0, target - current);
@@ -26,15 +26,15 @@ const ProgressBar = ({
       remaining > 0
         ? `${remaining.toLocaleString()}${unit} 더 사용 가능`
         : `${(current - target).toLocaleString()}${unit} 초과`;
-    targetLabel = '한도';
+    targetLabel = "한도";
 
     // 사용량에 따른 색상
     if (progress > 100) {
-      barColor = '#ef4444'; // 빨간색 (초과)
+      barColor = "#ef4444"; // 빨간색 (초과)
     } else if (progress > 80) {
-      barColor = '#f59e0b'; // 노란색 (주의)
+      barColor = "#f59e0b"; // 노란색 (주의)
     } else {
-      barColor = '#22c55e'; // 초록색 (양호)
+      barColor = "#22c55e"; // 초록색 (양호)
     }
   } else {
     // 수입 챌린지: 기존 로직
@@ -44,21 +44,21 @@ const ProgressBar = ({
       remaining > 0
         ? `목표까지 ${remaining.toLocaleString()}${unit} 남음`
         : `목표 달성!`;
-    targetLabel = '목표';
-    barColor = progress >= 100 ? '#22c55e' : '#3b82f6';
+    targetLabel = "목표";
+    barColor = progress >= 100 ? "#22c55e" : "#3b82f6";
   }
 
   return (
     <div className="space-y-3">
       <div className="flex justify-between items-center">
         <h3 className="text-lg font-semibold text-gray-900">
-          {type === 'reduce_expense' ? '지출 한도 사용률' : title}
+          {type === "reduce_expense" ? "지출 한도 사용률" : title}
         </h3>
         <span
           className={`text-2xl font-bold ${
-            type === 'reduce_expense' && progress > 100
-              ? 'text-red-600'
-              : 'text-accent-600'
+            type === "reduce_expense" && progress > 100
+              ? "text-red-600"
+              : "text-accent-600"
           }`}
         >
           {progress}%
@@ -87,16 +87,16 @@ const ProgressBar = ({
           />
           {progress >= 100 && (
             <div className="absolute right-2 top-0.5 text-white text-xs">
-              {type === 'reduce_expense' ? '!' : '✓'}
+              {type === "reduce_expense" ? "!" : "✓"}
             </div>
           )}
         </div>
 
         <p
           className={`text-xs text-center ${
-            type === 'reduce_expense' && progress > 100
-              ? 'text-red-600 font-medium'
-              : 'text-gray-500'
+            type === "reduce_expense" && progress > 100
+              ? "text-red-600 font-medium"
+              : "text-gray-500"
           }`}
         >
           {statusMessage}
diff --git a/src/components/goals/StatCard.tsx b/src/components/goals/StatCard.tsx
index 7ad58ed..9e8214e 100644
--- a/src/components/goals/StatCard.tsx
+++ b/src/components/goals/StatCard.tsx
@@ -2,21 +2,21 @@ const StatCard = ({
   icon,
   title,
   value,
-  color = 'accent',
+  color = "accent",
   subtitle,
 }: {
   icon: React.ReactNode;
   title: string;
   value: number | string;
-  color?: 'accent' | 'green' | 'yellow' | 'purple' | 'red';
+  color?: "accent" | "green" | "yellow" | "purple" | "red";
   subtitle?: string;
 }) => {
   const colorClasses = {
-    accent: 'from-accent-500 to-accent-400 text-white',
-    green: 'from-green-500 to-emerald-400 text-white',
-    yellow: 'from-yellow-500 to-orange-400 text-white',
-    purple: 'from-purple-500 to-pink-400 text-white',
-    red: 'from-red-500 to-pink-400 text-white',
+    accent: "from-accent-500 to-accent-400 text-white",
+    green: "from-green-500 to-emerald-400 text-white",
+    yellow: "from-yellow-500 to-orange-400 text-white",
+    purple: "from-purple-500 to-pink-400 text-white",
+    red: "from-red-500 to-pink-400 text-white",
   };
 
   return (
diff --git a/src/components/goals/StatusBadge.tsx b/src/components/goals/StatusBadge.tsx
index 3daaf4f..ba2b75c 100644
--- a/src/components/goals/StatusBadge.tsx
+++ b/src/components/goals/StatusBadge.tsx
@@ -2,8 +2,8 @@ import {
   getDaysLeft,
   getStatusColorClass,
   getStatusText,
-} from '@/utils/goals/goalsHelpers';
-import { CheckCircle, Clock, Pause, X, Target } from 'lucide-react';
+} from "@/utils/goals/goalsHelpers";
+import { CheckCircle, Clock, Pause, X, Target } from "lucide-react";
 
 interface StatusBadgeProps {
   status: string;
@@ -19,13 +19,13 @@ const StatusBadge = ({ status, targetDate, className }: StatusBadgeProps) => {
   // 아이콘 선택
   const getStatusIcon = () => {
     switch (status) {
-      case 'active':
+      case "active":
         return <Target className="w-4 h-4" />;
-      case 'completed':
+      case "completed":
         return <CheckCircle className="w-4 h-4" />;
-      case 'paused':
+      case "paused":
         return <Pause className="w-4 h-4" />;
-      case 'cancelled':
+      case "cancelled":
         return <X className="w-4 h-4" />;
       default:
         return <Target className="w-4 h-4" />;
@@ -34,7 +34,7 @@ const StatusBadge = ({ status, targetDate, className }: StatusBadgeProps) => {
 
   // 긴급도에 따른 추가 배지
   const getUrgencyBadge = () => {
-    if (status !== 'active' || !daysLeft) return null;
+    if (status !== "active" || !daysLeft) return null;
 
     if (daysLeft <= 3 && daysLeft > 0) {
       return (
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index bf5b63c..582c3a8 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import Link from "next/link";
+import { usePathname } from "next/navigation";
 import {
   BarChart3,
   Target,
@@ -12,9 +12,9 @@ import {
   User,
   Settings,
   LogOut,
-} from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { useAuth } from '@/hooks/auth';
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useAuth } from "@/hooks/auth";
 
 export default function Header() {
   const pathname = usePathname();
@@ -34,46 +34,46 @@ export default function Header() {
       }
     };
 
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
   // preview 페이지에서는 헤더를 렌더링하지 않음
-  if (pathname === '/preview' || pathname?.startsWith('/auth/')) {
+  if (pathname === "/preview" || pathname?.startsWith("/auth/")) {
     return null;
   }
 
   // 네비게이션 메뉴 항목
   const navigationItems = [
     {
-      name: '가계부',
-      href: '/budget',
+      name: "가계부",
+      href: "/budget",
       icon: BarChart3,
-      description: '지출 관리',
+      description: "지출 관리",
     },
     {
-      name: '목표',
-      href: '/goals',
+      name: "목표",
+      href: "/goals",
       icon: Target,
-      description: '목표 설정',
+      description: "목표 설정",
     },
     {
-      name: '질문',
-      href: '/questions',
+      name: "질문",
+      href: "/questions",
       icon: MessageSquare,
-      description: '성찰 질문',
+      description: "성찰 질문",
     },
     {
-      name: '회고',
-      href: '/reflections',
+      name: "회고",
+      href: "/reflections",
       icon: BookOpen,
-      description: '일상 회고',
+      description: "일상 회고",
     },
   ];
 
   // 현재 경로가 활성 상태인지 확인
   const isActiveRoute = (href: string) => {
-    return pathname === href || pathname?.startsWith(href + '/');
+    return pathname === href || pathname?.startsWith(href + "/");
   };
 
   // 로그아웃 처리
@@ -82,15 +82,15 @@ export default function Header() {
       logout();
       setIsUserMenuOpen(false);
       // 로그아웃 후 즉시 메인화면으로 이동
-      window.location.href = '/';
+      window.location.href = "/";
     } catch (error) {
-      console.error('로그아웃 실패:', error);
+      console.error("로그아웃 실패:", error);
     }
   };
 
   // 사용자 이름 표시
   const getUserDisplayName = () => {
-    if (!user) return '사용자';
+    if (!user) return "사용자";
 
     // 프로필에서 우선 조회
     if (profile?.nickname) return profile.nickname;
@@ -101,7 +101,7 @@ export default function Header() {
     const name = user.user_metadata?.name;
     const email = user.email;
 
-    return nickname || name || email?.split('@')[0] || '사용자';
+    return nickname || name || email?.split("@")[0] || "사용자";
   };
 
   return (
@@ -111,7 +111,7 @@ export default function Header() {
           {/* 로고 */}
           <div className="flex items-center">
             <Link
-              href={isAuthenticated ? '/dashboard' : '/'}
+              href={isAuthenticated ? "/dashboard" : "/"}
               className="text-xl mobile:text-2xl font-bold text-accent-700 hover:text-accent-800 transition-colors"
             >
               DaylyLog
@@ -133,8 +133,8 @@ export default function Header() {
                       flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200 text-sm laptop:text-base
                       ${
                         isActive
-                          ? 'bg-accent-100 text-accent-700 font-semibold'
-                          : 'text-accent-600 hover:text-accent-800 hover:bg-accent-50'
+                          ? "bg-accent-100 text-accent-700 font-semibold"
+                          : "text-accent-600 hover:text-accent-800 hover:bg-accent-50"
                       }
                     `}
                   >
@@ -239,8 +239,8 @@ export default function Header() {
                       flex items-center gap-3 px-3 py-3 rounded-lg transition-all duration-200
                       ${
                         isActive
-                          ? 'bg-accent-100 text-accent-700 font-semibold'
-                          : 'text-accent-600 hover:text-accent-800 hover:bg-accent-50'
+                          ? "bg-accent-100 text-accent-700 font-semibold"
+                          : "text-accent-600 hover:text-accent-800 hover:bg-accent-50"
                       }
                     `}
                   >
diff --git a/src/components/reflections/ReflectionCard.tsx b/src/components/reflections/ReflectionCard.tsx
index 64644a2..8e07824 100644
--- a/src/components/reflections/ReflectionCard.tsx
+++ b/src/components/reflections/ReflectionCard.tsx
@@ -1,17 +1,17 @@
-'use client';
+"use client";
 
-import { ReflectionWithKeywords } from '@/types/reflections/ui';
+import { ReflectionWithKeywords } from "@/types/reflections/ui";
 import {
   getReflectionTypeBgColor,
   getReflectionTypeColor,
   getReflectionTypeLabel,
   getVisibilityLabel,
   getVisibilityStatus,
-} from '@/utils/reflections/helpers';
-import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
-import { Calendar, Edit, Heart, Lightbulb, Trash2 } from 'lucide-react';
-import Link from 'next/link';
+} from "@/utils/reflections/helpers";
+import { format } from "date-fns";
+import { ko } from "date-fns/locale";
+import { Calendar, Edit, Heart, Lightbulb, Trash2 } from "lucide-react";
+import Link from "next/link";
 
 interface ReflectionCardProps {
   reflection: ReflectionWithKeywords;
@@ -24,7 +24,7 @@ const ReflectionCard = ({
   onEdit,
   onDelete,
 }: ReflectionCardProps) => {
-  const isGratitude = reflection.category?.name === 'gratitude';
+  const isGratitude = reflection.category?.name === "gratitude";
   const TypeIcon = isGratitude ? Heart : Lightbulb;
 
   const handleEdit = (e: React.MouseEvent) => {
@@ -48,10 +48,10 @@ const ReflectionCard = ({
       <div className="flex justify-between mb-3">
         <div className="flex items-center gap-2">
           <div
-            className={`p-2 rounded-lg ${getReflectionTypeBgColor(reflection.category?.name || 'gratitude')}`}
+            className={`p-2 rounded-lg ${getReflectionTypeBgColor(reflection.category?.name || "gratitude")}`}
           >
             <TypeIcon
-              className={`w-4 h-4 ${getReflectionTypeColor(reflection.category?.name || 'gratitude')}`}
+              className={`w-4 h-4 ${getReflectionTypeColor(reflection.category?.name || "gratitude")}`}
             />
           </div>
           <div className="flex flex-col gap-1">
@@ -59,27 +59,27 @@ const ReflectionCard = ({
               <span
                 title={getVisibilityLabel(
                   reflection.is_public,
-                  reflection.is_neighbor_visible
+                  reflection.is_neighbor_visible,
                 )}
               >
                 {getVisibilityStatus(
                   reflection.is_public,
-                  reflection.is_neighbor_visible
+                  reflection.is_neighbor_visible,
                 )}
               </span>
               <span
-                className={`text-sm font-medium ${getReflectionTypeColor(reflection.category?.name || 'gratitude')}`}
+                className={`text-sm font-medium ${getReflectionTypeColor(reflection.category?.name || "gratitude")}`}
               >
                 {reflection.category?.display_name ||
                   getReflectionTypeLabel(
-                    reflection.category?.name || 'gratitude'
+                    reflection.category?.name || "gratitude",
                   )}
               </span>
             </div>
 
             <div className="flex items-center gap-2 text-xs text-gray-500">
               <Calendar className="w-3 h-3" />
-              {format(new Date(reflection.date), 'yyyy. M. d.', {
+              {format(new Date(reflection.date), "yyyy. M. d.", {
                 locale: ko,
               })}
             </div>
@@ -114,7 +114,7 @@ const ReflectionCard = ({
             {reflection.title}
           </h3>
         ) : (
-          <h3 className="text-lg font-medium min-h-[18px]">{''}</h3>
+          <h3 className="text-lg font-medium min-h-[18px]">{""}</h3>
         )}
 
         {/* 내용 */}
diff --git a/src/hooks/budget/useBudget.ts b/src/hooks/budget/useBudget.ts
index 8a68fc9..f0fa6fe 100644
--- a/src/hooks/budget/useBudget.ts
+++ b/src/hooks/budget/useBudget.ts
@@ -268,17 +268,17 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
 
       const { data: categoryInfo } = await supabase
         .from("categories")
-        .select('name')
-        .eq('id', newTransaction.category_id)
+        .select("name")
+        .eq("id", newTransaction.category_id)
         .single();
 
-      const categoryName = categoryInfo?.name || '';
+      const categoryName = categoryInfo?.name || "";
 
       // 트랜잭션 추가 전 카테고리 통계 저장
       const beforeStats = await getCategoryStats(
         newTransaction.user_id,
         categoryName,
-        newTransaction.type
+        newTransaction.type,
       );
 
       const { type, ...transactionData } = newTransaction;
@@ -299,8 +299,8 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
       // 트랜잭션 추가 후 카테고리 통계 조회
       const afterStats = await getCategoryStats(
         newTransaction.user_id,
-        data.category?.name || '',
-        type
+        data.category?.name || "",
+        type,
       );
 
       return { ...data, type, beforeStats, afterStats };
@@ -312,28 +312,37 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
       // 카테고리 통계가 변경되었는지 확인
       const { beforeStats, afterStats, category } = result;
 
-      if (beforeStats && afterStats && category?.name && userId && (beforeStats.amount !== afterStats.amount || beforeStats.count !== afterStats.count)) {
+      if (
+        beforeStats &&
+        afterStats &&
+        category?.name &&
+        userId &&
+        (beforeStats.amount !== afterStats.amount ||
+          beforeStats.count !== afterStats.count)
+      ) {
         // 해당 카테고리에 연결된 목표들이 있는지 확인
         const categoryGoals = await checkCategoryGoals(
           userId,
           category.name,
-          result.type
+          result.type,
         );
 
         if (categoryGoals.length > 0) {
           // 목표 업데이트 모달 트리거 - 컴포넌트에서 처리
           // 여기서는 상태만 업데이트, 실제 모달은 컴포넌트에서 처리
-          window.dispatchEvent(new CustomEvent('goalUpdateNeeded', {
-            detail: {
-              categoryName: category.name,
-              newAmount: afterStats.amount,
-              newCount: afterStats.count,
-              oldAmount: beforeStats.amount,
-              oldCount: beforeStats.count,
-              type: result.type,
-              goals: categoryGoals
-            }
-          }))
+          window.dispatchEvent(
+            new CustomEvent("goalUpdateNeeded", {
+              detail: {
+                categoryName: category.name,
+                newAmount: afterStats.amount,
+                newCount: afterStats.count,
+                oldAmount: beforeStats.amount,
+                oldCount: beforeStats.count,
+                type: result.type,
+                goals: categoryGoals,
+              },
+            }),
+          );
         }
       }
     },
@@ -356,13 +365,14 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
         .eq("id", id)
         .single();
 
-      if (!transactionToDelete) throw new Error('삭제할 거래를 찾을 수 없습니다.');
+      if (!transactionToDelete)
+        throw new Error("삭제할 거래를 찾을 수 없습니다.");
 
       // 삭제 전 카테고리 통계 저장
       const beforeStats = await getCategoryStats(
         transactionToDelete.user_id,
-        transactionToDelete.category?.name || '',
-        type
+        transactionToDelete.category?.name || "",
+        type,
       );
 
       const { error } = await supabase.from(tableName).delete().eq("id", id);
@@ -371,37 +381,57 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
       // 삭제 후 카테고리 통계 조회
       const afterStats = await getCategoryStats(
         transactionToDelete.user_id,
-        transactionToDelete.category?.name || '',
-        type
+        transactionToDelete.category?.name || "",
+        type,
       );
 
-      return { deletedTransaction: transactionToDelete, type, beforeStats, afterStats };
+      return {
+        deletedTransaction: transactionToDelete,
+        type,
+        beforeStats,
+        afterStats,
+      };
     },
-    onSuccess: async ({ deletedTransaction, type, beforeStats, afterStats }) => {
+    onSuccess: async ({
+      deletedTransaction,
+      type,
+      beforeStats,
+      afterStats,
+    }) => {
       queryClient.invalidateQueries({ queryKey: ["budget"] });
       queryClient.invalidateQueries({ queryKey: ["goals"] });
 
       // 카테고리 통계가 변경되었는지 확인
-      if (beforeStats && afterStats && deletedTransaction?.category?.name && userId) {
-        if (beforeStats.amount !== afterStats.amount || beforeStats.count !== afterStats.count) {
+      if (
+        beforeStats &&
+        afterStats &&
+        deletedTransaction?.category?.name &&
+        userId
+      ) {
+        if (
+          beforeStats.amount !== afterStats.amount ||
+          beforeStats.count !== afterStats.count
+        ) {
           const categoryGoals = await checkCategoryGoals(
             userId,
             deletedTransaction.category.name,
-            type
+            type,
           );
 
           if (categoryGoals.length > 0) {
-            window.dispatchEvent(new CustomEvent('goalUpdateNeeded', {
-              detail: {
-                categoryName: deletedTransaction.category.name,
-                newAmount: afterStats.amount,
-                newCount: afterStats.count,
-                oldAmount: beforeStats.amount,
-                oldCount: beforeStats.count,
-                type: type,
-                goals: categoryGoals
-              }
-            }));
+            window.dispatchEvent(
+              new CustomEvent("goalUpdateNeeded", {
+                detail: {
+                  categoryName: deletedTransaction.category.name,
+                  newAmount: afterStats.amount,
+                  newCount: afterStats.count,
+                  oldAmount: beforeStats.amount,
+                  oldCount: beforeStats.count,
+                  type: type,
+                  goals: categoryGoals,
+                },
+              }),
+            );
           }
         }
       }
@@ -460,36 +490,48 @@ export const useBudget = ({ userId, date, month }: UseBudgetProps = {}) => {
 };
 
 // 카테고리별 통계 조회 헬퍼 함수
-const getCategoryStats = async (userId: string, categoryName: string, type: "income" | "expense") => {
-  const startOfMonth = format(new Date(new Date().getFullYear(), new Date().getMonth(), 1), "yyyy-MM-dd");
-  const endOfMonth = format(new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0), "yyyy-MM-dd");
-  
+const getCategoryStats = async (
+  userId: string,
+  categoryName: string,
+  type: "income" | "expense",
+) => {
+  const startOfMonth = format(
+    new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+    "yyyy-MM-dd",
+  );
+  const endOfMonth = format(
+    new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
+    "yyyy-MM-dd",
+  );
+
   const tableName = type === "income" ? "incomes" : "expenses";
-  
+
   const { data, error } = await supabase
     .from(tableName)
-    .select(`
+    .select(
+      `
       amount,
       category:categories!inner(name)
-    `)
+    `,
+    )
     .eq("user_id", userId)
     .eq("category.name", categoryName)
     .gte("date", startOfMonth)
     .lte("date", endOfMonth);
 
   if (error) throw error;
-  
+
   return {
     amount: data?.reduce((sum, item) => sum + item.amount, 0) || 0,
-    count: data?.length || 0
+    count: data?.length || 0,
   };
 };
 
 // 카테고리별 목표 조회 헬퍼 함수
 const checkCategoryGoals = async (
-  userId: string, 
-  categoryName: string, 
-  type: "income" | "expense"
+  userId: string,
+  categoryName: string,
+  type: "income" | "expense",
 ) => {
   const { data: categoryData } = await supabase
     .from("categories")
@@ -500,18 +542,20 @@ const checkCategoryGoals = async (
 
   if (!categoryData || categoryData.length === 0) return [];
 
-  const categoryIds = categoryData.map(cat => cat.id);
+  const categoryIds = categoryData.map((cat) => cat.id);
 
   const { data, error } = await supabase
     .from("goals")
-    .select(`
+    .select(
+      `
       *,
       category:categories(*)
-    `)
+    `,
+    )
     .eq("user_id", userId)
     .in("category_id", categoryIds)
     .eq("status", "active");
 
   if (error) throw error;
   return data || [];
-};
\ No newline at end of file
+};
diff --git a/src/hooks/budget/useChallenge.ts b/src/hooks/budget/useChallenge.ts
index ccf7aa9..b962ff0 100644
--- a/src/hooks/budget/useChallenge.ts
+++ b/src/hooks/budget/useChallenge.ts
@@ -29,13 +29,14 @@ export const useChallenge = () => {
       }
 
       // 목표 타입 결정
-      const goalType = data.categoryType === "income" ? "increase_income" : "reduce_expense";
+      const goalType =
+        data.categoryType === "income" ? "increase_income" : "reduce_expense";
 
       // 카테고리 ID 조회
       const categoryId = await getCategoryIdByName(
-        data.category, 
-        data.categoryType, 
-        data.userId
+        data.category,
+        data.categoryType,
+        data.userId,
       );
 
       const goalData = {
@@ -44,11 +45,11 @@ export const useChallenge = () => {
         description: data.description || null,
         reason: data.reason || null,
         type: goalType,
-        target_amount: data.enableAmountGoal ? 
-          (data.categoryType === 'expense'
+        target_amount: data.enableAmountGoal
+          ? data.categoryType === "expense"
             ? Number(data.targetAmount)
             : Number(data.targetAmount)
-          ) : null,
+          : null,
         target_count: data.enableCountGoal ? Number(data.targetCount) : null,
         target_date: data.targetDate,
         challenge_mode: challengeMode,
@@ -62,17 +63,19 @@ export const useChallenge = () => {
       const { data: result, error } = await supabase
         .from("goals")
         .insert([goalData])
-        .select(`
+        .select(
+          `
           *,
           category:categories(*)
-        `)
+        `,
+        )
         .single();
 
       if (error) {
         console.error("목표 생성 에러:", error);
         throw error;
       }
-      
+
       return result;
     },
     onSuccess: () => {
@@ -88,9 +91,9 @@ export const useChallenge = () => {
 };
 
 const getCategoryIdByName = async (
-  categoryName: string, 
-  categoryType: "income" | "expense", 
-  userId: string
+  categoryName: string,
+  categoryType: "income" | "expense",
+  userId: string,
 ): Promise<string | null> => {
   try {
     // 두 타입 모두 한 번에 조회
@@ -107,17 +110,22 @@ const getCategoryIdByName = async (
     }
 
     if (!categories || categories.length === 0) {
-      console.warn(`카테고리를 찾을 수 없습니다: ${categoryName} (${categoryType})`);
+      console.warn(
+        `카테고리를 찾을 수 없습니다: ${categoryName} (${categoryType})`,
+      );
       return null;
     }
 
-    const fixedCategory = categories.find(cat => cat.type === `${categoryType}_fixed`);
-    const variableCategory = categories.find(cat => cat.type === `${categoryType}_variable`);
+    const fixedCategory = categories.find(
+      (cat) => cat.type === `${categoryType}_fixed`,
+    );
+    const variableCategory = categories.find(
+      (cat) => cat.type === `${categoryType}_variable`,
+    );
 
     return fixedCategory?.id || variableCategory?.id || null;
-
   } catch (error) {
     console.error("카테고리 ID 조회 실패:", error);
     return null;
   }
-};
\ No newline at end of file
+};
diff --git a/src/hooks/goals/useGoalStatistics.ts b/src/hooks/goals/useGoalStatistics.ts
index d80d5a7..6b11670 100644
--- a/src/hooks/goals/useGoalStatistics.ts
+++ b/src/hooks/goals/useGoalStatistics.ts
@@ -1,18 +1,18 @@
-import { Goal } from '@/types/goals';
-import { useMemo } from 'react';
+import { Goal } from "@/types/goals";
+import { useMemo } from "react";
 
 const useGoalStatistics = (goals: Goal[]) => {
   return useMemo(() => {
     const total = goals.length;
-    const active = goals.filter((goal) => goal.status === 'active');
-    const completed = goals.filter((goal) => goal.status === 'completed');
+    const active = goals.filter((goal) => goal.status === "active");
+    const completed = goals.filter((goal) => goal.status === "completed");
 
     // 곧 마감되는 목표들 (7일 이내)
     const soonDue = active.filter((goal) => {
       if (!goal.target_date) return false;
       const daysLeft = Math.ceil(
         (new Date(goal.target_date).getTime() - new Date().getTime()) /
-          (1000 * 60 * 60 * 24)
+          (1000 * 60 * 60 * 24),
       );
       return daysLeft <= 7 && daysLeft > 0;
     });
@@ -31,4 +31,4 @@ const useGoalStatistics = (goals: Goal[]) => {
   }, [goals]);
 };
 
-export default useGoalStatistics;
\ No newline at end of file
+export default useGoalStatistics;
diff --git a/src/hooks/goals/useGoals.ts b/src/hooks/goals/useGoals.ts
index 30112f5..20ba224 100644
--- a/src/hooks/goals/useGoals.ts
+++ b/src/hooks/goals/useGoals.ts
@@ -1,7 +1,7 @@
-import { supabase } from '@/lib/supabase';
-import { Goal, GoalFormData } from '@/types/goals';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo } from 'react';
+import { supabase } from "@/lib/supabase";
+import { Goal, GoalFormData } from "@/types/goals";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMemo } from "react";
 
 interface UseGoalsProps {
   userId?: string;
@@ -11,18 +11,20 @@ export const useGoals = ({ userId }: UseGoalsProps = {}) => {
   const queryClient = useQueryClient();
 
   const { data: goals = [], isLoading } = useQuery({
-    queryKey: ['goals', userId],
+    queryKey: ["goals", userId],
     queryFn: async (): Promise<Goal[]> => {
       if (!userId) return [];
 
       const { data, error } = await supabase
-        .from('goals')
-        .select(`
+        .from("goals")
+        .select(
+          `
           *,
           category:categories(*)
-        `)
-        .eq('user_id', userId)
-        .order('created_at', { ascending: false });
+        `,
+        )
+        .eq("user_id", userId)
+        .order("created_at", { ascending: false });
 
       if (error) throw error;
       return data || [];
@@ -32,49 +34,54 @@ export const useGoals = ({ userId }: UseGoalsProps = {}) => {
 
   // 목표 업데이트
   const updateGoalMutation = useMutation({
-    mutationFn: async ({ id, updates }: { id: string; updates: Partial<GoalFormData> }) => {
+    mutationFn: async ({
+      id,
+      updates,
+    }: {
+      id: string;
+      updates: Partial<GoalFormData>;
+    }) => {
       const updateData = {
         ...updates,
         updated_at: new Date().toISOString(),
       };
 
       const { data, error } = await supabase
-        .from('goals')
+        .from("goals")
         .update(updateData)
-        .eq('id', id)
-        .select(`
+        .eq("id", id)
+        .select(
+          `
           *,
           category:categories(*)
-        `)
+        `,
+        )
         .single();
 
       if (error) throw error;
       return data;
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['goals'] });
+      queryClient.invalidateQueries({ queryKey: ["goals"] });
     },
   });
 
   // 목표 삭제
   const deleteGoalMutation = useMutation({
     mutationFn: async (goalId: string) => {
-      const { error } = await supabase
-        .from('goals')
-        .delete()
-        .eq('id', goalId);
+      const { error } = await supabase.from("goals").delete().eq("id", goalId);
 
       if (error) throw error;
     },
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['goals'] });
+      queryClient.invalidateQueries({ queryKey: ["goals"] });
     },
   });
 
   // 목표 상태별 분류
   const { activeGoals, completedGoals } = useMemo(() => {
-    const active = goals.filter(goal => goal.status === 'active');
-    const completed = goals.filter(goal => goal.status === 'completed');
+    const active = goals.filter((goal) => goal.status === "active");
+    const completed = goals.filter((goal) => goal.status === "completed");
 
     return {
       activeGoals: active,
@@ -92,4 +99,4 @@ export const useGoals = ({ userId }: UseGoalsProps = {}) => {
     deleteGoal: deleteGoalMutation.mutate,
     isDeletingGoal: deleteGoalMutation.isPending,
   };
-};
\ No newline at end of file
+};
diff --git a/src/hooks/goals/useGoalsByBudget.ts b/src/hooks/goals/useGoalsByBudget.ts
index 67f8696..0a7d0af 100644
--- a/src/hooks/goals/useGoalsByBudget.ts
+++ b/src/hooks/goals/useGoalsByBudget.ts
@@ -1,6 +1,6 @@
-import { supabase } from '@/lib/supabase';
-import { Goal } from '@/types/goals';
-import { useQuery } from '@tanstack/react-query';
+import { supabase } from "@/lib/supabase";
+import { Goal } from "@/types/goals";
+import { useQuery } from "@tanstack/react-query";
 
 interface UseGoalsByBudgetProps {
   userId?: string;
@@ -28,14 +28,16 @@ export const useGoalsByBudget = ({
 
       if (!categoryData || categoryData.length === 0) return [];
 
-      const categoryIds = categoryData.map(cat => cat.id);
+      const categoryIds = categoryData.map((cat) => cat.id);
 
       const { data, error } = await supabase
         .from("goals")
-        .select(`
+        .select(
+          `
           *,
           category:categories(*)
-        `)
+        `,
+        )
         .eq("user_id", userId)
         .in("category_id", categoryIds)
         .eq("status", "active");
@@ -53,4 +55,4 @@ export const useGoalsByBudget = ({
     hasSingleGoal: goals.length === 1,
     hasNoGoals: goals.length === 0,
   };
-};
\ No newline at end of file
+};
diff --git a/src/hooks/reflections/useReflections.ts b/src/hooks/reflections/useReflections.ts
index d6a3b53..a5382d5 100644
--- a/src/hooks/reflections/useReflections.ts
+++ b/src/hooks/reflections/useReflections.ts
@@ -147,15 +147,15 @@ export const useReflections = ({
       const { keywords: keywordNames } = formData;
 
       // 기본값 설정
-    const dataWithDefaults = {
-      user_id: formData.user_id,
-      category_id: formData.category_id,
-      title: formData.title,
-      content: formData.content,
-      date: formData.date,
-      is_public: formData.is_public ?? true,
-      is_neighbor_visible: formData.is_neighbor_visible ?? true,
-    };
+      const dataWithDefaults = {
+        user_id: formData.user_id,
+        category_id: formData.category_id,
+        title: formData.title,
+        content: formData.content,
+        date: formData.date,
+        is_public: formData.is_public ?? true,
+        is_neighbor_visible: formData.is_neighbor_visible ?? true,
+      };
 
       // 1. 회고 생성
       const { data: reflection, error: reflectionError } = await supabase
diff --git a/src/utils/goals/goalsHelpers.ts b/src/utils/goals/goalsHelpers.ts
index 4bb0de6..c6d5e7a 100644
--- a/src/utils/goals/goalsHelpers.ts
+++ b/src/utils/goals/goalsHelpers.ts
@@ -1,13 +1,13 @@
 export const getStatusText = (status: string): string => {
   switch (status) {
-    case 'active':
-      return '진행 중';
-    case 'completed':
-      return '완료됨';
-    case 'paused':
-      return '일시정지';
-    case 'cancelled':
-      return '취소됨';
+    case "active":
+      return "진행 중";
+    case "completed":
+      return "완료됨";
+    case "paused":
+      return "일시정지";
+    case "cancelled":
+      return "취소됨";
     default:
       return status;
   }
@@ -15,14 +15,14 @@ export const getStatusText = (status: string): string => {
 
 export const getTypeText = (type: string): string => {
   switch (type) {
-    case 'save_money':
-      return '돈 저축';
-    case 'reduce_expense':
-      return '지출 줄이기';
-    case 'increase_income':
-      return '수입 늘리기';
-    case 'custom':
-      return '사용자 정의';
+    case "save_money":
+      return "돈 저축";
+    case "reduce_expense":
+      return "지출 줄이기";
+    case "increase_income":
+      return "수입 늘리기";
+    case "custom":
+      return "사용자 정의";
     default:
       return type;
   }
@@ -30,12 +30,12 @@ export const getTypeText = (type: string): string => {
 
 export const getChallengeMode = (mode: string): string => {
   switch (mode) {
-    case 'amount':
-      return '금액';
-    case 'count':
-      return '횟수';
-    case 'both':
-      return '금액 + 횟수';
+    case "amount":
+      return "금액";
+    case "count":
+      return "횟수";
+    case "both":
+      return "금액 + 횟수";
     default:
       return mode;
   }
@@ -46,10 +46,13 @@ export const calculateProgress = (current: number, target: number): number => {
   return Math.round((current / target) * 100);
 };
 
-export const getDaysLeft = (targetDate: string | null | undefined): number | null => {
+export const getDaysLeft = (
+  targetDate: string | null | undefined,
+): number | null => {
   if (!targetDate) return null;
   const daysLeft = Math.ceil(
-    (new Date(targetDate).getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24)
+    (new Date(targetDate).getTime() - new Date().getTime()) /
+      (1000 * 60 * 60 * 24),
   );
   return daysLeft;
 };
@@ -65,25 +68,39 @@ export const getGoalProgress = (goal: {
   let countProgress = 0;
 
   if (goal.target_amount && goal.current_amount !== undefined) {
-    if (goal.type === 'reduce_expense') {
+    if (goal.type === "reduce_expense") {
       // 지출 목표: 현재 사용량이 목표보다 적을수록 좋음
-      amountProgress = goal.current_amount <= goal.target_amount ? 100 :
-        Math.max(0, Math.round((1 - (goal.current_amount / goal.target_amount)) * 100));
+      amountProgress =
+        goal.current_amount <= goal.target_amount
+          ? 100
+          : Math.max(
+              0,
+              Math.round((1 - goal.current_amount / goal.target_amount) * 100),
+            );
     } else {
       // 수입 목표
-      amountProgress = Math.round((goal.current_amount / goal.target_amount) * 100);
+      amountProgress = Math.round(
+        (goal.current_amount / goal.target_amount) * 100,
+      );
     }
   }
 
-    if (goal.target_count && goal.current_count !== undefined) {
-    if (goal.type === 'reduce_expense') {
-      countProgress = goal.current_count <= goal.target_count ? 100 :
-        Math.max(0, Math.round((1 - (goal.current_count / goal.target_count)) * 100));
+  if (goal.target_count && goal.current_count !== undefined) {
+    if (goal.type === "reduce_expense") {
+      countProgress =
+        goal.current_count <= goal.target_count
+          ? 100
+          : Math.max(
+              0,
+              Math.round((1 - goal.current_count / goal.target_count) * 100),
+            );
     } else {
-      countProgress = Math.round((goal.current_count / goal.target_count) * 100);
+      countProgress = Math.round(
+        (goal.current_count / goal.target_count) * 100,
+      );
     }
   }
-  
+
   // 종합 진행률 (둘 다 있으면 평균, 하나만 있으면 그것을 사용)
   let overallProgress = 0;
   if (goal.target_amount && goal.target_count) {
@@ -93,7 +110,7 @@ export const getGoalProgress = (goal: {
   } else if (goal.target_count) {
     overallProgress = countProgress;
   }
-  
+
   return {
     amountProgress,
     countProgress,
@@ -103,19 +120,19 @@ export const getGoalProgress = (goal: {
 
 export const getStatusColorClass = (status: string): string => {
   switch (status) {
-    case 'active':
-      return 'bg-blue-100 text-blue-800';
-    case 'completed':
-      return 'bg-green-100 text-green-800';
-    case 'paused':
-      return 'bg-yellow-100 text-yellow-800';
-    case 'cancelled':
-      return 'bg-red-100 text-red-800';
+    case "active":
+      return "bg-blue-100 text-blue-800";
+    case "completed":
+      return "bg-green-100 text-green-800";
+    case "paused":
+      return "bg-yellow-100 text-yellow-800";
+    case "cancelled":
+      return "bg-red-100 text-red-800";
     default:
-      return 'bg-gray-100 text-gray-800';
+      return "bg-gray-100 text-gray-800";
   }
 };
 
 export const getProgressBarColor = (type: string): string => {
-  return type === 'increase_income' ? '#22c55e' : '#ef4444';
-};
\ No newline at end of file
+  return type === "increase_income" ? "#22c55e" : "#ef4444";
+};

From be861259a716bd3243c46b97053553162d7716b3 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 16:56:06 +0900
Subject: [PATCH 11/12] =?UTF-8?q?style:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=86=B5=EA=B3=84=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=EB=A7=81=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/my/StatsCard.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/my/StatsCard.tsx b/src/components/my/StatsCard.tsx
index c504245..0d859f2 100644
--- a/src/components/my/StatsCard.tsx
+++ b/src/components/my/StatsCard.tsx
@@ -19,10 +19,10 @@ const StatsCard = ({
   };
 
   return (
-    <div className="bg-white p-4 rounded-lg border">
-      <div className="flex items-center space-x-3">
+    <div className="bg-white mobile:p-2 tablet:p-4 rounded-lg border">
+      <div className="flex mobile:flex-col tablet:flex-row mobile:items-center tablet:justify-center space-x-3">
         <div className={`p-2 rounded-lg ${colorClasses[color]}`}>{icon}</div>
-        <div>
+        <div className="mobile:flex mobile:items-center mobile:gap-1 tablet:flex-col tablet:gap-0">
           <p className="text-sm text-gray-600">{label}</p>
           <p className="text-xl font-bold text-gray-900">{value}</p>
           {subtext && <p className="text-xs text-gray-500">{subtext}</p>}

From 87e500764ab48ac2f350d0bbb97cb363b49af208 Mon Sep 17 00:00:00 2001
From: YeongTaek <yeongtaek2109@gmail.com>
Date: Wed, 17 Sep 2025 17:07:08 +0900
Subject: [PATCH 12/12] =?UTF-8?q?style:=20=EB=AA=A9=ED=91=9C=EC=9C=A8=20UI?=
 =?UTF-8?q?=20=ED=97=AC=ED=8D=BC=ED=95=A8=EC=88=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/dashboard/page.tsx | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c5dc28c..f372ef7 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -9,7 +9,6 @@ import { format } from "date-fns";
 import { ko } from "date-fns/locale";
 import {
   ArrowRight,
-  BarChart3,
   Calendar,
   Plus,
   Target,
@@ -27,6 +26,7 @@ import DashboardReflectionWidget from "@/components/reflections/DashboardReflect
 import DashboardBudgetWidget from "@/components/budget/DashboardBudgetWidget";
 import Modal from "@/components/common/Modal";
 import QuestionForm from "@/components/questions/QuestionForm";
+import { getDaysLeft, getGoalProgress } from "@/utils/goals/goalsHelpers";
 
 const DashboardPage = () => {
   const { user, profile, isLoading: isAuthLoading } = useAuth();
@@ -76,14 +76,15 @@ const DashboardPage = () => {
     // 곧 마감되는 목표들 (7일 이내)
     const soonDueGoals = activeGoals.filter((goal) => {
       if (!goal.target_date) return false;
-      const daysLeft = goal.progress.daysLeft;
-      return daysLeft <= 7 && daysLeft > 0;
+      const daysLeft = getDaysLeft(goal.target_date);
+      return daysLeft !== null && daysLeft <= 7 && daysLeft > 0;
     });
 
     // 달성률이 80% 이상인 목표들
-    const nearCompletionGoals = activeGoals.filter(
-      (goal) => goal.progress.overallProgress >= 80,
-    );
+    const nearCompletionGoals = activeGoals.filter((goal) => {
+      const progress = getGoalProgress(goal);
+      return progress.overallProgress >= 80;
+    });
 
     return {
       total: totalGoals,
@@ -156,6 +157,17 @@ const DashboardPage = () => {
   // 상위 목표들 (진행률 기준)
   const topProgressGoals = useMemo(() => {
     return activeGoals
+      .map((goal) => ({
+        ...goal,
+        progress: {
+          ...getGoalProgress(goal),
+          daysLeft: getDaysLeft(goal.target_date),
+          progressText: `진행률 ${getGoalProgress(goal).overallProgress}%`,
+          isComplete:
+            goal.status === "completed" ||
+            getGoalProgress(goal).overallProgress >= 100,
+        },
+      }))
       .sort((a, b) => b.progress.overallProgress - a.progress.overallProgress)
       .slice(0, 3);
   }, [activeGoals]);
@@ -302,7 +314,7 @@ const DashboardPage = () => {
           </div>
 
           {/* 이번 주 활동 요약 */}
-          <div className="bg-white rounded-lg p-6 shadow-sm border">
+          {/* <div className="bg-white rounded-lg p-6 shadow-sm border">
             <div className="flex items-center justify-between">
               <div className="flex-1">
                 <p className="text-sm font-medium text-gray-600">
@@ -327,7 +339,7 @@ const DashboardPage = () => {
                 <BarChart3 className="w-6 h-6 text-purple-600" />
               </div>
             </div>
-          </div>
+          </div> */}
         </div>
 
         {/* 위젯 그리드 */}