feat: 프로필 페이지 추가

Author: jeongah2651

src/components/common/Calendar.tsx

@@ -177,7 +177,7 @@ export default function Calendar() {
 
   return (
     <div>
-      <div className="rounded bg-white p-6 px-4 sm:px-0">
+      <div className="rounded bg-white p-6 px-4">
         <FullCalendar
           ref={calendarRef}
           plugins={[dayGridPlugin, interactionPlugin]}

src/components/common/SideBar/SideBarProfile.tsx

@@ -15,10 +15,10 @@ const SideBarProfile: FC<Props> = ({ userName, imageUrl }) => {
 
   return (
     <div className="flex w-full flex-row justify-between border-b-2 border-white pb-4">
-      <div className="flex flex-row items-center gap-1 text-lg">
+      <Link to={`/profile`} className="flex flex-row items-center gap-1 text-lg">
         <ProfileIcon imageUrl={imageUrl} />
         <span className="ml-2">{userName}</span>
-      </div>
+      </Link>
       <div className="flex flex-row items-center gap-2">
         <Link to="/" className="cursor-pointer rounded-lg bg-base-100 px-3 py-1 font-black hover:opacity-50">
           내 캘린더 보기

src/main.tsx

@@ -11,6 +11,7 @@ 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';
 
 const router = createBrowserRouter([
   {
@@ -78,6 +79,10 @@ const router = createBrowserRouter([
           },
         ],
       },
+      {
+        path: '/profile',
+        element: <ProfilePage />,
+      },
     ],
   },
 ]);

src/pages/MyCalendarPage.tsx

@@ -9,7 +9,7 @@ const MyCalendarPage: React.FC = () => {
       <AppBar backButton={false} IconButton={<HamburgerButton />} calendarName="내 캘린더" />
       <main className="z-1 relative flex-grow">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-          <div className="rounded bg-white p-6 px-4 sm:px-0">
+          <div className="rounded p-6 px-4 sm:px-0">
             <Calendar />
           </div>
         </div>

src/pages/ProfilePage.tsx

@@ -0,0 +1,21 @@
+import { useGetProfile } from '@/react-queries/userGetProfile';
+
+const ProfilePage = () => {
+    const { data: user, error, isLoading, isError } = useGetProfile();
+    console.log(user)
+
+    if (isError) {
+        // TODO: 추후 에러 처리
+        console.error(error);
+    }
+
+    return (
+      <div>
+        {isLoading && <span className="loading" />}
+        <h1>프로필</h1>
+        <p>여기는 프로필 페이지입니다.</p>
+      </div>
+    );
+  };
+  
+  export default ProfilePage;

src/styles/index.css

@@ -2,6 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  @font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+  }
+}
+
 .userInvite {
   display: flex;
   justify-content: center;
@@ -15,36 +24,6 @@
   margin: auto;
 }
 
-@media (min-width: 1024px) {
-  .drawer-toggle {
-    display: none;
-  }
-  .drawer-content {
-    flex-direction: row;
-  }
-  .drawer-side {
-    width: 15%;
-    visibility: visible;
-    overflow-y: auto;
-  }
-  .drawer-side > *:not(.drawer-overlay) {
-    transform: translateX(0%);
-  }
-
-  .drawer-overlay {
-    visibility: visible;
-  }
-}
-
-@layer base {
-  @font-face {
-    font-family: 'Pretendard-Regular';
-    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-  }
-}
-
 /* 캘린더 - 화살표 아이콘 */
 .fc .fc-button-primary:hover {
   background-color: var(--fc-event-text-color);
@@ -90,3 +69,25 @@
     }
   }
 }
+
+@media (min-width: 1024px) {
+  .drawer-toggle {
+    display: none;
+  }
+  .drawer-content {
+    flex-direction: row;
+  }
+  .drawer-side {
+    width: 15%;
+    visibility: visible;
+    overflow-y: auto;
+    pointer-events: auto;
+  }
+  .drawer-side > *:not(.drawer-overlay) {
+    transform: translateX(0%);
+  }
+
+  .drawer-overlay {
+    visibility: visible;
+  }
+}