Merge pull request #529 from jhy979/feature/528-loading-and-animation

[feat] 모달 로딩 처리 및 일정 컬러 변경 애니메이션을 추가한다.

Author: jhy979

backend/src/main/java/com/allog/dallog/domain/auth/domain/OAuthToken.java

@@ -2,6 +2,7 @@
 
 import com.allog.dallog.domain.common.BaseEntity;
 import com.allog.dallog.domain.member.domain.Member;
+import java.util.Objects;
 import javax.persistence.Column;
 import javax.persistence.Entity;
 import javax.persistence.FetchType;
@@ -36,7 +37,9 @@ public OAuthToken(final Member member, final String refreshToken) {
     }
 
     public void change(final String refreshToken) {
-        this.refreshToken = refreshToken;
+        if (!Objects.isNull(refreshToken)) {
+            this.refreshToken = refreshToken;
+        }
     }
 
     public Long getId() {

frontend/src/components/ScheduleAddModal/ScheduleAddModal.tsx

@@ -16,6 +16,7 @@ import { userState } from '@/recoil/atoms';
 
 import Button from '@/components/@common/Button/Button';
 import Fieldset from '@/components/@common/Fieldset/Fieldset';
+import Spinner from '@/components/@common/Spinner/Spinner';
 
 import { CACHE_KEY } from '@/constants/api';
 import { DATE_TIME } from '@/constants/date';
@@ -54,17 +55,16 @@ function ScheduleAddModal({ dateInfo, closeModal }: ScheduleAddModalProps) {
 
   const queryClient = useQueryClient();
 
-  const { data } = useQuery<AxiosResponse<CategoryType[]>, AxiosError>(
-    CACHE_KEY.MY_CATEGORIES,
-    () => categoryApi.getMy(accessToken),
-    {
-      onSuccess: (data) => onSuccessGetCategories(data),
-    }
-  );
+  const { isLoading: isGetCategoryLoading, data } = useQuery<
+    AxiosResponse<CategoryType[]>,
+    AxiosError
+  >(CACHE_KEY.MY_CATEGORIES, () => categoryApi.getMy(accessToken), {
+    onSuccess: (data) => onSuccessGetCategories(data),
+  });
 
   const categoryId = useControlledInput();
 
-  const { isLoading, mutate: postSchedule } = useMutation<
+  const { mutate: postSchedule } = useMutation<
     AxiosResponse<{ schedules: ScheduleType[] }>,
     AxiosError,
     Omit<ScheduleType, 'id' | 'categoryId' | 'colorCode' | 'categoryType'>,
@@ -129,7 +129,9 @@ function ScheduleAddModal({ dateInfo, closeModal }: ScheduleAddModalProps) {
     closeModal();
   };
 
-  if (isLoading) return <>Loading</>;
+  if (isGetCategoryLoading || data === undefined) {
+    return <Spinner size={10} />;
+  }
 
   return (
     <div css={scheduleAddModal}>

frontend/src/pages/CalendarPage/CalendarPage.styles.ts

@@ -173,6 +173,8 @@ const itemWithBackgroundStyle = (
 
   cursor: pointer;
   filter: ${isHovering && 'brightness(0.95)'};
+
+  transition: background-color 0.3s;
 `;
 
 const itemWithoutBackgroundStyle = (
@@ -195,6 +197,8 @@ const itemWithoutBackgroundStyle = (
 
   cursor: pointer;
   filter: none;
+
+  transition: background-color 0.3s;
 `;
 
 const moreStyle = ({ colors }: Theme) => css`