From 653720bf1c83a57344c6f90fa3d903e6617e56c3 Mon Sep 17 00:00:00 2001
From: jmj <wjsdncl2222@gmail.com>
Date: Tue, 2 Jul 2024 20:14:31 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=8E=A8=20design(#171):=20=EB=82=B4=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EA=B3=A0=EC=A0=95?=
 =?UTF-8?q?=EB=90=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Sidebar/DashboardItem.tsx      |  4 +++-
 .../mydashboard/DashboardList/index.tsx       | 24 +++++++------------
 .../InvitedDashboardList/ItemList.tsx         |  7 ++----
 .../InvitedDashboardList/index.tsx            |  2 +-
 src/containers/mydashboard/index.tsx          |  2 +-
 5 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/src/components/Sidebar/DashboardItem.tsx b/src/components/Sidebar/DashboardItem.tsx
index c66049f2..743af80d 100644
--- 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
index afdc325a..cae24d10 100644
--- 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'>
+    <section className='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]'>
+        <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
index e767abbb..225768b3 100644
--- 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
index 0f03367d..9075d95f 100644
--- 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] overflow-hidden rounded-lg border-0 bg-white'>
       <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
index ed44b0a3..d5ad79c4 100644
--- a/src/containers/mydashboard/index.tsx
+++ b/src/containers/mydashboard/index.tsx
@@ -3,7 +3,7 @@ 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'>
       <DashboardList />
       <InvitedDashboardList />
     </div>

From 4a47d01b43e1199b04745183979ddbf200f4f280 Mon Sep 17 00:00:00 2001
From: jmj <wjsdncl2222@gmail.com>
Date: Tue, 2 Jul 2024 22:21:08 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=8E=A8=20design(#162):=20HTML=20HEAD?=
 =?UTF-8?q?=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Header/DashboardHeader/index.tsx |  4 ++++
 src/containers/mydashboard/index.tsx            |  5 +++++
 src/pages/404.tsx                               |  4 ++++
 src/pages/_app.tsx                              |  4 ++++
 src/pages/_document.tsx                         |  4 ++--
 src/pages/dashboard/[id]/edit.tsx               | 11 ++++++++++-
 src/pages/dashboard/[id]/index.tsx              |  1 +
 src/pages/index.tsx                             |  4 ++++
 src/pages/mypage/index.tsx                      |  5 +++++
 src/pages/signin/index.tsx                      |  4 ++++
 src/pages/signup/index.tsx                      |  4 ++++
 11 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/components/Header/DashboardHeader/index.tsx b/src/components/Header/DashboardHeader/index.tsx
index a1e0ad98..194c4c02 100644
--- 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/containers/mydashboard/index.tsx b/src/containers/mydashboard/index.tsx
index d5ad79c4..aa8e2b89 100644
--- 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 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
index e22cf8ce..7b0f0cea 100644
--- 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
index 298e0c5d..7929be43 100644
--- 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
index 057c8a57..aed6af16 100644
--- 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
index 752fd25a..ff8864cb 100644
--- 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
index ab40befd..5cfcc124 100644
--- 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
index 0d871e50..d80f4cc8 100644
--- 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
index 4b094d0b..773a8fb1 100644
--- 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
index 80162bcd..92809175 100644
--- 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
index 9e2ea62a..8563034f 100644
--- 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 />

From 13d364b0ee2a9e63773ac31855b79c163b02f467 Mon Sep 17 00:00:00 2001
From: jmj <wjsdncl2222@gmail.com>
Date: Tue, 2 Jul 2024 22:26:35 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=8E=A8=20design(#171):=20=EB=82=B4=20?=
 =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20PC,=20Mobile=20=EC=B5=9C?=
 =?UTF-8?q?=EB=8C=80=20=EA=B0=80=EB=A1=9C=20=EC=82=AC=EC=9D=B4=EC=A6=88=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/containers/mydashboard/DashboardList/index.tsx        | 2 +-
 src/containers/mydashboard/InvitedDashboardList/index.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/containers/mydashboard/DashboardList/index.tsx b/src/containers/mydashboard/DashboardList/index.tsx
index cae24d10..3a11c89a 100644
--- a/src/containers/mydashboard/DashboardList/index.tsx
+++ b/src/containers/mydashboard/DashboardList/index.tsx
@@ -44,7 +44,7 @@ export default function DashboardList() {
 
   return (
     <section className='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'>
+      <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()}>
             새로운 대시보드
diff --git a/src/containers/mydashboard/InvitedDashboardList/index.tsx b/src/containers/mydashboard/InvitedDashboardList/index.tsx
index 9075d95f..346758e3 100644
--- 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 max-h-[calc(100vh-410px)] min-h-[530px] 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 />

From 260f4c09b7160db19d2bd2ea87ea1bbe15c94c3b Mon Sep 17 00:00:00 2001
From: jmj <wjsdncl2222@gmail.com>
Date: Tue, 2 Jul 2024 22:51:33 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=8E=A8=20design(#162):=20HTML=20?=
 =?UTF-8?q?=ED=94=84=EB=A6=AC=EB=B7=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/_app.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7929be43..5e664f9c 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -20,6 +20,9 @@ export default function App({ Component, pageProps }: AppProps) {
           <Modal />
           <Head>
             <title>Taskify</title>
+            <meta name='og:title' content='Taskify' />
+            <meta name='og:description' content='새로운 일정 관리 Taskify' />
+            <meta name='og:image' content='/public/images/logo_large.png' />
           </Head>
           <MainLayout>
             <Component {...pageProps} />