hunipopolCSSUI/UX
커리어 타임라인 dot 정렬 버그와 Education 섹션
2026. 7. 30.1분 읽기
커리어 타임라인 dot이 안 맞는다
flex + translate 보정으로 타임라인 중앙 dot 위치를 맞추고 있었는데, 컨테이너 폭이 바뀔 때마다 어긋났다. grid 레이아웃으로 바꾸니 컨테이너 폭과 무관하게 항상 정확한 위치에 dot이 놓였다. 카드도 기본은 로고·부서명·직책·소개만 보여주고 클릭해야 역할·기여가 펼쳐지도록 정리했고, 커리어 항목에 포트폴리오 프로젝트 연동(project_keys)을 추가해 펼침 영역에 링크 배지가 뜨도록 했다.
Education 섹션
About·이력서 양쪽에 학력 섹션을 추가했다. admin에 학력 CRUD UI(기간, 기관명, 학위, 비고)를 만들고, 이력서 PDF에는 Experience 다음 섹션으로 넣었다. 이 무렵 스크롤 상단 이동 버튼을 전역 컴포넌트로 분리해 모든 페이지에 적용했고, 포트폴리오 카드 이미지도 object-cover(크롭)에서 object-contain + 블러 배경으로 바꿔 이미지가 잘리지 않게 했다.
7/30
About 커리어 카드에 강조 박스와 상태 배지를 추가하고, 홈 히어로 CTA 우선순위를 정리하면서 이 구간을 마무리했다.