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>
 
         {/* 위젯 그리드 */}
diff --git a/src/app/goals/[id]/edit/page.tsx b/src/app/goals/[id]/edit/page.tsx
new file mode 100644
index 0000000..0670b1a
--- /dev/null
+++ b/src/app/goals/[id]/edit/page.tsx
@@ -0,0 +1,495 @@
+"use client";
+
+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";
+
+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: 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 (isGoalsLoading) {
+    return (
+      <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>
+    );
+  }
+
+  // 사용자 인증 확인
+  if (!user?.id) {
+    return (
+      <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>
+    );
+  }
+
+  // 목표를 찾을 수 없는 경우
+  if (!goal) {
+    return (
+      <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>
+    );
+  }
+
+  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>
+
+          <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>
+
+              <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>
+
+                {/* 목표 설명 */}
+                <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>
+
+                {/* 목표 이유 */}
+                <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>
+
+                {/* 목표 상태 */}
+                <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>
+
+            {/* 목표 설정 섹션 */}
+            <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 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>
+
+                {/* 목표 금액 */}
+                {(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>
+                )}
+
+                {/* 목표 날짜 */}
+                <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 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>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GoalEditPage;
diff --git a/src/app/goals/[id]/page.tsx b/src/app/goals/[id]/page.tsx
new file mode 100644
index 0000000..d625088
--- /dev/null
+++ b/src/app/goals/[id]/page.tsx
@@ -0,0 +1,276 @@
+"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 } = 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);
+
+  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 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>
+    );
+  }
+
+  // 목표를 찾을 수 없는 경우
+  if (!goal) {
+    return (
+      <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 progress = getGoalProgress(goal);
+
+  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>
+
+        {/* 메인 컨텐츠 */}
+        <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>
+
+          <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>
+
+              {goal.category && (
+                <InfoItem
+                  label={
+                    goal.type === "reduce_expense" ? "현재 사용" : "현재 달성"
+                  }
+                  value={`${goal.current_amount?.toLocaleString()}원`}
+                  important
+                />
+              )}
+              {goal.reason && <InfoItem label="" value={goal.reason} />}
+            </InfoSection>
+
+            {/* 목표 정보 */}
+            <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="원"
+                />
+              )}
+
+              {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>
+              )}
+
+              {/* 종합 진행률 (둘 다 있을 때만) */}
+              {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>
+              )}
+            </InfoSection>
+
+            {/* 날짜 정보 */}
+            <InfoSection
+              title="생성 정보"
+              icon={<Calendar className="w-5 h-5" />}
+            >
+              <InfoItem
+                label="생성일"
+                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", {
+                  locale: ko,
+                })}
+              />
+            </InfoSection>
+
+            {/* 액션 버튼 */}
+            <div className="flex justify-end">
+              <ActionButtons
+                goalStatus={goal.status}
+                onEdit={handleEdit}
+                onDelete={handleDelete}
+                isDeleting={isDeleting}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GoalDetailPage;
diff --git a/src/app/goals/page.tsx b/src/app/goals/page.tsx
index b4b32bf..4a4f87f 100644
--- a/src/app/goals/page.tsx
+++ b/src/app/goals/page.tsx
@@ -1,327 +1,237 @@
 "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,
+  Clock,
   TrendingUp,
+  BarChart3,
+  Plus,
+  Zap,
   Trophy,
+  ArrowRight,
+  Star,
 } from "lucide-react";
 import Link from "next/link";
-import { useMemo, useState } from "react";
+import GoalCard from "@/components/goals/GoalCard";
+import StatCard from "@/components/goals/StatCard";
+import useGoalStatistics from "@/hooks/goals/useGoalStatistics";
 
 const GoalsPage = () => {
-  const { user } = useAuth();
-  const { goals, activeGoals, completedGoals, isLoading } = useGoals({
+  const { user, isLoading: isAuthLoading } = useAuth();
+
+  const {
+    activeGoals,
+    completedGoals,
+    goals,
+    isLoading: isGoalsLoading,
+  } = 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);
-    }
-  };
+  const statistics = useGoalStatistics(goals);
 
-  if (!user?.id) {
+  // 로딩 상태
+  if (isAuthLoading || isGoalsLoading) {
     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 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>
-      </AuthGuard>
+      </div>
     );
   }
 
