Merge pull request #167 from imaginer-dev/164---ui-프로필-수정-구현

164   UI 프로필 수정 구현 - 캘린더 레이아웃 깨짐 수정

Author: gihwan-dev

src/components/common/Calendar.tsx

@@ -138,7 +138,7 @@ export default function Calendar() {
 
   return (
     <div>
-      <div className="rounded bg-white p-6 px-4">
+      <div className="rounded bg-white p-7 px-4">
         <FullCalendar
           ref={calendarRef}
           plugins={[dayGridPlugin, interactionPlugin]}
@@ -218,7 +218,7 @@ function EventCards({ events, date }: EventCardsProps) {
 
   return (
     <div>
-      <h2 className="ml-2">{date}</h2>
+      <h2 className="mb-2 ml-2">{date}</h2>
       <div className="flex gap-5 overflow-x-auto">
         {events.map((event, index) => {
           const eventDateRange = formatDateRange(event.start_date, event.end_date);

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

@@ -10,6 +10,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([
   {
@@ -77,6 +78,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>
             <Calendar />
             <CreateEventButton />
           </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

@@ -72,23 +72,24 @@
 
 @media (min-width: 1024px) {
   main {
-    padding-left: 15%;
-    padding-right: 25%;
+    padding-right: 25vw;
   }
   .eventCardList {
     position: fixed;
     right: 0;
     top: 0;
-    width: 25%;
+    width: 25vw;
     height: 100%;
     padding: 0 1rem;
     padding-left: 0;
-    margin-top: 4rem;
+    margin-top: 4.5rem;
   }
   .eventCardList .flex {
     overflow-y: auto;
     overflow-x: hidden;
     flex-flow: column;
+    max-height: calc(90vh - 72px);
+    overflow-y: auto;
   }
   .drawer-toggle {
     display: none;
@@ -97,7 +98,6 @@
     flex-direction: row;
   }
   .drawer-side {
-    width: 15%;
     visibility: visible;
     overflow-y: auto;
     pointer-events: auto;