Search
📱

fix: remove-display-table for mobile device

PR링크
난이도
Easy
레포
TypeScript-Website
상태
merge 완료

레포지토리 설명

타입스크립트 웹사이트 의 코드베이스 관리를 위한 오픈소스 레포지토리

PR링크

2840
pull

문제 상황

비교를 위해 코드가 나란히 배치된 화면에서 일부가 잘리게 나오고 있음 (모바일 사이즈)
출퇴근길에 타블렛으로 공부하는 나에게는 곤란한 부분이라 수정하기로 하였다

원인 파악

막상 레포를 clone하여 살펴보니 해당 버그는 단 두 개의 페이지에서만 쓰이고 있었다
.full-width-table 이라는 셀렉터로 다른 한 개의 페이지는 deprecated
나처럼 작은 화면에서도 살펴보길 원하는 사람을 위해 overflow 속성을 적용

해결방안

overflow 속성 적용을 위해 table-container라는 새로운 부모 요소를 만들어 주었다
// packages/documentation/copy/en/handbook-v2/Everyday Types.md <div class='table-container'> <table class='full-width-table'> (...) </table> </div>
JavaScript
복사
해당 요소에는 overflow-x: auto를 적용해 초과영역 발생 시 스크롤바를 생성하였다
// packages/typescriptlang-org/src/templates/markdown.scss div.table-container { overflow-x: auto; display: table; }
Scss
복사
작업 과정에서 레이아웃이 display: table 과 잘 맞다고 생각했다. 오히려 PC 사이즈에서 레이아웃이 틀어지는 현상이 발생한 점을 리뷰를 통해 알게되어 추가 커밋을 통해 제외하였다
// packages/typescriptlang-org/src/templates/markdown.scss div.table-container { // ... display: table; }
JavaScript
복사

느낀점

작업 과정에서 display: table 에 대해 공부하였고, 테이블 내 컨텐츠가 증가할 가능성이 굉장히 낮은 현재의 구성에는 불필요하다는 것을 알게되었다. (2개인 경우도 현재 기준 1페이지 뿐이고, 코드를 비교하는 내용의 특성상 3개 이상의 코드를 가로로 나란히 보여주는 경우는 거의 없을 것이다.)
PR을 올리면서 자연스럽게 확인용 페이지가 배포되기 때문에 협업 시 굉장히 유리하다는 생각이 들었다. 지금 회사에서 하고 있는 프로젝트도 고도화 단계가 되면 비슷하게 배포 파이프라인을 구성하고 싶다는 생각이 들었다.
PR 리뷰 과정에서 웹사이트 관리를 하는 별도의 인력이 아니라 마이크로 소프트에서 TypeScript 컴파일러와 pnpm 패키지 매니저를 개발하는 Jake Bailey 라는 분이 직접 사이트를 관리한다는 것을 알게 되었다. PR 과정에서 직접 리뷰를 받을 수 있어 의미있는 경험이 되었다.