feat: 약속 참여 api 호출 및 애니메이션 추가 (#48)

## #️⃣연관된 이슈

> ex) #이슈번호, #이슈번호

## 📝작업 내용

> 이번 PR에서 작업한 내용을 간략히 설명해주세요

### 스크린샷 (선택)

## 💬리뷰 요구사항(선택)

> 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

Author: soyoungheo429

frontend/src/App.css

@@ -8,9 +8,38 @@ body, html, #root {
 }
 
 .appLayout {
-  display: flex;
+  --sidebar-width: 120px;
+  display: grid;
+  grid-template-columns: var(--sidebar-width) 1fr;
+  min-height: 100vh;
+  transition: grid-template-columns 0.45s ease;
+}
+
+.appLayout.sidebar-open {
+  --sidebar-width: 360px;
 }
 
 .content {
-  flex: 1;
+  width: 100%;
+  min-width: 0;
+  transition: margin 0.45s ease, padding 0.45s ease;
+}
+
+.appLayout.sidebar-animating .content {
+  opacity: 0.65;
+}
+
+.page-transition {
+  opacity: 0;
+  animation: fadeIn 0.55s ease forwards;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }

frontend/src/AppLayout.jsx

@@ -1,4 +1,4 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import { useEffect, useMemo, useState } from "react";
 
 import SidebarLeft from "./components/SidebarLeft";
@@ -13,12 +13,14 @@ import { API_BASE_URL } from "./config/api";
 export default function AppLayout() {
   // 약속 데이터 목록 상태
   const [sidebarEvents, setSidebarEvents] = useState([]);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   // 에러 메시지 상태
   const [error, setError] = useState("");
 
   // 로그인 토큰
   const token = useMemo(() => localStorage.getItem("access_token"), []);
+  const location = useLocation();
 
   useEffect(() => {
     const fetchAppointments = async () => {
@@ -58,10 +60,18 @@ export default function AppLayout() {
     fetchAppointments();
   }, [token]);
 
+  const layoutClass = `appLayout ${isSidebarOpen ? "sidebar-open" : "sidebar-closed"}`;
+
   return (
-    <div className="appLayout">
-      <SidebarLeft events={sidebarEvents} />
-      <Outlet className="content" />
+    <div className={layoutClass}>
+      <SidebarLeft
+        events={sidebarEvents}
+        isOpen={isSidebarOpen}
+        onToggle={setIsSidebarOpen}
+      />
+      <div key={location.pathname} className="content page-transition">
+        <Outlet />
+      </div>
     </div>
   );
 }

frontend/src/components/Calendar.css

@@ -2,7 +2,7 @@
 / 캘린더 전체 레이아웃 & 공통 스타일 /
 / ---------------------------------------------------- */
 .calendar-container {
-  background-color: #FAFFF2;
+  background-color: #FDFDF8 !important;
   border-radius: 12px;
   padding: 24px;
   display: flex;
@@ -44,7 +44,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
 
 .view-toggle-buttons {
   display: flex;
-  background: #EAEEE0;
+  background: #E9E9E3;
   border-radius: 20px;
   padding: 5px;
 }
@@ -61,7 +61,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
 }
 
 .view-toggle-buttons button.active {
-  background: #FAFFF2;
+  background: #FDFDF8;
   box-shadow: 0px 3px 3px rgba(118, 113, 113, 0.07);
 }
 
@@ -75,7 +75,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
   width: 50px;
   height: 50px;
   padding: 12px;
-  background: #EAEEE0;
+  background: #E9E9E3;
   border-radius: 15px;
   color: #85837B;
   font-size: 20px;
@@ -92,7 +92,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
   padding: 10px 18px;
   background: #1F1F1F;
   border-radius: 15px;
-  color: #FAFFF2;
+  color: #E9E9E3;
   font-size: 15px;
   border: none;
   cursor: pointer;
@@ -132,7 +132,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
   justify-content: flex-start; 
   overflow: hidden;
   align-items: flex-start;
-  background-color: #FAFFF2; 
+  background-color: #FDFDF8; 
 }
 
 /* 날짜 번호 */
@@ -235,7 +235,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
 
 /* 과거/오늘/미래 이벤트 색상 */
 .past-event {
-  background: #EAEEE0; 
+  background: #E9E9E3; 
   color: #C4C5B7 !important;
 }
 
@@ -249,7 +249,7 @@ button, .custom-header span, .fc-col-header-cell-cushion {
   color: #FFFFFF !important;
 }
 
-.past-event .event-title, .past-event .event-time-start { color: #C4C5B7 !important; }
+.past-event .event-title, .past-event .event-time-start { color: #E9E9E3 !important; }
 .today-event .event-title, .today-event .event-time-start { color: #FFFFFF !important; }
 .future-event .event-title, .future-event .event-time-start { color: #FFFFFF !important; }
 
@@ -355,13 +355,13 @@ button, .custom-header span, .fc-col-header-cell-cushion {
 /* 헤더 고정 */
 .fc-timegrid-header {
   top: 0;
-  background-color: #FAFFF2;
+  background-color: #FDFDF8;
   z-index: 10;
 }
 
 .fc-col-header,
 .fc-col-header table {
-  background-color: #FAFFF2;
+  background-color: #FDFDF8;
 }
 
 
@@ -509,6 +509,24 @@ button, .custom-header span, .fc-col-header-cell-cushion {
   color: inherit !important;
 }
 
+.calendar-surface {
+  position: relative;
+}
+
+.fade-swap {
+  opacity: 0;
+  animation: calendarSoftFade 0.55s ease forwards;
+}
+
+@keyframes calendarSoftFade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}