Part3-Team15 · wjsdncl · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024 · Jul 2, 2024
diff --git a/src/components/Header/DashboardHeader/index.tsx b/src/components/Header/DashboardHeader/index.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 
@@ -34,6 +35,9 @@ export default function DashboardHeader() {
 
   return (
     <header className='flex h-[60px] w-full items-center justify-end border-b border-gray-d9 bg-white px-[24px] text-black-33 md:h-[70px] md:px-[40px] lg:justify-between'>
+      <Head>
+        <title>Taskify | {title}</title>
+      </Head>
       <div className='hidden items-center gap-2 lg:flex'>
         <h1 className='text-xl font-bold'>{title}</h1>
         {createdByMe && <Image src='/icons/crown.svg' alt='왕관 아이콘' width={20} height={16} />}

diff --git a/src/components/Sidebar/DashboardItem.tsx b/src/components/Sidebar/DashboardItem.tsx
@@ -19,7 +19,9 @@ export default function DashboardItem({ dashboard, nowDashboard }: DashboardItem
         className={`${itemClasses} flex items-center justify-center rounded-md py-3 hover:bg-violet/20 md:justify-start md:px-3`}
       >
         <div className='rounded-full p-1' style={{ backgroundColor: dashboard.color }} />
-        <p className='hidden overflow-hidden pl-4 pr-[6px] text-lg font-medium md:block'>{dashboard.title}</p>
+        <div className='ml-4 mr-[6px] hidden h-[28px] overflow-x-hidden text-nowrap text-lg font-medium md:block'>
+          <p>{dashboard.title}</p>
+        </div>
         {dashboard.createdByMe && (
           <Image src={'/icons/crown.svg'} alt='my' className='hidden md:block' width={18} height={14} />
         )}

diff --git a/src/containers/mydashboard/DashboardList/index.tsx b/src/containers/mydashboard/DashboardList/index.tsx
@@ -43,9 +43,9 @@ export default function DashboardList() {
   };
 
   return (
-    <section className='w-max grow flex-col justify-between'>
-      <ul className='grid grid-rows-1 gap-3 font-semibold text-black-33 md:min-h-[216px] md:grid-cols-2 md:grid-rows-3 lg:min-h-[140px] lg:grid-cols-3'>
-        <li className='h-12 w-64 rounded-lg border border-gray-d9 bg-white md:h-16 md:w-60 lg:w-[300px]'>
+    <section className='grow flex-col justify-between'>
+      <ul className='grid max-w-[350px] grid-rows-1 gap-3 font-semibold text-black-33 md:min-h-[216px] md:max-w-full md:grid-cols-2 md:grid-rows-3 lg:min-h-[140px] lg:max-w-screen-lg lg:grid-cols-3'>
+        <li className='h-12 w-full rounded-lg border border-gray-d9 bg-white md:h-16'>
           <button className='btn-violet-light size-full gap-4' type='button' onClick={() => openNewDashboardModal()}>
             새로운 대시보드
             <Image src={'/icons/plus-filled.svg'} alt='plus' width={22} height={22} />
@@ -54,28 +54,22 @@ export default function DashboardList() {
         {isLoading ? (
           <>
             {[...Array(5)].map((_, i) => (
-              <li
-                key={i}
-                className='h-12 w-64 animate-pulse rounded-lg border border-gray-d9 bg-gray-fa md:h-16 md:w-60 lg:w-[300px]'
-              />
+              <li key={i} className='h-12 w-full animate-pulse rounded-lg border border-gray-d9 bg-gray-fa md:h-16' />
             ))}
           </>
         ) : (
           <>
             {dashboardResponse?.dashboards.map((dashboard) => (
-              <li
-                className='h-12 w-64 rounded-lg border border-gray-d9 bg-white md:h-16 md:w-60 lg:w-[300px]'
-                key={dashboard.id}
-              >
+              <li className='h-12 w-full rounded-lg border border-gray-d9 bg-white md:h-16' key={dashboard.id}>
                 <Link href={`/dashboard/${dashboard.id}`} className={'btn-violet-light size-full rounded-md px-5'}>
                   <div className='flex size-full items-center'>
                     <div className='rounded-full p-1' style={{ backgroundColor: dashboard.color }} />
-                    <div className='h-[28px] max-w-[150px] overflow-hidden pl-4 pr-1 text-lg font-medium lg:max-w-[200px]'>
-                      <p className={`${dashboard.title.length > 9 ? 'hover:animate-scroll-horizontal' : ''}`}>
-                        {dashboard.title}
-                      </p>
+                    <div className='mx-4 h-[28px] grow overflow-hidden text-ellipsis text-lg font-medium'>
+                      <p className={`size-full`}>{dashboard.title}</p>
                     </div>
-                    {dashboard.createdByMe && <Image src={'/icons/crown.svg'} alt='my' width={20} height={16} />}
+                    {dashboard.createdByMe && (
+                      <Image src={'/icons/crown.svg'} className='mr-3' alt='my' width={20} height={16} />
+                    )}
                   </div>
                   <Image src={'/icons/arrow-black.svg'} alt='arrow' width={14} height={14} />
                 </Link>

diff --git a/src/containers/mydashboard/InvitedDashboardList/ItemList.tsx b/src/containers/mydashboard/InvitedDashboardList/ItemList.tsx
@@ -41,13 +41,10 @@ export default function InvitationItemList({ invitations, handleAcceptInvitation
               <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='w-20 grow lg:grow-0'>
+              <ActionButton onClick={() => handleAcceptInvitation(invitation.id, true)} className='grow lg:grow-0'>
                 수락
               </ActionButton>
-              <CancelButton
-                onClick={() => handleAcceptInvitation(invitation.id, false)}
-                className='w-20 grow lg:grow-0'
-              >
+              <CancelButton onClick={() => handleAcceptInvitation(invitation.id, false)} className='grow lg:grow-0'>
                 거절
               </CancelButton>
             </div>

diff --git a/src/containers/mydashboard/InvitedDashboardList/index.tsx b/src/containers/mydashboard/InvitedDashboardList/index.tsx
@@ -113,7 +113,7 @@ export default function InvitedDashboardList() {
   }
 
   return (
-    <section className='h-full min-h-80 overflow-hidden rounded-lg border-0 bg-white'>
+    <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'>
       <p className='px-7 pb-5 pt-8 text-base font-bold text-black-33'>초대받은 대시보드</p>
       {isLoading ? (
         <Skeleton />

diff --git a/src/containers/mydashboard/index.tsx b/src/containers/mydashboard/index.tsx
@@ -1,9 +1,14 @@
+import Head from 'next/head';
+
 import DashboardList from './DashboardList';
 import InvitedDashboardList from './InvitedDashboardList';
 
 export default function MyDashboard() {
   return (
-    <div className='flex w-full max-w-min flex-col gap-11 bg-gray-fa p-10'>
+    <div className='flex min-w-full flex-col gap-11 bg-gray-fa p-10'>
+      <Head>
+        <title>Taskify | 내 대시보드</title>
+      </Head>
       <DashboardList />
       <InvitedDashboardList />
     </div>

diff --git a/src/pages/404.tsx b/src/pages/404.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSelector } from 'react-redux';
@@ -9,6 +10,9 @@ export default function NotFound() {
 
   return (
     <div className='flex h-screen items-center justify-center'>
+      <Head>
+        <title>Taskify | 404</title>
+      </Head>
       <div className='mb-24 w-[350px] items-center justify-center md:w-[520px]'>
         <div className='relative h-[180px] w-[350px] md:h-[380px] md:w-[520px]'>
           <Image src='/images/not-found.svg' fill alt='404' priority />

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -2,6 +2,7 @@ import '@/styles/globals.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { AppProps } from 'next/app';
+import Head from 'next/head';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 
@@ -17,6 +18,9 @@ export default function App({ Component, pageProps }: AppProps) {
       <PersistGate loading={null} persistor={persistor}>
         <QueryClientProvider client={queryClient}>
           <Modal />
+          <Head>
+            <title>Taskify</title>
+          </Head>
           <MainLayout>
             <Component {...pageProps} />
           </MainLayout>

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,8 +1,8 @@
-import { Html, Head, Main, NextScript } from "next/document";
+import { Html, Head, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html lang="ko">
+    <Html lang='ko'>
       <Head />
       <body>
         <Main />

diff --git a/src/pages/dashboard/[id]/edit.tsx b/src/pages/dashboard/[id]/edit.tsx
@@ -1,5 +1,14 @@
+import Head from 'next/head';
+
 import DashboardEdit from '@/containers/dashboard/edit';
 
 export default function DashboardEditPage() {
-  return <DashboardEdit />;
+  return (
+    <>
+      <Head>
+        <title>Taskify | 대시보드 수정</title>
+      </Head>
+      <DashboardEdit />
+    </>
+  );
 }
diff --git a/src/pages/dashboard/[id]/index.tsx b/src/pages/dashboard/[id]/index.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 import ColumnsSection from '@/containers/dashboard/ColumnsSection';

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -6,6 +7,9 @@ import Footer from '@/components/Footer';
 function Home() {
   return (
     <main className='h-dvh max-h-[calc(100dvh-70px)] overflow-y-scroll bg-dark-500 text-white'>
+      <Head>
+        <title>Taskify</title>
+      </Head>
       <div className='flex flex-col items-center'>
         <section className='flex max-w-[1200px] flex-col items-center pb-[180px] pt-24 md:pb-[180px]'>
           <div className='relative h-[168px] w-[287px] md:h-[314px] md:w-[537px] lg:h-[422px] lg:w-[722px]'>

diff --git a/src/pages/mypage/index.tsx b/src/pages/mypage/index.tsx
@@ -1,9 +1,14 @@
+import Head from 'next/head';
+
 import EditProfileForm from '@/containers/mypage/EditProfileForm';
 import PwdChangeForm from '@/containers/mypage/PwdChangeForm';
 
 export default function MyPage() {
   return (
     <div className='flex flex-col gap-3 px-3 py-4 text-black-33 md:p-5'>
+      <Head>
+        <title>Taskify | 내 계정</title>
+      </Head>
       <section className='w-full max-w-[620px] rounded-lg bg-white p-5 pt-0 md:p-7 md:pt-0'>
         <h2 className='section-title mb-6 mt-7 md:my-8'>프로필</h2>
         <EditProfileForm />

diff --git a/src/pages/signin/index.tsx b/src/pages/signin/index.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Link from 'next/link';
 
 import SignInForm from '@/containers/signin&signup/SignInForm';
@@ -6,6 +7,9 @@ import TopLogoSection from '@/containers/signin&signup/TopLogoSection';
 export default function SignInPage() {
   return (
     <div className='flex items-center justify-center'>
+      <Head>
+        <title>Taskify | 로그인</title>
+      </Head>
       <div className='w-[350px] items-center justify-center md:w-[520px]'>
         <TopLogoSection text='오늘도 만나서 반가워요!' />
         <SignInForm />

diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx
@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import Link from 'next/link';
 
 import SignUpForm from '@/containers/signin&signup/SignUpForm';
@@ -6,6 +7,9 @@ import TopLogoSection from '@/containers/signin&signup/TopLogoSection';
 export default function SignUp() {
   return (
     <div className='flex items-center justify-center'>
+      <Head>
+        <title>Taskify | 회원가입</title>
+      </Head>
       <div className='w-[350px] items-center justify-center md:w-[520px]'>
         <TopLogoSection text='첫 방문을 환영합니다!' />
         <SignUpForm />