백로그
0할 일
0진행 중
0리뷰
0완료 (15일)
6Active Storage 마이그레이션 + Ticket 모델 설정
1. rails active_storage:install로 마이그레이션 생성 및 실행 2. Ticket 모델에 has_many_attached :images 추가 3. 이미지 variant 설정 (썸네일: 200x200, 미디엄: 800x600) 4. 이미지 개수 제한 validate (최대 5개) 5. 이미지 타입 제한 (JPEG, PNG, GIF, WebP) 6. 파일 크기 제한 (10MB 이하) 완료 기준: rails db:migrate 성공, Ticket.new.images 동작 확인
웹 컨트롤러 이미지 업로드/삭제 처리
1. TicketsController#update에 images 파라미터 허용 2. 이미지 삭제 액션 추가 (DELETE /tickets/:id/images/:image_id) 3. routes.rb에 이미지 삭제 라우트 추가 4. Strong params에 images: [] 추가 5. Turbo Stream 응답으로 실시간 업데이트 완료 기준: 웹 UI에서 이미지 업로드/삭제 가능, ActionCable 브로드캐스트 동작
API 컨트롤러 이미지 업로드/삭제 처리
1. Api::V1::TicketsController에 이미지 업로드 처리 (multipart/form-data) 2. 이미지 삭제 엔드포인트 추가 3. API 라우트 추가 4. 이미지 URL을 JSON 응답에 포함 5. flat ticket routes에도 이미지 관련 라우트 추가 완료 기준: curl로 이미지 업로드/삭제/조회 가능
Stimulus 이미지 업로드 컨트롤러 (클립보드+파일선택)
1. app/javascript/controllers/image_upload_controller.js 생성 2. 클립보드 붙여넣기 (paste 이벤트) 처리 - 이미지 데이터 감지 및 업로드 3. 파일 선택 버튼 클릭 시 file input 트리거 4. 업로드 미리보기 (FileReader로 로컬 프리뷰) 5. fetch API로 서버에 업로드 (FormData 사용) 6. 업로드 진행 중 로딩 표시 7. 5개 제한 클라이언트 검증 8. Turbo와 통합 (업로드 후 페이지 갱신) 완료 기준: 클립보드 붙여넣기와 파일 선택으로 이미지 업로드 동작
티켓 상세 페이지 이미지 갤러리 UI
1. app/views/tickets/show.html.erb에 이미지 갤러리 섹션 추가 2. 첨부된 이미지들을 그리드 레이아웃으로 표시 3. 각 이미지에 삭제 버튼 (X) 추가 4. 이미지 업로드 영역 UI (드롭존 스타일) 5. "이미지 추가" 버튼 + 숨겨진 file input 6. 클립보드 붙여넣기 안내 텍스트 7. Tailwind CSS로 반응형 디자인 8. 이미지 클릭 시 라이트박스 (선택사항) 완료 기준: 티켓 상세 페이지에서 이미지 표시/업로드/삭제 UI 완성
칸반 보드 티켓 카드에 이미지 썸네일 표시
1. app/views/projects/show.html.erb의 티켓 카드에 첫 이미지 썸네일 추가 2. 썸네일 크기: 가로 전체폭, 높이 auto (카드 상단) 3. 이미지가 없는 티켓은 기존대로 표시 4. 다중 이미지인 경우 개수 뱃지 표시 (예: +3) 5. Tailwind CSS로 깔끔한 디자인 6. N+1 쿼리 방지 (includes/preload 사용) 완료 기준: 칸반 보드에서 이미지 있는 티켓에 썸네일이 표시됨