[SP2] head 태그 컴포넌트로 분리 및 프로젝트별 og tag 적용 #209
Conversation
| @@ -49,6 +50,7 @@ function ProjectDetailPage() { | |||
|
|
|||
| return ( | |||
| <PageLayout showScrollTopButton> | |||
| <HTMLHead title={name} imageURL={projectImage} projectID={id} /> | |||
There was a problem hiding this comment.
project detail 파일에 추가적으로 head 컴포넌트를 넣어서 프로젝트 이미지와 타이틀이 og에 담기도록 했어요!
| <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/'} | ||
| /> | ||
| <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 공식 홈페이지 이미지" /> |
There was a problem hiding this comment.
props 값에 따라 og에서 보여지는게 달라지도록 하엿습니다!
|
PR 제목에 og 이미지 관련한 변경사항도 추가되면 나중에 히스토리 보기에 좋을 것 같아요!!!! |
| imageURL?: string; | ||
| } | ||
|
|
||
| function HTMLHead(props: HeadProps) { |
There was a problem hiding this comment.
컴포넌트 이름이 HTMLHead인 이유는 무엇인가요 ..?!?
There was a problem hiding this comment.
Head 태그를 통째로 담고 있어서 그렇게 지었습니다! 더 좋은 네임명이 있으면 추천 부탁드려요1!
There was a problem hiding this comment.
CustomHead..? 생각해봤는데 마땅한 게 떠오르지 않아서 HTMLHead도 좋은 거 같습니다!
| <meta property="og:locale" content="ko_KR" /> | ||
| <meta | ||
| property="og:url" | ||
| content={`https://sopt.org/project/${projectID}` || 'https://sopt.org/'} |
There was a problem hiding this comment.
삼항 연산자를 안 쓰고 이렇게도 표현할 수 있는 건가요 ..?!!?
There was a problem hiding this comment.
<meta property="og:title" content={`SOPT 프로젝트 ${projectTitle}` || 'SOPT'} />이렇게 작성한 코드가 로컬에서 테스트했을때도 정상적으로 작동이 됩니다!
그 이유는 projectTitle가 없으면(falsy) 좌측 코드가 실행되지 않고 있으면 실행되는 구조입니다.
| title?: string; | ||
| projectID?: string; | ||
| imageURL?: string; |
There was a problem hiding this comment.
요것 세 개 다 project라는 객체로 묶으면 어떨까요?
세 개 세트로 undefined이거나 undefined가 아닌 것이니까요 ..!
그리고 title은 일반적인 경우에도 쓸 것 같은데 (리크루팅 페이지의 제목을 리크루팅으로 하는 등) 아래 코드에서는 프로젝트 이름으로만 사용되어서 혼동이 있을 수 있을 것 같아요 ..!!
projectTitle이라는 이름으로 변경하거나, project: { title, id, imageURL } 로 묶으면 좋을 것 같습니다!
f0rever0
changed the title
f0rever0
changed the title
Summary
head 태그들을 하나의 컴포넌트로 분리했습니다! 그리고 프로젝트 url 을 공유할때 og 가 다르게 보이도록 하였어요!
Screenshot
Comment
공통 컴포넌트로 분리해보았는데, 폴더 구조가 어떤지 피드백 부탁드려요~