MD-09 · 이미지 일괄 업로드

이미지 일괄 업로드 (파일 선택 + 다중 등록 + 정방형 여백)

공급사 상품 편집 화면 이미지 칸에서 파일 선택 클릭으로 여러 장을 한 번에 올리고, 등록 시 정사각 캔버스에 여백(패딩)을 강제해 원본 비율을 유지한다.

🟢 바로 착수 드래그앤드롭 개선 다중 업로드 정방형 패딩
➕ 기능 추가
무엇 — 공급사 상품 편집 화면 이미지 칸에서 파일 선택 클릭으로 여러 장을 한 번에 올리고, 등록 시 정사각 캔버스에 여백(패딩)을 강제해 원본 비율을 유지한다.📍 위치: 상품관리 › 공급사 상품 관리 › 편집

핵심 결정

착수 상태
🟢 바로 착수 (편집 화면 이미지 칸 개선)
업로드 방식
기존 드래그앤드롭 유지 + 파일 선택 클릭 추가, 여러 장 동시 선택 허용
정방형 처리
등록 시 정사각 캔버스에 패딩, 원본 비율 유지·크롭/확대 없음, 여백색 흰색(#FFFFFF, 가정)
부분 실패 처리
실패한 장만 사유 표시, 나머지는 그대로 성공 저장
저장 위치
seller_product_image (hero_product_code + grade 순서로 적재)
01

화면 — 먼저 보기

이 티켓이 실제로 어떤 화면이 되는지 먼저 봅니다

현재는 드래그앤드롭만 되고 지정 구역 밖에 놓으면 등록이 실패한다 → 파일 선택 버튼 + 다중 업로드를 추가하고, 여백 없는 이미지가 가로에 맞춰 확대되던 문제는 정사각 여백 패딩으로 해결한다.
현행 화면 · 실제 캡처
현행 「상품 수정」 — 이미지 일괄 업로드 대상
현행 「상품 수정」 — 이미지 일괄 업로드 대상
변경안 · 제안 화면
상품관리 › 공급사 상품 관리 › 편집기능 추가
파일 선택드래그앤드롭 영역여백색 흰색 ▾🔍 파일명 검색
순서(grade)미리보기파일명정방형 처리 🆕업로드 상태 🆕관리
1[썸네일]canola_18L.jpg여백 O·흰색성공삭제
2[썸네일]box_front.png여백 O·흰색성공삭제
3(실패)wide_banner.jpg-실패·크기 5000px 초과재시도

▲ 편집 › 이미지 패널 — 바뀌는 컬럼은 🆕 로 표시(예시 데이터)

1
편집 화면 진입 — 공급사 상품 관리 목록에서 상품 「편집」을 열고 이미지 칸으로 이동한다. 칸 어디를 클릭해도 파일 선택 대화상자가 열린다.
2
여러 장 선택 — 파일 선택에서 jpg/png 등 여러 장을 한 번에 고른다. 기존 드래그앤드롭도 그대로 사용 가능하다.
3
검증 & 정방형 패딩 — 형식·용량·크기·최대 장수를 검증하고, 통과한 이미지는 원본 비율 유지한 채 정사각 캔버스에 여백을 채워 규격화한다.
4
부분 실패 표시 — 위반한 장만 파일명과 사유를 붉게 표시하고, 나머지 성공 장은 빈 grade부터 순차 배정해 즉시 목록에 반영한다.
5
순서 조정 & 저장 — 필요 시 이미지 순서(grade)를 드래그로 조정하고 저장하면 seller_product_image 에 반영, 배치 결과가 이력에 기록된다.
02

정책 / 정의

용어를 못 박고, 규칙을 명확히

용어 정의
용어정의
히어로코드상품 식별 표준키. seller_product_image.hero_product_code 로 이미지가 상품에 귀속된다.
grade(표시 순서)상품 내 이미지 노출 순서. (hero_product_code, grade) 유니크 제약이 걸려 있어 다중 업로드 시 빈 grade부터 순차 채운다.
정방형 패딩원본을 1:1 정사각 캔버스 중앙에 넣고 남는 부분을 단색 여백으로 채우는 처리. 비율 왜곡·확대 없이 규격을 통일한다.
여백색정방형 패딩 시 채워지는 배경 색. 기본 흰색(#FFFFFF)으로 가정, 어드민 설정으로 변경 가능하도록 chip 노출.
다중 업로드파일 선택 대화상자에서 여러 파일을 한 번에 골라 한 요청으로 처리하는 방식.
부분 실패업로드한 여러 장 중 형식·용량·크기 위반 등으로 일부만 거부되고 나머지는 정상 저장되는 상태.
공급사 상품매입처(공급사)로부터 등록되는 상품. seller_product 를 편집하는 화면에서 이미지를 관리한다.
정책 (규칙)
#규칙비고
1드래그앤드롭은 유지하되, 이미지 칸 어디를 클릭해도 파일 선택 대화상자가 열린다기존 '지정 구역 밖 드롭 시 실패' 불편 해소. 등록 손이 많이 가는 문제 직접 대응.
2파일 선택 시 다중 선택(multiple) 허용, 한 번에 최대 10장까지 업로드최대 장수 10은 가정. (hero_product_code, grade) 유니크 제약상 상품당 grade 수만큼만 보유 가능.
3허용 형식: jpg / jpeg / png / webpwebp 포함 여부는 가정. 확장자+MIME 이중 검증, 그 외 형식은 해당 장만 거부.
4파일당 용량 최대 10MB, 가로/세로 각 최대 5000px용량·크기 상한은 가정값. 초과 시 해당 장만 실패 처리하고 사유 표기.
5등록 시 정사각 캔버스에 여백 패딩을 강제하고 원본 비율은 유지한다(크롭·확대 없음)여백 없는 이미지가 가로에 맞춰 확대되던 현상 해결. 원본 비율 유지 확정 요청 반영.
6여백색은 흰색(#FFFFFF)을 기본값으로 하며 화면 chip에서 변경 가능'여백 색' 확인 요청 반영. 기본값은 가정.
7일부 실패 시 실패한 장만 사유와 함께 노출하고 나머지는 성공 저장한다전체 롤백 금지. 성공 장은 즉시 목록에 반영.
8다중 업로드는 선택 순서대로 비어 있는 grade 부터 순차 배정한다기존 이미지 grade 는 보존, 신규 장만 뒤 순번으로 추가. 유니크 충돌 방지.
9업로드 배치 결과(성공/실패 건수·사유)를 이력 테이블에 기록한다seller_product_excel_update_history 선례처럼 감사·재현용 로그 확보.
03

ERD

데이터 구조 · 관계 · DDL

seller_product_image WRITE
idPK bigint
hero_product_codeFK varchar(50)
imagevarchar(255)
pathvarchar(255)
gradeinteger
square_paddedboolean
pad_colorvarchar(7)
orig_file_namevarchar(255)
byte_sizeinteger
del_flagboolean
reg_idvarchar(20)
created_attimestamp
공급사 상품 이미지. 이번 기능의 저장 대상. 정방형 처리·원본 메타 컬럼을 추가한다.
seller_product READ
hero_product_codePK varchar(50)
main_product_namevarchar
seller_product_codevarchar
공급사 상품 마스터. 편집 화면의 대상 상품·히어로코드 앵커.
seller_product_image_upload_log 신규
idPK bigint
hero_product_codeFK varchar(50)
total_countinteger
success_countinteger
fail_countinteger
fail_detailjsonb
reg_idvarchar(20)
created_attimestamp
신규: 일괄 업로드 배치 결과 이력(성공/실패 건수·사유). 감사·재현용.
seller_product.hero_product_code 1 : N seller_product_image.hero_product_code
seller_product.hero_product_code 1 : N seller_product_image_upload_log.hero_product_code
-- 1) 기존 이미지 테이블에 정방형 처리·원본 메타 컬럼 추가\nALTER TABLE public.seller_product_image\n  ADD COLUMN square_padded boolean NOT NULL DEFAULT false, -- 정방형 여백(패딩) 적용 여부\n  ADD COLUMN pad_color     varchar(7)  DEFAULT '#FFFFFF',   -- 여백색 HEX (기본 흰색, 가정)\n  ADD COLUMN orig_file_name varchar(255),                   -- 업로드 원본 파일명\n  ADD COLUMN byte_size      integer;                         -- 원본 용량(byte)\n\nCOMMENT ON COLUMN public.seller_product_image.square_padded  IS '등록 시 정사각 캔버스 여백 패딩 적용 여부';\nCOMMENT ON COLUMN public.seller_product_image.pad_color      IS '정방형 여백색(HEX), 기본 #FFFFFF';\nCOMMENT ON COLUMN public.seller_product_image.orig_file_name IS '업로드 원본 파일명';\nCOMMENT ON COLUMN public.seller_product_image.byte_size      IS '원본 파일 용량(byte)';\n\n-- 2) 일괄 업로드 배치 결과 이력 (부분 실패 감사·재현용)\nCREATE TABLE public.seller_product_image_upload_log (\n  id            bigserial   PRIMARY KEY,                  -- 배치 로그 PK\n  hero_product_code varchar(50) NOT NULL,                 -- 대상 상품 히어로코드\n  total_count   integer     NOT NULL,                     -- 업로드 시도 총 장수\n  success_count integer     NOT NULL DEFAULT 0,            -- 성공 장수\n  fail_count    integer     NOT NULL DEFAULT 0,            -- 실패 장수\n  fail_detail   jsonb,                                    -- 실패 장 [{file_name, reason}] 배열\n  reg_id        varchar(20) NOT NULL,                      -- 업로드 관리자 ID\n  created_at    timestamp   NOT NULL DEFAULT (CURRENT_TIMESTAMP AT TIME ZONE 'Asia/Seoul')\n);\nCOMMENT ON TABLE public.seller_product_image_upload_log IS '공급사 상품 이미지 일괄 업로드 배치 결과 이력';\nCREATE INDEX seller_product_image_upload_log_hpc_idx\n  ON public.seller_product_image_upload_log (hero_product_code);
04

화면 상세 — 세부 표·규칙

목록 외 품목표·모달·규칙 등 세부 화면

파일 선택 다중 업로드 결과 모달
파일명용량해상도정방형 후결과/사유
canola_18L.jpg1.2MB1200×16001600×1600(패딩)성공
box_front.png0.8MB1000×10001000×1000(패딩 불필요)성공
logo.gif0.1MB400×400-실패·허용 형식 아님(gif)
총 3장 중 2장 성공·1장 실패. 실패 장만 사유 표기, 성공 장은 확인 시 저장. 정방형 후 컬럼으로 여백 결과 미리보기 제공.
업로드 제한 규칙표
항목기준값실패 시 처리
허용 형식jpg·jpeg·png·webp해당 장만 거부
파일당 용량최대 10MB(가정)해당 장만 거부
해상도각 변 최대 5000px(가정)해당 장만 거부
최대 장수1회 10장(가정)초과분 무시·경고
가정값은 정책 확정 시 수정. 여백색 기본 #FFFFFF(가정), 원본 비율 유지 확정.