[개발일지] 사이드바 액티브 버그, 폰트 이슈 수정

URL 계층 구조를 개편하고 나서 뒤따라온 버그들을 잡은 날입니다.

사이드바 · 상단 네비 액티브 끊김

URL이 /web 에서 /design/web 으로 바뀌면서
사이드바가 현재 카테고리를 제대로 인식하지 못하는 문제가 생겼습니다.

원인은 pathname을 파싱할 때 /design/ 접두사를 제거하지 않아서
relParts[0] 이 web 대신 design 을 잡고 있었던 것입니다.

pathParts.slice(1) 로 수정해서 섹션 접두사를 걷어내고
디자인 카테고리도 게임즈, 채널과 동일한 방식으로 파싱되게 했습니다.

상단 네비도 링크 생성 함수가 /{slug} 형태로 만들고 있어서
/design/{slug} 로 변경했습니다.

카테고리 목록에서 일반 게시글과 웹 퍼블리싱 작업물이 섞여 나오는데
클릭하면 새 탭으로 열리는 작업물인지 미리 알 수 없었습니다.

태그가 표시되는 위치에 사이트 보기 배지를 추가해서
퍼블리싱 작업물임을 한눈에 구분할 수 있게 했습니다.

다른 환경에서 접속했을 때 본문 텍스트와 플로팅 헤더 글자들이
시스템 기본 폰트로 나오는 문제가 있었습니다.

body 에 적용된 폰트 패밀리가
'Pretendard Variable', Pretendard, ... 인데
Pretendard를 웹폰트로 불러오는 코드가 없었던 것이 원인이었습니다.

개발 환경에서는 시스템에 Pretendard가 설치되어 있어서 잘 보였던 거고
다른 기기에서는 바로 시스템 폰트로 폴백되고 있었습니다.

CDN에서 Pretendard Variable 다이나믹 서브셋을 불러오도록 추가해서 해결했습니다.
다이나믹 서브셋이라 실제 사용된 글자만 로드해서 성능 부담도 줄었습니다.

YouTube Sans 도 웹폰트가 아닌 시스템 폰트라 없는 환경이 많은데
폴백 체인에 Outfit이 빠져있던 곳들을 함께 수정했습니다.