Skip to content
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

[SP2] head 태그 컴포넌트로 분리 및 프로젝트별 og tag 적용 #209

Merged
merged 2 commits into from
Oct 12, 2023
Merged

[SP2] head 태그 컴포넌트로 분리 및 프로젝트별 og tag 적용 #209

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42b2d03
feat : head 태그 컴포넌트로 분리
f0rever0 Oct 9, 2023
043fa36
feat : head tag props 네임명 수정
f0rever0 Oct 10, 2023
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
84 changes: 84 additions & 0 deletions src/components/common/HTMLHead/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import Head from 'next/head';

interface HeadProps {
title?: string;
projectID?: string;
imageURL?: string;
Copy link
Member

Choose a reason for hiding this comment

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

요것 세 개 다 project라는 객체로 묶으면 어떨까요?
세 개 세트로 undefined이거나 undefined가 아닌 것이니까요 ..!

그리고 title은 일반적인 경우에도 쓸 것 같은데 (리크루팅 페이지의 제목을 리크루팅으로 하는 등) 아래 코드에서는 프로젝트 이름으로만 사용되어서 혼동이 있을 수 있을 것 같아요 ..!!
projectTitle이라는 이름으로 변경하거나, project: { title, id, imageURL } 로 묶으면 좋을 것 같습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

네 좋은 의견 감사해요!

}

function HTMLHead(props: HeadProps) {
Copy link
Member

Choose a reason for hiding this comment

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

컴포넌트 이름이 HTMLHead인 이유는 무엇인가요 ..?!?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Head 태그를 통째로 담고 있어서 그렇게 지었습니다! 더 좋은 네임명이 있으면 추천 부탁드려요1!

Copy link
Member

Choose a reason for hiding this comment

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

CustomHead..? 생각해봤는데 마땅한 게 떠오르지 않아서 HTMLHead도 좋은 거 같습니다!

const { title, projectID, imageURL } = props;

return (
<Head>
<title>SOPT</title>
<meta
name="description"
content="SOPT는 IT와 벤처 창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT 벤처 창업 동아리입니다."
/>
<meta name="title" content="SOPT" />
<meta name="keyword" content="IT, 창업, 개발, 대학생, 동아리" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<meta name="apple-mobile-web-app-title" content="SOPT" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1"
/>
<meta content="yes" name="apple-mobile-web-app-capable" />

{/* Twitter */}
<meta name="twitter:title" content="SOPT" />
<meta name="twitter:description" content="대학생 연합 IT 벤처 창업 동아리" />
<meta property="twitter:card" content="website" />
<meta property="twitter:site" content="https://sopt.org/" />
<meta
name="twitter:image"
content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
/>
<meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />

{/* Open Graph */}
<meta property="og:type" content="website" />
<meta property="og:locale" content="ko_KR" />
<meta
property="og:url"
content={`https://sopt.org/project/${projectID}` || 'https://sopt.org/'}
Copy link
Member

Choose a reason for hiding this comment

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

삼항 연산자를 안 쓰고 이렇게도 표현할 수 있는 건가요 ..?!!?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

<meta property="og:title" content={`SOPT 프로젝트 ${projectTitle}` || 'SOPT'} />

이렇게 작성한 코드가 로컬에서 테스트했을때도 정상적으로 작동이 됩니다!

그 이유는 projectTitle가 없으면(falsy) 좌측 코드가 실행되지 않고 있으면 실행되는 구조입니다.

/>
<meta property="og:title" content={`SOPT 프로젝트 ${title}` || 'SOPT'} />
<meta property="og:site_name" content="SOPT 공식 홈페이지" />
<meta property="og:description" content={'대학생 연합 IT 벤처 창업 동아리'} />
<meta
property="og:image"
content={
imageURL ||
'https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png'
}
/>
<meta property="og:image:alt" content="SOPT 공식 홈페이지 이미지" />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

props 값에 따라 og에서 보여지는게 달라지도록 하엿습니다!

</Head>
);
}

export default HTMLHead;
65 changes: 2 additions & 63 deletions src/pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import * as amplitude from '@amplitude/analytics-browser';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { Global, ThemeProvider } from '@emotion/react';
import { useEffect } from 'react';
import { useState } from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import HTMLHead from '@src/components/common/HTMLHead';
import GoogleTagManagerNoscript from '@src/components/googleTagManager/Noscript';
import GoogleTagManagerScript from '@src/components/googleTagManager/Script';
import * as gtm from '@src/components/googleTagManager/gtm';
Expand Down Expand Up @@ -33,68 +33,7 @@ function MyApp({ Component, pageProps }: AppProps) {

return (
<>
<Head>
<title>SOPT</title>
<meta
name="description"
content="SOPT는 IT와 벤처 창업에 뜻이 있는 대학생들이 모인 국내 최대 규모의 대학생 연합 IT 벤처 창업 동아리입니다."
/>
<meta name="title" content="SOPT" />
<meta name="keyword" content="IT, 창업, 개발, 대학생, 동아리" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />

<meta name="apple-mobile-web-app-title" content="SOPT" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1"
/>
<meta content="yes" name="apple-mobile-web-app-capable" />

{/* Open Graph */}
<meta property="og:type" content="website" />
<meta property="og:locale" content="ko_KR" />
<meta property="og:url" content="https://sopt.org/" />
<meta property="og:title" content="SOPT" />
<meta property="og:site_name" content="SOPT 공식 홈페이지" />
<meta property="og:description" content="대학생 연합 IT 벤처 창업 동아리" />
<meta
property="og:image"
content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
/>
<meta property="og:image:alt" content="SOPT 공식 홈페이지 이미지" />

{/* Twitter */}
<meta name="twitter:title" content="SOPT" />
<meta name="twitter:description" content="대학생 연합 IT 벤처 창업 동아리" />
<meta property="twitter:card" content="website" />
<meta property="twitter:site" content="https://sopt.org/" />
<meta
name="twitter:image"
content="https://s3.ap-northeast-2.amazonaws.com/sopt.org/admin/origin/img_sopt_homepage.png"
/>
<meta property="twitter:image:alt" content="SOPT 공식 홈페이지 이미지" />
</Head>
<HTMLHead />
<GoogleTagManagerScript />
<Global styles={global} />
<ThemeProvider theme={theme}>
Expand Down
2 changes: 2 additions & 0 deletions src/views/ProjectDetailPage/ProjectDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
import { useState } from 'react';
import { useQuery } from 'react-query';
import { ReactComponent as IToggle } from '@src/assets/images/toggle.svg';
import HTMLHead from '@src/components/common/HTMLHead';
import PageLayout from '@src/components/common/PageLayout';
import { api } from '@src/lib/api';
import { ProjectLinkType } from '@src/lib/types/project';
Expand Down Expand Up @@ -49,6 +50,7 @@ function ProjectDetailPage() {

return (
<PageLayout showScrollTopButton>
<HTMLHead title={name} imageURL={projectImage} projectID={id} />
Copy link
Contributor Author

Choose a reason for hiding this comment

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

project detail 파일에 추가적으로 head 컴포넌트를 넣어서 프로젝트 이미지와 타이틀이 og에 담기도록 했어요!

<S.Root>
<S.Container>
<S.ProjectHeader>
Expand Down
Loading