fix: 라우트 수정 및 자기 일정만 받아오게 수정

Author: gihwan-dev

src/apis/personalScheduleApi.ts

@@ -2,7 +2,14 @@ import supabase from '@/supabase';
 import { Events } from '@/utils/index';
 
 export const getPersonalSchedule = async () => {
-  const { data, error } = await supabase.from('personal_schedules').select();
+  const { data: userData, error: userError } = await supabase.auth.getUser();
+
+  if (userError) {
+    throw userError;
+  }
+
+  const { data, error } = await supabase.from('personal_schedules').select('*').eq('user_id', userData.user.id);
+
   if (error) {
     throw error;
   }

src/main.tsx

@@ -1,28 +1,24 @@
 import ReactDOM from 'react-dom/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import './styles/index.css';
-import App from './App.tsx';
-import TextInputForm from './pages/InputFormTest.tsx';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import ChangePasswordPage from './pages/ChangePasswordPage.tsx';
-import { JoinPage, LoginPage, ResetPwPage, NotFound, Policy } from './pages/index.ts';
+import { JoinPage, LoginPage, NotFound, Policy, ResetPwPage } from './pages/index.ts';
 import ProtectedRoute from './providers/ProtectedRoute.tsx';
 import EditGroupSchedule from './pages/EditGroupSchedulePage.tsx';
 import AddGroupSchedulePage from './pages/AddGroupSchedulePage.tsx';
 import GroupSchedulePage from './pages/GroupSchedulePage.tsx';
 import ProfilePage from './pages/ProfilePage.tsx';
+import App from '@/App.tsx';
 
 const router = createBrowserRouter([
   {
     path: '/',
+    element: <ProtectedRoute />,
     children: [
       {
         index: true,
-        element: (
-          <ProtectedRoute>
-            <App />
-          </ProtectedRoute>
-        ),
+        element: <App />,
       },
       {
         path: '/group/:groupId/edit/:scheduleId',
@@ -37,50 +33,42 @@ const router = createBrowserRouter([
         element: <AddGroupSchedulePage />,
       },
       {
-        path: '/login',
-        element: <LoginPage />,
-      },
-      {
-        path: '/join',
-        element: <JoinPage />,
-      },
-      {
-        path: '/editPw',
-        element: <ResetPwPage />,
-      },
-      {
-        path: '/change-password',
-        element: <ChangePasswordPage />,
-      },
-      {
-        path: '*',
-        element: <NotFound />,
-      },
-      {
-        path: '/test',
-        children: [
-          {
-            path: 'inputForm',
-            element: <TextInputForm />,
-          },
-        ],
+        path: '/profile',
+        element: <ProfilePage />,
       },
+    ],
+  },
+  {
+    path: '/login',
+    element: <LoginPage />,
+  },
+  {
+    path: '/join',
+    element: <JoinPage />,
+  },
+  {
+    path: '/editPw',
+    element: <ResetPwPage />,
+  },
+  {
+    path: '/change-password',
+    element: <ChangePasswordPage />,
+  },
+  {
+    path: '*',
+    element: <NotFound />,
+  },
+
+  {
+    path: '/policy',
+    children: [
       {
-        path: '/policy',
-        children: [
-          {
-            path: 'personalInfo',
-            element: <Policy.PersonalInfoPage />,
-          },
-          {
-            path: 'usecondition',
-            element: <Policy.UseConditionPage />,
-          },
-        ],
+        path: 'personalInfo',
+        element: <Policy.PersonalInfoPage />,
       },
       {
-        path: '/profile',
-        element: <ProfilePage />,
+        path: 'usecondition',
+        element: <Policy.UseConditionPage />,
       },
     ],
   },

src/pages/MyCalendarPage.tsx

@@ -2,7 +2,7 @@ import AppBar from '@/components/common/AppBar.tsx';
 import Calendar from '../components/common/Calendar.tsx';
 import CreateEventDialog from '@/components/MyCalendar/CreateEventButton.tsx';
 import HamburgerButton from '@/components/common/SideBar/HamburgerButton.tsx';
-import { getPersonalSchedule, deletePersonalSchedule } from '@/apis/personalScheduleApi';
+import { deletePersonalSchedule, getPersonalSchedule } from '@/apis/personalScheduleApi';
 import { useEventState } from '@/stores/myEventsStore';
 import { useEffect, useRef } from 'react';
 import Dialog from '@/components/common/Dialog.tsx';
@@ -15,6 +15,8 @@ interface DialogElement {
 const MyCalendarPage: React.FC = () => {
   const { db_events, addDBEvents } = useEventState();
 
+  console.log('dv_events : ', db_events);
+
   useEffect(() => {
     getPersonalSchedule().then((schedule) => {
       schedule.map((x) => {
@@ -45,7 +47,7 @@ const MyCalendarPage: React.FC = () => {
   return (
     <div className="lg:ml-80">
       <AppBar backButton={false} IconButton={<HamburgerButton />} calendarName="내 캘린더" />
-      <main className="z-1 relative flex-grow">
+      <main className="z-1 main-padding-right relative flex-grow">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
           <div>
             <Calendar db_events={db_events} onDeleteClicked={onDeleteClicked} />

src/providers/ProtectedRoute.tsx

@@ -1,13 +1,8 @@
 import { Loading } from '@/pages';
 import { useGetSession } from '@/react-queries/useGetSession';
-import { FC, ReactNode } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 
-interface Props {
-  children: ReactNode;
-}
-
-const ProtectedRoute: FC<Props> = ({ children }) => {
+const ProtectedRoute = () => {
   const { data, isError, error, isLoading } = useGetSession();
   const navigate = useNavigate();
 
@@ -23,7 +18,7 @@ const ProtectedRoute: FC<Props> = ({ children }) => {
     navigate('/login');
   }
 
-  return children;
+  return <Outlet />;
 };
 
 export default ProtectedRoute;

src/styles/index.css

@@ -70,15 +70,15 @@ button {
       position: absolute;
       width: 100%;
       height: 100%;
-      background-color: #bec00038;
+      background-color: rgba(215, 217, 39, 0.22);
       top: 0;
       left: 0;
     }
   }
 }
 
 @media (min-width: 1024px) {
-  main {
+  .main-padding-right {
     padding-right: 25vw;
   }
   .eventCardList {