From a904d984347ffdf1b67568b4b1ac3cdd74254664 Mon Sep 17 00:00:00 2001 From: oauch Date: Tue, 2 Apr 2024 18:41:49 +0900 Subject: [PATCH 1/9] =?UTF-8?q?[#220]=20refactor:=20=EC=8B=9C=EB=A7=A8?= =?UTF-8?q?=ED=8B=B1=20=ED=83=9C=EA=B7=B8=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DashboardNavbar/DashboardNavbar.tsx | 25 ++++++------ .../MyDashboard/MyDashBoardButtonBox.tsx | 4 +- components/Sidebar/Dashboard.tsx | 2 +- components/Sidebar/Sidebar.tsx | 2 +- components/Table/InviteDashBoard.tsx | 38 +++++++++---------- pages/404/index.tsx | 12 +++--- pages/mydashboard/index.tsx | 14 ++----- 7 files changed, 44 insertions(+), 53 deletions(-) diff --git a/components/DashboardNavbar/DashboardNavbar.tsx b/components/DashboardNavbar/DashboardNavbar.tsx index 2ecdd59..f328146 100644 --- a/components/DashboardNavbar/DashboardNavbar.tsx +++ b/components/DashboardNavbar/DashboardNavbar.tsx @@ -30,17 +30,6 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da return ( - {isModalOpen && ( - setIsModalOpen(false)} - onOkClick={() => { - inviteFetch(); - }} - /> - )} -

{dashboardTitle}

{!isMyDashboard && dashboard && dashboard.createdByMe && ( @@ -69,6 +58,16 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da + {isModalOpen && ( + setIsModalOpen(false)} + onOkClick={() => { + inviteFetch(); + }} + /> + )} ); } @@ -99,7 +98,7 @@ const StyledTitleContainer = styled.div` } `; -const StyledContainer = styled.div<{ $isMyDashboard: boolean }>` +const StyledContainer = styled.nav<{ $isMyDashboard: boolean }>` position: fixed; top: 0; width: 100%; @@ -127,7 +126,7 @@ const StyledContainer = styled.div<{ $isMyDashboard: boolean }>` } `; -const StyledWrapper = styled.div` +const StyledWrapper = styled.main` position: relative; display: flex; align-items: center; diff --git a/components/MyDashboard/MyDashBoardButtonBox.tsx b/components/MyDashboard/MyDashBoardButtonBox.tsx index a3d8d06..52bb48c 100644 --- a/components/MyDashboard/MyDashBoardButtonBox.tsx +++ b/components/MyDashboard/MyDashBoardButtonBox.tsx @@ -18,7 +18,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) { if (!pageNum || !totalPages) return null; return ( -
+
setIsOpen(true)} /> {allItems.map((item) => ( @@ -49,7 +49,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) { }} /> )} -
+ ); } diff --git a/components/Sidebar/Dashboard.tsx b/components/Sidebar/Dashboard.tsx index 486ae4b..30e5f18 100644 --- a/components/Sidebar/Dashboard.tsx +++ b/components/Sidebar/Dashboard.tsx @@ -75,7 +75,7 @@ const StyledDashboardGroupContainer = styled.div` } `; -const StyledTitleWrapper = styled.div` +const StyledTitleWrapper = styled.p` color: ${COLORS.GRAY_78}; margin-left: 16px; overflow-x: hidden; diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx index 62dbc31..1bf50ad 100644 --- a/components/Sidebar/Sidebar.tsx +++ b/components/Sidebar/Sidebar.tsx @@ -76,7 +76,7 @@ function Sidebar({ boardId, refreshToggle, refresh }: SidebarProps) { export default Sidebar; -const StyledContainer = styled.div` +const StyledContainer = styled.aside` position: fixed; z-index: 10; display: flex; diff --git a/components/Table/InviteDashBoard.tsx b/components/Table/InviteDashBoard.tsx index 3d8465d..849973c 100644 --- a/components/Table/InviteDashBoard.tsx +++ b/components/Table/InviteDashBoard.tsx @@ -30,10 +30,10 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) { } = useInviteDashBoard({ refreshToFirst }); return ( - + 초대받은 대시보드 {dataSource.length !== 0 ? ( -
+
- + ) : ( <> @@ -132,13 +130,13 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) { )} - + ); } export default InviteDashBoard; -const Div = styled.div` +const Div = styled.section` height: 430px; overflow-x: hidden; @@ -157,7 +155,7 @@ const Div = styled.div` } `; -const StyledDiv = styled.div<{ $data: any }>` +const StyledArticle = styled.article<{ $data: any }>` width: 1023px; height: 630px; border-radius: 8px; @@ -272,7 +270,7 @@ const StyledWrapper = styled.div` width: 23%; } `; -const StyledInWrapper = styled.div` +const StyledInWrapper = styled.p` width: 100%; color: ${COLORS.GRAY_9F}; ${fontStyle(16, 400)}; @@ -294,7 +292,7 @@ const StyleListWrapper = styled.div` width: 70%; } `; -const StyledListInWrapper = styled.div` +const StyledListInWrapper = styled.p` float: left; width: 100%; color: var(--content-main); diff --git a/pages/404/index.tsx b/pages/404/index.tsx index 768e333..4afe1bb 100644 --- a/pages/404/index.tsx +++ b/pages/404/index.tsx @@ -28,7 +28,7 @@ function NotFound() { export default NotFound; -const StyledContainer = styled.div` +const StyledContainer = styled.main` height: 100vh; display: flex; flex-direction: column; @@ -37,16 +37,16 @@ const StyledContainer = styled.div` background: ${COLORS.VIOLET_55}; `; +const Styled404Text = styled.h1` + ${fontStyle(250, 800)} +`; + const Styled404Image = styled(Image)` position: absolute; margin-bottom: 120px; `; -const Styled404Text = styled.h1` - ${fontStyle(250, 800)} -`; - -const StyledText = styled.h1` +const StyledText = styled.h2` ${fontStyle(40, 600)} margin-bottom: 30px; `; diff --git a/pages/mydashboard/index.tsx b/pages/mydashboard/index.tsx index e6d935b..386e969 100644 --- a/pages/mydashboard/index.tsx +++ b/pages/mydashboard/index.tsx @@ -2,8 +2,8 @@ import DashboardNavbar from '@/components/DashboardNavbar/DashboardNavbar'; import MyDashBoardButtonBox from '@/components/MyDashboard/MyDashBoardButtonBox'; import Sidebar from '@/components/Sidebar/Sidebar'; import InviteDashBoard from '@/components/Table/InviteDashBoard'; -import useMyDashboard from '@/hooks/Dashboard/useMyDashboard'; import useRedirectByLogin from '@/hooks/Auth/useRedirectByLogin'; +import useMyDashboard from '@/hooks/Dashboard/useMyDashboard'; import { onMobile, onTablet } from '@/styles/mediaQuery'; import { Helmet } from 'react-helmet'; @@ -19,27 +19,21 @@ function MyDashBoard() { 내 대시보드 - Jawstify - + <> - + ); } export default MyDashBoard; -const StyledContainer = styled.div` - background: var(--content-back); - width: 100%; - height: 100vh; -`; - -const StyledWrapper = styled.div` +const StyledWrapper = styled.main` position: absolute; top: 70px; left: 300px; From 3308b775c233d5a552607a38a89248792f49884c Mon Sep 17 00:00:00 2001 From: oauch Date: Tue, 2 Apr 2024 18:42:12 +0900 Subject: [PATCH 2/9] =?UTF-8?q?[#220]=20refactor:=20metadata=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- constants/Metadata.ts | 11 +++++---- pages/_document.tsx | 54 +++++++++++++++++++++++++------------------ pages/robots.ts | 11 +++++++++ pages/sitemap.ts | 24 +++++++++++++++++++ 4 files changed, 72 insertions(+), 28 deletions(-) create mode 100644 pages/robots.ts create mode 100644 pages/sitemap.ts diff --git a/constants/Metadata.ts b/constants/Metadata.ts index a9bda94..f8a84b9 100644 --- a/constants/Metadata.ts +++ b/constants/Metadata.ts @@ -1,9 +1,10 @@ import mainLogo from '@/public/assets/images/jaws.png'; export const METADATA = { - title: 'Jawstify', - description: '일정관리 조습니다🦈', - url: 'https://taskify4.vercel.app/', - image: mainLogo.src, - locale: 'ko_KR', + TITLE: 'Jawstify', + DESCRIPTION: '일정관리 조습니다🦈', + URL: 'https://taskify4.vercel.app/', + IMAGE: mainLogo.src, + LOCALE: 'ko_KR', + TYPE: 'website', }; diff --git a/pages/_document.tsx b/pages/_document.tsx index 90edfa7..873aa4c 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,6 +1,6 @@ import { METADATA } from '@/constants/Metadata'; +import type { Metadata } from 'next'; -import { Metadata } from 'next'; import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document'; import { ServerStyleSheet } from 'styled-components'; @@ -10,6 +10,34 @@ const themeInitializerScript = ` })(); `; +export const metadata: Metadata = { + metadataBase: new URL('https://taskify4.vercel.app/'), + title: METADATA.TITLE, + description: METADATA.DESCRIPTION, + openGraph: { + title: METADATA.TITLE, + description: METADATA.DESCRIPTION, + url: METADATA.URL, + siteName: METADATA.TITLE, + images: [ + { + url: METADATA.IMAGE, + width: 388, + height: 388, + }, + ], + locale: METADATA.LOCALE, + type: 'website', + }, + twitter: { + card: 'summary_large_image', + title: METADATA.TITLE, + description: METADATA.DESCRIPTION, + site: METADATA.URL, + images: [METADATA.IMAGE], + }, +}; + class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); @@ -21,6 +49,7 @@ class MyDocument extends Document { }); const initialProps = await Document.getInitialProps(ctx); + return { ...initialProps, styles: ( @@ -35,32 +64,11 @@ class MyDocument extends Document { } } - metadata: Metadata = { - metadataBase: new URL('https://taskify3.vercel.app/'), - title: METADATA.title, - description: METADATA.description, - openGraph: { - title: METADATA.title, - description: METADATA.description, - url: METADATA.url, - siteName: METADATA.title, - images: [ - { - url: METADATA.image, - width: 388, - height: 388, - }, - ], - locale: METADATA.locale, - type: 'website', - }, - }; - render() { return ( - +