Refactor/279/오늘의감정로딩UI추가

src/apis/emotion/emotion.queries.ts

@@ -21,9 +21,9 @@ export const useCreateEmotionLog = (userId: number | null) => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: (data: { emotion: Emotion }) => createEmotionLogToday(data),
-    onSuccess: () => {
+    onSuccess: async () => {
       if (userId !== null) {
-        queryClient.invalidateQueries({ queryKey: ['emotion'] });
+        await queryClient.invalidateQueries({ queryKey: ['emotion'] });
       }
     },
   });

src/app/(after-login)/epigrams/_components/TodayEmotion.tsx

@@ -15,9 +15,16 @@ export default function TodayEmotion() {
   const showTodayMood = userId && !isLoading && !emotion;
 
   const handleEmotionClick = (emotion: Emotion) => {
-    if (isPending) return;
-
-    createEmotion({ emotion });
+    if (isPending) return Promise.resolve();
+    return new Promise<void>((resolve, reject) => {
+      createEmotion(
+        { emotion },
+        {
+          onSuccess: () => resolve(),
+          onError: () => reject(),
+        },
+      );
+    });
   };
 
   return (

src/app/(after-login)/mypage/_components/MyEmotions.tsx

@@ -19,9 +19,16 @@ export default function MyEmotions() {
   const { data: moodData = {}, currentMonth, setCurrentMonth } = useEmotionLogsMonthly(userId);
 
   const handleEmotionClick = (emotion: Emotion) => {
-    if (isPending) return;
-
-    createEmotion({ emotion });
+    if (isPending) return Promise.resolve();
+    return new Promise<void>((resolve, reject) => {
+      createEmotion(
+        { emotion },
+        {
+          onSuccess: () => resolve(),
+          onError: () => reject(),
+        },
+      );
+    });
   };
 
   return (

src/components/TodayMood.tsx

@@ -1,18 +1,20 @@
 'use client';
 
+import { useState } from 'react';
 import { format } from 'date-fns';
 import { EmotionLog } from '@/apis/emotion/emotion.type';
 import { EMOTION, Emotion } from '@/types/common';
 import { cn } from '@/utils/helper';
 import EmojiButton from './EmojiButton';
+import Spinner from './Spinner';
 
 interface TodayMoodProps {
   label?: string;
   containerClassName?: string;
   labelClassName?: string;
   showDate?: boolean;
   emotion?: EmotionLog | null;
-  onEmotionClick: (emotion: Emotion) => void;
+  onEmotionClick: (emotion: Emotion) => Promise<void>;
 }
 
 export default function TodayMood({
@@ -23,9 +25,20 @@ export default function TodayMood({
   emotion,
   onEmotionClick,
 }: TodayMoodProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
   const selectedEmotion = emotion?.emotion || null;
   const today = format(new Date(), 'yyyy.MM.dd');
 
+  const handleEmotionClick = async (emotion: Emotion) => {
+    setIsLoading(true);
+    try {
+      await onEmotionClick(emotion);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <>
       <div className='flex justify-between'>
@@ -34,20 +47,31 @@ export default function TodayMood({
         </label>
         {showDate && <span className='text-lg text-blue-400 lg:text-xl'>{today}</span>}
       </div>
-      <div
-        className={cn(
-          'mt-[24px] flex h-[84px] w-full justify-center gap-4 md:h-[96px] lg:mt-[48px] lg:h-[136px] lg:gap-6',
-          containerClassName,
+      <div className='relative'>
+        <div
+          className={cn(
+            'mt-[24px] flex h-[84px] w-full justify-center gap-4 md:h-[96px] lg:mt-[48px] lg:h-[136px] lg:gap-6',
+            containerClassName,
+          )}
+        >
+          {Object.values(EMOTION).map((emotion) => (
+            <EmojiButton
+              key={emotion}
+              name={emotion}
+              onClick={() => handleEmotionClick(emotion)}
+              selected={selectedEmotion === emotion}
+            />
+          ))}
+        </div>
+
+        {isLoading && (
+          <div className='absolute inset-0 z-10 flex items-center justify-center rounded-[12px] backdrop-blur-sm'>
+            <div className='flex flex-col items-center justify-center gap-4 p-4 text-center text-blue-400'>
+              <Spinner />
+              감정을 저장하고 있습니다.
+            </div>
+          </div>
         )}
-      >
-        {Object.values(EMOTION).map((emotion) => (
-          <EmojiButton
-            key={emotion}
-            name={emotion}
-            onClick={() => onEmotionClick(emotion)}
-            selected={selectedEmotion === emotion}
-          />
-        ))}
       </div>
     </>
   );