Merge pull request #530 from woowacourse-teams/develop

[release] v0.1.2

Author: jhy979

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`