Next.js, Tailwind CSS, ShadCN/UI를 활용한 사내 인트라넷 'NexaWorks' 구축기

핵심 기술: Next.js 15 (App Router), Tailwind CSS, ShadCN/UI, TypeScript, Lucide React를 활용하여 업무 환경을 개선하는 사내 인트라넷 'NexaWorks'를 구축했습니다. 서버 컴포넌트와 클라이언트 컴포넌트의 효율적인 조합, 사용자 친화적인 UI/UX 디자인, 그리고 테마 전환 기능이 특징입니다.

기술적 세부사항:
* Next.js 15 (App Router): 서버 사이드 렌더링과 동적 기능을 결합하여 To-Do 리스트 체크박스와 같은 인터랙티브한 경험을 제공합니다.
* Tailwind CSS: bg-blue-500 (사이드바 활성 상태), text-blue-600/80 (버튼) 등 클래스를 활용하여 빠르고 일관된 스타일링을 구현했습니다.
* ShadCN/UI: 재사용 가능한 컴포넌트(카드, 아바타, 체크박스 등)를 활용하고 커스텀하여 블루/오렌지 테마에 맞게 디자인했습니다.
* TypeScript: 코드 안정성과 오류 방지를 위해 사용되었습니다.
* Lucide React: 사이드바 및 To-Do 리스트 등에 아이콘을 제공합니다.
* Dark Mode: next-themes 라이브러리를 사용하여 라이트/다크 모드 전환 기능을 쉽게 구현했습니다.
* 반응형 디자인: 그리드 시스템(grid-cols-1 sm:grid-cols-2 md:grid-cols-4)을 사용하여 데스크톱, 태블릿, 모바일 등 다양한 디바이스에서 최적의 레이아웃을 보여줍니다.
* 주요 기능: 테마 전환기, 팀원 소개, 이벤트 캘린더, 리소스 센터, 공지사항/뉴스, 할 일 목록, 인기 콘텐츠, 사이드바 네비게이션 (활성 페이지 하이라이트, 받은 메시지 배지 포함), 프로필 옵션 등을 포함합니다.
* 컬러 스킴: 블루(blue-600)와 오렌지(orange-500) 색상을 메인으로 사용하여 통일감 있고 활기찬 분위기를 연출했습니다.

개발 임팩트:
* 개발 생산성 향상: 재사용 가능한 컴포넌트와 효율적인 CSS 프레임워크 사용으로 개발 속도를 높였습니다.
* 사용자 경험 개선: 깔끔하고 직관적인 UI/UX를 통해 업무 효율성과 만족도를 높였습니다.
* 유지보수 용이성: 모듈화된 구조와 TypeScript 적용으로 코드의 안정성과 확장성을 확보했습니다.
* 팀워크 강화: Git 기반 협업 방식을 통해 효율적인 코드 통합 및 의사소통을 증진했습니다.

커뮤니티 반응:
GitHub 저장소 링크와 라이브 데모를 제공하여 다른 개발자들이 직접 기능을 확인하고 코드를 참고할 수 있도록 했습니다. Vercel에 배포하여 접근성을 높였습니다.