Fix: 성공 시에도 snackbar 뜨는 것 수정 및 캘린더 스크롤 수정

components/calendar/CalendarLayout.tsx

@@ -69,6 +69,7 @@ const CalendarLayout = ({
     'private',
     currentDate
   );
+
   const scheduleData = [...PublicSchedule, ...PrivateSchedule];
   const handleNavigate = (date: Date) => {
     setCurrentDate(date);

components/calendar/CustomCalendar.tsx

@@ -7,14 +7,17 @@ const CustomCalendar = styled.div`
   justify-content: center;
   align-items: center;
   position: relative;
+  overflow: auto;
 
   .rbc-calendar {
     width: 95%;
-    height: 100%;
     background-color: white;
-    padding: 2rem 1rem 1rem 1rem;
-    position: absolute;
-    overflow: auto;
+    padding: 1rem;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 85vh;
+    overflow: hidden;
   }
 
   .rbc-header {
@@ -35,6 +38,8 @@ const CustomCalendar = styled.div`
   }
 
   .rbc-month-view {
+    flex-grow: 1;
+    overflow-y: auto;
     border-left: none;
     border-right: none;
     border-top: 1px solid #e8ebfc;

components/calendar/sidebar/CalendarSidebar.tsx

@@ -60,6 +60,13 @@ const CalendarSidebar = ({
               ...updateGroup,
               title: value!,
             },
+            () => {
+              setUpdatedPrivateGroups((prev) =>
+                prev.map((group) =>
+                  group.id === id ? { ...group, title: value || '' } : group
+                )
+              );
+            },
             (error: string) => {
               setSnackbar({
                 toastName: 'post error',
@@ -84,6 +91,13 @@ const CalendarSidebar = ({
               ...updateGroup,
               backgroundColor: value!,
             },
+            () => {
+              setUpdatedPrivateGroups((prev) =>
+                prev.map((group) =>
+                  group.id === id ? { ...group, title: value || '' } : group
+                )
+              );
+            },
             (error: string) => {
               setSnackbar({
                 toastName: 'post error',
@@ -105,7 +119,12 @@ const CalendarSidebar = ({
             'DELETE',
             `custom/${id}`,
             deleteGroup,
-            (error: string) => {
+            () => {
+              setUpdatedPrivateGroups((prev) =>
+                prev.filter((group) => group.id !== id)
+              );
+            },
+            () => {
               setSnackbar({
                 toastName: 'post error',
                 severity: 'error',
@@ -115,8 +134,8 @@ const CalendarSidebar = ({
             }
           );
         }
-        return prev.filter((group) => group.id !== id);
       }
+
       return prev;
     });
   };

pages/calendar/index.tsx

@@ -155,6 +155,9 @@ const CalendarPage: NextPage = () => {
     filterList: ScheduleFilter
   ) => {
     return schedules.filter((schedule) => {
+      if (schedule.status === 'DELETE') {
+        return false;
+      }
       const isPublicMatch = filterList.public.includes(
         schedule.classification!
       );

styles/calendar/Calendar.module.scss

@@ -14,7 +14,7 @@
   max-width: 100%;
   height: 100%;
   flex-direction: row;
-  // overflow: hidden;
+  // overflow: scroll;
   background-color: #f9f9fc;
   border-radius: 0.5rem;
 }
@@ -23,7 +23,9 @@
   position: relative;
   display: flex;
   width: 100%;
-  margin: 4rem 2rem 2.5rem;
+  // height: 100%;
+  margin: 1.5rem;
+  overflow: scroll;
   background-color: white;
   border-radius: 0.5rem;
   box-shadow: 0 0 10px #ebedf6;

styles/calendar/modal/AddSelect.module.scss

@@ -5,6 +5,7 @@
   z-index: 5;
   width: 120px;
   padding: 5px;
+  cursor: default;
   background-color: #f3f3ff;
   border-radius: 5px;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 4px 4px 0px;