🎨 design(#171): 내 대시보드 높이 디자인 문제 수정

Part3-Team15 · Jul 3, 2024 · 5977be3 · 5977be3
1 parent 53b2329
commit 5977be3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 52 deletions.
diff --git a/src/containers/mydashboard/InvitedDashboardList/ItemList.tsx b/src/containers/mydashboard/InvitedDashboardList/ItemList.tsx
@@ -18,41 +18,41 @@ export default function InvitationItemList({ invitations, handleAcceptInvitation
         <p>초대자</p>
         <p className='w-44'>수락 여부</p>
       </div>
-      {invitations.length === 0 && (
-        <div className='flex h-full flex-col items-center justify-center'>
+      {invitations.length === 0 ? (
+        <div className='flex flex-col items-center pt-[200px]'>
           <div className='relative size-[60px] md:size-[100px]'>
             <Image src={'/icons/invitations.svg'} alt='invitations' fill />
           </div>
           <p className='px-7 py-5 text-gray-78'>검색 결과가 없습니다.</p>
         </div>
+      ) : (
+        <ul className='h-full overflow-y-auto'>
+          {invitations.map((invitation: Invitation) => (
+            <li
+              key={invitation.id}
+              className='grid h-max grid-cols-1 gap-[10px] border-b border-gray-ee p-4 text-sm text-black-33 md:h-16 md:grid-cols-3 md:gap-0 md:px-7 md:py-0 md:text-base'
+            >
+              <div className='grid grid-cols-3 items-center md:flex'>
+                <p className='flex items-center md:hidden'>이름</p>
+                <p className='col-span-2 flex items-center'>{invitation.dashboard.title}</p>
+              </div>
+              <div className='grid grid-cols-3 items-center md:flex'>
+                <p className='flex items-center md:hidden'>초대자</p>
+                <p className='col-span-2 flex items-center md:min-w-28'>{invitation.inviter.nickname}</p>
+              </div>
+              <div className='flex items-center gap-[10px]'>
+                <ActionButton onClick={() => handleAcceptInvitation(invitation.id, true)} className='grow lg:grow-0'>
+                  수락
+                </ActionButton>
+                <CancelButton onClick={() => handleAcceptInvitation(invitation.id, false)} className='grow lg:grow-0'>
+                  거절
+                </CancelButton>
+              </div>
+            </li>
+          ))}
+          <div ref={observerRef} className='h-1' />
+        </ul>
       )}
-      <ul className='h-full overflow-y-scroll'>
-        {invitations.map((invitation: Invitation) => (
-          <li
-            key={invitation.id}
-            className='grid h-max grid-cols-1 gap-[10px] border-b border-gray-ee p-4 text-sm text-black-33 md:h-16 md:grid-cols-3 md:gap-0 md:px-7 md:py-0 md:text-base'
-          >
-            <div className='grid grid-cols-3 items-center md:flex'>
-              <p className='flex items-center md:hidden'>이름</p>
-              <p className='col-span-2 flex items-center'>{invitation.dashboard.title}</p>
-            </div>
-            <div className='grid grid-cols-3 items-center md:flex'>
-              <p className='flex items-center md:hidden'>초대자</p>
-              <p className='col-span-2 flex items-center md:min-w-28'>{invitation.inviter.nickname}</p>
-            </div>
-            <div className='flex items-center gap-[10px]'>
-              <ActionButton onClick={() => handleAcceptInvitation(invitation.id, true)} className='grow lg:grow-0'>
-                수락
-              </ActionButton>
-              <CancelButton onClick={() => handleAcceptInvitation(invitation.id, false)} className='grow lg:grow-0'>
-                거절
-              </CancelButton>
-            </div>
-          </li>
-        ))}
-
-        <div ref={observerRef} className='h-1' />
-      </ul>
     </div>
   );
 }
diff --git a/src/containers/mydashboard/InvitedDashboardList/index.tsx b/src/containers/mydashboard/InvitedDashboardList/index.tsx
@@ -102,18 +102,18 @@ export default function InvitedDashboardList() {
 
   if (error) {
     return (
-      <div className='h-full max-w-screen-lg overflow-hidden rounded-lg border-0 bg-white'>
+      <section className='h-full min-h-[530px] max-w-[350px] rounded-lg border-0 bg-white md:max-w-full lg:max-w-screen-lg'>
         <p className='px-7 pb-5 pt-8 text-base font-bold text-black-33'>초대받은 대시보드</p>
         <div className='flex items-center justify-center'>
           <p>데이터를 가져오는 중 오류가 발생했습니다.</p>
           <p>{error.message}</p>
         </div>
-      </div>
+      </section>
     );
   }
 
   return (
-    <section className='h-full max-h-[calc(100vh-410px)] min-h-[530px] max-w-[350px] overflow-hidden rounded-lg border-0 bg-white md:max-w-full lg:max-w-screen-lg'>
+    <section className='h-full min-h-[530px] max-w-[350px] rounded-lg border-0 bg-white md:max-w-full lg:max-w-screen-lg'>
       <p className='px-7 pb-5 pt-8 text-base font-bold text-black-33'>초대받은 대시보드</p>
       {isLoading ? (
         <Skeleton />
@@ -129,8 +129,8 @@ export default function InvitedDashboardList() {
               />
             </>
           ) : (
-            <div className='flex h-full flex-col items-center justify-center'>
-              <div className='relative size-[60px] md:size-[100px]'>
+            <div className='flex flex-col items-center justify-center pt-[200px]'>
+              <div className='relative size-[60px] md:size-[150px]'>
                 <Image src={'/icons/invitations.svg'} alt='invitations' fill />
               </div>
               <p className='px-7 py-5 text-gray-78'>초대된 대시보드가 없습니다.</p>

diff --git a/src/containers/mydashboard/index.tsx b/src/containers/mydashboard/index.tsx
diff --git a/src/pages/mydashboard/index.tsx b/src/pages/mydashboard/index.tsx
@@ -1,5 +1,16 @@
-import MyDashboard from '@/containers/mydashboard';
+import Head from 'next/head';
+
+import DashboardList from '@/containers/mydashboard/DashboardList';
+import InvitedDashboardList from '@/containers/mydashboard/InvitedDashboardList';
 
 export default function MyDashboardPage() {
-  return <MyDashboard />;
+  return (
+    <div className='flex h-[calc(100vh-70px)] min-w-full flex-col gap-11 bg-gray-fa p-10'>
+      <Head>
+        <title>Taskify | 내 대시보드</title>
+      </Head>
+      <DashboardList />
+      <InvitedDashboardList />
+    </div>
+  );
 }