[DATE-2] 달력 날짜 선택 Stimulus 컨트롤러 구현
ID: 5e797a37-93a3-45e9-a20e-0581a78d834e
## 목표
브라우저 네이티브 date input을 대체하는 커스텀 달력 날짜 선택 컴포넌트 구현 (Stimulus + Tailwind)
## 레거시 참고
레거시(Next.js)에서는 react-day-picker 기반 Calendar + Popover 조합 사용:
- 버튼 클릭 → 달력 팝오버 열림
- 날짜 선택 → 자동 닫힘
- 한국어 포맷 ("2026년 3월 2일", "3/2 (월)")
- 레거시 파일: /mnt/c/dev/logbible/src/components/ui/calendar.tsx
## 작업 내용
### 1. Stimulus 달력 컨트롤러 생성
- `app/javascript/controllers/datepicker_controller.js` 생성
- 기능:
- 버튼 클릭 → 달력 팝오버 토글
- 월 이동 (이전/다음)
- 날짜 클릭 → hidden input에 값 설정 + 팝오버 닫기
- 한국어 요일/월 표시 (일/월/화/수/목/금/토)
- 선택된 날짜를 버튼에 한국어 포맷으로 표시
- 외부 클릭 시 팝오버 닫기
- min/max 날짜 제한 지원 (옵션)
### 2. shared/_datepicker 파셜 생성
- `app/views/shared/_datepicker.html.erb` 생성
- 사용법: `<%= render "shared/datepicker", form: f, field: :start_date, label: "시작일", required: true %>`
- 구성:
- 라벨
- hidden input (실제 form 값)
- 트리거 버튼 (선택된 날짜 표시)
- 달력 팝오버 (Tailwind 스타일)
- 디자인 시스템 일관성: 기존 _input 파셜과 같은 스타일링 토큰 사용
### 3. Tailwind 스타일링
- 기존 디자인 시스템 색상 토큰 사용 (app/assets/tailwind/application.css)
- 오늘 날짜 하이라이트
- 선택된 날짜 하이라이트
- 비활성 날짜 (다른 월) 흐리게
## 완료 기준
- datepicker_controller.js 생성 + importmap 등록
- shared/_datepicker.html.erb 파셜 생성
- 달력이 한국어로 표시됨
- 날짜 선택 시 hidden input에 YYYY-MM-DD 형식으로 저장
- 모바일에서도 사용 가능 (터치 지원)
- 외부 클릭 시 닫힘
## 담당 파일 (신규 생성)
- app/javascript/controllers/datepicker_controller.js
- app/views/shared/_datepicker.html.erb
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 진행 중 → 완료
2026년 03월 02일 10:23:54
-
Ddatepicker-dev 작업 시작: 달력 날짜 선택 Stimulus 컨트롤러 구현
2026년 03월 02일 10:10:30
상세 보기
## 계획
1. 기존 코드 확인 (_input 스타일, 색상 토큰, importmap 패턴)
2. 레거시 calendar.tsx 참고
3. datepicker_controller.js 생성
4. shared/_datepicker.html.erb 파셜 생성 -
Ddatepicker-dev 티켓 클레임 완료
2026년 03월 02일 10:10:13