-  if (isLoading) {
+  // 사용자 인증 확인
+  if (!user?.id) {
     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 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>
-      </AuthGuard>
+      </div>
     );
   }
 
   return (
-    <AuthGuard>
-      <div className="max-w-7xl mx-auto p-4 space-y-6">
+    <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-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 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 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>
+        {/* 목표가 없을 때 */}
+        {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 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>
+        {/* 목표가 있을 때 */}
+        {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>
 
-          <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 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>
-                <p className="text-sm text-gray-600">완료</p>
-                <p className="text-xl font-bold text-gray-900">
-                  {statistics.completed}
-                </p>
+              <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>
-          </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" />
+            {/* 진행 중인 목표들 */}
+            {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>
+                  </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>
-              <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>
+            {/* 완료된 목표들 */}
+            {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>
+                  </div>
+                </div>
+                <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>
+          </>
         )}
       </div>
-    </AuthGuard>
+    </div>
   );
 };
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1dafc92..84600c6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,6 @@ 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"] });
 
 export const metadata = {
@@ -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/app/page.tsx b/src/app/page.tsx
index b4989eb..32d6df0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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,7 +525,7 @@ export default function Home() {
             </div>
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* 마지막 CTA */}
       <section className="py-20 bg-gradient-to-br from-accent-900 to-accent-800">
diff --git a/src/app/reflections/[id]/page.tsx b/src/app/reflections/[id]/page.tsx
index e160c53..d68d7f1 100644
--- a/src/app/reflections/[id]/page.tsx
+++ b/src/app/reflections/[id]/page.tsx
@@ -67,7 +67,7 @@ const ReflectionDetailPage = () => {
           `,
           )
           .eq("id", id)
-          .single();
+          .maybeSingle();
 
         if (error) throw error;
 
@@ -112,12 +112,21 @@ const ReflectionDetailPage = () => {
     fetchReflection();
   }, [id, user?.id]);
 
-  const handleDelete = () => {
+  const handleDelete = async () => {
     if (!reflection) return;
 
     if (confirm("정말 삭제하시겠습니까? 삭제된 회고는 복구할 수 없습니다.")) {
-      deleteReflection(reflection.id);
-      router.push("./reflections");
+      try {
+        await new Promise((resolve, reject) => {
+          deleteReflection(reflection.id, {
+            onSuccess: resolve,
+            onError: reject,
+          });
+        });
+        router.push("/reflections");
+      } catch (error) {
+        console.error("삭제 실패:", error);
+      }
     }
   };
 
diff --git a/src/app/reflections/new/page.tsx b/src/app/reflections/new/page.tsx
index ce04b41..c94eead 100644
--- a/src/app/reflections/new/page.tsx
+++ b/src/app/reflections/new/page.tsx
@@ -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/components/budget/BudgetForm.tsx b/src/components/budget/BudgetForm.tsx
index 22b56c2..b9dc294 100644
--- a/src/components/budget/BudgetForm.tsx
+++ b/src/components/budget/BudgetForm.tsx
@@ -3,6 +3,7 @@
 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";
@@ -19,7 +20,8 @@ import {
   X,
 } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import GoalUpdateModal, { CategoryChangeData } from "./GoalUpdateModal";
 
 export default function BudgetForm({
   selectedDate,
@@ -33,6 +35,75 @@ 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) =>
@@ -163,324 +234,342 @@ export default function BudgetForm({
   };
 
   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/ChallengeModal.tsx b/src/components/budget/ChallengeModal.tsx
index d1db13a..d7149fb 100644
--- a/src/components/budget/ChallengeModal.tsx
+++ b/src/components/budget/ChallengeModal.tsx
@@ -271,9 +271,7 @@ const ChallengeModal = ({
                             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/budget/GoalUpdateModal.tsx b/src/components/budget/GoalUpdateModal.tsx
new file mode 100644
index 0000000..c79a8a0
--- /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/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/ActionButton.tsx b/src/components/goals/ActionButton.tsx
new file mode 100644
index 0000000..a8f0c3c
--- /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
index 1225bab..76f309d 100644
--- a/src/components/goals/GoalCard.tsx
+++ b/src/components/goals/GoalCard.tsx
@@ -1,104 +1,176 @@
-import { Goal, GoalProgressInfo } from "@/types/goals";
+"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";
-import { CheckCircle, TrendingDown, TrendingUp } from "lucide-react";
 
-interface GoalCardProps {
-  goal: Goal & { progress: GoalProgressInfo };
-}
+const GoalCard = ({ goal }: { goal: Goal }) => {
+  const router = useRouter();
+  const progress = getGoalProgress(goal);
+  const daysLeft = getDaysLeft(goal.target_date);
+  const isCompleted = goal.status === "completed";
 
-const GoalCard = ({ goal }: GoalCardProps) => {
-  const { progress } = goal;
+  const handleCardClick = () => {
+    router.push(`/goals/${goal.id}`);
+  };
 
   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"
-      }`}
+      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="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" />
+      {/* 상태 배지 */}
+      <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" />
             ) : (
-              <TrendingDown className="w-5 h-5" />
+              <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>
-          <div>
-            <h3 className="font-semibold text-gray-900">{goal.title}</h3>
-            <p className="text-sm text-gray-600">{progress.progressText}</p>
-          </div>
+          {goal.description && (
+            <p className="text-gray-600 text-sm line-clamp-2 leading-relaxed select-none">
+              {goal.description}
+            </p>
+          )}
         </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()}원
+        {/* 목표 정보 그리드 */}
+        <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>
-        )}
 
-        {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 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>
-        )}
 
