현대글로비스 복리후생 안내 플랫폼

Overview

현대글로비스 복리후생 안내 플랫폼은 사내 임직원분들에게 다양한 복지 서비스와 사내 혜택 정보를 제공합니다.

Next.js 기반 환경에서 초기 단계에 서브 페이지 공통 레이아웃 구조, 공통 UI 가이드, 스타일 가이드를 정립하여 효율적인 작업이 가능하도록 했습니다.

※ 내부망 사용으로 사이트 연결 불가

Work Detail

Tech Stack

Tool

Next.js 기반 레이아웃 구조 및 가이드 정립

PL분께서 세팅해 주신 Next.js 환경을 기반으로 메인 페이지와 서브 페이지 공통 레이아웃을 작업했습니다. 또한 SCSS 변수와 스타일 가이드, 공통 UI를 정립해 스타일 일관성과 재사용성을 높였습니다.

서브 페이지의 전체적인 레이아웃 구조는 유사하지만 복리후생 항목마다 들어가는 내용이 달랐기 때문에 항목별로 컴포넌트를 만들고 레이아웃 안에서 유연하게 조합할 수 있도록 작업했습니다.

이를 통해 불필요한 중복 작업을 줄이고, 이후 작업자들이 안정적으로 프로젝트를 이어갈 수 있는 기반을 마련했습니다.

SVG UI 구현

SVG의 clipPath 요소를 활용해 형태를 제어하고, hover 인터랙션을 구현하는 과정에서 관련 내용을 익혔습니다.
해당 내용은 따로 정리하여 팀원분들에게 공유하는 시간을 가졌습니다.

정리 내용 확인하기

이전 프로젝트

HMG Driving Experience

다음 프로젝트

H-MATE, 기아TONG