[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

담당자: datepicker-dev
생성일: 2026년 03월 02일 10:08

활동 로그

  • 팀리드 상태 변경: 진행 중 → 완료

    2026년 03월 02일 10:23:54

  • D
    datepicker-dev 작업 시작: 달력 날짜 선택 Stimulus 컨트롤러 구현

    2026년 03월 02일 10:10:30

    상세 보기

    ## 계획
    1. 기존 코드 확인 (_input 스타일, 색상 토큰, importmap 패턴)
    2. 레거시 calendar.tsx 참고
    3. datepicker_controller.js 생성
    4. shared/_datepicker.html.erb 파셜 생성

  • D
    datepicker-dev 티켓 클레임 완료

    2026년 03월 02일 10:10:13