sodalive-vuejs-creator-admin/docs/20260227_시리즈커버이미지크롭기능추가.md

20260227_시리즈커버이미지크롭기능추가.md

구현할 내용

• ContentSeriesList.vue에 cropperjs를 활용한 이미지 크롭 기능 추가
  • 1:1.5 비율(aspectRatio: 1/1.5) 지원
  • 가로 해상도 최대 1000px 제한 로직 추가 (1000px 미만은 원본 크기 유지)
  • 크롭 다이얼로그 및 관련 상태 관리 로직 구현
  • 크롭 후 _isCropped 플래그를 통한 중복 처리 방지
• 크롭 다이얼로그 내 이미지 표시 영역 높이 제한 및 스타일 수정
• 큰 이미지가 표시될 때 다이얼로그 밖으로 나가지 않도록 max-height 조정
• 시리즈 이미지 크롭 비율을 A4 비율(210:297)로 수정

검증 기록

1차 구현

• 무엇을: ContentSeriesList.vue 시리즈 등록/수정 시 커버 이미지 크롭 기능 추가
• 왜: 시리즈 커버 이미지의 비율을 1:1.5로 강제하고, 고해상도 이미지 업로드 시 가로 1000px로 리사이징하여 서버 부하 및 레이아웃 깨짐을 방지하기 위함
• 어떻게:
  • cropperjs 라이브러리를 도입하여 aspectRatio: 1 / 1.5 설정
  • cropImage 메서드에서 canvas.width가 1000px을 초과할 경우에만 리사이징 수행
  • file._isCropped 플래그를 사용하여 크롭 완료 후 v-file-input 모델 변경 시 발생하는 imageAdd 중복 호출 방지
  • npm run lint를 통해 코드 스타일 검증 완료

2차 수정

• 무엇을: ContentSeriesList.vue의 크롭퍼 이미지 컨테이너 스타일 수정
• 왜: 이미지가 너무 클 경우 다이얼로그를 벗어나 스크롤을 해야만 '크롭 완료' 버튼을 누를 수 있는 불편함이 있음.
• 어떻게:
  • .cropper-wrapper의 max-height를 500px에서 70vh로 변경하여 브라우저 높이에 대응하도록 수정.
  • npm run lint 실행 결과 이상 없음 확인.

+### 3차 수정 +- 무엇을: 시리즈 커버 이미지 크롭 비율 수정 (1:1.5 -> A4 비율) +- 왜: 시리즈 이미지 규격을 A4 비율(210:297)로 통일하기 위함 +- 어떻게:

• • ContentSeriesList.vue에서 aspectRatio를 210 / 297로 수정
• • 크롭 다이얼로그 타이틀을 "이미지 크롭 (A4 비율)"으로 변경
• • 리사이징 시 높이 계산 방식을 MAX_WIDTH * (297 / 210)으로 수정
• • 목록의 커버 이미지 aspect-ratio를 210/297로 수정
• • npm run lint 실행 결과 이상 없음 확인