-        {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,
-              })}
+          {/* 진행률 바 */}
+          {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>
-
-      {/* 이유 */}
-      {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>
     </div>
   );
 };
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/goals/InfoSection.tsx b/src/components/goals/InfoSection.tsx
new file mode 100644
index 0000000..d526250
--- /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..d604b05
--- /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..9e8214e
--- /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..ba2b75c
--- /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/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>}
diff --git a/src/components/reflections/ReflectionCard.tsx b/src/components/reflections/ReflectionCard.tsx
index 8b0e128..8e07824 100644
--- a/src/components/reflections/ReflectionCard.tsx
+++ b/src/components/reflections/ReflectionCard.tsx
@@ -35,6 +35,7 @@ const ReflectionCard = ({
 
   const handleDelete = (e: React.MouseEvent) => {
     e.stopPropagation();
+    e.preventDefault();
     onDelete(reflection.id);
   };
 
diff --git a/src/hooks/budget/useBudget.ts b/src/hooks/budget/useBudget.ts
index 403657a..f0fa6fe 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,55 @@ 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 +365,75 @@ 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 +488,74 @@ 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 || [];
+};
diff --git a/src/hooks/budget/useChallenge.ts b/src/hooks/budget/useChallenge.ts
index e96372a..b962ff0 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 {
@@ -33,30 +32,37 @@ export const useChallenge = () => {
       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,
         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,
-        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],
-          },
-        ])
+        .insert([goalData])
         .select(
           `
           *,
@@ -65,11 +71,14 @@ export const useChallenge = () => {
         )
         .single();
 
-      if (error) throw error;
+      if (error) {
+        console.error("목표 생성 에러:", error);
+        throw error;
+      }
+
       return result;
     },
     onSuccess: () => {
-      // goals 관련 쿼리들 무효화
       queryClient.invalidateQueries({ queryKey: ["goals"] });
     },
   });
@@ -80,3 +89,43 @@ 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;
+  }
+};
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/useGoalStatistics.ts b/src/hooks/goals/useGoalStatistics.ts
new file mode 100644
index 0000000..6b11670
--- /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;
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
index ceb35df..20ba224 100644
--- a/src/hooks/goals/useGoals.ts
+++ b/src/hooks/goals/useGoals.ts
@@ -1,25 +1,21 @@
 import { supabase } from "@/lib/supabase";
-import { Goal, GoalFormData, GoalProgressInfo } from "@/types/goals";
+import { Goal, GoalFormData } 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 = {}) => {
+export const useGoals = ({ userId }: UseGoalsProps = {}) => {
   const queryClient = useQueryClient();
 
-  // 목표 조회
-  const {
-    data: goals = [],
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["goals", userId, status],
+  const { data: goals = [], isLoading } = useQuery({
+    queryKey: ["goals", userId],
     queryFn: async (): Promise<Goal[]> => {
-      let query = supabase
+      if (!userId) return [];
+
+      const { data, error } = await supabase
         .from("goals")
         .select(
           `
@@ -27,37 +23,33 @@ export const useGoals = ({ userId, status }: UseGoalsProps = {}) => {
           category:categories(*)
         `,
         )
+        .eq("user_id", userId)
         .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 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")
-        .insert([goalData])
+        .update(updateData)
+        .eq("id", id)
         .select(
           `
           *,
@@ -74,137 +66,37 @@ export const useGoals = ({ userId, status }: UseGoalsProps = {}) => {
     },
   });
 
-  // 목표 수정
-  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();
+  // 목표 삭제
+  const deleteGoalMutation = useMutation({
+    mutationFn: async (goalId: string) => {
+      const { error } = await supabase.from("goals").delete().eq("id", goalId);
 
       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 { activeGoals, completedGoals } = useMemo(() => {
+    const active = goals.filter((goal) => goal.status === "active");
+    const completed = goals.filter((goal) => goal.status === "completed");
 
-  // 완료된 목표만 필터링
-  const completedGoals = useMemo(() => {
-    return goalsWithProgress.filter((goal) => goal.status === "completed");
-  }, [goalsWithProgress]);
+    return {
+      activeGoals: active,
+      completedGoals: completed,
+    };
+  }, [goals]);
 
   return {
-    goals: goalsWithProgress,
+    goals,
     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,
+    deleteGoal: deleteGoalMutation.mutate,
+    isDeletingGoal: deleteGoalMutation.isPending,
   };
 };
diff --git a/src/hooks/goals/useGoalsByBudget.ts b/src/hooks/goals/useGoalsByBudget.ts
new file mode 100644
index 0000000..0a7d0af
--- /dev/null
+++ b/src/hooks/goals/useGoalsByBudget.ts
@@ -0,0 +1,58 @@
+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,
+  };
+};
diff --git a/src/hooks/reflections/useReflections.ts b/src/hooks/reflections/useReflections.ts
index 8315e6c..a5382d5 100644
--- a/src/hooks/reflections/useReflections.ts
+++ b/src/hooks/reflections/useReflections.ts
@@ -144,13 +144,17 @@ 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,
+        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. 회고 생성
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;
 }
diff --git a/src/utils/goals/goalsHelpers.ts b/src/utils/goals/goalsHelpers.ts
new file mode 100644
index 0000000..c6d5e7a
--- /dev/null
+++ b/src/utils/goals/goalsHelpers.ts
@@ -0,0 +1,138 @@
+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;
+  type: string;
+}) => {
+  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;
+  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";
+};