개발사례

샘플쉽 상품 image upload 백그라운드 연동 실무 적용 가이드

2분 읽기
Next.js기반쇼핑몰커머스플랫폼구축과실전트러블슈팅노하우TOVLABMarketingOperationsNextjs14GoogleSearchConsoleSEOWebEngineeringSampleShipRustNextjs상품이미지업로드갤러리정렬

프로젝트 개요

SampleShip 관리자 상품 화면에 실제 이미지 파일 업로드와 갤러리 순서 조정 기능을 추가하는 작업입니다. 운영자가 이미지 URL을 직접 입력하지 않아도 상품 이미지를 등록하고 정렬할 수 있도록 하는 것이 목표입니다.

이미지 업로드 파이프라인 구성

업로드 전용 API와 정적 파일 제공 경로를 분리해서 구성했습니다. 파일을 선택하면 서버에 업로드되고, 결과가 곧바로 상품 이미지 목록에 반영됩니다.

SampleShip admin product image upload screen Admin Product Image Upload

갤러리 순서 조정 UI

이미지가 여러 장 등록될 때 순서가 흐트러지는 문제를 고려해, 업로드 기능과 함께 갤러리 순서를 조정할 수 있는 UI를 관리자 화면에 반영했습니다. 대표 이미지를 앞쪽에 배치하는 작업까지 관리자 화면 안에서 처리됩니다.

검증 결과와 향후 과제

검증 결과
[PASS] Rust 빌드 및 프론트엔드 빌드 성공
[PASS] GET /healthz 정상 응답 확인
[PASS] 실제 JPEG 파일 업로드 성공
[PASS] API/프론트 프록시 경유 이미지 조회 성공
[PASS] 관리자 화면 파일 업로드 흐름 렌더링 확인

이미지별 alt 텍스트 편집, 업로드 파일 삭제/교체 정책, 실제 메일 수신 서버 설치와 DNS 연결, 리뷰/상품문의, 쿠폰/적립금, 결제(PG) 연동은 다음 단계 과제로 남아 있습니다.