TIL - 하단 네비게이션 바 구현

오늘 학습 내용:

1. SVG 아이콘 컴포넌트화
   • svgr 라이브러리를 사용하여 SVG 파일을 React 컴포넌트로 변환
   • 아이콘의 active 상태를 props로 전달하여 동적 스타일링 구현
2. 조건부 렌더링
   • 네비게이션 아이템의 active 상태에 따라 다른 스타일 적용
   • 사용자의 현재 위치를 시각적으로 명확히 표시
3. 커스텀 그라디언트 배경
   • Tailwind CSS의 기본 그라디언트로 원하는 효과를 얻지 못함
   • radial-gradient를 사용한 커스텀 배경 구현:
   •  

background-image: radial-gradient(50% 50% at 49.54% 100%, rgba(18, 242, 135, 0.3) 0%, rgba(18, 242, 135, 0) 100%);

디자인

테일윈드에서 제공하는 그라데이션 1

2

결과

 

SVG 아이콘 컴포넌트화와 동적 스타일링 과정에서 기존 라이브러리나 프레임워크의 한계를 경험했습니다. Tailwind CSS의 기본 그라디언트로는 원하는 디자인을 구현하기 어려웠지만, 커스텀 CSS로 직접 구현하니 정확히 원하는 효과를 얻을 수 있었습니다.