Issue#132 gnb 라우팅+스타일링 / issue#88 오픈그래프 추가

[rkdwoals159]

개요

• 132 gnb 로고 클릭했을때 라우팅 안되는 버그를 수정했습니다.

• gnb 로고 및 검색바에대한 스타일링 작업을 추가했습니다. (padding/margin)

• 88 링크를 타 사이트에 공유할때 나오는 미리보기 관련 오픈그래프를 추가했습니다 + 크롬 번역표시 안나오도록 한국어 지정 추가

작업사항

• 기존 로고를 눌렀을때 주소가 변경되기전에 reload되는 현상을 수정하기위해 Link태그로만 라우팅 되도록 변경했습니다.
• 검색바 시작위치를 차트시작지점과 같도록 변경했습니다.
• 검색바의 input값의 세로가 묘하게 중간이 안되던 이슈를 중간으로 변경했습니다.
• gnb가 묘하게 왼쪽에 몰려있던걸 수정했습니다.
• 오픈그래프의 미리보기 데이터를 추가했습니다. (제목, 상세정보, 이미지, 한국어)

생각해볼점

• next/link 태그의 성능이 dev서버에서 테스트했을때 좋지않았는데, 프로덕트 배포모드에서 실행했을때는 굉장히 빨리되서 놀랐습니다. 번들링 차이인건지, pre-fetch기능이 활성화되서 그런건지는 모르겠습니다.
• 관련 검색하던중 해당 블로그에서 아래 설명을 발견했습니다. https://velog.io/@yena1025/Next.js%EC%9D%98-Link%EC%97%90-%EB%8C%80%ED%95%B4 검증필요

Next.js의 프로덕션 빌드에서 Link가 브라우저의 화면(뷰포트)에 나타날 때마다, 사용자가 링크를 클릭하기전에 Next.js가 백그라운드에서 연결된 페이지 코드를 미리 로드하므로 페이지 전환이 거의 즉각적으로 이루어진다.

이미지

오픈그래프 미리보기는 이미지가 배포서버에 저장되어야 볼수있어서 따로 올리지 않았습니다.