카르굴 캘린더 2026년 10월 27일 공개: Next.js 16·React 19 프로토타입

마르셀(@marcelkargul)은 2026년 10월 27일, 피그마(Figma) 디자인 기반 인사 관리 워크스페이스 프로토타입 'Kargul Calender Design Prototype'을 MIT 라이선스로 오픈소스화했다고 알렸습니다.

이미지 출처: @marcelkargul

이번 프로젝트는 피그마의 'Dashboard – calendar' 디자인을 웹 환경으로 재현한 클라이언트 사이드 프로토타입입니다. 별도의 백엔드 없이 브라우저에서 실행되며, 데이터는 브라우저 로컬스토리지(localStorage)에 저장됩니다.

Next.js 16과 React 19 기반 프런트엔드 아키텍처

저장소는 Next.js 16(App Router, Turbopack), React 19, TypeScript를 사용합니다.

스타일링 계층은 피그마 변수에서 디자인 토큰을 매핑한 Tailwind CSS v4를 사용합니다. UI 컴포넌트는 Radix primitives 기반의 테마형 shadcn/ui를 활용합니다. 상태 관리는 Zustand의 persist 미들웨어와 브라우저 로컬스토리지를 사용하며, cmdk 기반 ⌘K 커맨드 팔레트, Sonner 토스트, next-themes 기반 다크 모드도 포함합니다.

캘린더 인터랙션과 휴가 관리 워크플로우

프로토타입의 캘린더와 휴가 관리 화면은 다음 조작 기능을 지원합니다.

• 캘린더 뷰: 주(Week), 일(Day), 월(Month) 뷰를 지원합니다. 빈 영역을 드래그해 새 일정을 생성하고, 일정을 날짜 간 드래그하여 이동하거나 하단 가장자리를 끌어 시간을 조절할 수 있습니다. 겹치는 일정은 가로로 나란히 자동 배치되며, 공휴일을 표시하는 종일(All-day) 레인과 현재 시각선(now-line), origin-aware 상세정보 팝오버를 제공합니다.
• 휴가 신청(/time-off): 기본 라우트로 지정된 휴가 페이지에서는 주말과 공휴일을 제외한 실제 근무일수만 계산해 차감 잔여일을 보여주는 신청 다이얼로그를 지원합니다. 잔여 및 예정 통계 패널, 검색·필터·정렬이 가능한 내역 테이블, 관리자 시점의 승인·반려 미리보기 기능이 포함되어 있습니다.
• 키보드 단축키와 셸: ⌘K 전역 검색, N(새 일정), R(휴가 신청), T(오늘 이동), D/W/M(뷰 전환), 방향키 이동 등 풍부한 단축키 조작을 지원합니다.

로컬 실행 가이드와 클라이언트 프로토타입의 제약

저장소 README는 다음 로컬 실행 명령을 안내합니다.

npm install
npm run dev

개발 서버를 시작한 뒤 http://localhost:3000을 엽니다. 기본 시드(src/lib/seed.ts)는 2026년 11월 8일부터 14일까지의 주간 일정, 11월 10일 선택 상태, 잔여 7일·대기 2일·예정 3일의 데이터를 담고 있습니다. 초기 디자인 상태로 복원하려면 애플리케이션 내 Settings → Data → Reset demo data를 실행하거나 브라우저 사이트 데이터를 초기화하면 됩니다.

출처

• Original source: kargulstudio/calender-app-design
• X announcement: Marcel (@marcelkargul)