Skip to content

[#220] 시맨틱 태그 + MetaData 수정 #221

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oauch wants to merge 9 commits into
base: main
Choose a base branch
from
Open

[#220] 시맨틱 태그 + MetaData 수정 #221

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a904d98
[#220] refactor: 시맨틱 태그로 변경
oauch Apr 2, 2024
3308b77
[#220] refactor: metadata 수정
oauch Apr 2, 2024
d79375f
[#220] remove: robots 파일 삭제
oauch Apr 2, 2024
31e5169
[#220] refactor: 메타 데이터 직접 넣는 방식으로 변경
oauch Apr 3, 2024
df773cd
[#220] feat: 폰트 로컬로 추가
oauch Apr 3, 2024
6b1c09f
[#220] refactor: 메타 태그 변경 및 타이틀 추가
oauch Apr 3, 2024
f310e75
[#220] remove: Helmet 제거
oauch Apr 4, 2024
59a05fb
[#220] Refactor: png -> avif 확장자 변경
oauch May 13, 2024
cddc52e
[#220] Fix: build 오류 수정
oauch May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions components/DashboardNavbar/DashboardNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,17 +30,6 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da

return (
<StyledContainer $isMyDashboard={isMyDashboard}>
{isModalOpen && (
<Modal
title="초대하기"
getValue={setModalValue}
onCancelClick={() => setIsModalOpen(false)}
onOkClick={() => {
inviteFetch();
}}
/>
)}

<StyledTitleContainer>
<h3>{dashboardTitle}</h3>
{!isMyDashboard && dashboard && dashboard.createdByMe && (
Expand Down Expand Up @@ -69,6 +58,16 @@ function DashboardNavbar({ members, totalMembers, isMyDashboard, dashboard }: Da
<DarkModeToggleButton />
<Profile />
</StyledWrapper>
{isModalOpen && (
<Modal
title="초대하기"
getValue={setModalValue}
onCancelClick={() => setIsModalOpen(false)}
onOkClick={() => {
inviteFetch();
}}
/>
)}
</StyledContainer>
);
}
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions components/MyDashboard/MyDashBoardButtonBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) {

if (!pageNum || !totalPages) return null;
return (
<div>
<article>
<ButtonBoxWrapper>
<DashBoardAddButton onClick={() => setIsOpen(true)} />
{allItems.map((item) => (
Expand Down Expand Up @@ -49,7 +49,7 @@ function MyDashBoardButtonBox({ resetToFirst }: MyDashBoardButtonBoxProps) {
}}
/>
)}
</div>
</article>
);
}

Expand Down
2 changes: 1 addition & 1 deletion components/Sidebar/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ const StyledDashboardGroupContainer = styled.div`
}
`;

const StyledTitleWrapper = styled.div`
const StyledTitleWrapper = styled.p`
Copy link
Contributor

@zermzerm zermzerm Apr 7, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

div를 p로 바꾸는것도 도움이 되나요?

Copy link
Member Author

@oauch oauch Apr 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좀 더 구분했다고 해야될까요?
저는 주로 p태그를 사용하는 이유가 글로만 이루어진 문단이라면 사용하고 있습니다!

color: ${COLORS.GRAY_78};
margin-left: 16px;
overflow-x: hidden;
Expand Down
2 changes: 1 addition & 1 deletion components/Sidebar/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
38 changes: 18 additions & 20 deletions components/Table/InviteDashBoard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
} = useInviteDashBoard({ refreshToFirst });

return (
<StyledDiv $data={dataSource}>
<StyledArticle $data={dataSource}>
<StyledP>초대받은 대시보드</StyledP>
{dataSource.length !== 0 ? (
<div>
<section>
<form>
<StyledInputDiv>
<label htmlFor="search">
Expand Down Expand Up @@ -100,18 +100,16 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
<StyleListWrapper>
<StyledListInWrapper>{item.dashboard.title}</StyledListInWrapper>
<StyledListInWrapper>{item.inviter.nickname}</StyledListInWrapper>
<StyledListInWrapper>
<TwinButton
text1="수락"
text2="거절"
isViolet={true}
size="small"
className="temp2"
leftViolet={true}
onLeftClick={() => handleAccept({ acceptid: item.id, accept: true })}
onRightClick={() => handleAccept({ acceptid: item.id, accept: false })}
/>
</StyledListInWrapper>
<TwinButton
text1="수락"
text2="거절"
isViolet={true}
size="small"
className="temp2"
leftViolet={true}
onLeftClick={() => handleAccept({ acceptid: item.id, accept: true })}
onRightClick={() => handleAccept({ acceptid: item.id, accept: false })}
/>
</StyleListWrapper>
)}
<StyledHr />
Expand All @@ -123,7 +121,7 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
)}
</InfiniteScroll>
</Div>
</div>
</section>
) : (
<>
<NoContentContainer>
Expand All @@ -132,13 +130,13 @@ function InviteDashBoard({ refreshToFirst }: InviteDashBoardProps) {
</NoContentContainer>
</>
)}
</StyledDiv>
</StyledArticle>
);
}

export default InviteDashBoard;

const Div = styled.div`
const Div = styled.section`
height: 430px;
overflow-x: hidden;

Expand All @@ -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;
Expand Down Expand Up @@ -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)};
Expand All @@ -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);
Expand Down
12 changes: 7 additions & 5 deletions constants/Metadata.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
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',
DOMAIN: 'taskify4.vercel.app',
};
30 changes: 12 additions & 18 deletions pages/404/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,24 @@ import { COLORS } from '@/styles/palettes';

import Image from 'next/image';
import { useRouter } from 'next/router';
import { Helmet } from 'react-helmet';
import { styled } from 'styled-components';

function NotFound() {
const router = useRouter();
const back = router.back;
return (
<>
<Helmet>
<title>404 - Jawstify</title>
</Helmet>
<StyledContainer>
<Styled404Text>404</Styled404Text>
<Styled404Image width={200} height={200} src={DefaultImg} alt="crying emoji" />
<StyledText>조습니다... 잘못 들어오셨습니다 🦈</StyledText>
<Button text="뒤로가기" size="large" onClick={back}></Button>
</StyledContainer>
</>
<StyledContainer>
<Styled404Text>404</Styled404Text>
<Styled404Image width={200} height={200} src={DefaultImg} alt="crying emoji" />
<StyledText>조습니다... 잘못 들어오셨습니다 🦈</StyledText>
<Button text="뒤로가기" size="large" onClick={back}></Button>
</StyledContainer>
);
}

export default NotFound;

const StyledContainer = styled.div`
const StyledContainer = styled.main`
height: 100vh;
display: flex;
flex-direction: column;
Expand All @@ -37,16 +31,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;
`;
45 changes: 17 additions & 28 deletions pages/[dashboardid]/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { GetServerSideProps } from 'next';
import { useRouter } from 'next/router';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';

import { useDeleteDashboard } from '@/apis/queries/dashboard';
Expand Down Expand Up @@ -50,33 +49,23 @@ function BoardEdit({ dashboardId }: BoardEditProps) {
};

return (
<>
<Helmet>
<title>대시보드 수정 - Jawstify</title>
</Helmet>
<StyledContainer>
<DashboardNavbar
members={members}
totalMembers={totalMembers}
dashboard={dashboardData}
isMyDashboard={false}
/>
<Sidebar />
<StyledWrapper>
<StyledInWrapper>
<StyledRouterButton onClick={backHome}>돌아가기</StyledRouterButton>
<StyledMainWrapper>
<DashboardEdit dashboardData={dashboardData} />
<StyledMainInWrapper>
<MembersTable dashboardId={Number(dashboardId)} />
</StyledMainInWrapper>
<InviteDetailsTable dashboardId={Number(dashboardId)} />
<DeleteButton onClick={deleteDashboard} />
</StyledMainWrapper>
</StyledInWrapper>
</StyledWrapper>
</StyledContainer>
</>
<StyledContainer>
<DashboardNavbar members={members} totalMembers={totalMembers} dashboard={dashboardData} isMyDashboard={false} />
<Sidebar />
<StyledWrapper>
<StyledInWrapper>
<StyledRouterButton onClick={backHome}>돌아가기</StyledRouterButton>
<StyledMainWrapper>
<DashboardEdit dashboardData={dashboardData} />
<StyledMainInWrapper>
<MembersTable dashboardId={Number(dashboardId)} />
</StyledMainInWrapper>
<InviteDetailsTable dashboardId={Number(dashboardId)} />
<DeleteButton onClick={deleteDashboard} />
</StyledMainWrapper>
</StyledInWrapper>
</StyledWrapper>
</StyledContainer>
);
}

Expand Down
16 changes: 16 additions & 0 deletions pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
/* eslint-disable @next/next/inline-script-id */
import { METADATA } from '@/constants/Metadata';
import * as gtag from '@/lib/gtag';
import GlobalStyles from '@/styles/GlobalStyles';
import { HydrationBoundary, 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 Script from 'next/script';
import { useState } from 'react';
import { Toaster } from 'react-hot-toast';
Expand All @@ -24,6 +26,20 @@ export default function App({ Component, pageProps }: AppProps) {
return (
<>
{/* <!-- Google tag (gtag.js) --> */}
<Head>
<title>Jawstify</title>
<link rel="icon" href={METADATA.IMAGE} sizes="any" />
<meta property="og:title" content={METADATA.TITLE} />
<meta property="og:url" content={METADATA.URL} />
<meta property="og:image" content={METADATA.IMAGE} />
<meta property="og:description" content={METADATA.DESCRIPTION} />
<meta name="twitter:card" content="summary" />
<meta property="twitter:domain" content={METADATA.DOMAIN} />
<meta property="twitter:url" content={METADATA.URL} />
<meta name="twitter:title" content={METADATA.TITLE} />
<meta name="twitter:description" content={METADATA.DESCRIPTION} />
<meta name="twitter:image" content={METADATA.IMAGE} />
</Head>
<Script async src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`} />
<Script
strategy="afterInteractive"
Expand Down
Loading