From d796a8be1dbdd60a9be9e68f3d83ff2a10bb966a Mon Sep 17 00:00:00 2001
From: iubns <iubns@naver.com>
Date: Mon, 9 Feb 2026 21:44:39 +0900
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20notification=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/admin/darak/community/page.tsx |  10 +-
 client/src/app/admin/page.tsx                 |  14 +-
 client/src/app/admin/soon/page.tsx            |  18 +-
 client/src/app/admin/worshipSchedule/page.tsx |  20 +-
 client/src/app/common/login/page.tsx          |   6 +-
 .../app/event/worshipContest/vote/page.tsx    |  37 ++--
 client/src/app/leader/all-attendance/page.tsx |  11 +-
 client/src/app/leader/management/page.tsx     |   9 +-
 .../app/leader/newcomer/education/page.tsx    |   8 +-
 .../app/leader/newcomer/management/page.tsx   |  27 ++-
 .../src/app/leader/newcomer/managers/page.tsx |  21 +-
 client/src/app/leader/postcard/page.tsx       |   7 +-
 .../src/app/retreat/admin/carpooling/page.tsx |   7 +-
 client/src/app/retreat/steps/fifthStep.tsx    |   9 +-
 client/src/app/retreat/steps/fourth.tsx       |  12 +-
 .../components/form/UserInformationForm.tsx   |  23 +--
 .../components/notification/notification.tsx  | 183 ++++++++++++------
 client/src/hooks/useAuth.ts                   |  10 +-
 client/src/hooks/useNotification.ts           |  61 ++++++
 client/src/state/notification.ts              |  14 +-
 20 files changed, 316 insertions(+), 191 deletions(-)
 create mode 100644 client/src/hooks/useNotification.ts

