diff --git a/src/app/(service)/(my)/my-class/_components/learning-notification-modal.tsx b/src/app/(service)/(my)/my-class/_components/learning-notification-modal.tsx
index 45422b9bd..e4a105151 100644
--- a/src/app/(service)/(my)/my-class/_components/learning-notification-modal.tsx
+++ b/src/app/(service)/(my)/my-class/_components/learning-notification-modal.tsx
@@ -27,21 +27,23 @@ export default function LearningNotificationModal({
 }: LearningNotificationModalProps) {
   const showToast = useToastStore((s) => s.showToast);
   const { data: setting } = useGetNotificationSetting();
-  const { mutateAsync: updateSetting } = useUpdateNotificationSetting();
+  const updateSettingMutation = useUpdateNotificationSetting();
 
   const [hour, setHour] = useState(8);
   const [minute, setMinute] = useState(0);
 
   useEffect(() => {
-    if (setting?.notifyHour !== null && setting?.notifyHour !== undefined)
-      setHour(setting.notifyHour);
-    if (setting?.notifyMinute !== null && setting?.notifyMinute !== undefined)
+    if (typeof setting?.notifyHour === 'number') setHour(setting.notifyHour);
+    if (typeof setting?.notifyMinute === 'number')
       setMinute(setting.notifyMinute);
   }, [setting]);
 
   const handleSave = async () => {
     try {
-      await updateSetting({ notifyHour: hour, notifyMinute: minute });
+      await updateSettingMutation.mutateAsync({
+        notifyHour: hour,
+        notifyMinute: minute,
+      });
       showToast('알림 시간이 저장되었습니다.', 'success');
       onOpenChange(false);
     } catch {
@@ -131,9 +133,10 @@ export default function LearningNotificationModal({
                 color="primary"
                 size="medium"
                 className="flex-1 whitespace-nowrap"
+                disabled={updateSettingMutation.isPending}
                 onClick={handleSave}
               >
-                저장하기
+                {updateSettingMutation.isPending ? '저장 중...' : '저장하기'}
               </Button>
             </div>
           </Modal.Footer>
diff --git a/src/app/(service)/(my)/my-class/page.tsx b/src/app/(service)/(my)/my-class/page.tsx
index 81a2d101e..57d9c5ca6 100644
--- a/src/app/(service)/(my)/my-class/page.tsx
+++ b/src/app/(service)/(my)/my-class/page.tsx
@@ -25,7 +25,11 @@ function pad(n: number) {
 export default function MyClassPage() {
   const { data: courses = [] } = useGetCourseList();
   const { data: giftEmail } = useGetMyGiftEmail();
-  const { data: notificationSetting } = useGetNotificationSetting();
+  const {
+    data: notificationSetting,
+    isError: isNotificationSettingError,
+    isLoading: isNotificationSettingLoading,
+  } = useGetNotificationSetting();
   const [alarmModalOpen, setAlarmModalOpen] = useState(false);
 
   const isEnabled = notificationSetting?.isEnabled ?? false;
@@ -46,6 +50,8 @@ export default function MyClassPage() {
             isEnabled={isEnabled}
             notifyHour={notificationSetting?.notifyHour}
             notifyMinute={notificationSetting?.notifyMinute}
+            isLoading={isNotificationSettingLoading}
+            isError={isNotificationSettingError}
             onOpenModal={() => setAlarmModalOpen(true)}
           />
           <GiftEmailCard
@@ -122,21 +128,25 @@ function AlarmCard({
   isEnabled,
   notifyHour,
   notifyMinute,
+  isLoading,
+  isError,
   onOpenModal,
 }: {
   isEnabled: boolean;
   notifyHour?: number;
   notifyMinute?: number;
+  isLoading: boolean;
+  isError: boolean;
   onOpenModal: () => void;
 }) {
   const hasTime =
-    notifyHour !== null &&
-    notifyHour !== undefined &&
-    notifyMinute !== null &&
-    notifyMinute !== undefined;
-  const timeText = hasTime
-    ? `${pad(notifyHour!)}:${pad(notifyMinute!)}`
-    : '현재 지정된 시간이 없습니다.';
+    typeof notifyHour === 'number' && typeof notifyMinute === 'number';
+  const timeText = (() => {
+    if (isLoading) return '알림 시간을 불러오는 중입니다.';
+    if (isError) return '알림 시간 조회에 실패했습니다.';
+    if (hasTime) return `${pad(notifyHour)}:${pad(notifyMinute)}`;
+    return '현재 지정된 시간이 없습니다.';
+  })();
 
   return (
     <div
diff --git a/src/hooks/queries/notification/use-notification-setting.ts b/src/hooks/queries/notification/use-notification-setting.ts
index 6b73e165f..de60d13d5 100644
--- a/src/hooks/queries/notification/use-notification-setting.ts
+++ b/src/hooks/queries/notification/use-notification-setting.ts
@@ -1,22 +1,23 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { axiosInstanceV5 } from '@/api/client/axios';
 
-interface NotificationSettingResponse {
+export interface NotificationSettingResponse {
   notifyHour?: number;
   notifyMinute?: number;
   isEnabled?: boolean;
+  saved?: boolean;
 }
 
-interface NotificationSettingUpdateRequest {
+export interface NotificationSettingUpdateRequest {
   notifyHour: number;
   notifyMinute: number;
 }
 
-const QUERY_KEY = ['notification-setting'] as const;
+export const NOTIFICATION_SETTING_QUERY_KEY = ['notification-setting'] as const;
 
 export function useGetNotificationSetting() {
   return useQuery({
-    queryKey: QUERY_KEY,
+    queryKey: NOTIFICATION_SETTING_QUERY_KEY,
     queryFn: async () => {
       const { data } = await axiosInstanceV5.get<{
         content: NotificationSettingResponse;
@@ -35,8 +36,11 @@ export function useUpdateNotificationSetting() {
       }>('members/me/notification-setting', req);
       return data.content;
     },
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: QUERY_KEY });
+    onSuccess: async (data) => {
+      queryClient.setQueryData(NOTIFICATION_SETTING_QUERY_KEY, data);
+      await queryClient.invalidateQueries({
+        queryKey: NOTIFICATION_SETTING_QUERY_KEY,
+      });
     },
   });
 }