diff --git a/frontend/api-specs/stock-receiving-changes-20260317.md b/frontend/api-specs/stock-receiving-changes-20260317.md index 1538c1b..1ef43e9 100644 --- a/frontend/api-specs/stock-receiving-changes-20260317.md +++ b/frontend/api-specs/stock-receiving-changes-20260317.md @@ -13,6 +13,7 @@ |---|------|----------|----------| | 1 | 원자재로트번호 자동채번 | 입고등록 | UI 변경 | | 2 | 재고 조정 위치 이동 | 입고관리 → 재고 상세 | UI 이동 + API 연동 | +| 3 | 재고 조정 모달 UI 개선 | InventoryAdjustmentDialog | UI 개선 | --- @@ -235,6 +236,59 @@ export async function createStockAdjustment( --- +## 3. 재고 조정 모달 UI 개선 + +### 현재 문제 + +- 모달 `max-width: 700px`로 테이블 컬럼(로트번호, 품목코드, 품목유형, 품목명, 규격, 단위, 재고량, 증감 수량)이 잘림 +- 규격 컬럼 이후가 보이지 않아 좌우 스크롤이 필요하지만, 스크롤바가 작고 마우스로 조작이 어려움 +- 모바일/태블릿 환경에서 더 심각 + +### 개선 방향 + +``` +AS-IS: + Dialog max-width: 700px → 컬럼 잘림, 스크롤 조작 어려움 + +TO-BE: + 화면 폭에 꽉 찬 풀스크린 모달 (또는 max-width: 95vw) + 테이블 영역에 명확한 가로 스크롤바 표시 +``` + +### 구체적 개선사항 + +``` +✅ 모달 너비: max-width 제거 또는 95vw로 확대 (풀스크린 모달 권장) +✅ 테이블 컨테이너: overflow-x: auto + 명시적 스크롤바 스타일 +✅ 스크롤바 두께: 최소 8px 이상 (얇은 기본 스크롤바 금지) +✅ 스크롤바 항상 표시: overflow-x: scroll 또는 CSS scrollbar-gutter +✅ 고정 컬럼(선택): 로트번호/품목코드를 sticky left로 고정하면 더 좋음 +``` + +### CSS 참고 + +```css +/* 테이블 컨테이너 */ +.adjustment-table-wrapper { + overflow-x: auto; + -webkit-overflow-scrolling: touch; +} + +/* 스크롤바 항상 표시 + 두께 확보 */ +.adjustment-table-wrapper::-webkit-scrollbar { + height: 10px; +} +.adjustment-table-wrapper::-webkit-scrollbar-thumb { + background: #c1c1c1; + border-radius: 5px; +} +.adjustment-table-wrapper::-webkit-scrollbar-track { + background: #f1f1f1; +} +``` + +--- + ## 작업 체크리스트 ### 입고 목록 (ReceivingList.tsx) @@ -256,3 +310,10 @@ export async function createStockAdjustment( - [ ] `GET /stocks/{stockId}/adjustments` 연동 → 이력 테이블 렌더링 - [ ] + 추가 버튼 → 입력 폼/모달 → `POST /stocks/{stockId}/adjustments` 연동 - [ ] 조정 성공 시 재고량 갱신 (기본 정보 리로드) + +### 재고 조정 모달 (InventoryAdjustmentDialog.tsx) + +- [ ] 모달 너비: 풀스크린 또는 `max-width: 95vw`로 확대 +- [ ] 테이블 컨테이너에 `overflow-x: auto` + 명시적 스크롤바 스타일 +- [ ] 스크롤바 두께 최소 8px 이상, 항상 표시 +- [ ] (선택) 로트번호/품목코드 컬럼 sticky left 고정