diff --git a/client/src/app/admin/darak/community/page.tsx b/client/src/app/admin/darak/community/page.tsx
index cc8149e..833fd39 100644
--- a/client/src/app/admin/darak/community/page.tsx
+++ b/client/src/app/admin/darak/community/page.tsx
@@ -7,7 +7,7 @@ import CommunityCard from "./CommunityCard"
 import { dele, get, post, put } from "@/config/api"
 import { MouseEvent, useEffect, useState } from "react"
 import { type Community } from "@server/entity/community"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import CommunityControlPanel from "./CommunityControlPanel"
 
 enum EditMode {
@@ -32,7 +32,7 @@ export default function CommunityComponent() {
   const [clickedCommunityName, setClickedCommunityName] = useState("")
   const [isMoveMode, setIsMoveMode] = useState(false)
 
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     fetchData()
@@ -77,7 +77,7 @@ export default function CommunityComponent() {
     const canAdd = checkLoopReference(selectedCommunity, parentCommunity.id)
     if (!canAdd) {
       if (selectedCommunity.id !== parentCommunity.id) {
-        setNotificationMessage(`순환 참조 입니다.`)
+        error(`순환 참조 입니다.`)
       }
       setSelectedCommunity(undefined)
       return
@@ -96,7 +96,7 @@ export default function CommunityComponent() {
 
   function checkLoopReference(
     checkCommunity: Community,
-    parentId: number
+    parentId: number,
   ): boolean {
     if (checkCommunity.id === parentId) return false
     const childList = communityList.filter((community) => {
@@ -164,7 +164,7 @@ export default function CommunityComponent() {
           selectedCommunity={selectedCommunity}
           onEditModeChange={() =>
             setEditMode(
-              editMode === EditMode.All ? EditMode.Folder : EditMode.All
+              editMode === EditMode.All ? EditMode.Folder : EditMode.All,
             )
           }
           onAddCommunity={addCommunity}
diff --git a/client/src/app/admin/page.tsx b/client/src/app/admin/page.tsx
index 15fe4a1..04ac897 100644
--- a/client/src/app/admin/page.tsx
+++ b/client/src/app/admin/page.tsx
@@ -19,7 +19,7 @@ import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import PeopleIcon from "@mui/icons-material/People"
 import EventNoteIcon from "@mui/icons-material/EventNote"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import TrendingUpIcon from "@mui/icons-material/TrendingUp"
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday"
 
@@ -70,10 +70,10 @@ interface DashboardData {
 function index() {
   const router = useRouter()
   const { isLogin, authUserData } = useAuth()
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error: showError } = useNotification()
   const [dashboardData, setDashboardData] = useState<DashboardData | null>(null)
   const [loading, setLoading] = useState(true)
-  const [error, setError] = useState("")
+  const [errorMsg, setErrorMsg] = useState("")
 
   useEffect(() => {
     hasPermission()
@@ -89,7 +89,7 @@ function index() {
     if (!isLogin || !authUserData) {
       router.push("/common/login?returnUrl=/admin")
     } else if (!authUserData.role.Admin) {
-      setNotificationMessage("관리자 권한이 없습니다.")
+      showError("관리자 권한이 없습니다.")
       router.push("/")
     } else {
       setLoading(false)
@@ -101,7 +101,7 @@ function index() {
       const { data } = await axios.get("/admin/dashboard")
       setDashboardData(data)
     } catch (err) {
-      setError("대시보드 데이터를 불러오는 중 오류가 발생했습니다.")
+      setErrorMsg("대시보드 데이터를 불러오는 중 오류가 발생했습니다.")
       console.error("Dashboard fetch error:", err)
     }
   }
@@ -124,7 +124,7 @@ function index() {
     )
   }
 
-  if (error) {
+  if (errorMsg) {
     return (
       <Stack
         style={{
@@ -134,7 +134,7 @@ function index() {
       >
         <Stack alignItems="center" justifyContent="center" flex={1} p={3}>
           <Alert severity="error" sx={{ mb: 2 }}>
-            {error}
+            {errorMsg}
           </Alert>
         </Stack>
       </Stack>
diff --git a/client/src/app/admin/soon/page.tsx b/client/src/app/admin/soon/page.tsx
index 6a126eb..537dbe2 100644
--- a/client/src/app/admin/soon/page.tsx
+++ b/client/src/app/admin/soon/page.tsx
@@ -8,7 +8,7 @@ import UserFilter from "./UserFilter"
 import UserTable from "./UserTable"
 import UserForm from "./UserForm"
 import { get, post, put, dele } from "@/config/api"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 const emptyUser = {
   id: "",
@@ -24,7 +24,7 @@ export default function Soon() {
   const [selectedUser, setSelectedUsers] = useState<User>(emptyUser)
   const [orderProperty, setOrderProperty] = useState<keyof User>("name")
   const [direction, setDirection] = useState<"asc" | "desc">("asc")
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
 
   // 필터 상태
   const [filterName, setFilterName] = useState("")
@@ -53,14 +53,14 @@ export default function Soon() {
     try {
       if (selectedUser.id) {
         await put("/admin/soon/update-user", selectedUser)
-        setNotificationMessage("사용자 정보가 수정되었습니다.")
+        success("사용자 정보가 수정되었습니다.")
       } else {
         await post("/admin/soon/insert-user", selectedUser)
-        setNotificationMessage("새 사용자가 추가되었습니다.")
+        success("새 사용자가 추가되었습니다.")
       }
       await fetchData()
-    } catch (error) {
-      setNotificationMessage("저장 중 오류가 발생했습니다.")
+    } catch (err) {
+      error("저장 중 오류가 발생했습니다.")
     }
   }
 
@@ -68,11 +68,11 @@ export default function Soon() {
     if (selectedUser.id && confirm("정말로 삭제하시겠습니까?")) {
       try {
         await dele(`/admin/soon/delete-user/${selectedUser.id}`, {})
-        setNotificationMessage("사용자가 삭제되었습니다.")
+        success("사용자가 삭제되었습니다.")
         clearSelectedUser()
         await fetchData()
-      } catch (error) {
-        setNotificationMessage("삭제 중 오류가 발생했습니다.")
+      } catch (err) {
+        error("삭제 중 오류가 발생했습니다.")
       }
     }
   }
diff --git a/client/src/app/admin/worshipSchedule/page.tsx b/client/src/app/admin/worshipSchedule/page.tsx
index b460304..bab9c96 100644
--- a/client/src/app/admin/worshipSchedule/page.tsx
+++ b/client/src/app/admin/worshipSchedule/page.tsx
@@ -29,24 +29,24 @@ import EditIcon from "@mui/icons-material/Edit"
 import SaveIcon from "@mui/icons-material/Save"
 import DeleteIcon from "@mui/icons-material/Delete"
 import SearchIcon from "@mui/icons-material/Search"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import CalendarMonthIcon from "@mui/icons-material/CalendarMonth"
 import { WorshipKind, WorshipSchedule } from "@server/entity/worshipSchedule"
 import axios from "@/config/axios"
 import dayjs from "dayjs"
 
 export default function WorshipSchedulePage() {
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
   const [worshipScheduleList, setWorshipScheduleList] = useState<
     WorshipSchedule[]
   >([])
 
   // Filter lists
   const [filterStartDate, setFilterStartDate] = useState(
-    dayjs().add(-1, "month").format("YYYY-MM-DD")
+    dayjs().add(-1, "month").format("YYYY-MM-DD"),
   )
   const [filterEndDate, setFilterEndDate] = useState(
-    dayjs().format("YYYY-MM-DD")
+    dayjs().format("YYYY-MM-DD"),
   )
   const [filterKind, setFilterKind] = useState<string>("")
   const [filterCanEdit, setFilterCanEdit] = useState<string>("")
@@ -80,14 +80,14 @@ export default function WorshipSchedulePage() {
 
     const { data: worshipScheduleList } = await axios.get(
       "/admin/worship-schedule",
-      { params }
+      { params },
     )
     setWorshipScheduleList(worshipScheduleList)
   }
 
   async function saveWorshipSchedule() {
     if (!selectedWorship.date || !selectedWorship.kind) {
-      setNotificationMessage("날짜와 종류를 모두 입력해주세요.")
+      error("날짜와 종류를 모두 입력해주세요.")
       return
     }
     if (selectedWorship.id) {
@@ -95,7 +95,7 @@ export default function WorshipSchedulePage() {
     } else {
       await axios.post("/admin/worship-schedule", selectedWorship)
     }
-    setNotificationMessage("예배 일정이 저장되었습니다.")
+    success("예배 일정이 저장되었습니다.")
     await fetchWorshipSchedules()
   }
 
@@ -111,7 +111,7 @@ export default function WorshipSchedulePage() {
   async function deleteWorshipSchedule() {
     if (!selectedWorship.id) return
     await axios.delete(`/admin/worship-schedule/${selectedWorship.id}`)
-    setNotificationMessage("예배 일정이 삭제되었습니다.")
+    success("예배 일정이 삭제되었습니다.")
     await fetchWorshipSchedules()
   }
 
@@ -247,7 +247,7 @@ export default function WorshipSchedulePage() {
                       .sort(
                         (a, b) =>
                           new Date(b.date).getTime() -
-                          new Date(a.date).getTime()
+                          new Date(a.date).getTime(),
                       )
                       .map((schedule) => (
                         <TableRow
@@ -395,7 +395,7 @@ export default function WorshipSchedulePage() {
                     onChange={(e) =>
                       editWorshipSchedule(
                         "isVisible",
-                        e.target.value === "true"
+                        e.target.value === "true",
                       )
                     }
                     size="small"
diff --git a/client/src/app/common/login/page.tsx b/client/src/app/common/login/page.tsx
index 6a8de1f..ca158f0 100644
--- a/client/src/app/common/login/page.tsx
+++ b/client/src/app/common/login/page.tsx
@@ -5,7 +5,7 @@ import { useEffect } from "react"
 import { useSetAtom } from "jotai"
 import useAuth from "@/hooks/useAuth"
 import { Button, Stack } from "@mui/material"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import { useRouter, useSearchParams } from "next/navigation"
 import useKakaoHook from "@/hooks/useKakao"
 
@@ -22,7 +22,7 @@ function Login() {
   const searchParams = useSearchParams()
   const { getKakaoTokenFromAuthCode, login, isLogin } = useAuth()
   const { executeKakaoLogin } = useKakaoHook()
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     const code = searchParams.get("code")
@@ -45,7 +45,7 @@ function Login() {
       const returnUrl = searchParams.get("returnUrl") || "/"
       await executeKakaoLogin(returnUrl)
     } catch (error) {
-      setNotificationMessage("카카오 로그인 실패")
+      error("카카오 로그인 실패")
     }
   }
 
diff --git a/client/src/app/event/worshipContest/vote/page.tsx b/client/src/app/event/worshipContest/vote/page.tsx
index a2d20b8..fe8580f 100644
--- a/client/src/app/event/worshipContest/vote/page.tsx
+++ b/client/src/app/event/worshipContest/vote/page.tsx
@@ -13,8 +13,7 @@ import {
   Avatar,
 } from "@mui/material"
 import useAuth from "@/hooks/useAuth"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import { useRouter } from "next/navigation"
 
 const 마을들: Record<string, string[]> = {
@@ -84,7 +83,7 @@ export default function VotePage() {
   const [firstCommunity, setFirstCommunity] = useState("")
   const [secondCommunity, setSecondCommunity] = useState("")
   const [thirdCommunity, setThirdCommunity] = useState("")
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
   const { push } = useRouter()
 
   useEffect(() => {
@@ -97,7 +96,7 @@ export default function VotePage() {
     const { data } = await axios.get("/event/worship-contest/status")
     setState(data.currentVoteStatus)
     if (data.currentVoteStatus === "투표불가") {
-      setNotificationMessage(`현재 투표가 불가능합니다.`)
+      error(`현재 투표가 불가능합니다.`)
       push("/event/worshipContest/main")
     }
   }
@@ -106,17 +105,15 @@ export default function VotePage() {
     try {
       const { data } = await axios.get("/event/worship-contest/my-village")
       setMyVillage(data.communityName)
-    } catch (error) {
-      setNotificationMessage(
-        "마을 정보를 불러오지 못했습니다.\n순장님에게 문의하세요."
-      )
+    } catch (err) {
+      error("마을 정보를 불러오지 못했습니다.\n순장님에게 문의하세요.")
       push("/event/worshipContest/main")
     }
   }
 
   async function submitVote() {
     const confirmed = confirm(
-      "제출한 투표는 수정할 수 없습니다. 제출하시겠습니까?"
+      "제출한 투표는 수정할 수 없습니다. 제출하시겠습니까?",
     )
     if (!confirmed) {
       return
@@ -128,9 +125,9 @@ export default function VotePage() {
         thirdCommunity,
         state,
       })
-      setNotificationMessage("투표가 완료되었습니다.")
-    } catch (error) {
-      setNotificationMessage(error.response.data.message)
+      success("투표가 완료되었습니다.")
+    } catch (err: any) {
+      error(err.response?.data?.message || "투표 중 오류가 발생했습니다.")
       return
     }
   }
@@ -354,28 +351,28 @@ export default function VotePage() {
               state === "1부 투표"
                 ? "linear-gradient(90deg, #b3e0f2 0%, #e0f7fa 100%)"
                 : state === "2부 투표"
-                ? "linear-gradient(90deg, #f8bbd0 0%, #fce4ec 100%)"
-                : undefined,
+                  ? "linear-gradient(90deg, #f8bbd0 0%, #fce4ec 100%)"
+                  : undefined,
             color: "#444",
             boxShadow:
               state === "1부 투표"
                 ? "0 2px 8px rgba(115,174,180,0.10)"
                 : state === "2부 투표"
-                ? "0 2px 8px rgba(239,160,174,0.10)"
-                : undefined,
+                  ? "0 2px 8px rgba(239,160,174,0.10)"
+                  : undefined,
             "&:hover": {
               background:
                 state === "1부 투표"
                   ? "linear-gradient(90deg, #e0f7fa 0%, #b3e0f2 100%)"
                   : state === "2부 투표"
-                  ? "linear-gradient(90deg, #fce4ec 0%, #f8bbd0 100%)"
-                  : undefined,
+                    ? "linear-gradient(90deg, #fce4ec 0%, #f8bbd0 100%)"
+                    : undefined,
               boxShadow:
                 state === "1부 투표"
                   ? "0 4px 16px rgba(115,174,180,0.15)"
                   : state === "2부 투표"
-                  ? "0 4px 16px rgba(239,160,174,0.15)"
-                  : undefined,
+                    ? "0 4px 16px rgba(239,160,174,0.15)"
+                    : undefined,
             },
           }}
           onClick={submitVote}
diff --git a/client/src/app/leader/all-attendance/page.tsx b/client/src/app/leader/all-attendance/page.tsx
index dccfeab..d27947c 100644
--- a/client/src/app/leader/all-attendance/page.tsx
+++ b/client/src/app/leader/all-attendance/page.tsx
@@ -18,13 +18,12 @@ import {
 import CommunityBox from "@/app/admin/soon/attendance/CommunityBox"
 import useAuth from "@/hooks/useAuth"
 import { useRouter } from "next/navigation"
-import { useAtom, useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function AttendanceAdminPage() {
   const [communities, setCommunities] = useState<Community[]>([])
   const [selectedCommunity, setSelectedCommunity] = useState<Community | null>(
-    null
+    null,
   )
   const [communityStack, setCommunityStack] = useState<Community[]>([])
   const [soonList, setSoonList] = useState<User[]>([])
@@ -35,12 +34,12 @@ export default function AttendanceAdminPage() {
 
   const { authUserData } = useAuth()
   const { push } = useRouter()
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     fetchCommunities()
     if (!authUserData?.role.VillageLeader) {
-      setNotificationMessage("접근 권한이 없습니다.")
+      error("접근 권한이 없습니다.")
       push("/leader")
     }
   }, [])
@@ -114,7 +113,7 @@ export default function AttendanceAdminPage() {
     const map: WorshipSchedule[] = []
     attendDataList.forEach((data) => {
       const existing = map.find(
-        (worshipSchedule) => worshipSchedule.id === data.worshipSchedule.id
+        (worshipSchedule) => worshipSchedule.id === data.worshipSchedule.id,
       )
       if (existing) {
         return
diff --git a/client/src/app/leader/management/page.tsx b/client/src/app/leader/management/page.tsx
index f0a8253..2a7eedb 100644
--- a/client/src/app/leader/management/page.tsx
+++ b/client/src/app/leader/management/page.tsx
@@ -20,8 +20,7 @@ import AddUser from "./AddUser"
 import PersonAddIcon from "@mui/icons-material/PersonAdd"
 import PeopleIcon from "@mui/icons-material/People"
 import PhoneIcon from "@mui/icons-material/Phone"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import { useRouter } from "next/navigation"
 import RequestKakaoLogin from "@/app/leader/management/RequestKakaoLogin"
 import useAuth from "@/hooks/useAuth"
@@ -32,7 +31,7 @@ export default function SoonManagement() {
   const [groupName, setGroupName] = useState("")
   const [soonList, setSoonList] = useState<User[]>([])
   const [openAddUser, setOpenAddUser] = useState(false)
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const notification = useNotification()
 
   useEffect(() => {
     isLeaderIfNotExit("/leader/management")
@@ -42,13 +41,13 @@ export default function SoonManagement() {
   async function fetchGroupDate() {
     try {
       const { data } = await axios.get<Community & { error: string }>(
-        "/soon/my-group-info"
+        "/soon/my-group-info",
       )
       setGroupName(data.name)
       setSoonList(data.users)
     } catch (error: any) {
       console.error("Error fetching group data:", error)
-      setNotificationMessage("순장만 이용할 수 있습니다.")
+      notification.error("순장만 이용할 수 있습니다.")
       push("/")
       return
     }
diff --git a/client/src/app/leader/newcomer/education/page.tsx b/client/src/app/leader/newcomer/education/page.tsx
index 3b16193..5bcff30 100644
--- a/client/src/app/leader/newcomer/education/page.tsx
+++ b/client/src/app/leader/newcomer/education/page.tsx
@@ -14,8 +14,7 @@ import {
 } from "@mui/material"
 import { useEffect, useState } from "react"
 import useAuth from "@/hooks/useAuth"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 interface WorshipSchedule {
   id: number
@@ -80,7 +79,7 @@ export default function NewcomerEducationPage() {
   )
   const [loading, setLoading] = useState(true)
   const [savingCell, setSavingCell] = useState<string | null>(null) // 저장 중인 셀 표시
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const notification = useNotification()
 
   useEffect(() => {
     isLeaderIfNotExit("/leader/newcomer/education")
@@ -103,6 +102,7 @@ export default function NewcomerEducationPage() {
       })
     } catch (error) {
       console.error("Error fetching education data:", error)
+      notification.error("교육 데이터를 불러오는 중 오류가 발생했습니다.")
     } finally {
       setLoading(false)
     }
@@ -198,7 +198,7 @@ export default function NewcomerEducationPage() {
       })
     } catch (error) {
       console.error("Error saving education data:", error)
-      setNotificationMessage("저장 중 오류가 발생했습니다.")
+      notification.error("저장 중 오류가 발생했습니다.")
     } finally {
       setSavingCell(null)
     }
diff --git a/client/src/app/leader/newcomer/management/page.tsx b/client/src/app/leader/newcomer/management/page.tsx
index ff8dde2..7f61eba 100644
--- a/client/src/app/leader/newcomer/management/page.tsx
+++ b/client/src/app/leader/newcomer/management/page.tsx
@@ -10,9 +10,8 @@ import {
   TextField,
 } from "@mui/material"
 import { useEffect, useState } from "react"
-import { useSetAtom } from "jotai"
 import axios from "@/config/axios"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import useAuth from "@/hooks/useAuth"
 import NewcomerTable from "./NewcomerTable"
 import NewcomerFilter from "./NewcomerFilter"
@@ -65,7 +64,7 @@ export default function NewcomerManagement() {
     useState<Newcomer>(emptyNewcomer)
   const [orderProperty, setOrderProperty] = useState<string>("name")
   const [direction, setDirection] = useState<"asc" | "desc">("asc")
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const notification = useNotification()
 
   // 필터 상태
   const [filterName, setFilterName] = useState("")
@@ -97,7 +96,7 @@ export default function NewcomerManagement() {
       setManagerList(managerRes.data)
     } catch (error) {
       console.error("Error fetching data:", error)
-      setNotificationMessage("데이터 조회에 실패했습니다.")
+      notification.error("데이터 조회에 실패했습니다.")
     }
   }
 
@@ -122,7 +121,7 @@ export default function NewcomerManagement() {
           assignmentId: selectedNewcomer.assignment?.id || null,
           status: selectedNewcomer.status,
         })
-        setNotificationMessage("새신자 정보가 수정되었습니다.")
+        notification.success("새신자 정보가 수정되었습니다.")
       } else {
         await axios.post("/newcomer", {
           name: selectedNewcomer.name,
@@ -131,12 +130,12 @@ export default function NewcomerManagement() {
           phone: selectedNewcomer.phone,
           newcomerManagerId: selectedNewcomer.newcomerManager?.id || null,
         })
-        setNotificationMessage("새신자가 추가되었습니다.")
+        notification.success("새신자가 추가되었습니다.")
       }
       await fetchData()
       clearSelectedNewcomer()
-    } catch (error) {
-      setNotificationMessage("저장 중 오류가 발생했습니다.")
+    } catch (err) {
+      notification.error("저장 중 오류가 발생했습니다.")
     }
   }
 
@@ -169,14 +168,14 @@ export default function NewcomerManagement() {
 
   async function handleDateConfirm() {
     if (!selectedDate) {
-      setNotificationMessage("날짜를 선택해주세요.")
+      notification.error("날짜를 선택해주세요.")
       return
     }
 
     try {
       if (dateDialogType === "delete") {
         await axios.delete(`/newcomer/${selectedNewcomer.id}`)
-        setNotificationMessage("새신자가 삭제되었습니다.")
+        notification.success("새신자가 삭제되었습니다.")
         clearSelectedNewcomer()
       } else if (dateDialogType === "pending") {
         await axios.put(`/newcomer/${selectedNewcomer.id}`, {
@@ -184,22 +183,22 @@ export default function NewcomerManagement() {
           status: "PENDING",
           pendingDate: selectedDate,
         })
-        setNotificationMessage("새신자가 보류 처리되었습니다.")
+        notification.success("새신자가 보류 처리되었습니다.")
       } else if (dateDialogType === "promotion") {
         await axios.put(`/newcomer/${selectedNewcomer.id}`, {
           ...selectedNewcomer,
           status: "PROMOTED",
           promotionDate: selectedDate,
         })
-        setNotificationMessage("새신자가 등반 처리되었습니다.")
+        notification.success("새신자가 등반 처리되었습니다.")
       }
 
       setDateDialogOpen(false)
       setDateDialogType("")
       setSelectedDate("")
       await fetchData()
-    } catch (error) {
-      setNotificationMessage("처리 중 오류가 발생했습니다.")
+    } catch (err) {
+      notification.error("처리 중 오류가 발생했습니다.")
     }
   }
 
diff --git a/client/src/app/leader/newcomer/managers/page.tsx b/client/src/app/leader/newcomer/managers/page.tsx
index 90129a3..fe587fd 100644
--- a/client/src/app/leader/newcomer/managers/page.tsx
+++ b/client/src/app/leader/newcomer/managers/page.tsx
@@ -17,8 +17,7 @@ import {
 import { useEffect, useState } from "react"
 import axios from "@/config/axios"
 import useAuth from "@/hooks/useAuth"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import CloseIcon from "@mui/icons-material/Close"
 import PersonAddIcon from "@mui/icons-material/PersonAdd"
 
@@ -47,7 +46,7 @@ export default function ManagerPage() {
   const [managerList, setManagerList] = useState<NewcomerManager[]>([])
   const [searchName, setSearchName] = useState("")
   const [loading, setLoading] = useState(true)
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
 
   useEffect(() => {
     isLeaderIfNotExit("/leader/newcomer/managers")
@@ -73,11 +72,11 @@ export default function ManagerPage() {
   async function addManager(userId: string) {
     try {
       await axios.post("/newcomer/managers", { userId })
-      setNotificationMessage("담당자로 지정되었습니다.")
+      success("담당자로 지정되었습니다.")
       await fetchData()
-    } catch (error) {
-      console.error("Error adding manager:", error)
-      setNotificationMessage("담당자 지정 중 오류가 발생했습니다.")
+    } catch (err) {
+      console.error("Error adding manager:", err)
+      error("담당자 지정 중 오류가 발생했습니다.")
     }
   }
 
@@ -85,11 +84,11 @@ export default function ManagerPage() {
     if (!confirm("정말로 담당자를 해제하시겠습니까?")) return
     try {
       await axios.delete(`/newcomer/managers/${managerId}`)
-      setNotificationMessage("담당자가 해제되었습니다.")
+      success("담당자가 해제되었습니다.")
       await fetchData()
-    } catch (error) {
-      console.error("Error removing manager:", error)
-      setNotificationMessage("담당자 해제 중 오류가 발생했습니다.")
+    } catch (err) {
+      console.error("Error removing manager:", err)
+      error("담당자 해제 중 오류가 발생했습니다.")
     }
   }
 
diff --git a/client/src/app/leader/postcard/page.tsx b/client/src/app/leader/postcard/page.tsx
index 3081f4c..327522b 100644
--- a/client/src/app/leader/postcard/page.tsx
+++ b/client/src/app/leader/postcard/page.tsx
@@ -8,8 +8,7 @@ import { useEffect, useState } from "react"
 import Header from "@/app/leader/components/Header"
 import { useRouter } from "next/navigation"
 import axios from "@/config/axios"
-import { useAtom, useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function PostcardPage() {
   const { push } = useRouter()
@@ -21,7 +20,7 @@ export default function PostcardPage() {
     userId: string
     text: string
   } | null>(null)
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { success } = useNotification()
 
   useEffect(() => {
     fetchGroupDate()
@@ -81,7 +80,7 @@ export default function PostcardPage() {
       targetUserId: selectedUser?.id,
     })
     localStorage.removeItem("postcardData")
-    setNotificationMessage("저장되었습니다.")
+    success("저장되었습니다.")
   }
 
   return (
diff --git a/client/src/app/retreat/admin/carpooling/page.tsx b/client/src/app/retreat/admin/carpooling/page.tsx
index 8578b69..8d832a4 100644
--- a/client/src/app/retreat/admin/carpooling/page.tsx
+++ b/client/src/app/retreat/admin/carpooling/page.tsx
@@ -4,8 +4,7 @@ import { get, post } from "@/config/api"
 import { useEffect, useState } from "react"
 import { Box, MenuItem, Select, Stack } from "@mui/material"
 import { useRouter } from "next/navigation"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import { Days, HowToMove, InOutType } from "@server/entity/types"
 import Header from "@/components/retreat/admin/Header"
@@ -13,7 +12,7 @@ import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 
 function Carpooling() {
   const router = useRouter()
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
   const [carList, setCarList] = useState([] as InOutInfo[])
   const [rideUserList, setRideUserList] = useState([] as InOutInfo[])
   const [selectedInfo, setSelectedInfo] = useState<InOutInfo>()
@@ -106,7 +105,7 @@ function Carpooling() {
       })
       .catch(() => {
         router.push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       })
   }
diff --git a/client/src/app/retreat/steps/fifthStep.tsx b/client/src/app/retreat/steps/fifthStep.tsx
index b47b7e4..1f60dc1 100644
--- a/client/src/app/retreat/steps/fifthStep.tsx
+++ b/client/src/app/retreat/steps/fifthStep.tsx
@@ -3,12 +3,11 @@
 import { Stack, Box } from "@mui/material"
 import useRetreat from "../hooks/useRetreat"
 import RetreatButton from "../components/Button"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function FifthStep() {
   const { isWorker, isHalf } = useRetreat()
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { success } = useNotification()
 
   function calculateRetreatFee() {
     if (isHalf) {
@@ -54,9 +53,9 @@ export default function FifthStep() {
             label={"계좌 복사하기"}
             onClick={() => {
               navigator.clipboard.writeText(
-                "3333342703455 카카오뱅크 성은비 " + calculateRetreatFee()
+                "3333342703455 카카오뱅크 성은비 " + calculateRetreatFee(),
               )
-              setNotificationMessage("계좌 정보가 복사되었습니다.")
+              success("계좌 정보가 복사되었습니다.")
             }}
           />
         </Stack>
diff --git a/client/src/app/retreat/steps/fourth.tsx b/client/src/app/retreat/steps/fourth.tsx
index 1a6d71c..820f68c 100644
--- a/client/src/app/retreat/steps/fourth.tsx
+++ b/client/src/app/retreat/steps/fourth.tsx
@@ -2,18 +2,16 @@
 
 import { Stack, Box } from "@mui/material"
 import useRetreat from "../hooks/useRetreat"
-import useAuth from "@/hooks/useAuth"
 import RetreatButton from "../components/Button"
 import { useEffect, useState } from "react"
 import { User } from "@server/entity/user"
-import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function FourthStep() {
   const [myInfo, setMyInfo] = useState<User | null>(null)
   const { saveRetreatAttend, getMyInfo, isWorker, isHalf, setStep } =
     useRetreat()
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
 
   useEffect(() => {
     getMyInfo().then((data) => {
@@ -34,12 +32,12 @@ export default function FourthStep() {
   async function saveRetreatAttendWrapper() {
     try {
       const { data } = await saveRetreatAttend()
-      setNotificationMessage(data.result)
+      success(data.result)
       setStep(5)
     } catch (e) {
-      setNotificationMessage(
+      error(
         "참가 신청에 실패했습니다. 새로고침 후 다시 시도해주세요." +
-          e.toString()
+          e.toString(),
       )
     }
   }
diff --git a/client/src/components/form/UserInformationForm.tsx b/client/src/components/form/UserInformationForm.tsx
index 685569c..1161a60 100644
--- a/client/src/components/form/UserInformationForm.tsx
+++ b/client/src/components/form/UserInformationForm.tsx
@@ -2,10 +2,8 @@
 
 import { post } from "@/config/api"
 import InOutFrom from "./InOutForm"
-import { useSetAtom } from "jotai"
-import { useRouter } from "next/navigation"
 import { HowToMove } from "@server/entity/types"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import { Dispatch, SetStateAction, useEffect, useState } from "react"
@@ -18,12 +16,11 @@ interface IProps {
 }
 
 export default function UserInformationForm(props: IProps) {
-  const router = useRouter()
   const [retreatAttend, setRetreatAttend] = useState<RetreatAttend | undefined>(
-    undefined
+    undefined,
   )
   const [inOutData, setInOutData] = useState<Array<InOutInfo>>([])
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
 
   useEffect(() => {
     setRetreatAttend(props.retreatAttend)
@@ -39,11 +36,11 @@ export default function UserInformationForm(props: IProps) {
 
   const submit = async () => {
     if (!retreatAttend) {
-      setNotificationMessage("수련회 접수 정보 없음.")
+      error("수련회 접수 정보 없음.")
       return
     }
     if (!retreatAttend.howToGo) {
-      setNotificationMessage("이동 방법을 선택해주세요.")
+      error("이동 방법을 선택해주세요.")
       return
     }
 
@@ -59,19 +56,17 @@ export default function UserInformationForm(props: IProps) {
     }
 
     if (saveResult.result !== "success") {
-      setNotificationMessage(
-        "접수중 오류가 발생하였습니다.\n다시 시도해주세요."
-      )
+      error("접수중 오류가 발생하였습니다.\n다시 시도해주세요.")
       return
     }
 
     if (attendTimeResult && attendTimeResult.result !== "success") {
-      setNotificationMessage(
-        "이동 정보 저장중에 문제가 발생하였습니다.\n시간, 장소. 이동 방법을 모두 입력해주세요."
+      error(
+        "이동 정보 저장중에 문제가 발생하였습니다.\n시간, 장소. 이동 방법을 모두 입력해주세요.",
       )
       return
     }
-    setNotificationMessage(`신청 내역이 저장이 되었습니다.`)
+    success(`신청 내역이 저장이 되었습니다.`)
     props.reloadFunction()
     props.setEditMode(false)
   }
diff --git a/client/src/components/notification/notification.tsx b/client/src/components/notification/notification.tsx
index fd3cdb7..b88961a 100644
--- a/client/src/components/notification/notification.tsx
+++ b/client/src/components/notification/notification.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from "react"
+import { useEffect, useState, useCallback, useRef } from "react"
 import { useAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
+import { notificationAtom, NotificationType } from "@/state/notification"
 import {
   Alert,
   Snackbar,
@@ -9,13 +9,14 @@ import {
   Fade,
   Box,
   Typography,
+  Button,
 } from "@mui/material"
 import { TransitionProps } from "@mui/material/transitions"
 import React from "react"
 
 // Slide transition component for smoother animations
 function SlideTransition(
-  props: TransitionProps & { children: React.ReactElement }
+  props: TransitionProps & { children: React.ReactElement },
 ) {
   return <Slide {...props} direction="left" />
 }
@@ -24,59 +25,107 @@ interface NotificationItem {
   id: number
   content: string
   isVisible: boolean
-  severity?: "success" | "info" | "warning" | "error"
+  type: NotificationType
+  duration: number
+  action?: {
+    label: string
+    onClick: () => void
+  }
 }
 
 export default function Notification() {
-  const [notificationMessage, setNotificationMessage] =
-    useAtom(NotificationMessage)
+  const [notification, setNotification] = useAtom(notificationAtom)
   const [notifications, setNotifications] = useState<NotificationItem[]>([])
   const [nextId, setNextId] = useState(1)
+  const timerRefs = useRef<Map<number, NodeJS.Timeout>>(new Map())
 
   // Add new notification when message changes
   useEffect(() => {
-    if (notificationMessage.trim().length > 0) {
+    if (notification) {
       const newNotification: NotificationItem = {
         id: nextId,
-        content: notificationMessage,
+        content: notification.message,
         isVisible: true,
-        severity: "success",
+        type: notification.type || "success",
+        duration: notification.duration || 4000,
+        action: notification.action,
       }
 
       setNotifications((prev) => [...prev, newNotification])
       setNextId(nextId + 1)
-      setNotificationMessage("")
+      setNotification(null)
 
-      // Auto remove after 4 seconds
-      setTimeout(() => {
+      // Auto remove after duration
+      const timer = setTimeout(() => {
         setNotifications((prev) =>
           prev.map((notif) =>
             notif.id === newNotification.id
               ? { ...notif, isVisible: false }
-              : notif
-          )
+              : notif,
+          ),
         )
 
         // Remove from array after fade out animation
         setTimeout(() => {
           setNotifications((prev) =>
-            prev.filter((notif) => notif.id !== newNotification.id)
+            prev.filter((notif) => notif.id !== newNotification.id),
           )
         }, 300)
-      }, 4000)
+      }, newNotification.duration)
+
+      timerRefs.current.set(newNotification.id, timer)
+    }
+  }, [notification, nextId, setNotification])
+
+  // Cleanup timers on unmount
+  useEffect(() => {
+    return () => {
+      timerRefs.current.forEach((timer) => clearTimeout(timer))
+      timerRefs.current.clear()
     }
-  }, [notificationMessage, nextId])
+  }, [])
 
-  const handleClose = (id: number) => {
+  const handleClose = useCallback((id: number) => {
     setNotifications((prev) =>
       prev.map((notif) =>
-        notif.id === id ? { ...notif, isVisible: false } : notif
-      )
+        notif.id === id ? { ...notif, isVisible: false } : notif,
+      ),
     )
 
+    const timer = timerRefs.current.get(id)
+    if (timer) {
+      clearTimeout(timer)
+      timerRefs.current.delete(id)
+    }
+
     setTimeout(() => {
       setNotifications((prev) => prev.filter((notif) => notif.id !== id))
     }, 300)
+  }, [])
+
+  const getSeverityColor = (type: NotificationType) => {
+    switch (type) {
+      case "success":
+        return {
+          background: "linear-gradient(135deg, #4caf50 0%, #45a049 100%)",
+          color: "white",
+        }
+      case "error":
+        return {
+          background: "linear-gradient(135deg, #f44336 0%, #d32f2f 100%)",
+          color: "white",
+        }
+      case "warning":
+        return {
+          background: "linear-gradient(135deg, #ff9800 0%, #f57c00 100%)",
+          color: "white",
+        }
+      case "info":
+        return {
+          background: "linear-gradient(135deg, #2196f3 0%, #1976d2 100%)",
+          color: "white",
+        }
+    }
   }
 
   return (
@@ -91,43 +140,63 @@ export default function Notification() {
       }}
     >
       <Stack spacing={1}>
-        {notifications.map((notification) => (
-          <Fade key={notification.id} in={notification.isVisible} timeout={300}>
-            <Box>
-              <Alert
-                severity={notification.severity}
-                onClose={() => handleClose(notification.id)}
-                sx={{
-                  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
-                  borderRadius: 2,
-                  "& .MuiAlert-message": {
-                    fontSize: "0.95rem",
-                    fontWeight: 500,
-                  },
-                  "& .MuiAlert-action": {
-                    padding: 0,
-                  },
-                  background:
-                    notification.severity === "success"
-                      ? "linear-gradient(135deg, #4caf50 0%, #45a049 100%)"
-                      : undefined,
-                  color:
-                    notification.severity === "success" ? "white" : undefined,
-                  "& .MuiAlert-icon, & .MuiIconButton-root": {
-                    color:
-                      notification.severity === "success" ? "white" : undefined,
-                    fontSize:
-                      notification.severity === "success" ? "1.2rem" : "1.2rem",
-                  },
-                }}
-              >
-                <Typography variant="body2" sx={{ fontWeight: 500 }}>
-                  {notification.content}
-                </Typography>
-              </Alert>
-            </Box>
-          </Fade>
-        ))}
+        {notifications.map((notification) => {
+          const colors = getSeverityColor(notification.type)
+          return (
+            <Fade
+              key={notification.id}
+              in={notification.isVisible}
+              timeout={300}
+            >
+              <Box>
+                <Alert
+                  severity={notification.type}
+                  onClose={() => handleClose(notification.id)}
+                  action={
+                    notification.action ? (
+                      <Button
+                        color="inherit"
+                        size="small"
+                        onClick={() => {
+                          notification.action!.onClick()
+                          handleClose(notification.id)
+                        }}
+                        sx={{
+                          color: "white",
+                          textDecoration: "underline",
+                          fontWeight: 600,
+                        }}
+                      >
+                        {notification.action.label}
+                      </Button>
+                    ) : undefined
+                  }
+                  sx={{
+                    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                    borderRadius: 2,
+                    "& .MuiAlert-message": {
+                      fontSize: "0.95rem",
+                      fontWeight: 500,
+                    },
+                    "& .MuiAlert-action": {
+                      padding: 0,
+                    },
+                    background: colors.background,
+                    color: colors.color,
+                    "& .MuiAlert-icon, & .MuiIconButton-root": {
+                      color: colors.color,
+                      fontSize: "1.2rem",
+                    },
+                  }}
+                >
+                  <Typography variant="body2" sx={{ fontWeight: 500 }}>
+                    {notification.content}
+                  </Typography>
+                </Alert>
+              </Box>
+            </Fade>
+          )
+        })}
       </Stack>
     </Box>
   )
diff --git a/client/src/hooks/useAuth.ts b/client/src/hooks/useAuth.ts
index 6ba776d..bb2d41f 100644
--- a/client/src/hooks/useAuth.ts
+++ b/client/src/hooks/useAuth.ts
@@ -2,13 +2,13 @@
 
 import { jwtDecode } from "jwt-decode"
 import { useEffect } from "react"
-import { atom, useAtom, useAtomValue, useSetAtom } from "jotai"
+import { atom, useAtom, useAtomValue } from "jotai"
 import dayjs from "dayjs"
 import { Role } from "@server/util/type"
 import axios from "@/config/axios"
 import { Community } from "@server/entity/community"
 import { useRouter } from "next/navigation"
-import { NotificationMessage } from "@/state/notification"
+import { useNotification } from "@/hooks/useNotification"
 
 export const JwtInformationAtom = atom<jwtPayload | null | undefined>(null)
 
@@ -28,7 +28,7 @@ const kakaoTokenAtom = atom<string | null>(null)
 export default function useAuth() {
   const { push } = useRouter()
   const isLogin = useAtomValue(isLoginAtom)
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
   const [authUserData, setAuthUserData] = useAtom(JwtInformationAtom)
   const [kakaoToken, setKakaoToken] = useAtom(kakaoTokenAtom)
 
@@ -110,7 +110,7 @@ export default function useAuth() {
 
     if (authUserData.role.Leader === false) {
       push("/")
-      setNotificationMessage("순장 권한이 없습니다.")
+      error("순장 권한이 없습니다.")
       return false
     }
     return true
@@ -125,7 +125,7 @@ export default function useAuth() {
 
     if (authUserData.role.Admin === false) {
       push("/")
-      setNotificationMessage("관리자 권한이 없습니다.")
+      error("관리자 권한이 없습니다.")
       return false
     }
     return true
diff --git a/client/src/hooks/useNotification.ts b/client/src/hooks/useNotification.ts
new file mode 100644
index 0000000..8aebe33
--- /dev/null
+++ b/client/src/hooks/useNotification.ts
@@ -0,0 +1,61 @@
+import { useSetAtom } from "jotai"
+import { notificationAtom, NotificationOptions } from "@/state/notification"
+
+export function useNotification() {
+  const setNotification = useSetAtom(notificationAtom)
+
+  return {
+    notify: (message: string, options?: Partial<NotificationOptions>) => {
+      setNotification({
+        message,
+        type: options?.type || "success",
+        duration: options?.duration || 4000,
+        action: options?.action,
+      })
+    },
+    success: (
+      message: string,
+      options?: Omit<NotificationOptions, "type" | "message">,
+    ) => {
+      setNotification({
+        message,
+        type: "success",
+        duration: options?.duration || 4000,
+        action: options?.action,
+      })
+    },
+    error: (
+      message: string,
+      options?: Omit<NotificationOptions, "type" | "message">,
+    ) => {
+      setNotification({
+        message,
+        type: "error",
+        duration: options?.duration || 4000,
+        action: options?.action,
+      })
+    },
+    warning: (
+      message: string,
+      options?: Omit<NotificationOptions, "type" | "message">,
+    ) => {
+      setNotification({
+        message,
+        type: "warning",
+        duration: options?.duration || 4000,
+        action: options?.action,
+      })
+    },
+    info: (
+      message: string,
+      options?: Omit<NotificationOptions, "type" | "message">,
+    ) => {
+      setNotification({
+        message,
+        type: "info",
+        duration: options?.duration || 4000,
+        action: options?.action,
+      })
+    },
+  }
+}
diff --git a/client/src/state/notification.ts b/client/src/state/notification.ts
index ec2fa1c..ee8cb53 100644
--- a/client/src/state/notification.ts
+++ b/client/src/state/notification.ts
@@ -1,3 +1,15 @@
 import { atom } from "jotai"
 
-export const NotificationMessage = atom<string>("")
+export type NotificationType = "success" | "error" | "warning" | "info"
+
+export interface NotificationOptions {
+  message: string
+  type?: NotificationType
+  duration?: number
+  action?: {
+    label: string
+    onClick: () => void
+  }
+}
+
+export const notificationAtom = atom<NotificationOptions | null>(null)

From deff25091cce0967c276e36782f34b60eb6d8e54 Mon Sep 17 00:00:00 2001
From: iubns <iubns@naver.com>
Date: Mon, 9 Feb 2026 21:50:26 +0900
Subject: [PATCH 2/5] feat: notification update

---
 .../src/app/retreat/admin/all-user/page.tsx   | 10 +++++-----
 .../retreat/admin/carpooling-list/page.tsx    | 14 ++++++-------
 .../app/retreat/admin/deposit-check/page.tsx  |  8 ++++----
 .../app/retreat/admin/edit-user-data/page.tsx | 16 +++++++--------
 .../retreat/admin/group-formation/page.tsx    | 14 ++++++-------
 .../src/app/retreat/admin/inout-info/page.tsx | 14 ++++++-------
 .../retreat/admin/permission-manage/page.tsx  | 10 +++++-----
 .../retreat/admin/room-assignment/page.tsx    | 20 +++++++++----------
 .../retreat/admin/show-status-table/page.tsx  | 18 ++++++++---------
 9 files changed, 62 insertions(+), 62 deletions(-)

diff --git a/client/src/app/retreat/admin/all-user/page.tsx b/client/src/app/retreat/admin/all-user/page.tsx
index 6faa08f..055a26a 100644
--- a/client/src/app/retreat/admin/all-user/page.tsx
+++ b/client/src/app/retreat/admin/all-user/page.tsx
@@ -10,18 +10,18 @@ import {
   TableRow,
 } from "@mui/material"
 import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
 import { useRouter } from "next/navigation"
 import { HowToMove } from "@server/entity/types"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import { get } from "@/config/api"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 function AllUser() {
   const router = useRouter()
   const [allUserList, setAllUserList] = useState<Array<RetreatAttend>>([])
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
 
   useEffect(() => {
     ;(async () => {
@@ -29,12 +29,12 @@ function AllUser() {
         const list: RetreatAttend[] = await get("/retreat/admin/get-all-user")
         if (list) {
           setAllUserList(
-            list.sort((a, b) => a.attendanceNumber - b.attendanceNumber)
+            list.sort((a, b) => a.attendanceNumber - b.attendanceNumber),
           )
         }
       } catch {
         router.push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       }
     })()
@@ -42,7 +42,7 @@ function AllUser() {
 
   function downloadFile() {
     if (allUserList.length === 0) {
-      setNotificationMessage("접수자가 없습니다!.")
+      error("접수자가 없습니다!.")
       return
     }
 
diff --git a/client/src/app/retreat/admin/carpooling-list/page.tsx b/client/src/app/retreat/admin/carpooling-list/page.tsx
index d8cd1c4..7975614 100644
--- a/client/src/app/retreat/admin/carpooling-list/page.tsx
+++ b/client/src/app/retreat/admin/carpooling-list/page.tsx
@@ -14,24 +14,24 @@ import {
 } from "@mui/material"
 import { get } from "@/config/api"
 import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
 import { useRouter } from "next/navigation"
 import { Days, HowToMove } from "@server/entity/types"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 let allInoutInfoList: InOutInfo[] = []
 
 export default function CarpoolingList() {
   const router = useRouter()
   const [moveTypeFilter, setMoveTypeFilter] = useState<HowToMove>(
-    HowToMove.none
+    HowToMove.none,
   )
   const [matchFilter, setMatchFilter] = useState<
     "true" | "false" | "undefined"
   >("undefined")
   const [inOutInfoList, setAllUserList] = useState<Array<InOutInfo>>([])
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     ;(async () => {
@@ -43,7 +43,7 @@ export default function CarpoolingList() {
         }
       } catch {
         router.push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       }
     })()
@@ -54,18 +54,18 @@ export default function CarpoolingList() {
     if (matchFilter === "true") {
       result = result.filter(
         (inOutInfo) =>
-          inOutInfo.userInTheCar.length > 0 || !!inOutInfo.rideCarInfo
+          inOutInfo.userInTheCar.length > 0 || !!inOutInfo.rideCarInfo,
       )
     } else if (matchFilter === "false") {
       result = result.filter(
         (inOutInfo) =>
-          inOutInfo.userInTheCar.length === 0 && !inOutInfo.rideCarInfo
+          inOutInfo.userInTheCar.length === 0 && !inOutInfo.rideCarInfo,
       )
     }
 
     if (moveTypeFilter !== HowToMove.none) {
       result = result.filter(
-        (inOutInfo) => inOutInfo.howToMove === moveTypeFilter
+        (inOutInfo) => inOutInfo.howToMove === moveTypeFilter,
       )
     }
 
diff --git a/client/src/app/retreat/admin/deposit-check/page.tsx b/client/src/app/retreat/admin/deposit-check/page.tsx
index 487f9a0..b15b049 100644
--- a/client/src/app/retreat/admin/deposit-check/page.tsx
+++ b/client/src/app/retreat/admin/deposit-check/page.tsx
@@ -12,11 +12,11 @@ import {
 import { get, post } from "@/config/api"
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
-import { NotificationMessage } from "@/state/notification"
 import { useSetAtom } from "jotai"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import { Deposit } from "@server/entity/types"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 function DepositCheck() {
   const { push } = useRouter()
@@ -25,7 +25,7 @@ function DepositCheck() {
   const [isShowUnpaid, setIsShowUnpaid] = useState(false)
   const [depositSum, setDepositSum] = useState(0)
   const [allUserList, setAllUserList] = useState([] as Array<RetreatAttend>)
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     fetchData()
@@ -41,7 +41,7 @@ function DepositCheck() {
     })
 
     if (result.result === "error") {
-      alert("오류 발생!")
+      error("오류 발생!")
       return
     }
 
@@ -89,7 +89,7 @@ function DepositCheck() {
       })
       .catch(() => {
         push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       })
   }
diff --git a/client/src/app/retreat/admin/edit-user-data/page.tsx b/client/src/app/retreat/admin/edit-user-data/page.tsx
index 5b6ef2a..34c6e4d 100644
--- a/client/src/app/retreat/admin/edit-user-data/page.tsx
+++ b/client/src/app/retreat/admin/edit-user-data/page.tsx
@@ -12,29 +12,29 @@ import {
 } from "@mui/material"
 import UserInformationForm from "@/components/form/UserInformationForm"
 import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
 import { useRouter } from "next/navigation"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function EditUserData() {
   const { push } = useRouter()
   const [userList, setUserList] = useState([] as Array<RetreatAttend>)
   const [selectedUserId, setSelectedUserId] = useState("")
   const [retreatAttend, setRetreatAttend] = useState<RetreatAttend | undefined>(
-    undefined
+    undefined,
   )
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error, success } = useNotification()
 
   useEffect(() => {
     get("/retreat/admin/get-all-user")
       .then((response: Array<RetreatAttend>) => {
         setUserList(
-          response.sort((a, b) => (a.user.name > b.user.name ? 1 : -1))
+          response.sort((a, b) => (a.user.name > b.user.name ? 1 : -1)),
         )
         if (global.location.search) {
           const retreatAttendId = new URLSearchParams(
-            global.location.search
+            global.location.search,
           ).get("retreatAttendId")
           setSelectedUserId(retreatAttendId ? retreatAttendId : "")
         } else if (response.length > 0) {
@@ -43,7 +43,7 @@ export default function EditUserData() {
       })
       .catch(() => {
         push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       })
   }, [])
@@ -71,7 +71,7 @@ export default function EditUserData() {
       `${
         userList.find((retreatAttend) => retreatAttend.id === selectedUserId)
           ?.user.name
-      }의 정보를 삭제하시겠습니까?`
+      }의 정보를 삭제하시겠습니까?`,
     )
     if (!c) {
       return
@@ -81,7 +81,7 @@ export default function EditUserData() {
     })
 
     if (result === "success") {
-      setNotificationMessage("삭제되었습니다.")
+      success("삭제되었습니다.")
     }
   }
 
diff --git a/client/src/app/retreat/admin/group-formation/page.tsx b/client/src/app/retreat/admin/group-formation/page.tsx
index 82a18eb..a4b4fef 100644
--- a/client/src/app/retreat/admin/group-formation/page.tsx
+++ b/client/src/app/retreat/admin/group-formation/page.tsx
@@ -4,16 +4,16 @@ import { Box, Stack } from "@mui/material"
 import { useEffect, useState } from "react"
 import { get, post } from "@/config/api"
 import { useRouter } from "next/navigation"
-import { NotificationMessage } from "@/state/notification"
 import { useSetAtom } from "jotai"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 function GroupFormation() {
   const { push } = useRouter()
   const [unassignedUserList, setUnassignedUserList] = useState(
-    [] as Array<RetreatAttend>
+    [] as Array<RetreatAttend>,
   )
   const [groupList, setGroupList] = useState([] as Array<Array<RetreatAttend>>)
   const [selectedUser, setSelectedUser] = useState<RetreatAttend>()
@@ -24,7 +24,7 @@ function GroupFormation() {
   const [showUserInfo, setShowUserInfo] = useState({} as RetreatAttend)
 
   const [userAttendInfo, setUserAttendInfo] = useState([] as Array<InOutInfo>)
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   function onMouseMove(event: MouseEvent) {
     setMousePoint([event.pageX, event.pageY])
@@ -49,7 +49,7 @@ function GroupFormation() {
 
         const group = [] as Array<Array<RetreatAttend>>
         const assignedUserList = response.filter(
-          (retreatAttend) => retreatAttend.groupNumber !== 0
+          (retreatAttend) => retreatAttend.groupNumber !== 0,
         )
         assignedUserList.map((retreatAttend) => {
           const groupNumber = retreatAttend.groupNumber - 1
@@ -61,13 +61,13 @@ function GroupFormation() {
           setGroupList(group)
         })
         const maxNumber = Math.max(
-          ...response.map((retreatAttend) => retreatAttend.groupNumber)
+          ...response.map((retreatAttend) => retreatAttend.groupNumber),
         )
         setMaxGroupNumber(maxNumber)
       })
       .catch(() => {
         push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       })
   }
@@ -257,7 +257,7 @@ function GroupFormation() {
             } else {
               return Group(
                 group[0].groupNumber,
-                group.sort((a, b) => a.user.yearOfBirth - b.user.yearOfBirth)
+                group.sort((a, b) => a.user.yearOfBirth - b.user.yearOfBirth),
               )
             }
           })}
diff --git a/client/src/app/retreat/admin/inout-info/page.tsx b/client/src/app/retreat/admin/inout-info/page.tsx
index 724c0ed..b3603a3 100644
--- a/client/src/app/retreat/admin/inout-info/page.tsx
+++ b/client/src/app/retreat/admin/inout-info/page.tsx
@@ -4,17 +4,17 @@ import { useEffect, useState } from "react"
 import { Box, Stack } from "@mui/material"
 import { useRouter } from "next/navigation"
 import { get } from "@/config/api"
-import { NotificationMessage } from "@/state/notification"
 import { useSetAtom } from "jotai"
 import { Days, HowToMove, InOutType } from "@server/entity/types"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
+import { useNotification } from "@/hooks/useNotification"
 
 function InoutInfo() {
   const router = useRouter()
   const [allUserList, setAllUserList] = useState<Array<RetreatAttend>>([])
   const [allInoutInfo, setAllInoutInfo] = useState([] as InOutInfo[])
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     ;(async () => {
@@ -25,7 +25,7 @@ function InoutInfo() {
         }
       } catch {
         router.push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       }
       get("/retreat/admin/get-car-info")
@@ -34,7 +34,7 @@ function InoutInfo() {
         })
         .catch(() => {
           router.push("/retreat/admin")
-          setNotificationMessage("권한이 없습니다.")
+          error("권한이 없습니다.")
           return
         })
     })()
@@ -70,7 +70,7 @@ function InoutInfo() {
           .sort(
             (a, b) =>
               a.retreatAttend.user.yearOfBirth -
-              b.retreatAttend.user.yearOfBirth
+              b.retreatAttend.user.yearOfBirth,
           )
           .map((info) => (
             <Stack
@@ -97,7 +97,7 @@ function InoutInfo() {
           .sort(
             (a, b) =>
               a.retreatAttend.user.yearOfBirth -
-              b.retreatAttend.user.yearOfBirth
+              b.retreatAttend.user.yearOfBirth,
           )
           .map((info) => (
             <Stack
@@ -124,7 +124,7 @@ function InoutInfo() {
           .sort(
             (a, b) =>
               a.retreatAttend.user.yearOfBirth -
-              b.retreatAttend.user.yearOfBirth
+              b.retreatAttend.user.yearOfBirth,
           )
           .map((info) => (
             <Stack
diff --git a/client/src/app/retreat/admin/permission-manage/page.tsx b/client/src/app/retreat/admin/permission-manage/page.tsx
index 3682f01..53f6cff 100644
--- a/client/src/app/retreat/admin/permission-manage/page.tsx
+++ b/client/src/app/retreat/admin/permission-manage/page.tsx
@@ -15,9 +15,9 @@ import {
 } from "@mui/material"
 import { useRouter } from "next/navigation"
 import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
 import { PermissionType } from "@server/entity/types"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 function PermissionManage() {
   const { push } = useRouter()
@@ -26,7 +26,7 @@ function PermissionManage() {
   const [userPermission, setUserPermission] = useState<{
     [key: number]: boolean
   }>({})
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     get("/retreat/admin/get-all-user-name")
@@ -38,7 +38,7 @@ function PermissionManage() {
       })
       .catch(() => {
         push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       })
   }, [])
@@ -73,7 +73,7 @@ function PermissionManage() {
       const data: { [key: number]: boolean } = {}
       response.map(
         (permission: { permissionType: number; have: boolean }) =>
-          (data[permission.permissionType] = permission.have)
+          (data[permission.permissionType] = permission.have),
       )
       setUserPermission(data)
     })
@@ -81,7 +81,7 @@ function PermissionManage() {
 
   function onChangePermission(
     event: ChangeEvent<HTMLInputElement>,
-    key: number
+    key: number,
   ) {
     post("/retreat/admin/set-user-permission", {
       userId: selectedUserId,
diff --git a/client/src/app/retreat/admin/room-assignment/page.tsx b/client/src/app/retreat/admin/room-assignment/page.tsx
index babcac5..2857518 100644
--- a/client/src/app/retreat/admin/room-assignment/page.tsx
+++ b/client/src/app/retreat/admin/room-assignment/page.tsx
@@ -5,15 +5,15 @@ import { useEffect, useState } from "react"
 import { get, post } from "../../../../config/api"
 import { useRouter } from "next/navigation"
 import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import Header from "@/components/retreat/admin/Header"
+import { useNotification } from "@/hooks/useNotification"
 
 function RoomAssingment() {
   const { push } = useRouter()
   const [unassignedUserList, setUnassignedUserList] = useState(
-    [] as Array<RetreatAttend>
+    [] as Array<RetreatAttend>,
   )
   const [roomList, setRoomList] = useState([] as Array<Array<RetreatAttend>>)
   const [selectedUser, setSelectedUser] = useState<RetreatAttend>()
@@ -26,7 +26,7 @@ function RoomAssingment() {
   const [shiftPosition, setShiftPosition] = useState({ x: 0, y: 0 })
 
   const [gender, setGender] = useState("man")
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   function onMouseMove(event: MouseEvent) {
     setMousePoint([event.pageX, event.pageY])
@@ -47,14 +47,14 @@ function RoomAssingment() {
         const unassignedUserList = response
           .filter(
             (retreatAttend) =>
-              !retreatAttend.roomNumber || retreatAttend.roomNumber === 0
+              !retreatAttend.roomNumber || retreatAttend.roomNumber === 0,
           )
           .sort((a, b) => a.user.yearOfBirth - b.user.yearOfBirth)
         setUnassignedUserList(unassignedUserList)
 
         const room = [] as Array<Array<RetreatAttend>>
         const assignedUserList = response.filter(
-          (retreatAttend) => retreatAttend.roomNumber
+          (retreatAttend) => retreatAttend.roomNumber,
         )
         assignedUserList.map((retreatAttend) => {
           const roomNumber = retreatAttend.roomNumber - 1
@@ -63,19 +63,19 @@ function RoomAssingment() {
           } else {
             room[roomNumber].push(retreatAttend)
             room[roomNumber].sort(
-              (a, b) => a.user.yearOfBirth - b.user.yearOfBirth
+              (a, b) => a.user.yearOfBirth - b.user.yearOfBirth,
             )
           }
           setRoomList(room)
         })
         const maxNumber = Math.max(
-          ...response.map((retreatAttend) => retreatAttend.roomNumber)
+          ...response.map((retreatAttend) => retreatAttend.roomNumber),
         )
         setMaxRoomNumber(maxNumber)
       })
       .catch(() => {
         push("/retreat/admin")
-        setNotificationMessage("권한이 없습니다.")
+        error("권한이 없습니다.")
         return
       })
   }
@@ -213,7 +213,7 @@ function RoomAssingment() {
           {roomNumber}번 방 (
           {
             userList.filter(
-              (retreatAttend) => retreatAttend.user.gender === gender
+              (retreatAttend) => retreatAttend.user.gender === gender,
             ).length
           }
           )
@@ -299,7 +299,7 @@ function RoomAssingment() {
               미배정(
               {
                 unassignedUserList.filter(
-                  (roomNumber) => roomNumber.user.gender === gender
+                  (roomNumber) => roomNumber.user.gender === gender,
                 ).length
               }
               명)
diff --git a/client/src/app/retreat/admin/show-status-table/page.tsx b/client/src/app/retreat/admin/show-status-table/page.tsx
index 528623c..c6c8fad 100644
--- a/client/src/app/retreat/admin/show-status-table/page.tsx
+++ b/client/src/app/retreat/admin/show-status-table/page.tsx
@@ -6,14 +6,14 @@ import { useRouter } from "next/navigation"
 import { get } from "@/config/api"
 import { useEffect, useState } from "react"
 import { useSetAtom } from "jotai"
-import { NotificationMessage } from "@/state/notification"
 import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function ShowStatusTable() {
   const router = useRouter()
   const [statusFilter, setStatusFilter] = useState(CurrentStatus.arriveChurch)
   const [allUserList, setAllUserList] = useState<Array<RetreatAttend>>([])
-  const setNotificationMessage = useSetAtom(NotificationMessage)
+  const { error } = useNotification()
 
   useEffect(() => {
     fetchUserData()
@@ -25,25 +25,25 @@ export default function ShowStatusTable() {
       const list: RetreatAttend[] = await get("/retreat/admin/get-all-user")
       if (list) {
         setAllUserList(
-          list.sort((a, b) => a.user.yearOfBirth - b.user.yearOfBirth)
+          list.sort((a, b) => a.user.yearOfBirth - b.user.yearOfBirth),
         )
       }
     } catch {
       router.push("/retreat/admin")
-      setNotificationMessage("권한이 없습니다.")
+      error("권한이 없습니다.")
       return
     }
   }
 
   function ArriveCurchUserList() {
     const busUser = allUserList.filter(
-      (user) => user.howToGo === HowToMove.together
+      (user) => user.howToGo === HowToMove.together,
     )
     const arriveUser = busUser.filter(
-      (user) => user.currentStatus === CurrentStatus.arriveChurch
+      (user) => user.currentStatus === CurrentStatus.arriveChurch,
     )
     const notArriveUser = busUser.filter(
-      (user) => user.currentStatus === CurrentStatus.null
+      (user) => user.currentStatus === CurrentStatus.null,
     )
     return (
       <Stack gap="24px">
@@ -78,11 +78,11 @@ export default function ShowStatusTable() {
 
   function ArriveAuditoriumUserList() {
     const arriveUser = allUserList.filter(
-      (user) => user.currentStatus === CurrentStatus.arriveAuditorium
+      (user) => user.currentStatus === CurrentStatus.arriveAuditorium,
     )
 
     const notArriveUser = allUserList.filter(
-      (user) => user.currentStatus !== CurrentStatus.arriveAuditorium
+      (user) => user.currentStatus !== CurrentStatus.arriveAuditorium,
     )
 
     return (

From a555d3c40b2337fbe9ebd891986535cbf75771bd Mon Sep 17 00:00:00 2001
From: iubns <iubns@naver.com>
Date: Mon, 9 Feb 2026 22:22:56 +0900
Subject: [PATCH 3/5] =?UTF-8?q?update:=20=EC=88=98=EB=A0=A8=ED=9A=8C=20?=
 =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9D=BC=EB=B6=80=20=EA=B0=9C?=
 =?UTF-8?q?=ED=8E=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/retreat/admin/all-user/page.tsx   | 273 ++++++++++++++----
 .../app/retreat/admin/dash-board/StatCard.tsx |  68 ++++-
 .../src/app/retreat/admin/dash-board/page.tsx | 187 +-----------
 client/src/app/retreat/admin/page.tsx         | 267 ++++++++++++++++-
 .../components/retreat/admin/Header/index.tsx |  52 ++--
 5 files changed, 566 insertions(+), 281 deletions(-)

diff --git a/client/src/app/retreat/admin/all-user/page.tsx b/client/src/app/retreat/admin/all-user/page.tsx
index 055a26a..49f7e05 100644
--- a/client/src/app/retreat/admin/all-user/page.tsx
+++ b/client/src/app/retreat/admin/all-user/page.tsx
@@ -8,8 +8,11 @@ import {
   TableCell,
   TableHead,
   TableRow,
+  Paper,
+  Box,
+  Button,
+  Typography,
 } from "@mui/material"
-import { useSetAtom } from "jotai"
 import { useRouter } from "next/navigation"
 import { HowToMove } from "@server/entity/types"
 import { InOutInfo } from "@server/entity/retreat/inOutInfo"
@@ -17,6 +20,7 @@ import { RetreatAttend } from "@server/entity/retreat/retreatAttend"
 import { get } from "@/config/api"
 import Header from "@/components/retreat/admin/Header"
 import { useNotification } from "@/hooks/useNotification"
+import FileDownloadIcon from "@mui/icons-material/FileDownload"
 
 function AllUser() {
   const router = useRouter()
@@ -66,71 +70,228 @@ function AllUser() {
       hiddenElement.download = "출입 정보.txt"
       hiddenElement.click()
     })
+
+    success("다운로드가 완료되었습니다.")
   }
 
   return (
-    <Stack>
+    <Box sx={{ bgcolor: "#ffffff", minHeight: "100vh" }}>
       <Header />
-      <Stack
-        mt="8px"
-        direction="row"
-        alignItems="center"
-        justifyContent="space-between"
-      >
+      <Box sx={{ p: { xs: 2, sm: 3, md: 4 }, maxWidth: "2000px", mx: "auto" }}>
         <Stack
-          fontSize="20px"
-          fontWeight="bold"
-          textAlign="center"
-          width="100%"
+          direction={{ xs: "column", sm: "row" }}
+          alignItems={{ xs: "flex-start", sm: "center" }}
+          justifyContent="space-between"
+          spacing={2}
+          mb={4}
         >
-          전체 접수자 목록
+          <Typography
+            variant="h3"
+            fontWeight="900"
+            sx={{
+              fontSize: { xs: "28px", md: "40px" },
+              color: "#0a0a0a",
+              letterSpacing: "-0.8px",
+            }}
+          >
+            전체 접수자 목록
+          </Typography>
+
+          <Button
+            variant="contained"
+            startIcon={<FileDownloadIcon />}
+            onClick={downloadFile}
+            sx={{
+              textTransform: "none",
+              borderRadius: "6px",
+              px: 3,
+              py: 1.2,
+              fontWeight: "700",
+              bgcolor: "#42C7F1",
+              "&:hover": {
+                bgcolor: "#2BA8D4",
+              },
+            }}
+          >
+            CSV 다운로드
+          </Button>
         </Stack>
 
-        {/* <Button
-          style={{
-            margin: "8px",
+        <Paper
+          elevation={0}
+          sx={{
+            borderRadius: "8px",
+            border: "1.5px solid rgba(0, 0, 0, 0.15)",
+            overflow: "hidden",
+            backgroundColor: "#ffffff",
+            boxShadow: "0 2px 8px rgba(0,0,0,0.06)",
           }}
-          variant="outlined"
-          onClick={downloadFile}
         >
-          엑셀로 다운로드
-        </Button> */}
-      </Stack>
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell>접수 번호</TableCell>
-            <TableCell>이름</TableCell>
-            <TableCell>성별</TableCell>
-            <TableCell>나이</TableCell>
-            <TableCell>가는 방법</TableCell>
-            <TableCell>오는 방법</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {allUserList.map((retreatAttend) => (
-            <TableRow>
-              <TableCell>{retreatAttend.attendanceNumber}</TableCell>
-              <TableCell>{retreatAttend.user.name}</TableCell>
-              <TableCell>
-                {retreatAttend.user.gender === "man" ? "남" : "여"}
-              </TableCell>
-              <TableCell>{retreatAttend.user.yearOfBirth}</TableCell>
-              <TableCell>
-                {retreatAttend.howToGo === HowToMove.together
-                  ? "교회 버스"
-                  : "기타"}
-              </TableCell>
-              <TableCell>
-                {retreatAttend.howToBack === HowToMove.together
-                  ? "교회 버스"
-                  : "기타"}
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Stack>
+          <Box sx={{ overflowX: "auto" }}>
+            <Table sx={{ minWidth: 650 }}>
+              <TableHead>
+                <TableRow
+                  sx={{
+                    bgcolor: "#f8f9fa",
+                    borderBottom: "2px solid rgba(0, 0, 0, 0.12)",
+                  }}
+                >
+                  <TableCell
+                    sx={{
+                      fontWeight: 800,
+                      color: "#0a0a0a",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      fontSize: "15px",
+                      letterSpacing: "-0.2px",
+                      py: 2,
+                    }}
+                  >
+                    접수 번호
+                  </TableCell>
+                  <TableCell
+                    sx={{
+                      fontWeight: 800,
+                      color: "#0a0a0a",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      fontSize: "15px",
+                      letterSpacing: "-0.2px",
+                      py: 2,
+                    }}
+                  >
+                    이름
+                  </TableCell>
+                  <TableCell
+                    sx={{
+                      fontWeight: 800,
+                      color: "#0a0a0a",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      fontSize: "15px",
+                      letterSpacing: "-0.2px",
+                      py: 2,
+                    }}
+                  >
+                    성별
+                  </TableCell>
+                  <TableCell
+                    sx={{
+                      fontWeight: 800,
+                      color: "#0a0a0a",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      fontSize: "15px",
+                      letterSpacing: "-0.2px",
+                      py: 2,
+                    }}
+                  >
+                    나이
+                  </TableCell>
+                  <TableCell
+                    sx={{
+                      fontWeight: 800,
+                      color: "#0a0a0a",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      fontSize: "15px",
+                      letterSpacing: "-0.2px",
+                      py: 2,
+                    }}
+                  >
+                    가는 방법
+                  </TableCell>
+                  <TableCell
+                    sx={{
+                      fontWeight: 800,
+                      color: "#0a0a0a",
+                      borderColor: "rgba(0, 0, 0, 0.12)",
+                      fontSize: "15px",
+                      letterSpacing: "-0.2px",
+                      py: 2,
+                    }}
+                  >
+                    오는 방법
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {allUserList.map((retreatAttend, index) => (
+                  <TableRow
+                    key={retreatAttend.id}
+                    sx={{
+                      "&:hover": {
+                        bgcolor: "rgba(66, 199, 241, 0.08)",
+                      },
+                      "&:nth-of-type(odd)": {
+                        bgcolor: "rgba(66, 199, 241, 0.03)",
+                      },
+                      borderColor: "rgba(0, 0, 0, 0.08)",
+                      transition: "background-color 0.2s",
+                    }}
+                  >
+                    <TableCell
+                      sx={{
+                        fontWeight: 700,
+                        color: "#0a0a0a",
+                        borderColor: "rgba(0, 0, 0, 0.08)",
+                        py: 1.5,
+                      }}
+                    >
+                      {retreatAttend.attendanceNumber}
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        borderColor: "rgba(0, 0, 0, 0.08)",
+                        fontWeight: 600,
+                        color: "#1a1a1a",
+                      }}
+                    >
+                      {retreatAttend.user.name}
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        borderColor: "rgba(0, 0, 0, 0.08)",
+                        fontWeight: 500,
+                        color: "#333",
+                      }}
+                    >
+                      {retreatAttend.user.gender === "man" ? "남" : "여"}
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        borderColor: "rgba(0, 0, 0, 0.08)",
+                        fontWeight: 500,
+                        color: "#333",
+                      }}
+                    >
+                      {retreatAttend.user.yearOfBirth}
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        borderColor: "rgba(0, 0, 0, 0.08)",
+                        fontWeight: 500,
+                        color: "#333",
+                      }}
+                    >
+                      {retreatAttend.howToGo === HowToMove.together
+                        ? "교회 버스"
+                        : "기타"}
+                    </TableCell>
+                    <TableCell
+                      sx={{
+                        borderColor: "rgba(0, 0, 0, 0.08)",
+                        fontWeight: 500,
+                        color: "#333",
+                      }}
+                    >
+                      {retreatAttend.howToBack === HowToMove.together
+                        ? "교회 버스"
+                        : "기타"}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </Box>
+        </Paper>
+      </Box>
+    </Box>
   )
 }
 
diff --git a/client/src/app/retreat/admin/dash-board/StatCard.tsx b/client/src/app/retreat/admin/dash-board/StatCard.tsx
index 0cd454b..b7b0846 100644
--- a/client/src/app/retreat/admin/dash-board/StatCard.tsx
+++ b/client/src/app/retreat/admin/dash-board/StatCard.tsx
@@ -13,37 +13,79 @@ export default function StatCard({
   title,
   value,
   subtitle,
-  color = "#333",
+  color = "#0a0a0a",
   backgroundColor = "#fff",
   icon,
 }: StatCardProps) {
   return (
     <Paper
-      elevation={3}
+      elevation={0}
       sx={{
-        p: 2.5,
+        p: 3,
         m: 1,
         minWidth: 200,
-        borderRadius: 2,
+        borderRadius: "8px",
         backgroundColor,
-        transition: "transform 0.2s, box-shadow 0.2s",
+        border: "1.5px solid rgba(0, 0, 0, 0.15)",
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        background: `linear-gradient(135deg, ${backgroundColor} 0%, ${backgroundColor}dd 100%)`,
         "&:hover": {
-          transform: "translateY(-2px)",
-          boxShadow: "0 8px 25px rgba(0,0,0,0.15)",
+          transform: "translateY(-4px)",
+          boxShadow: "0 16px 40px rgba(0,0,0,0.15)",
+          borderColor: "rgba(0, 0, 0, 0.2)",
         },
       }}
     >
-      <Stack direction="row" alignItems="center" spacing={1}>
-        {icon && <Box color="primary.main">{icon}</Box>}
-        <Stack flex={1}>
-          <Typography variant="body2" color="text.secondary" fontWeight={500}>
+      <Stack direction="row" alignItems="flex-start" spacing={2.5}>
+        {icon && (
+          <Box
+            sx={{
+              color: "primary.main",
+              fontSize: "36px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+            }}
+          >
+            {icon}
+          </Box>
+        )}
+        <Stack flex={1} spacing={1}>
+          <Typography
+            variant="body2"
+            fontWeight={600}
+            sx={{
+              fontSize: "14px",
+              letterSpacing: "0.3px",
+              color: "#666",
+              textTransform: "none",
+            }}
+          >
             {title}
           </Typography>
-          <Typography variant="h4" fontWeight="bold" color={color} mt={0.5}>
+          <Typography
+            variant="h4"
+            fontWeight="800"
+            color={color}
+            sx={{
+              fontSize: { xs: "32px", sm: "38px" },
+              lineHeight: 1.1,
+              letterSpacing: "-0.5px",
+            }}
+          >
             {value}
           </Typography>
           {subtitle && (
-            <Typography variant="body2" color="text.secondary" mt={0.5}>
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "13px",
+                mt: 0.5,
+                color: "#888",
+                fontWeight: 500,
+              }}
+            >
               {subtitle}
             </Typography>
           )}
diff --git a/client/src/app/retreat/admin/dash-board/page.tsx b/client/src/app/retreat/admin/dash-board/page.tsx
index dda6b92..735e8ab 100644
--- a/client/src/app/retreat/admin/dash-board/page.tsx
+++ b/client/src/app/retreat/admin/dash-board/page.tsx
@@ -1,187 +1,14 @@
 "use client"
 
-import { Box, Grid, Typography } from "@mui/material"
-import { get } from "../../../../config/api"
-import { useEffect, useState } from "react"
-import { InOutInfo } from "@server/entity/retreat/inOutInfo"
-import Header from "@/components/retreat/admin/Header"
-import StatCard from "@/app/retreat/admin/dash-board/StatCard"
-import BarChart from "@/app/retreat/admin/dash-board/BarChart"
-import AttendanceTimeline from "@/app/retreat/admin/dash-board/AttendanceTimeline"
-import PeopleIcon from "@mui/icons-material/People"
-import TrendingUpIcon from "@mui/icons-material/TrendingUp"
-import MaleIcon from "@mui/icons-material/Male"
-import FemaleIcon from "@mui/icons-material/Female"
-import DirectionsBusIcon from "@mui/icons-material/DirectionsBus"
-import PaymentIcon from "@mui/icons-material/Payment"
+import { useRouter } from "next/navigation"
+import { useEffect } from "react"
 
-function DashBoard() {
-  const [attendeeStatus, setAttendeeStatus] = useState(
-    {} as Record<string, number>
-  )
-  const [attendanceTimeList, setAttendanceTimeList] = useState([])
-  const [ageInfoList, setAgeInfoList] = useState<Record<string, number>>({})
-  const [infoList, setInfoList] = useState<InOutInfo[]>([])
+export default function DashBoard() {
+  const router = useRouter()
 
   useEffect(() => {
-    fetchData()
-    const interval = setInterval(fetchData, 1000 * 60 * 30)
-    return () => clearInterval(interval)
-  }, [])
+    router.push("/retreat/admin")
+  }, [router])
 
-  async function fetchData() {
-    try {
-      const [status, timeList, ageInfo, info] = await Promise.all([
-        get("/retreat/admin/get-attendee-status"),
-        get("/retreat/admin/get-attendance-time"),
-        get("/retreat/admin/get-age-info"),
-        get("/retreat/admin/in-out-info"),
-      ])
-
-      setAttendeeStatus(status)
-      setAttendanceTimeList(timeList)
-      setAgeInfoList(ageInfo)
-      setInfoList(info)
-    } catch (error) {
-      console.error("데이터 조회 실패:", error)
-    }
-  }
-
-  // 일별 등록자 데이터 처리 - 날짜순으로 정렬
-  const getDailyRegistrationData = () => {
-    const timeData: Record<string, number> = {}
-    attendanceTimeList.forEach((time) => {
-      const date = new Date(time)
-      const key = `${date.getMonth() + 1}.${date.getDate()}`
-      timeData[key] = (timeData[key] || 0) + 1
-    })
-
-    // 날짜순으로 정렬
-    const sortedEntries = Object.entries(timeData).sort(([a], [b]) => {
-      const [monthA, dayA] = a.split(".").map(Number)
-      const [monthB, dayB] = b.split(".").map(Number)
-
-      if (monthA !== monthB) {
-        return monthA - monthB
-      }
-      return dayA - dayB
-    })
-
-    return Object.fromEntries(sortedEntries)
-  }
-
-  const targetCount = 400
-  const attendanceRate = ((attendeeStatus.all / targetCount) * 100).toFixed(1)
-  const maleRate = ((attendeeStatus.man / attendeeStatus.all) * 100).toFixed(1)
-  const femaleRate = (
-    (attendeeStatus.woman / attendeeStatus.all) *
-    100
-  ).toFixed(1)
-  const depositRate = (
-    (attendeeStatus.completeDeposit / attendeeStatus.all) *
-    100
-  ).toFixed(1)
-
-  return (
-    <Box sx={{ bgcolor: "#f5f5f5", minHeight: "100vh" }}>
-      <Header />
-
-      <Box sx={{ p: 3 }}>
-        <Typography variant="h4" fontWeight="bold" mb={3} color="text.primary">
-          수련회 현황 대시보드
-        </Typography>
-
-        {/* 주요 통계 카드들 */}
-        <Grid container spacing={2} sx={{ mb: 4 }}>
-          <StatCard
-            title="총 참가자"
-            value={`${attendeeStatus.all || 0}`}
-            subtitle={`목표: ${targetCount}명`}
-            icon={<PeopleIcon />}
-            backgroundColor="#E3F2FD"
-          />
-
-          <StatCard
-            title="참석률"
-            value={`${attendanceRate}%`}
-            icon={<TrendingUpIcon />}
-            backgroundColor="#E8F5E8"
-          />
-
-          <StatCard
-            title="성비"
-            value={`${attendeeStatus.man || 0} : ${attendeeStatus.woman || 0}`}
-            subtitle={`남 ${maleRate}% / 여 ${femaleRate}%`}
-            icon={
-              <Box sx={{ display: "flex" }}>
-                <MaleIcon color="primary" />
-                <FemaleIcon sx={{ color: "pink" }} />
-              </Box>
-            }
-            backgroundColor="#FFF3E0"
-          />
-
-          <StatCard
-            title="입금 완료율"
-            value={`${depositRate}%`}
-            icon={<PaymentIcon />}
-            backgroundColor="#F3E5F5"
-          />
-        </Grid>
-
-        {/* 버스 이용 현황 */}
-        <Grid container spacing={2} sx={{ mb: 4 }}>
-          <StatCard
-            title="주일 수련회장 버스"
-            value={`${attendeeStatus.leaveTogether || 0}명`}
-            icon={<DirectionsBusIcon />}
-            backgroundColor="#E1F5FE"
-          />
-
-          <StatCard
-            title="목요일 교회 버스"
-            value={`${attendeeStatus.goTogether || 0}명`}
-            icon={<DirectionsBusIcon />}
-            backgroundColor="#E8EAF6"
-          />
-
-          <StatCard
-            title="금요일 교회 버스"
-            value={`${attendeeStatus.rideCar || 0}명`}
-            icon={<DirectionsBusIcon />}
-            backgroundColor="#FDE7E7"
-          />
-        </Grid>
-
-        {/* 차트들 */}
-        <Grid container spacing={2} sx={{ mb: 4 }}>
-          <BarChart
-            title="일별 등록자 수"
-            data={getDailyRegistrationData()}
-            color="#3B82F6"
-          />
-
-          <BarChart
-            title="나이별 등록자 수"
-            data={Object.fromEntries(
-              Object.entries(ageInfoList).map(([key, value]) => [
-                key.slice(2, 4) + "년생",
-                value,
-              ])
-            )}
-            color="#10B981"
-          />
-        </Grid>
-
-        {/* 시간별 참석자 현황 
-        <AttendanceTimeline
-          infoList={infoList}
-          attendeeStatus={attendeeStatus}
-        />
-        */}
-      </Box>
-    </Box>
-  )
+  return null
 }
-
-export default DashBoard
diff --git a/client/src/app/retreat/admin/page.tsx b/client/src/app/retreat/admin/page.tsx
index 9aa1c0d..d3eeb9c 100644
--- a/client/src/app/retreat/admin/page.tsx
+++ b/client/src/app/retreat/admin/page.tsx
@@ -1,26 +1,277 @@
 "use client"
 
-import jwt from "jwt-decode"
-import useKakaoHook from "@/hooks/useKakao"
-import { post } from "@/config/api"
-import { useRouter } from "next/navigation"
+import { Box, Stack, Typography } from "@mui/material"
+import { get } from "../../../config/api"
 import { useEffect, useState } from "react"
-import { Button, Stack } from "@mui/material"
+import { InOutInfo } from "@server/entity/retreat/inOutInfo"
 import Header from "@/components/retreat/admin/Header"
+import StatCard from "@/app/retreat/admin/dash-board/StatCard"
+import BarChart from "@/app/retreat/admin/dash-board/BarChart"
+import PeopleIcon from "@mui/icons-material/People"
+import TrendingUpIcon from "@mui/icons-material/TrendingUp"
+import MaleIcon from "@mui/icons-material/Male"
+import FemaleIcon from "@mui/icons-material/Female"
+import DirectionsBusIcon from "@mui/icons-material/DirectionsBus"
+import PaymentIcon from "@mui/icons-material/Payment"
 import useAuth from "@/hooks/useAuth"
 
 //아이콘 주소 https://www.flaticon.com/kr/
 export default function Admin() {
-  const router = useRouter()
   const { ifNotLoggedGoToLogin } = useAuth()
+  const [attendeeStatus, setAttendeeStatus] = useState(
+    {} as Record<string, number>,
+  )
+  const [attendanceTimeList, setAttendanceTimeList] = useState([])
+  const [ageInfoList, setAgeInfoList] = useState<Record<string, number>>({})
+  const [infoList, setInfoList] = useState<InOutInfo[]>([])
 
   useEffect(() => {
     ifNotLoggedGoToLogin("/retreat/admin")
+    fetchData()
+    const interval = setInterval(fetchData, 1000 * 60 * 30)
+    return () => clearInterval(interval)
   }, [])
 
+  async function fetchData() {
+    try {
+      const [status, timeList, ageInfo, info] = await Promise.all([
+        get("/retreat/admin/get-attendee-status"),
+        get("/retreat/admin/get-attendance-time"),
+        get("/retreat/admin/get-age-info"),
+        get("/retreat/admin/in-out-info"),
+      ])
+
+      setAttendeeStatus(status)
+      setAttendanceTimeList(timeList)
+      setAgeInfoList(ageInfo)
+      setInfoList(info)
+    } catch (error) {
+      console.error("데이터 조회 실패:", error)
+    }
+  }
+
+  // 일별 등록자 데이터 처리 - 날짜순으로 정렬
+  const getDailyRegistrationData = () => {
+    const timeData: Record<string, number> = {}
+    attendanceTimeList.forEach((time) => {
+      const date = new Date(time)
+      const key = `${date.getMonth() + 1}.${date.getDate()}`
+      timeData[key] = (timeData[key] || 0) + 1
+    })
+
+    // 날짜순으로 정렬
+    const sortedEntries = Object.entries(timeData).sort(([a], [b]) => {
+      const [monthA, dayA] = a.split(".").map(Number)
+      const [monthB, dayB] = b.split(".").map(Number)
+
+      if (monthA !== monthB) {
+        return monthA - monthB
+      }
+      return dayA - dayB
+    })
+
+    return Object.fromEntries(sortedEntries)
+  }
+
+  const targetCount = 400
+  const attendanceRate = ((attendeeStatus.all / targetCount) * 100).toFixed(1)
+  const maleRate = ((attendeeStatus.man / attendeeStatus.all) * 100).toFixed(1)
+  const femaleRate = (
+    (attendeeStatus.woman / attendeeStatus.all) *
+    100
+  ).toFixed(1)
+  const depositRate = (
+    (attendeeStatus.completeDeposit / attendeeStatus.all) *
+    100
+  ).toFixed(1)
+
   return (
-    <Stack>
+    <Box sx={{ bgcolor: "#ffffff", minHeight: "100vh" }}>
       <Header />
-    </Stack>
+
+      <Box sx={{ p: { xs: 2, sm: 3, md: 4 }, maxWidth: "2000px", mx: "auto" }}>
+        {/* 주요 통계 섹션 */}
+        <Box mb={8}>
+          <Typography
+            variant="h5"
+            fontWeight="700"
+            mb={3}
+            sx={{
+              fontSize: "19px",
+              color: "#1a1a1a",
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              letterSpacing: "-0.3px",
+            }}
+          >
+            <Box
+              sx={{
+                width: "5px",
+                height: "28px",
+                bgcolor: "#42C7F1",
+                borderRadius: "2px",
+              }}
+            />
+            주요 통계
+          </Typography>
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: {
+                xs: "1fr",
+                sm: "1fr 1fr",
+                md: "repeat(4, 1fr)",
+              },
+              gap: 3,
+            }}
+          >
+            <StatCard
+              title="총 참가자"
+              value={`${attendeeStatus.all || 0}`}
+              subtitle={`목표: ${targetCount}명`}
+              icon={<PeopleIcon />}
+              backgroundColor="#E3F2FD"
+            />
+
+            <StatCard
+              title="참석률"
+              value={`${attendanceRate}%`}
+              icon={<TrendingUpIcon />}
+              backgroundColor="#E8F5E8"
+            />
+
+            <StatCard
+              title="성비"
+              value={`${attendeeStatus.man || 0} : ${attendeeStatus.woman || 0}`}
+              subtitle={`남 ${maleRate}% / 여 ${femaleRate}%`}
+              icon={
+                <Box sx={{ display: "flex" }}>
+                  <MaleIcon color="primary" />
+                  <FemaleIcon sx={{ color: "pink" }} />
+                </Box>
+              }
+              backgroundColor="#FFF3E0"
+            />
+
+            <StatCard
+              title="입금 완료율"
+              value={`${depositRate}%`}
+              icon={<PaymentIcon />}
+              backgroundColor="#F3E5F5"
+            />
+          </Box>
+        </Box>
+
+        {/* 버스 이용 현황 섹션 */}
+        <Box mb={8}>
+          <Typography
+            variant="h5"
+            fontWeight="700"
+            mb={3}
+            sx={{
+              fontSize: "19px",
+              color: "#1a1a1a",
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              letterSpacing: "-0.3px",
+            }}
+          >
+            <Box
+              sx={{
+                width: "5px",
+                height: "28px",
+                bgcolor: "#FF6B6B",
+                borderRadius: "2px",
+              }}
+            />
+            버스 이용 현황
+          </Typography>
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: {
+                xs: "1fr",
+                sm: "1fr 1fr",
+                md: "repeat(3, 1fr)",
+              },
+              gap: 3,
+            }}
+          >
+            <StatCard
+              title="주일 수련회장 버스"
+              value={`${attendeeStatus.leaveTogether || 0}명`}
+              icon={<DirectionsBusIcon />}
+              backgroundColor="#E1F5FE"
+            />
+
+            <StatCard
+              title="목요일 교회 버스"
+              value={`${attendeeStatus.goTogether || 0}명`}
+              icon={<DirectionsBusIcon />}
+              backgroundColor="#E8EAF6"
+            />
+
+            <StatCard
+              title="금요일 교회 버스"
+              value={`${attendeeStatus.rideCar || 0}명`}
+              icon={<DirectionsBusIcon />}
+              backgroundColor="#FDE7E7"
+            />
+          </Box>
+        </Box>
+
+        {/* 통계 분석 섹션 */}
+        <Stack gap="12px" mb={8}>
+          <Typography
+            variant="h5"
+            fontWeight="700"
+            mb={3}
+            sx={{
+              fontSize: "19px",
+              color: "#1a1a1a",
+              display: "flex",
+              alignItems: "center",
+              gap: 1.5,
+              letterSpacing: "-0.3px",
+            }}
+          >
+            <Box
+              sx={{
+                width: "5px",
+                height: "28px",
+                bgcolor: "#10B981",
+                borderRadius: "2px",
+              }}
+            />
+            통계 분석
+          </Typography>
+          <BarChart
+            title="일별 등록자 수"
+            data={getDailyRegistrationData()}
+            color="#3B82F6"
+          />
+
+          <BarChart
+            title="나이별 등록자 수"
+            data={Object.fromEntries(
+              Object.entries(ageInfoList).map(([key, value]) => [
+                key.slice(2, 4) + "년생",
+                value,
+              ]),
+            )}
+            color="#10B981"
+          />
+        </Stack>
+      </Box>
+
+      {/* 시간별 참석자 현황 
+        <AttendanceTimeline
+          infoList={infoList}
+          attendeeStatus={attendeeStatus}
+        />
+        */}
+    </Box>
   )
 }
diff --git a/client/src/components/retreat/admin/Header/index.tsx b/client/src/components/retreat/admin/Header/index.tsx
index fc382fb..465bf0d 100644
--- a/client/src/components/retreat/admin/Header/index.tsx
+++ b/client/src/components/retreat/admin/Header/index.tsx
@@ -1,7 +1,6 @@
 import {
   Box,
   Button,
-  Divider,
   Drawer,
   List,
   ListItem,
@@ -12,11 +11,21 @@ import {
 } from "@mui/material"
 import { useEffect, useState } from "react"
 import MenuIcon from "@mui/icons-material/Menu"
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted"
+import DirectionsCarIcon from "@mui/icons-material/DirectionsCar"
+import ListIcon from "@mui/icons-material/List"
+import BedtimeIcon from "@mui/icons-material/Bedtime"
+import GroupsIcon from "@mui/icons-material/Groups"
+import LockIcon from "@mui/icons-material/Lock"
+import AttachMoneyIcon from "@mui/icons-material/AttachMoney"
+import EditIcon from "@mui/icons-material/Edit"
+import QrCode2Icon from "@mui/icons-material/QrCode2"
+import TableChartIcon from "@mui/icons-material/TableChart"
+import LoginIcon from "@mui/icons-material/Login"
+import DashboardIcon from "@mui/icons-material/Dashboard"
 import { useRouter } from "next/navigation"
 
-import PermIdentityOutlinedIcon from "@mui/icons-material/PermIdentityOutlined"
 import useUserData from "@/hooks/useUserData"
-import Image from "next/image"
 
 export default function Header() {
   const { getUserDataFromToken } = useUserData()
@@ -45,11 +54,11 @@ export default function Header() {
   function RouterRow({
     pageURL,
     pageName,
-    icon,
+    icon: IconComponent,
   }: {
     pageURL: string
     pageName: string
-    icon: string
+    icon: React.ElementType
   }) {
     function goToPage() {
       push("/retreat/admin" + pageURL)
@@ -58,7 +67,7 @@ export default function Header() {
       <ListItem disablePadding>
         <ListItemButton onClick={goToPage}>
           <ListItemIcon>
-            <Image src={icon} width="30" height="30" alt="" />
+            <IconComponent sx={{ fontSize: 28 }} />
           </ListItemIcon>
           <ListItemText primary={pageName} />
         </ListItemButton>
@@ -85,8 +94,8 @@ export default function Header() {
       </Stack>
       <Button onClick={() => toggleDrawer(true)}>
         <MenuIcon
-          color="action"
-          style={{
+          sx={{
+            color: "white",
             width: "40px",
             height: "36px",
           }}
@@ -102,62 +111,57 @@ export default function Header() {
             {RouterRow({
               pageName: "접수자 전체 조회",
               pageURL: "/all-user",
-              icon: "/icon/free-icon-bullet-list.png",
+              icon: FormatListBulletedIcon,
             })}
             {RouterRow({
               pageName: "카풀 관리",
               pageURL: "/carpooling",
-              icon: "/icon/free-icon-car.png",
+              icon: DirectionsCarIcon,
             })}
             {RouterRow({
               pageName: "카풀 명단 조회",
               pageURL: "/carpooling-list",
-              icon: "/icon/free-icon-car-list.png",
+              icon: ListIcon,
             })}
             {RouterRow({
               pageName: "방배정 관리",
               pageURL: "/room-assignment",
-              icon: "/icon/free-icon-bunk-bed.png",
+              icon: BedtimeIcon,
             })}
             {RouterRow({
               pageName: "조배정 관리",
               pageURL: "/group-formation",
-              icon: "/icon/free-icon-group.png",
+              icon: GroupsIcon,
             })}
             {RouterRow({
               pageName: "권한 관리",
               pageURL: "/permission-manage",
-              icon: "/icon/free-icon-lock.png",
+              icon: LockIcon,
             })}
             {RouterRow({
               pageName: "입금 확인 처리",
               pageURL: "/deposit-check",
-              icon: "/icon/free-icon-cost.png",
+              icon: AttachMoneyIcon,
             })}
             {RouterRow({
               pageName: "접수 내용 수정",
               pageURL: "/edit-user-data",
-              icon: "/icon/free-icon-edit-profile.png",
+              icon: EditIcon,
             })}
             {RouterRow({
               pageName: "인원 확인 처리",
               pageURL: "/check-status",
-              icon: "/icon/free-icon-qr-code.png",
+              icon: QrCode2Icon,
             })}
             {RouterRow({
               pageName: "인원 관리",
               pageURL: "/show-status-table",
-              icon: "/icon/free-icon-table.png",
+              icon: TableChartIcon,
             })}
             {RouterRow({
               pageName: "인원 출입 관리",
               pageURL: "/inout-info",
-              icon: "/icon/free-icon-table.png",
-            })}
-            {RouterRow({
-              pageName: "대시보드",
-              pageURL: "/dash-board",
-              icon: "/icon/free-icon-dashboard-interface.png",
+              icon: LoginIcon,
             })}
           </List>
         </Box>

From a221be35d5a50f09c4a8cddf06c9290906235019 Mon Sep 17 00:00:00 2001
From: iubns <iubns@naver.com>
Date: Mon, 9 Feb 2026 22:32:37 +0900
Subject: [PATCH 4/5] =?UTF-8?q?update:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20?=
 =?UTF-8?q?=EC=B6=9C=EC=84=9D=20=EA=B7=B8=EB=9E=98=ED=94=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/admin/AttendanceChart.tsx | 132 +++++++++++++++++++++++
 client/src/app/admin/page.tsx            |  74 +++++++++----
 2 files changed, 188 insertions(+), 18 deletions(-)
 create mode 100644 client/src/app/admin/AttendanceChart.tsx

diff --git a/client/src/app/admin/AttendanceChart.tsx b/client/src/app/admin/AttendanceChart.tsx
new file mode 100644
index 0000000..6dcb73e
--- /dev/null
+++ b/client/src/app/admin/AttendanceChart.tsx
@@ -0,0 +1,132 @@
+import { Box, Stack, Typography } from "@mui/material"
+
+interface WeekData {
+  date: string
+  male: number
+  female: number
+  total: number
+}
+
+interface AttendanceChartProps {
+  data: WeekData[]
+}
+
+export default function AttendanceChart({ data }: AttendanceChartProps) {
+  // 최대값 계산
+  const maxTotal = Math.max(...data.map((d) => d.total), 1)
+
+  return (
+    <Stack spacing={2}>
+      {data.map((week, index) => (
+        <Box key={index}>
+          <Typography variant="body2" fontWeight="bold" mb={1}>
+            {week.date}
+          </Typography>
+          <Stack spacing={1}>
+            {/* 전체 */}
+            <Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  mb: 0.5,
+                }}
+              >
+                <Typography variant="caption">전체</Typography>
+                <Typography variant="caption" fontWeight="bold">
+                  {week.total}
+                </Typography>
+              </Box>
+              <Box
+                sx={{
+                  width: "100%",
+                  height: 24,
+                  bgcolor: "#e0e0e0",
+                  borderRadius: 1,
+                  overflow: "hidden",
+                }}
+              >
+                <Box
+                  sx={{
+                    height: "100%",
+                    width: `${(week.total / maxTotal) * 100}%`,
+                    bgcolor: "#2e7d32",
+                    transition: "width 0.3s ease-in-out",
+                  }}
+                />
+              </Box>
+            </Box>
+
+            {/* 남성 */}
+            <Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  mb: 0.5,
+                }}
+              >
+                <Typography variant="caption">남성</Typography>
+                <Typography variant="caption" fontWeight="bold">
+                  {week.male}
+                </Typography>
+              </Box>
+              <Box
+                sx={{
+                  width: "100%",
+                  height: 20,
+                  bgcolor: "#e3f2fd",
+                  borderRadius: 1,
+                  overflow: "hidden",
+                }}
+              >
+                <Box
+                  sx={{
+                    height: "100%",
+                    width: `${(week.male / maxTotal) * 100}%`,
+                    bgcolor: "#1976d2",
+                    transition: "width 0.3s ease-in-out",
+                  }}
+                />
+              </Box>
+            </Box>
+
+            {/* 여성 */}
+            <Box>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  mb: 0.5,
+                }}
+              >
+                <Typography variant="caption">여성</Typography>
+                <Typography variant="caption" fontWeight="bold">
+                  {week.female}
+                </Typography>
+              </Box>
+              <Box
+                sx={{
+                  width: "100%",
+                  height: 20,
+                  bgcolor: "#f3e5f5",
+                  borderRadius: 1,
+                  overflow: "hidden",
+                }}
+              >
+                <Box
+                  sx={{
+                    height: "100%",
+                    width: `${(week.female / maxTotal) * 100}%`,
+                    bgcolor: "#9c27b0",
+                    transition: "width 0.3s ease-in-out",
+                  }}
+                />
+              </Box>
+            </Box>
+          </Stack>
+        </Box>
+      ))}
+    </Stack>
+  )
+}
diff --git a/client/src/app/admin/page.tsx b/client/src/app/admin/page.tsx
index 04ac897..58d6557 100644
--- a/client/src/app/admin/page.tsx
+++ b/client/src/app/admin/page.tsx
@@ -12,7 +12,6 @@ import {
   CardContent,
   CircularProgress,
 } from "@mui/material"
-import { useSetAtom } from "jotai"
 import axios from "@/config/axios"
 import useAuth from "@/hooks/useAuth"
 import { useEffect, useState } from "react"
@@ -22,6 +21,7 @@ import EventNoteIcon from "@mui/icons-material/EventNote"
 import { useNotification } from "@/hooks/useNotification"
 import TrendingUpIcon from "@mui/icons-material/TrendingUp"
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday"
+import AttendanceChart from "@/app/admin/AttendanceChart"
 
 interface DashboardData {
   totalUsers: number
@@ -240,10 +240,37 @@ function index() {
               <Typography variant="h6" fontWeight="bold" gutterBottom>
                 출석 현황 (최근 4주)
               </Typography>
-              <Box sx={{ height: 300, width: "100%", position: "relative" }}>
+
+              {/* 모바일 버전: 막대 그래프 */}
+              <Box sx={{ display: { xs: "block", md: "none" } }}>
+                <AttendanceChart
+                  data={dashboardData.statistics.last4Weeks.map((w) => ({
+                    date: w.date,
+                    male: w.genderCount.male,
+                    female: w.genderCount.female,
+                    total: w.genderCount.male + w.genderCount.female,
+                  }))}
+                />
+              </Box>
+
+              {/* 데스크톱 버전: 라인 그래프 */}
+              <Box
+                sx={{
+                  height: 300,
+                  width: "100%",
+                  position: "relative",
+                  overflow: "auto",
+                  display: { xs: "none", md: "block" },
+                }}
+              >
                 <svg
-                  viewBox="0 0 800 300"
-                  style={{ width: "100%", height: "100%", overflow: "visible" }}
+                  viewBox={`0 0 ${Math.max(1800, dashboardData.statistics.last4Weeks.length * 400)} 300`}
+                  style={{
+                    width: "100%",
+                    height: "100%",
+                    overflow: "visible",
+                  }}
+                  preserveAspectRatio="xMidYMid meet"
                 >
                   {(() => {
                     const data = dashboardData.statistics.last4Weeks.map(
@@ -256,12 +283,17 @@ function index() {
                     )
                     const maxVal =
                       Math.max(...data.map((d) => d.total), 1) * 1.2
+                    const viewBoxWidth = Math.max(1800, data.length * 400)
 
                     const getX = (index: number) => {
-                      const sectionWidth = 800 / data.length
+                      const sectionWidth = viewBoxWidth / data.length
                       return index * sectionWidth + sectionWidth / 2
                     }
                     const getY = (val: number) => 250 - (val / maxVal) * 200
+                    const fontSize = Math.max(
+                      14,
+                      Math.min(20, viewBoxWidth / data.length / 2.2),
+                    )
 
                     const malePath = data
                       .map(
@@ -285,7 +317,13 @@ function index() {
                     return (
                       <>
                         {/* Grid lines */}
-                        <line x1="0" y1="250" x2="800" y2="250" stroke="#eee" />
+                        <line
+                          x1="0"
+                          y1="250"
+                          x2={viewBoxWidth}
+                          y2="250"
+                          stroke="#eee"
+                        />
 
                         {/* Total Line */}
                         <path
@@ -321,7 +359,7 @@ function index() {
                                 x={getX(i)}
                                 y="280"
                                 textAnchor="middle"
-                                fontSize="14"
+                                fontSize={fontSize}
                                 fill="#666"
                               >
                                 {d.date}
@@ -331,14 +369,14 @@ function index() {
                               <circle
                                 cx={getX(i)}
                                 cy={getY(d.total)}
-                                r="4"
+                                r="3"
                                 fill="#2e7d32"
                               />
                               <text
                                 x={getX(i)}
-                                y={getY(d.total) - 15}
+                                y={getY(d.total) - 12}
                                 textAnchor="middle"
-                                fontSize="14"
+                                fontSize={fontSize}
                                 fontWeight="bold"
                                 fill="#2e7d32"
                               >
@@ -349,18 +387,18 @@ function index() {
                               <circle
                                 cx={getX(i)}
                                 cy={getY(d.male)}
-                                r="4"
+                                r="3"
                                 fill="#1976d2"
                               />
                               <text
                                 x={getX(i)}
                                 y={
                                   maleHigher
-                                    ? getY(d.male) - 15
-                                    : getY(d.male) + 25
+                                    ? getY(d.male) - 12
+                                    : getY(d.male) + 20
                                 }
                                 textAnchor="middle"
-                                fontSize="14"
+                                fontSize={fontSize}
                                 fontWeight="bold"
                                 fill="#1976d2"
                               >
@@ -371,18 +409,18 @@ function index() {
                               <circle
                                 cx={getX(i)}
                                 cy={getY(d.female)}
-                                r="4"
+                                r="3"
                                 fill="#9c27b0"
                               />
                               <text
                                 x={getX(i)}
                                 y={
                                   !maleHigher
-                                    ? getY(d.female) - 15
-                                    : getY(d.female) + 25
+                                    ? getY(d.female) - 12
+                                    : getY(d.female) + 20
                                 }
                                 textAnchor="middle"
-                                fontSize="14"
+                                fontSize={fontSize}
                                 fontWeight="bold"
                                 fill="#9c27b0"
                               >

From 9a6ff49d894620921014a170137b29cf3a80bb9d Mon Sep 17 00:00:00 2001
From: iubns <iubns@naver.com>
Date: Mon, 9 Feb 2026 23:03:56 +0900
Subject: [PATCH 5/5] =?UTF-8?q?update:=20=EC=A7=80=EB=82=9C=EC=A3=BC=20?=
 =?UTF-8?q?=EC=B6=9C=EC=84=9D=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B8=B0=20?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/app/leader/attendance/page.tsx     | 22 ++++-
 .../app/leader/attendance/useAttendance.ts    | 82 +++++++++++++++++--
 2 files changed, 97 insertions(+), 7 deletions(-)

diff --git a/client/src/app/leader/attendance/page.tsx b/client/src/app/leader/attendance/page.tsx
index 1e02786..b3a3a47 100644
--- a/client/src/app/leader/attendance/page.tsx
+++ b/client/src/app/leader/attendance/page.tsx
@@ -21,8 +21,10 @@ import AttendRow from "./AttendRow"
 import SaveIcon from "@mui/icons-material/Save"
 import EventNoteIcon from "@mui/icons-material/EventNote"
 import PeopleIcon from "@mui/icons-material/People"
+import HistoryIcon from "@mui/icons-material/History"
 import useAuth from "@/hooks/useAuth"
 import { useEffect } from "react"
+import { useNotification } from "@/hooks/useNotification"
 
 export default function SoonAttendance() {
   const {
@@ -33,8 +35,10 @@ export default function SoonAttendance() {
     worshipScheduleList,
     groupInfo,
     setSoonAttendData,
+    loadLastSundayAttendance,
   } = useAttendance()
   const { isLeaderIfNotExit } = useAuth()
+  const { success } = useNotification()
 
   useEffect(() => {
     isLeaderIfNotExit("/leader/attendance")
@@ -48,6 +52,7 @@ export default function SoonAttendance() {
     if (selectedScheduleId) {
       getAttendData(selectedScheduleId)
     }
+    success("출석 데이터가 저장되었습니다.")
   }
 
   return (
@@ -65,7 +70,7 @@ export default function SoonAttendance() {
             <CardContent sx={{ textAlign: "center", py: 4 }}>
               <EventNoteIcon sx={{ fontSize: 48, mb: 2, opacity: 0.9 }} />
               <Typography variant="h4" fontWeight="bold" gutterBottom>
-                출석 관리
+                출석 관리 {selectedScheduleId}
               </Typography>
               <Typography variant="body1" sx={{ opacity: 0.9 }}>
                 순원들의 출석을 관리해보세요
@@ -101,6 +106,21 @@ export default function SoonAttendance() {
                     ))}
                   </Select>
                 </FormControl>
+                {selectedScheduleId && (
+                  <Button
+                    variant="outlined"
+                    size="small"
+                    startIcon={<HistoryIcon />}
+                    onClick={loadLastSundayAttendance}
+                    sx={{
+                      borderRadius: 1,
+                      textTransform: "none",
+                      fontSize: "0.95rem",
+                    }}
+                  >
+                    지난주 출석 불러오기
+                  </Button>
+                )}
               </Stack>
             </CardContent>
           </Card>
diff --git a/client/src/app/leader/attendance/useAttendance.ts b/client/src/app/leader/attendance/useAttendance.ts
index bb787f1..4ab6593 100644
--- a/client/src/app/leader/attendance/useAttendance.ts
+++ b/client/src/app/leader/attendance/useAttendance.ts
@@ -7,6 +7,7 @@ import axios from "@/config/axios"
 import { useEffect } from "react"
 import { atom, useAtom } from "jotai"
 import { AttendStatus } from "@server/entity/types"
+import { useNotification } from "@/hooks/useNotification"
 
 const groupInfoAtom = atom<Community | undefined>(undefined)
 const worshipScheduleListAtom = atom<WorshipSchedule[]>([])
@@ -16,12 +17,13 @@ const soonAttendDataAtom = atom<AttendData[]>([])
 export default function useAttendance() {
   const [groupInfo, setGroupInfo] = useAtom(groupInfoAtom)
   const [worshipScheduleList, setWorshipScheduleList] = useAtom(
-    worshipScheduleListAtom
+    worshipScheduleListAtom,
   )
   const [selectedScheduleId, setSelectedScheduleId] = useAtom(
-    selectedScheduleIdAtom
+    selectedScheduleIdAtom,
   )
   const [soonAttendData, setSoonAttendData] = useAtom(soonAttendDataAtom)
+  const { success, error } = useNotification()
 
   useEffect(() => {
     fetchData()
@@ -36,12 +38,12 @@ export default function useAttendance() {
   async function getAttendData(scheduleId: number) {
     const usersIds = groupInfo?.users.map((user) => user.id) || []
     const { data } = await axios.get<AttendData[]>(
-      `/soon/attendance/?scheduleId=${scheduleId}`
+      `/soon/attendance/?scheduleId=${scheduleId}`,
     )
     groupInfo?.users.forEach((user) => {
       if (
         !data.find(
-          (d) => d.user.id === user.id && d.worshipSchedule.id === scheduleId
+          (d) => d.user.id === user.id && d.worshipSchedule.id === scheduleId,
         )
       ) {
         data.push({
@@ -56,11 +58,11 @@ export default function useAttendance() {
 
   async function fetchData() {
     const { data: groupInfo } = await axios.get<Community>(
-      "/soon/my-group-info"
+      "/soon/my-group-info",
     )
     setGroupInfo(groupInfo)
     const { data: worshipScheduleList } = await axios.get<WorshipSchedule[]>(
-      "/soon/worship-schedule"
+      "/soon/worship-schedule",
     )
     setWorshipScheduleList(worshipScheduleList)
     if (worshipScheduleList.length > 0) {
@@ -68,6 +70,73 @@ export default function useAttendance() {
     }
   }
 
+  function getLastSundayDateString(): string {
+    const today = new Date()
+    const dayOfWeek = today.getDay()
+    let daysToSubtract = 0
+
+    if (dayOfWeek === 0) {
+      // 오늘이 일요일 → 저번주 일요일 (7일 전)
+      daysToSubtract = 7
+    } else {
+      // 월-토 → dayOfWeek + 7일 전
+      daysToSubtract = dayOfWeek + 7
+    }
+
+    const lastSunday = new Date(today)
+    lastSunday.setDate(lastSunday.getDate() - daysToSubtract)
+
+    // 로컬 시간 기준으로 YYYY-MM-DD 형식 정규화
+    const year = lastSunday.getFullYear()
+    const month = String(lastSunday.getMonth() + 1).padStart(2, "0")
+    const date = String(lastSunday.getDate()).padStart(2, "0")
+
+    return `${year}-${month}-${date}`
+  }
+
+  async function loadLastSundayAttendance() {
+    if (!groupInfo) return
+
+    const dateStr = getLastSundayDateString()
+    console.log("지난주 일요일 날짜:", dateStr)
+
+    // 지난주 일요일 일정 찾기
+    const lastSundaySchedule = worshipScheduleList.find(
+      (schedule) => schedule.date === dateStr,
+    )
+
+    console.log("지난주 일요일 일정:", lastSundaySchedule?.id)
+    if (!lastSundaySchedule) {
+      error("지난주 일요일 예배 일정이 없습니다.")
+      return
+    }
+
+    // 지난주 일요일 출석 데이터 조회
+    const { data: lastSundayAttendData } = await axios.get<AttendData[]>(
+      `/soon/attendance/?scheduleId=${lastSundaySchedule.id}`,
+    )
+
+    // 현재 출석 데이터에 지난주 상태 적용 (저장 상태는 유지)
+    const updatedAttendData = soonAttendData.map((attendData) => {
+      const lastSundayData = lastSundayAttendData.find(
+        (d) => d.user.id === attendData.user.id,
+      )
+      if (lastSundayData) {
+        return {
+          user: attendData.user,
+          worshipSchedule: { id: selectedScheduleId } as WorshipSchedule,
+          isAttend: lastSundayData.isAttend,
+          memo: lastSundayData.memo,
+        } as AttendData
+      }
+      return attendData
+    })
+
+    console.log("updatedAttendData", updatedAttendData)
+    setSoonAttendData(updatedAttendData)
+    success("지난주 일요일 출석 데이터를 불러왔습니다.")
+  }
+
   return {
     groupInfo,
     worshipScheduleList,
@@ -76,5 +145,6 @@ export default function useAttendance() {
     soonAttendData,
     setSoonAttendData,
     getAttendData,
+    loadLastSundayAttendance,
   }
 }