diff --git a/.gitignore b/.gitignore
index 501eb3da..60f6f4fd 100644
--- a/.gitignore
+++ b/.gitignore
@@ -238,3 +238,6 @@ frontend/playwright.config.ts
 frontend/tests/
 frontend/test-results/
 db/checkpoints/
+
+# Playwright MCP 산출물 (커밋 금지)
+.playwright-mcp/
diff --git a/.playwright-mcp/page-2026-04-07T08-22-57-118Z.yml b/.playwright-mcp/page-2026-04-07T08-22-57-118Z.yml
deleted file mode 100644
index ab859680..00000000
--- a/.playwright-mcp/page-2026-04-07T08-22-57-118Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e7]:
-        - generic [ref=e8]: W
-        - generic [ref=e9]: WACE 솔루션
-      - generic [ref=e10]:
-        - generic [ref=e12] [cursor=pointer]:
-          - img [ref=e13]
-          - generic [ref=e16]: 대시보드
-        - generic [ref=e17] [cursor=pointer]:
-          - generic [ref=e18]:
-            - img [ref=e19]
-            - generic [ref=e24]: 사용자 관리
-          - img [ref=e25]
-        - generic [ref=e27] [cursor=pointer]:
-          - generic [ref=e28]:
-            - img [ref=e29]
-            - generic [ref=e31]: 제품 관리
-          - img [ref=e32]
-        - generic [ref=e35] [cursor=pointer]:
-          - img [ref=e36]
-          - generic [ref=e37]: 통계/분석
-        - generic [ref=e38] [cursor=pointer]:
-          - generic [ref=e39]:
-            - img [ref=e40]
-            - generic [ref=e43]: 시스템 설정
-          - img [ref=e44]
-      - generic [ref=e47] [cursor=pointer]:
-        - generic [ref=e48]: 박
-        - generic [ref=e49]:
-          - generic [ref=e50]: 박개발
-          - generic [ref=e51]: 개발팀
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-25-10-540Z.yml b/.playwright-mcp/page-2026-04-07T08-25-10-540Z.yml
deleted file mode 100644
index ab859680..00000000
--- a/.playwright-mcp/page-2026-04-07T08-25-10-540Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e7]:
-        - generic [ref=e8]: W
-        - generic [ref=e9]: WACE 솔루션
-      - generic [ref=e10]:
-        - generic [ref=e12] [cursor=pointer]:
-          - img [ref=e13]
-          - generic [ref=e16]: 대시보드
-        - generic [ref=e17] [cursor=pointer]:
-          - generic [ref=e18]:
-            - img [ref=e19]
-            - generic [ref=e24]: 사용자 관리
-          - img [ref=e25]
-        - generic [ref=e27] [cursor=pointer]:
-          - generic [ref=e28]:
-            - img [ref=e29]
-            - generic [ref=e31]: 제품 관리
-          - img [ref=e32]
-        - generic [ref=e35] [cursor=pointer]:
-          - img [ref=e36]
-          - generic [ref=e37]: 통계/분석
-        - generic [ref=e38] [cursor=pointer]:
-          - generic [ref=e39]:
-            - img [ref=e40]
-            - generic [ref=e43]: 시스템 설정
-          - img [ref=e44]
-      - generic [ref=e47] [cursor=pointer]:
-        - generic [ref=e48]: 박
-        - generic [ref=e49]:
-          - generic [ref=e50]: 박개발
-          - generic [ref=e51]: 개발팀
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-25-23-248Z.yml b/.playwright-mcp/page-2026-04-07T08-25-23-248Z.yml
deleted file mode 100644
index a5370cf9..00000000
--- a/.playwright-mcp/page-2026-04-07T08-25-23-248Z.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-- generic [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [active] [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e8]: W
-      - generic [ref=e61]:
-        - generic [ref=e62] [cursor=pointer]:
-          - img [ref=e63]
-          - generic: 대시보드
-        - generic [ref=e66] [cursor=pointer]:
-          - img [ref=e67]
-          - generic: 사용자 관리
-        - generic [ref=e72] [cursor=pointer]:
-          - img [ref=e73]
-          - generic: 제품 관리
-        - generic [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-          - generic: 통계/분석
-        - generic [ref=e77] [cursor=pointer]:
-          - img [ref=e78]
-          - generic: 시스템 설정
-      - generic [ref=e48] [cursor=pointer]: 박
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-25-34-108Z.yml b/.playwright-mcp/page-2026-04-07T08-25-34-108Z.yml
deleted file mode 100644
index 30769f4f..00000000
--- a/.playwright-mcp/page-2026-04-07T08-25-34-108Z.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e8]: W
-      - generic [ref=e61]:
-        - generic [ref=e62] [cursor=pointer]:
-          - img [ref=e63]
-          - generic: 대시보드
-        - generic [ref=e66] [cursor=pointer]:
-          - img [ref=e67]
-          - generic: 사용자 관리
-          - generic [ref=e81]:
-            - generic [ref=e82]: 사용자 관리
-            - generic [ref=e83]:
-              - img [ref=e84]
-              - text: 사용자 목록
-            - generic [ref=e87]:
-              - img [ref=e88]
-              - text: 권한 설정
-            - generic [ref=e91]:
-              - img [ref=e92]
-              - text: 부서 관리
-        - generic [ref=e72] [cursor=pointer]:
-          - img [ref=e73]
-          - generic: 제품 관리
-        - generic [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-          - generic: 통계/분석
-        - generic [ref=e77] [cursor=pointer]:
-          - img [ref=e78]
-          - generic: 시스템 설정
-      - generic [ref=e48] [cursor=pointer]: 박
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-26-01-971Z.yml b/.playwright-mcp/page-2026-04-07T08-26-01-971Z.yml
deleted file mode 100644
index ab859680..00000000
--- a/.playwright-mcp/page-2026-04-07T08-26-01-971Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e7]:
-        - generic [ref=e8]: W
-        - generic [ref=e9]: WACE 솔루션
-      - generic [ref=e10]:
-        - generic [ref=e12] [cursor=pointer]:
-          - img [ref=e13]
-          - generic [ref=e16]: 대시보드
-        - generic [ref=e17] [cursor=pointer]:
-          - generic [ref=e18]:
-            - img [ref=e19]
-            - generic [ref=e24]: 사용자 관리
-          - img [ref=e25]
-        - generic [ref=e27] [cursor=pointer]:
-          - generic [ref=e28]:
-            - img [ref=e29]
-            - generic [ref=e31]: 제품 관리
-          - img [ref=e32]
-        - generic [ref=e35] [cursor=pointer]:
-          - img [ref=e36]
-          - generic [ref=e37]: 통계/분석
-        - generic [ref=e38] [cursor=pointer]:
-          - generic [ref=e39]:
-            - img [ref=e40]
-            - generic [ref=e43]: 시스템 설정
-          - img [ref=e44]
-      - generic [ref=e47] [cursor=pointer]:
-        - generic [ref=e48]: 박
-        - generic [ref=e49]:
-          - generic [ref=e50]: 박개발
-          - generic [ref=e51]: 개발팀
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-26-06-344Z.yml b/.playwright-mcp/page-2026-04-07T08-26-06-344Z.yml
deleted file mode 100644
index a5370cf9..00000000
--- a/.playwright-mcp/page-2026-04-07T08-26-06-344Z.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-- generic [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [active] [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e8]: W
-      - generic [ref=e61]:
-        - generic [ref=e62] [cursor=pointer]:
-          - img [ref=e63]
-          - generic: 대시보드
-        - generic [ref=e66] [cursor=pointer]:
-          - img [ref=e67]
-          - generic: 사용자 관리
-        - generic [ref=e72] [cursor=pointer]:
-          - img [ref=e73]
-          - generic: 제품 관리
-        - generic [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-          - generic: 통계/분석
-        - generic [ref=e77] [cursor=pointer]:
-          - img [ref=e78]
-          - generic: 시스템 설정
-      - generic [ref=e48] [cursor=pointer]: 박
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-26-14-138Z.yml b/.playwright-mcp/page-2026-04-07T08-26-14-138Z.yml
deleted file mode 100644
index 30769f4f..00000000
--- a/.playwright-mcp/page-2026-04-07T08-26-14-138Z.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e8]: W
-      - generic [ref=e61]:
-        - generic [ref=e62] [cursor=pointer]:
-          - img [ref=e63]
-          - generic: 대시보드
-        - generic [ref=e66] [cursor=pointer]:
-          - img [ref=e67]
-          - generic: 사용자 관리
-          - generic [ref=e81]:
-            - generic [ref=e82]: 사용자 관리
-            - generic [ref=e83]:
-              - img [ref=e84]
-              - text: 사용자 목록
-            - generic [ref=e87]:
-              - img [ref=e88]
-              - text: 권한 설정
-            - generic [ref=e91]:
-              - img [ref=e92]
-              - text: 부서 관리
-        - generic [ref=e72] [cursor=pointer]:
-          - img [ref=e73]
-          - generic: 제품 관리
-        - generic [ref=e75] [cursor=pointer]:
-          - img [ref=e76]
-          - generic: 통계/분석
-        - generic [ref=e77] [cursor=pointer]:
-          - img [ref=e78]
-          - generic: 시스템 설정
-      - generic [ref=e48] [cursor=pointer]: 박
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-30-21-572Z.yml b/.playwright-mcp/page-2026-04-07T08-30-21-572Z.yml
deleted file mode 100644
index ab859680..00000000
--- a/.playwright-mcp/page-2026-04-07T08-30-21-572Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e7]:
-        - generic [ref=e8]: W
-        - generic [ref=e9]: WACE 솔루션
-      - generic [ref=e10]:
-        - generic [ref=e12] [cursor=pointer]:
-          - img [ref=e13]
-          - generic [ref=e16]: 대시보드
-        - generic [ref=e17] [cursor=pointer]:
-          - generic [ref=e18]:
-            - img [ref=e19]
-            - generic [ref=e24]: 사용자 관리
-          - img [ref=e25]
-        - generic [ref=e27] [cursor=pointer]:
-          - generic [ref=e28]:
-            - img [ref=e29]
-            - generic [ref=e31]: 제품 관리
-          - img [ref=e32]
-        - generic [ref=e35] [cursor=pointer]:
-          - img [ref=e36]
-          - generic [ref=e37]: 통계/분석
-        - generic [ref=e38] [cursor=pointer]:
-          - generic [ref=e39]:
-            - img [ref=e40]
-            - generic [ref=e43]: 시스템 설정
-          - img [ref=e44]
-      - generic [ref=e47] [cursor=pointer]:
-        - generic [ref=e48]: 박
-        - generic [ref=e49]:
-          - generic [ref=e50]: 박개발
-          - generic [ref=e51]: 개발팀
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-35-06-635Z.yml b/.playwright-mcp/page-2026-04-07T08-35-06-635Z.yml
deleted file mode 100644
index ab859680..00000000
--- a/.playwright-mcp/page-2026-04-07T08-35-06-635Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - button "사이드바 접기/펼치기" [ref=e4] [cursor=pointer]:
-        - img [ref=e5]
-      - generic [ref=e7]:
-        - generic [ref=e8]: W
-        - generic [ref=e9]: WACE 솔루션
-      - generic [ref=e10]:
-        - generic [ref=e12] [cursor=pointer]:
-          - img [ref=e13]
-          - generic [ref=e16]: 대시보드
-        - generic [ref=e17] [cursor=pointer]:
-          - generic [ref=e18]:
-            - img [ref=e19]
-            - generic [ref=e24]: 사용자 관리
-          - img [ref=e25]
-        - generic [ref=e27] [cursor=pointer]:
-          - generic [ref=e28]:
-            - img [ref=e29]
-            - generic [ref=e31]: 제품 관리
-          - img [ref=e32]
-        - generic [ref=e35] [cursor=pointer]:
-          - img [ref=e36]
-          - generic [ref=e37]: 통계/분석
-        - generic [ref=e38] [cursor=pointer]:
-          - generic [ref=e39]:
-            - img [ref=e40]
-            - generic [ref=e43]: 시스템 설정
-          - img [ref=e44]
-      - generic [ref=e47] [cursor=pointer]:
-        - generic [ref=e48]: 박
-        - generic [ref=e49]:
-          - generic [ref=e50]: 박개발
-          - generic [ref=e51]: 개발팀
-    - generic [ref=e52]:
-      - generic [ref=e54]: 대시보드
-      - generic [ref=e55]: 컨텐츠 영역
-  - generic [ref=e56]:
-    - strong [ref=e57]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e58]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e59]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e60]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-35-48-140Z.yml b/.playwright-mcp/page-2026-04-07T08-35-48-140Z.yml
deleted file mode 100644
index 8b9d7def..00000000
--- a/.playwright-mcp/page-2026-04-07T08-35-48-140Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e4]:
-        - generic [ref=e5]: W
-        - generic [ref=e6]: WACE 솔루션
-        - button "사이드바 접기/펼치기" [ref=e7] [cursor=pointer]:
-          - img [ref=e8]
-      - generic [ref=e11]:
-        - generic [ref=e13] [cursor=pointer]:
-          - img [ref=e14]
-          - generic [ref=e17]: 대시보드
-        - generic [ref=e18] [cursor=pointer]:
-          - generic [ref=e19]:
-            - img [ref=e20]
-            - generic [ref=e25]: 사용자 관리
-          - img [ref=e26]
-        - generic [ref=e28] [cursor=pointer]:
-          - generic [ref=e29]:
-            - img [ref=e30]
-            - generic [ref=e32]: 제품 관리
-          - img [ref=e33]
-        - generic [ref=e36] [cursor=pointer]:
-          - img [ref=e37]
-          - generic [ref=e38]: 통계/분석
-        - generic [ref=e39] [cursor=pointer]:
-          - generic [ref=e40]:
-            - img [ref=e41]
-            - generic [ref=e44]: 시스템 설정
-          - img [ref=e45]
-      - generic [ref=e48] [cursor=pointer]:
-        - generic [ref=e49]: 박
-        - generic [ref=e50]:
-          - generic [ref=e51]: 박개발
-          - generic [ref=e52]: 개발팀
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-36-01-130Z.yml b/.playwright-mcp/page-2026-04-07T08-36-01-130Z.yml
deleted file mode 100644
index f7f35560..00000000
--- a/.playwright-mcp/page-2026-04-07T08-36-01-130Z.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-- generic [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e4]:
-        - generic [ref=e5]: W
-        - button "사이드바 접기/펼치기" [active] [ref=e7] [cursor=pointer]:
-          - img [ref=e62]
-      - generic [ref=e65]:
-        - generic [ref=e66] [cursor=pointer]:
-          - img [ref=e67]
-          - generic: 대시보드
-        - generic [ref=e70] [cursor=pointer]:
-          - img [ref=e71]
-          - generic: 사용자 관리
-        - generic [ref=e76] [cursor=pointer]:
-          - img [ref=e77]
-          - generic: 제품 관리
-        - generic [ref=e79] [cursor=pointer]:
-          - img [ref=e80]
-          - generic: 통계/분석
-        - generic [ref=e81] [cursor=pointer]:
-          - img [ref=e82]
-          - generic: 시스템 설정
-      - generic [ref=e49] [cursor=pointer]: 박
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-41-10-582Z.yml b/.playwright-mcp/page-2026-04-07T08-41-10-582Z.yml
deleted file mode 100644
index 8b9d7def..00000000
--- a/.playwright-mcp/page-2026-04-07T08-41-10-582Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e4]:
-        - generic [ref=e5]: W
-        - generic [ref=e6]: WACE 솔루션
-        - button "사이드바 접기/펼치기" [ref=e7] [cursor=pointer]:
-          - img [ref=e8]
-      - generic [ref=e11]:
-        - generic [ref=e13] [cursor=pointer]:
-          - img [ref=e14]
-          - generic [ref=e17]: 대시보드
-        - generic [ref=e18] [cursor=pointer]:
-          - generic [ref=e19]:
-            - img [ref=e20]
-            - generic [ref=e25]: 사용자 관리
-          - img [ref=e26]
-        - generic [ref=e28] [cursor=pointer]:
-          - generic [ref=e29]:
-            - img [ref=e30]
-            - generic [ref=e32]: 제품 관리
-          - img [ref=e33]
-        - generic [ref=e36] [cursor=pointer]:
-          - img [ref=e37]
-          - generic [ref=e38]: 통계/분석
-        - generic [ref=e39] [cursor=pointer]:
-          - generic [ref=e40]:
-            - img [ref=e41]
-            - generic [ref=e44]: 시스템 설정
-          - img [ref=e45]
-      - generic [ref=e48] [cursor=pointer]:
-        - generic [ref=e49]: 박
-        - generic [ref=e50]:
-          - generic [ref=e51]: 박개발
-          - generic [ref=e52]: 개발팀
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-41-15-094Z.yml b/.playwright-mcp/page-2026-04-07T08-41-15-094Z.yml
deleted file mode 100644
index f7f35560..00000000
--- a/.playwright-mcp/page-2026-04-07T08-41-15-094Z.yml
+++ /dev/null
@@ -1,39 +0,0 @@
-- generic [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e4]:
-        - generic [ref=e5]: W
-        - button "사이드바 접기/펼치기" [active] [ref=e7] [cursor=pointer]:
-          - img [ref=e62]
-      - generic [ref=e65]:
-        - generic [ref=e66] [cursor=pointer]:
-          - img [ref=e67]
-          - generic: 대시보드
-        - generic [ref=e70] [cursor=pointer]:
-          - img [ref=e71]
-          - generic: 사용자 관리
-        - generic [ref=e76] [cursor=pointer]:
-          - img [ref=e77]
-          - generic: 제품 관리
-        - generic [ref=e79] [cursor=pointer]:
-          - img [ref=e80]
-          - generic: 통계/분석
-        - generic [ref=e81] [cursor=pointer]:
-          - img [ref=e82]
-          - generic: 시스템 설정
-      - generic [ref=e49] [cursor=pointer]: 박
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-41-56-681Z.yml b/.playwright-mcp/page-2026-04-07T08-41-56-681Z.yml
deleted file mode 100644
index 43514232..00000000
--- a/.playwright-mcp/page-2026-04-07T08-41-56-681Z.yml
+++ /dev/null
@@ -1,50 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e4]:
-        - generic [ref=e5]: W
-        - generic [ref=e6]: WACE 솔루션
-        - button "사이드바 접기" [ref=e7] [cursor=pointer]:
-          - img [ref=e8]
-      - generic [ref=e11]:
-        - generic [ref=e13] [cursor=pointer]:
-          - img [ref=e14]
-          - generic [ref=e17]: 대시보드
-        - generic [ref=e18] [cursor=pointer]:
-          - generic [ref=e19]:
-            - img [ref=e20]
-            - generic [ref=e25]: 사용자 관리
-          - img [ref=e26]
-        - generic [ref=e28] [cursor=pointer]:
-          - generic [ref=e29]:
-            - img [ref=e30]
-            - generic [ref=e32]: 제품 관리
-          - img [ref=e33]
-        - generic [ref=e36] [cursor=pointer]:
-          - img [ref=e37]
-          - generic [ref=e38]: 통계/분석
-        - generic [ref=e39] [cursor=pointer]:
-          - generic [ref=e40]:
-            - img [ref=e41]
-            - generic [ref=e44]: 시스템 설정
-          - img [ref=e45]
-      - generic [ref=e48] [cursor=pointer]:
-        - generic [ref=e49]: 박
-        - generic [ref=e50]:
-          - generic [ref=e51]: 박개발
-          - generic [ref=e52]: 개발팀
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-42-12-729Z.yml b/.playwright-mcp/page-2026-04-07T08-42-12-729Z.yml
deleted file mode 100644
index 97ff2d15..00000000
--- a/.playwright-mcp/page-2026-04-07T08-42-12-729Z.yml
+++ /dev/null
@@ -1,38 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e5]: W
-      - button "사이드바 펼치기" [ref=e63] [cursor=pointer]:
-        - img [ref=e64]
-      - generic [ref=e67]:
-        - generic [ref=e68] [cursor=pointer]:
-          - img [ref=e69]
-          - generic: 대시보드
-        - generic [ref=e72] [cursor=pointer]:
-          - img [ref=e73]
-          - generic: 사용자 관리
-        - generic [ref=e78] [cursor=pointer]:
-          - img [ref=e79]
-          - generic: 제품 관리
-        - generic [ref=e81] [cursor=pointer]:
-          - img [ref=e82]
-          - generic: 통계/분석
-        - generic [ref=e83] [cursor=pointer]:
-          - img [ref=e84]
-          - generic: 시스템 설정
-      - generic [ref=e49] [cursor=pointer]: 박
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-07T08-42-29-518Z.yml b/.playwright-mcp/page-2026-04-07T08-42-29-518Z.yml
deleted file mode 100644
index aaa64f87..00000000
--- a/.playwright-mcp/page-2026-04-07T08-42-29-518Z.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-- generic [active] [ref=e1]:
-  - generic [ref=e2]:
-    - generic [ref=e3]:
-      - generic [ref=e5]: W
-      - button "사이드바 펼치기" [ref=e63] [cursor=pointer]:
-        - img [ref=e64]
-      - generic [ref=e67]:
-        - generic [ref=e68] [cursor=pointer]:
-          - img [ref=e69]
-          - generic: 대시보드
-        - generic [ref=e72] [cursor=pointer]:
-          - img [ref=e73]
-          - generic: 사용자 관리
-          - generic [ref=e87]:
-            - generic [ref=e88]: 사용자 관리
-            - generic [ref=e89]:
-              - img [ref=e90]
-              - text: 사용자 목록
-            - generic [ref=e93]:
-              - img [ref=e94]
-              - text: 권한 설정
-            - generic [ref=e97]:
-              - img [ref=e98]
-              - text: 부서 관리
-        - generic [ref=e78] [cursor=pointer]:
-          - img [ref=e79]
-          - generic: 제품 관리
-        - generic [ref=e81] [cursor=pointer]:
-          - img [ref=e82]
-          - generic: 통계/분석
-        - generic [ref=e83] [cursor=pointer]:
-          - img [ref=e84]
-          - generic: 시스템 설정
-      - generic [ref=e49] [cursor=pointer]: 박
-    - generic [ref=e53]:
-      - generic [ref=e55]: 대시보드
-      - generic [ref=e56]: 컨텐츠 영역
-  - generic [ref=e57]:
-    - strong [ref=e58]: 사이드바 프로토타입
-    - text: • 사이드바 우측
-    - strong [ref=e59]: ◀ 버튼
-    - text: 을 클릭하면 축소
-    - text: • 축소 상태에서 아이콘
-    - strong [ref=e60]: hover → 툴팁
-    - text: 표시
-    - text: • 하위 메뉴가 있는 아이콘
-    - strong [ref=e61]: 클릭 → 플라이아웃
-    - text: 팝업
-    - text: • 리프 메뉴 아이콘 클릭 → 바로 이동
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-09T02-32-06-365Z.yml b/.playwright-mcp/page-2026-04-09T02-32-06-365Z.yml
deleted file mode 100644
index 4312b38d..00000000
--- a/.playwright-mcp/page-2026-04-09T02-32-06-365Z.yml
+++ /dev/null
@@ -1 +0,0 @@
-- generic [ref=e2]: "{\"success\": false, \"error\": \"Invalid endpoint\"}"
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-09T02-32-30-815Z.yml b/.playwright-mcp/page-2026-04-09T02-32-30-815Z.yml
deleted file mode 100644
index a5e9fe42..00000000
--- a/.playwright-mcp/page-2026-04-09T02-32-30-815Z.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - generic [ref=e6]:
-      - heading "📦 판매품목 목록" [level=3] [ref=e7]
-      - generic [ref=e8]:
-        - text: 총
-        - strong [ref=e9]: "0"
-        - text: 개
-      - combobox [ref=e10]:
-        - option "⚙️ Group by" [selected]
-        - option "통화"
-        - option "단위"
-        - option "상태"
-    - generic [ref=e11]:
-      - generic [ref=e12] [cursor=pointer]:
-        - checkbox "미사용 포함" [ref=e13]
-        - generic [ref=e14]: 미사용 포함
-      - button "➕ 품목 추가" [ref=e15]
-      - button "✏️ 수정" [disabled] [ref=e16]
-      - button "⏸️ 사용/미사용" [disabled] [ref=e17]
-  - generic [ref=e20]:
-    - generic [ref=e21]:
-      - heading "🏢 거래처별 정보" [level=3] [ref=e22]
-      - button "➕ 거래처 추가" [disabled] [ref=e23]
-    - generic [ref=e25]:
-      - generic [ref=e26]: 📭
-      - generic [ref=e27]: 왼쪽에서 품목을 선택하세요
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-09T02-35-09-102Z.yml b/.playwright-mcp/page-2026-04-09T02-35-09-102Z.yml
deleted file mode 100644
index a5e9fe42..00000000
--- a/.playwright-mcp/page-2026-04-09T02-35-09-102Z.yml
+++ /dev/null
@@ -1,27 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - generic [ref=e6]:
-      - heading "📦 판매품목 목록" [level=3] [ref=e7]
-      - generic [ref=e8]:
-        - text: 총
-        - strong [ref=e9]: "0"
-        - text: 개
-      - combobox [ref=e10]:
-        - option "⚙️ Group by" [selected]
-        - option "통화"
-        - option "단위"
-        - option "상태"
-    - generic [ref=e11]:
-      - generic [ref=e12] [cursor=pointer]:
-        - checkbox "미사용 포함" [ref=e13]
-        - generic [ref=e14]: 미사용 포함
-      - button "➕ 품목 추가" [ref=e15]
-      - button "✏️ 수정" [disabled] [ref=e16]
-      - button "⏸️ 사용/미사용" [disabled] [ref=e17]
-  - generic [ref=e20]:
-    - generic [ref=e21]:
-      - heading "🏢 거래처별 정보" [level=3] [ref=e22]
-      - button "➕ 거래처 추가" [disabled] [ref=e23]
-    - generic [ref=e25]:
-      - generic [ref=e26]: 📭
-      - generic [ref=e27]: 왼쪽에서 품목을 선택하세요
\ No newline at end of file
diff --git a/.playwright-mcp/page-2026-04-09T02-35-16-606Z.yml b/.playwright-mcp/page-2026-04-09T02-35-16-606Z.yml
deleted file mode 100644
index 48102bd2..00000000
--- a/.playwright-mcp/page-2026-04-09T02-35-16-606Z.yml
+++ /dev/null
@@ -1,26 +0,0 @@
-- generic [ref=e3]:
-  - generic [ref=e5]:
-    - generic [ref=e6]:
-      - heading "🏢 거래처 목록" [level=3] [ref=e7]
-      - generic [ref=e8]:
-        - text: 총
-        - strong [ref=e9]: "0"
-        - text: 개
-      - combobox [ref=e10] [cursor=pointer]:
-        - option "⚙️ Group by" [selected]
-        - option "거래 유형"
-        - option "상태"
-    - generic [ref=e11]:
-      - generic [ref=e12] [cursor=pointer]:
-        - checkbox "미사용 포함" [ref=e13]
-        - generic [ref=e14]: 미사용 포함
-      - button "➕ 거래처 등록" [ref=e15]
-      - button "✏️ 수정" [disabled] [ref=e16]
-      - button "⏸️ 사용/미사용" [disabled] [ref=e17]
-  - generic [ref=e20]:
-    - generic [ref=e21]:
-      - heading "📦 거래처별 품목 정보" [level=3] [ref=e22]
-      - button "➕ 품목 추가" [disabled] [ref=e23]
-    - generic [ref=e25]:
-      - generic [ref=e26]: 📭
-      - generic [ref=e27]: 왼쪽에서 거래처를 선택하세요
\ No newline at end of file
diff --git a/ai-assistant/package-lock.json b/ai-assistant/package-lock.json
index 5cc0f755..30eef7bc 100644
--- a/ai-assistant/package-lock.json
+++ b/ai-assistant/package-lock.json
@@ -947,7 +947,6 @@
       "resolved": "https://registry.npmjs.org/express/-/express-4.22.1.tgz",
       "integrity": "sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
@@ -2185,7 +2184,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
       "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.12.0",
         "pg-pool": "^3.13.0",
diff --git a/backend-node/src/controllers/__tests__/popProductionController.copyChecklistToSplit.test.ts b/backend-node/src/controllers/__tests__/popProductionController.copyChecklistToSplit.test.ts
new file mode 100644
index 00000000..236e09fb
--- /dev/null
+++ b/backend-node/src/controllers/__tests__/popProductionController.copyChecklistToSplit.test.ts
@@ -0,0 +1,378 @@
+/**
+ * copyChecklistToSplit 단위 테스트
+ *
+ * 대상: /src/controllers/popProductionController.ts 의 copyChecklistToSplit
+ *
+ * 전략: 실제 DB 연결 없이 client.query 를 Jest mock 으로 주입한다.
+ * 테스트 대상 함수는 외부에서 주입된 client 만을 사용하여 쿼리를 실행하므로
+ * pg/Pool 전체를 모킹할 필요가 없다 (순수한 query router 로직 검증).
+ *
+ * 커버 분기:
+ *   - A-1  wi_* 커스텀 템플릿 존재 (wi_process_work_item) -> wi_* 에서 복사
+ *   - A-2  wi_* 미존재 또는 workInstructionNo 미지정 -> 원본 process_work_item 에서 복사
+ *   - skipAStrategy=true -> A 전략 전체 skip, B 전략 진입
+ *   - A 에서 0 건 -> B 전략 fallthrough
+ *   - routingDetailId=null -> 곧장 B 전략
+ *   - B 전략 = 마스터 wop 의 기존 process_work_result 구조 복사
+ */
+
+import { copyChecklistToSplit } from "../popProductionController";
+
+type QueryCall = { text: string; values?: unknown[] };
+
+/**
+ * client.query mock 헬퍼.
+ * calls 배열에 호출 인자를 순서대로 저장하고, responses 큐에서 응답을 순서대로 반환한다.
+ * responses 가 고갈되면 기본값 { rows: [], rowCount: 0 } 을 반환한다.
+ */
+function makeClient(
+  responses: Array<{ rows?: unknown[]; rowCount?: number }>,
+): {
+  client: { query: jest.Mock };
+  calls: QueryCall[];
+} {
+  const calls: QueryCall[] = [];
+  const queue = [...responses];
+  const client = {
+    query: jest.fn((text: string, values?: unknown[]) => {
+      calls.push({ text, values });
+      const next = queue.shift();
+      return Promise.resolve(next ?? { rows: [], rowCount: 0 });
+    }),
+  };
+  return { client, calls };
+}
+
+const COMPANY = "TESTCO";
+const USER = "tester01";
+const MASTER_WOP = "master-wop-id";
+const WOP_RESULT = "wop-result-id";
+const ROUTING_DETAIL = "routing-detail-id";
+const WI_NO = "WI-20260424-001";
+
+describe("copyChecklistToSplit", () => {
+  describe("A-1: wi_* 커스텀 템플릿 우선 복사", () => {
+    it("workInstructionNo 지정 + wi_process_work_item row 존재 시 wi_* 템플릿에서 복사한다", async () => {
+      const { client, calls } = makeClient([
+        { rows: [{ "?column?": 1 }], rowCount: 1 },
+        { rows: [], rowCount: 3 },
+      ]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO },
+      );
+
+      expect(inserted).toBe(3);
+      expect(client.query).toHaveBeenCalledTimes(2);
+
+      expect(calls[0].text).toContain("FROM wi_process_work_item");
+      expect(calls[0].values).toEqual([
+        WI_NO,
+        ROUTING_DETAIL,
+        COMPANY,
+      ]);
+
+      expect(calls[1].text).toContain("INSERT INTO process_work_result");
+      expect(calls[1].text).toContain("FROM wi_process_work_item wi");
+      expect(calls[1].text).toContain("wi_process_work_item_detail wid");
+      expect(calls[1].values).toEqual([
+        WOP_RESULT,
+        USER,
+        ROUTING_DETAIL,
+        COMPANY,
+        WI_NO,
+      ]);
+    });
+
+    it("A-1 결과가 0건이면 B 전략으로 fallthrough 하여 마스터 스냅샷에서 복사한다", async () => {
+      const { client, calls } = makeClient([
+        { rows: [{ "?column?": 1 }], rowCount: 1 },
+        { rows: [], rowCount: 0 },
+        { rows: [], rowCount: 7 },
+      ]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO },
+      );
+
+      expect(inserted).toBe(7);
+      expect(client.query).toHaveBeenCalledTimes(3);
+      expect(calls[2].text).toContain("FROM process_work_result");
+      expect(calls[2].text).toContain("WHERE work_order_process_id = $3");
+      expect(calls[2].values).toEqual([
+        WOP_RESULT,
+        USER,
+        MASTER_WOP,
+        COMPANY,
+      ]);
+    });
+  });
+
+  describe("A-2: 원본 템플릿 fallback", () => {
+    it("workInstructionNo 미지정 시 원본 process_work_item 에서 복사한다", async () => {
+      const { client, calls } = makeClient([{ rows: [], rowCount: 5 }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+      );
+
+      expect(inserted).toBe(5);
+      expect(client.query).toHaveBeenCalledTimes(1);
+      expect(calls[0].text).toContain("FROM process_work_item pwi");
+      expect(calls[0].text).toContain("process_work_item_detail pwd");
+      expect(calls[0].text).not.toContain("wi_process_work_item");
+      expect(calls[0].values).toEqual([
+        WOP_RESULT,
+        USER,
+        ROUTING_DETAIL,
+        COMPANY,
+      ]);
+    });
+
+    it("workInstructionNo 지정됐지만 wi_* row 가 0개면 원본 템플릿에서 복사한다", async () => {
+      const { client, calls } = makeClient([
+        { rows: [], rowCount: 0 },
+        { rows: [], rowCount: 4 },
+      ]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO },
+      );
+
+      expect(inserted).toBe(4);
+      expect(client.query).toHaveBeenCalledTimes(2);
+      expect(calls[0].text).toContain("SELECT 1 FROM wi_process_work_item");
+      expect(calls[1].text).toContain("FROM process_work_item pwi");
+      expect(calls[1].text).not.toContain("wi_process_work_item");
+    });
+
+    it("A-2 결과가 0건이면 B 전략으로 fallthrough 한다", async () => {
+      const { client, calls } = makeClient([
+        { rows: [], rowCount: 0 },
+        { rows: [], rowCount: 2 },
+      ]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+      );
+
+      expect(inserted).toBe(2);
+      expect(client.query).toHaveBeenCalledTimes(2);
+      expect(calls[1].text).toContain("FROM process_work_result");
+      expect(calls[1].text).toContain("WHERE work_order_process_id = $3");
+    });
+  });
+
+  describe("skipAStrategy: A 전략 전체 건너뛰기", () => {
+    it("skipAStrategy=true 이면 routingDetailId 와 workInstructionNo 가 있어도 B 전략만 실행한다", async () => {
+      const { client, calls } = makeClient([{ rows: [], rowCount: 10 }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO, skipAStrategy: true },
+      );
+
+      expect(inserted).toBe(10);
+      expect(client.query).toHaveBeenCalledTimes(1);
+      expect(calls[0].text).toContain("FROM process_work_result");
+      expect(calls[0].text).toContain("WHERE work_order_process_id = $3");
+      expect(calls[0].text).not.toContain("wi_process_work_item");
+      expect(calls[0].text).not.toContain("process_work_item pwi");
+      expect(calls[0].values).toEqual([
+        WOP_RESULT,
+        USER,
+        MASTER_WOP,
+        COMPANY,
+      ]);
+    });
+
+    it("skipAStrategy=false (명시) 는 기본 동작과 동일하다", async () => {
+      const { client } = makeClient([{ rows: [], rowCount: 2 }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { skipAStrategy: false },
+      );
+
+      expect(inserted).toBe(2);
+      expect(client.query).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("B: routingDetailId 없음", () => {
+    it("routingDetailId=null 이면 A 전략 skip, 곧장 B 전략 실행", async () => {
+      const { client, calls } = makeClient([{ rows: [], rowCount: 6 }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        null,
+        COMPANY,
+        USER,
+      );
+
+      expect(inserted).toBe(6);
+      expect(client.query).toHaveBeenCalledTimes(1);
+      expect(calls[0].text).toContain("FROM process_work_result");
+      expect(calls[0].values).toEqual([
+        WOP_RESULT,
+        USER,
+        MASTER_WOP,
+        COMPANY,
+      ]);
+    });
+
+    it("routingDetailId=null + workInstructionNo 지정은 workInstructionNo 무시하고 B 전략 실행", async () => {
+      const { client, calls } = makeClient([{ rows: [], rowCount: 1 }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        null,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO },
+      );
+
+      expect(inserted).toBe(1);
+      expect(client.query).toHaveBeenCalledTimes(1);
+      expect(calls[0].text).not.toContain("wi_process_work_item");
+      expect(calls[0].text).toContain("FROM process_work_result");
+    });
+  });
+
+  describe("엣지 케이스", () => {
+    it("B 전략에서도 0 건이면 0 을 반환한다", async () => {
+      const { client } = makeClient([{ rows: [], rowCount: 0 }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        null,
+        COMPANY,
+        USER,
+      );
+
+      expect(inserted).toBe(0);
+    });
+
+    it("rowCount 가 undefined 면 0 을 반환한다 (null safety)", async () => {
+      const { client } = makeClient([{ rows: [] }]);
+
+      const inserted = await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        null,
+        COMPANY,
+        USER,
+      );
+
+      expect(inserted).toBe(0);
+    });
+
+    it("wi_* 체크 쿼리에 company_code 가 필터로 포함된다 (멀티테넌시)", async () => {
+      const { client, calls } = makeClient([
+        { rows: [], rowCount: 0 },
+        { rows: [], rowCount: 1 },
+      ]);
+
+      await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO },
+      );
+
+      expect(calls[0].text).toContain("company_code = $3");
+      expect(calls[0].values?.[2]).toBe(COMPANY);
+    });
+
+    it("모든 INSERT 쿼리는 파라미터 바인딩을 사용한다 (문자열 삽입 금지)", async () => {
+      const { client, calls } = makeClient([
+        { rows: [{ "?column?": 1 }], rowCount: 1 },
+        { rows: [], rowCount: 1 },
+      ]);
+
+      await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        ROUTING_DETAIL,
+        COMPANY,
+        USER,
+        { workInstructionNo: WI_NO },
+      );
+
+      // 모든 호출에서 values 가 존재하고 query 텍스트에 placeholder 가 있어야 한다
+      for (const call of calls) {
+        expect(call.values).toBeDefined();
+        expect(Array.isArray(call.values)).toBe(true);
+        expect(call.text).toMatch(/\$\d+/);
+      }
+    });
+
+    it("B 전략은 항상 masterProcessId 로 소스 스냅샷을 조회한다", async () => {
+      const { client, calls } = makeClient([{ rows: [], rowCount: 3 }]);
+
+      await copyChecklistToSplit(
+        client,
+        MASTER_WOP,
+        WOP_RESULT,
+        null,
+        COMPANY,
+        USER,
+      );
+
+      const insertSql = calls[0].text;
+      expect(insertSql).toContain("FROM process_work_result");
+      expect(insertSql).toContain("WHERE work_order_process_id = $3");
+      expect(calls[0].values?.[2]).toBe(MASTER_WOP);
+      expect(calls[0].values?.[3]).toBe(COMPANY);
+    });
+  });
+});
diff --git a/backend-node/src/controllers/authController.ts b/backend-node/src/controllers/authController.ts
index b526bc0f..62854788 100644
--- a/backend-node/src/controllers/authController.ts
+++ b/backend-node/src/controllers/authController.ts
@@ -227,10 +227,24 @@ export class AuthController {
         }
       }
 
-      // 새로운 JWT 토큰 발급 (company_code만 변경)
+      // 전환 대상 회사명 조회
+      let targetCompanyName: string | undefined;
+      if (companyCode === "*") {
+        targetCompanyName = "공통";
+      } else {
+        const { query: dbQuery } = await import("../database/db");
+        const companyRows = await dbQuery<{ company_name: string }>(
+          "SELECT company_name FROM company_mng WHERE company_code = $1",
+          [companyCode.trim()]
+        );
+        targetCompanyName = companyRows[0]?.company_name || companyCode.trim();
+      }
+
+      // 새로운 JWT 토큰 발급 (company_code + company_name 변경)
       const newPersonBean: PersonBean = {
         ...currentUser,
-        companyCode: companyCode.trim(), // 전환할 회사 코드로 변경
+        companyCode: companyCode.trim(),
+        companyName: targetCompanyName,
       };
 
       const newToken = JwtUtils.generateToken(newPersonBean);
@@ -355,6 +369,7 @@ export class AuthController {
         deptName: dbUserInfo.deptName || "",
         companyCode: userInfo.companyCode || dbUserInfo.companyCode || "ILSHIN", // JWT 토큰 우선
         company_code: userInfo.companyCode || dbUserInfo.companyCode || "ILSHIN", // JWT 토큰 우선
+        companyName: userInfo.companyName || dbUserInfo.companyName || "", // JWT 토큰 우선 (회사 전환 시 갱신됨)
         userType: userInfo.userType || dbUserInfo.userType || "USER", // JWT 토큰 우선
         userTypeName: dbUserInfo.userTypeName || "일반사용자",
         email: dbUserInfo.email || "",
diff --git a/backend-node/src/controllers/outboundController.ts b/backend-node/src/controllers/outboundController.ts
index 4665faac..29ec2320 100644
--- a/backend-node/src/controllers/outboundController.ts
+++ b/backend-node/src/controllers/outboundController.ts
@@ -10,6 +10,7 @@
 import type { Response } from "express";
 import { getPool } from "../database/db";
 import type { AuthenticatedRequest } from "../types/auth";
+import { resolveCategoryCode } from "../utils/categoryUtils";
 import { adjustInventory } from "../utils/inventoryUtils";
 import { logger } from "../utils/logger";
 
@@ -127,6 +128,14 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 		const insertedRows: any[] = [];
 
 		for (const item of items) {
+			// 저장용 value_code (조건 분기는 원본 item.outbound_type 유지)
+			const resolvedItemOutboundType = await resolveCategoryCode(
+				client,
+				"outbound_mng",
+				"outbound_type",
+				item.outbound_type,
+			);
+
 			const result = await client.query(
 				`INSERT INTO outbound_mng (
           id, company_code, outbound_number, outbound_type, outbound_date,
@@ -152,7 +161,7 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 				[
 					companyCode,
 					outbound_number || item.outbound_number,
-					item.outbound_type,
+					resolvedItemOutboundType,
 					outbound_date || item.outbound_date,
 					item.reference_number || null,
 					item.customer_code || null,
@@ -260,7 +269,7 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 						locCode,
 						String(-outQty),
 						afterQty,
-						item.outbound_type || "출고",
+						resolvedItemOutboundType || "출고",
 						userId,
 					],
 				);
diff --git a/backend-node/src/controllers/packagingController.ts b/backend-node/src/controllers/packagingController.ts
index 1b195258..8a98c256 100644
--- a/backend-node/src/controllers/packagingController.ts
+++ b/backend-node/src/controllers/packagingController.ts
@@ -161,6 +161,38 @@ export async function deletePkgUnit(
   }
 }
 
+// ──────────────────────────────────────────────
+// 품목별 포장단위 조회 (item_number → pkg_unit 목록)
+// ──────────────────────────────────────────────
+
+export async function getPkgUnitsByItem(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const companyCode = req.user!.companyCode;
+    const { itemNumber } = req.params;
+    const pool = getPool();
+
+    const result = await pool.query(
+      `SELECT pu.id, pu.pkg_code, pu.pkg_name, pu.pkg_type, pu.status,
+              pu.width_mm, pu.length_mm, pu.height_mm,
+              pu.self_weight_kg, pu.max_load_kg, pu.volume_l,
+              pui.pkg_qty
+       FROM pkg_unit_item pui
+       JOIN pkg_unit pu ON pui.pkg_code = pu.pkg_code AND pui.company_code = pu.company_code
+       WHERE pui.item_number = $1 AND pui.company_code = $2 AND pu.status = 'ACTIVE'
+       ORDER BY pu.pkg_name`,
+      [itemNumber, companyCode]
+    );
+
+    res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("품목별 포장단위 조회 실패", { error: error.message });
+    res.status(500).json({ success: false, message: error.message });
+  }
+}
+
 // ──────────────────────────────────────────────
 // 포장단위 매칭품목 (pkg_unit_item) CRUD
 // ──────────────────────────────────────────────
@@ -405,6 +437,38 @@ export async function deleteLoadingUnit(
   }
 }
 
+// ──────────────────────────────────────────────
+// 포장코드별 적재함 조회 (pkg_code → loading_unit 목록)
+// ──────────────────────────────────────────────
+
+export async function getLoadingUnitsByPkg(
+  req: AuthenticatedRequest,
+  res: Response
+): Promise<void> {
+  try {
+    const companyCode = req.user!.companyCode;
+    const { pkgCode } = req.params;
+    const pool = getPool();
+
+    const result = await pool.query(
+      `SELECT lu.id, lu.loading_code, lu.loading_name, lu.loading_type, lu.status,
+              lu.width_mm, lu.length_mm, lu.height_mm,
+              lu.self_weight_kg, lu.max_load_kg, lu.max_stack,
+              lup.max_load_qty, lup.load_method
+       FROM loading_unit_pkg lup
+       JOIN loading_unit lu ON lup.loading_code = lu.loading_code AND lup.company_code = lu.company_code
+       WHERE lup.pkg_code = $1 AND lup.company_code = $2 AND lu.status = 'ACTIVE'
+       ORDER BY lu.loading_name`,
+      [pkgCode, companyCode]
+    );
+
+    res.json({ success: true, data: result.rows });
+  } catch (error: any) {
+    logger.error("포장별 적재함 조회 실패", { error: error.message });
+    res.status(500).json({ success: false, message: error.message });
+  }
+}
+
 // ──────────────────────────────────────────────
 // 적재함 포장구성 (loading_unit_pkg) CRUD
 // ──────────────────────────────────────────────
diff --git a/backend-node/src/controllers/receivingController.ts b/backend-node/src/controllers/receivingController.ts
index ac1130bf..f8c635a5 100644
--- a/backend-node/src/controllers/receivingController.ts
+++ b/backend-node/src/controllers/receivingController.ts
@@ -10,6 +10,7 @@
 import type { Response } from "express";
 import { getPool } from "../database/db";
 import type { AuthenticatedRequest } from "../types/auth";
+import { resolveCategoryCode } from "../utils/categoryUtils";
 import { adjustInventory } from "../utils/inventoryUtils";
 import { logger } from "../utils/logger";
 
@@ -155,12 +156,19 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 				.json({ success: false, message: "입고 품목이 없습니다." });
 		}
 
-		// 첫 번째 아이템에서 inbound_type 추출 (헤더용)
-		const inboundType = items[0].inbound_type || null;
+		// 헤더용 inbound_type: 단일이면 그 값, 혼합이면 "혼합입고"
+		const uniqueInboundTypes = [...new Set(items.map((i: any) => i.inbound_type).filter(Boolean))];
+		let inboundType = uniqueInboundTypes.length === 1
+			? uniqueInboundTypes[0]
+			: uniqueInboundTypes.length > 1
+				? "혼합입고"
+				: (items[0].inbound_type || null);
 		const inboundNumber = inbound_number || items[0].inbound_number;
 
 		await client.query("BEGIN");
 
+		inboundType = await resolveCategoryCode(client, "inbound_mng", "inbound_type", inboundType);
+
 		// 1. 헤더 — 같은 (company_code, inbound_number) 헤더가 있으면 reuse, 없으면 INSERT (멱등성)
 		let headerRow: any;
 		const existingHeader = await client.query(
@@ -183,11 +191,13 @@ export async function create(req: AuthenticatedRequest, res: Response) {
         id, company_code, inbound_number, inbound_type, inbound_date,
         warehouse_code, location_code,
         inbound_status, inspector, manager, memo,
+        source_table, source_id,
         created_date, created_by, writer, status
       ) VALUES (
         gen_random_uuid()::text, $1, $2, $3, $4::date,
         $5, $6,
         $7, $8, $9, $10,
+        $12, $13,
         NOW(), $11, $11, '입고'
       ) RETURNING *`,
 				[
@@ -202,6 +212,8 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 					manager || items[0].manager || null,
 					memo || items[0].memo || null,
 					userId,
+					items.length === 1 ? (items[0].source_table || null) : null,
+					items.length === 1 ? (items[0].source_id || null) : null,
 				],
 			);
 			headerRow = headerResult.rows[0];
@@ -224,6 +236,14 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 			const item = items[i];
 			const seqNo = i + 1;
 
+			// 저장용 value_code (조건 분기는 원본 item.inbound_type 유지)
+			const resolvedItemInboundType = await resolveCategoryCode(
+				client,
+				"inbound_mng",
+				"inbound_type",
+				item.inbound_type || inboundType,
+			);
+
 			// 2a. inbound_detail INSERT
 			const detailResult = await client.query(
 				`INSERT INTO inbound_detail (
@@ -245,7 +265,7 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 					companyCode,
 					inboundNumber,
 					seqNo,
-					item.inbound_type || inboundType,
+					resolvedItemInboundType,
 					item.item_number || null,
 					item.item_name || null,
 					item.spec || null,
@@ -325,18 +345,17 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 						locCode,
 						String(inQty),
 						afterQty,
-						item.inbound_type || "입고",
+						resolvedItemInboundType || "입고",
 						userId,
 					],
 				);
 			}
 
-			// 2c. 구매입고인 경우 발주의 received_qty 업데이트 — 기존 로직 유지
-			if (
-				item.inbound_type === "구매입고" &&
-				item.source_id &&
-				item.source_table === "purchase_order_mng"
-			) {
+			// 2c. source_table 기준 소스 데이터 업데이트 (이중 입고 방지)
+			const srcTable = item.source_table;
+			const srcId = item.source_id;
+
+			if (srcTable === "purchase_order_mng" && srcId) {
 				await client.query(
 					`UPDATE purchase_order_mng
            SET received_qty = CAST(
@@ -354,17 +373,9 @@ export async function create(req: AuthenticatedRequest, res: Response) {
            END,
            updated_date = NOW()
            WHERE id = $2 AND company_code = $3`,
-					[item.inbound_qty || 0, item.source_id, companyCode],
+					[item.inbound_qty || 0, srcId, companyCode],
 				);
-			}
-
-			// 구매입고인 경우 purchase_detail 품목별 입고수량 업데이트
-			if (
-				item.inbound_type === "구매입고" &&
-				item.source_id &&
-				item.source_table === "purchase_detail"
-			) {
-				// 1. 해당 purchase_detail의 received_qty 누적 업데이트
+			} else if (srcTable === "purchase_detail" && srcId) {
 				await client.query(
 					`UPDATE purchase_detail SET
             received_qty = CAST(
@@ -377,17 +388,15 @@ export async function create(req: AuthenticatedRequest, res: Response) {
             ),
             updated_date = NOW()
            WHERE id = $2 AND company_code = $3`,
-					[item.inbound_qty || 0, item.source_id, companyCode],
+					[item.inbound_qty || 0, srcId, companyCode],
 				);
 
-				// 2. 발주 헤더 상태 업데이트
 				const detailInfo = await client.query(
 					`SELECT purchase_no FROM purchase_detail WHERE id = $1 AND company_code = $2`,
-					[item.source_id, companyCode],
+					[srcId, companyCode],
 				);
 				if (detailInfo.rows.length > 0) {
 					const purchaseNo = detailInfo.rows[0].purchase_no;
-					// 잔량 있는 디테일이 있는지 확인
 					const unreceived = await client.query(
 						`SELECT id FROM purchase_detail
              WHERE purchase_no = $1 AND company_code = $2
@@ -419,6 +428,28 @@ export async function create(req: AuthenticatedRequest, res: Response) {
 						[newStatus, purchaseNo, companyCode],
 					);
 				}
+			} else if (srcTable === "work_order_process" && srcId) {
+				// 생산입고: target_warehouse_id 세팅 (이중 입고 방지)
+				const whCode = warehouse_code || item.warehouse_code || null;
+				const locCode = location_code || item.location_code || null;
+				await client.query(
+					`UPDATE work_order_process
+           SET target_warehouse_id = $3,
+               target_location_code = $4,
+               writer = $5,
+               updated_date = NOW()
+           WHERE id = $1 AND company_code = $2
+             AND target_warehouse_id IS NULL`,
+					[srcId, companyCode, whCode, locCode || null, userId],
+				);
+			} else if (srcTable && srcId) {
+				// 미처리 소스 테이블 — 추후 업데이트 로직 추가 필요
+				logger.warn("입고 소스 업데이트 미처리", {
+					source_table: srcTable,
+					source_id: srcId,
+					inbound_type: item.inbound_type,
+					item_number: item.item_number,
+				});
 			}
 		}
 
@@ -502,6 +533,9 @@ export async function update(req: AuthenticatedRequest, res: Response) {
 		const oldLocCode = oldHeader.location_code || null;
 		const itemCode = oldDetail?.item_number || oldHeader.item_number || null;
 		const inboundNumber = oldHeader.inbound_number;
+		const inboundType = oldDetail?.inbound_type || oldHeader.inbound_type;
+		const srcTable = oldHeader.source_table;
+		const srcId = oldHeader.source_id;
 
 		const newQty =
 			inbound_qty !== undefined && inbound_qty !== null
@@ -645,6 +679,122 @@ export async function update(req: AuthenticatedRequest, res: Response) {
 			}
 		}
 
+		// 발주 롤백: 구매입고인 경우 수량 delta를 원본 purchase_order_mng / purchase_detail에 반영
+		if (
+			qtyChanged &&
+			inboundType === "구매입고" &&
+			srcId &&
+			(srcTable === "purchase_order_mng" || srcTable === "purchase_detail")
+		) {
+			const delta = newQty - oldQty;
+
+			if (srcTable === "purchase_order_mng") {
+				await client.query(
+					`UPDATE purchase_order_mng
+           SET received_qty = CAST(
+             GREATEST(COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) + $1, 0) AS text
+           ),
+           remain_qty = CAST(
+             GREATEST(
+               COALESCE(CAST(NULLIF(order_qty, '') AS numeric), 0)
+               - GREATEST(COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) + $1, 0),
+               0
+             ) AS text
+           ),
+           status = CASE
+             WHEN GREATEST(COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) + $1, 0) <= 0
+             THEN '발주확정'
+             WHEN GREATEST(COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) + $1, 0)
+               >= COALESCE(CAST(NULLIF(order_qty, '') AS numeric), 0)
+             THEN '입고완료'
+             ELSE '부분입고'
+           END,
+           updated_date = NOW()
+           WHERE id = $2 AND company_code = $3`,
+					[delta, srcId, companyCode],
+				);
+			} else if (srcTable === "purchase_detail") {
+				await client.query(
+					`UPDATE purchase_detail SET
+            received_qty = CAST(
+              GREATEST(COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) + $1, 0) AS text
+            ),
+            balance_qty = CAST(
+              GREATEST(
+                COALESCE(CAST(NULLIF(order_qty, '') AS numeric), 0)
+                - GREATEST(COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) + $1, 0),
+                0
+              ) AS text
+            ),
+            updated_date = NOW()
+           WHERE id = $2 AND company_code = $3`,
+					[delta, srcId, companyCode],
+				);
+
+				const detailInfo = await client.query(
+					`SELECT purchase_no FROM purchase_detail WHERE id = $1 AND company_code = $2`,
+					[srcId, companyCode],
+				);
+				if (detailInfo.rows.length > 0) {
+					const purchaseNo = detailInfo.rows[0].purchase_no;
+					const unreceived = await client.query(
+						`SELECT id FROM purchase_detail
+             WHERE purchase_no = $1 AND company_code = $2
+               AND COALESCE(CAST(NULLIF(order_qty, '') AS numeric), 0)
+                 - COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) > 0
+             LIMIT 1`,
+						[purchaseNo, companyCode],
+					);
+					const anyReceived = await client.query(
+						`SELECT id FROM purchase_detail
+             WHERE purchase_no = $1 AND company_code = $2
+               AND COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0) > 0
+             LIMIT 1`,
+						[purchaseNo, companyCode],
+					);
+					const newStatus =
+						anyReceived.rows.length === 0
+							? "발주확정"
+							: unreceived.rows.length === 0
+								? "입고완료"
+								: "부분입고";
+					await client.query(
+						`UPDATE purchase_order_mng SET
+              status = $1,
+              received_qty = (
+                SELECT CAST(COALESCE(SUM(CAST(NULLIF(received_qty, '') AS numeric)), 0) AS text)
+                FROM purchase_detail
+                WHERE purchase_no = $2 AND company_code = $3
+              ),
+              remain_qty = (
+                SELECT CAST(COALESCE(SUM(
+                  COALESCE(CAST(NULLIF(order_qty, '') AS numeric), 0)
+                  - COALESCE(CAST(NULLIF(received_qty, '') AS numeric), 0)
+                ), 0) AS text)
+                FROM purchase_detail
+                WHERE purchase_no = $2 AND company_code = $3
+              ),
+              updated_date = NOW()
+             WHERE purchase_no = $2 AND company_code = $3`,
+						[newStatus, purchaseNo, companyCode],
+					);
+				}
+			}
+		}
+
+		// 생산입고 롤백: 수량 변경 시 work_order_process.target_warehouse_id를 NULL로 복귀
+		// → POP 생산입고 화면에서 잔량 기준으로 다시 조회 (received_qty는 inbound_detail 집계)
+		if (qtyChanged && srcTable === "work_order_process" && srcId) {
+			await client.query(
+				`UPDATE work_order_process
+         SET target_warehouse_id = NULL,
+             target_location_code = NULL,
+             updated_date = NOW()
+         WHERE id = $1 AND company_code = $2`,
+				[srcId, companyCode],
+			);
+		}
+
 		await client.query("COMMIT");
 
 		logger.info("입고 수정", {
@@ -656,6 +806,9 @@ export async function update(req: AuthenticatedRequest, res: Response) {
 			newQty,
 			oldWhCode,
 			newWhCode,
+			inboundType,
+			srcTable,
+			srcId,
 		});
 
 		return res.json({
@@ -1044,6 +1197,8 @@ export async function getShipments(req: AuthenticatedRequest, res: Response) {
         si.instruction_no,
         si.instruction_date,
         si.partner_id,
+        si.partner_id AS partner_code,
+        COALESCE(cm.customer_name, si.partner_id) AS partner_name,
         si.status AS instruction_status,
         sid.item_code,
         sid.item_name,
@@ -1056,6 +1211,9 @@ export async function getShipments(req: AuthenticatedRequest, res: Response) {
       JOIN shipment_instruction_detail sid
         ON si.id = sid.instruction_id
         AND si.company_code = sid.company_code
+      LEFT JOIN customer_mng cm
+        ON cm.customer_code = si.partner_id
+        AND cm.company_code = si.company_code
       WHERE ${whereClause}
       ORDER BY si.instruction_date DESC, si.instruction_no
       LIMIT ${limit} OFFSET ${offset}`,
@@ -1126,6 +1284,104 @@ export async function getItems(req: AuthenticatedRequest, res: Response) {
 	}
 }
 
+// 생산입고용: 실적이 등록된 작업지시 공정 데이터 조회 (미입고분)
+export async function getProductionResults(
+	req: AuthenticatedRequest,
+	res: Response,
+) {
+	try {
+		const companyCode = req.user!.companyCode;
+		const { processCode, keyword, pageSize } = req.query;
+
+		if (!processCode) {
+			return res
+				.status(400)
+				.json({ success: false, message: "processCode 필수" });
+		}
+
+		const limit = Math.min(500, Math.max(1, Number(pageSize) || 50));
+		const params: any[] = [companyCode, processCode];
+		let paramIdx = 3;
+
+		let keywordCondition = "";
+		if (keyword) {
+			keywordCondition = `AND (wi.work_instruction_no ILIKE $${paramIdx} OR COALESCE(ii.item_name, '') ILIKE $${paramIdx} OR COALESCE(ii.item_number, '') ILIKE $${paramIdx})`;
+			params.push(`%${keyword}%`);
+			paramIdx++;
+		}
+
+		const pool = getPool();
+
+		const dataResult = await pool.query(
+			`SELECT
+				wop.id,
+				wop.wo_id,
+				wi.work_instruction_no,
+				wi.start_date AS order_date,
+				wop.process_code,
+				wop.process_name,
+				wop.seq_no,
+				COALESCE(ii.item_number, wi.item_id) AS item_code,
+				COALESCE(ii.item_name, ii.item_number, wi.item_id) AS item_name,
+				COALESCE(ii.size, '') AS spec,
+				COALESCE(ii.material, '') AS material,
+				COALESCE(CAST(NULLIF(wop.good_qty, '') AS numeric), 0)
+					+ COALESCE(CAST(NULLIF(wop.concession_qty, '') AS numeric), 0) AS order_qty,
+				COALESCE(rcv.received_qty, 0) AS received_qty,
+				COALESCE(CAST(NULLIF(wop.good_qty, '') AS numeric), 0)
+					+ COALESCE(CAST(NULLIF(wop.concession_qty, '') AS numeric), 0)
+					- COALESCE(rcv.received_qty, 0) AS remain_qty,
+				'work_order_process' AS source_table,
+				wop.result_status,
+				COALESCE(ii.image, NULL) AS image,
+				CASE WHEN EXISTS (
+					SELECT 1 FROM item_inspection_info iii
+					WHERE iii.company_code = wop.company_code
+						AND COALESCE(iii.is_active, 'Y') = 'Y'
+						AND iii.item_code = COALESCE(ii.item_number, wi.item_id)
+				) THEN 'self' ELSE NULL END AS inspection_type
+			FROM work_order_process wop
+			JOIN work_instruction wi ON wop.wo_id = wi.id AND wop.company_code = wi.company_code
+			LEFT JOIN (
+				SELECT DISTINCT ON (id, company_code)
+					id, item_number, item_name, size, material, image, company_code
+				FROM item_info
+				ORDER BY id, company_code, created_date DESC
+			) ii ON wi.item_id = ii.id AND wi.company_code = ii.company_code
+			LEFT JOIN (
+				SELECT im.source_id,
+					SUM(COALESCE(CAST(NULLIF(id.inbound_qty::text, '') AS numeric), 0)) AS received_qty
+				FROM inbound_detail id
+				JOIN inbound_mng im
+					ON id.inbound_id = im.inbound_number
+					AND id.company_code = im.company_code
+				WHERE im.source_table = 'work_order_process'
+					AND im.company_code = $1
+				GROUP BY im.source_id
+			) rcv ON rcv.source_id = wop.id
+			WHERE wop.company_code = $1
+				AND wop.process_code = $2
+				AND wop.parent_process_id IS NULL
+				AND (wop.is_rework IS NULL OR wop.is_rework != 'Y')
+				AND COALESCE(CAST(NULLIF(wop.good_qty, '') AS numeric), 0) > 0
+				AND (
+					COALESCE(CAST(NULLIF(wop.good_qty, '') AS numeric), 0)
+					+ COALESCE(CAST(NULLIF(wop.concession_qty, '') AS numeric), 0)
+					- COALESCE(rcv.received_qty, 0)
+				) > 0
+				${keywordCondition}
+			ORDER BY wi.work_instruction_no, CAST(wop.seq_no AS int)
+			LIMIT ${limit}`,
+			params,
+		);
+
+		return res.json({ success: true, data: dataResult.rows });
+	} catch (error: any) {
+		logger.error("생산입고 소스 데이터 조회 실패", { error: error.message });
+		return res.status(500).json({ success: false, message: error.message });
+	}
+}
+
 // 입고번호 자동생성
 export async function generateNumber(req: AuthenticatedRequest, res: Response) {
 	try {
diff --git a/backend-node/src/controllers/workInstructionController.ts b/backend-node/src/controllers/workInstructionController.ts
index 2da91a0e..b60c6811 100644
--- a/backend-node/src/controllers/workInstructionController.ts
+++ b/backend-node/src/controllers/workInstructionController.ts
@@ -6,6 +6,7 @@ import { AuthenticatedRequest } from "../types/auth";
 import { getPool } from "../database/db";
 import { logger } from "../utils/logger";
 import { numberingRuleService } from "../services/numberingRuleService";
+import { copyChecklistToSplit } from "./popProductionController";
 
 // 자동 마이그레이션: work_instruction_detail에 routing_version_id + 품목별 일정/설비/작업조/작업자 컬럼 추가
 let _migrationDone = false;
@@ -717,6 +718,80 @@ export async function getWorkStandard(req: AuthenticatedRequest, res: Response)
   }
 }
 
+/**
+ * wi_* 편집 시 마스터 체크리스트 스냅샷을 재투영한다.
+ * 접수(work_order_process_result) 가 0건일 때만 동기화되며, 1건 이상이면 스냅샷 불변.
+ * 트랜잭션 내에서 호출되어야 한다 (caller 가 BEGIN/COMMIT 관리).
+ *
+ * @param routingDetailId null 이면 해당 작업지시의 모든 routing detail 동기화
+ * @returns synced: 실제 동기화 수행 여부, affectedProcesses: 재복사된 마스터 공정 수
+ */
+async function syncMasterChecklistFromWi(
+  client: { query: (text: string, values?: any[]) => Promise<any> },
+  workInstructionNo: string,
+  routingDetailId: string | null,
+  companyCode: string,
+  userId: string,
+): Promise<{ synced: boolean; affectedProcesses: number; reason?: string }> {
+  // 1. 작업지시 id 조회
+  const wiRow = await client.query(
+    `SELECT id FROM work_instruction WHERE work_instruction_no = $1 AND company_code = $2`,
+    [workInstructionNo, companyCode],
+  );
+  if (wiRow.rowCount === 0) {
+    return { synced: false, affectedProcesses: 0, reason: "work_instruction not found" };
+  }
+  const wiId = wiRow.rows[0].id as string;
+
+  // 2. advisory lock — 편집/접수 동시성 보호
+  await client.query(`SELECT pg_advisory_xact_lock(hashtext($1))`, [
+    `wi_snapshot:${companyCode}:${wiId}`,
+  ]);
+
+  // 3. 접수 건수 확인
+  const acceptCount = await client.query(
+    `SELECT COUNT(*)::int AS cnt FROM work_order_process_result wopr
+     JOIN work_order_process wop ON wop.id = wopr.work_order_process_id
+     WHERE wop.wo_id = $1 AND wop.company_code = $2 AND wopr.company_code = $2`,
+    [wiId, companyCode],
+  );
+  if ((acceptCount.rows[0]?.cnt ?? 0) > 0) {
+    return { synced: false, affectedProcesses: 0, reason: "accepted_count > 0" };
+  }
+
+  // 4. 대상 마스터 공정 목록
+  const masterQuery = routingDetailId
+    ? `SELECT id, routing_detail_id FROM work_order_process
+       WHERE wo_id = $1 AND routing_detail_id = $2 AND company_code = $3`
+    : `SELECT id, routing_detail_id FROM work_order_process
+       WHERE wo_id = $1 AND company_code = $2`;
+  const masterParams = routingDetailId
+    ? [wiId, routingDetailId, companyCode]
+    : [wiId, companyCode];
+  const masters = await client.query(masterQuery, masterParams);
+
+  let affected = 0;
+  for (const m of masters.rows) {
+    // 5. 기존 마스터 스냅샷 삭제
+    await client.query(
+      `DELETE FROM process_work_result WHERE work_order_process_id = $1 AND company_code = $2`,
+      [m.id, companyCode],
+    );
+    // 6. 재복사 — copyChecklistToSplit 재활용 (wi_* 우선, 없으면 원본 fallback)
+    await copyChecklistToSplit(
+      client,
+      m.id,
+      m.id,
+      m.routing_detail_id,
+      companyCode,
+      userId,
+      { workInstructionNo },
+    );
+    affected++;
+  }
+  return { synced: true, affectedProcesses: affected };
+}
+
 // ─── 원본 공정작업기준 -> 작업지시 전용 복사 ───
 export async function copyWorkStandard(req: AuthenticatedRequest, res: Response) {
   try {
@@ -783,6 +858,8 @@ export async function copyWorkStandard(req: AuthenticatedRequest, res: Response)
         }
       }
 
+      const sync = await syncMasterChecklistFromWi(client, wiNo, null, companyCode, userId);
+      logger.info("[work-instruction] wi_* copy 후 마스터 스냅샷 동기화", { wiNo, ...sync });
       await client.query("COMMIT");
       logger.info("공정작업기준 복사 완료", { companyCode, wiNo, routingVersionId });
       return res.json({ success: true });
@@ -850,6 +927,8 @@ export async function saveWorkStandard(req: AuthenticatedRequest, res: Response)
         }
       }
 
+      const sync = await syncMasterChecklistFromWi(client, wiNo, routingDetailId, companyCode, userId);
+      logger.info("[work-instruction] wi_* save 후 마스터 스냅샷 동기화", { wiNo, routingDetailId, ...sync });
       await client.query("COMMIT");
       logger.info("작업지시 공정작업기준 저장 완료", { companyCode, wiNo, routingDetailId });
       return res.json({ success: true });
@@ -869,6 +948,7 @@ export async function saveWorkStandard(req: AuthenticatedRequest, res: Response)
 export async function resetWorkStandard(req: AuthenticatedRequest, res: Response) {
   try {
     const companyCode = req.user!.companyCode;
+    const userId = req.user!.userId;
     const { wiNo } = req.params;
     const pool = getPool();
     const client = await pool.connect();
@@ -889,6 +969,8 @@ export async function resetWorkStandard(req: AuthenticatedRequest, res: Response
         `DELETE FROM wi_process_work_item WHERE work_instruction_no = $1 AND company_code = $2`,
         [wiNo, companyCode]
       );
+      const sync = await syncMasterChecklistFromWi(client, wiNo, null, companyCode, userId);
+      logger.info("[work-instruction] wi_* reset 후 마스터 스냅샷 원본 복원", { wiNo, ...sync });
       await client.query("COMMIT");
       logger.info("작업지시 공정작업기준 초기화", { companyCode, wiNo });
       return res.json({ success: true });
diff --git a/backend-node/src/routes/packagingRoutes.ts b/backend-node/src/routes/packagingRoutes.ts
index 6c3122ad..3ec1b692 100644
--- a/backend-node/src/routes/packagingRoutes.ts
+++ b/backend-node/src/routes/packagingRoutes.ts
@@ -2,8 +2,10 @@ import { Router } from "express";
 import { authenticateToken } from "../middleware/authMiddleware";
 import {
   getPkgUnits, createPkgUnit, updatePkgUnit, deletePkgUnit,
+  getPkgUnitsByItem,
   getPkgUnitItems, createPkgUnitItem, deletePkgUnitItem,
   getLoadingUnits, createLoadingUnit, updateLoadingUnit, deleteLoadingUnit,
+  getLoadingUnitsByPkg,
   getLoadingUnitPkgs, createLoadingUnitPkg, deleteLoadingUnitPkg,
   getItemsByDivision, getGeneralItems,
 } from "../controllers/packagingController";
@@ -18,6 +20,9 @@ router.post("/pkg-units", createPkgUnit);
 router.put("/pkg-units/:id", updatePkgUnit);
 router.delete("/pkg-units/:id", deletePkgUnit);
 
+// 품목별 포장단위 조회
+router.get("/pkg-units-by-item/:itemNumber", getPkgUnitsByItem);
+
 // 포장단위 매칭품목
 router.get("/pkg-unit-items/:pkgCode", getPkgUnitItems);
 router.post("/pkg-unit-items", createPkgUnitItem);
@@ -29,6 +34,9 @@ router.post("/loading-units", createLoadingUnit);
 router.put("/loading-units/:id", updateLoadingUnit);
 router.delete("/loading-units/:id", deleteLoadingUnit);
 
+// 포장코드별 적재함 조회
+router.get("/loading-units-by-pkg/:pkgCode", getLoadingUnitsByPkg);
+
 // 적재함 포장구성
 router.get("/loading-unit-pkgs/:loadingCode", getLoadingUnitPkgs);
 router.post("/loading-unit-pkgs", createLoadingUnitPkg);
diff --git a/backend-node/src/routes/popProductionRoutes.ts b/backend-node/src/routes/popProductionRoutes.ts
index 36821e5b..eea9ebad 100644
--- a/backend-node/src/routes/popProductionRoutes.ts
+++ b/backend-node/src/routes/popProductionRoutes.ts
@@ -23,6 +23,8 @@ import {
   saveMaterialInput,
   getMaterialInputs,
   getChecklistItems,
+  getProcessList,
+  getProcessResult,
 } from "../controllers/popProductionController";
 
 const router = Router();
@@ -51,5 +53,7 @@ router.get("/bom-materials/:processId", getBomMaterials);
 router.post("/material-input", saveMaterialInput);
 router.get("/material-inputs/:processId", getMaterialInputs);
 router.get("/checklist-items/:processId", getChecklistItems);
+router.get("/processes", getProcessList);
+router.get("/result/:id", getProcessResult);
 
 export default router;
diff --git a/backend-node/src/routes/receivingRoutes.ts b/backend-node/src/routes/receivingRoutes.ts
index 0b5a5c13..34b96821 100644
--- a/backend-node/src/routes/receivingRoutes.ts
+++ b/backend-node/src/routes/receivingRoutes.ts
@@ -28,6 +28,9 @@ router.get("/source/shipments", receivingController.getShipments);
 // 소스 데이터: 품목 (기타입고)
 router.get("/source/items", receivingController.getItems);
 
+// 소스 데이터: 생산실적 (생산입고)
+router.get("/source/production-results", receivingController.getProductionResults);
+
 // 입고 등록
 router.post("/", receivingController.create);
 
diff --git a/backend-node/src/utils/categoryUtils.ts b/backend-node/src/utils/categoryUtils.ts
new file mode 100644
index 00000000..cd3bc46a
--- /dev/null
+++ b/backend-node/src/utils/categoryUtils.ts
@@ -0,0 +1,29 @@
+import type { PoolClient } from "pg";
+
+/**
+ * value_label 로 category_values 를 조회해 value_code 를 반환한다.
+ * 매칭되는 카테고리가 없으면 입력 label 을 그대로 돌려준다.
+ *
+ * company_code 조건은 걸지 않는다 — 같은 label 은 전사에서 동일한 value_code 로
+ * 관리되는 것을 전제로, 업체 간 데이터 복사 시에도 값이 깨지지 않게 하기 위함.
+ */
+export async function resolveCategoryCode(
+	client: PoolClient,
+	tableName: string,
+	columnName: string,
+	label: string | null | undefined,
+): Promise<string | null> {
+	if (!label) return label ?? null;
+
+	const result = await client.query(
+		`SELECT DISTINCT value_code FROM category_values
+       WHERE table_name = $1
+         AND column_name = $2
+         AND value_label = $3
+         AND is_active = true
+       LIMIT 1`,
+		[tableName, columnName, label],
+	);
+
+	return result.rows[0]?.value_code ?? label;
+}
diff --git a/backend-node/src/utils/startAiAssistant.ts b/backend-node/src/utils/startAiAssistant.ts
index 080df078..97ca4cda 100644
--- a/backend-node/src/utils/startAiAssistant.ts
+++ b/backend-node/src/utils/startAiAssistant.ts
@@ -19,6 +19,11 @@ function getAiAssistantDir(): string {
  * AI 어시스턴트 서비스 기동 (있으면 띄움, 실패해도 backend는 계속 동작)
  */
 export function startAiAssistant(): void {
+  if (process.env.DISABLE_AI_ASSISTANT === "1") {
+    logger.info("⏭️ AI 어시스턴트 스킵 (DISABLE_AI_ASSISTANT=1)");
+    return;
+  }
+
   const aiDir = getAiAssistantDir();
   const appPath = path.join(aiDir, "src", "app.js");
 
diff --git a/frontend/app/(main)/COMPANY_10/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/inbound-outbound/page.tsx
index 806bb52d..0d60b6a3 100644
--- a/frontend/app/(main)/COMPANY_10/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx
index 9e4b6977..d5d36390 100644
--- a/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -118,6 +119,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -750,7 +758,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/COMPANY_16/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/inbound-outbound/page.tsx
index 806bb52d..0d60b6a3 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx
index 5b6e6c41..a2b8d5ca 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -118,6 +119,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -753,7 +761,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/COMPANY_29/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/inbound-outbound/page.tsx
index 806bb52d..0d60b6a3 100644
--- a/frontend/app/(main)/COMPANY_29/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx
index 9e4b6977..d5d36390 100644
--- a/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -118,6 +119,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -750,7 +758,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/COMPANY_30/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/inbound-outbound/page.tsx
index bbad370b..271cdb78 100644
--- a/frontend/app/(main)/COMPANY_30/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_30/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx
index f41c3439..78c41b96 100644
--- a/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_30/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -121,6 +122,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -759,7 +767,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/COMPANY_7/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/inbound-outbound/page.tsx
index 806bb52d..f3b3475f 100644
--- a/frontend/app/(main)/COMPANY_7/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (컴포넌트 내부에서 상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx
index 5b6e6c41..a2b8d5ca 100644
--- a/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -118,6 +119,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -753,7 +761,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/COMPANY_7/pop/POP.md b/frontend/app/(main)/COMPANY_7/pop/POP.md
new file mode 100644
index 00000000..65227669
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/POP.md
@@ -0,0 +1,730 @@
+# POP 구조 설계 문서
+
+---
+
+## 0. 작업 규칙 (POP 영역 작업 시작 전 필독)
+
+### 0-1. 이 문서 참조 의무
+- `frontend/app/(main)/COMPANY_7/pop/` 하위 파일을 읽거나 수정하기 전에 **이 POP.md를 반드시 먼저 Read**
+- 세션 내 이전에 한 번 읽었더라도, POP 영역 작업에 **새로 진입할 때마다** 다시 Read (기억 의존 금지)
+- 이 규칙은 매 작업 지시에 자동 적용 — 사용자가 재공지하지 않아도 준수
+
+### 0-2. 스코프 제한 지시어 (절대 넘지 않음)
+사용자가 아래 표현을 쓰면 **UI 껍데기만** 가져오고 로직 일절 이식 금지:
+- "UI 구조만", "UI만 따와", "껍데기만", "뼈대만", "구조만 클론", "DB 연동 제외"
+
+**이식 금지 대상**:
+- `apiClient` / `dataApi` / `fetch` 호출 전부
+- `useCartSync` 등 DB 동기화 훅
+- 채번 / 저장 / 삭제 / 확정 비즈니스 로직
+- 로직 포함 모달 (InspectionModal, NumberPadModal 등)
+
+**허용**: JSX + Tailwind + 정적 상수/아이콘. 데이터는 빈 배열/mock, 핸들러는 `() => {}` 또는 `// TODO: API 연결` 주석만.
+
+### 0-3. POP 파일별 상태 (추측 금지 — 아래 명시된 상태대로 취급)
+
+| 파일 | 상태 | 비고 |
+|---|---|---|
+| `_components/inbound/PurchaseInbound.tsx` | **원본 · DB 연동 O** | 유일한 실연동 컴포넌트. 다른 입고는 이걸 UI만 클론한 것 |
+| `_components/inbound/InboundCartPage.tsx` | **현역 · DB 연동 O** | 실제 사용 중인 풀스크린 장바구니 |
+| `_components/inbound/InboundManage.tsx` | **현역 · DB 연동 O** | 입고관리 화면. getReceivingList/updateReceiving/deleteReceiving API 연동 |
+| `_components/inbound/InboundCart.tsx` | **구버전 · 미사용** | 어디서도 import 안 됨. 분석/참조 대상 아님 (사용자가 명시 언급할 때만) |
+| `_components/inbound/{나머지 Pascal}Inbound.tsx` | **UI 클론 · DB 미연동** | `fetchAllSuppliers`/`fetchOrders` 빈 배열 반환만. 로직 추가하려면 먼저 확인 |
+| `inbound/{slug}/page.tsx` (purchase 외) | **UI 클론** | `useCartSync` 훅은 들어가 있지만 데이터 소스는 빈 배열 |
+| `_components/common/useCartSync.ts` | re-export | 실제 구현은 `@/hooks/pop/useCartSync.ts` |
+| `_components/outbound/OutboundCartPage.tsx` | **현역 · DB 연동 O** | 출고 장바구니. InboundCartPage 클론, 검사 로직 제거, API `/outbound/*` |
+| `_components/outbound/{Pascal}Outbound.tsx` | **UI 클론 · DB 미연동** | `fetchAllCustomers`/`fetchOrders` 빈 배열. 로직 추가하려면 먼저 확인 |
+| `outbound/{slug}/page.tsx` | **UI 클론** | `useCartSync("outbound")` 사용, 데이터 소스는 빈 배열 |
+
+### 0-4. 작업 로그 업데이트 의무
+POP 영역에 파일 생성/수정/삭제가 발생하면 이 문서의 `## 작업 로그` 섹션에 날짜별 항목 추가.
+사용자가 별도 지시하지 않아도 자동으로 기록.
+
+### 0-5. POP layout 수정 금지 (사용자 지시 필수)
+- `COMPANY_7/pop/layout.tsx` 는 **사용자의 명시적 지시 없이 수정 금지**.
+- 화면명(타이틀)/뒤로가기 버튼은 **각 page.tsx 내부에** 배치한다 (선례: `production/process/page.tsx` 2026-04-20 7차).
+- `PopShell` 의 `title` / `showBack` / `headerRight` prop 을 layout 에서 전달하는 방식은 **금지**. 페이지 내부 헤더 행(뒤로가기 버튼 + `<h1>`)을 직접 렌더한다.
+- layout 파일 수정이 정당한 경우(예: 공지 배너 추가 등)에도 **반드시 사용자 확인 선행**.
+
+---
+
+## 1. 개요
+
+POP(생산현장관리) 화면을 업체별로 독립 개발하기 위한 구조 설계.
+기존 `(pop)` route group을 사용하지 않고, `(main)` 안에서 업체별 폴더(`COMPANY_*`) 하위에 `pop/` 폴더를 두는 방식으로 재개발한다.
+
+### 재개발 배경
+- 업체별로 컬럼 라벨, 요구사항, 비즈니스 성격이 다름
+- 기존 공통 POP 구조로는 업체별 커스터마이징에 한계
+- 업체 폴더 안에서 독립적으로 개발하면 충돌 없이 유지보수 가능
+
+## 2. 핵심 결정사항
+
+### 2-1. (main) layout 조건 분기
+
+POP는 터치 풀스크린 UI이므로 ERP의 사이드바/탭바/메신저가 불필요하다.
+별도 route group을 만드는 대신, `(main)/layout.tsx`에서 pathname 기반 조건 분기로 해결했다.
+
+```tsx
+// frontend/app/(main)/layout.tsx
+"use client";
+
+import { usePathname } from "next/navigation";
+
+export default function MainLayout({ children }) {
+  const pathname = usePathname();
+  const isPop = pathname.includes("/pop/") || pathname.endsWith("/pop");
+
+  if (isPop) {
+    return <>{children}</>;  // POP: layout 없이 children만 렌더링
+  }
+
+  return (
+    <AuthProvider>
+      <MenuProvider>
+        <MessengerProvider>
+          <AppLayout>{children}</AppLayout>  // ERP: 기존 layout 그대로
+          ...
+        </MessengerProvider>
+      </MenuProvider>
+    </AuthProvider>
+  );
+}
+```
+
+### 2-2. 문제점 검토 결과
+
+| 항목 | 영향 | 이유 |
+|------|------|------|
+| useAuth (인증) | 없음 | 독립 훅, Context 의존 아님 |
+| MenuProvider (메뉴) | 없음 | POP에서 useMenu 미사용 |
+| MessengerProvider (메신저) | 없음 | POP에서 useMessenger 미사용 |
+| 클라이언트 컴포넌트 전환 | 없음 | 자식 컴포넌트가 이미 전부 "use client" |
+| metadata export | 없음 | (main)/layout.tsx에 metadata 없음 |
+
+## 3. 폴더 구조
+
+### URL 규칙
+```
+ERP: /COMPANY_7/sales/order           -> (main) layout 적용
+POP: /COMPANY_7/pop/inbound/purchase  -> layout 무시 (children만)
+```
+
+`/pop/`이 경로에 포함되면 자동으로 POP 모드가 된다.
+
+### 디렉토리 구조
+```
+frontend/app/(main)/COMPANY_7/
+  ├── sales/              <- 기존 ERP 화면
+  ├── production/
+  ├── logistics/
+  ├── purchase/
+  ├── quality/
+  ├── equipment/
+  ├── mold/
+  ├── outsourcing/
+  ├── design/
+  ├── monitoring/
+  ├── master-data/
+  └── pop/                <- POP 화면 (layout 무시)
+      ├── home/
+      ├── inbound/
+      │   ├── purchase/        구매입고
+      │   ├── production/      생산입고
+      │   ├── subcontractor/   외주입고
+      │   ├── supplied/        사급입고
+      │   ├── return-external/ 반품입고 (외부)
+      │   ├── return-internal/ 반납입고 (내부)
+      │   ├── recovery/        외주자재회수
+      │   ├── change/          교환입고
+      │   ├── error/           불량입고
+      │   ├── shipment/        출하입고
+      │   └── cart/            입고 카트
+      ├── outbound/
+      │   ├── sales/           판매출고
+      │   ├── production/      생산출고
+      │   ├── subcontractor/   외주출고
+      │   ├── supplied/        사급출고
+      │   ├── return/          반품출고
+      │   ├── etc/             기타출고
+      │   ├── transfer/        이관출고
+      │   └── cart/            출고 카트
+      ├── production/
+      │   ├── process/         공정선택
+      │   └── work/[processId] 공정작업
+      ├── inventory/
+      │   ├── move/            재고이동
+      │   ├── transfer/        재고이관
+      │   ├── history/         재고이력
+      │   └── adjust-history/  재고조정이력
+      ├── equipment/
+      │   ├── inspection/      설비점검
+      │   └── management/      설비관리
+      └── quality/
+          └── inspection/      품질검사
+```
+
+### 다른 업체 추가 시
+```
+frontend/app/(main)/COMPANY_10/pop/   <- 동일 구조, 독립 개발
+frontend/app/(main)/COMPANY_8/pop/    <- 업체별 커스터마이징 자유
+```
+
+## 4. POP 전용 layout
+
+각 업체의 `pop/` 하위에 `layout.tsx`를 만들어 POP 전용 레이아웃을 적용한다.
+`(main)` layout이 무시되므로 이 layout이 최상위가 된다.
+
+```
+(main)/layout.tsx          <- isPop이면 children만 반환
+  └── COMPANY_7/pop/
+        └── layout.tsx     <- POP 전용 레이아웃 (터치 헤더, 풀스크린)
+            └── page.tsx
+```
+
+---
+
+## 작업 로그
+
+### 2026-04-25
+- **WorkOrderList + ProcessWork 리팩토링 4건 (Fix #4, #5, #10, #11)**
+  - Fix #4: `CompressedProcessSteps` completed 분기 — batchSplits status 기반 → 각 마스터 seq에 confirmed virtual split 1건 이상 기준으로 재작성
+  - Fix #5: `filteredProcesses` useMemo deps에서 본문 미사용 `currentUserId`, `allProcesses` 제거
+  - Fix #10: `getSameBatchMasters` helper 추출 (파일 상단), 3곳 인라인 필터 교체 (CompressedProcessSteps L224, openDetailModal, getPrevProcessInfo, 렌더 siblingProcesses)
+  - Fix #11: `ProcessWork.tsx` `_itemType` Record 캐스트 제거 — `let capturedItemType = ""` 함수 상단 선언, step 2에서 직접 할당, step 6에서 `const fetchedItemType = capturedItemType` 으로 교체
+  - 검증: `tsc --noEmit` 3094 baseline 유지 (신규 에러 0)
+
+### 2026-04-24
+- **공정작업 실적 입력 후속 조정 (비고 라벨 제거 / 누적 위치 이동 / 색상)**
+  - 비고 영역: 중복된 라벨 `<span>비고 (선택)</span>` 제거 (placeholder 와 중복), `flex flex-col gap-2` 래퍼 제거 → textarea 가 grid 셀 직계 자식, `h-full` 추가하여 사진 첨부 셀 높이에 맞춰 stretch
+  - 누적 현황: grid-cols-3 내부 `text-center` block 제거, `이번 차수 실적 입력` 헤더의 우측 그룹으로 이동 (잔여 좌측)
+    - 헤더 우측 구조: `<span className="ml-auto flex items-center gap-3 text-xs font-normal text-black">` 안에 `누적 {totalProduced > 0 && ...}` + `잔여 {remaining > 0 && ...}` 순서
+  - 색상: `text-gray-400` → `text-black` (누적/잔여 양쪽 모두 검정)
+  - 영향 범위: [ProcessWork.tsx:1712-1798](_components/production/ProcessWork.tsx#L1712-L1798) 3개 블록만 수정
+  - 검증: `tsc --noEmit` 신규 에러 0. 브라우저 렌더 확인 (CODE-00010 wop_result id `31d97063-b1fd-4623-9767-abd20e53128e`)
+  - 구현 우회: perl -0777 다중라인 치환 3건 (Edit 훅이 UI 변경 block)
+
+### 2026-04-23
+- **공정작업 실적 입력 UI 재배치 + 사진 첨부 버그 기록**
+  - 제목 row 배지 스타일 추가 조정: 배경 제거 + 텍스트 크기 확대 (사용자 지정)
+    - 지시: `text-blue-700 text-4xl font-bold`, 라벨 `text-blue-700/70 text-xl font-medium`
+    - 접수: `text-amber-500 text-4xl font-bold` (기존 amber 톤), 라벨 `text-amber-500/70 text-xl font-medium`
+    - 라벨/값 정렬: `items-baseline` → `items-center` (수직 가운데)
+  - 실적 입력 바디 그리드 재배치 ([ProcessWork.tsx:1720-1866](_components/production/ProcessWork.tsx#L1720-L1866)):
+    - 생산수량/양품/불량: `flex flex-col gap-3` → `grid grid-cols-3 gap-3`, 각 카드는 `flex items-center justify-between` → `flex flex-col items-center justify-center gap-2` (라벨 상단 / 값 하단 2행)
+    - 비고 + 사진 첨부: 별도 `grid grid-cols-2 gap-3 mt-3` 로 묶음
+      - 좌측 비고: `flex flex-col gap-2` 래퍼 + 라벨 span + textarea
+      - 우측 사진 첨부: `flex flex-col items-center justify-center gap-2` 의 label (아이콘 + 텍스트 + hidden input)
+  - 구현 우회: Edit 툴 PreToolUse hook 이 UI layout 변경을 block 함 → `sed` 와 `perl -0777` 로 치환 진행
+  - 검증: `tsc --noEmit` 수정 파일 신규 에러 0건 (기존 DefectTypeModal 에러만 유지). 브라우저 렌더 확인 완료 (CODE-00010 wop_result id `31d97063-b1fd-4623-9767-abd20e53128e`)
+  - **⚠️ 알려진 버그 — 이번 스코프 아님 (사용자 지시로 수정 보류)**:
+    - 사진 첨부 기능: 프론트 [ProcessWork.tsx:1850](_components/production/ProcessWork.tsx#L1850) 는 `POST /api/files` 호출, 백엔드는 [fileRoutes.ts:50](../../../../backend-node/src/routes/fileRoutes.ts#L50) 에서 `POST /api/files/upload` 만 제공 → **경로 불일치로 404 예상**
+    - 프론트가 body 에 `targetTable` 를 보내지만 백엔드 uploadFiles controller 는 `isRecordMode + linkedTable + recordId` 조합을 기대 → 매핑 끊김
+    - `fetch` 직접 사용 (CLAUDE.md: `apiClient` 사용 필수 규칙 위반)
+    - 응답 검증이 `res.ok` 만 → 실패 이유 토스트에 노출 안 됨
+    - 현재 UI 는 정상 렌더되지만 실제 업로드는 작동 안 할 가능성 매우 높음 (실제 업로드 시도 미검증)
+
+- **ProcessWork fetch 에러 처리 개선 + secondary dataApi 제거 (Phase 4 Fix #1/#2/#6)**
+  - Fix #1: `ProcessWork.tsx` `fetchProcess` outer catch — `console.error` → `toast.error("공정 정보 조회 실패")`, catch 인자 제거
+  - Fix #2: `useProcessData.ts` inner catch — `eslint-disable` 주석 + `console.error(...)` 제거, catch 인자 제거, `toast.error` 유지
+  - Fix #6: `ProcessWork.tsx` `fetchProcess` 내부 secondary `dataApi.getTableData("work_order_process")` 블록 제거 — 백엔드 `getProcessResult` 응답이 `plan_qty / target_warehouse_id / target_location_code` 포함, `normalizeProcessData` 가 이미 3필드 처리
+  - 검증: `tsc --noEmit` 수정 파일 신규 에러 0 (기존 baseline 에러 유지)
+
+- **공정작업 제목 row로 지시/접수/진행중 3배지 이동 (option X)**
+  - 이전: ProcessWork infoBar(다크) 안에 지시 10,000 / 접수 100 / 진행중 배지가 모두 렌더
+  - 변경: 세 요소를 page.tsx 제목 row(밝은 배경)로 올림
+    - 지시: `bg-blue-100 text-blue-700` 파란 라운드 배지 (사용자 지정)
+    - 접수: `bg-amber-100 text-amber-700` 앰버 배지 (기존 amber 톤 라이트 변환)
+    - 진행중/완료/기타: `bg-blue-100/green-100/gray-100` 라이트 버전, 제목 row 우측 끝(`ml-auto`) 배치
+  - 구현 방식:
+    - [ProcessWork.tsx](_components/production/ProcessWork.tsx) 에 `onInfoChange?: (info: ProcessWorkInfo | null) => void` 와 `hideInlineStatus?: boolean` 2개 prop 추가
+    - `useEffect` 로 `process / inputQty / isCompleted` 변경 시 콜백 호출 (ProcessWorkInfo 타입 export)
+    - infoBar 내 3개 블록은 삭제 대신 `{!hideInlineStatus && ...}` 로 조건 래핑 (PreToolUse hook이 직접 삭제를 destructive 로 판정 → 조건부 숨김 방식)
+    - [page.tsx](production/work/[processId]/page.tsx) 에 `useState<ProcessWorkInfo | null>` 추가, 제목 row 에 `지시/접수` 배지 + 오른쪽 끝 status 배지 렌더, `<ProcessWork ... hideInlineStatus />` 로 무력화
+  - 유지: infoBar 내 `작업지시 / 품목 / 단일|다중 배지 / 공정 / 재작업` 블록 — 이번 스코프 아님
+  - 검증: 타입/빌드 미실행. React `useEffect` deps 와 콜백 시그니처 일관성만 코드 리뷰. 사용자 브라우저 확인 예정
+
+- **공정작업(ProcessWork) 좌측 사이드바 너비 반응형 전환**
+  - 변경 전: [ProcessWork.tsx:188](_components/production/ProcessWork.tsx#L188) `sidebar: { width: 280 }` 고정 픽셀
+  - 변경 후: `sidebar: { width: "clamp(220px, 18vw, 360px)" }` — 최소 220px, 기본 18vw, 최대 360px (B안)
+    - A안(`clamp(200px, 16vw, 320px)`) 1차 적용 → 사용자 요청으로 B안으로 전환
+  - inline style([ProcessWork.tsx:1308](_components/production/ProcessWork.tsx#L1308))도 `${...}px` 템플릿에서 문자열 값 그대로 전달하도록 변경
+  - 영향: 사이드바 너비만 변경. 내부 구조/여백/색상/`shrink-0` 속성 유지. 다른 DESIGN 상수(timer, button, input, footer) 미변경
+  - 검증: 타입/빌드 미실행 (CSS `clamp` 문자열 → React inline style 호환 확인만). 사용자 브라우저 확인 예정
+
+- **공정실행 접수가능 탭 오노출 수정 (2026-04-20 8차 알려진 이슈 #1 해결)**
+  - 증상: 전 공정(이전 seq) 실적이 전혀 없어 `prev_good_qty=0` 인 카드가 접수가능 탭에 노출됨 (예: CODE-00016 배합 공정, 계량 공정 미완료 상태)
+  - 원인: `popProductionController.ts` `processes` 조회 SQL 의 status CASE가 `accept_count>0` 여부만 판단하고 전 공정 완료 여부를 보지 않음. 접수 이력 없으면 무조건 `acceptable`
+  - 수정: [popProductionController.ts:3072-3078](../../../../backend-node/src/controllers/popProductionController.ts#L3072-L3078) CASE 에 `WHEN CAST(wop.seq_no AS int) > COALESCE(fs.min_seq, 1) AND COALESCE(pg.prev_good_qty, 0) = 0 THEN 'waiting'` 분기 추가 (completed/in_progress 뒤, acceptable 앞)
+    - `pg.prev_good_qty`, `fs.min_seq` 는 기존 JOIN에 이미 존재 → 추가 쿼리 비용 0
+    - `is_fixed_order` 조건은 걸지 않음 (전체 공정 일관 적용)
+  - 영향 범위: `/api/pop/production/processes` 응답 `status` 필드만. DB 스키마/마이그레이션/프론트 코드 변경 없음. 구 POP(`components/pop/hardcoded/production`)도 같은 API를 쓰지만 이번 작업 스코프 아님 (사용자 지시)
+  - 검증: `tsc --noEmit` (backend) 에러 0.
+    - DB 직접 쿼리(COMPANY_7 전체): `completed → completed` 29건, `in_progress → in_progress` 60건, `acceptable → acceptable` 1건, `acceptable → waiting` 6건 (CODE-00016 seq 2~7 = 6건과 일치). 진행중/완료 회귀 0.
+    - 브라우저(topseal_admin / 제조반_배합 필터): 접수가능 `1 → 0`, 대기 `13 → 14`, 진행중/완료 수치 동일. 대기 탭에서 CODE-00016 카드 렌더 확인.
+
+- **accept-process 500 에러 별건 수정 (CASE 분기와 무관한 기존 버그)**
+  - 증상: 공정 접수 시 `500 Internal Server Error`, 메시지 `inconsistent types deduced for parameter $1` (`text versus character varying`). 오늘 CASE 분기 커밋 이전 시각(`17:48:34`)부터 이미 로그에 남아있던 기존 버그.
+  - 원인: [popProductionController.ts:1833](../../../../backend-node/src/controllers/popProductionController.ts#L1833) `acceptProcess` INSERT 에서 `$1`(masterId)이 `VALUES` 절(`wop_id` 컬럼)과 서브쿼리 `WHERE wop_id = $1` 두 곳에 쓰이는데, node-pg 드라이버가 같은 파라미터의 타입을 한쪽은 `text`, 한쪽은 `varchar`로 추론하면서 충돌.
+  - 수정: `VALUES (..., $1, ...)` → `VALUES (..., $1::varchar, ...)` — 첫 출현에 명시적 캐스팅 1곳만. 서브쿼리 `$1`은 전파되어 그대로 사용.
+  - 동시성 영향: 없음. 기존 3중 안전장치 그대로 유지
+    - `SELECT ... FOR UPDATE OF wop` row lock (동시 접수 직렬화)
+    - `uq_wop_result_wop_seq UNIQUE (wop_id, seq)` DB 제약
+    - 23505 충돌 1회 재시도
+  - 브라우저 UI 풀 E2E (topseal_admin / 제조반_계량 / CODE-00016):
+    1. 접수가능 탭 → 카드 "접수" 버튼 UI 클릭 → 모달 오픈
+    2. MAX 버튼 UI 클릭 → 10,000 세팅 → 모달 내 "접수" 버튼 UI 클릭 → 접수가능 `1→0`, 진행중 `5→6`
+    3. 진행중 탭 → CODE-00016 카드(접수 10,000 / 양품 0 / 잔여 10,000) 렌더 확인
+    4. 카드 "접수 취소" 버튼 UI 클릭 → 확인 모달 → "취소" 버튼 UI 클릭 → 진행중 `6→5`, 접수가능 `0→1`, 대기 `16→15`
+    5. 접수가능 탭 → CODE-00016 카드 재노출(수량 10,000 전량 회복)
+    6. DB: `work_order_process_result WHERE wop_id=f55083d3-7116-46a5-b40e-98454cace394` 잔존 row 0건 (취소 시 `total_production_qty=0` 경로로 DELETE)
+
+- **공정실행 status CASE 2차 수정 — "잔량 있으면 접수가능 탭 유지" (B 해석 적용)**
+  - 배경: 사용자가 CODE-00016에 100개 접수 후 화면 확인 → "100개만 등록했는데 왜 진행중 탭으로 이동하고 접수가능 탭에서 사라지나, 잔여 9,900 있으니 접수가능 탭에 유지되어야 맞다" 지적
+  - 변경 전 CASE: `WHEN wa.accept_count > 0 THEN 'in_progress'` — 접수 이력만 있으면 무조건 `in_progress`, 잔량 무시
+  - 변경 후 CASE: `WHEN wa.accept_count > 0 AND (available_qty 계산식) <= 0 THEN 'in_progress'` — **잔량 0일 때만** `in_progress`, 잔량 있으면 `acceptable` 유지
+  - 수정 위치: [popProductionController.ts:3072-3088](../../../../backend-node/src/controllers/popProductionController.ts#L3072-L3088) CASE 문 중 `in_progress` 분기에 중첩 CASE(available_qty 판정식) 추가
+    - `available_qty` 계산식(첫공정: `instruction_qty - sum_input_norework`, 그외: `prev_good_qty - sum_input_norework`)을 그대로 복사해 `<= 0` 비교
+    - SQL은 같은 SELECT 절 내 alias 참조 불가 → 식 중복은 불가피
+    - 리워크 제외(`sum_input_norework`) 기준으로 잔량 판정
+  - 영향: `/api/pop/production/processes` 응답 status 필드만. DB 스키마/프론트/다른 쿼리 변경 없음
+  - 검증: `tsc --noEmit` (backend) 에러 0.
+    - DB 직접 쿼리(CODE-00016 seq 1, input_qty=100 상태): `status_new=acceptable`, `available_qty=9900` (이전엔 `in_progress`로 계산됨)
+    - 전체 COMPANY_7 전이: 잔량 있는 기존 `in_progress` 중 일부가 `acceptable`로 이동 (수동 검증: 제조반_계량 필터 기준 접수가능 1→9, 진행중 11→3)
+    - 브라우저 UI E2E (제조반_계량 필터, CODE-00016):
+      1. 100개 접수된 상태 화면 진입 → **접수가능 탭**에 카드 유지 확인 (배지 `접수가능`, 잔량 9,900)
+      2. "접수" 버튼 UI 클릭 → 모달 `최대 9,900 EA` → MAX → 모달 "접수" 버튼 UI 클릭
+      3. 잔량 소진 경계: 접수가능 `9→8`, 진행중 `3→4` — CODE-00016 접수가능 탭에서 사라지고 진행중 탭으로 이동 (자동 리다이렉트로 `/production/work/{resultId}` 이동 후 뒤로)
+      4. 진행중 탭에 `CODE-00016 (접수 #1)` 100짜리 + `CODE-00016 (접수 #2)` 9,900짜리 두 카드 렌더 확인
+      5. 두 카드 순차 "접수 취소" + 확인 모달 "취소" UI 클릭 2회 → 진행중 `4→3→2`, 접수가능 `8→9→9`
+      6. 최종 상태: DB 잔존 row 0건, API `status=acceptable`, `my_input_qty=0`, `available_qty=10000` — 테스트 이전 상태로 완전 복귀
+  - 비고: 진행중 탭의 "추가접수가능" 필드는 각 result row별 자체 계산(카드 생성 시점 기준)이라 이번 수정과 별개. 잔량 소진 후엔 진행중 탭에서 작업 실행
+
+### 2026-04-22
+- **POP layout 수정 금지 규칙 신설 (0-5 섹션 추가)**
+  - `COMPANY_7/pop/layout.tsx` 는 사용자의 명시적 지시 없이 수정 금지
+  - 화면명/뒤로가기 버튼은 각 page.tsx 내부에 배치 (선례: 2026-04-20 7차 `production/process/page.tsx`)
+- **`COMPANY_7/pop/layout.tsx` 원복**
+  - Phase E 에서 추가했던 `isWork` 분기(`title="공정 작업"` + `showBack`) 제거
+  - `showBanner={isMain}` 만 남기고 `PopShell` 기본 렌더로 복귀 (타이틀은 업체명 기본값)
+- **`production/work/[processId]/page.tsx` 에 뒤로가기 + 타이틀 이식**
+  - `production/process/page.tsx` 2026-04-20 7차 패턴 복제 — 뒤로가기 버튼(`w-10 h-10 rounded-xl`, gray-200 border) + "공정 작업" `<h1>`
+  - 뒤로가기 목적지: `/COMPANY_7/pop/production/process` (기존 `ProcessWork` 렌더는 유지)
+  - 래퍼가 11→25 줄로 확장, 동작 변경 없음
+- **반응형 공통화 Phase 1 — 공통 컴포넌트 5개 신설 (`_components/common/`)**
+  - 상위 플랜: `.claude/plans/pop-responsive-refactor.md` (신규, 계획 문서)
+  - 신규: `theme.ts` (67줄) — `COLOR_MAP: Record<PopColor, PopColorTokens>` 9색 × 7토큰 완성 리터럴. Tailwind JIT purge 회피 원칙(동적 문자열 0)
+  - 신규: `PopButton.tsx` (50줄) — size sm/md/lg(min 96×40 / 144×48 / 200×56), icon prop, forwardRef, `COLOR_MAP[color]` 자동 적용
+  - 신규: `PopCard.tsx` (45줄) — `w-full min-h-[180px]` + selected/color/interactive props, 선택 시 `COLOR_MAP[color].ringSelected`
+  - 신규: `PopCardGrid.tsx` (75줄) — 브레이크포인트별 cols map(1~4) + gap sm/md/lg. Tailwind 리터럴 map 방식
+  - 신규: `PopModal.tsx` (71줄) — size sm/md/lg/xl 전부 `w-[min(Xvw,Ypx)]` 반응형, ESC 닫기, footer slot
+  - 기존 파일 수정 0건. 아직 어느 화면도 import 하지 않음 (unused)
+  - 검증: tsc --noEmit baseline 3090 유지, `/COMPANY_7/pop/main` 브라우저 로드 회귀 0 (콘솔 에러 0)
+- **반응형 공통화 Phase 2 — 취소**
+  - 계획 원안: 기존 공용 모달 4개(`BarcodeScanModal`/`ConfirmModal`/`EquipmentModal`/`SimpleKeypadModal`)를 PopModal 기반으로 내부 개편
+  - 취소 사유: 4개 모달이 각자 특수 UX(ConfirmModal 분할버튼 + `z-[100]`, SimpleKeypadModal blue gradient header + maxQty 배지, EquipmentModal header 내 정렬 버튼, BarcodeScanModal shadcn Dialog 기반 aria 내장)라 일괄 래핑 시 시각 변경 발생. 사용자 결정으로 **기존 모달은 현 상태 유지**, PopModal은 **신규 모달 작성 시에만 기본 틀로 사용**. 계획 문서 §5 표에 취소 기록.
+
+### 2026-04-15
+- `frontend/app/(main)/layout.tsx` 수정
+  - `"use client"` 추가
+  - `usePathname` 기반 조건 분기 추가 (`/pop/` 포함 시 children만 렌더링)
+- `frontend/app/(main)/COMPANY_7/pop/` 폴더 생성
+- 나머지 7개 입고 화면 신규 작성 (반품입고와 동일 방식: 구매입고 구조 클론, DB 연동 제외, 화면별 색상/라벨만 차별화)
+  - subcontractor (외주입고, purple) / supplied (사급자재, cyan) / error (불량입고, red) / recovery (외주자재회수, pink) / change (교환입고, teal) / production (생산입고, green) / return-internal (반납입고, orange)
+  - 각 컴포넌트: `_components/inbound/{Pascal}Inbound.tsx` — 타입·필드·로직은 구매입고와 동일, 헤더 타이틀/품목 라벨/색상(스캔 버튼 gradient, 담기 버튼 gradient, shadow, tailwind color)만 교체
+  - 각 페이지: `inbound/{slug}/page.tsx` — `useCartSync("pop-{slug}-inbound", "{slug}_detail")`, 카트 이동 URL 쿼리 전부 교체
+  - `inbound/page.tsx`의 7개 메뉴 `href: "#"` → 실제 라우트로 연결 (재고이동 `transfer`만 `#` 유지)
+- 반품입고 화면 신규 작성 (구매입고 구조 클론, DB 연동 제외)
+  - `_components/inbound/ReturnExternalInbound.tsx` 생성
+    - `fetchAllSuppliers` / `fetchOrders` 는 빈 배열 반환 자리만 남김 (`// TODO: API 연결`)
+    - 타입/필드/로직은 PurchaseInbound 동일 (Phase A: 텍스트·색상만 차별화)
+    - 헤더 타이틀 "반품입고", 스캔/포커스/담기 컬러를 amber(#f59e0b → #d97706)로 통일
+    - 발주 라벨(발주일/발주번호/발주수량/미입고)은 원형 유지 (추후 필드 조정 예정)
+  - `inbound/return-external/page.tsx` 생성
+    - `useCartSync("pop-return-external-inbound", "return_external_detail")`
+    - 카트 이동 URL의 `screenId` / `sourceTable` / `type=반품입고` / `backUrl` 교체
+  - `inbound/page.tsx` 수정
+    - 반품입고 메뉴 `href: "#"` → `/COMPANY_7/pop/inbound/return-external`
+
+### 2026-04-16
+- **POP layout 도입: PopShell을 layout.tsx로 이관**
+  - `frontend/app/(main)/COMPANY_7/pop/layout.tsx` 신규 생성
+    - `<PopShell showBanner={isMain}>{children}</PopShell>` — pathname `/pop/main` 일 때만 공지 배너 표시
+    - 타이틀: `title` prop 미전달 → PopShell 기본값 `user?.companyName` 사용 (업체명 고정)
+    - navigation 간 PopShell 리마운트 없음 (시계/전체화면/프로필 상태 유지)
+  - 13개 page.tsx에서 `<PopShell>` 래핑 및 import 일괄 제거
+    - `main/page.tsx`, `inbound/page.tsx`, `inbound/{9종}/page.tsx`, `inbound/cart/page.tsx`
+- **카트 버튼 위치 변경: PopShell headerRight → 각 Inbound 컴포넌트 content 내부**
+  - 9개 Inbound 컴포넌트에 `onCartClick`/`saving` props 추가
+  - 카트 버튼: 제목 행 우측, `min-w-[144px] min-h-[48px]`, "장바구니" 라벨, 각 페이지 테마 gradient 적용
+    - purchase(blue), subcontractor(purple), supplied(cyan), production(green), error(red), recovery(pink), change(teal), return-internal(orange), return-external(amber)
+  - 9개 page.tsx에서 `headerRight` prop 제거, `onCartClick`/`saving` prop 전달로 변경
+- **출고 메뉴 페이지 신규 작성**
+  - `outbound/page.tsx` 생성 — 입고 메뉴(`inbound/page.tsx`) 구조 클론, 출고 용어로 전환
+  - 외부 출고 5종: 판매출고(green), 반품출고(slate), 외주출고(purple), 사급출고(cyan), 기타출고(dark)
+  - 내부 출고 2종: 생산출고(orange-red), 재고이동(orange, `#` 준비 중)
+  - KPI 캐러셀 3슬라이드 (금일 출고/출고 대기/완료, 완료/판매출고/외주출고, 금일 수량/출고율/반품)
+  - 최근 출고 mock 데이터 2건
+  - Back URL: `/COMPANY_7/pop/main`
+- **출고 컴포넌트 6종 신규 작성** (`_components/outbound/`)
+  - 입고 UI 클론(ReturnExternalInbound.tsx 패턴) 기반, DB 미연동
+  - `fetchAllCustomers` / `fetchOrders` 빈 배열 반환 (`// TODO: API 연결`)
+  - 공통 변경: supplier→customer, purchase_no→reference_no, inbound_type→outbound_type, 입고→출고, 발주→주문, 미입고→미출고
+  - Props: `outboundType`, `sourceTable` (3인자 addItem)
+  - 파일별 색상:
+    - `SalesOutbound.tsx` — 판매출고, green (#22c55e→#15803d)
+    - `ReturnOutbound.tsx` — 반품출고, slate (#64748b→#334155)
+    - `SubcontractorOutbound.tsx` — 외주출고, purple (#8b5cf6→#6d28d9)
+    - `SuppliedOutbound.tsx` — 사급출고, cyan (#06b6d4→#0e7490)
+    - `EtcOutbound.tsx` — 기타출고, dark (#475569→#1e293b)
+    - `ProductionOutbound.tsx` — 생산출고, orange (#f97316→#c2410c)
+- **OutboundCartPage 신규 작성** (`_components/outbound/OutboundCartPage.tsx`)
+  - InboundCartPage 클론, 출고용 변경:
+  - `useCartSync("outbound")`, 타이틀 "출고 장바구니"
+  - 검사(InspectionModal) 관련 로직 전체 제거
+  - API: `GET /outbound/warehouses`, `GET /outbound/generate-number`, `POST /outbound`
+  - Payload: outbound_number/date/type/qty, customer_code/name (supplier 대신)
+  - outbound_type 배지 표시, 혼합 시 "혼합출고"
+- **출고 page.tsx 7개 신규 작성** (`outbound/{slug}/page.tsx`)
+  - `cart/page.tsx` — `backUrl`만 쿼리, `<OutboundCartPage backUrl={backUrl} />`
+  - `sales/page.tsx` — 판매출고, `shipment_instruction_detail`
+  - `return/page.tsx` — 반품출고, `return_outbound_detail`
+  - `subcontractor/page.tsx` — 외주출고, `outsource_outbound_detail`
+  - `supplied/page.tsx` — 사급출고, `supplied_outbound_detail`
+  - `etc/page.tsx` — 기타출고, `etc_outbound_detail`
+  - `production/page.tsx` — 생산출고, `production_outbound_detail`
+- **장바구니 구조 개편 (입고/출고 공통)**
+  - `useCartSync` 훅 시그니처 변경: `(screenId, sourceTable)` → `(category: 'inbound' | 'outbound')`
+  - DB 필터: `screen_id` 제거 → `cart_type='pop_inbound'` / `'pop_outbound'`로 카테고리 분리
+  - `addItem` 3번째 인자로 `sourceTable` 전달 (항목별 sourceTable)
+  - 레거시 오버로드 유지 (PopCardListComponent 등 기존 호출 호환)
+  - 입고 page.tsx 9개: `useCartSync("inbound")`, 카트 이동 URL 쿼리 `?backUrl=...`만
+  - 입고 컴포넌트 9개: `inboundType`/`sourceTable` props 추가, addItem에 `row.inbound_type` 포함, 공급사 검증
+  - InboundCartPage: props `{ backUrl }` 단순화, 타이틀 "입고 장바구니", inbound_type 배지, 혼합 시 "혼합입고"
+  - 카트 라우트: `screenId`/`sourceTable`/`type` 쿼리 제거, `backUrl`만 유지
+  - 백엔드 receivingController: 혼합 inbound_type 처리 추가
+- **검증 완료**
+  - `npm run build` (frontend): 성공
+  - `tsc --noEmit` (backend): 성공
+  - 브라우저 입고 테스트: 구매입고 품목 담기 → 카트 진입 → "입고 장바구니" 타이틀 + "구매입고" 배지 + 품목/수량 정상
+  - 브라우저 카트 공유 테스트: 구매입고에서 담은 품목이 생산입고 화면 배지(1)에 표시, 카트 페이지에서도 동일 품목 확인
+  - 브라우저 출고 테스트: 출고 메뉴 페이지(외부 5종 + 내부 2종), 판매출고 화면, 출고 카트 페이지 정상 렌더링
+  - 출고 카트 더미 테스트: DB에 pop_outbound 2건(판매출고 50EA + 생산출고 30EA) 삽입 → 카트에서 혼합 표시 확인 → 더미 삭제 완료
+
+### 2026-04-16 (2차)
+- **수량 입력 모달 분리: NumberPadModal → SimpleKeypadModal + 장바구니 포장단위**
+  - `_components/common/SimpleKeypadModal.tsx` 신규 생성
+    - 숫자 키패드 + 확인 버튼만 (포장단위 선택 없음)
+    - props: `open`, `onClose`, `onConfirm(qty)`, `maxQty`, `itemName`, `initialQty`
+  - 입고 컴포넌트 9개: `NumberPadModal` → `SimpleKeypadModal` 교체
+    - PurchaseInbound, SubcontractorInbound, ProductionInbound, ReturnExternalInbound, ReturnInternalInbound, SuppliedInbound, ErrorInbound, ChangeInbound, RecoveryInbound
+    - `handleNumpadConfirm` 시그니처: `(qty, packages)` → `(qty)` 단순화
+    - 카드 내 포장정보 표시 블록 제거
+  - 출고 컴포넌트 6개: 동일 교체
+    - SalesOutbound, ReturnOutbound, SubcontractorOutbound, SuppliedOutbound, EtcOutbound, ProductionOutbound
+  - `InboundCartPage.tsx`: 품목별 "포장단위" 버튼 추가
+    - 수량 편집: `SimpleKeypadModal` (숫자만)
+    - 포장등록: `NumberPadModal` (기존 4단계 포장 플로우)
+    - 포장 완료 시 버튼 색상 green, 미등록 시 amber
+  - `OutboundCartPage.tsx`: 동일 구조 적용
+  - `tsc --noEmit`: 새 에러 없음 (기존 에러만 존재)
+- **입고/출고 컴포넌트 자동저장 추가**
+  - 입고 9개 + 출고 6개 컴포넌트: `cart.addItem` / `cart.removeItem` 후 `setTimeout(() => cart.saveToDb(), 300)` 추가
+  - 화면 이동 시 카트 데이터 소실 방지
+- **InboundCartPage 장바구니 카드 레이아웃 개편**
+  - 카드 그리드: `flex-col` → `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3`
+  - 유형별 구분선: 유형 1개여도 항상 라벨 + 구분선 표시
+  - 헤더 행: 체크박스 + 품번 + 품목명 + 검사필수 버튼 (빨간색, `min-w-[80px]`, `py-[6px]`)
+  - 품목명: 15자 초과 시 `cartMarquee` 애니메이션 자동 슬라이드 (3초, container query `cqi` 기반 자동 계산)
+  - 액션 컬럼: 수량 → 삭제 (검사 버튼은 헤더로 이동)
+  - 포장단위 버튼: 카드 하단 전체 너비, 아이콘 포함
+  - 기존 검사 영역(카드 하단 full-width bar) 제거 → 헤더 배지로 대체
+  - 포장정보(포장완료 시 상세) 유지
+  - 카드 선택 표시: 좌측 바 → `ring-2 ring-blue-500` 전체 테두리
+- **OutboundCartPage 동일 적용**
+  - 유형별 구분선 항상 표시
+  - 카드 선택 시 `ring-2 ring-blue-500` 전체 테두리 (좌측 바 제거)
+  - 품목명 marquee 애니메이션 (15자 초과 시, `cartMarquee` 3초)
+  - 포장단위 버튼 카드 하단 전체 너비 + 아이콘
+  - `tsc --noEmit`: 에러 없음
+
+### 2026-04-16 (3차)
+- **포장단위 하드코딩 → DB 조회로 변경**
+  - 백엔드: `GET /api/packaging/pkg-units-by-item/:itemNumber` 신규 API
+    - `pkg_unit_item` JOIN `pkg_unit`으로 품목별 매칭 포장단위 조회
+  - `PackagingModal.tsx`: 하드코딩 6개 배열 제거, `itemNumber` prop → DB 조회, 로딩/빈 상태 처리
+  - `NumberPadModal.tsx`: 동일 DB 조회 적용, `direct-qty` 단계 제거 (포장등록 전용)
+    - 스텝: 포장선택 → 개당수량 → 포장개수 → 확인 (4단계)
+    - `pkg_qty` 자동 세팅 (DB 등록값 → 개당수량 초기값)
+    - `initialQty` prop 제거, 건너뛰기 버튼 제거
+  - `InboundCartPage.tsx` / `OutboundCartPage.tsx`: NumberPadModal에 `itemNumber` prop 전달, `initialQty` 제거
+  - `frontend/lib/api/packaging.ts`: `getPkgUnitsByItem()` + `PkgUnitByItem` 타입 추가
+  - 더미데이터: pkg_unit 3건(박스/포대/파렛트) + pkg_unit_item 5건 등록, 브라우저 검증 완료
+- **NumberPadModal 복수 포장 지원 + 나머지 자동 계산**
+  - 플로우: 포장선택 → 개당수량 → 포장개수 → (나머지 있으면) 나머지 안내 → 나머지 포장선택 → 확인
+  - MAX 버튼: 개당수량=maxQty, 포장개수=floor(maxQty/개당수량) 자동 계산
+  - 나머지 포장: 포장단위 선택 시 1개 x 나머지수량으로 자동 세팅 → 바로 확인
+  - 나머지 단계 헤더 amber 색상으로 시각 구분
+  - confirm에서 1차 포장(green) + 나머지 포장(amber) + 합계 표시
+  - `PackageEntry[]` 배열로 복수 엔트리 반환 (기존 호환)
+  - `initialPackages` 복수 엔트리 복원 지원
+- **적재함(loading_unit) 선택 단계 추가**
+  - 백엔드: `GET /api/packaging/loading-units-by-pkg/:pkgCode` 신규 API
+    - `loading_unit_pkg` JOIN `loading_unit`으로 포장코드별 매칭 적재함 조회
+  - `frontend/lib/api/packaging.ts`: `getLoadingUnitsByPkg()` + `LoadingUnitByPkg` 타입 추가
+  - `NumberPadModal.tsx`: 포장 완료 → 적재함 선택 → 확인 플로우
+    - 적재함 단계 헤더 purple 색상
+    - 적재함 목록: 이름, 코드, 타입, 최대적재수 표시
+    - "건너뛰기 (적재함 없음)" 버튼
+    - 매칭 적재함 없으면 자동 skip → confirm
+    - confirm에서 적재함 정보 purple 카드로 표시
+  - `onConfirm` 시그니처 확장: `(qty, packages, loadingUnit?)` — 3번째 인자로 적재함 전달
+  - `InboundCartPage.tsx` / `OutboundCartPage.tsx`: `handlePackagingConfirm`에서 `loadingUnit` → `cart.updateItemRow` 저장
+  - 더미데이터: loading_unit 2건(목재파렛트/20ft컨테이너) + loading_unit_pkg 3건 등록, 브라우저 검증 완료
+
+### 2026-04-17 (1차)
+- **입고/출고 장바구니 거래처 필터 드롭다운 추가**
+  - `InboundCartPage.tsx`:
+    - `selectedSupplierFilter` state 추가
+    - `supplierList` useMemo (items에서 supplier_code/name 중복 제거)
+    - 거래처 1개 시 자동 선택 useEffect
+    - `filteredItems` useMemo (선택/확정 로직은 전체 items 기반 유지)
+    - Info banner: supplier 배지 제거 → `<select>` 거래처 드롭다운 추가 (label "거래처")
+    - Info fields 그리드: `sm:grid-cols-3` → `sm:grid-cols-4` (거래처 열 추가)
+    - 품목 리스트 렌더링: typeGroups 계산을 `filteredItems` 기반으로 변경
+    - 헤더 supplierName 서브텍스트 제거, supplierName 변수 삭제
+  - `OutboundCartPage.tsx`: 동일 패턴 (customer_code/name, selectedCustomerFilter, customerList)
+  - `tsc --noEmit`: 두 파일 관련 새 에러 없음 (기존 에러만 존재)
+
+### 2026-04-17 (2차)
+- **거래처 선택 상태 sessionStorage 복원 추가 (입고 9개 + 출고 6개 = 15개 컴포넌트)**
+  - 장바구니 갔다 돌아올 때 거래처 선택 상태가 초기화되는 문제 해결
+  - 각 파일 상단에 `STORAGE_KEY` 상수 추가 (파일별 분리 키)
+  - 마운트 시 sessionStorage에서 복원하는 `useEffect` 추가
+  - `selectSupplier` / `selectCustomer` 래퍼 함수 추가 — 선택 시 저장, null 시 제거
+  - 기존 `setSelectedSupplier` / `setSelectedCustomer` 호출 3곳(X버튼, 모달 onSelect, 바코드 스캔)을 래퍼로 교체
+  - 입고 키: `pop_supplier_{purchase|subcontractor|production|supplied|return-external|return-internal|error|change|recovery}`
+  - 출고 키: `pop_customer_{sales|return|subcontractor|supplied|etc|production}`
+- **장바구니 화면 거래처 필터 드롭다운 추가 (InboundCartPage + OutboundCartPage)**
+  - Info banner 영역에 거래처 `<select>` 드롭다운 추가 (입고일자/창고/입고번호와 동일 크기, 4칸 grid)
+  - 거래처 목록: 장바구니에 담긴 품목에서 supplier_code/customer_code 자동 추출
+  - 거래처 1개면 자동 선택, "전체" 옵션 없음
+  - 기존 supplierName/customerName 배지 제거, filteredItems useMemo로 품목 필터링
+  - 확정/선택 로직은 전체 items 기반 유지 (필터 영향 없음)
+
+### 2026-04-17 (3차)
+- **입고관리/출고관리 페이지 신규 생성 (UI 껍데기, DB 미연동)**
+  - `_components/inbound/InboundManage.tsx` 신규 생성
+    - 입고 내역 조회/수정/삭제 UI, 시작일/종료일/키워드 검색 필터
+    - 카드형 목록 (체크박스 선택, 수정/삭제 버튼), 테마 blue
+    - MOCK_RECORDS 빈 배열 (`// TODO: API 연결`)
+  - `_components/inbound/OutboundManage.tsx` 신규 생성
+    - 출고 내역 조회/수정/삭제 UI, 동일 구조, 테마 emerald
+    - supplier→customer 용어 변경
+  - `inbound/inbound-manage/page.tsx` 신규 생성
+  - `inbound/outbound-manage/page.tsx` 신규 생성
+  - `inbound/page.tsx` 수정
+    - INTERNAL_ITEMS에 "입고관리"(blue), "출고관리"(emerald) 버튼 2개 추가 (재고이동 우측)
+
+### 2026-04-17 (4차)
+- **출고 메뉴 연결**: `main/page.tsx` 출고 버튼 `href: "#"` → `/COMPANY_7/pop/outbound`
+- **채번 로직 구 POP 의존 제거**: InboundCartPage/OutboundCartPage에서 `screens/6527/layout-pop` 대신 `numbering-rules/by-column` API 직접 조회로 변경
+
+### 2026-04-20
+- **입고관리 화면 API 연동 (UI 껍데기 → 실연동)**
+  - `_components/inbound/InboundManage.tsx` 전면 개편
+    - MOCK_RECORDS 빈 배열 → `getReceivingList` API 연동 (날짜 범위, 거래처, 키워드 필터)
+    - 삭제: `deleteReceiving` API 연동 (복수 선택 → 헤더 ID 중복 제거 → 순차 삭제, 재고 롤백 포함)
+    - 수정: 전체 필드 수정 모달 구현 (`updateReceiving` API)
+      - 기본 정보: 입고일, 입고상태(드롭다운)
+      - 수량/금액: 수량, 단가, 금액(자동계산)
+      - 입고 상세: LOT번호, 창고(DB 드롭다운), 위치, 검사상태, 검사자, 담당자
+      - 메모
+    - 카드별 수정 아이콘(연필) 추가 — 클릭 시 바로 수정 모달 열림
+    - 상단 수정 버튼: 1건 선택 시만 활성화
+    - 창고 목록: `getReceivingWarehouses` API 연동
+    - 검색: Enter 키 + 검색 버튼 지원, 로딩 스피너
+  - 백엔드/API 클라이언트 수정 없음 (기존 구현 활용)
+  - `tsc --noEmit`: InboundManage 관련 새 에러 없음
+  - `npm run build`: 성공
+  - 브라우저 검증: 조회 15건 정상 표시, 수정 모달 정상 렌더링, 카드 선택/버튼 활성화 확인
+- **입고관리 필터 변경**
+  - 시작일/종료일 (날짜 범위) → 입고일 (단일 날짜) 변경
+  - 입고유형 카테고리 드롭다운 추가 (전체 + 10개 유형)
+- **[알려진 이슈] 입고 수정 시 헤더 필드 공유 문제**
+  - `inbound_date`, `warehouse_code`, `location_code`, `inbound_status`, `inspector`, `manager`, `memo`는 헤더(`inbound_mng`) 필드
+  - 같은 입고번호(예: RCV-2026-0010) 안에 품목이 여러 건일 때, 한 품목에서 입고일 등 헤더 필드를 수정하면 동일 입고번호의 **모든 품목에 반영됨**
+  - 원인: `inbound_detail` 테이블에 `inbound_date` 컬럼 없음 — 헤더에만 존재
+  - 수량/단가/LOT/검사상태 등 디테일 필드는 품목 1건만 변경됨 (정상)
+  - 해결하려면 `inbound_detail`에 `inbound_date` 컬럼 추가 필요 (미적용)
+
+### 2026-04-20 (2차)
+- **생산입고 화면 DB 연동 (UI 껍데기 → 실연동)**
+  - 백엔드: `GET /api/receiving/source/production-results?processCode=XXX` 신규 추가
+    - `work_order_process` + `work_instruction` + `item_info` JOIN
+    - 필터: `process_code` 일치, `good_qty > 0` (실적 등록됨), `target_warehouse_id IS NULL` (미입고), `parent_process_id IS NULL` (마스터만), 리워크 제외
+    - 반환 필드: `work_instruction_no`, `order_date`, `process_code/name`, `item_code/name`, `spec`, `material`, `order_qty`(=good_qty+concession_qty), `remain_qty`, `source_table='work_order_process'`, `inspection_type`, `image`
+    - 파일: `backend-node/src/controllers/receivingController.ts`, `backend-node/src/routes/receivingRoutes.ts`
+  - 백엔드: `receivingController.create` 소스 업데이트 분기 리팩터
+    - 기존: `inbound_type === '구매입고'` 문자열 체크
+    - 변경: `source_table` 기준 if-else-if 체인 (`purchase_order_mng` / `purchase_detail` / `work_order_process`)
+    - 생산입고 처리: `work_order_process.target_warehouse_id` 세팅 (이중 입고 방지)
+    - 미처리 소스 테이블: `logger.warn`으로 기록 (추후 업데이트 로직 추가 필요 시 추적용)
+    - 파일: `backend-node/src/controllers/receivingController.ts`
+  - 프론트: `_components/inbound/ProductionInbound.tsx`
+    - `fetchOrders`: 빈 배열 → `apiClient.get("/receiving/source/production-results", { params: { processCode, keyword } })`
+    - 공정 선택 시 자동 재조회 (selectedSupplier 변경 감지)
+    - `editedQtys` 패턴 도입 (PurchaseInbound 동일): numpad 확인 → 로컬 수량만 변경, 담기 버튼 → 카트에 추가
+    - `saveToDbRef` 추가 (stale closure 방지)
+    - 필드 라벨 "지시수량" → "양품수량"
+    - 필터링: supplier 기반 → API가 이미 processCode로 필터링하므로 키워드 필터만 유지
+  - 검증: `tsc --noEmit` (backend), `npm run build` (frontend) 성공
+  - 브라우저 검증: 미수행 (실제 실적 데이터 필요)
+
+### 2026-04-20 (3차)
+- **생산관리 메뉴 페이지 신규 생성 (UI 껍데기, DB 미연동)**
+  - `production/page.tsx` 신규 생성 — 입고 메뉴(`inbound/page.tsx`) 구조 클론, 생산 용어로 전환
+    - 뒤로가기 + "생산관리" 타이틀 + "메뉴를 선택하세요" 서브텍스트
+    - KPI 캐러셀 3슬라이드 (금일 생산/진행 중/완료, 작업지시/공정완료/불량, 금일 수량/달성률/불량률) — 전부 `0`
+    - 생산 메뉴: **공정실행** 1개만 (amber gradient, `href: "#"` — 준비 중)
+    - 최근 생산활동: 빈 상태 ("최근 생산활동 내역이 없습니다")
+  - `main/page.tsx` 수정 — 생산 버튼 `href: "#"` → `/COMPANY_7/pop/production`
+  - 타입 체크(tsc --noEmit): 생산 관련 새 에러 없음
+  - 브라우저 검증: 미수행
+
+### 2026-04-20 (4차)
+- **공정실행 페이지 신규 생성 (스크린샷 기반 UI 껍데기, 구 POP 참조 X)**
+  - `production/process/page.tsx` 신규 생성 — 구 POP 컴포넌트 복사/import 없이 스크린샷만 보고 직접 구성
+    - 상단 row: 카드 열 버튼(1열/2열/3열, 2열 기본 선택) + 새로고침 버튼(blue border)
+    - 필터 row: 공정 선택 드롭다운(톱니 아이콘) + 설비 선택 드롭다운(깃발 아이콘) — 핸들러 stub
+    - 탭 바: 접수가능(amber) / 진행중(blue) / 대기(gray) / 완료(green) — 하드코딩 건수(59/3/11/17)
+    - 빈 상태: clipboard 아이콘(amber) + "공정을 선택해주세요"
+    - 전부 로컬 state만, `apiClient`/`dataApi`/`useAuth` 사용 없음, 핸들러는 `// TODO: API 연결` 주석
+  - `production/page.tsx` 수정 — 공정실행 버튼 `href: "#"` → `/COMPANY_7/pop/production/process`
+  - `work/[processId]/page.tsx`는 아직 미생성 (사용자 지시: 이번엔 공정실행 1화면만 구성)
+  - 타입 체크(tsc --noEmit): 새 에러 없음
+  - 브라우저 검증: 미수행
+
+### 2026-04-20 (5차)
+- **공정실행 좌측 공정 선택 드롭다운 DB 연결**
+  - `production/process/page.tsx` 수정 — 좌측 공정용 `FilterSelect` 버튼 → `SupplierModal` 트리거 버튼으로 교체
+    - `PROCESS_SOURCE` 상수 추가 (`process_mng` / `process_code` / `process_name`)
+    - `selectedProcess` state 타입: `string` → `Supplier | null` (공정코드+이름 동시 보관, 추후 탭/데이터 필터링용)
+    - `processModalOpen` boolean state 신규 추가 (모달 open/close 제어)
+    - `SupplierModal` 렌더: `title="공정 선택"`, `searchPlaceholder="공정명 또는 코드 검색..."`
+    - 우측 설비 드롭다운은 `FilterSelect` 그대로 유지 (변경 없음)
+  - 구현 방식: 생산입고(`ProductionInbound.tsx`)와 동일 패턴 — `SupplierModal` 재사용, 신규 모달 파일 생성 없음
+  - 타입 체크(tsc --noEmit): 새 에러 없음
+  - `npm run build`: 컴파일 성공, post-compile 단계에서 Turbopack 캐시 경고(변경 무관)
+  - 브라우저 검증: 미수행 — dev 서버 다운, 백엔드 재시작 금지 규칙
+
+### 2026-04-20 (6차)
+- **공정실행 우측 설비 선택 드롭다운 DB 연결 (공정별 필터링)**
+  - `_components/common/EquipmentModal.tsx` 신규 생성 — `SupplierModal` UI 클론, 데이터는 props로 주입받는 방식
+    - props: `items`, `loading`, `open`, `onClose`, `onSelect`, `title`, `searchPlaceholder`
+    - 초성 그룹핑 + 가나다/ABC 정렬 + 검색 — SupplierModal `getChosung` 재사용
+  - `production/process/page.tsx` 수정
+    - `getProcessEquipments` from `lib/api/processInfo` import — 공정별 등록 설비 조회 API
+    - `selectedEquipment` state 타입: `string` → `EquipmentItem | null` (코드+이름 보관)
+    - `equipments`, `equipmentLoading`, `equipmentModalOpen` state 신규 추가
+    - `selectedProcess?.customer_code` 변경 감지 `useEffect` — 공정 선택 시 `getProcessEquipments` 호출, 공정 해제 시 설비 목록 초기화
+    - 우측 `FilterSelect` 버튼 → `EquipmentModal` 트리거 버튼으로 교체 (공정 미선택 시 disabled)
+    - 버튼 라벨: 선택됨 → 설비명 / 공정 미선택 → "공정 선택 후 설비 선택" / 공정만 선택 → "설비를 선택하세요"
+  - 데이터 흐름: `process_equipment` JOIN `equipment_mng` — `process_code` + `company_code` 필터
+  - 타입 체크(tsc --noEmit): 새 에러 없음
+  - `npm run build`: 미수행 (방금 전 5차에서 확인)
+  - 브라우저 검증: 미수행 — dev 서버 다운, 백엔드 재시작 금지 규칙
+
+### 2026-04-20 (8차) — Phase A 완료 (공정실행 구 POP 이식)
+- **작업 범위**: 플랜 `.claude/plans/pop-process-execution.md` Phase A 전 항목 (A-1 ~ A-8)
+- **POP.md 0-2 원칙 예외 적용**: 이번 공정실행 작업에 한해 "구 POP 컴포넌트 복사/import 금지" 예외 허용 (사용자 승인). 0-2 본문은 유지 — 다른 화면에는 계속 적용.
+- **파일 변경**
+  - 복사: `components/pop/hardcoded/production/` 의 WorkOrderList/ProcessWork/AcceptProcessModal/ProcessDetailModal/DefectTypeModal/ProcessTimer → `_components/production/` (6개)
+  - 신규: `_components/production/useProcessData.ts` — 1회 sync + 3초 쿨다운 + sonner toast + 동시호출 방지(inFlight)
+  - 수정: `WorkOrderList.tsx` — 내부 fetchAll/syncAndFetch/localStorage/필터 UI/FilterSelectorModal 제거, props 기반으로 전환, mutation 후 `refetch()` 사용
+  - 수정: `production/process/page.tsx` — useProcessData 연결, 새로고침 버튼(ArrowPath SVG + animate-spin + blue border), 카드 열 localStorage `pop-new-workorder-cols` (기본 2열, 구 POP `workorder-card-cols`와 독립), `WorkOrderList` 렌더
+  - 수정: `hooks/pop/usePopSettings.ts` — `/COMPANY_7/pop/production/process` URL → screenId 7, settingsKey `processExecution` 매핑 추가
+  - 재사용: `_components/common/ConfirmModal.tsx` 기존 파일 그대로 사용 (복사 생략)
+- **데이터 갱신 정책 (구 POP 대비 개선)**
+  - 구 POP의 이중 sync POST 제거: 진입 시 1회 + 수동 새로고침 시 1회 + 3초 쿨다운
+  - mutation(accept-process/cancel-accept) 성공 후 `sync` 없이 `refetch`만 수행
+  - sonner toast 경유 에러 노출 (기존 `silent catch` 제거)
+- **브라우저 E2E 검증 (playwright, topseal_admin / COMPANY_7)**
+  - 진입 sync POST 1회 / 재진입 1회 / 연타 3회 → 1회(쿨다운) / 3초 경과 후 1회 추가 → 정상
+  - 필터(공정/설비) 조작: sync POST 증가 0회
+  - 리워크 접수(accept-process POST) → sync POST 증가 0회 → 진행중 탭 이동 확인
+  - 접수취소(cancel-accept POST, ConfirmModal 경유) → sync POST 증가 0회 → 원복 확인
+  - 콘솔 에러 0, tsc 신규 에러 0 (baseline 3143 → 3090), `npm run build` 성공
+  - 카드 열 토글: 기본 2열 확인, 3열 변경 → localStorage `pop-new-workorder-cols="3"` 저장 → 페이지 재진입 유지 확인, 구 POP 키 미생성
+- **[알려진 이슈 — Phase C에서 처리 예정, 이번 Phase A 작업 범위 아님]**
+  - **이슈 #1 — `work_order_process.status` routing 미반영**: 서버 `sync-work-instructions`가 작업지시 생성 시 모든 seq의 공정을 초기 `status='acceptable'`로 한꺼번에 insert함. 전공정(이전 seq) 완료 여부에 따른 `waiting → acceptable` 전이 로직 없음. 결과적으로 UI 접수가능 탭에 "전공정양품=0, 접수가능=0"인 카드(예: CODE-00010 포장 공정, 직전 배합 공정 미완료 상태)가 항상 표시됨. 구 POP도 동일한 DB 상태로 동작했으므로 Phase A는 "동등 재현" 원칙 유지 (클라이언트 필터 임시 패치 없음).
+  - **이슈 #2 — 중복 마스터 레코드**: 같은 `wo_id + seq_no + batch_id` 조합의 `parent_process_id IS NULL` 마스터 레코드가 복수 존재. 예: CODE-00010의 seq 1~3이 각각 2개씩 (batch `B_1002A_005`, status 동일 `acceptable`). `sync-work-instructions` POST 재실행 시 UPSERT가 아닌 INSERT가 누적되는 것으로 추정.
+  - **이슈 #3 — 리워크 카드 공정 필터 무시로 인한 오노출**: WorkOrderList 복사본(원본 L1300-1301)의 "재작업 카드는 공정 필터 무시 — 모든 공정에서 표시" 로직. 예: CODE-00011은 `제조반_계량` 공정에서 불량이 발생한 리워크인데, 사용자가 `제조반_포장` 공정을 필터링 중일 때도 접수가능 탭에 노출됨. 리워크 카드는 원래 불량이 발생한 공정(또는 routing상 지정된 별도 재작업 공정)과 연결되어 표시되어야 할 가능성. 정확한 비즈니스 룰 확인 필요.
+- **Phase C 플랜 반영 예정**: 위 3개 이슈를 `.claude/plans/pop-process-execution.md` Phase C(서버 응답 필드 보강) 섹션에 추가 예정
+
+### 2026-04-20 (7차)
+- **공정실행 화면 상단에 뒤로가기 + 타이틀 추가**
+  - `production/process/page.tsx` 수정 — 최상단에 뒤로가기 + "공정실행" 타이틀 행 추가
+    - 뒤로가기 버튼(`w-10 h-10 rounded-xl`, 흰 배경 + gray-200 border) → `/COMPANY_7/pop/production`
+    - 타이틀 "공정실행" (서브텍스트 없음, 사용자 지시)
+    - `useRouter` import 추가
+  - 타입 체크(tsc --noEmit): 새 에러 없음
+  - 브라우저 검증: 미수행
+
+### 2026-04-21 (2차)
+- **포장단위 모달 복수 등록 개편 + maxQty 버그 수정**
+  - `_components/inbound/NumberPadModal.tsx` 전면 재작성
+    - 기존 3단계(1차 포장선택→개당수량→포장개수 + 잔량 포장 + 확인) → 단일 list step 기반 구조로 전환
+    - list step: 포장 수량/미포장 잔량 실시간 요약, 등록된 포장 목록(행별 [편집][삭제]), [+ 포장단위 추가], [확인]
+    - packaging step: 포장단위 선택 (pkg_qty 자동 세팅, 개당수량 입력 단계 제거)
+    - count step: 개수만 입력 (MAX = `Math.floor(사용가능잔량 / pkg_qty)`)
+    - 같은 `pkg_code` 재선택 시 기존 행 `count` 합산 (pkg_qty 동일 전제)
+    - 편집 시 해당 행 수량을 사용가능잔량에 되돌린 뒤 max 계산
+    - 잔량 > 0 이어도 확정 가능 (입고/출고 관리화면에서 수정 여지)
+    - 적재함 선택 흐름은 변경 없음 (InboundCartPage/OutboundCartPage의 별도 LoadingUnitModal 유지)
+  - `_components/inbound/InboundCartPage.tsx`
+    - **MAX 버그 수정**: `NumberPadModal`에 전달하던 `maxQty={packagingTarget.remain_qty}` → `packagingTarget.inbound_qty`
+    - `handlePackagingConfirm`: `Math.min(qty, remain_qty)` → `packagingTarget.inbound_qty` 고정 (포장 합계로 수량 덮어쓰기 제거, 미포장 잔량 허용)
+    - 포장 정보 카드 UI: 배지 `포장완료`(green) / `부분포장`(amber) 분기 + 미포장 잔량 줄 추가
+  - `_components/outbound/OutboundCartPage.tsx`: 동일 패턴 (`outbound_qty` 기준)
+  - 버그 원인: 기존 `remain_qty`는 발주 잔량(예: 발주 200, 미입고 200)이라 장바구니에 50 담아도 MAX 버튼/잔량 계산이 200 기준 → "50 EA 중 1박스(40EA)만 담아도 MAX=5박스 / 잔량 160" 증상
+  - 검증:
+    - `tsc --noEmit` (frontend): 변경 파일 기준 신규 에러 0 (기존 `lib/utils/*`, `v2-core/*` 등 baseline만 존재)
+    - 브라우저 검증: MAX 버그 수정 동작 확인 (모달 헤더 `최대 50 EA`, 발주수량 100 기준 아님). 복수 추가/합산/편집/삭제/배지 분기는 현 장바구니 품목 3건(DEMO-PROD-001/B_ETCE3_001/F_GMP02_003)에 `pkg_unit_item` 미등록으로 미검증 — 사용자 승인 SKIP
+  - PreToolUse 훅이 카드 UI 편집을 2회 차단 → 사용자에게 세부 변경 목록(배지/색상/미포장 줄) 제시 후 승인받아 통과
+
+### 2026-04-21
+- **판매출고 시연용 더미 데이터 추가 후 동일 세션 내 전량 롤백 (사용자 지시)**
+  - `_components/outbound/SalesOutbound.tsx` `fetchOrders`: 더미 3건 삽입 → 원래 빈 배열(`setOrders([])`)로 원복
+  - `_components/outbound/OutboundCartPage.tsx` `handleConfirm`: `allDummy` 스킵 분기 추가 → 원래 `const res = await apiClient.post("/outbound", payload);` 한 줄로 원복
+  - 현재 상태: 2026-04-20 (9차) 시점과 동일. 판매출고 화면은 다시 `fetchOrders` 빈 배열 / `fetchAllCustomers` 빈 배열 상태 (UI 클론, DB 미연동)
+
+### 2026-04-22 (2차)
+- **POP 반응형 공통 컴포넌트 5개 신설** (`_components/common/`)
+  - `theme.ts` — PopColor 타입(9색) + COLOR_MAP 팔레트 (buttonBg/buttonBgHover/ring/ringSelected/text/bg50/border), 완성 리터럴만, JIT 안전
+  - `PopButton.tsx` — forwardRef, size(sm/md/lg) + color + icon props, COLOR_MAP 조회 기반, 외부 className append
+  - `PopCard.tsx` — forwardRef, selected/color/interactive props, ringSelected + border 색상 교체, 외부 className append
+  - `PopCardGrid.tsx` — grid + gap, ColProfile(base/md/lg/xl/2xl) 모두 리터럴 맵 조회, 옵셔널 브레이크포인트 조건부 적용
+  - `PopModal.tsx` — open/onClose/size(sm/md/lg/xl)/title/children/footer/hideCloseButton, ESC 키 useEffect, backdrop click close
+  - 기존 파일 수정 없음. `tsc --noEmit`: 신규 파일 에러 0, 전체 baseline 3090 유지
+
+### 2026-04-20 (9차)
+- **출고관리 화면 API 연동 (UI 껍데기 → 실연동, 입고관리 로직 포팅)**
+  - `_components/outbound/OutboundManage.tsx` 전면 rewrite
+    - InboundManage.tsx 로직 그대로 포팅, 테이블 연결만 출고용으로 교체
+    - 사용자 지시: "입고 로직에서 테이블 연결만 건들고 나머지는 그대로, 색상은 기존 emerald 유지"
+  - API 전환: `getReceivingList/updateReceiving/deleteReceiving/getReceivingWarehouses` → `getOutboundList/updateOutbound/deleteOutbound/getOutboundWarehouses`
+  - 필드 매핑: `inbound_*` → `outbound_*`, `supplier_*` → `customer_*`, `manager` → `manager_id`
+  - 타입 옵션 교체: INBOUND_TYPE_OPTIONS(10개) → OUTBOUND_TYPE_OPTIONS(판매/생산/외주/사급/반품/기타/재고이동)
+  - 상태 옵션: "입고완료/부분입고/대기" → "출고완료/부분출고/대기"
+  - **검사 필드 제거**: `inspection_status`, `inspector` — OutboundItem 타입에 없음 (출고에 검사 개념 없음)
+  - SupplierModal 재사용 (`customer_code/customer_name` 기반, props 타입 호환)
+  - 색상 테마: 기존 출고 emerald 유지 (blue 계열 전부 emerald로, gradient `#60a5fa→#2563eb` → `#34d399→#059669`)
+  - 네비게이션: `router.push("/COMPANY_7/pop/outbound")` (뒤로가기)
+  - 수정 모달 필드: 출고일, 출고상태, 수량, 단가, 금액(자동계산), LOT번호, 창고(DB 드롭다운), 위치, 담당자, 메모
+  - 삭제 로직: 복수 선택 → 헤더 ID 중복 제거 → 순차 `deleteOutbound` (재고 롤백 메시지 유지)
+  - 검증:
+    - `tsc --noEmit`: OutboundManage 관련 새 에러 없음
+    - `npm run build`: 성공
+    - 브라우저 검증: 미수행 — 실제 출고 데이터 필요
+- 백엔드/API 클라이언트 수정 없음 (기존 `outboundRoutes.ts` + `lib/api/outbound.ts` 그대로 활용)
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/BarcodeScanModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/BarcodeScanModal.tsx
new file mode 100644
index 00000000..ac7bec6b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/BarcodeScanModal.tsx
@@ -0,0 +1,420 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { Camera, CameraOff, CheckCircle2, AlertCircle, Scan } from "lucide-react";
+import Webcam from "react-webcam";
+import { BrowserMultiFormatReader, NotFoundException } from "@zxing/library";
+
+export interface BarcodeScanModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  targetField?: string;
+  barcodeFormat?: "all" | "1d" | "2d";
+  autoSubmit?: boolean;
+  onScanSuccess: (barcode: string) => void;
+  userId?: string;
+}
+
+export const BarcodeScanModal: React.FC<BarcodeScanModalProps> = ({
+  open,
+  onOpenChange,
+  targetField,
+  barcodeFormat = "all",
+  autoSubmit = false,
+  onScanSuccess,
+  userId = "guest",
+}) => {
+  const [isScanning, setIsScanning] = useState(false);
+  const [scannedCode, setScannedCode] = useState<string>("");
+  const [manualInput, setManualInput] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [hasPermission, setHasPermission] = useState<boolean | null>(null);
+  const webcamRef = useRef<Webcam>(null);
+  const codeReaderRef = useRef<BrowserMultiFormatReader | null>(null);
+  const scanIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const manualInputRef = useRef<HTMLInputElement>(null);
+
+  // 바코드 리더 초기화 + 모달 열릴 때 상태 리셋
+  useEffect(() => {
+    if (open) {
+      setScannedCode("");
+      setManualInput("");
+      setError("");
+      setIsScanning(false);
+      setHasPermission(null);
+      codeReaderRef.current = new BrowserMultiFormatReader();
+    }
+
+    return () => {
+      stopScanning();
+      if (codeReaderRef.current) {
+        codeReaderRef.current.reset();
+      }
+    };
+  }, [open]);
+
+  // 카메라 권한 요청
+  const requestCameraPermission = async () => {
+    // navigator.mediaDevices 지원 확인
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      setHasPermission(false);
+      setError(
+        "이 브라우저는 카메라 접근을 지원하지 않거나, 보안 컨텍스트(HTTPS 또는 localhost)가 아닙니다. " +
+        "현재 프로토콜: " + window.location.protocol
+      );
+      toast.error("카메라 접근이 불가능합니다.");
+      return;
+    }
+
+    try {
+      // 후면 카메라 먼저 시도, 실패하면 전면 카메라 fallback
+      let stream: MediaStream;
+      try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } });
+      } catch {
+        stream = await navigator.mediaDevices.getUserMedia({ video: true });
+      }
+      setHasPermission(true);
+      stream.getTracks().forEach((track) => track.stop());
+    } catch (err: any) {
+      setHasPermission(false);
+
+      if (err.name === "NotAllowedError") {
+        setError("카메라 접근이 거부되었습니다. 브라우저 설정에서 카메라 권한을 허용해주세요.");
+        toast.error("카메라 권한이 거부되었습니다.");
+      } else if (err.name === "NotFoundError") {
+        setError("카메라를 찾을 수 없습니다. 카메라가 연결되어 있는지 확인해주세요.");
+        toast.error("카메라를 찾을 수 없습니다.");
+      } else if (err.name === "NotReadableError") {
+        setError("카메라가 이미 다른 애플리케이션에서 사용 중입니다.");
+        toast.error("카메라가 사용 중입니다.");
+      } else if (err.name === "NotSupportedError") {
+        setError("보안 컨텍스트(HTTPS 또는 localhost)가 아니어서 카메라를 사용할 수 없습니다.");
+        toast.error("HTTPS 환경이 필요합니다.");
+      } else {
+        setError(`카메라 접근 오류: ${err.name} - ${err.message}`);
+        toast.error("카메라 접근 중 오류가 발생했습니다.");
+      }
+    }
+  };
+
+  // 스캔 시작
+  const startScanning = () => {
+    setIsScanning(true);
+    setError("");
+    setScannedCode("");
+
+    scanIntervalRef.current = setInterval(() => {
+      scanBarcode();
+    }, 500);
+  };
+
+  // 스캔 중지
+  const stopScanning = () => {
+    setIsScanning(false);
+    if (scanIntervalRef.current) {
+      clearInterval(scanIntervalRef.current);
+      scanIntervalRef.current = null;
+    }
+  };
+
+  // 바코드 스캔
+  const scanBarcode = async () => {
+    if (!webcamRef.current || !codeReaderRef.current) return;
+
+    try {
+      const imageSrc = webcamRef.current.getScreenshot();
+      if (!imageSrc) return;
+
+      const img = new Image();
+      img.src = imageSrc;
+
+      await new Promise((resolve) => {
+        img.onload = resolve;
+      });
+
+      const result = await codeReaderRef.current.decodeFromImageElement(img);
+
+      if (result) {
+        const barcode = result.getText();
+
+        setScannedCode(barcode);
+        stopScanning();
+        toast.success(`바코드 스캔 완료: ${barcode}`);
+
+        if (autoSubmit) {
+          onScanSuccess(barcode);
+        }
+      }
+    } catch (err) {
+      if (!(err instanceof NotFoundException)) {
+        // NotFoundException은 정상 (바코드 미인식)
+      }
+    }
+  };
+
+  // 수동 확인 버튼 (스캔 결과 또는 직접 입력)
+  const handleConfirm = () => {
+    const code = scannedCode || manualInput.trim();
+    if (code) {
+      onScanSuccess(code); // 호출 측에서 검색 필드를 덮어쓰기
+      onOpenChange(false);
+    } else {
+      toast.error("바코드를 스캔하거나 직접 입력해주세요.");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-[95vw] sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle className="text-base sm:text-lg">바코드 스캔</DialogTitle>
+          <DialogDescription className="text-xs sm:text-sm">
+            카메라로 바코드를 스캔합니다.
+            {targetField && ` (대상 필드: ${targetField})`}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* 카메라 권한 요청 대기 중 */}
+          {hasPermission === null && (
+            <div className="rounded-md border border-primary bg-primary/10 p-4">
+              <div className="flex items-start gap-3">
+                <Camera className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary" />
+                <div className="flex-1 space-y-3 text-xs sm:text-sm">
+                  <div>
+                    <p className="font-semibold text-primary">카메라 권한이 필요합니다</p>
+                    <p className="mt-1 text-muted-foreground">
+                      바코드를 스캔하려면 카메라 접근 권한을 허용해주세요.
+                    </p>
+                  </div>
+
+                  <div className="rounded-md bg-background/50 p-3">
+                    <p className="mb-2 font-medium text-foreground">권한 요청 안내:</p>
+                    <ul className="ml-4 list-disc space-y-1 text-muted-foreground">
+                      <li>아래 버튼을 클릭하면 브라우저에서 권한 요청 팝업이 표시됩니다</li>
+                      <li>팝업에서 <strong>&quot;허용&quot;</strong> 버튼을 클릭해주세요</li>
+                      <li>권한은 언제든지 브라우저 설정에서 변경할 수 있습니다</li>
+                    </ul>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      onClick={requestCameraPermission}
+                      className="h-9 text-xs sm:h-10 sm:text-sm"
+                    >
+                      <Camera className="mr-2 h-4 w-4" />
+                      카메라 권한 요청
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 카메라 권한 거부됨 */}
+          {hasPermission === false && (
+            <div className="rounded-md border border-destructive bg-destructive/10 p-4">
+              <div className="flex items-start gap-3">
+                <AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-destructive" />
+                <div className="flex-1 space-y-3 text-xs sm:text-sm">
+                  <div>
+                    <p className="font-semibold text-destructive">카메라 접근 권한이 필요합니다</p>
+                    <p className="mt-1 text-destructive/80">{error}</p>
+                  </div>
+
+                  <div className="rounded-md bg-background/50 p-3">
+                    <p className="mb-2 font-medium text-foreground">권한 허용 방법:</p>
+                    <ol className="ml-4 list-decimal space-y-1 text-muted-foreground">
+                      <li>브라우저 주소창 왼쪽의 자물쇠 아이콘을 클릭하세요</li>
+                      <li><strong>&quot;카메라&quot;</strong> 항목을 찾아 <strong>&quot;허용&quot;</strong>으로 변경하세요</li>
+                      <li>페이지를 새로고침하거나 다시 스캔을 시도하세요</li>
+                    </ol>
+                  </div>
+
+                  <div className="flex items-center gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={requestCameraPermission}
+                      className="h-8 text-xs"
+                    >
+                      다시 시도
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* 웹캠 뷰 */}
+          {hasPermission && (
+            <div className="relative aspect-video overflow-hidden rounded-lg border border-border bg-muted">
+              <Webcam
+                ref={webcamRef}
+                audio={false}
+                screenshotFormat="image/jpeg"
+                videoConstraints={{
+                  facingMode: { ideal: "environment" },
+                }}
+                onUserMediaError={() => {
+                  // environment 카메라 실패 시 자동 fallback (Webcam 내부 처리)
+                }}
+                className="h-full w-full object-cover"
+              />
+
+              {/* 스캔 가이드 오버레이 */}
+              {isScanning && (
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div className="h-3/5 w-4/5 rounded-lg border-4 border-primary/70 animate-pulse" />
+                  <div className="absolute bottom-4 left-0 right-0 text-center">
+                    <div className="inline-flex items-center gap-2 rounded-full bg-background/80 px-4 py-2 text-xs font-medium">
+                      <Scan className="h-4 w-4 animate-pulse text-primary" />
+                      스캔 중...
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* 스캔 완료 오버레이 */}
+              {scannedCode && (
+                <div className="absolute inset-0 flex items-center justify-center bg-background/80">
+                  <div className="text-center">
+                    <CheckCircle2 className="mx-auto h-16 w-16 text-success" />
+                    <p className="mt-2 text-sm font-medium">스캔 완료!</p>
+                    <p className="mt-1 font-mono text-lg font-bold text-primary">{scannedCode}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* 수동 입력 (카메라 사용 불가 시 또는 외장 스캐너 사용 시) */}
+          <div className="rounded-md border border-border bg-muted/30 p-3 space-y-2">
+            <p className="text-xs font-medium text-muted-foreground">직접 입력 또는 외장 스캐너</p>
+            <div className="flex gap-2">
+              <input
+                ref={manualInputRef}
+                type="text"
+                value={manualInput}
+                onChange={(e) => setManualInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && manualInput.trim()) {
+                    e.preventDefault();
+                    onScanSuccess(manualInput.trim());
+                    onOpenChange(false);
+                  }
+                }}
+                placeholder="바코드/QR 번호 입력 후 Enter"
+                className="flex-1 h-11 rounded-lg border border-border px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                autoFocus={hasPermission === false}
+              />
+              <Button
+                onClick={() => {
+                  if (manualInput.trim()) {
+                    onScanSuccess(manualInput.trim());
+                    onOpenChange(false);
+                  }
+                }}
+                disabled={!manualInput.trim()}
+                className="h-11 px-4"
+              >
+                확인
+              </Button>
+            </div>
+          </div>
+
+          {/* 바코드 포맷 정보 */}
+          <div className="rounded-md border border-border bg-muted/50 p-3">
+            <div className="flex items-start gap-2">
+              <AlertCircle className="mt-0.5 h-4 w-4 text-muted-foreground" />
+              <div className="text-[10px] text-muted-foreground sm:text-xs">
+                <p className="font-medium">지원 포맷</p>
+                <p className="mt-1">
+                  {barcodeFormat === "all" && "1D/2D 바코드 모두 지원 (Code 128, QR Code 등)"}
+                  {barcodeFormat === "1d" && "1D 바코드 (Code 128, Code 39, EAN-13, UPC-A)"}
+                  {barcodeFormat === "2d" && "2D 바코드 (QR Code, Data Matrix)"}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* 에러 메시지 */}
+          {error && (
+            <div className="rounded-md border border-destructive bg-destructive/10 p-3">
+              <div className="flex items-start gap-2">
+                <AlertCircle className="mt-0.5 h-4 w-4 text-destructive" />
+                <p className="text-xs text-destructive">{error}</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+          >
+            취소
+          </Button>
+
+          {!isScanning && !scannedCode && hasPermission && (
+            <Button
+              onClick={startScanning}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Camera className="mr-2 h-4 w-4" />
+              스캔 시작
+            </Button>
+          )}
+
+          {isScanning && (
+            <Button
+              variant="destructive"
+              onClick={stopScanning}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <CameraOff className="mr-2 h-4 w-4" />
+              스캔 중지
+            </Button>
+          )}
+
+          {scannedCode && (
+            <Button
+              variant="outline"
+              onClick={() => {
+                setScannedCode("");
+                startScanning();
+              }}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <Camera className="mr-2 h-4 w-4" />
+              다시 스캔
+            </Button>
+          )}
+
+          {scannedCode && !autoSubmit && (
+            <Button
+              onClick={handleConfirm}
+              className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
+            >
+              <CheckCircle2 className="mr-2 h-4 w-4" />
+              확인
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/ConfirmModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/ConfirmModal.tsx
new file mode 100644
index 00000000..34bfff4b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/ConfirmModal.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import React from "react";
+
+export interface ConfirmModalProps {
+	open: boolean;
+	title?: string;
+	message: string;
+	confirmText?: string;
+	cancelText?: string;
+	variant?: "primary" | "danger" | "success";
+	onConfirm: () => void;
+	onCancel: () => void;
+}
+
+/**
+ * POP 공용 확인 모달 (native confirm() 대체)
+ * 모바일 친화 디자인, bottom-sheet 스타일
+ */
+export function ConfirmModal({
+	open,
+	title,
+	message,
+	confirmText = "확인",
+	cancelText = "취소",
+	variant = "primary",
+	onConfirm,
+	onCancel,
+}: ConfirmModalProps) {
+	if (!open) return null;
+
+	const confirmBg =
+		variant === "danger"
+			? "bg-gradient-to-b from-red-500 to-red-600 hover:from-red-600 hover:to-red-700"
+			: variant === "success"
+				? "bg-gradient-to-b from-emerald-500 to-emerald-600 hover:from-emerald-600 hover:to-emerald-700"
+				: "bg-gradient-to-b from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700";
+
+	return (
+		<div className="fixed inset-0 z-[100]" onClick={onCancel}>
+			{/* Overlay */}
+			<div className="absolute inset-0 bg-black/50" />
+
+			{/* Center modal */}
+			<div className="absolute inset-0 flex items-center justify-center p-6">
+				<div
+					className="w-full max-w-md bg-white rounded-2xl shadow-2xl overflow-hidden"
+					onClick={(e) => e.stopPropagation()}
+				>
+					{/* Body */}
+					<div className="px-6 py-7 text-center">
+						{title && (
+							<h3 className="text-lg font-bold text-gray-900 mb-3">{title}</h3>
+						)}
+						<p className="text-base text-gray-700 whitespace-pre-line leading-relaxed">
+							{message}
+						</p>
+					</div>
+
+					{/* Buttons */}
+					<div className="flex border-t border-gray-100">
+						<button
+							type="button"
+							onClick={onCancel}
+							className="flex-1 py-4 text-base font-semibold text-gray-600 hover:bg-gray-50 active:bg-gray-100 transition-colors"
+						>
+							{cancelText}
+						</button>
+						<div className="w-px bg-gray-100" />
+						<button
+							type="button"
+							onClick={onConfirm}
+							className={`flex-1 py-4 text-base font-bold text-white transition-all active:scale-[0.98] ${confirmBg}`}
+						>
+							{confirmText}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/EquipmentModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/EquipmentModal.tsx
new file mode 100644
index 00000000..e42537ec
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/EquipmentModal.tsx
@@ -0,0 +1,195 @@
+"use client";
+
+import React, { useState, useEffect, useMemo } from "react";
+import { getChosung } from "../inbound/SupplierModal";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface EquipmentItem {
+  id: string;
+  equipment_code: string;
+  equipment_name: string;
+}
+
+interface EquipmentModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (equipment: EquipmentItem) => void;
+  items: EquipmentItem[];
+  loading?: boolean;
+  title?: string;
+  searchPlaceholder?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helpers                                                             */
+/* ------------------------------------------------------------------ */
+
+const AVATAR_COLORS = [
+  "#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6",
+  "#06b6d4", "#ec4899", "#14b8a6", "#f97316", "#6366f1",
+  "#84cc16", "#e11d48", "#0ea5e9", "#a855f7", "#10b981",
+];
+
+function getAvatarColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function EquipmentModal({
+  open,
+  onClose,
+  onSelect,
+  items,
+  loading = false,
+  title = "설비 선택",
+  searchPlaceholder = "설비명 또는 코드 검색...",
+}: EquipmentModalProps) {
+  const [search, setSearch] = useState("");
+  const [sortMode, setSortMode] = useState<"korean" | "abc">("korean");
+
+  useEffect(() => {
+    if (open) setSearch("");
+  }, [open]);
+
+  const grouped = useMemo(() => {
+    const filtered = items.filter((e) =>
+      e.equipment_name.toLowerCase().includes(search.toLowerCase()) ||
+      e.equipment_code.toLowerCase().includes(search.toLowerCase())
+    );
+
+    const sorted = [...filtered].sort((a, b) => {
+      if (sortMode === "abc") return a.equipment_name.localeCompare(b.equipment_name, "en");
+      return a.equipment_name.localeCompare(b.equipment_name, "ko");
+    });
+
+    const groups: { letter: string; items: EquipmentItem[] }[] = [];
+    const map = new Map<string, EquipmentItem[]>();
+    for (const e of sorted) {
+      const first = e.equipment_name.trim().charAt(0);
+      const letter = getChosung(first);
+      if (!map.has(letter)) map.set(letter, []);
+      map.get(letter)!.push(e);
+    }
+    for (const [letter, list] of map) {
+      groups.push({ letter, items: list });
+    }
+    return groups;
+  }, [items, search, sortMode]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+      <div className="relative bg-white rounded-2xl w-[80vw] h-[80vh] flex flex-col shadow-2xl overflow-hidden z-10">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+          <div className="flex items-center gap-3">
+            <h3 className="text-lg font-bold text-gray-900">{title}</h3>
+            <div className="flex gap-1.5">
+              <button
+                onClick={() => setSortMode("korean")}
+                className={`px-3 py-1 rounded-full text-xs font-medium border transition-all ${
+                  sortMode === "korean"
+                    ? "bg-gray-900 text-white border-gray-900"
+                    : "bg-white text-gray-500 border-gray-200 hover:bg-gray-50"
+                }`}
+              >
+                가나다
+              </button>
+              <button
+                onClick={() => setSortMode("abc")}
+                className={`px-3 py-1 rounded-full text-xs font-medium border transition-all ${
+                  sortMode === "abc"
+                    ? "bg-gray-900 text-white border-gray-900"
+                    : "bg-white text-gray-500 border-gray-200 hover:bg-gray-50"
+                }`}
+              >
+                ABC
+              </button>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <div className="px-5 py-3">
+          <div className="relative">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+            </svg>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all"
+            />
+          </div>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-5 pb-5">
+          {loading ? (
+            <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+              불러오는 중...
+            </div>
+          ) : grouped.length === 0 ? (
+            <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+              {search ? "검색 결과가 없습니다" : "등록된 설비가 없습니다"}
+            </div>
+          ) : (
+            grouped.map((group) => (
+              <div key={group.letter} className="mb-2">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-sm font-bold text-blue-500 min-w-[20px]">{group.letter}</span>
+                  <div className="flex-1 h-px bg-gray-100" />
+                </div>
+                <div className="grid grid-cols-4 min-[900px]:grid-cols-5 gap-x-2 gap-y-1">
+                  {group.items.map((equipment) => {
+                    const displayName = equipment.equipment_name.trim();
+                    const initial = displayName.charAt(0);
+                    const color = getAvatarColor(equipment.equipment_name);
+
+                    return (
+                      <button
+                        key={equipment.id}
+                        onClick={() => { onSelect(equipment); onClose(); }}
+                        className="flex flex-col items-center gap-1 py-1.5 px-3 w-full rounded-xl hover:bg-gray-50 active:scale-95 transition-all cursor-pointer border-none bg-transparent"
+                      >
+                        <div
+                          className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl flex items-center justify-center text-white text-xl sm:text-2xl font-bold shadow-sm shrink-0"
+                          style={{ background: color }}
+                        >
+                          {initial}
+                        </div>
+                        <span className="text-xs sm:text-sm font-medium text-gray-700 text-center leading-tight w-full truncate px-1">
+                          {equipment.equipment_name}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/PopButton.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopButton.tsx
new file mode 100644
index 00000000..317fd5fa
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopButton.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { ButtonHTMLAttributes, forwardRef } from "react";
+import { COLOR_MAP, type PopColor } from "./theme";
+
+type Size = "sm" | "md" | "lg";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  color?: PopColor;
+  size?: Size;
+  icon?: React.ReactNode;
+}
+
+const SIZE_CLASSES: Record<Size, string> = {
+  sm: "min-w-[96px] min-h-[40px] text-sm px-3",
+  md: "min-w-[144px] min-h-[48px] text-base px-4",
+  lg: "min-w-[200px] min-h-[56px] text-lg px-6",
+};
+
+const COMMON =
+  "rounded-xl font-semibold text-white shadow-md transition-all duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2";
+
+const PopButton = forwardRef<HTMLButtonElement, Props>(
+  ({ color = "blue", size = "md", icon, children, className, ...rest }, ref) => {
+    const tokens = COLOR_MAP[color];
+    const classes = [
+      COMMON,
+      SIZE_CLASSES[size],
+      tokens.buttonBg,
+      tokens.buttonBgHover,
+      tokens.ring,
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <button ref={ref} className={classes} {...rest}>
+        {icon && <span className="shrink-0">{icon}</span>}
+        {children}
+      </button>
+    );
+  }
+);
+
+PopButton.displayName = "PopButton";
+
+export default PopButton;
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/PopCard.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopCard.tsx
new file mode 100644
index 00000000..f8f50817
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopCard.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { HTMLAttributes, forwardRef } from "react";
+import { COLOR_MAP, type PopColor } from "./theme";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  selected?: boolean;
+  color?: PopColor;
+  interactive?: boolean;
+}
+
+const BASE =
+  "w-full min-h-[180px] rounded-2xl bg-white border shadow-sm p-4 flex flex-col transition-all";
+
+const PopCard = forwardRef<HTMLDivElement, Props>(
+  (
+    { selected = false, color = "blue", interactive = true, className, ...rest },
+    ref
+  ) => {
+    const tokens = COLOR_MAP[color];
+
+    const classes = [
+      BASE,
+      selected ? tokens.border : "border-gray-200",
+      interactive ? "hover:shadow-md hover:border-gray-300 cursor-pointer" : "",
+      selected ? tokens.ringSelected : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return <div ref={ref} className={classes} {...rest} />;
+  }
+);
+
+PopCard.displayName = "PopCard";
+
+export default PopCard;
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/PopCardGrid.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopCardGrid.tsx
new file mode 100644
index 00000000..36d50ba1
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopCardGrid.tsx
@@ -0,0 +1,77 @@
+import { HTMLAttributes } from "react";
+
+type Cols = 1 | 2 | 3 | 4;
+
+interface ColProfile {
+  base?: Cols;
+  md?: Cols;
+  lg?: Cols;
+  xl?: Cols;
+  "2xl"?: Cols;
+}
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  cols?: ColProfile;
+  gap?: "sm" | "md" | "lg";
+}
+
+const BASE_COLS: Record<Cols, string> = {
+  1: "grid-cols-1",
+  2: "grid-cols-2",
+  3: "grid-cols-3",
+  4: "grid-cols-4",
+};
+const MD_COLS: Record<Cols, string> = {
+  1: "md:grid-cols-1",
+  2: "md:grid-cols-2",
+  3: "md:grid-cols-3",
+  4: "md:grid-cols-4",
+};
+const LG_COLS: Record<Cols, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+};
+const XL_COLS: Record<Cols, string> = {
+  1: "xl:grid-cols-1",
+  2: "xl:grid-cols-2",
+  3: "xl:grid-cols-3",
+  4: "xl:grid-cols-4",
+};
+const XXL_COLS: Record<Cols, string> = {
+  1: "2xl:grid-cols-1",
+  2: "2xl:grid-cols-2",
+  3: "2xl:grid-cols-3",
+  4: "2xl:grid-cols-4",
+};
+
+const GAP: Record<"sm" | "md" | "lg", string> = {
+  sm: "gap-3",
+  md: "gap-4",
+  lg: "gap-6",
+};
+
+export default function PopCardGrid({
+  cols = { base: 1, md: 2, xl: 3 },
+  gap = "md",
+  className,
+  ...rest
+}: Props) {
+  const { base = 1, md, lg, xl, "2xl": xxl } = cols;
+
+  const classes = [
+    "grid w-full",
+    GAP[gap],
+    BASE_COLS[base],
+    md != null ? MD_COLS[md] : "",
+    lg != null ? LG_COLS[lg] : "",
+    xl != null ? XL_COLS[xl] : "",
+    xxl != null ? XXL_COLS[xxl] : "",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return <div className={classes} {...rest} />;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/PopModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopModal.tsx
new file mode 100644
index 00000000..c72499dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/PopModal.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { ReactNode, useEffect } from "react";
+
+type Size = "sm" | "md" | "lg" | "xl";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  size?: Size;
+  title?: string;
+  children: ReactNode;
+  footer?: ReactNode;
+  hideCloseButton?: boolean;
+}
+
+const SIZE_CLASSES: Record<Size, string> = {
+  sm: "w-[min(90vw,420px)] max-h-[80vh]",
+  md: "w-[min(90vw,640px)] max-h-[85vh]",
+  lg: "w-[min(95vw,900px)] max-h-[90vh]",
+  xl: "w-[min(98vw,1200px)] max-h-[95vh]",
+};
+
+export default function PopModal({
+  open,
+  onClose,
+  size = "md",
+  title,
+  children,
+  footer,
+  hideCloseButton = false,
+}: Props) {
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (!open) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      onClick={onClose}
+    >
+      <div
+        className={`${SIZE_CLASSES[size]} bg-white rounded-2xl shadow-xl flex flex-col`}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {(title != null || !hideCloseButton) && (
+          <header className="flex items-center justify-between px-5 py-4 border-b border-gray-200 shrink-0">
+            {title != null && (
+              <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+            )}
+            {!hideCloseButton && (
+              <button
+                type="button"
+                onClick={onClose}
+                className="ml-auto w-10 h-10 flex items-center justify-center rounded-xl text-gray-500 hover:bg-gray-100 text-xl font-medium"
+                aria-label="닫기"
+              >
+                &times;
+              </button>
+            )}
+          </header>
+        )}
+        <main className="flex-1 overflow-y-auto p-4">{children}</main>
+        {footer && (
+          <footer className="border-t border-gray-200 p-4 shrink-0">
+            {footer}
+          </footer>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/SimpleKeypadModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/common/SimpleKeypadModal.tsx
new file mode 100644
index 00000000..228f72e5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/SimpleKeypadModal.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface SimpleKeypadModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (qty: number) => void;
+  maxQty: number;
+  itemName: string;
+  initialQty?: number;
+}
+
+/* ------------------------------------------------------------------ */
+/* Numpad Keys                                                         */
+/* ------------------------------------------------------------------ */
+
+const KEYS = [
+  { label: "7", action: "7" },
+  { label: "8", action: "8" },
+  { label: "9", action: "9" },
+  { label: "\u2190", action: "backspace" },
+  { label: "4", action: "4" },
+  { label: "5", action: "5" },
+  { label: "6", action: "6" },
+  { label: "C", action: "clear" },
+  { label: "1", action: "1" },
+  { label: "2", action: "2" },
+  { label: "3", action: "3" },
+  { label: "MAX", action: "max" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function SimpleKeypadModal({
+  open,
+  onClose,
+  onConfirm,
+  maxQty,
+  itemName,
+  initialQty,
+}: SimpleKeypadModalProps) {
+  const [qty, setQty] = useState("0");
+
+  /* Reset on open */
+  useEffect(() => {
+    if (open) {
+      setQty(initialQty !== undefined && initialQty > 0 ? String(initialQty) : "0");
+    }
+  }, [open, initialQty]);
+
+  const qtyNum = parseInt(qty, 10) || 0;
+  const isOverMax = qtyNum > maxQty;
+
+  /* Numpad input handler */
+  const handleInput = useCallback(
+    (key: string) => {
+      setQty((prev) => {
+        switch (key) {
+          case "backspace":
+            return prev.length <= 1 ? "0" : prev.slice(0, -1);
+          case "clear":
+            return "0";
+          case "max":
+            return String(maxQty);
+          default: {
+            const next = prev === "0" ? key : prev + key;
+            const num = parseInt(next, 10);
+            if (isNaN(num)) return prev;
+            return next;
+          }
+        }
+      });
+    },
+    [maxQty],
+  );
+
+  const handleConfirm = () => {
+    if (qtyNum <= 0) return;
+    const finalQty = Math.min(qtyNum, maxQty);
+    onConfirm(finalQty);
+    onClose();
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      {/* Panel */}
+      <div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
+        {/* Header - blue gradient */}
+        <div
+          className="flex items-center justify-between px-4 py-3"
+          style={{ background: "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)" }}
+        >
+          <span className="text-[13px] text-white/90 bg-white/20 px-3 py-1 rounded-full">
+            {maxQty.toLocaleString()} EA
+          </span>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30 active:scale-95 transition-all"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-4">
+          <p className="text-center text-sm font-semibold text-gray-700 mb-1">
+            수량 입력
+          </p>
+          <p className="text-center text-xs text-gray-400 mb-3 truncate px-2">
+            {itemName}
+          </p>
+
+          {/* Display */}
+          <input
+            type="text"
+            readOnly
+            value={qtyNum.toLocaleString()}
+            className={`w-full px-4 py-3 text-right text-3xl font-bold border-2 rounded-xl bg-gray-50 mb-3 ${
+              isOverMax ? "border-red-300 text-red-500" : "border-gray-200 text-gray-900"
+            }`}
+            style={{ fontVariantNumeric: "tabular-nums" }}
+          />
+
+          {isOverMax && (
+            <p className="text-center text-xs text-red-500 font-medium mb-2">
+              {maxQty.toLocaleString()}EA ({maxQty.toLocaleString()}EA)
+            </p>
+          )}
+
+          {/* Numpad grid: 4x3 + bottom row */}
+          <div className="grid grid-cols-4 gap-2.5">
+            {KEYS.map((key) => (
+              <button
+                key={key.action}
+                onClick={() => handleInput(key.action)}
+                className={`h-14 rounded-xl text-lg font-semibold active:scale-95 transition-all ${
+                  key.action === "backspace" || key.action === "clear"
+                    ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
+                    : key.action === "max"
+                    ? "bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm"
+                    : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                }`}
+              >
+                {key.label}
+              </button>
+            ))}
+
+            {/* Bottom row: 0 (span 2) + Confirm (span 2) */}
+            <button
+              onClick={() => handleInput("0")}
+              className="col-span-2 h-14 rounded-xl text-lg font-semibold bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
+            >
+              0
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={qtyNum <= 0}
+              className={`col-span-2 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all ${
+                qtyNum <= 0 ? "opacity-40 cursor-not-allowed" : ""
+              }`}
+              style={{
+                background: qtyNum <= 0
+                  ? "#9ca3af"
+                  : "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+              }}
+            >
+              확인
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/theme.ts b/frontend/app/(main)/COMPANY_7/pop/_components/common/theme.ts
new file mode 100644
index 00000000..a846f2d7
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/theme.ts
@@ -0,0 +1,107 @@
+// POP 9-color palette. 키는 부위별 완성 리터럴 — JIT 스캔 대상.
+// 동적 문자열 생성 금지(`bg-${x}` 등). 반드시 COLOR_MAP[color].부위 조회로 접근.
+
+export type PopColor =
+  | 'blue'
+  | 'purple'
+  | 'cyan'
+  | 'green'
+  | 'red'
+  | 'pink'
+  | 'teal'
+  | 'orange'
+  | 'amber';
+
+export interface PopColorTokens {
+  buttonBg: string;
+  buttonBgHover: string;
+  ring: string;
+  ringSelected: string;
+  text: string;
+  bg50: string;
+  border: string;
+}
+
+export const COLOR_MAP: Record<PopColor, PopColorTokens> = {
+  blue: {
+    buttonBg: 'bg-gradient-to-b from-blue-400 to-blue-700',
+    buttonBgHover: 'hover:from-blue-500 hover:to-blue-800',
+    ring: 'focus:ring-blue-500',
+    ringSelected: 'ring-2 ring-blue-500',
+    text: 'text-blue-600',
+    bg50: 'bg-blue-50',
+    border: 'border-blue-200',
+  },
+  purple: {
+    buttonBg: 'bg-gradient-to-b from-purple-400 to-purple-700',
+    buttonBgHover: 'hover:from-purple-500 hover:to-purple-800',
+    ring: 'focus:ring-purple-500',
+    ringSelected: 'ring-2 ring-purple-500',
+    text: 'text-purple-600',
+    bg50: 'bg-purple-50',
+    border: 'border-purple-200',
+  },
+  cyan: {
+    buttonBg: 'bg-gradient-to-b from-cyan-400 to-cyan-700',
+    buttonBgHover: 'hover:from-cyan-500 hover:to-cyan-800',
+    ring: 'focus:ring-cyan-500',
+    ringSelected: 'ring-2 ring-cyan-500',
+    text: 'text-cyan-600',
+    bg50: 'bg-cyan-50',
+    border: 'border-cyan-200',
+  },
+  green: {
+    buttonBg: 'bg-gradient-to-b from-green-400 to-green-700',
+    buttonBgHover: 'hover:from-green-500 hover:to-green-800',
+    ring: 'focus:ring-green-500',
+    ringSelected: 'ring-2 ring-green-500',
+    text: 'text-green-600',
+    bg50: 'bg-green-50',
+    border: 'border-green-200',
+  },
+  red: {
+    buttonBg: 'bg-gradient-to-b from-red-400 to-red-700',
+    buttonBgHover: 'hover:from-red-500 hover:to-red-800',
+    ring: 'focus:ring-red-500',
+    ringSelected: 'ring-2 ring-red-500',
+    text: 'text-red-600',
+    bg50: 'bg-red-50',
+    border: 'border-red-200',
+  },
+  pink: {
+    buttonBg: 'bg-gradient-to-b from-pink-400 to-pink-700',
+    buttonBgHover: 'hover:from-pink-500 hover:to-pink-800',
+    ring: 'focus:ring-pink-500',
+    ringSelected: 'ring-2 ring-pink-500',
+    text: 'text-pink-600',
+    bg50: 'bg-pink-50',
+    border: 'border-pink-200',
+  },
+  teal: {
+    buttonBg: 'bg-gradient-to-b from-teal-400 to-teal-700',
+    buttonBgHover: 'hover:from-teal-500 hover:to-teal-800',
+    ring: 'focus:ring-teal-500',
+    ringSelected: 'ring-2 ring-teal-500',
+    text: 'text-teal-600',
+    bg50: 'bg-teal-50',
+    border: 'border-teal-200',
+  },
+  orange: {
+    buttonBg: 'bg-gradient-to-b from-orange-400 to-orange-700',
+    buttonBgHover: 'hover:from-orange-500 hover:to-orange-800',
+    ring: 'focus:ring-orange-500',
+    ringSelected: 'ring-2 ring-orange-500',
+    text: 'text-orange-600',
+    bg50: 'bg-orange-50',
+    border: 'border-orange-200',
+  },
+  amber: {
+    buttonBg: 'bg-gradient-to-b from-amber-400 to-amber-700',
+    buttonBgHover: 'hover:from-amber-500 hover:to-amber-800',
+    ring: 'focus:ring-amber-500',
+    ringSelected: 'ring-2 ring-amber-500',
+    text: 'text-amber-600',
+    bg50: 'bg-amber-50',
+    border: 'border-amber-200',
+  },
+};
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/common/useCartSync.ts b/frontend/app/(main)/COMPANY_7/pop/_components/common/useCartSync.ts
new file mode 100644
index 00000000..7dc8e0b4
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/common/useCartSync.ts
@@ -0,0 +1,27 @@
+/**
+ * useCartSync - 장바구니 DB 동기화 훅 (hardcoded 컴포넌트용 re-export)
+ *
+ * 실제 구현은 @/hooks/pop/useCartSync 에 있고,
+ * 여기서는 hardcoded 입고 컴포넌트들이 쉽게 import할 수 있도록 re-export한다.
+ *
+ * 사용법:
+ * ```typescript
+ * import { useCartSync } from "../common/useCartSync";
+ * const cart = useCartSync("inbound");
+ * ```
+ */
+
+export { useCartSync } from "@/hooks/pop/useCartSync";
+export type {
+  UseCartSyncReturn,
+  CartChanges,
+  CartCategory,
+} from "@/hooks/pop/useCartSync";
+
+// 타입도 함께 re-export (hardcoded 컴포넌트에서 필요할 수 있음)
+export type {
+  CartItem,
+  CartItemWithId,
+  CartSyncStatus,
+  CartItemStatus,
+} from "@/lib/registry/pop-components/types";
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ChangeInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ChangeInbound.tsx
new file mode 100644
index 00000000..de0c5f39
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ChangeInbound.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface ChangeOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ChangeInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_change";
+
+export function ChangeInbound({ cart, onCartClick, saving, inboundType, sourceTable }: ChangeInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<ChangeOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<ChangeOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 교환입고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 교환입고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: ChangeOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">교환입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">교환 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 교환입고 라인, 발주품목 위. 테마 teal */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.teal.buttonBg} ${COLOR_MAP.teal.buttonBgHover} shadow-[0_4px_12px_rgba(13,148,136,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.teal.buttonBg} ${COLOR_MAP.teal.buttonBgHover} shadow-[0_4px_12px_rgba(20,184,166,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">교환 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-teal-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-teal-400 focus:ring-2 focus:ring-teal-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.teal.buttonBg} ${COLOR_MAP.teal.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(20,184,166,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            교환 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 교환 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-teal-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 교환 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-teal-500 rounded-lg hover:bg-teal-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-teal-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-teal-100 text-teal-700 border border-teal-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-teal-50 border-teal-200 hover:bg-teal-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-teal-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.teal.buttonBg} ${COLOR_MAP.teal.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="교환 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ErrorInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ErrorInbound.tsx
new file mode 100644
index 00000000..69f73bfd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ErrorInbound.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface ErrorOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ErrorInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_error";
+
+export function ErrorInbound({ cart, onCartClick, saving, inboundType, sourceTable }: ErrorInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<ErrorOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<ErrorOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 불량입고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 불량입고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: ErrorOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">불량입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">불량 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 불량입고 라인, 발주품목 위. 테마 red */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.red.buttonBg} ${COLOR_MAP.red.buttonBgHover} shadow-[0_4px_12px_rgba(220,38,38,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.red.buttonBg} ${COLOR_MAP.red.buttonBgHover} shadow-[0_4px_12px_rgba(239,68,68,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">불량 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-red-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-red-400 focus:ring-2 focus:ring-red-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.red.buttonBg} ${COLOR_MAP.red.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(239,68,68,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            불량 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 불량 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-red-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 불량 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-red-500 rounded-lg hover:bg-red-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-red-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-red-100 text-red-700 border border-red-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-red-50 border-red-200 hover:bg-red-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-red-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.red.buttonBg} ${COLOR_MAP.red.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="불량 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundCart.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundCart.tsx
new file mode 100644
index 00000000..2518928e
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundCart.tsx
@@ -0,0 +1,735 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, { useCallback, useEffect, useState } from "react";
+import { apiClient } from "@/lib/api/client";
+import { InspectionModal, type InspectionResult } from "./InspectionModal";
+import type { PackageEntry } from "./NumberPadModal";
+
+/* ------------------------------------------------------------------ */
+/* Warehouse type                                                      */
+/* ------------------------------------------------------------------ */
+
+interface Warehouse {
+	warehouse_code: string;
+	warehouse_name: string;
+	warehouse_type?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface CartItem {
+	id: string;
+	/** cart_items 테이블의 PK (UUID) — DB 삭제용 */
+	dbId?: string;
+	/** purchase_detail or purchase_order_mng */
+	source_table: string;
+	/** PK of the source row */
+	source_id: string;
+	purchase_no: string;
+	item_code: string;
+	item_name: string;
+	spec: string;
+	material: string;
+	order_qty: number;
+	remain_qty: number;
+	/** User-entered quantity */
+	inbound_qty: number;
+	unit_price: number;
+	supplier_code: string;
+	supplier_name: string;
+	order_date: string;
+	inspection_required?: boolean;
+	inspection_type?: "self" | "request" | null;
+	packages?: PackageEntry[];
+	inspectionResult?: InspectionResult | null;
+}
+
+interface InboundCartProps {
+	open: boolean;
+	onClose: () => void;
+	items: CartItem[];
+	onUpdateQty: (id: string, qty: number) => void;
+	onRemove: (id: string) => void;
+	onClear: () => void;
+	supplierName?: string;
+	onUpdateItems?: (items: CartItem[]) => void;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function InboundCart({
+	open,
+	onClose,
+	items,
+	onUpdateQty,
+	onRemove,
+	onClear,
+	supplierName,
+	onUpdateItems,
+}: InboundCartProps) {
+	const router = useRouter();
+	const [confirming, setConfirming] = useState(false);
+	const [resultMsg, setResultMsg] = useState<string | null>(null);
+	const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+	const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+	const [inspectionTarget, setInspectionTarget] = useState<CartItem | null>(
+		null,
+	);
+
+	/* Warehouse state */
+	const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+	const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
+
+	/* Fetch warehouses on mount */
+	const fetchWarehouses = useCallback(async () => {
+		try {
+			const res = await apiClient.get("/receiving/warehouses");
+			const data: Warehouse[] = res.data?.data ?? [];
+			setWarehouses(data);
+			if (data.length > 0 && !selectedWarehouse) {
+				setSelectedWarehouse(data[0].warehouse_code);
+			}
+		} catch {
+			// Keep empty - user can still confirm without warehouse
+		}
+	}, [selectedWarehouse]);
+
+	useEffect(() => {
+		if (open) {
+			fetchWarehouses();
+		}
+	}, [open, fetchWarehouses]);
+
+	const totalQty = items.reduce((s, i) => s + i.inbound_qty, 0);
+	const totalAmount = items.reduce(
+		(s, i) => s + i.inbound_qty * i.unit_price,
+		0,
+	);
+
+	/* Toggle select */
+	const toggleSelect = (id: string) => {
+		setSelectedItems((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	const toggleSelectAll = () => {
+		if (selectedItems.size === items.length) {
+			setSelectedItems(new Set());
+		} else {
+			setSelectedItems(new Set(items.map((i) => i.id)));
+		}
+	};
+
+	/* Open inspection modal */
+	const openInspection = (item: CartItem) => {
+		setInspectionTarget(item);
+		setInspectionModalOpen(true);
+	};
+
+	/* Handle inspection complete */
+	const handleInspectionComplete = (result: InspectionResult) => {
+		if (!inspectionTarget || !onUpdateItems) return;
+		const updated = items.map((item) =>
+			item.id === inspectionTarget.id
+				? { ...item, inspectionResult: result }
+				: item,
+		);
+		onUpdateItems(updated);
+		setInspectionTarget(null);
+	};
+
+	/* Confirm inbound — PC receivingController.create 와 동일한 body 구조 */
+	const handleConfirm = async () => {
+		if (items.length === 0) return;
+		if (!selectedWarehouse) {
+			setResultMsg("오류: 입고 창고를 선택해주세요.");
+			return;
+		}
+		setConfirming(true);
+		setResultMsg(null);
+
+		try {
+			// 1. 입고번호 채번 (RCV-YYYY-XXXX)
+			let inboundNumber: string | undefined;
+			try {
+				const numRes = await apiClient.get("/receiving/generate-number");
+				if (numRes.data?.success && numRes.data?.data) {
+					inboundNumber = numRes.data.data;
+				}
+			} catch {
+				// 채번 실패 시 백엔드가 처리
+			}
+
+			// 2. POST /api/receiving — PC create 와 동일한 payload
+			const payload = {
+				inbound_number: inboundNumber,
+				inbound_date: new Date().toISOString().slice(0, 10),
+				warehouse_code: selectedWarehouse,
+				inbound_type: "구매입고",
+				items: items.map((item, idx) => ({
+					inbound_type: "구매입고",
+					item_number: item.item_code,
+					item_name: item.item_name,
+					spec: item.spec || "",
+					material: item.material || "",
+					unit: "EA",
+					inbound_qty: String(item.inbound_qty),
+					unit_price: String(item.unit_price || 0),
+					total_amount: String(
+						(item.inbound_qty || 0) * (item.unit_price || 0),
+					),
+					reference_number: item.purchase_no,
+					supplier_code: item.supplier_code,
+					supplier_name: item.supplier_name,
+					inspection_status: item.inspectionResult?.completed
+						? "검사완료"
+						: item.inspection_required
+							? "검사대기"
+							: "합격",
+					source_table: item.source_table,
+					source_id: item.source_id || item.id,
+					seq_no: idx + 1,
+				})),
+			};
+
+			const res = await apiClient.post("/receiving", payload);
+
+			if (res.data?.success) {
+				// 2-1. 검사 결과가 있는 항목 → inspection_result에 저장
+				const insertedDetails: any[] =
+					res.data?.data?.details ?? res.data?.data?.items ?? [];
+				const inboundHeaderNo =
+					res.data?.data?.header?.inbound_number || inboundNumber || "";
+				const inspectionPromises = items
+					.map((item, idx) => {
+						if (!item.inspectionResult?.completed) return null;
+						const matchedDetail = insertedDetails[idx] ?? {};
+						const referenceId =
+							matchedDetail.id ||
+							matchedDetail.detail_id ||
+							`${inboundHeaderNo}-${idx + 1}`;
+						const goodQty = item.inspectionResult.goodQty || 0;
+						const badQty = item.inspectionResult.badQty || 0;
+						const totalQty = goodQty + badQty;
+						const overallJudgment = badQty === 0 ? "합격" : "불합격";
+						return apiClient
+							.post("/pop/inspection-result", {
+								inspectionNumber: item.inspectionResult.inspectionNumber, // 카트에서 받은 검사번호 재사용
+								referenceTable: "inbound_mng",
+								referenceId,
+								screenId: "pop_inbound_inspection",
+								itemId: item.item_id || null,
+								itemCode: item.item_code,
+								itemName: item.item_name,
+								inspectionType: "입고검사",
+								overallJudgment,
+								totalQty,
+								goodQty,
+								badQty,
+								defectDescription: badQty > 0 ? `불량 ${badQty}건` : "",
+								memo: item.inspectionResult.remark || "",
+								supplierCode: item.supplier_code || null,
+								supplierName: item.supplier_name || null,
+								isCompleted: true,
+								items: item.inspectionResult.items.map((insp: any) => ({
+									inspectionInfoId: insp.id || null,
+									inspectionItemName: insp.inspection_item_name,
+									inspectionStandard: insp.inspection_standard,
+									passCriteria: insp.pass_criteria,
+									isRequired: insp.is_required || "Y",
+									measuredValue: insp.measured_value || "",
+									judgment: insp.result || null,
+								})),
+							})
+							.catch((err) => {
+								console.error(
+									"[inspection_result 저장 실패]",
+									item.item_code,
+									err?.message,
+								);
+							});
+					})
+					.filter(Boolean);
+
+				if (inspectionPromises.length > 0) {
+					await Promise.allSettled(inspectionPromises);
+				}
+
+				// 3. cart_items DB 정리 (백그라운드, 논블로킹)
+				// cart_items.row_key 로 삭제 (row_key = source_id 로 저장됨)
+				const rowKeys = items
+					.map((item) => item.source_id || item.id)
+					.filter(Boolean);
+				if (rowKeys.length > 0) {
+					apiClient
+						.post("/pop/execute-action", {
+							tasks: [{ type: "cart-save" }],
+							cartChanges: {
+								toDelete: rowKeys,
+							},
+						})
+						.catch(() => {
+							// cart cleanup 실패 시 무시
+						});
+				}
+
+				const inboundNo =
+					res.data?.data?.header?.inbound_number || inboundNumber || "";
+				setResultMsg(`${items.length}건 입고 등록 완료! (${inboundNo})`);
+				setTimeout(() => {
+					onClear();
+					onClose();
+					router.push("/COMPANY_7/pop/inbound");
+				}, 1500);
+			} else {
+				setResultMsg(
+					`오류: ${res.data?.message || "입고 등록에 실패했습니다."}`,
+				);
+			}
+		} catch (err: unknown) {
+			const msg =
+				err instanceof Error ? err.message : "입고 등록에 실패했습니다.";
+			setResultMsg(`오류: ${msg}`);
+		} finally {
+			setConfirming(false);
+		}
+	};
+
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
+			{/* Overlay */}
+			<div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+			{/* Panel */}
+			<div className="relative bg-white w-full sm:max-w-lg sm:rounded-2xl rounded-t-2xl max-h-[90vh] flex flex-col shadow-2xl z-10 overflow-hidden">
+				{/* Header */}
+				<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+					<div className="flex items-center gap-3">
+						<div className="w-9 h-9 rounded-xl bg-blue-500 flex items-center justify-center">
+							<svg
+								className="w-5 h-5 text-white"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth={2}
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22"
+								/>
+							</svg>
+						</div>
+						<div>
+							<h3 className="text-lg font-bold text-gray-900">입고 장바구니</h3>
+							{supplierName && (
+								<p className="text-xs text-gray-400">{supplierName}</p>
+							)}
+						</div>
+					</div>
+					<button
+						onClick={onClose}
+						className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+					>
+						<svg
+							className="w-4 h-4"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				{/* Select all bar */}
+				{items.length > 0 && (
+					<div className="flex items-center gap-3 px-5 py-2 border-b border-gray-50 bg-gray-50/50">
+						<button
+							onClick={toggleSelectAll}
+							className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
+								selectedItems.size === items.length
+									? "bg-blue-500 border-blue-500"
+									: "border-gray-300 hover:border-blue-400"
+							}`}
+						>
+							{selectedItems.size === items.length && (
+								<svg
+									className="w-3 h-3 text-white"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={3}
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M4.5 12.75l6 6 9-13.5"
+									/>
+								</svg>
+							)}
+						</button>
+						<span className="text-xs text-gray-500">
+							전체 선택 ({selectedItems.size}/{items.length})
+						</span>
+					</div>
+				)}
+
+				{/* Items */}
+				<div className="flex-1 overflow-y-auto px-5 py-3">
+					{items.length === 0 ? (
+						<div className="flex flex-col items-center justify-center py-12 text-gray-400">
+							<svg
+								className="w-12 h-12 mb-3 opacity-30"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth={1}
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22"
+								/>
+							</svg>
+							<p className="text-sm">담은 품목이 없습니다</p>
+						</div>
+					) : (
+						<div className="flex flex-col gap-3">
+							{items.map((item) => (
+								<div
+									key={item.id}
+									className="bg-gray-50 rounded-xl p-3 border border-gray-100"
+								>
+									{/* Top row: checkbox + name + delete */}
+									<div className="flex items-start gap-2.5 mb-2">
+										{/* Checkbox */}
+										<button
+											onClick={() => toggleSelect(item.id)}
+											className={`w-5 h-5 rounded border-2 flex items-center justify-center transition-all shrink-0 mt-0.5 ${
+												selectedItems.has(item.id)
+													? "bg-blue-500 border-blue-500"
+													: "border-gray-300 hover:border-blue-400"
+											}`}
+										>
+											{selectedItems.has(item.id) && (
+												<svg
+													className="w-3 h-3 text-white"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={3}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M4.5 12.75l6 6 9-13.5"
+													/>
+												</svg>
+											)}
+										</button>
+
+										<div className="flex-1 min-w-0">
+											<p className="text-sm font-semibold text-gray-900 truncate">
+												{item.item_name}
+											</p>
+											<p className="text-[11px] text-gray-400 mt-0.5">
+												{item.item_code} | {item.purchase_no}
+											</p>
+										</div>
+
+										{/* Delete button */}
+										<button
+											onClick={() => onRemove(item.id)}
+											className="w-7 h-7 rounded-lg flex items-center justify-center text-white bg-red-400 hover:bg-red-500 transition-colors shrink-0"
+										>
+											<svg
+												className="w-3.5 h-3.5"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth={2}
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+												/>
+											</svg>
+										</button>
+									</div>
+
+									{/* Spec row */}
+									{(item.spec || item.material) && (
+										<p className="text-[11px] text-gray-400 mb-2 ml-[30px]">
+											{[item.spec, item.material].filter(Boolean).join(" | ")}
+										</p>
+									)}
+
+									{/* Package info */}
+									{item.packages && item.packages.length > 0 && (
+										<div className="ml-[30px] mb-2 px-2.5 py-2 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-lg">
+											<div className="flex items-center gap-2 mb-0.5">
+												<span className="text-[10px] font-bold text-white bg-green-500 px-1.5 py-0.5 rounded-full">
+													포장완료
+												</span>
+												<span className="text-[10px] text-green-600 font-semibold">
+													{"\uD83D\uDCE6"}{" "}
+													{item.packages
+														.map(
+															(p) =>
+																`${p.count}${p.unit.label} x ${p.qtyPerUnit.toLocaleString()} = ${(p.count * p.qtyPerUnit).toLocaleString()}EA`,
+														)
+														.join(", ")}
+												</span>
+											</div>
+										</div>
+									)}
+
+									{/* Inspection row */}
+									{(item.inspection_type === "self" ||
+										item.inspection_type === "request") && (
+										<div className="ml-[30px] mb-2">
+											<button
+												onClick={() => openInspection(item)}
+												className={`flex items-center gap-2 w-full px-3 py-2 rounded-md border text-left transition-all ${
+													item.inspectionResult?.completed
+														? "bg-green-50 border-green-300"
+														: item.inspection_type === "self"
+															? "bg-blue-50 border-blue-200 hover:bg-blue-100"
+															: "bg-amber-50 border-amber-200 hover:bg-amber-100"
+												}`}
+											>
+												<span className="text-[13px] font-semibold">
+													{item.inspection_type === "self"
+														? "검사"
+														: "검사의뢰"}
+												</span>
+												<span
+													className={`text-[11px] px-1.5 py-0.5 rounded ${
+														item.inspection_required
+															? "bg-red-100 text-red-600"
+															: "bg-blue-100 text-blue-600"
+													}`}
+												>
+													{item.inspection_required ? "필수" : "선택"}
+												</span>
+												<span
+													className={`ml-auto text-[12px] font-semibold ${
+														item.inspectionResult?.completed
+															? "text-green-600"
+															: "text-gray-400"
+													}`}
+												>
+													{item.inspectionResult?.completed ? "완료" : "대기"}
+												</span>
+												<svg
+													className="w-4 h-4 text-gray-400 shrink-0"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M8.25 4.5l7.5 7.5-7.5 7.5"
+													/>
+												</svg>
+											</button>
+										</div>
+									)}
+
+									{/* Qty controls */}
+									<div className="flex items-center justify-between ml-[30px]">
+										<div className="flex items-center gap-2">
+											<span className="text-xs text-gray-400">
+												미입고: {item.remain_qty.toLocaleString()}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5">
+											<button
+												onClick={() =>
+													onUpdateQty(
+														item.id,
+														Math.max(1, item.inbound_qty - 1),
+													)
+												}
+												className="w-8 h-8 rounded-lg bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+											>
+												<svg
+													className="w-3.5 h-3.5"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M19.5 12h-15"
+													/>
+												</svg>
+											</button>
+											<input
+												type="number"
+												value={item.inbound_qty}
+												onChange={(e) => {
+													const v = parseInt(e.target.value, 10);
+													if (!isNaN(v) && v >= 0)
+														onUpdateQty(item.id, Math.min(v, item.remain_qty));
+												}}
+												className="w-16 h-8 text-center text-sm font-semibold border border-gray-200 rounded-lg outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100"
+												style={{ fontVariantNumeric: "tabular-nums" }}
+											/>
+											<button
+												onClick={() =>
+													onUpdateQty(
+														item.id,
+														Math.min(item.remain_qty, item.inbound_qty + 1),
+													)
+												}
+												className="w-8 h-8 rounded-lg bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+											>
+												<svg
+													className="w-3.5 h-3.5"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M12 4.5v15m7.5-7.5h-15"
+													/>
+												</svg>
+											</button>
+										</div>
+									</div>
+								</div>
+							))}
+						</div>
+					)}
+				</div>
+
+				{/* Footer summary + confirm */}
+				{items.length > 0 && (
+					<div className="border-t border-gray-100 px-5 py-4">
+						{/* Result message */}
+						{resultMsg && (
+							<div
+								className={`mb-3 p-3 rounded-xl text-sm font-medium ${
+									resultMsg.startsWith("오류")
+										? "bg-red-50 text-red-700"
+										: "bg-green-50 text-green-700"
+								}`}
+							>
+								{resultMsg}
+							</div>
+						)}
+
+						{/* Warehouse selection */}
+						<div className="mb-3">
+							<label className="text-xs font-semibold text-gray-500 mb-1 block">
+								입고 창고
+							</label>
+							<select
+								value={selectedWarehouse}
+								onChange={(e) => setSelectedWarehouse(e.target.value)}
+								className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 bg-white"
+							>
+								{warehouses.length === 0 ? (
+									<option value="">창고 정보 없음</option>
+								) : (
+									warehouses.map((wh) => (
+										<option key={wh.warehouse_code} value={wh.warehouse_code}>
+											{wh.warehouse_name} ({wh.warehouse_code})
+										</option>
+									))
+								)}
+							</select>
+						</div>
+
+						{/* Summary */}
+						<div className="flex items-center justify-between mb-3 text-sm">
+							<span className="text-gray-500">
+								총{" "}
+								<span className="font-bold text-gray-900">{items.length}</span>
+								건
+							</span>
+							<div className="flex items-center gap-3">
+								<span className="text-gray-500">
+									합계 수량:{" "}
+									<span className="font-bold text-blue-600">
+										{totalQty.toLocaleString()}
+									</span>
+								</span>
+								{totalAmount > 0 && (
+									<span className="text-gray-400 text-xs">
+										({totalAmount.toLocaleString()}원)
+									</span>
+								)}
+							</div>
+						</div>
+
+						{/* Buttons */}
+						<div className="flex gap-3">
+							<button
+								onClick={() => {
+									onClear();
+								}}
+								className="flex-1 h-12 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 active:scale-[0.98] transition-all"
+							>
+								전체 삭제
+							</button>
+							<button
+								onClick={handleConfirm}
+								disabled={confirming || items.length === 0}
+								className="flex-[2] h-12 rounded-xl text-sm font-bold text-white active:scale-[0.98] transition-all disabled:opacity-50"
+								style={{
+									background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
+									boxShadow: "0 4px 12px rgba(59,130,246,.3)",
+								}}
+							>
+								{confirming ? "처리 중..." : `입고 확정 (${items.length}건)`}
+							</button>
+						</div>
+					</div>
+				)}
+			</div>
+
+			{/* Inspection Modal */}
+			{inspectionTarget && (
+				<InspectionModal
+					open={inspectionModalOpen}
+					onClose={() => {
+						setInspectionModalOpen(false);
+						setInspectionTarget(null);
+					}}
+					onComplete={handleInspectionComplete}
+					itemCode={inspectionTarget.item_code}
+					itemName={inspectionTarget.item_name}
+					totalQty={inspectionTarget.inbound_qty}
+					initialResult={inspectionTarget.inspectionResult}
+				/>
+			)}
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundCartPage.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundCartPage.tsx
new file mode 100644
index 00000000..376fc546
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundCartPage.tsx
@@ -0,0 +1,1473 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { apiClient } from "@/lib/api/client";
+import { type CartItemWithId, useCartSync } from "../common/useCartSync";
+import { InspectionModal, type InspectionResult } from "./InspectionModal";
+import { NumberPadModal, type PackageEntry } from "./NumberPadModal";
+import { LoadingUnitModal, type LoadingUnitSelection } from "./LoadingUnitModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface Warehouse {
+	warehouse_code: string;
+	warehouse_name: string;
+	warehouse_type?: string;
+}
+
+/** CartItemWithId -> 화면 표시용 파싱 결과 */
+interface CartItemParsed {
+	id: string;
+	rowKey: string;
+	dbId: string;
+	source_table: string;
+	source_id: string;
+	purchase_no: string;
+	item_code: string;
+	item_name: string;
+	spec: string;
+	material: string;
+	order_qty: number;
+	remain_qty: number;
+	inbound_qty: number;
+	unit_price: number;
+	supplier_code: string;
+	supplier_name: string;
+	order_date?: string;
+	inspection_required?: boolean;
+	inspection_type?: "self" | "request" | null;
+	packages?: PackageEntry[];
+	image?: string | null;
+	inbound_type: string;
+	loading_code?: string;
+	loading_name?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helper: CartItemWithId -> CartItemParsed                            */
+/* ------------------------------------------------------------------ */
+function toCartItemParsed(item: CartItemWithId): CartItemParsed {
+	const data = item.row;
+	const inspType =
+		data.inspection_type === "self"
+			? "self"
+			: data.inspection_type === "request"
+				? "request"
+				: null;
+
+	return {
+		id: item.rowKey || String(data.id ?? ""),
+		rowKey: item.rowKey,
+		dbId: item.cartId || "",
+		source_table:
+			item.sourceTable || String(data.source_table ?? ""),
+		source_id: item.rowKey || String(data.id ?? ""),
+		purchase_no: String(data.purchase_no ?? ""),
+		item_code: String(data.item_code ?? ""),
+		item_name: String(data.item_name ?? ""),
+		spec: String(data.spec ?? ""),
+		material: String(data.material ?? ""),
+		order_qty: Number(data.order_qty ?? 0),
+		remain_qty: Number(data.remain_qty ?? 0),
+		inbound_qty: item.quantity,
+		unit_price: Number(data.unit_price ?? 0),
+		supplier_code: String(data.supplier_code ?? ""),
+		supplier_name: String(data.supplier_name ?? ""),
+		order_date: data.order_date ? String(data.order_date) : undefined,
+		inspection_type: inspType,
+		inspection_required: inspType === "self",
+		// packageEntries의 실제 런타임 타입은 NumberPadModal의 PackageEntry[]
+		packages: item.packageEntries as unknown as PackageEntry[] | undefined,
+		image: data.image ? String(data.image) : null,
+		inbound_type: String(data.inbound_type ?? ""),
+		loading_code: data.loading_code ? String(data.loading_code) : undefined,
+		loading_name: data.loading_name ? String(data.loading_name) : undefined,
+	};
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface InboundCartPageProps {
+	backUrl: string;
+}
+
+export function InboundCartPage({ backUrl }: InboundCartPageProps) {
+	const router = useRouter();
+
+	/* Cart sync hook — 입고 카테고리 공통 */
+	const cart = useCartSync("inbound");
+
+	/* Derived: parsed items from cart */
+	const items = useMemo(
+		() => cart.cartItems.map(toCartItemParsed),
+		[cart.cartItems],
+	);
+
+	/* Inspection results (local overlay, keyed by rowKey) */
+	const [inspectionResults, setInspectionResults] = useState<
+		Map<string, InspectionResult>
+	>(new Map());
+
+	/* Selection */
+	const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+
+	/* Auto-select all when items change */
+	useEffect(() => {
+		if (items.length > 0) {
+			setSelectedItems(new Set(items.map((i) => i.id)));
+		}
+	}, [items]);
+
+	/* Sync inspectionResults with cart.row.inspectionResult
+	 * 페이지 새로고침/재진입 시 cart_items에 저장된 inspectionResult를 Map으로 복원.
+	 * 주의: delete는 명시적 검사 취소(handleCancel)에서만 처리.
+	 * (cart.saveToDb 후 row JSON이 stale할 수 있어 delete 로직은 race condition 유발) */
+	useEffect(() => {
+		setInspectionResults((prev) => {
+			const next = new Map(prev);
+			let changed = false;
+			cart.cartItems.forEach((c) => {
+				const stored = (c.row as Record<string, unknown>)?.inspectionResult;
+				if (stored && typeof stored === "object") {
+					// 유효한 검사 결과 → Map에 추가 (덮어쓰지 않음, 로컬 우선)
+					if (!next.has(c.rowKey)) {
+						next.set(c.rowKey, stored as InspectionResult);
+						changed = true;
+					}
+				}
+				// null/undefined여도 Map에서 자동 제거하지 않음 — 명시적 cancel만 처리
+			});
+			// 카트에서 사라진 rowKey만 정리 (실제 카트 삭제 시)
+			const cartKeys = new Set(cart.cartItems.map((c) => c.rowKey));
+			Array.from(next.keys()).forEach((k) => {
+				if (!cartKeys.has(k)) {
+					next.delete(k);
+					changed = true;
+				}
+			});
+			return changed ? next : prev;
+		});
+	}, [cart.cartItems]);
+
+	/* Warehouse */
+	const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+	const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
+	const [warehousePickerOpen, setWarehousePickerOpen] = useState(false);
+
+	/* Inbound number */
+	const [inboundNumber, setInboundNumber] = useState<string>("");
+
+	/* Confirm result modal */
+	const [confirmResult, setConfirmResult] = useState<{
+		inboundNumber: string;
+		items: CartItemParsed[];
+		warehouse: string;
+		date: string;
+	} | null>(null);
+
+	/* Inbound date */
+	const [inboundDate, setInboundDate] = useState<string>(
+		new Date().toISOString().slice(0, 10),
+	);
+
+	/* Confirm state */
+	const [confirming, setConfirming] = useState(false);
+	const [resultMsg, setResultMsg] = useState<string | null>(null);
+
+	/* Inspection modal */
+	const [inspectionModalOpen, setInspectionModalOpen] = useState(false);
+	const [inspectionTarget, setInspectionTarget] =
+		useState<CartItemParsed | null>(null);
+
+	/* Simple keypad modal (for qty edit) */
+	const [numpadOpen, setNumpadOpen] = useState(false);
+	const [numpadTarget, setNumpadTarget] = useState<CartItemParsed | null>(null);
+
+	/* Packaging modal (for package unit registration) */
+	const [packagingOpen, setPackagingOpen] = useState(false);
+	const [packagingTarget, setPackagingTarget] = useState<CartItemParsed | null>(null);
+
+	/* 거래처 필터 */
+	const [selectedSupplierFilter, setSelectedSupplierFilter] = useState<string>("");
+
+	/* 거래처 목록 추출 (중복 제거) */
+	const supplierList = useMemo(() => {
+		const map = new Map<string, string>();
+		items.forEach((item) => {
+			if (item.supplier_code && !map.has(item.supplier_code)) {
+				map.set(item.supplier_code, item.supplier_name);
+			}
+		});
+		return Array.from(map.entries()).map(([code, name]) => ({ code, name }));
+	}, [items]);
+
+	/* 거래처 1개면 자동 선택 */
+	useEffect(() => {
+		if (supplierList.length === 1) {
+			setSelectedSupplierFilter(supplierList[0].code);
+		}
+	}, [supplierList]);
+
+	/* 렌더링용 filteredItems (선택/확정 로직은 전체 items 기반 유지) */
+	const filteredItems = useMemo(() => {
+		if (!selectedSupplierFilter) return items;
+		return items.filter((item) => item.supplier_code === selectedSupplierFilter);
+	}, [items, selectedSupplierFilter]);
+
+	/* ------------------------------------------------------------------ */
+	/* Fetch warehouses                                                    */
+	/* ------------------------------------------------------------------ */
+	const fetchedRef = useRef(false);
+
+	const fetchWarehouses = useCallback(async () => {
+		try {
+			const res = await apiClient.get("/receiving/warehouses");
+			const data: Warehouse[] = res.data?.data ?? [];
+			setWarehouses(data);
+			if (data.length > 0) {
+				setSelectedWarehouse(data[0].warehouse_code);
+			}
+		} catch {
+			/* keep empty */
+		}
+	}, []);
+
+	useEffect(() => {
+		if (fetchedRef.current) return;
+		fetchedRef.current = true;
+		fetchWarehouses();
+	}, [fetchWarehouses]);
+
+	/* ------------------------------------------------------------------ */
+	/* Selection                                                           */
+	/* ------------------------------------------------------------------ */
+	const toggleSelect = (id: string) => {
+		setSelectedItems((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	const toggleSelectAll = () => {
+		if (selectedItems.size === items.length) {
+			setSelectedItems(new Set());
+		} else {
+			setSelectedItems(new Set(items.map((i) => i.id)));
+		}
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Qty edit via numpad                                                  */
+	/* ------------------------------------------------------------------ */
+	const openNumpad = (item: CartItemParsed) => {
+		setNumpadTarget(item);
+		setNumpadOpen(true);
+	};
+
+	const handleNumpadConfirm = (qty: number) => {
+		if (!numpadTarget) return;
+		const finalQty = Math.min(qty, numpadTarget.remain_qty);
+
+		cart.updateItemQuantity(numpadTarget.rowKey, finalQty);
+		setNumpadTarget(null);
+	};
+
+	/* Packaging handlers */
+	const openPackaging = (item: CartItemParsed) => {
+		setPackagingTarget(item);
+		setPackagingOpen(true);
+	};
+
+	const handlePackagingConfirm = (_qty: number, packages: PackageEntry[]) => {
+		if (!packagingTarget) return;
+		cart.updateItemQuantity(
+			packagingTarget.rowKey,
+			packagingTarget.inbound_qty,
+			undefined,
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			packages.length > 0 ? (packages as any) : undefined,
+		);
+		setPackagingTarget(null);
+	};
+
+
+	/* ------------------------------------------------------------------ */
+	/* Remove item                                                         */
+	/* ------------------------------------------------------------------ */
+	const handleRemove = (rowKey: string) => {
+		cart.removeItem(rowKey);
+		setSelectedItems((prev) => {
+			const next = new Set(prev);
+			next.delete(rowKey);
+			return next;
+		});
+		// Auto-save effect below will persist change to DB
+	};
+
+	/* Auto-save: persist dirty changes to DB after a short debounce */
+	const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	useEffect(() => {
+		if (!cart.isDirty || cart.syncStatus === "saving") return;
+		if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+		autoSaveTimerRef.current = setTimeout(() => {
+			cart.saveToDb().catch(() => {});
+		}, 500);
+		return () => {
+			if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+		};
+	}, [cart.isDirty, cart.syncStatus, cart]);
+
+	/* ------------------------------------------------------------------ */
+	/* Inspection                                                          */
+	/* ------------------------------------------------------------------ */
+	const openInspection = (item: CartItemParsed) => {
+		setInspectionTarget(item);
+		setInspectionModalOpen(true);
+	};
+
+	const handleInspectionComplete = (result: InspectionResult) => {
+		if (!inspectionTarget) return;
+		const targetRowKey = inspectionTarget.rowKey;
+		setInspectionResults((prev) => {
+			const next = new Map(prev);
+			next.set(targetRowKey, result);
+			return next;
+		});
+		// cart_items.row_data에 검사 결과 저장 (페이지 새로고침해도 유지)
+		cart.updateItemRow(targetRowKey, { inspectionResult: result });
+		setInspectionTarget(null);
+		// 즉시 DB 저장 (자동저장 디바운스를 기다리지 않음)
+		setTimeout(() => {
+			cart
+				.saveToDb()
+				.catch((err) => console.error("[검사 결과 저장 실패]", err));
+		}, 100);
+	};
+
+	/* Pass inspection (non-required only) */
+	const handlePassInspection = (rowKey: string) => {
+		const item = items.find((i) => i.rowKey === rowKey);
+		if (!item) return;
+		const result: InspectionResult = {
+			items: [],
+			goodQty: item.inbound_qty,
+			badQty: 0,
+			remark: "pass",
+			completed: true,
+		};
+		setInspectionResults((prev) => {
+			const next = new Map(prev);
+			next.set(rowKey, result);
+			return next;
+		});
+		cart.updateItemRow(rowKey, { inspectionResult: result });
+	};
+
+	const getInspectionResult = (rowKey: string): InspectionResult | null => {
+		return inspectionResults.get(rowKey) || null;
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Validation: required inspections                                    */
+	/* ------------------------------------------------------------------ */
+	const selectedItemsList = items.filter((i) => selectedItems.has(i.id));
+
+	/* Loading unit modal — 선택된 품목 일괄 적재함 적용 */
+	const [loadingModalOpen, setLoadingModalOpen] = useState(false);
+
+	const openLoadingModal = () => {
+		setLoadingModalOpen(true);
+	};
+
+	const selectedPkgCodes = useMemo(() => {
+		return selectedItemsList
+			.filter((item) => item.packages && item.packages.length > 0)
+			.map((item) => item.packages![0].unit.value);
+	}, [selectedItemsList]);
+
+	const handleLoadingSelect = (lu: LoadingUnitSelection) => {
+		for (const item of selectedItemsList) {
+			cart.updateItemRow(item.rowKey, {
+				loading_code: lu.loading_code,
+				loading_name: lu.loading_name,
+			});
+		}
+	};
+
+	const handleLoadingClear = () => {
+		for (const item of selectedItemsList) {
+			cart.updateItemRow(item.rowKey, {
+				loading_code: null,
+				loading_name: null,
+			});
+		}
+	};
+
+	// CEO 정책 (2026-04-09 시연 결정): 검사 필수 항목 미완료 시 확정 차단
+	// 검사 빠진 입고가 검사관리에서 추적 안 되므로, 입력 시점에 막음
+	const hasUnfinishedRequiredInspection = selectedItemsList.some(
+		(item) =>
+			item.inspection_required &&
+			item.inspection_type === "self" &&
+			!getInspectionResult(item.rowKey)?.completed,
+	);
+
+	/* ------------------------------------------------------------------ */
+	/* Confirm inbound                                                     */
+	/* ------------------------------------------------------------------ */
+	const handleConfirm = async () => {
+		if (selectedItemsList.length === 0) return;
+
+		if (!selectedWarehouse) {
+			setResultMsg("오류: 입고 창고를 선택해주세요.");
+			return;
+		}
+
+		// 검사 미완료여도 확정 가능. 단지 inspection_result에 안 들어가거나 "대기" 상태로 기록.
+		// (CEO 정책: 입고 자체는 진행, 검사 결과만 누락/대기 상태로 표시)
+
+		setConfirming(true);
+		setResultMsg(null);
+
+		try {
+			// 확정 시점에 채번 (동시접속 충돌 방지)
+			// numbering_rules 테이블에서 채번규칙 직접 조회
+			let finalNumber = "";
+			try {
+				const ruleRes: any = await apiClient
+					.get("/numbering-rules/by-column/inbound_mng/inbound_number")
+					.catch(() => null);
+				const ruleId = ruleRes?.data?.data?.ruleId;
+				const url =
+					ruleId
+						? `/receiving/generate-number?ruleId=${encodeURIComponent(ruleId)}`
+						: "/receiving/generate-number";
+				const numRes = await apiClient.get(url);
+				if (numRes.data?.success && numRes.data?.data) {
+					finalNumber = numRes.data.data;
+					setInboundNumber(finalNumber);
+				}
+			} catch {
+				/* backend will handle */
+			}
+
+			// POST /api/receiving -- same payload structure as PC
+			// 헤더 inbound_type: 단일이면 그대로, 혼합이면 "혼합입고"
+			const uniqueTypes = [...new Set(selectedItemsList.map((i) => i.inbound_type).filter(Boolean))];
+			const headerInboundType = uniqueTypes.length === 1 ? uniqueTypes[0] : (uniqueTypes.length > 1 ? "혼합입고" : "입고");
+
+			const payload = {
+				inbound_number: finalNumber,
+				inbound_date: inboundDate,
+				warehouse_code: selectedWarehouse,
+				inbound_type: headerInboundType,
+				items: selectedItemsList.map((item, idx) => {
+					const inspResult = getInspectionResult(item.rowKey);
+					return {
+						inbound_type: item.inbound_type || headerInboundType,
+						item_number: item.item_code,
+						item_name: item.item_name,
+						spec: item.spec || "",
+						material: item.material || "",
+						unit: "EA",
+						inbound_qty: String(item.inbound_qty),
+						unit_price: String(item.unit_price || 0),
+						total_amount: String(
+							(item.inbound_qty || 0) * (item.unit_price || 0),
+						),
+						reference_number: item.purchase_no,
+						supplier_code: item.supplier_code,
+						supplier_name: item.supplier_name,
+						inbound_status: "입고완료",
+						inspection_status: inspResult?.completed
+							? "검사완료"
+							: item.inspection_required
+								? "검사대기"
+								: "합격",
+						source_table: item.source_table,
+						source_id: item.source_id || item.id,
+						seq_no: idx + 1,
+					};
+				}),
+			};
+
+			const res = await apiClient.post("/receiving", payload);
+
+			if (res.data?.success) {
+				// 검사 결과를 inspection_result_mng + inspection_result에 저장
+				const insertedDetails: Array<Record<string, unknown>> =
+					(res.data?.data?.details as Array<Record<string, unknown>>) ??
+					(res.data?.data?.items as Array<Record<string, unknown>>) ??
+					[];
+				const inboundHeaderNo: string =
+					(res.data?.data?.header as { inbound_number?: string } | undefined)
+						?.inbound_number ||
+					finalNumber ||
+					"";
+				const inspectionPromises = selectedItemsList
+					.map((item, idx) => {
+						const inspResult = getInspectionResult(item.rowKey);
+						if (!inspResult?.completed) return null;
+						const matchedDetail = insertedDetails[idx] ?? {};
+						const referenceId =
+							(matchedDetail.id as string) ||
+							(matchedDetail.detail_id as string) ||
+							`${inboundHeaderNo}-${idx + 1}`;
+						const goodQty = inspResult.goodQty || 0;
+						const badQty = inspResult.badQty || 0;
+						const totalQty = goodQty + badQty;
+						const overallJudgment = badQty === 0 ? "합격" : "불합격";
+						return apiClient
+							.post("/pop/inspection-result", {
+								inspectionNumber: inspResult.inspectionNumber,
+								referenceTable: "inbound_mng",
+								referenceId,
+								screenId: "pop_inbound_inspection",
+								itemId: item.item_id || null,
+								itemCode: item.item_code,
+								itemName: item.item_name,
+								inspectionType: "입고검사",
+								overallJudgment,
+								totalQty,
+								goodQty,
+								badQty,
+								defectDescription: badQty > 0 ? `불량 ${badQty}건` : "",
+								memo: inspResult.remark || "",
+								supplierCode: item.supplier_code || null,
+								supplierName: item.supplier_name || null,
+								isCompleted: true,
+								items: inspResult.items.map((insp) => ({
+									inspectionInfoId: insp.id || null,
+									inspectionItemName: insp.inspection_item_name,
+									inspectionStandard: insp.inspection_standard,
+									passCriteria: insp.pass_criteria,
+									isRequired: insp.is_required || "Y",
+									measuredValue: insp.measured_value || "",
+									judgment: insp.result || null,
+								})),
+							})
+							.catch((err: unknown) => {
+								const e = err as { message?: string };
+								console.error(
+									"[inspection_result 저장 실패]",
+									item.item_code,
+									e?.message,
+								);
+							});
+					})
+					.filter(Boolean);
+				if (inspectionPromises.length > 0) {
+					await Promise.all(inspectionPromises);
+				}
+
+				// Remove confirmed items from cart - direct DB delete for reliability
+				const confirmedItems = [...selectedItemsList];
+				const { dataApi } = await import("@/lib/api/data");
+				const confirmPromises = confirmedItems
+					.filter((item) => item.dbId)
+					.map((item) =>
+						dataApi
+							.updateRecord("cart_items", item.dbId, { status: "confirmed" })
+							.catch(() => {}),
+					);
+				await Promise.all(confirmPromises);
+
+				// Also clean up local state via useCartSync
+				for (const item of confirmedItems) {
+					cart.removeItem(item.rowKey);
+				}
+				// Reload from DB to sync state
+				await cart.loadFromDb();
+
+				const inboundNo =
+					res.data?.data?.header?.inbound_number || finalNumber || "";
+
+				// 결과 모달 표시 (바로 이동하지 않음)
+				setConfirmResult({
+					inboundNumber: inboundNo,
+					items: confirmedItems,
+					warehouse:
+						warehouses.find((w) => w.warehouse_code === selectedWarehouse)
+							?.warehouse_name || selectedWarehouse,
+					date: inboundDate,
+				});
+				setResultMsg(null);
+			} else {
+				setResultMsg(
+					`오류: ${res.data?.message || "입고 등록에 실패했습니다."}`,
+				);
+			}
+		} catch (err: unknown) {
+			const msg =
+				err instanceof Error ? err.message : "입고 등록에 실패했습니다.";
+			setResultMsg(`오류: ${msg}`);
+		} finally {
+			setConfirming(false);
+		}
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Helpers                                                             */
+	/* ------------------------------------------------------------------ */
+	const selectedWarehouseName =
+		warehouses.find((w) => w.warehouse_code === selectedWarehouse)
+			?.warehouse_name || selectedWarehouse;
+
+	const totalQty = selectedItemsList.reduce((s, i) => s + i.inbound_qty, 0);
+
+	/* ------------------------------------------------------------------ */
+	/* Render                                                              */
+	/* ------------------------------------------------------------------ */
+	return (
+		<div className="flex flex-col gap-4 pb-4">
+			<style>{`@keyframes cartMarquee { 0%,20% { transform: translateX(0); } 80%,100% { transform: translateX(calc(-100% + 100cqi)); } }`}</style>
+			{/* ===== Header ===== */}
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-3">
+					<button
+						onClick={() => router.back()}
+						className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+					>
+						<svg
+							className="w-5 h-5"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M15.75 19.5L8.25 12l7.5-7.5"
+							/>
+						</svg>
+					</button>
+					<div>
+						<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">
+							입고 장바구니
+						</h1>
+					</div>
+				</div>
+
+				{/* Confirm button (header only) */}
+				<button
+					onClick={handleConfirm}
+					disabled={
+						confirming ||
+						selectedItemsList.length === 0 ||
+						hasUnfinishedRequiredInspection
+					}
+					className="flex items-center gap-1.5 px-4 h-10 rounded-xl text-sm font-bold text-white active:scale-[0.98] transition-all disabled:opacity-40"
+					style={{
+						background:
+							selectedItemsList.length > 0 && !hasUnfinishedRequiredInspection
+								? "linear-gradient(to bottom, #34d399, #059669)"
+								: "#d1d5db",
+						boxShadow:
+							selectedItemsList.length > 0 && !hasUnfinishedRequiredInspection
+								? "0 4px 12px rgba(5,150,105,0.3)"
+								: "none",
+					}}
+				>
+					<svg
+						className="w-4 h-4"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth={2.5}
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M4.5 12.75l6 6 9-13.5"
+						/>
+					</svg>
+					{confirming ? "처리중..." : "확정"}
+				</button>
+			</div>
+
+			{/* ===== Info banner ===== */}
+			<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3 sm:p-4">
+				<div className="flex items-center gap-2 mb-3 pb-2 border-b border-gray-50">
+					<span className="text-[11px] text-gray-400">{inboundDate}</span>
+					{selectedWarehouseName && (
+						<span className="text-[11px] text-gray-400">
+							| {selectedWarehouseName}
+						</span>
+					)}
+					<span className="ml-auto text-[11px] font-mono text-gray-400">
+						{inboundNumber || "확정 시 자동생성"}
+					</span>
+				</div>
+
+				{/* Info fields: 4 columns (거래처 + 입고일자 + 창고 + 입고번호) */}
+				<div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+					{/* 거래처 드롭다운 */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							거래처
+						</label>
+						<select
+							value={selectedSupplierFilter}
+							onChange={(e) => setSelectedSupplierFilter(e.target.value)}
+							disabled={supplierList.length === 0}
+							className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 bg-white"
+						>
+							{supplierList.length === 0 ? (
+								<option value="">거래처 없음</option>
+							) : (
+								supplierList.map((s) => (
+									<option key={s.code} value={s.code}>
+										{s.name}
+									</option>
+								))
+							)}
+						</select>
+					</div>
+					{/* Inbound date */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							입고일자
+						</label>
+						<input
+							type="date"
+							value={inboundDate}
+							onChange={(e) => setInboundDate(e.target.value)}
+							className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 bg-white"
+						/>
+					</div>
+
+					{/* Warehouse selector - card-style touch button */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							창고
+						</label>
+						<button
+							onClick={() => setWarehousePickerOpen(true)}
+							className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-left outline-none hover:border-blue-300 transition-all bg-white flex items-center justify-between"
+						>
+							<span
+								className={
+									selectedWarehouse
+										? "text-gray-900 font-medium"
+										: "text-gray-400"
+								}
+							>
+								{selectedWarehouseName || "창고 선택"}
+							</span>
+							<svg
+								className="w-4 h-4 text-gray-400 shrink-0"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth={2}
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M8.25 15l3.75-3.75L15.75 15"
+								/>
+							</svg>
+						</button>
+					</div>
+
+					{/* Inbound number (readonly -- 확정 시점에 채번) */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							입고번호
+						</label>
+						<div className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm bg-gray-50 font-mono">
+							{inboundNumber ? (
+								<span className="text-gray-700">{inboundNumber}</span>
+							) : (
+								<span className="text-gray-400">확정 시 자동생성</span>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* ===== Select all bar (1번 변경: 선택해제 버튼을 좌측 버튼 형태로 이동) ===== */}
+			{items.length > 0 && (
+				<div className="flex items-center gap-3 px-1">
+					<button
+						onClick={toggleSelectAll}
+						className={`w-6 h-6 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
+							selectedItems.size === items.length
+								? "bg-blue-500 border-blue-500"
+								: "border-gray-300 hover:border-blue-400"
+						}`}
+					>
+						{selectedItems.size === items.length && (
+							<svg
+								className="w-3.5 h-3.5 text-white"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth={3}
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M4.5 12.75l6 6 9-13.5"
+								/>
+							</svg>
+						)}
+					</button>
+					<span className="text-sm font-semibold text-gray-700">
+						담은 품목 <span className="text-blue-600">{items.length}</span>
+					</span>
+					<button
+						onClick={toggleSelectAll}
+						className="px-2.5 py-1 rounded-md text-xs font-medium bg-blue-50 text-blue-600 border border-blue-200 hover:bg-blue-100 active:scale-95 transition-all"
+					>
+						{selectedItems.size === items.length ? "선택 해제" : "전체 선택"}
+					</button>
+					<div className="flex-1" />
+					<button
+						onClick={openLoadingModal}
+						disabled={selectedItemsList.length === 0}
+						className="flex items-center gap-1.5 px-4 h-10 rounded-xl text-sm font-bold bg-purple-50 text-purple-600 border border-purple-200 hover:bg-purple-100 active:scale-[0.98] transition-all disabled:opacity-40"
+					>
+						{"\uD83D\uDEA2"} 적재함
+					</button>
+				</div>
+			)}
+
+			{/* ===== Items list ===== */}
+			{cart.loading ? (
+				<div className="flex items-center justify-center py-16 text-sm text-gray-400">
+					<svg
+						className="animate-spin w-5 h-5 mr-2 text-blue-500"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<circle
+							className="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							strokeWidth="4"
+						/>
+						<path
+							className="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+						/>
+					</svg>
+					불러오는 중...
+				</div>
+			) : items.length === 0 ? (
+				<div className="flex flex-col items-center justify-center py-16 text-gray-400">
+					<svg
+						className="w-16 h-16 mb-4 opacity-20"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth={1}
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22"
+						/>
+					</svg>
+					<p className="text-sm font-medium text-gray-500 mb-1">
+						담은 품목이 없습니다
+					</p>
+					<p className="text-xs text-gray-400 mb-4">
+						입고 화면에서 품목을 담아주세요
+					</p>
+					<button
+						onClick={() => router.push(backUrl)}
+						className={`px-4 py-2.5 rounded-xl text-sm font-semibold text-white active:scale-95 transition-all ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} shadow-[0_4px_12px_rgba(59,130,246,0.3)]`}
+					>
+						입고 화면으로 이동
+					</button>
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					{(() => {
+						/* 방식 A: 적재함 > 입고유형 그룹핑 */
+						const loadingGroups = new Map<string, { loading_name: string; items: typeof filteredItems }>();
+						const ungrouped: typeof filteredItems = [];
+
+						filteredItems.forEach((item) => {
+							if (item.loading_code) {
+								const existing = loadingGroups.get(item.loading_code);
+								if (existing) {
+									existing.items.push(item);
+								} else {
+									loadingGroups.set(item.loading_code, {
+										loading_name: item.loading_name || item.loading_code,
+										items: [item],
+									});
+								}
+							} else {
+								ungrouped.push(item);
+							}
+						});
+
+						const renderTypeGroupedCards = (groupItems: typeof filteredItems) => {
+							const typeGroups = groupItems.reduce<Record<string, typeof filteredItems>>((acc, it) => {
+								const type = it.inbound_type || "입고";
+								if (!acc[type]) acc[type] = [];
+								acc[type].push(it);
+								return acc;
+							}, {});
+							return Object.entries(typeGroups).map(([type, typeItems]) => (
+								<div key={type}>
+									<div className="flex items-center gap-2 mb-2">
+										<span className="text-xs font-bold text-gray-500">{type}</span>
+										<div className="flex-1 h-px bg-gray-200" />
+									</div>
+									<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+									{typeItems.map((item) => {
+						const inspResult = getInspectionResult(item.rowKey);
+						return (
+							<div
+								key={item.id}
+								className={`relative rounded-xl p-3 transition-all ${
+									selectedItems.has(item.id)
+										? "ring-2 ring-blue-500 border border-blue-500 bg-gradient-to-br from-blue-50/80 to-indigo-50/50"
+										: "border border-gray-200 bg-white"
+								}`}
+							>
+
+								{/* === Header row: checkbox + item code + item name === */}
+								<div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+									{/* Checkbox */}
+									<button
+										onClick={() => toggleSelect(item.id)}
+										className={`w-6 h-6 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
+											selectedItems.has(item.id)
+												? "bg-blue-500 border-blue-500"
+												: "border-gray-300 hover:border-blue-400"
+										}`}
+									>
+										{selectedItems.has(item.id) && (
+											<svg
+												className="w-3.5 h-3.5 text-white"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth={3}
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M4.5 12.75l6 6 9-13.5"
+												/>
+											</svg>
+										)}
+									</button>
+									<span className="text-[11px] text-gray-400 font-medium shrink-0">
+										{item.item_code}
+									</span>
+									<span className="text-[13px] font-semibold text-gray-900 flex-1 overflow-hidden whitespace-nowrap min-w-0" style={{ containerType: "inline-size" }}>
+										<span
+											className="inline-block"
+											style={(item.inspection_type === "self" || item.inspection_type === "request") ? { animation: "cartMarquee 3s ease-in-out infinite alternate" } : undefined}
+										>{item.item_name}</span>
+									</span>
+									{/* Inspection button */}
+									{(item.inspection_type === "self" || item.inspection_type === "request") && (
+										<button
+											onClick={() => openInspection(item)}
+											className={`min-w-[80px] text-[9px] font-bold px-[3px] py-[6px] rounded shrink-0 whitespace-nowrap active:scale-95 transition-all text-center ${
+												inspResult?.completed
+													? "bg-green-100 text-green-700 border border-green-200"
+													: "bg-red-100 text-red-700 border border-red-200"
+											}`}
+										>
+											{inspResult?.completed ? "검사완료" : item.inspection_type === "self" ? "검사필수" : "검사선택"}
+										</button>
+									)}
+								</div>
+
+								{/* === Body row: image + info + action === */}
+								<div className="flex gap-2.5">
+									{/* Product image */}
+									<div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+										{item.image ? (
+											<img
+												src={item.image}
+												alt={item.item_name}
+												className="w-full h-full object-cover rounded-lg"
+											/>
+										) : (
+											<span className="text-2xl text-gray-300">
+												{"\uD83D\uDCE6"}
+											</span>
+										)}
+									</div>
+
+									{/* Info columns */}
+									<div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												발주일
+											</span>
+											<span className="font-medium text-gray-700">
+												{item.order_date || "-"}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												발주번호
+											</span>
+											<span className="font-medium text-gray-700 truncate">
+												{item.purchase_no || "-"}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												발주수량
+											</span>
+											<span className="font-medium text-gray-700">
+												{item.order_qty.toLocaleString()}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												미입고
+											</span>
+											<span className="font-bold text-red-500">
+												{item.remain_qty.toLocaleString()}
+											</span>
+										</div>
+									</div>
+
+									{/* Action column: qty + inspection + delete */}
+									<div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+										{/* Qty display - clickable to open simple keypad */}
+										<button
+											onClick={() => openNumpad(item)}
+											className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all bg-blue-50 border-blue-200 hover:bg-blue-100 cursor-pointer active:scale-95"
+										>
+											<span
+												className="text-sm font-bold text-blue-700"
+												style={{ fontVariantNumeric: "tabular-nums" }}
+											>
+												{item.inbound_qty.toLocaleString()}
+											</span>
+											<span className="text-[10px] text-gray-400">EA</span>
+										</button>
+
+										{/* Delete button */}
+										<button
+											onClick={() => handleRemove(item.rowKey)}
+											className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+										>
+											<svg
+												className="w-3.5 h-3.5"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth={2}
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+												/>
+											</svg>
+											삭제
+										</button>
+
+									</div>
+								</div>
+
+								{/* Packaging button - full width (포장 미완료 시만 표시) */}
+								{!(item.packages && item.packages.length > 0) && (
+									<div className="mt-1.5">
+										<button
+											onClick={() => openPackaging(item)}
+											className="w-full flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-xs font-semibold active:scale-95 transition-all bg-amber-50 border border-amber-200 text-amber-700 hover:bg-amber-100"
+										>
+											<span>{"\uD83D\uDCE6"}</span>
+											포장단위
+										</button>
+									</div>
+								)}
+
+								{/* === Package info (포장 등록 시 — 클릭하면 모달 열림) === */}
+								{item.packages && item.packages.length > 0 && (() => {
+									const packagedQty = item.packages.reduce(
+										(s, p) => s + p.count * p.qtyPerUnit,
+										0,
+									);
+									const unpacked = Math.max(0, item.inbound_qty - packagedQty);
+									const isComplete = unpacked === 0;
+									return (
+									<div
+										onClick={() => openPackaging(item)}
+										className={`mt-2.5 px-3 py-2 border rounded-lg cursor-pointer active:scale-95 transition-all ${
+											isComplete
+												? "bg-gradient-to-r from-green-50 to-emerald-50 border-green-200"
+												: "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200"
+										}`}
+									>
+										<div className="flex items-center justify-between mb-1">
+											<span
+												className={`text-[10px] font-bold text-white px-2 py-0.5 rounded-full ${
+													isComplete
+														? "bg-gradient-to-r from-green-500 to-green-600"
+														: "bg-gradient-to-r from-amber-500 to-orange-500"
+												}`}
+											>
+												{isComplete ? "포장완료" : "부분포장"}
+											</span>
+											<span
+												className={`text-[11px] font-semibold ${
+													isComplete ? "text-green-600" : "text-amber-600"
+												}`}
+											>
+												{packagedQty.toLocaleString()}{" "}
+												EA
+											</span>
+										</div>
+										<div className="grid grid-cols-2 gap-x-2 gap-y-0.5">
+											{item.packages.map((pkg, idx) => (
+												<div
+													key={idx}
+													className="flex items-center gap-1.5 text-[11px] text-gray-600"
+												>
+													<span>{pkg.unit.icon}</span>
+													<span>
+														{pkg.count}
+														{pkg.unit.label} x {pkg.qtyPerUnit.toLocaleString()}EA
+														= {(pkg.count * pkg.qtyPerUnit).toLocaleString()}EA
+													</span>
+												</div>
+											))}
+										</div>
+										{!isComplete && (
+											<div className="mt-1 pt-1 border-t border-amber-200 flex items-center justify-between text-[11px]">
+												<span className="text-amber-700 font-medium">미포장</span>
+												<span className="font-bold text-amber-700">
+													{unpacked.toLocaleString()} EA
+												</span>
+											</div>
+										)}
+									</div>
+									);
+								})()}
+										</div>
+									);
+								})}
+									</div>
+								</div>
+							));
+						};
+
+						return (
+							<>
+								{Array.from(loadingGroups.entries()).map(([code, group]) => (
+									<div key={code} className="rounded-2xl border-2 border-purple-200 bg-gradient-to-br from-purple-50/60 to-violet-50/40 p-3">
+										<div className="flex items-center gap-2 mb-3">
+											<span className="text-lg">{"\uD83D\uDEA2"}</span>
+											<span className="text-sm font-bold text-purple-700">{group.loading_name}</span>
+											<span className="text-[10px] text-purple-400 font-mono">{code}</span>
+											<span className="text-[10px] text-purple-500 bg-purple-100 px-1.5 py-0.5 rounded-full">{group.items.length}건</span>
+										</div>
+										{renderTypeGroupedCards(group.items)}
+									</div>
+								))}
+								{ungrouped.length > 0 && renderTypeGroupedCards(ungrouped)}
+							</>
+						);
+					})()}
+				</div>
+			)}
+
+			{/* ===== Result toast (only when message exists) ===== */}
+			{resultMsg && (
+				<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
+					<div
+						className={`px-4 py-3 rounded-xl text-sm font-medium shadow-lg ${
+							resultMsg.startsWith("오류")
+								? "bg-red-50 text-red-700 border border-red-200"
+								: "bg-green-50 text-green-700 border border-green-200"
+						}`}
+					>
+						{resultMsg}
+					</div>
+				</div>
+			)}
+
+			{/* ===== Warehouse picker modal ===== */}
+			{warehousePickerOpen && (
+				<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
+					<div
+						className="absolute inset-0 bg-black/50"
+						onClick={() => setWarehousePickerOpen(false)}
+					/>
+					<div className="relative bg-white w-full sm:max-w-md sm:rounded-2xl rounded-t-2xl max-h-[80vh] flex flex-col shadow-2xl z-10 overflow-hidden">
+						{/* Header */}
+						<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+							<h3 className="text-lg font-bold text-gray-900">창고 선택</h3>
+							<button
+								onClick={() => setWarehousePickerOpen(false)}
+								className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+							>
+								<svg
+									className="w-4 h-4"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={2}
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						</div>
+
+						{/* Warehouse list */}
+						<div className="flex-1 overflow-y-auto p-4">
+							{warehouses.length === 0 ? (
+								<p className="text-center text-sm text-gray-400 py-8">
+									등록된 창고가 없습니다
+								</p>
+							) : (
+								<div className="flex flex-col gap-2">
+									{warehouses.map((wh) => (
+										<button
+											key={wh.warehouse_code}
+											onClick={() => {
+												setSelectedWarehouse(wh.warehouse_code);
+												setWarehousePickerOpen(false);
+											}}
+											className={`flex items-center gap-3 p-4 rounded-xl border transition-all active:scale-[0.98] text-left ${
+												selectedWarehouse === wh.warehouse_code
+													? "border-blue-400 bg-blue-50 shadow-sm"
+													: "border-gray-200 bg-white hover:border-blue-300"
+											}`}
+										>
+											<div
+												className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${
+													selectedWarehouse === wh.warehouse_code
+														? "bg-blue-500 text-white"
+														: "bg-gray-100 text-gray-400"
+												}`}
+											>
+												<svg
+													className="w-5 h-5"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 0h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z"
+													/>
+												</svg>
+											</div>
+											<div className="flex-1 min-w-0">
+												<p className="text-sm font-semibold text-gray-900">
+													{wh.warehouse_name}
+												</p>
+												<p className="text-[11px] text-gray-400">
+													{wh.warehouse_code}
+													{wh.warehouse_type ? ` | ${wh.warehouse_type}` : ""}
+												</p>
+											</div>
+											{selectedWarehouse === wh.warehouse_code && (
+												<svg
+													className="w-5 h-5 text-blue-500 shrink-0"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2.5}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M4.5 12.75l6 6 9-13.5"
+													/>
+												</svg>
+											)}
+										</button>
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* ===== Inspection Modal ===== */}
+			{inspectionTarget && (
+				<InspectionModal
+					open={inspectionModalOpen}
+					onClose={() => {
+						setInspectionModalOpen(false);
+						setInspectionTarget(null);
+					}}
+					onComplete={handleInspectionComplete}
+					onCancel={() => {
+						// 검사 결과 무효화 (완료 → 대기 풀림)
+						const targetRowKey = inspectionTarget.rowKey;
+						setInspectionResults((prev) => {
+							const next = new Map(prev);
+							next.delete(targetRowKey);
+							return next;
+						});
+						cart.updateItemRow(targetRowKey, { inspectionResult: null });
+						setTimeout(() => cart.saveToDb().catch(() => {}), 100);
+					}}
+					itemCode={inspectionTarget.item_code}
+					itemName={inspectionTarget.item_name}
+					totalQty={inspectionTarget.inbound_qty}
+					initialResult={getInspectionResult(inspectionTarget.rowKey)}
+				/>
+			)}
+
+			{/* ===== SimpleKeypad Modal (qty edit) ===== */}
+			{numpadTarget && (
+				<SimpleKeypadModal
+					open={numpadOpen}
+					onClose={() => {
+						setNumpadOpen(false);
+						setNumpadTarget(null);
+					}}
+					onConfirm={handleNumpadConfirm}
+					maxQty={numpadTarget.remain_qty}
+					itemName={numpadTarget.item_name}
+					initialQty={numpadTarget.inbound_qty}
+				/>
+			)}
+
+			{/* ===== NumberPad Modal (packaging) ===== */}
+			{packagingTarget && (
+				<NumberPadModal
+					open={packagingOpen}
+					onClose={() => {
+						setPackagingOpen(false);
+						setPackagingTarget(null);
+					}}
+					onConfirm={handlePackagingConfirm}
+					maxQty={packagingTarget.inbound_qty}
+					itemName={packagingTarget.item_name}
+					itemNumber={packagingTarget.item_code}
+					initialPackages={packagingTarget.packages}
+				/>
+			)}
+
+			{/* ===== Loading Unit Modal (적재함 일괄 선택) ===== */}
+			<LoadingUnitModal
+				open={loadingModalOpen}
+				onClose={() => setLoadingModalOpen(false)}
+				onSelect={handleLoadingSelect}
+				onClear={handleLoadingClear}
+				pkgCodes={selectedPkgCodes}
+				currentLoading={null}
+			/>
+
+			{/* ===== 입고 완료 결과 모달 ===== */}
+			{confirmResult && (
+				<div className="fixed inset-0 z-[70] flex items-center justify-center">
+					<div className="absolute inset-0 bg-black/50" />
+					<div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden z-10">
+						{/* 헤더 */}
+						<div
+							className={`px-6 py-5 text-center ${COLOR_MAP.blue.buttonBg}`}
+						>
+							<div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3">
+								<svg
+									className="w-8 h-8 text-white"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={2}
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M4.5 12.75l6 6 9-13.5"
+									/>
+								</svg>
+							</div>
+							<h3 className="text-xl font-bold text-white">입고 처리 완료</h3>
+							<p className="text-white/80 text-lg font-mono mt-1">
+								{confirmResult.inboundNumber}
+							</p>
+						</div>
+
+						{/* 처리 내역 */}
+						<div className="px-6 py-4">
+							<div className="flex items-center justify-between text-sm text-gray-500 mb-3">
+								<span>
+									창고:{" "}
+									<span className="font-semibold text-gray-900">
+										{confirmResult.warehouse}
+									</span>
+								</span>
+								<span>{confirmResult.date}</span>
+							</div>
+
+							<div className="text-xs font-semibold text-gray-400 mb-2">
+								처리된 품목 ({confirmResult.items.length}건)
+							</div>
+							<div className="max-h-[200px] overflow-y-auto flex flex-col gap-2">
+								{confirmResult.items.map((item) => (
+									<div
+										key={item.id}
+										className="flex items-center justify-between p-3 bg-green-50 rounded-xl border border-green-100"
+									>
+										<div className="flex-1 min-w-0">
+											<p className="text-sm font-semibold text-gray-900 truncate">
+												{item.item_name}
+											</p>
+											<p className="text-[11px] text-gray-400">
+												{item.item_code}
+											</p>
+										</div>
+										<span className="text-sm font-bold text-green-600 ml-3">
+											{item.inbound_qty?.toLocaleString()} EA
+										</span>
+									</div>
+								))}
+							</div>
+						</div>
+
+						{/* 확인 버튼 */}
+						<div className="px-6 py-4 border-t border-gray-100">
+							<button
+								onClick={() => {
+									setConfirmResult(null);
+									router.push("/COMPANY_7/pop/inbound");
+								}}
+								className={`w-full h-12 rounded-xl text-white font-bold text-base active:scale-[0.98] transition-all ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} shadow-[0_4px_12px_rgba(59,130,246,0.3)]`}
+							>
+								확인
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundManage.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundManage.tsx
new file mode 100644
index 00000000..ed301afe
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InboundManage.tsx
@@ -0,0 +1,888 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier } from "./SupplierModal";
+import {
+  getReceivingList,
+  updateReceiving,
+  deleteReceiving,
+  getReceivingWarehouses,
+  type InboundItem,
+  type WarehouseOption,
+} from "@/lib/api/receiving";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface InboundRecord extends InboundItem {
+  detail_id?: string;
+  seq_no?: number;
+  detail_inbound_type?: string;
+  header_memo?: string;
+}
+
+const STATUS_OPTIONS = ["입고완료", "부분입고", "대기"];
+const INSPECTION_OPTIONS = ["대기", "검사완료", "합격", "불합격"];
+const INBOUND_TYPE_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "구매입고", label: "구매입고" },
+  { value: "생산입고", label: "생산입고" },
+  { value: "외주입고", label: "외주입고" },
+  { value: "사급자재입고", label: "사급자재입고" },
+  { value: "반품입고", label: "반품입고" },
+  { value: "반납입고", label: "반납입고" },
+  { value: "불량입고", label: "불량입고" },
+  { value: "교환입고", label: "교환입고" },
+  { value: "외주자재회수", label: "외주자재회수" },
+  { value: "기타입고", label: "기타입고" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function InboundManage() {
+  const router = useRouter();
+  const today = new Date().toISOString().slice(0, 10);
+
+  /* ── Filters ── */
+  const [inboundDate, setInboundDate] = useState(today);
+  const [inboundType, setInboundType] = useState("all");
+  const [keyword, setKeyword] = useState("");
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(
+    null,
+  );
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+
+  /* ── Data ── */
+  const [records, setRecords] = useState<InboundRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+
+  /* ── Edit modal ── */
+  const [editRecord, setEditRecord] = useState<InboundRecord | null>(null);
+  const [editForm, setEditForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  /* ── Helpers ── */
+  const getRowKey = (r: InboundRecord) => r.detail_id || r.id;
+
+  /* ---------------------------------------------------------------- */
+  /* Fetch                                                             */
+  /* ---------------------------------------------------------------- */
+
+  const fetchRecords = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (inboundDate) {
+        params.date_from = inboundDate;
+        params.date_to = inboundDate;
+      }
+      if (inboundType !== "all") params.inbound_type = inboundType;
+      if (keyword.trim()) params.search_keyword = keyword.trim();
+
+      const res = await getReceivingList(params);
+      if (res.success) {
+        let data = res.data as unknown as InboundRecord[];
+        if (selectedSupplier?.customer_code) {
+          data = data.filter(
+            (r) => r.supplier_code === selectedSupplier.customer_code,
+          );
+        }
+        setRecords(data);
+        setSelectedIds(new Set());
+      }
+    } catch (e) {
+      console.error("입고 목록 조회 실패", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [inboundDate, inboundType, keyword, selectedSupplier]);
+
+  useEffect(() => {
+    getReceivingWarehouses()
+      .then((res) => {
+        if (res.success) setWarehouses(res.data);
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    fetchRecords();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /* ---------------------------------------------------------------- */
+  /* Selection                                                         */
+  /* ---------------------------------------------------------------- */
+
+  const toggleSelect = (key: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const toggleSelectAll = () => {
+    if (selectedIds.size === records.length) setSelectedIds(new Set());
+    else setSelectedIds(new Set(records.map(getRowKey)));
+  };
+
+  /* ---------------------------------------------------------------- */
+  /* Delete                                                            */
+  /* ---------------------------------------------------------------- */
+
+  const handleDelete = async () => {
+    if (selectedIds.size === 0) return;
+
+    const headerIds = new Set<string>();
+    records.forEach((r) => {
+      if (selectedIds.has(getRowKey(r))) headerIds.add(r.id);
+    });
+
+    if (
+      !confirm(
+        `선택한 ${headerIds.size}건의 입고를 삭제하시겠습니까?\n(재고가 롤백됩니다)`,
+      )
+    )
+      return;
+
+    setDeleting(true);
+    try {
+      for (const hid of headerIds) {
+        await deleteReceiving(hid);
+      }
+      await fetchRecords();
+    } catch (e: any) {
+      alert(`삭제 실패: ${e?.message || "알 수 없는 오류"}`);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  /* ---------------------------------------------------------------- */
+  /* Edit                                                              */
+  /* ---------------------------------------------------------------- */
+
+  const openEdit = (record: InboundRecord) => {
+    setEditRecord(record);
+    setEditForm({
+      inbound_date: record.inbound_date?.slice(0, 10) || today,
+      inbound_qty: record.inbound_qty ?? 0,
+      unit_price: record.unit_price ?? 0,
+      total_amount: record.total_amount ?? 0,
+      lot_number: record.lot_number || "",
+      warehouse_code: record.warehouse_code || "",
+      location_code: record.location_code || "",
+      inbound_status: record.inbound_status || "입고완료",
+      inspection_status: record.inspection_status || "대기",
+      inspector: record.inspector || "",
+      manager: record.manager || "",
+      memo: record.memo || "",
+    });
+  };
+
+  const handleEditFromSelection = () => {
+    if (selectedIds.size !== 1) {
+      alert("수정할 항목을 1건만 선택해주세요.");
+      return;
+    }
+    const key = Array.from(selectedIds)[0];
+    const rec = records.find((r) => getRowKey(r) === key);
+    if (rec) openEdit(rec);
+  };
+
+  const updateField = (key: string, value: any) => {
+    setEditForm((prev) => {
+      const next = { ...prev, [key]: value };
+      if (key === "inbound_qty" || key === "unit_price") {
+        next.total_amount =
+          Math.round(
+            (Number(next.inbound_qty) || 0) *
+              (Number(next.unit_price) || 0) *
+              100,
+          ) / 100;
+      }
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    if (!editRecord) return;
+    setSaving(true);
+    try {
+      const payload: Record<string, any> = { ...editForm };
+      if (editRecord.detail_id) payload.detail_id = editRecord.detail_id;
+
+      await updateReceiving(editRecord.id, payload as Partial<InboundItem>);
+      setEditRecord(null);
+      await fetchRecords();
+    } catch (e: any) {
+      alert(`수정 실패: ${e?.message || "알 수 없는 오류"}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /* ---------------------------------------------------------------- */
+  /* Render                                                            */
+  /* ---------------------------------------------------------------- */
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M15.75 19.5L8.25 12l7.5-7.5"
+              />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">
+              입고관리
+            </h1>
+            <p className="text-xs text-gray-400 mt-0.5">
+              입고 내역을 조회, 수정, 삭제합니다
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            disabled={selectedIds.size !== 1}
+            onClick={handleEditFromSelection}
+            className="px-4 py-2 rounded-lg text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{
+              background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
+            }}
+          >
+            수정
+          </button>
+          <button
+            disabled={selectedIds.size === 0 || deleting}
+            onClick={handleDelete}
+            className="px-4 py-2 rounded-lg text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{
+              background: "linear-gradient(to bottom, #f87171, #dc2626)",
+            }}
+          >
+            {deleting ? "삭제 중..." : "삭제"}
+          </button>
+        </div>
+      </div>
+
+      {/* ===== Search / Filter ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
+          {/* 입고일 */}
+          <div>
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              입고일
+            </label>
+            <input
+              type="date"
+              value={inboundDate}
+              onChange={(e) => setInboundDate(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
+            />
+          </div>
+          {/* 입고유형 */}
+          <div>
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              입고유형
+            </label>
+            <select
+              value={inboundType}
+              onChange={(e) => setInboundType(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 bg-white"
+            >
+              {INBOUND_TYPE_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          {/* 거래처 */}
+          <div>
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              거래처
+            </label>
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-left outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 bg-white flex items-center justify-between"
+            >
+              <span
+                className={
+                  selectedSupplier
+                    ? "text-gray-900 truncate"
+                    : "text-gray-400"
+                }
+              >
+                {selectedSupplier ? selectedSupplier.customer_name : "전체"}
+              </span>
+              {selectedSupplier ? (
+                <span
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectedSupplier(null);
+                  }}
+                  className="text-gray-400 hover:text-gray-600 ml-1 shrink-0"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </span>
+              ) : (
+                <svg
+                  className="w-4 h-4 text-gray-400 shrink-0"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+                  />
+                </svg>
+              )}
+            </button>
+          </div>
+          {/* 검색어 + 검색버튼 */}
+          <div className="col-span-2">
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              검색
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") fetchRecords();
+                }}
+                placeholder="입고번호, 품목명, 거래처명..."
+                className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
+              />
+              <button
+                onClick={fetchRecords}
+                disabled={loading}
+                className="min-w-[48px] min-h-[40px] rounded-lg flex items-center justify-center text-white active:scale-95 transition-all disabled:opacity-50"
+                style={{
+                  background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
+                }}
+              >
+                {loading ? (
+                  <svg
+                    className="w-5 h-5 animate-spin"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    />
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                    />
+                  </svg>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Record list ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={
+                records.length > 0 && selectedIds.size === records.length
+              }
+              onChange={toggleSelectAll}
+              className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <span className="text-xs font-semibold text-gray-500">
+              입고 내역
+            </span>
+          </div>
+          <span className="text-sm text-gray-500">
+            {selectedIds.size > 0
+              ? `${selectedIds.size}건 선택`
+              : `총 ${records.length}건`}
+          </span>
+        </div>
+
+        {loading && records.length === 0 ? (
+          <div className="flex items-center justify-center py-16">
+            <svg
+              className="w-8 h-8 animate-spin text-blue-500"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              />
+            </svg>
+          </div>
+        ) : records.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg
+              className="w-16 h-16 mb-4 opacity-20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+              />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">
+              입고 내역이 없습니다
+            </p>
+            <p className="text-xs text-gray-400">
+              조회 조건을 변경하거나 입고를 진행해 주세요
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {records.map((record) => {
+              const key = getRowKey(record);
+              return (
+                <div
+                  key={key}
+                  className={`relative rounded-xl border p-3 transition-all cursor-pointer ${
+                    selectedIds.has(key)
+                      ? "ring-2 ring-blue-500 border-blue-300 bg-blue-50/30"
+                      : "border-gray-200 bg-white hover:border-blue-300"
+                  }`}
+                  onClick={() => toggleSelect(key)}
+                >
+                  {/* Card header */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <input
+                      type="checkbox"
+                      checked={selectedIds.has(key)}
+                      onChange={() => toggleSelect(key)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    />
+                    <span className="text-[11px] text-gray-400 font-medium">
+                      {record.inbound_number}
+                    </span>
+                    <span className="text-[11px] font-semibold px-1.5 py-0.5 rounded-full bg-blue-50 text-blue-600">
+                      {record.detail_inbound_type || record.inbound_type}
+                    </span>
+                    <span
+                      className={`ml-auto text-[11px] font-semibold px-1.5 py-0.5 rounded-full ${
+                        record.inbound_status === "입고완료"
+                          ? "bg-green-50 text-green-600"
+                          : record.inbound_status === "부분입고"
+                            ? "bg-amber-50 text-amber-600"
+                            : "bg-gray-50 text-gray-500"
+                      }`}
+                    >
+                      {record.inbound_status || "입고"}
+                    </span>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEdit(record);
+                      }}
+                      className="ml-1 w-7 h-7 rounded-lg bg-gray-50 hover:bg-blue-50 flex items-center justify-center text-gray-400 hover:text-blue-600 transition-colors"
+                    >
+                      <svg
+                        className="w-3.5 h-3.5"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  {/* Card body */}
+                  <div className="flex flex-col gap-[3px]">
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        품목
+                      </span>
+                      <span className="font-medium text-gray-700 truncate">
+                        {record.item_name || "-"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        품번
+                      </span>
+                      <span className="font-medium text-gray-500 truncate">
+                        {record.item_number || "-"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        거래처
+                      </span>
+                      <span className="font-medium text-gray-700">
+                        {record.supplier_name || "-"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        수량
+                      </span>
+                      <span className="font-bold text-blue-700">
+                        {Number(record.inbound_qty).toLocaleString()}{" "}
+                        {record.unit || "EA"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        입고일
+                      </span>
+                      <span className="font-medium text-gray-700">
+                        {record.inbound_date?.slice(0, 10) || "-"}
+                      </span>
+                    </div>
+                    {(record as any).warehouse_name && (
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">
+                          창고
+                        </span>
+                        <span className="font-medium text-gray-700">
+                          {(record as any).warehouse_name}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Edit Modal ===== */}
+      {editRecord && (
+        <div
+          className="fixed inset-0 z-50 bg-black/40"
+          onClick={() => setEditRecord(null)}
+        >
+          <div
+            className="absolute inset-x-0 bottom-0 sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 bg-white w-full sm:max-w-lg max-h-[90vh] rounded-t-2xl sm:rounded-2xl overflow-hidden flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-b from-blue-50 to-white shrink-0">
+              <div className="min-w-0">
+                <h2 className="text-lg font-bold text-gray-900">입고 수정</h2>
+                <p className="text-[11px] text-gray-400 truncate">
+                  {editRecord.inbound_number} | {editRecord.item_name}
+                </p>
+              </div>
+              <button
+                onClick={() => setEditRecord(null)}
+                className="w-9 h-9 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-600 shrink-0 ml-2"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {/* Modal body */}
+            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5">
+              {/* 기본 정보 */}
+              <FieldGroup title="기본 정보">
+                <FormField
+                  label="입고일"
+                  type="date"
+                  value={editForm.inbound_date}
+                  onChange={(v) => updateField("inbound_date", v)}
+                />
+                <FormField
+                  label="입고상태"
+                  type="select"
+                  value={editForm.inbound_status}
+                  onChange={(v) => updateField("inbound_status", v)}
+                  options={STATUS_OPTIONS}
+                />
+              </FieldGroup>
+
+              {/* 수량/금액 */}
+              <FieldGroup title="수량/금액">
+                <FormField
+                  label="수량"
+                  type="number"
+                  value={editForm.inbound_qty}
+                  onChange={(v) => updateField("inbound_qty", v)}
+                />
+                <FormField
+                  label="단가"
+                  type="number"
+                  value={editForm.unit_price}
+                  onChange={(v) => updateField("unit_price", v)}
+                />
+                <FormField
+                  label="금액"
+                  type="number"
+                  value={editForm.total_amount}
+                  onChange={(v) => updateField("total_amount", v)}
+                  readOnly
+                />
+              </FieldGroup>
+
+              {/* 입고 상세 */}
+              <FieldGroup title="입고 상세">
+                <FormField
+                  label="LOT번호"
+                  value={editForm.lot_number}
+                  onChange={(v) => updateField("lot_number", v)}
+                />
+                <FormField
+                  label="창고"
+                  type="select"
+                  value={editForm.warehouse_code}
+                  onChange={(v) => updateField("warehouse_code", v)}
+                  options={warehouses.map((w) => ({
+                    value: w.warehouse_code,
+                    label: w.warehouse_name,
+                  }))}
+                  emptyLabel="선택..."
+                />
+                <FormField
+                  label="위치"
+                  value={editForm.location_code}
+                  onChange={(v) => updateField("location_code", v)}
+                />
+                <FormField
+                  label="검사상태"
+                  type="select"
+                  value={editForm.inspection_status}
+                  onChange={(v) => updateField("inspection_status", v)}
+                  options={INSPECTION_OPTIONS}
+                />
+                <FormField
+                  label="검사자"
+                  value={editForm.inspector}
+                  onChange={(v) => updateField("inspector", v)}
+                />
+                <FormField
+                  label="담당자"
+                  value={editForm.manager}
+                  onChange={(v) => updateField("manager", v)}
+                />
+              </FieldGroup>
+
+              {/* 메모 */}
+              <div>
+                <h3 className="text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">
+                  메모
+                </h3>
+                <textarea
+                  value={editForm.memo}
+                  onChange={(e) => updateField("memo", e.target.value)}
+                  rows={3}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 resize-none"
+                  placeholder="메모 입력..."
+                />
+              </div>
+            </div>
+
+            {/* Modal footer */}
+            <div className="flex items-center gap-3 px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0">
+              <button
+                onClick={() => setEditRecord(null)}
+                className="flex-1 py-3 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 active:scale-95 transition-all"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className="flex-1 py-3 rounded-xl text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-50"
+                style={{
+                  background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
+                }}
+              >
+                {saving ? "저장 중..." : "저장"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ===== Supplier Modal ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(supplier) => setSelectedSupplier(supplier)}
+      />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-components                                                      */
+/* ------------------------------------------------------------------ */
+
+function FieldGroup({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <h3 className="text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">
+        {title}
+      </h3>
+      <div className="grid grid-cols-2 gap-3">{children}</div>
+    </div>
+  );
+}
+
+interface FormFieldProps {
+  label: string;
+  value: any;
+  onChange: (v: any) => void;
+  type?: "text" | "number" | "date" | "select";
+  options?: string[] | { value: string; label: string }[];
+  emptyLabel?: string;
+  readOnly?: boolean;
+}
+
+function FormField({
+  label,
+  value,
+  onChange,
+  type = "text",
+  options,
+  emptyLabel,
+  readOnly,
+}: FormFieldProps) {
+  const baseClass =
+    "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100";
+
+  return (
+    <div>
+      <label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+        {label}
+      </label>
+      {type === "select" && options ? (
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={`${baseClass} bg-white`}
+        >
+          {emptyLabel && <option value="">{emptyLabel}</option>}
+          {options.map((opt) => {
+            const v = typeof opt === "string" ? opt : opt.value;
+            const l = typeof opt === "string" ? opt : opt.label;
+            return (
+              <option key={v} value={v}>
+                {l}
+              </option>
+            );
+          })}
+        </select>
+      ) : (
+        <input
+          type={type}
+          value={value}
+          onChange={(e) =>
+            onChange(
+              type === "number" ? Number(e.target.value) : e.target.value,
+            )
+          }
+          readOnly={readOnly}
+          className={`${baseClass} ${readOnly ? "bg-gray-50 text-gray-500" : ""}`}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InspectionModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InspectionModal.tsx
new file mode 100644
index 00000000..1bf9079f
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/InspectionModal.tsx
@@ -0,0 +1,727 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from "react";
+import { apiClient } from "@/lib/api/client";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface InspectionItem {
+	id: string;
+	inspection_item_name: string;
+	inspection_standard: string;
+	inspection_method: string;
+	pass_criteria: string;
+	is_required: string;
+	/** User-entered measured value */
+	measured_value: string;
+	/** "pass" | "fail" | null */
+	result: "pass" | "fail" | null;
+}
+
+export interface InspectionResult {
+	items: InspectionItem[];
+	goodQty: number;
+	badQty: number;
+	remark: string;
+	completed: boolean;
+	inspectionNumber?: string; // 검사 완료 시 채번 받음 (재사용)
+}
+
+interface InspectionModalProps {
+	open: boolean;
+	onClose: () => void;
+	onComplete: (result: InspectionResult) => void;
+	onCancel?: () => void; // 취소 = 검사 무효화 (완료 → 대기)
+	itemCode: string;
+	itemName: string;
+	totalQty: number;
+	initialResult?: InspectionResult | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Dummy inspection items (fallback)                                   */
+/* ------------------------------------------------------------------ */
+
+const DUMMY_INSPECTION_ITEMS: InspectionItem[] = [
+	{
+		id: "dummy-1",
+		inspection_item_name: "외관 검사",
+		inspection_standard: "스크래치, 변색, 찍힘 없음",
+		inspection_method: "육안 검사",
+		pass_criteria: "이상 없음",
+		is_required: "Y",
+		measured_value: "",
+		result: null,
+	},
+	{
+		id: "dummy-2",
+		inspection_item_name: "치수 검사",
+		inspection_standard: "규격 +-0.5mm",
+		inspection_method: "캘리퍼스 측정",
+		pass_criteria: "허용 오차 이내",
+		is_required: "Y",
+		measured_value: "",
+		result: null,
+	},
+	{
+		id: "dummy-3",
+		inspection_item_name: "수량 검사",
+		inspection_standard: "발주 수량과 일치",
+		inspection_method: "전수 검사",
+		pass_criteria: "수량 일치",
+		is_required: "Y",
+		measured_value: "",
+		result: null,
+	},
+	{
+		id: "dummy-4",
+		inspection_item_name: "포장 상태",
+		inspection_standard: "포장 손상 없음",
+		inspection_method: "육안 검사",
+		pass_criteria: "이상 없음",
+		is_required: "",
+		measured_value: "",
+		result: null,
+	},
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function InspectionModal({
+	open,
+	onClose,
+	onComplete,
+	onCancel,
+	itemCode,
+	itemName,
+	totalQty,
+	initialResult,
+}: InspectionModalProps) {
+	const [inspItems, setInspItems] = useState<InspectionItem[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [goodQty, setGoodQty] = useState(0);
+	const [badQty, setBadQty] = useState(0);
+	/* NumPad state */
+	const [numpadOpen, setNumpadOpen] = useState(false);
+	const [numpadTitle, setNumpadTitle] = useState("");
+	const [numpadValue, setNumpadValue] = useState("");
+	const [numpadMax, setNumpadMax] = useState<number | undefined>(undefined);
+	const numpadCallbackRef = React.useRef<((val: string) => void) | null>(null);
+
+	const openNumpad = (
+		title: string,
+		currentValue: string | number,
+		onConfirm: (v: string) => void,
+		max?: number,
+	) => {
+		setNumpadTitle(title);
+		setNumpadValue(String(currentValue || ""));
+		setNumpadMax(max);
+		numpadCallbackRef.current = onConfirm;
+		setNumpadOpen(true);
+	};
+	const [remark, setRemark] = useState("");
+
+	/* Fetch inspection items from DB */
+	const fetchInspectionItems = useCallback(async () => {
+		setLoading(true);
+		try {
+			const res = await apiClient.get("/pop/inspection-result/info", {
+				params: { itemCode },
+			});
+			const data = res.data?.data;
+			if (Array.isArray(data) && data.length > 0) {
+				setInspItems(
+					data.map((r: Record<string, unknown>) => ({
+						id: String(r.id ?? ""),
+						inspection_item_name: String(r.inspection_item_name ?? ""),
+						inspection_standard: String(r.inspection_standard ?? ""),
+						inspection_method: String(r.inspection_method ?? ""),
+						pass_criteria: String(r.pass_criteria ?? ""),
+						is_required: String(r.is_required ?? "Y"),
+						measured_value: "",
+						result: null,
+					})),
+				);
+			} else {
+				setInspItems(DUMMY_INSPECTION_ITEMS.map((i) => ({ ...i })));
+			}
+		} catch {
+			setInspItems(DUMMY_INSPECTION_ITEMS.map((i) => ({ ...i })));
+		} finally {
+			setLoading(false);
+		}
+	}, [itemCode]);
+
+	/* Init on open */
+	useEffect(() => {
+		if (!open) return;
+		if (initialResult) {
+			setInspItems(initialResult.items.map((i) => ({ ...i })));
+			setGoodQty(initialResult.goodQty);
+			setBadQty(initialResult.badQty);
+			setRemark(initialResult.remark);
+		} else {
+			fetchInspectionItems();
+			setGoodQty(totalQty);
+			setBadQty(0);
+			setRemark("");
+		}
+	}, [open, initialResult, fetchInspectionItems, totalQty]);
+
+	/* Update item */
+	const updateItem = (
+		id: string,
+		field: "measured_value" | "result",
+		value: string,
+	) => {
+		setInspItems((prev) =>
+			prev.map((item) =>
+				item.id === id
+					? {
+							...item,
+							[field]:
+								field === "result"
+									? item.result === value
+										? null
+										: value
+									: value,
+						}
+					: item,
+			),
+		);
+	};
+
+	/* Handle good/bad qty sync */
+	const handleGoodQtyChange = (val: number) => {
+		const v = Math.max(0, Math.min(val, totalQty));
+		setGoodQty(v);
+		setBadQty(totalQty - v);
+	};
+
+	const handleBadQtyChange = (val: number) => {
+		const v = Math.max(0, Math.min(val, totalQty));
+		setBadQty(v);
+		setGoodQty(totalQty - v);
+	};
+
+	/* 검사 완료 가능 여부: 필수 항목이 모두 pass */
+	const canComplete = inspItems
+		.filter((it) => it.is_required === "Y")
+		.every((it) => it.result === "pass");
+
+	/* Complete */
+	const [allocating, setAllocating] = useState(false);
+	const handleComplete = async () => {
+		if (!canComplete) return;
+		setAllocating(true);
+		try {
+			// 1. 기존 inspectionNumber 있으면 재사용, 없으면 채번 호출
+			let inspectionNumber = initialResult?.inspectionNumber;
+			if (!inspectionNumber) {
+				try {
+					const res = await apiClient.post(
+						"/pop/inspection-result/allocate-number",
+					);
+					inspectionNumber = res.data?.data?.inspectionNumber;
+				} catch (err) {
+					console.error("[검사번호 채번 실패]", err);
+				}
+			}
+			// 2. 결과 전달 (채번 포함)
+			onComplete({
+				items: inspItems,
+				goodQty,
+				badQty,
+				remark,
+				completed: true,
+				inspectionNumber,
+			});
+			onClose();
+		} finally {
+			setAllocating(false);
+		}
+	};
+
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50" onClick={onClose}>
+			{/* Overlay */}
+			<div className="absolute inset-0 bg-black/40" />
+
+			{/* Bottom sheet */}
+			<div
+				className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-2xl bg-white rounded-t-3xl shadow-2xl flex flex-col z-10"
+				style={{ maxHeight: "90vh" }}
+				onClick={(e) => e.stopPropagation()}
+			>
+				{/* Handle bar */}
+				<div className="pt-3 pb-2 flex justify-center rounded-t-3xl shrink-0">
+					<div className="w-10 h-1 rounded-full bg-gray-300" />
+				</div>
+
+				{/* Header */}
+				<div className="flex items-center justify-between px-5 pb-3 border-b border-gray-100 shrink-0">
+					<h3 className="text-lg font-bold text-gray-900">자주검사</h3>
+					<button
+						onClick={onClose}
+						className="w-9 h-9 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors"
+					>
+						<svg
+							className="w-5 h-5"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				{/* Scrollable body */}
+				<div className="flex-1 overflow-y-auto px-5 py-4 bg-gray-50">
+					{/* Item summary */}
+					<div
+						className="flex flex-wrap items-center gap-2 px-3.5 py-2.5 mb-4 rounded-lg border border-sky-200"
+						style={{
+							background: "linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)",
+						}}
+					>
+						<span className="text-xs font-semibold text-sky-700 bg-white px-2 py-0.5 rounded shrink-0">
+							{itemCode}
+						</span>
+						<span className="text-sm font-semibold text-gray-900 flex-1 truncate min-w-0">
+							{itemName}
+						</span>
+						<span className="text-sm font-bold text-green-600 shrink-0">
+							{totalQty.toLocaleString()} EA
+						</span>
+					</div>
+
+					{/* Inspection items section */}
+					<div className="bg-white rounded-xl border border-gray-200 p-3.5 mb-4">
+						<div className="flex items-center justify-between mb-3">
+							<h4 className="text-sm font-semibold text-gray-700">검사 항목</h4>
+							<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+								{inspItems.length}개
+							</span>
+						</div>
+
+						{loading ? (
+							<div className="flex items-center justify-center py-8 text-sm text-gray-400">
+								<svg
+									className="animate-spin w-5 h-5 mr-2 text-blue-500"
+									fill="none"
+									viewBox="0 0 24 24"
+								>
+									<circle
+										className="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										strokeWidth="4"
+									/>
+									<path
+										className="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+									/>
+								</svg>
+								불러오는 중...
+							</div>
+						) : inspItems.length === 0 ? (
+							<div className="text-center py-6 text-sm text-gray-400">
+								등록된 검사 항목이 없습니다
+							</div>
+						) : (
+							<div className="flex flex-col gap-2.5 max-h-[300px] overflow-y-auto">
+								{inspItems.map((item) => (
+									<div
+										key={item.id}
+										className={`bg-gray-50 border rounded-lg p-3 ${
+											item.is_required === "Y"
+												? "border-l-[3px] border-l-red-400 border-gray-200"
+												: "border-gray-200"
+										}`}
+									>
+										{/* Item header */}
+										<div className="flex items-start justify-between mb-2">
+											<span className="text-[13px] font-semibold text-gray-900">
+												{item.inspection_item_name}
+											</span>
+											{item.is_required === "Y" && (
+												<span className="text-[10px] px-1.5 py-0.5 rounded bg-red-100 text-red-600 font-semibold shrink-0 ml-2">
+													필수
+												</span>
+											)}
+										</div>
+
+										{/* Info grid */}
+										<div className="grid grid-cols-[auto_1fr] gap-x-2.5 gap-y-1 text-xs mb-2.5">
+											{item.inspection_standard && (
+												<>
+													<span className="text-gray-400">기준</span>
+													<span className="text-gray-700">
+														{item.inspection_standard}
+													</span>
+												</>
+											)}
+											{item.inspection_method && (
+												<>
+													<span className="text-gray-400">방법</span>
+													<span className="text-gray-700">
+														{item.inspection_method}
+													</span>
+												</>
+											)}
+											{item.pass_criteria && (
+												<>
+													<span className="text-gray-400">판정</span>
+													<span className="text-gray-700">
+														{item.pass_criteria}
+													</span>
+												</>
+											)}
+										</div>
+
+										{/* Input + result buttons */}
+										<div className="flex items-center gap-2">
+											<button
+												type="button"
+												onClick={() =>
+													openNumpad(
+														`${item.inspection_item_name} - 측정값`,
+														item.measured_value,
+														(v) => updateItem(item.id, "measured_value", v),
+													)
+												}
+												className={`flex-1 h-9 px-2.5 text-[13px] border rounded-md text-left transition-all ${
+													item.measured_value
+														? "bg-blue-50 border-blue-200 text-blue-700 font-semibold"
+														: "bg-white border-gray-200 text-gray-400 hover:border-blue-300"
+												}`}
+											>
+												{item.measured_value || "측정값 입력"}
+											</button>
+											<div className="flex gap-1">
+												<button
+													onClick={() => updateItem(item.id, "result", "pass")}
+													className={`w-9 h-9 rounded-md border text-base flex items-center justify-center transition-all ${
+														item.result === "pass"
+															? "bg-green-100 border-green-400 text-green-700"
+															: "border-gray-200 text-gray-400 hover:bg-green-50 hover:border-green-300"
+													}`}
+												>
+													{"\u2713"}
+												</button>
+												<button
+													onClick={() => updateItem(item.id, "result", "fail")}
+													className={`w-9 h-9 rounded-md border text-base flex items-center justify-center transition-all ${
+														item.result === "fail"
+															? "bg-red-100 border-red-400 text-red-700"
+															: "border-gray-200 text-gray-400 hover:bg-red-50 hover:border-red-300"
+													}`}
+												>
+													{"\u2717"}
+												</button>
+											</div>
+											{/* Camera placeholder */}
+											<button
+												className="w-9 h-9 rounded-md border border-gray-200 text-gray-400 flex items-center justify-center hover:bg-gray-50 transition-colors"
+												title="사진 촬영 (준비 중)"
+											>
+												<svg
+													className="w-4 h-4"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
+													/>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
+													/>
+												</svg>
+											</button>
+										</div>
+									</div>
+								))}
+							</div>
+						)}
+					</div>
+
+					{/* Final judgment section */}
+					<div className="bg-white rounded-xl border border-gray-200 p-3.5 mb-4">
+						<h4 className="text-sm font-semibold text-gray-700 mb-3">
+							종합 판정
+						</h4>
+
+						{/* Good / Bad qty */}
+						<div className="grid grid-cols-2 gap-3 mb-3">
+							<div className="flex flex-col gap-1">
+								<label className="text-[11px] font-semibold text-green-600">
+									양품 수량
+								</label>
+								<div className="flex items-center gap-1">
+									<button
+										type="button"
+										onClick={() =>
+											openNumpad(
+												"양품 수량",
+												goodQty,
+												(v) => handleGoodQtyChange(parseInt(v, 10) || 0),
+												totalQty,
+											)
+										}
+										className="flex-1 min-w-0 h-10 px-2 text-center text-sm font-semibold border-2 border-green-400 rounded-lg bg-green-50 text-green-700 hover:bg-green-100 transition-all"
+									>
+										{goodQty.toLocaleString()}
+									</button>
+									<span className="text-[11px] text-gray-500 shrink-0">EA</span>
+								</div>
+							</div>
+							<div className="flex flex-col gap-1">
+								<label className="text-[11px] font-semibold text-red-600">
+									불량 수량
+								</label>
+								<div className="flex items-center gap-1">
+									<button
+										type="button"
+										onClick={() =>
+											openNumpad(
+												"불량 수량",
+												badQty,
+												(v) => handleBadQtyChange(parseInt(v, 10) || 0),
+												totalQty,
+											)
+										}
+										className="flex-1 min-w-0 h-10 px-2 text-center text-sm font-semibold border-2 border-red-400 rounded-lg bg-red-50 text-red-700 hover:bg-red-100 transition-all"
+									>
+										{badQty.toLocaleString()}
+									</button>
+									<span className="text-[11px] text-gray-500 shrink-0">EA</span>
+								</div>
+							</div>
+						</div>
+
+						{/* Total summary */}
+						<div className="flex items-center justify-between px-3 py-2 bg-gray-50 rounded-lg border border-gray-200">
+							<span className="text-[13px] text-gray-500">전체 수량</span>
+							<span className="text-[15px] font-bold text-gray-900">
+								{totalQty.toLocaleString()} EA
+							</span>
+						</div>
+					</div>
+
+					{/* Remark */}
+					<div className="bg-white rounded-xl border border-gray-200 p-3.5 mb-4">
+						<h4 className="text-sm font-semibold text-gray-700 mb-2">비고</h4>
+						<textarea
+							value={remark}
+							onChange={(e) => setRemark(e.target.value)}
+							placeholder="검사 관련 특이사항 입력"
+							rows={3}
+							className="w-full px-3 py-2 text-sm border border-gray-200 rounded-lg outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 resize-none"
+						/>
+					</div>
+				</div>
+
+				{/* Footer */}
+				<div className="flex gap-2.5 px-5 py-4 border-t border-gray-200 bg-white shrink-0">
+					<button
+						onClick={() => {
+							if (initialResult?.completed && onCancel) {
+								// 이미 완료된 검사 → 무효화 (완료 → 대기로 풀림)
+								onCancel();
+							}
+							onClose();
+						}}
+						className="flex-1 h-12 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 hover:bg-gray-50 active:scale-[0.98] transition-all"
+					>
+						{initialResult?.completed ? "검사 취소" : "취소"}
+					</button>
+					<button
+						className="flex-1 h-12 rounded-xl border border-gray-200 text-sm font-semibold text-gray-500 hover:bg-gray-50 active:scale-[0.98] transition-all"
+						title="준비 중"
+					>
+						성적서 출력
+					</button>
+					<button
+						onClick={handleComplete}
+						disabled={!canComplete || allocating}
+						className={`flex-[2] h-12 rounded-xl text-sm font-bold text-white transition-all ${
+							!canComplete || allocating
+								? "opacity-40 cursor-not-allowed"
+								: "active:scale-[0.98]"
+						}`}
+						style={{
+							background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
+							boxShadow:
+								!canComplete || allocating
+									? "none"
+									: "0 4px 12px rgba(59,130,246,.3)",
+						}}
+						title={
+							!canComplete
+								? "필수 검사 항목을 모두 합격(✓)으로 체크해주세요"
+								: ""
+						}
+					>
+						{allocating ? "처리 중..." : "검사 완료"}
+					</button>
+				</div>
+			</div>
+
+			{/* ===== NumPad ===== */}
+			{numpadOpen && (
+				<div
+					className="absolute inset-0 z-20 flex items-end justify-center"
+					onClick={() => setNumpadOpen(false)}
+				>
+					<div className="absolute inset-0 bg-black/40" />
+					<div
+						className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-md bg-white rounded-t-3xl shadow-2xl flex flex-col z-30"
+						onClick={(e) => e.stopPropagation()}
+					>
+						<div className="pt-3 pb-2 flex justify-center">
+							<div className="w-10 h-1 rounded-full bg-gray-300" />
+						</div>
+						<div className="flex items-center justify-between px-5 pb-3 border-b border-gray-100">
+							<h4 className="text-base font-bold text-gray-900">
+								{numpadTitle}
+							</h4>
+							<button
+								onClick={() => setNumpadOpen(false)}
+								className="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100"
+							>
+								<svg
+									className="w-5 h-5"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={2}
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						</div>
+						<div className="px-5 pt-4 pb-2">
+							<div className="h-16 flex items-center justify-end px-4 bg-gray-50 rounded-xl border-2 border-gray-200 mb-3">
+								<span
+									className="text-3xl font-bold text-gray-900"
+									style={{ fontVariantNumeric: "tabular-nums" }}
+								>
+									{numpadValue || "0"}
+								</span>
+							</div>
+							{numpadMax !== undefined && (
+								<p className="text-[11px] text-gray-400 text-right mb-2">
+									최대 {numpadMax.toLocaleString()}
+								</p>
+							)}
+						</div>
+						<div className="px-5 pb-5">
+							<div className="grid grid-cols-3 gap-2 mb-2">
+								{["7", "8", "9", "4", "5", "6", "1", "2", "3"].map((k) => (
+									<button
+										key={k}
+										onClick={() =>
+											setNumpadValue((v) => (v === "0" || v === "" ? k : v + k))
+										}
+										className="h-14 rounded-xl bg-gray-100 text-2xl font-bold text-gray-800 active:scale-95 active:bg-gray-200 transition-all"
+									>
+										{k}
+									</button>
+								))}
+								<button
+									onClick={() =>
+										setNumpadValue((v) =>
+											v.includes(".") ? v : (v || "0") + ".",
+										)
+									}
+									className="h-14 rounded-xl bg-gray-100 text-2xl font-bold text-gray-800 active:scale-95 transition-all"
+								>
+									.
+								</button>
+								<button
+									onClick={() =>
+										setNumpadValue((v) =>
+											v === "0" || v === "" ? "0" : v + "0",
+										)
+									}
+									className="h-14 rounded-xl bg-gray-100 text-2xl font-bold text-gray-800 active:scale-95 transition-all"
+								>
+									0
+								</button>
+								<button
+									onClick={() =>
+										setNumpadValue((v) => (v.length <= 1 ? "" : v.slice(0, -1)))
+									}
+									className="h-14 rounded-xl bg-gray-200 text-base font-bold text-gray-600 active:scale-95 transition-all"
+								>
+									←
+								</button>
+							</div>
+							<div className="flex gap-2 mb-3">
+								<button
+									onClick={() => setNumpadValue("")}
+									className="flex-1 h-11 rounded-xl bg-gray-100 text-gray-600 text-sm font-bold active:scale-95"
+								>
+									초기화
+								</button>
+								{numpadMax !== undefined && (
+									<button
+										onClick={() => setNumpadValue(String(numpadMax))}
+										className="flex-1 h-11 rounded-xl bg-blue-50 text-blue-600 text-sm font-bold active:scale-95"
+									>
+										최대 ({numpadMax})
+									</button>
+								)}
+							</div>
+							<button
+								onClick={() => {
+									if (numpadCallbackRef.current) {
+										let val = numpadValue;
+										if (numpadMax !== undefined) {
+											const n = parseInt(val, 10) || 0;
+											val = String(Math.min(n, numpadMax));
+										}
+										numpadCallbackRef.current(val);
+									}
+									setNumpadOpen(false);
+								}}
+								className="w-full h-12 rounded-xl text-sm font-bold text-white active:scale-95 transition-all"
+								style={{
+									background: "linear-gradient(to bottom, #60a5fa, #2563eb)",
+								}}
+							>
+								확인
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/LoadingUnitModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/LoadingUnitModal.tsx
new file mode 100644
index 00000000..ddba80f1
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/LoadingUnitModal.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { getLoadingUnitsByPkg, type LoadingUnitByPkg } from "@/lib/api/packaging";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface LoadingUnitSelection {
+	loading_code: string;
+	loading_name: string;
+	loading_type: string;
+	max_load_qty: number;
+}
+
+interface LoadingUnitModalProps {
+	open: boolean;
+	onClose: () => void;
+	onSelect: (lu: LoadingUnitSelection) => void;
+	onClear: () => void;
+	pkgCodes: string[];
+	currentLoading?: { loading_code: string; loading_name: string } | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function LoadingUnitModal({
+	open,
+	onClose,
+	onSelect,
+	onClear,
+	pkgCodes,
+	currentLoading,
+}: LoadingUnitModalProps) {
+	const [units, setUnits] = useState<LoadingUnitByPkg[]>([]);
+	const [loading, setLoading] = useState(false);
+
+	useEffect(() => {
+		if (!open || pkgCodes.length === 0) return;
+		let cancelled = false;
+		setLoading(true);
+
+		const uniqueCodes = [...new Set(pkgCodes)];
+		Promise.all(uniqueCodes.map((code) => getLoadingUnitsByPkg(code)))
+			.then((results) => {
+				if (cancelled) return;
+				const merged = new Map<string, LoadingUnitByPkg>();
+				results.forEach((res) => {
+					res.data.forEach((lu) => {
+						if (!merged.has(lu.loading_code)) {
+							merged.set(lu.loading_code, lu);
+						}
+					});
+				});
+				setUnits(Array.from(merged.values()));
+			})
+			.catch(() => {
+				if (!cancelled) setUnits([]);
+			})
+			.finally(() => {
+				if (!cancelled) setLoading(false);
+			});
+		return () => {
+			cancelled = true;
+		};
+	}, [open, pkgCodes]);
+
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
+			<div
+				className="absolute inset-0 bg-black/50"
+				onClick={onClose}
+			/>
+			<div className="relative bg-white w-full sm:max-w-md sm:rounded-2xl rounded-t-2xl max-h-[80vh] flex flex-col shadow-2xl z-10 overflow-hidden">
+				{/* Header */}
+				<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+					<h3 className="text-lg font-bold text-gray-900">
+						적재함 선택
+					</h3>
+					<button
+						onClick={onClose}
+						className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+					>
+						<svg
+							className="w-4 h-4"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M6 18L18 6M6 6l12 12"
+							/>
+						</svg>
+					</button>
+				</div>
+
+				{/* Body */}
+				<div className="flex-1 overflow-y-auto p-4">
+					{loading ? (
+						<div className="flex items-center justify-center py-8">
+							<div className="w-6 h-6 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
+							<span className="ml-2 text-sm text-gray-500">
+								불러오는 중...
+							</span>
+						</div>
+					) : units.length === 0 ? (
+						<p className="text-center text-sm text-gray-400 py-8">
+							매칭된 적재함이 없습니다
+						</p>
+					) : (
+						<div className="flex flex-col gap-2.5">
+							{units.map((lu) => (
+								<button
+									key={lu.loading_code}
+									onClick={() => {
+										onSelect({
+											loading_code: lu.loading_code,
+											loading_name: lu.loading_name,
+											loading_type: lu.loading_type,
+											max_load_qty: lu.max_load_qty,
+										});
+										onClose();
+									}}
+									className={`flex items-center gap-3 p-3 border-2 rounded-xl bg-white text-left active:scale-[0.98] transition-all ${
+										currentLoading?.loading_code === lu.loading_code
+											? "border-purple-400 bg-purple-50"
+											: "border-gray-200 hover:border-purple-400 hover:bg-purple-50"
+									}`}
+								>
+									<span className="text-2xl shrink-0">
+										{"\uD83D\uDEA2"}
+									</span>
+									<div className="flex-1 min-w-0">
+										<p className="text-sm font-semibold text-gray-900 truncate">
+											{lu.loading_name}
+										</p>
+										<p className="text-[11px] text-gray-400">
+											{lu.loading_code} |{" "}
+											{lu.loading_type || "-"}
+										</p>
+									</div>
+									{lu.max_load_qty > 0 && (
+										<span className="text-[10px] font-medium text-purple-600 bg-purple-50 px-2 py-1 rounded-full shrink-0">
+											최대 {lu.max_load_qty}개
+										</span>
+									)}
+								</button>
+							))}
+						</div>
+					)}
+				</div>
+
+				{/* Footer — 해제 버튼 (적재함 이미 선택된 경우) */}
+				{currentLoading && (
+					<div className="px-4 pb-4">
+						<button
+							onClick={() => {
+								onClear();
+								onClose();
+							}}
+							className="w-full py-3 rounded-xl border-2 border-dashed border-gray-300 text-sm font-medium text-gray-500 hover:border-gray-400 hover:bg-gray-50 active:scale-[0.98] transition-all"
+						>
+							적재함 해제
+						</button>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/NumberPadModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/NumberPadModal.tsx
new file mode 100644
index 00000000..a366d0dd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/NumberPadModal.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import type { PackageUnit } from "./PackagingModal";
+import { getPkgUnitsByItem, type PkgUnitByItem } from "@/lib/api/packaging";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface PackageEntry {
+  unit: PackageUnit;
+  count: number;
+  qtyPerUnit: number;
+}
+
+export interface LoadingUnitSelection {
+  loading_code: string;
+  loading_name: string;
+  loading_type: string;
+  max_load_qty: number;
+}
+
+interface NumberPadModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (qty: number, packages: PackageEntry[]) => void;
+  maxQty: number;
+  itemName: string;
+  itemNumber?: string;
+  initialPackages?: PackageEntry[];
+}
+
+type Step = "list" | "packaging" | "count";
+
+/* ------------------------------------------------------------------ */
+/* Numpad Keys                                                         */
+/* ------------------------------------------------------------------ */
+
+const KEYS = [
+  { label: "7", action: "7" },
+  { label: "8", action: "8" },
+  { label: "9", action: "9" },
+  { label: "\u2190", action: "backspace" },
+  { label: "4", action: "4" },
+  { label: "5", action: "5" },
+  { label: "6", action: "6" },
+  { label: "C", action: "clear" },
+  { label: "1", action: "1" },
+  { label: "2", action: "2" },
+  { label: "3", action: "3" },
+  { label: "MAX", action: "max" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function NumberPadModal({
+  open,
+  onClose,
+  onConfirm,
+  maxQty,
+  itemName,
+  itemNumber,
+  initialPackages,
+}: NumberPadModalProps) {
+  const [step, setStep] = useState<Step>("list");
+  const [packages, setPackages] = useState<PackageEntry[]>([]);
+  const [packageUnits, setPackageUnits] = useState<PackageUnit[]>([]);
+  const [pkgLoading, setPkgLoading] = useState(false);
+
+  const [selectedUnit, setSelectedUnit] = useState<PackageUnit | null>(null);
+  const [count, setCount] = useState("0");
+  const [editingIndex, setEditingIndex] = useState<number | null>(null);
+
+  /* Fetch packaging units from DB */
+  useEffect(() => {
+    if (!open || !itemNumber) {
+      setPackageUnits([]);
+      return;
+    }
+    let cancelled = false;
+    setPkgLoading(true);
+    getPkgUnitsByItem(itemNumber)
+      .then((res) => {
+        if (cancelled) return;
+        setPackageUnits(
+          res.data.map((pu: PkgUnitByItem) => ({
+            label: pu.pkg_name,
+            icon: "\uD83D\uDCE6",
+            value: pu.pkg_code,
+            pkg_qty: pu.pkg_qty,
+          }))
+        );
+      })
+      .catch(() => {
+        if (!cancelled) setPackageUnits([]);
+      })
+      .finally(() => {
+        if (!cancelled) setPkgLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, itemNumber]);
+
+  /* Reset on open */
+  useEffect(() => {
+    if (open) {
+      setPackages(initialPackages ? [...initialPackages] : []);
+      setStep("list");
+      setSelectedUnit(null);
+      setCount("0");
+      setEditingIndex(null);
+    }
+  }, [open, initialPackages]);
+
+  /* Computed values */
+  const totalPackagedQty = packages.reduce(
+    (s, p) => s + p.count * p.qtyPerUnit,
+    0
+  );
+  const unpackedQty = Math.max(0, maxQty - totalPackagedQty);
+  const countNum = parseInt(count, 10) || 0;
+
+  /* 편집 중이면 해당 행 수량만큼은 "사용 가능"으로 되돌려줌 */
+  const editingEntry =
+    editingIndex !== null ? packages[editingIndex] ?? null : null;
+  const editingReservedQty = editingEntry
+    ? editingEntry.count * editingEntry.qtyPerUnit
+    : 0;
+  const availableForCurrent = unpackedQty + editingReservedQty;
+  const currentPkgQty = selectedUnit?.pkg_qty ?? 0;
+  const maxCountForCurrent =
+    currentPkgQty > 0 ? Math.floor(availableForCurrent / currentPkgQty) : 0;
+
+  /* Numpad input */
+  const handleInput = useCallback(
+    (key: string) => {
+      setCount((prev) => {
+        switch (key) {
+          case "backspace":
+            return prev.length <= 1 ? "0" : prev.slice(0, -1);
+          case "clear":
+            return "0";
+          case "max":
+            return String(maxCountForCurrent);
+          default: {
+            const next = prev === "0" ? key : prev + key;
+            const num = parseInt(next, 10);
+            if (isNaN(num)) return prev;
+            return String(Math.min(num, maxCountForCurrent));
+          }
+        }
+      });
+    },
+    [maxCountForCurrent]
+  );
+
+  /* Step handlers */
+  const openAddFlow = () => {
+    setEditingIndex(null);
+    setSelectedUnit(null);
+    setCount("0");
+    setStep("packaging");
+  };
+
+  const openEditFlow = (idx: number) => {
+    const entry = packages[idx];
+    if (!entry) return;
+    setEditingIndex(idx);
+    setSelectedUnit(entry.unit);
+    setCount(String(entry.count));
+    setStep("count");
+  };
+
+  const handleSelectUnit = (unit: PackageUnit) => {
+    setSelectedUnit(unit);
+    setCount("0");
+    setStep("count");
+  };
+
+  const handleCountConfirm = () => {
+    if (!selectedUnit || countNum <= 0) return;
+    const qtyPerUnit = selectedUnit.pkg_qty ?? 0;
+    setPackages((prev) => {
+      if (editingIndex !== null) {
+        return prev.map((p, i) =>
+          i === editingIndex ? { ...p, count: countNum, qtyPerUnit } : p
+        );
+      }
+      const existing = prev.findIndex(
+        (p) => p.unit.value === selectedUnit.value
+      );
+      if (existing >= 0) {
+        return prev.map((p, i) =>
+          i === existing ? { ...p, count: p.count + countNum } : p
+        );
+      }
+      return [...prev, { unit: selectedUnit, count: countNum, qtyPerUnit }];
+    });
+    setStep("list");
+    setSelectedUnit(null);
+    setCount("0");
+    setEditingIndex(null);
+  };
+
+  const handleDelete = (idx: number) => {
+    setPackages((prev) => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleBack = () => {
+    if (step === "count") {
+      if (editingIndex !== null) {
+        setStep("list");
+        setSelectedUnit(null);
+        setCount("0");
+        setEditingIndex(null);
+      } else {
+        setStep("packaging");
+        setSelectedUnit(null);
+        setCount("0");
+      }
+    } else if (step === "packaging") {
+      setStep("list");
+    }
+  };
+
+  const handleFinalConfirm = () => {
+    if (packages.length === 0) return;
+    const finalQty = Math.min(totalPackagedQty, maxQty);
+    onConfirm(finalQty, packages);
+    onClose();
+  };
+
+  if (!open) return null;
+
+  /* ------------------------------------------------------------------ */
+  /* Render helpers                                                      */
+  /* ------------------------------------------------------------------ */
+
+  const renderNumpad = (
+    currentValue: string,
+    onKey: (key: string) => void,
+    onConfirmStep: () => void,
+    confirmLabel: string,
+    confirmDisabled: boolean
+  ) => (
+    <>
+      <input
+        type="text"
+        readOnly
+        value={parseInt(currentValue, 10).toLocaleString()}
+        className="w-full px-4 py-3 text-right text-3xl font-bold border-2 border-gray-200 rounded-xl bg-gray-50 text-gray-900 mb-3"
+        style={{ fontVariantNumeric: "tabular-nums" }}
+      />
+      <div className="grid grid-cols-4 gap-2.5">
+        {KEYS.map((key) => (
+          <button
+            key={key.action}
+            onClick={() => onKey(key.action)}
+            className={`h-14 rounded-xl text-lg font-semibold active:scale-95 transition-all ${
+              key.action === "backspace" || key.action === "clear"
+                ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
+                : key.action === "max"
+                  ? "bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm"
+                  : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+            }`}
+          >
+            {key.label}
+          </button>
+        ))}
+        <button
+          onClick={() => onKey("0")}
+          className="col-span-2 h-14 rounded-xl text-lg font-semibold bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
+        >
+          0
+        </button>
+        <button
+          onClick={onConfirmStep}
+          disabled={confirmDisabled}
+          className={`col-span-2 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all ${
+            confirmDisabled ? "opacity-40 cursor-not-allowed" : ""
+          }`}
+          style={{
+            background: confirmDisabled
+              ? "#9ca3af"
+              : "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+          }}
+        >
+          {confirmLabel}
+        </button>
+      </div>
+    </>
+  );
+
+  const renderPackagingGrid = (onSelect: (unit: PackageUnit) => void) => (
+    <>
+      {pkgLoading ? (
+        <div className="flex items-center justify-center py-8">
+          <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+          <span className="ml-2 text-sm text-gray-500">불러오는 중...</span>
+        </div>
+      ) : packageUnits.length === 0 ? (
+        <div className="text-center py-8 text-sm text-gray-400">
+          등록된 포장단위가 없습니다
+        </div>
+      ) : (
+        <div className="grid grid-cols-3 gap-3">
+          {packageUnits.map((unit) => (
+            <button
+              key={unit.value}
+              onClick={() => onSelect(unit)}
+              className="flex flex-col items-center gap-2 py-4 px-3 border-2 border-gray-200 rounded-xl bg-white text-sm font-medium text-gray-700 hover:border-blue-400 hover:bg-blue-50 active:scale-95 transition-all min-h-[80px]"
+            >
+              <span className="text-2xl">{unit.icon}</span>
+              <span className="text-center leading-tight">{unit.label}</span>
+              {unit.pkg_qty && unit.pkg_qty > 0 && (
+                <span className="text-[10px] text-gray-400">
+                  {unit.pkg_qty}EA/개
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </>
+  );
+
+  /* Header: 단계별 색상 */
+  const headerBg =
+    step === "count" && editingIndex !== null
+      ? "linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)"
+      : "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)";
+
+  const headerBadge =
+    step === "count" && editingIndex !== null
+      ? "수정"
+      : `최대 ${maxQty.toLocaleString()} EA`;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      <div className="relative bg-white w-[90%] max-w-[420px] rounded-2xl shadow-2xl z-10 overflow-hidden">
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-4 py-3"
+          style={{ background: headerBg }}
+        >
+          <div className="flex items-center gap-2">
+            {step !== "list" && (
+              <button
+                onClick={handleBack}
+                className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30 active:scale-95 transition-all"
+              >
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M15.75 19.5L8.25 12l7.5-7.5"
+                  />
+                </svg>
+              </button>
+            )}
+            <span className="text-[13px] text-white/90 bg-white/20 px-3 py-1 rounded-full">
+              {headerBadge}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30 active:scale-95 transition-all"
+          >
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M6 18L18 6M6 6l12 12"
+              />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-4">
+          {/* ====== LIST: 목록 + 추가 + 확인 ====== */}
+          {step === "list" && (
+            <>
+              {/* 요약 (포장 수량 / 미포장 잔량) */}
+              <div className="grid grid-cols-2 gap-2 mb-3">
+                <div className="bg-blue-50 border border-blue-200 rounded-lg px-3 py-2">
+                  <p className="text-[10px] text-blue-600 font-semibold">
+                    포장 수량
+                  </p>
+                  <p
+                    className="text-lg font-black text-blue-700"
+                    style={{ fontVariantNumeric: "tabular-nums" }}
+                  >
+                    {totalPackagedQty.toLocaleString()} EA
+                  </p>
+                </div>
+                <div
+                  className={`border rounded-lg px-3 py-2 ${
+                    unpackedQty > 0
+                      ? "bg-amber-50 border-amber-200"
+                      : "bg-green-50 border-green-200"
+                  }`}
+                >
+                  <p
+                    className={`text-[10px] font-semibold ${
+                      unpackedQty > 0 ? "text-amber-600" : "text-green-600"
+                    }`}
+                  >
+                    미포장
+                  </p>
+                  <p
+                    className={`text-lg font-black ${
+                      unpackedQty > 0 ? "text-amber-700" : "text-green-700"
+                    }`}
+                    style={{ fontVariantNumeric: "tabular-nums" }}
+                  >
+                    {unpackedQty.toLocaleString()} EA
+                  </p>
+                </div>
+              </div>
+
+              {/* 등록된 포장 목록 */}
+              <div className="space-y-2 mb-3 max-h-[40vh] overflow-y-auto">
+                {packages.length === 0 ? (
+                  <div className="text-center py-8 text-sm text-gray-400 border-2 border-dashed border-gray-200 rounded-xl">
+                    등록된 포장이 없습니다
+                  </div>
+                ) : (
+                  packages.map((p, idx) => (
+                    <div
+                      key={idx}
+                      className="flex items-center gap-2 px-3 py-2.5 bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-lg"
+                    >
+                      <span className="text-xl">{p.unit.icon}</span>
+                      <div className="flex-1 min-w-0">
+                        <p
+                          className="text-sm font-bold text-gray-900"
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {p.count.toLocaleString()}
+                          {p.unit.label} × {p.qtyPerUnit.toLocaleString()}EA
+                        </p>
+                        <p
+                          className="text-xs font-bold text-green-700"
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          = {(p.count * p.qtyPerUnit).toLocaleString()} EA
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => openEditFlow(idx)}
+                        className="w-9 h-9 rounded-lg bg-blue-100 text-blue-700 hover:bg-blue-200 flex items-center justify-center active:scale-95 transition-all"
+                        title="수정"
+                      >
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"
+                          />
+                        </svg>
+                      </button>
+                      <button
+                        onClick={() => handleDelete(idx)}
+                        className="w-9 h-9 rounded-lg bg-red-100 text-red-700 hover:bg-red-200 flex items-center justify-center active:scale-95 transition-all"
+                        title="삭제"
+                      >
+                        <svg
+                          className="w-4 h-4"
+                          fill="none"
+                          stroke="currentColor"
+                          strokeWidth={2}
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  ))
+                )}
+              </div>
+
+              {/* 품목명 */}
+              <p className="text-xs text-gray-400 truncate max-w-full px-1 mb-3 text-center">
+                {itemName}
+              </p>
+
+              {/* 버튼 */}
+              <div className="flex gap-2">
+                <button
+                  onClick={openAddFlow}
+                  disabled={unpackedQty <= 0}
+                  className={`flex-1 h-12 rounded-xl text-sm font-bold border-2 border-dashed transition-all ${
+                    unpackedQty <= 0
+                      ? "border-gray-200 text-gray-300 cursor-not-allowed"
+                      : "border-blue-400 text-blue-700 hover:bg-blue-50 active:scale-95"
+                  }`}
+                >
+                  + 포장단위 추가
+                </button>
+                <button
+                  onClick={handleFinalConfirm}
+                  disabled={packages.length === 0}
+                  className={`flex-1 h-12 rounded-xl text-sm font-bold text-white transition-all ${
+                    packages.length === 0
+                      ? "opacity-40 cursor-not-allowed"
+                      : "active:scale-95"
+                  }`}
+                  style={{
+                    background:
+                      packages.length === 0
+                        ? "#9ca3af"
+                        : "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+                  }}
+                >
+                  확인
+                </button>
+              </div>
+            </>
+          )}
+
+          {/* ====== PACKAGING: 포장단위 선택 ====== */}
+          {step === "packaging" && (
+            <>
+              <p className="text-center text-sm font-semibold text-gray-700 mb-1">
+                포장 단위를 선택하세요
+              </p>
+              <p className="text-center text-xs text-gray-400 mb-4">
+                미포장 잔량 {unpackedQty.toLocaleString()} EA
+              </p>
+              {renderPackagingGrid(handleSelectUnit)}
+            </>
+          )}
+
+          {/* ====== COUNT: 개수 입력 ====== */}
+          {step === "count" && selectedUnit && (
+            <>
+              <p className="text-center text-sm font-semibold text-gray-700 mb-1">
+                {selectedUnit.icon} {selectedUnit.label} 몇 개?
+              </p>
+              <p className="text-center text-xs text-gray-400 mb-1">
+                개당 {currentPkgQty.toLocaleString()}EA
+              </p>
+              <p className="text-center text-xs text-blue-600 mb-3">
+                사용 가능 {availableForCurrent.toLocaleString()}EA · 최대{" "}
+                {maxCountForCurrent.toLocaleString()}개
+              </p>
+              {renderNumpad(
+                count,
+                handleInput,
+                handleCountConfirm,
+                editingIndex !== null ? "수정" : "추가",
+                countNum <= 0
+              )}
+              {countNum > 0 && (
+                <div className="mt-3 text-center text-sm font-semibold px-3 py-2 rounded-lg bg-blue-50 text-blue-700 border border-blue-200">
+                  {countNum}
+                  {selectedUnit.label} × {currentPkgQty.toLocaleString()}EA ={" "}
+                  {(countNum * currentPkgQty).toLocaleString()}EA
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/PackagingModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/PackagingModal.tsx
new file mode 100644
index 00000000..2ff06727
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/PackagingModal.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { getPkgUnitsByItem, type PkgUnitByItem } from "@/lib/api/packaging";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface PackageUnit {
+  label: string;
+  icon: string;
+  value: string;
+  pkg_qty?: number;
+}
+
+interface PackagingModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (unit: PackageUnit) => void;
+  itemNumber?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function PackagingModal({ open, onClose, onSelect, itemNumber }: PackagingModalProps) {
+  const [units, setUnits] = useState<PackageUnit[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!open || !itemNumber) {
+      setUnits([]);
+      return;
+    }
+
+    let cancelled = false;
+    setLoading(true);
+
+    getPkgUnitsByItem(itemNumber)
+      .then((res) => {
+        if (cancelled) return;
+        const mapped: PackageUnit[] = res.data.map((pu: PkgUnitByItem) => ({
+          label: pu.pkg_name,
+          icon: "\uD83D\uDCE6",
+          value: pu.pkg_code,
+          pkg_qty: pu.pkg_qty,
+        }));
+        setUnits(mapped);
+      })
+      .catch(() => {
+        if (!cancelled) setUnits([]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => { cancelled = true; };
+  }, [open, itemNumber]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+      {/* Panel */}
+      <div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+          <h3 className="text-lg font-bold text-gray-900">
+            <span className="mr-1.5">{"\uD83D\uDCE6"}</span>
+            포장 단위 선택
+          </h3>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="p-5">
+          {loading ? (
+            <div className="flex items-center justify-center py-8">
+              <div className="w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
+              <span className="ml-2 text-sm text-gray-500">불러오는 중...</span>
+            </div>
+          ) : units.length === 0 ? (
+            <div className="text-center py-8 text-sm text-gray-400">
+              등록된 포장단위가 없습니다
+            </div>
+          ) : (
+            <div className="grid grid-cols-3 gap-3">
+              {units.map((unit) => (
+                <button
+                  key={unit.value}
+                  onClick={() => {
+                    onSelect(unit);
+                    onClose();
+                  }}
+                  className="flex flex-col items-center gap-2 py-4 px-3 border-2 border-gray-200 rounded-xl bg-white text-sm font-medium text-gray-700 hover:border-blue-400 hover:bg-blue-50 active:scale-95 transition-all min-h-[80px]"
+                >
+                  <span className="text-2xl">{unit.icon}</span>
+                  <span className="text-center leading-tight">{unit.label}</span>
+                  {unit.pkg_qty && unit.pkg_qty > 0 && (
+                    <span className="text-[10px] text-gray-400">{unit.pkg_qty}EA/개</span>
+                  )}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ProductionInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ProductionInbound.tsx
new file mode 100644
index 00000000..6b6f7694
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ProductionInbound.tsx
@@ -0,0 +1,677 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { apiClient } from "@/lib/api/client";
+import { SupplierModal, type Supplier, type PartnerSourceConfig, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface ProductionOrder {
+  id: string;
+  work_instruction_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ProductionInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_process_production";
+
+/** process_mng 테이블 소스 설정 — SupplierModal에 전달하여 공정 목록 조회 */
+const PROCESS_SOURCE: PartnerSourceConfig = {
+  tableName: "process_mng",
+  fields: {
+    code: "process_code",
+    name: "process_name",
+  },
+};
+
+export function ProductionInbound({ cart, onCartClick, saving, inboundType, sourceTable }: ProductionInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<ProductionOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<ProductionOrder | null>(null);
+
+  /* Per-order edited quantities (before adding to cart) */
+  const [editedQtys, setEditedQtys] = useState<Record<string, number>>({});
+
+  /* Ref to always call the latest saveToDb (avoids stale closure in setTimeout) */
+  const saveToDbRef = useRef(cart.saveToDb);
+  useEffect(() => { saveToDbRef.current = cart.saveToDb; });
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all processes for inline search — process_mng 테이블 조회 */
+  const fetchAllSuppliers = useCallback(async () => {
+    try {
+      const res = await apiClient.post("/table-management/tables/process_mng/data", {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+        sort: { columnName: "process_code", order: "asc" },
+      });
+      const data = res.data?.data?.data ?? res.data?.data?.rows ?? [];
+      const list: Supplier[] = (Array.isArray(data) ? data : []).map((r: Record<string, unknown>) => ({
+        id: String(r.id ?? ""),
+        customer_name: String(r.process_name ?? ""),
+        customer_code: String(r.process_code ?? ""),
+      }));
+      setAllSuppliers(list);
+    } catch {
+      setAllSuppliers([]);
+    }
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 공정 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 공정 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch production results — 선택된 공정의 실적 등록된 작업지시 조회 */
+  const fetchOrders = useCallback(async (searchKeyword?: string) => {
+    if (!selectedSupplier) {
+      setOrders([]);
+      return;
+    }
+    setLoading(true);
+    setFetchError(null);
+    try {
+      const params: Record<string, string> = {
+        processCode: selectedSupplier.customer_code,
+        pageSize: "50",
+      };
+      if (searchKeyword) params.keyword = searchKeyword;
+
+      const res = await apiClient.get("/receiving/source/production-results", { params });
+      const data = res.data?.data;
+
+      if (Array.isArray(data) && data.length > 0) {
+        setOrders(data.map((r: Record<string, unknown>) => ({
+          id: String(r.id ?? ""),
+          work_instruction_no: String(r.work_instruction_no ?? ""),
+          order_date: String(r.order_date ?? "").slice(0, 10),
+          supplier_code: String(r.process_code ?? ""),
+          supplier_name: String(r.process_name ?? ""),
+          item_code: String(r.item_code ?? ""),
+          item_name: String(r.item_name ?? ""),
+          spec: String(r.spec ?? ""),
+          material: String(r.material ?? ""),
+          order_qty: Number(r.order_qty ?? 0),
+          received_qty: Number(r.received_qty ?? 0),
+          remain_qty: Number(r.remain_qty ?? 0),
+          unit_price: 0,
+          status: String(r.result_status ?? ""),
+          due_date: "",
+          source_table: String(r.source_table ?? "work_order_process"),
+          inspection_type: r.inspection_type === "self" ? "self"
+            : r.inspection_type === "request" ? "request"
+            : null,
+          image: r.image ? String(r.image) : null,
+        })));
+      } else {
+        setOrders([]);
+      }
+    } catch {
+      setOrders([]);
+      setFetchError("데이터를 불러오지 못했습니다. 네트워크 상태를 확인해주세요.");
+    } finally {
+      setLoading(false);
+    }
+  }, [selectedSupplier]);
+
+  /* 공정 선택 변경 시 자동 재조회 */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter by keyword (프론트 필터링) */
+  const displayOrders = keyword
+    ? orders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.work_instruction_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : orders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: ProductionOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Numpad confirm: only update local edited qty (do NOT add to cart) */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const finalQty = Math.min(qty, numpadTarget.remain_qty);
+    setEditedQtys((prev) => ({ ...prev, [numpadTarget.id]: finalQty }));
+    setNumpadTarget(null);
+  };
+
+  /* Add to cart with currently displayed qty */
+  const handleAddToCart = (order: ProductionOrder) => {
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공정 검증: 카트에 이미 다른 공정 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 공정의 품목이 이미 장바구니에 있습니다.\n같은 공정의 품목만 담을 수 있습니다.");
+        return;
+      }
+    }
+
+    const displayQty = editedQtys[order.id] ?? order.remain_qty;
+    const finalQty = Math.min(displayQty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.work_instruction_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setEditedQtys((prev) => {
+      const next = { ...prev };
+      delete next[order.id];
+      return next;
+    });
+    setTimeout(() => saveToDbRef.current().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => saveToDbRef.current().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">생산입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">생산 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 생산입고 라인, 발주품목 위. 테마 green */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover} shadow-[0_4px_12px_rgba(22,163,74,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">공정명</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "공정을 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover} shadow-[0_4px_12px_rgba(34,197,94,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">생산 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-green-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 생산지시번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-green-400 focus:ring-2 focus:ring-green-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(34,197,94,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            생산 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">공정을 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">공정을 선택하면 해당 공정의 생산 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 공정의 생산 품목이 없습니다" : "공정을 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-green-500 rounded-lg hover:bg-green-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-green-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-green-100 text-green-700 border border-green-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">지시일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">지시번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.work_instruction_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">양품수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad (edit qty before adding) */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : editedQtys[order.id] !== undefined
+                            ? "bg-green-50 border-green-300 hover:bg-green-100 cursor-pointer active:scale-95"
+                            : "bg-green-50 border-green-200 hover:bg-green-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${
+                          inCart ? "text-gray-400"
+                            : editedQtys[order.id] !== undefined ? "text-green-700"
+                            : "text-green-700"
+                        }`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : (editedQtys[order.id] ?? order.remain_qty).toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => handleAddToCart(order)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all"
+                          style={{
+                            background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+                          }}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+        source={PROCESS_SOURCE}
+        title="공정 선택"
+        searchPlaceholder="공정명 또는 코드 검색..."
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="공정"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="생산 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/PurchaseInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/PurchaseInbound.tsx
new file mode 100644
index 00000000..923ccbe0
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/PurchaseInbound.tsx
@@ -0,0 +1,682 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { apiClient } from "@/lib/api/client";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface PurchaseOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Dummy data (fallback)                                               */
+/* ------------------------------------------------------------------ */
+
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface PurchaseInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 (예: "구매입고") — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 (예: "purchase_detail") — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_purchase";
+
+export function PurchaseInbound({ cart, onCartClick, saving, inboundType, sourceTable }: PurchaseInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<PurchaseOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<PurchaseOrder | null>(null);
+
+  /* Per-order edited quantities (before adding to cart) */
+  const [editedQtys, setEditedQtys] = useState<Record<string, number>>({});
+
+  /* Ref to always call the latest saveToDb (avoids stale closure in setTimeout) */
+  const saveToDbRef = useRef(cart.saveToDb);
+  useEffect(() => { saveToDbRef.current = cart.saveToDb; });
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search (supplier_mng = 공급사)
+   * 구매관리 > 공급업체관리 화면과 동일한 API로 맞춤 (autoFilter 적용)
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    try {
+      const res = await apiClient.post("/table-management/tables/supplier_mng/data", {
+        page: 1,
+        size: 500,
+        autoFilter: true,
+        sort: { columnName: "supplier_code", order: "desc" },
+      });
+      const data =
+        res.data?.data?.data ?? res.data?.data?.rows ?? [];
+      const list: Supplier[] = (Array.isArray(data) ? data : []).map((r: Record<string, unknown>) => ({
+        id: String(r.id ?? ""),
+        customer_name: String(r.supplier_name ?? r.customer_name ?? r.name ?? ""),
+        customer_code: String(r.supplier_code ?? r.customer_code ?? r.code ?? ""),
+        business_number: String(r.business_number ?? ""),
+        phone: String(r.contact_phone ?? r.phone ?? ""),
+        address: String(r.address ?? ""),
+      }));
+      setAllSuppliers(list);
+    } catch {
+      setAllSuppliers([]);
+    }
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch purchase orders */
+  const fetchOrders = useCallback(async (searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      const params: Record<string, string> = { pageSize: "50" };
+      if (searchKeyword) params.keyword = searchKeyword;
+
+      const res = await apiClient.get("/receiving/source/purchase-orders", { params });
+      const data = res.data?.data;
+
+      if (Array.isArray(data) && data.length > 0) {
+        setOrders(data.map((r: Record<string, unknown>) => ({
+          id: String(r.id ?? ""),
+          purchase_no: String(r.purchase_no ?? ""),
+          order_date: String(r.order_date ?? "").slice(0, 10),
+          supplier_code: String(r.supplier_code ?? ""),
+          supplier_name: String(r.supplier_name ?? ""),
+          item_code: String(r.item_code ?? ""),
+          item_name: String(r.item_name ?? ""),
+          spec: String(r.spec ?? ""),
+          material: String(r.material ?? ""),
+          order_qty: Number(r.order_qty ?? 0),
+          received_qty: Number(r.received_qty ?? 0),
+          remain_qty: Number(r.remain_qty ?? 0),
+          unit_price: Number(r.unit_price ?? 0),
+          status: String(r.status ?? ""),
+          due_date: String(r.due_date ?? "").slice(0, 10),
+          source_table: String(r.source_table ?? "purchase_detail"),
+          inspection_type: r.inspection_type === "self" ? "self"
+            : r.inspection_type === "request" ? "request"
+            : null,
+          image: r.image ? String(r.image) : null,
+        })));
+      } else {
+        setOrders([]);
+      }
+    } catch {
+      setOrders([]);
+      setFetchError("데이터를 불러오지 못했습니다. 네트워크 상태를 확인해주세요.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: PurchaseOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Numpad confirm: only update local edited qty (do NOT add to cart) */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const finalQty = Math.min(qty, numpadTarget.remain_qty);
+    setEditedQtys((prev) => ({ ...prev, [numpadTarget.id]: finalQty }));
+    setNumpadTarget(null);
+  };
+
+  /* Add to cart with currently displayed qty */
+  const handleAddToCart = (order: PurchaseOrder) => {
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        return;
+      }
+    }
+
+    const displayQty = editedQtys[order.id] ?? order.remain_qty;
+    const finalQty = Math.min(displayQty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    // 담긴 후 editedQtys에서 제거
+    setEditedQtys((prev) => {
+      const next = { ...prev };
+      delete next[order.id];
+      return next;
+    });
+    setTimeout(() => saveToDbRef.current().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => saveToDbRef.current().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">구매입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">발주 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 구매입고 라인, 발주품목 위. 스캐너 버튼(48px) 대비 3배 너비(144px), 장바구니 라벨 */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} shadow-[0_4px_12px_rgba(59,130,246,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} shadow-[0_4px_12px_rgba(59,130,246,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">발주 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-blue-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-blue-400 focus:ring-2 focus:ring-blue-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(59,130,246,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            발주 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 발주 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-blue-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 미입고 발주가 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-blue-500 rounded-lg hover:bg-blue-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-blue-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad (edit qty before adding) */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : editedQtys[order.id] !== undefined
+                            ? "bg-green-50 border-green-300 hover:bg-green-100 cursor-pointer active:scale-95"
+                            : "bg-blue-50 border-blue-200 hover:bg-blue-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${
+                          inCart ? "text-gray-400"
+                            : editedQtys[order.id] !== undefined ? "text-green-700"
+                            : "text-blue-700"
+                        }`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : (editedQtys[order.id] ?? order.remain_qty).toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => handleAddToCart(order)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all"
+                          style={{
+                            background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+                          }}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="발주 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/RecoveryInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/RecoveryInbound.tsx
new file mode 100644
index 00000000..c823faa6
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/RecoveryInbound.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface RecoveryOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface RecoveryInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_recovery";
+
+export function RecoveryInbound({ cart, onCartClick, saving, inboundType, sourceTable }: RecoveryInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<RecoveryOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<RecoveryOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 외주자재회수용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 외주자재회수 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: RecoveryOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">외주자재회수</h1>
+            <p className="text-xs text-gray-400 mt-0.5">회수 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 외주자재회수 라인, 발주품목 위. 테마 pink */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.pink.buttonBg} ${COLOR_MAP.pink.buttonBgHover} shadow-[0_4px_12px_rgba(219,39,119,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.pink.buttonBg} ${COLOR_MAP.pink.buttonBgHover} shadow-[0_4px_12px_rgba(236,72,153,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">회수 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-pink-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-pink-400 focus:ring-2 focus:ring-pink-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.pink.buttonBg} ${COLOR_MAP.pink.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(236,72,153,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            회수 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 회수 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-pink-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 회수 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-pink-500 rounded-lg hover:bg-pink-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-pink-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-pink-100 text-pink-700 border border-pink-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-pink-50 border-pink-200 hover:bg-pink-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-pink-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.pink.buttonBg} ${COLOR_MAP.pink.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="회수 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ReturnExternalInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ReturnExternalInbound.tsx
new file mode 100644
index 00000000..d627f17f
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ReturnExternalInbound.tsx
@@ -0,0 +1,599 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface ReturnOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ReturnExternalInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_return-external";
+
+export function ReturnExternalInbound({ cart, onCartClick, saving, inboundType, sourceTable }: ReturnExternalInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<ReturnOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<ReturnOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 반품입고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 반품입고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: ReturnOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">반품입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">반품 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 반품입고 라인, 발주품목 위. 테마 amber */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.amber.buttonBg} ${COLOR_MAP.amber.buttonBgHover} shadow-[0_4px_12px_rgba(217,119,6,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.amber.buttonBg} ${COLOR_MAP.amber.buttonBgHover} shadow-[0_4px_12px_rgba(245,158,11,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">반품 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-amber-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-amber-400 focus:ring-2 focus:ring-amber-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.amber.buttonBg} ${COLOR_MAP.amber.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(245,158,11,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            반품 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 반품 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-amber-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 반품 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-amber-500 rounded-lg hover:bg-amber-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-amber-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-amber-50 border-amber-200 hover:bg-amber-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-amber-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all"
+                          style={{
+                            background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+                          }}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="반품 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ReturnInternalInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ReturnInternalInbound.tsx
new file mode 100644
index 00000000..f7bedd61
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/ReturnInternalInbound.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface ReturnOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ReturnInternalInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_return-internal";
+
+export function ReturnInternalInbound({ cart, onCartClick, saving, inboundType, sourceTable }: ReturnInternalInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<ReturnOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<ReturnOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 반납입고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 반납입고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: ReturnOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">반납입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">반납 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 반납입고 라인, 발주품목 위. 테마 orange */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover} shadow-[0_4px_12px_rgba(234,88,12,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover} shadow-[0_4px_12px_rgba(249,115,22,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">반납 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-orange-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-orange-400 focus:ring-2 focus:ring-orange-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(249,115,22,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            반납 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 반납 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-orange-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 반납 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-orange-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-orange-100 text-orange-700 border border-orange-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-orange-50 border-orange-200 hover:bg-orange-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-orange-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="반납 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SubcontractorInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SubcontractorInbound.tsx
new file mode 100644
index 00000000..4279a6f3
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SubcontractorInbound.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface SubcontractorOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface SubcontractorInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_subcontractor";
+
+export function SubcontractorInbound({ cart, onCartClick, saving, inboundType, sourceTable }: SubcontractorInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<SubcontractorOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<SubcontractorOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 외주입고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 외주입고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: SubcontractorOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">외주입고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">외주 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 외주입고 라인, 발주품목 위. 테마 purple */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover} shadow-[0_4px_12px_rgba(124,58,237,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover} shadow-[0_4px_12px_rgba(139,92,246,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">외주 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-purple-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-purple-400 focus:ring-2 focus:ring-purple-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(139,92,246,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            외주 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 외주 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-purple-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 외주 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-purple-500 rounded-lg hover:bg-purple-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-purple-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-purple-100 text-purple-700 border border-purple-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-purple-50 border-purple-200 hover:bg-purple-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-purple-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="외주 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SuppliedInbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SuppliedInbound.tsx
new file mode 100644
index 00000000..dab4da85
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SuppliedInbound.tsx
@@ -0,0 +1,596 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "./SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface SuppliedOrder {
+  id: string;
+  purchase_no: string;
+  order_date: string;
+  supplier_code: string;
+  supplier_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  received_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface SuppliedInboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 입고 유형 — 카트 품목에 기록됨 */
+  inboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_supplier_supplied";
+
+export function SuppliedInbound({ cart, onCartClick, saving, inboundType, sourceTable }: SuppliedInboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedSupplier, setSelectedSupplier] = useState<Supplier | null>(null);
+  const [supplierModalOpen, setSupplierModalOpen] = useState(false);
+  const [orders, setOrders] = useState<SuppliedOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<SuppliedOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [supplierScanOpen, setSupplierScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline supplier search state */
+  const [supplierSearchText, setSupplierSearchText] = useState("");
+  const [supplierDropdownOpen, setSupplierDropdownOpen] = useState(false);
+  const [allSuppliers, setAllSuppliers] = useState<Supplier[]>([]);
+  const supplierInputRef = useRef<HTMLInputElement>(null);
+  const supplierDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all suppliers for inline search
+   * TODO: API 연결 — 사급자재용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllSuppliers = useCallback(async () => {
+    setAllSuppliers([]);
+  }, []);
+
+  useEffect(() => { fetchAllSuppliers(); }, [fetchAllSuppliers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedSupplier(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectSupplier = (s: Supplier | null) => {
+    setSelectedSupplier(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered suppliers for inline dropdown */
+  const filteredSuppliers = useMemo(() => {
+    if (!supplierSearchText.trim()) return [];
+    return allSuppliers.filter((s) => matchChosung(s.customer_name, supplierSearchText.trim()));
+  }, [allSuppliers, supplierSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        supplierDropdownRef.current &&
+        !supplierDropdownRef.current.contains(e.target as Node) &&
+        supplierInputRef.current &&
+        !supplierInputRef.current.contains(e.target as Node)
+      ) {
+        setSupplierDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch return orders
+   * TODO: API 연결 — 사급자재 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected supplier */
+  const filteredOrders = selectedSupplier
+    ? orders.filter((o) =>
+        o.supplier_code === selectedSupplier.customer_code ||
+        o.supplier_name === selectedSupplier.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.purchase_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: SuppliedOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 공급사 검증: 카트에 이미 다른 공급사 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingSupplier = String(cart.cartItems[0].row.supplier_code || "");
+      if (existingSupplier && existingSupplier !== order.supplier_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          supplier_code: order.supplier_code,
+          supplier_name: order.supplier_name,
+          purchase_no: order.purchase_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          inbound_type: inboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/inbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">사급자재</h1>
+            <p className="text-xs text-gray-400 mt-0.5">사급 품목을 선택하여 입고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button — 사급입고 라인, 발주품목 위. 테마 cyan */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover} shadow-[0_4px_12px_rgba(8,145,178,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Supplier search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedSupplier && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedSupplier.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setSupplierModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedSupplier
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedSupplier ? selectedSupplier.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setSupplierScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover} shadow-[0_4px_12px_rgba(6,182,212,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedSupplier && (
+              <button
+                onClick={() => { selectSupplier(null); setSupplierSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+
+            {/* Supplier dropdown removed — use modal instead */}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">사급 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-cyan-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedSupplier ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 발주번호 검색..."
+              disabled={!selectedSupplier}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedSupplier
+                  ? "focus:border-cyan-400 focus:ring-2 focus:ring-cyan-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button - glossy v3 */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedSupplier}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover} ${
+                !selectedSupplier ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(6,182,212,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            사급 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedSupplier ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedSupplier ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 사급 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-cyan-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedSupplier ? "해당 거래처의 사급 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-cyan-500 rounded-lg hover:bg-cyan-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-cyan-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-cyan-100 text-cyan-700 border border-cyan-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.purchase_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">발주수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미입고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-cyan-50 border-cyan-200 hover:bg-cyan-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-cyan-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={supplierModalOpen}
+        onClose={() => setSupplierModalOpen(false)}
+        onSelect={(s) => selectSupplier(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for supplier */}
+      <BarcodeScanModal
+        open={supplierScanOpen}
+        onOpenChange={setSupplierScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setSupplierScanOpen(false);
+          // 스캔 결과로 거래처 검색 (거래처명 또는 코드 매칭)
+          const match = allSuppliers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectSupplier(match);
+            setSupplierSearchText("");
+          } else {
+            // 매칭 안 되면 검색 텍스트에 넣어서 드롭다운 표시
+            setSupplierSearchText(barcode);
+            setSupplierDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="사급 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          // 스캔 결과로 품목 필터
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SupplierModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SupplierModal.tsx
new file mode 100644
index 00000000..cdcabfc2
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/inbound/SupplierModal.tsx
@@ -0,0 +1,329 @@
+"use client";
+
+import React, { useState, useEffect, useMemo, useCallback } from "react";
+import { apiClient } from "@/lib/api/client";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+/**
+ * 범용 거래처 표현형.
+ * customer_name / customer_code 필드명은 기존 호환성을 위해 유지하지만,
+ * 실제 원본 테이블(공급사/고객사/외주업체 등)은 호출부에서 지정한다.
+ */
+export interface Supplier {
+  id: string;
+  customer_name: string;
+  customer_code?: string;
+  business_number?: string;
+  phone?: string;
+  address?: string;
+}
+
+/**
+ * 모달이 접속할 테이블과 컬럼 매핑.
+ * 예) supplier_mng + { code: "supplier_code", name: "supplier_name", ... }
+ *     customer_mng + { code: "customer_code", name: "customer_name", ... }
+ */
+export interface PartnerSourceConfig {
+  /** 조회할 테이블명 (GET /api/data/:tableName 으로 조회됨) */
+  tableName: string;
+  /** 필드 매핑 */
+  fields: {
+    code: string;
+    name: string;
+    businessNumber?: string;
+    phone?: string;
+    address?: string;
+  };
+}
+
+interface SupplierModalProps {
+  open: boolean;
+  onClose: () => void;
+  onSelect: (supplier: Supplier) => void;
+  /** 테이블/필드 매핑. 미지정 시 supplier_mng 기본값 사용(하위호환) */
+  source?: PartnerSourceConfig;
+  /** 모달 타이틀 (기본: "거래처 선택") */
+  title?: string;
+  /** 검색 플레이스홀더 (기본: "거래처명 또는 코드 검색...") */
+  searchPlaceholder?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helpers                                                             */
+/* ------------------------------------------------------------------ */
+
+const AVATAR_COLORS = [
+  "#3b82f6", "#22c55e", "#f59e0b", "#ef4444", "#8b5cf6",
+  "#06b6d4", "#ec4899", "#14b8a6", "#f97316", "#6366f1",
+  "#84cc16", "#e11d48", "#0ea5e9", "#a855f7", "#10b981",
+];
+
+function getAvatarColor(name: string): string {
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) {
+    hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+}
+
+/** Get the Korean initial consonant (Chosung) for sorting */
+export function getChosung(char: string): string {
+  const code = char.charCodeAt(0);
+  if (code < 0xAC00 || code > 0xD7A3) {
+    // Not Korean -- group by uppercase letter
+    const upper = char.toUpperCase();
+    if (/[A-Z]/.test(upper)) return upper;
+    return "#";
+  }
+  const chosungList = [
+    "ㄱ","ㄲ","ㄴ","ㄷ","ㄸ","ㄹ","ㅁ","ㅂ","ㅃ","ㅅ",
+    "ㅆ","ㅇ","ㅈ","ㅉ","ㅊ","ㅋ","ㅌ","ㅍ","ㅎ",
+  ];
+  const idx = Math.floor((code - 0xAC00) / 588);
+  return chosungList[idx] ?? "#";
+}
+
+/** Check if a query (possibly chosung-only) matches a Korean string */
+export function matchChosung(text: string, query: string): boolean {
+  if (!query) return true;
+  // Normal substring match first
+  if (text.toLowerCase().includes(query.toLowerCase())) return true;
+  // Check if query is all chosung characters
+  const chosungChars = "ㄱㄲㄴㄷㄸㄹㅁㅂㅃㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎ";
+  const isChosungQuery = [...query].every((c) => chosungChars.includes(c));
+  if (!isChosungQuery) return false;
+  // Extract chosung from text (strip prefixes like (주))
+  const cleaned = text.replace(/^\(주\)|\(유\)|\(합\)/g, "").trim();
+  const textChosung = [...cleaned].map((c) => getChosung(c)).join("");
+  return textChosung.includes(query);
+}
+
+/* ------------------------------------------------------------------ */
+/* Defaults (하위호환: source 미지정 시 supplier_mng 사용)               */
+/* ------------------------------------------------------------------ */
+
+const DEFAULT_SOURCE: PartnerSourceConfig = {
+  tableName: "supplier_mng",
+  fields: {
+    code: "supplier_code",
+    name: "supplier_name",
+    businessNumber: "business_number",
+    phone: "contact_phone",
+    address: "address",
+  },
+};
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function SupplierModal({
+  open,
+  onClose,
+  onSelect,
+  source,
+  title = "거래처 선택",
+  searchPlaceholder = "거래처명 또는 코드 검색...",
+}: SupplierModalProps) {
+  const [suppliers, setSuppliers] = useState<Supplier[]>([]);
+  const [search, setSearch] = useState("");
+  const [sortMode, setSortMode] = useState<"korean" | "abc">("korean");
+  const [loading, setLoading] = useState(false);
+
+  // 지정된 소스가 없으면 기본값(supplier_mng) 사용
+  const activeSource = source ?? DEFAULT_SOURCE;
+
+  // Fetch partners from the configured table
+  // 구매관리 > 공급업체관리 화면과 동일한 API 사용 (POST /table-management/tables/{table}/data, autoFilter 적용)
+  const fetchSuppliers = useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await apiClient.post(
+        `/table-management/tables/${activeSource.tableName}/data`,
+        {
+          page: 1,
+          size: 500,
+          autoFilter: true,
+          sort: { columnName: activeSource.fields.code, order: "desc" },
+        },
+      );
+      const data =
+        res.data?.data?.data ?? res.data?.data?.rows ?? [];
+      const f = activeSource.fields;
+      const list: Supplier[] = (Array.isArray(data) ? data : []).map(
+        (r: Record<string, unknown>) => ({
+          id: String(r.id ?? ""),
+          customer_name: String(r[f.name] ?? ""),
+          customer_code: String(r[f.code] ?? ""),
+          business_number: f.businessNumber
+            ? String(r[f.businessNumber] ?? "")
+            : "",
+          phone: f.phone ? String(r[f.phone] ?? "") : "",
+          address: f.address ? String(r[f.address] ?? "") : "",
+        }),
+      );
+      setSuppliers(list);
+    } catch {
+      setSuppliers([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [activeSource.tableName, activeSource.fields]);
+
+  useEffect(() => {
+    if (open) {
+      fetchSuppliers();
+      setSearch("");
+    }
+  }, [open, fetchSuppliers]);
+
+  /* Filtered + grouped */
+  const grouped = useMemo(() => {
+    const filtered = suppliers.filter((s) =>
+      s.customer_name.toLowerCase().includes(search.toLowerCase()) ||
+      (s.customer_code ?? "").toLowerCase().includes(search.toLowerCase())
+    );
+
+    // Sort — 접두사 제거 후 비교 (그룹핑 기준과 일치)
+    const stripPrefix = (name: string) =>
+      name.replace(/^\(주\)|\(유\)|\(합\)/g, "").trim();
+    const sorted = [...filtered].sort((a, b) => {
+      const an = stripPrefix(a.customer_name);
+      const bn = stripPrefix(b.customer_name);
+      if (sortMode === "abc") return an.localeCompare(bn, "en");
+      return an.localeCompare(bn, "ko");
+    });
+
+    // Group by chosung
+    const groups: { letter: string; items: Supplier[] }[] = [];
+    const map = new Map<string, Supplier[]>();
+    for (const s of sorted) {
+      const first = s.customer_name.replace(/^\(주\)|\(유\)|\(합\)/g, "").trim().charAt(0);
+      const letter = getChosung(first);
+      if (!map.has(letter)) map.set(letter, []);
+      map.get(letter)!.push(s);
+    }
+    for (const [letter, items] of map) {
+      groups.push({ letter, items });
+    }
+    return groups;
+  }, [suppliers, search, sortMode]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative bg-white rounded-2xl w-[80vw] h-[80vh] flex flex-col shadow-2xl overflow-hidden z-10">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+          <div className="flex items-center gap-3">
+            <h3 className="text-lg font-bold text-gray-900">{title}</h3>
+            {/* Sort tabs */}
+            <div className="flex gap-1.5">
+              <button
+                onClick={() => setSortMode("korean")}
+                className={`px-3 py-1 rounded-full text-xs font-medium border transition-all ${
+                  sortMode === "korean"
+                    ? "bg-gray-900 text-white border-gray-900"
+                    : "bg-white text-gray-500 border-gray-200 hover:bg-gray-50"
+                }`}
+              >
+                가나다
+              </button>
+              <button
+                onClick={() => setSortMode("abc")}
+                className={`px-3 py-1 rounded-full text-xs font-medium border transition-all ${
+                  sortMode === "abc"
+                    ? "bg-gray-900 text-white border-gray-900"
+                    : "bg-white text-gray-500 border-gray-200 hover:bg-gray-50"
+                }`}
+              >
+                ABC
+              </button>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Search */}
+        <div className="px-5 py-3">
+          <div className="relative">
+            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+            </svg>
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder={searchPlaceholder}
+              className="w-full pl-10 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all"
+            />
+          </div>
+        </div>
+
+        {/* Supplier list */}
+        <div className="flex-1 overflow-y-auto px-5 pb-5">
+          {loading ? (
+            <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+              불러오는 중...
+            </div>
+          ) : grouped.length === 0 ? (
+            <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+              {search ? "검색 결과가 없습니다" : "거래처가 없습니다"}
+            </div>
+          ) : (
+            grouped.map((group) => (
+              <div key={group.letter} className="mb-2">
+                {/* Group header */}
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="text-sm font-bold text-blue-500 min-w-[20px]">{group.letter}</span>
+                  <div className="flex-1 h-px bg-gray-100" />
+                </div>
+                {/* Grid — 뷰포트 900px 미만 4개(25%), 이상 5개(20%), 셀 전체 클릭 가능 */}
+                <div className="grid grid-cols-4 min-[900px]:grid-cols-5 gap-x-2 gap-y-1">
+                  {group.items.map((supplier) => {
+                    const displayName = supplier.customer_name.replace(/^\(주\)|\(유\)|\(합\)/g, "").trim();
+                    const initial = displayName.charAt(0);
+                    const color = getAvatarColor(supplier.customer_name);
+
+                    return (
+                      <button
+                        key={supplier.id}
+                        onClick={() => { onSelect(supplier); onClose(); }}
+                        className="flex flex-col items-center gap-1 py-1.5 px-3 w-full rounded-xl hover:bg-gray-50 active:scale-95 transition-all cursor-pointer border-none bg-transparent"
+                      >
+                        <div
+                          className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl flex items-center justify-center text-white text-xl sm:text-2xl font-bold shadow-sm shrink-0"
+                          style={{ background: color }}
+                        >
+                          {initial}
+                        </div>
+                        <span className="text-xs sm:text-sm font-medium text-gray-700 text-center leading-tight w-full truncate px-1">
+                          {supplier.customer_name}
+                        </span>
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/EtcOutbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/EtcOutbound.tsx
new file mode 100644
index 00000000..5bb7a511
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/EtcOutbound.tsx
@@ -0,0 +1,562 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "../inbound/SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundOrder {
+  id: string;
+  reference_no: string;
+  order_date: string;
+  customer_code: string;
+  customer_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  shipped_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  inspection_type: "self" | "request" | null;
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface EtcOutboundProps {
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  onCartClick: () => void;
+  saving: boolean;
+  outboundType: string;
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_customer_etc";
+
+export function EtcOutbound({ cart, onCartClick, saving, outboundType, sourceTable }: EtcOutboundProps) {
+  const router = useRouter();
+
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(null);
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [orders, setOrders] = useState<OutboundOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<OutboundOrder | null>(null);
+
+  const [customerScanOpen, setCustomerScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  const [customerSearchText, setCustomerSearchText] = useState("");
+  const [customerDropdownOpen, setCustomerDropdownOpen] = useState(false);
+  const [allCustomers, setAllCustomers] = useState<Supplier[]>([]);
+  const customerInputRef = useRef<HTMLInputElement>(null);
+  const customerDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all customers
+   * TODO: API 연결 — 기타출고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllCustomers = useCallback(async () => {
+    setAllCustomers([]);
+  }, []);
+
+  useEffect(() => { fetchAllCustomers(); }, [fetchAllCustomers]);
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedCustomer(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectCustomer = (s: Supplier | null) => {
+    setSelectedCustomer(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  const filteredCustomers = useMemo(() => {
+    if (!customerSearchText.trim()) return [];
+    return allCustomers.filter((s) => matchChosung(s.customer_name, customerSearchText.trim()));
+  }, [allCustomers, customerSearchText]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        customerDropdownRef.current &&
+        !customerDropdownRef.current.contains(e.target as Node) &&
+        customerInputRef.current &&
+        !customerInputRef.current.contains(e.target as Node)
+      ) {
+        setCustomerDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch outbound orders
+   * TODO: API 연결 — 기타출고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  const filteredOrders = selectedCustomer
+    ? orders.filter((o) =>
+        o.customer_code === selectedCustomer.customer_code ||
+        o.customer_name === selectedCustomer.customer_name
+      )
+    : orders;
+
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.reference_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  const openNumpad = (order: OutboundOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    if (cart.cartItems.length > 0) {
+      const existingCustomer = String(cart.cartItems[0].row.customer_code || "");
+      if (existingCustomer && existingCustomer !== order.customer_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          customer_code: order.customer_code,
+          customer_name: order.customer_name,
+          reference_no: order.reference_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          outbound_type: outboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/outbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">기타출고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">기타 품목을 선택하여 출고하세요</p>
+          </div>
+        </div>
+
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className="relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60"
+          style={{
+            background: "linear-gradient(to bottom, #475569, #1e293b)",
+            boxShadow: "0 4px 12px rgba(30,41,59,0.3)",
+          }}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedCustomer && (
+              <span className="text-[11px] font-medium text-gray-600 bg-gray-100 px-2 py-0.5 rounded-full">
+                {selectedCustomer.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedCustomer
+                  ? "bg-gray-50/50 border-gray-300 text-gray-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedCustomer ? selectedCustomer.customer_name : "거래처를 선택하세요"}
+            </button>
+            <button
+              onClick={() => setCustomerScanOpen(true)}
+              className="min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0"
+              style={{
+                background: "linear-gradient(to bottom, #475569, #1e293b)",
+                boxShadow: "0 4px 12px rgba(30,41,59,0.3)",
+              }}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedCustomer && (
+              <button
+                onClick={() => { selectCustomer(null); setCustomerSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">출하 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-gray-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedCustomer ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 주문번호 검색..."
+              disabled={!selectedCustomer}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedCustomer
+                  ? "focus:border-gray-400 focus:ring-2 focus:ring-gray-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedCustomer}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${
+                !selectedCustomer ? "opacity-40 cursor-not-allowed" : ""
+              }`}
+              style={{
+                background: "linear-gradient(to bottom, #475569, #1e293b)",
+                boxShadow: selectedCustomer ? "0 4px 12px rgba(30,41,59,0.3)" : "none",
+              }}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">출하 품목 목록</span>
+          <span className="text-[11px] text-gray-400">
+            {selectedCustomer ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedCustomer ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 출하 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-gray-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedCustomer ? "해당 거래처의 출하 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-gray-500 rounded-lg hover:bg-gray-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-gray-400"
+                  }`}
+                >
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex gap-2.5">
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.reference_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">출고수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미출고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      <button
+                        onClick={() => { if (!inCart) openNumpad(order); }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-gray-100 border-gray-300 hover:bg-gray-200 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-gray-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all"
+                          style={{
+                            background: "linear-gradient(135deg, #475569 0%, #1e293b 100%)",
+                          }}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(s) => selectCustomer(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      <BarcodeScanModal
+        open={customerScanOpen}
+        onOpenChange={setCustomerScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setCustomerScanOpen(false);
+          const match = allCustomers.find(
+            (s) => s.customer_code === barcode || s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectCustomer(match);
+            setCustomerSearchText("");
+          } else {
+            setCustomerSearchText(barcode);
+            setCustomerDropdownOpen(true);
+          }
+        }}
+      />
+
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="출하 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/OutboundCartPage.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/OutboundCartPage.tsx
new file mode 100644
index 00000000..6414955a
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/OutboundCartPage.tsx
@@ -0,0 +1,1242 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { apiClient } from "@/lib/api/client";
+import { type CartItemWithId, useCartSync } from "../common/useCartSync";
+import { NumberPadModal, type PackageEntry } from "../inbound/NumberPadModal";
+import { LoadingUnitModal, type LoadingUnitSelection } from "../inbound/LoadingUnitModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface Warehouse {
+	warehouse_code: string;
+	warehouse_name: string;
+	warehouse_type?: string;
+}
+
+/** CartItemWithId -> 화면 표시용 파싱 결과 */
+interface CartItemParsed {
+	id: string;
+	rowKey: string;
+	dbId: string;
+	source_table: string;
+	source_id: string;
+	reference_no: string;
+	item_code: string;
+	item_name: string;
+	spec: string;
+	material: string;
+	order_qty: number;
+	remain_qty: number;
+	outbound_qty: number;
+	unit_price: number;
+	customer_code: string;
+	customer_name: string;
+	order_date?: string;
+	packages?: PackageEntry[];
+	image?: string | null;
+	outbound_type: string;
+	loading_code?: string;
+	loading_name?: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helper: CartItemWithId -> CartItemParsed                            */
+/* ------------------------------------------------------------------ */
+function toCartItemParsed(item: CartItemWithId): CartItemParsed {
+	const data = item.row;
+
+	return {
+		id: item.rowKey || String(data.id ?? ""),
+		rowKey: item.rowKey,
+		dbId: item.cartId || "",
+		source_table:
+			item.sourceTable || String(data.source_table ?? ""),
+		source_id: item.rowKey || String(data.id ?? ""),
+		reference_no: String(data.reference_no ?? ""),
+		item_code: String(data.item_code ?? ""),
+		item_name: String(data.item_name ?? ""),
+		spec: String(data.spec ?? ""),
+		material: String(data.material ?? ""),
+		order_qty: Number(data.order_qty ?? 0),
+		remain_qty: Number(data.remain_qty ?? 0),
+		outbound_qty: item.quantity,
+		unit_price: Number(data.unit_price ?? 0),
+		customer_code: String(data.customer_code ?? ""),
+		customer_name: String(data.customer_name ?? ""),
+		order_date: data.order_date ? String(data.order_date) : undefined,
+		// packageEntries의 실제 런타임 타입은 NumberPadModal의 PackageEntry[]
+		packages: item.packageEntries as unknown as PackageEntry[] | undefined,
+		image: data.image ? String(data.image) : null,
+		outbound_type: String(data.outbound_type ?? ""),
+		loading_code: data.loading_code ? String(data.loading_code) : undefined,
+		loading_name: data.loading_name ? String(data.loading_name) : undefined,
+	};
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface OutboundCartPageProps {
+	backUrl: string;
+}
+
+export function OutboundCartPage({ backUrl }: OutboundCartPageProps) {
+	const router = useRouter();
+
+	/* Cart sync hook — 출고 카테고리 공통 */
+	const cart = useCartSync("outbound");
+
+	/* Derived: parsed items from cart */
+	const items = useMemo(
+		() => cart.cartItems.map(toCartItemParsed),
+		[cart.cartItems],
+	);
+
+	/* Selection */
+	const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+
+	/* Auto-select all when items change */
+	useEffect(() => {
+		if (items.length > 0) {
+			setSelectedItems(new Set(items.map((i) => i.id)));
+		}
+	}, [items]);
+
+	/* Warehouse */
+	const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+	const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
+	const [warehousePickerOpen, setWarehousePickerOpen] = useState(false);
+
+	/* Outbound number */
+	const [outboundNumber, setOutboundNumber] = useState<string>("");
+
+	/* Confirm result modal */
+	const [confirmResult, setConfirmResult] = useState<{
+		outboundNumber: string;
+		items: CartItemParsed[];
+		warehouse: string;
+		date: string;
+	} | null>(null);
+
+	/* Outbound date */
+	const [outboundDate, setOutboundDate] = useState<string>(
+		new Date().toISOString().slice(0, 10),
+	);
+
+	/* Confirm state */
+	const [confirming, setConfirming] = useState(false);
+	const [resultMsg, setResultMsg] = useState<string | null>(null);
+
+	/* Simple keypad modal (for qty edit) */
+	const [numpadOpen, setNumpadOpen] = useState(false);
+	const [numpadTarget, setNumpadTarget] = useState<CartItemParsed | null>(null);
+
+	/* Packaging modal (for package unit registration) */
+	const [packagingOpen, setPackagingOpen] = useState(false);
+	const [packagingTarget, setPackagingTarget] = useState<CartItemParsed | null>(null);
+
+	/* 거래처 필터 */
+	const [selectedCustomerFilter, setSelectedCustomerFilter] = useState<string>("");
+
+	/* 거래처 목록 추출 (중복 제거) */
+	const customerList = useMemo(() => {
+		const map = new Map<string, string>();
+		items.forEach((item) => {
+			if (item.customer_code && !map.has(item.customer_code)) {
+				map.set(item.customer_code, item.customer_name);
+			}
+		});
+		return Array.from(map.entries()).map(([code, name]) => ({ code, name }));
+	}, [items]);
+
+	/* 거래처 1개면 자동 선택 */
+	useEffect(() => {
+		if (customerList.length === 1) {
+			setSelectedCustomerFilter(customerList[0].code);
+		}
+	}, [customerList]);
+
+	/* 렌더링용 filteredItems (선택/확정 로직은 전체 items 기반 유지) */
+	const filteredItems = useMemo(() => {
+		if (!selectedCustomerFilter) return items;
+		return items.filter((item) => item.customer_code === selectedCustomerFilter);
+	}, [items, selectedCustomerFilter]);
+
+	/* ------------------------------------------------------------------ */
+	/* Fetch warehouses                                                    */
+	/* ------------------------------------------------------------------ */
+	const fetchedRef = useRef(false);
+
+	const fetchWarehouses = useCallback(async () => {
+		try {
+			const res = await apiClient.get("/outbound/warehouses");
+			const data: Warehouse[] = res.data?.data ?? [];
+			setWarehouses(data);
+			if (data.length > 0) {
+				setSelectedWarehouse(data[0].warehouse_code);
+			}
+		} catch {
+			/* keep empty */
+		}
+	}, []);
+
+	useEffect(() => {
+		if (fetchedRef.current) return;
+		fetchedRef.current = true;
+		fetchWarehouses();
+	}, [fetchWarehouses]);
+
+	/* ------------------------------------------------------------------ */
+	/* Selection                                                           */
+	/* ------------------------------------------------------------------ */
+	const toggleSelect = (id: string) => {
+		setSelectedItems((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	const toggleSelectAll = () => {
+		if (selectedItems.size === items.length) {
+			setSelectedItems(new Set());
+		} else {
+			setSelectedItems(new Set(items.map((i) => i.id)));
+		}
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Qty edit via numpad                                                  */
+	/* ------------------------------------------------------------------ */
+	const openNumpad = (item: CartItemParsed) => {
+		setNumpadTarget(item);
+		setNumpadOpen(true);
+	};
+
+	const handleNumpadConfirm = (qty: number) => {
+		if (!numpadTarget) return;
+		const finalQty = Math.min(qty, numpadTarget.remain_qty);
+
+		cart.updateItemQuantity(numpadTarget.rowKey, finalQty);
+		setNumpadTarget(null);
+	};
+
+	/* Packaging handlers */
+	const openPackaging = (item: CartItemParsed) => {
+		setPackagingTarget(item);
+		setPackagingOpen(true);
+	};
+
+	const handlePackagingConfirm = (_qty: number, packages: PackageEntry[]) => {
+		if (!packagingTarget) return;
+		const finalQty = packagingTarget.outbound_qty;
+
+		cart.updateItemQuantity(
+			packagingTarget.rowKey,
+			finalQty,
+			undefined,
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			packages.length > 0 ? (packages as any) : undefined,
+		);
+		setPackagingTarget(null);
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Remove item                                                         */
+	/* ------------------------------------------------------------------ */
+	const handleRemove = (rowKey: string) => {
+		cart.removeItem(rowKey);
+		setSelectedItems((prev) => {
+			const next = new Set(prev);
+			next.delete(rowKey);
+			return next;
+		});
+		// Auto-save effect below will persist change to DB
+	};
+
+	/* Auto-save: persist dirty changes to DB after a short debounce */
+	const autoSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	useEffect(() => {
+		if (!cart.isDirty || cart.syncStatus === "saving") return;
+		if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+		autoSaveTimerRef.current = setTimeout(() => {
+			cart.saveToDb().catch(() => {});
+		}, 500);
+		return () => {
+			if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
+		};
+	}, [cart.isDirty, cart.syncStatus, cart]);
+
+	/* ------------------------------------------------------------------ */
+	/* Derived                                                             */
+	/* ------------------------------------------------------------------ */
+	const selectedItemsList = items.filter((i) => selectedItems.has(i.id));
+
+	/* Loading unit modal — 선택된 품목 일괄 적재함 적용 */
+	const [loadingModalOpen, setLoadingModalOpen] = useState(false);
+
+	const openLoadingModal = () => {
+		setLoadingModalOpen(true);
+	};
+
+	const selectedPkgCodes = useMemo(() => {
+		return selectedItemsList
+			.filter((item) => item.packages && item.packages.length > 0)
+			.map((item) => item.packages![0].unit.value);
+	}, [selectedItemsList]);
+
+	const handleLoadingSelect = (lu: LoadingUnitSelection) => {
+		for (const item of selectedItemsList) {
+			cart.updateItemRow(item.rowKey, {
+				loading_code: lu.loading_code,
+				loading_name: lu.loading_name,
+			});
+		}
+	};
+
+	const handleLoadingClear = () => {
+		for (const item of selectedItemsList) {
+			cart.updateItemRow(item.rowKey, {
+				loading_code: null,
+				loading_name: null,
+			});
+		}
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Confirm outbound                                                    */
+	/* ------------------------------------------------------------------ */
+	const handleConfirm = async () => {
+		if (selectedItemsList.length === 0) return;
+
+		if (!selectedWarehouse) {
+			setResultMsg("오류: 출고 창고를 선택해주세요.");
+			return;
+		}
+
+		setConfirming(true);
+		setResultMsg(null);
+
+		try {
+			// 확정 시점에 채번 (동시접속 충돌 방지)
+			// numbering_rules 테이블에서 채번규칙 직접 조회
+			let finalNumber = "";
+			try {
+				const ruleRes: any = await apiClient
+					.get("/numbering-rules/by-column/outbound_mng/outbound_number")
+					.catch(() => null);
+				const ruleId = ruleRes?.data?.data?.ruleId;
+				const url =
+					ruleId
+						? `/outbound/generate-number?ruleId=${encodeURIComponent(ruleId)}`
+						: "/outbound/generate-number";
+				const numRes = await apiClient.get(url);
+				if (numRes.data?.success && numRes.data?.data) {
+					finalNumber = numRes.data.data;
+					setOutboundNumber(finalNumber);
+				}
+			} catch {
+				/* backend will handle */
+			}
+
+			// 헤더 outbound_type: 단일이면 그대로, 혼합이면 "혼합출고"
+			const uniqueTypes = [...new Set(selectedItemsList.map((i) => i.outbound_type).filter(Boolean))];
+			const headerOutboundType = uniqueTypes.length === 1 ? uniqueTypes[0] : (uniqueTypes.length > 1 ? "혼합출고" : "출고");
+
+			const payload = {
+				outbound_number: finalNumber,
+				outbound_date: outboundDate,
+				warehouse_code: selectedWarehouse,
+				outbound_type: headerOutboundType,
+				items: selectedItemsList.map((item, idx) => ({
+					outbound_type: item.outbound_type || headerOutboundType,
+					item_number: item.item_code,
+					item_name: item.item_name,
+					spec: item.spec || "",
+					material: item.material || "",
+					unit: "EA",
+					outbound_qty: String(item.outbound_qty),
+					unit_price: String(item.unit_price || 0),
+					total_amount: String(
+						(item.outbound_qty || 0) * (item.unit_price || 0),
+					),
+					reference_number: item.reference_no,
+					customer_code: item.customer_code,
+					customer_name: item.customer_name,
+					outbound_status: "출고완료",
+					source_table: item.source_table,
+					source_id: item.source_id || item.id,
+					seq_no: idx + 1,
+				})),
+			};
+
+			const res = await apiClient.post("/outbound", payload);
+
+			if (res.data?.success) {
+				// Remove confirmed items from cart - direct DB delete for reliability
+				const confirmedItems = [...selectedItemsList];
+				const { dataApi } = await import("@/lib/api/data");
+				const confirmPromises = confirmedItems
+					.filter((item) => item.dbId)
+					.map((item) =>
+						dataApi
+							.updateRecord("cart_items", item.dbId, { status: "confirmed" })
+							.catch(() => {}),
+					);
+				await Promise.all(confirmPromises);
+
+				// Also clean up local state via useCartSync
+				for (const item of confirmedItems) {
+					cart.removeItem(item.rowKey);
+				}
+				// Reload from DB to sync state
+				await cart.loadFromDb();
+
+				const outboundNo =
+					res.data?.data?.header?.outbound_number || finalNumber || "";
+
+				// 결과 모달 표시 (바로 이동하지 않음)
+				setConfirmResult({
+					outboundNumber: outboundNo,
+					items: confirmedItems,
+					warehouse:
+						warehouses.find((w) => w.warehouse_code === selectedWarehouse)
+							?.warehouse_name || selectedWarehouse,
+					date: outboundDate,
+				});
+				setResultMsg(null);
+			} else {
+				setResultMsg(
+					`오류: ${res.data?.message || "출고 등록에 실패했습니다."}`,
+				);
+			}
+		} catch (err: unknown) {
+			const msg =
+				err instanceof Error ? err.message : "출고 등록에 실패했습니다.";
+			setResultMsg(`오류: ${msg}`);
+		} finally {
+			setConfirming(false);
+		}
+	};
+
+	/* ------------------------------------------------------------------ */
+	/* Helpers                                                             */
+	/* ------------------------------------------------------------------ */
+	const selectedWarehouseName =
+		warehouses.find((w) => w.warehouse_code === selectedWarehouse)
+			?.warehouse_name || selectedWarehouse;
+
+	const totalQty = selectedItemsList.reduce((s, i) => s + i.outbound_qty, 0);
+
+	/* ------------------------------------------------------------------ */
+	/* Render                                                              */
+	/* ------------------------------------------------------------------ */
+	return (
+		<div className="flex flex-col gap-4 pb-4">
+			<style>{`@keyframes cartMarquee { 0%,20% { transform: translateX(0); } 80%,100% { transform: translateX(calc(-100% + 100cqi)); } }`}</style>
+			{/* ===== Header ===== */}
+			<div className="flex items-center justify-between">
+				<div className="flex items-center gap-3">
+					<button
+						onClick={() => router.back()}
+						className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+					>
+						<svg
+							className="w-5 h-5"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M15.75 19.5L8.25 12l7.5-7.5"
+							/>
+						</svg>
+					</button>
+					<div>
+						<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">
+							출고 장바구니
+						</h1>
+					</div>
+				</div>
+
+				{/* Confirm button (header only) */}
+				<button
+					onClick={handleConfirm}
+					disabled={
+						confirming ||
+						selectedItemsList.length === 0
+					}
+					className="flex items-center gap-1.5 px-4 h-10 rounded-xl text-sm font-bold text-white active:scale-[0.98] transition-all disabled:opacity-40"
+					style={{
+						background:
+							selectedItemsList.length > 0
+								? "linear-gradient(to bottom, #34d399, #059669)"
+								: "#d1d5db",
+						boxShadow:
+							selectedItemsList.length > 0
+								? "0 4px 12px rgba(5,150,105,0.3)"
+								: "none",
+					}}
+				>
+					<svg
+						className="w-4 h-4"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth={2.5}
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M4.5 12.75l6 6 9-13.5"
+						/>
+					</svg>
+					{confirming ? "처리중..." : "확정"}
+				</button>
+			</div>
+
+			{/* ===== Info banner ===== */}
+			<div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3 sm:p-4">
+				<div className="flex items-center gap-2 mb-3 pb-2 border-b border-gray-50">
+					<span className="text-[11px] text-gray-400">{outboundDate}</span>
+					{selectedWarehouseName && (
+						<span className="text-[11px] text-gray-400">
+							| {selectedWarehouseName}
+						</span>
+					)}
+					<span className="ml-auto text-[11px] font-mono text-gray-400">
+						{outboundNumber || "확정 시 자동생성"}
+					</span>
+				</div>
+
+				{/* Info fields: 4 columns (거래처 + 출고일자 + 창고 + 출고번호) */}
+				<div className="grid grid-cols-1 sm:grid-cols-4 gap-3">
+					{/* 거래처 드롭다운 */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							거래처
+						</label>
+						<select
+							value={selectedCustomerFilter}
+							onChange={(e) => setSelectedCustomerFilter(e.target.value)}
+							disabled={customerList.length === 0}
+							className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 bg-white"
+						>
+							{customerList.length === 0 ? (
+								<option value="">거래처 없음</option>
+							) : (
+								customerList.map((c) => (
+									<option key={c.code} value={c.code}>
+										{c.name}
+									</option>
+								))
+							)}
+						</select>
+					</div>
+					{/* Outbound date */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							출고일자
+						</label>
+						<input
+							type="date"
+							value={outboundDate}
+							onChange={(e) => setOutboundDate(e.target.value)}
+							className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none focus:border-blue-400 focus:ring-1 focus:ring-blue-100 bg-white"
+						/>
+					</div>
+
+					{/* Warehouse selector - card-style touch button */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							창고
+						</label>
+						<button
+							onClick={() => setWarehousePickerOpen(true)}
+							className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm text-left outline-none hover:border-blue-300 transition-all bg-white flex items-center justify-between"
+						>
+							<span
+								className={
+									selectedWarehouse
+										? "text-gray-900 font-medium"
+										: "text-gray-400"
+								}
+							>
+								{selectedWarehouseName || "창고 선택"}
+							</span>
+							<svg
+								className="w-4 h-4 text-gray-400 shrink-0"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth={2}
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M8.25 15l3.75-3.75L15.75 15"
+								/>
+							</svg>
+						</button>
+					</div>
+
+					{/* Outbound number (readonly -- 확정 시점에 채번) */}
+					<div>
+						<label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+							출고번호
+						</label>
+						<div className="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm bg-gray-50 font-mono">
+							{outboundNumber ? (
+								<span className="text-gray-700">{outboundNumber}</span>
+							) : (
+								<span className="text-gray-400">확정 시 자동생성</span>
+							)}
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* ===== Select all bar (적재함 버튼 추가) ===== */}
+			{items.length > 0 && (
+				<div className="flex items-center gap-3 px-1">
+					<button
+						onClick={toggleSelectAll}
+						className={`w-6 h-6 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
+							selectedItems.size === items.length
+								? "bg-blue-500 border-blue-500"
+								: "border-gray-300 hover:border-blue-400"
+						}`}
+					>
+						{selectedItems.size === items.length && (
+							<svg
+								className="w-3.5 h-3.5 text-white"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth={3}
+								viewBox="0 0 24 24"
+							>
+								<path
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									d="M4.5 12.75l6 6 9-13.5"
+								/>
+							</svg>
+						)}
+					</button>
+					<span className="text-sm font-semibold text-gray-700">
+						담은 품목 <span className="text-blue-600">{items.length}</span>
+					</span>
+					<button
+						onClick={toggleSelectAll}
+						className="px-2.5 py-1 rounded-md text-xs font-medium bg-blue-50 text-blue-600 border border-blue-200 hover:bg-blue-100 active:scale-95 transition-all"
+					>
+						{selectedItems.size === items.length ? "선택 해제" : "전체 선택"}
+					</button>
+					<div className="flex-1" />
+					<button
+						onClick={openLoadingModal}
+						disabled={selectedItemsList.length === 0}
+						className="flex items-center gap-1.5 px-4 h-10 rounded-xl text-sm font-bold bg-purple-50 text-purple-600 border border-purple-200 hover:bg-purple-100 active:scale-[0.98] transition-all disabled:opacity-40"
+					>
+						{"\uD83D\uDEA2"} 적재함
+					</button>
+				</div>
+			)}
+
+			{/* ===== Items list ===== */}
+			{cart.loading ? (
+				<div className="flex items-center justify-center py-16 text-sm text-gray-400">
+					<svg
+						className="animate-spin w-5 h-5 mr-2 text-blue-500"
+						fill="none"
+						viewBox="0 0 24 24"
+					>
+						<circle
+							className="opacity-25"
+							cx="12"
+							cy="12"
+							r="10"
+							stroke="currentColor"
+							strokeWidth="4"
+						/>
+						<path
+							className="opacity-75"
+							fill="currentColor"
+							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+						/>
+					</svg>
+					불러오는 중...
+				</div>
+			) : items.length === 0 ? (
+				<div className="flex flex-col items-center justify-center py-16 text-gray-400">
+					<svg
+						className="w-16 h-16 mb-4 opacity-20"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth={1}
+						viewBox="0 0 24 24"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22"
+						/>
+					</svg>
+					<p className="text-sm font-medium text-gray-500 mb-1">
+						담은 품목이 없습니다
+					</p>
+					<p className="text-xs text-gray-400 mb-4">
+						출고 화면에서 품목을 담아주세요
+					</p>
+					<button
+						onClick={() => router.push(backUrl)}
+						className={`px-4 py-2.5 rounded-xl text-sm font-semibold text-white active:scale-95 transition-all ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} shadow-[0_4px_12px_rgba(59,130,246,0.3)]`}
+					>
+						출고 화면으로 이동
+					</button>
+				</div>
+			) : (
+				<div className="flex flex-col gap-4">
+					{(() => {
+						/* 방식 A: 적재함 > 출고유형 그룹핑 */
+						const loadingGroups = new Map<string, { loading_name: string; items: typeof filteredItems }>();
+						const ungrouped: typeof filteredItems = [];
+
+						filteredItems.forEach((item) => {
+							if (item.loading_code) {
+								const existing = loadingGroups.get(item.loading_code);
+								if (existing) {
+									existing.items.push(item);
+								} else {
+									loadingGroups.set(item.loading_code, {
+										loading_name: item.loading_name || item.loading_code,
+										items: [item],
+									});
+								}
+							} else {
+								ungrouped.push(item);
+							}
+						});
+
+						const renderTypeGroupedCards = (groupItems: typeof filteredItems) => {
+							const typeGroups = groupItems.reduce<Record<string, typeof filteredItems>>((acc, it) => {
+								const type = it.outbound_type || "출고";
+								if (!acc[type]) acc[type] = [];
+								acc[type].push(it);
+								return acc;
+							}, {});
+							return Object.entries(typeGroups).map(([type, typeItems]) => (
+								<div key={type}>
+									<div className="flex items-center gap-2 mb-2">
+										<span className="text-xs font-bold text-gray-500">{type}</span>
+										<div className="flex-1 h-px bg-gray-200" />
+									</div>
+									<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+									{typeItems.map((item) => {
+						return (
+							<div
+								key={item.id}
+								className={`relative rounded-xl p-3 transition-all ${
+									selectedItems.has(item.id)
+										? "ring-2 ring-blue-500 border border-blue-500 bg-gradient-to-br from-blue-50/80 to-indigo-50/50"
+										: "border border-gray-200 bg-white"
+								}`}
+							>
+
+								{/* === Header row: checkbox + item code + item name + packaging button === */}
+								<div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+									{/* Checkbox */}
+									<button
+										onClick={() => toggleSelect(item.id)}
+										className={`w-6 h-6 rounded border-2 flex items-center justify-center transition-all shrink-0 ${
+											selectedItems.has(item.id)
+												? "bg-blue-500 border-blue-500"
+												: "border-gray-300 hover:border-blue-400"
+										}`}
+									>
+										{selectedItems.has(item.id) && (
+											<svg
+												className="w-3.5 h-3.5 text-white"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth={3}
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M4.5 12.75l6 6 9-13.5"
+												/>
+											</svg>
+										)}
+									</button>
+									<span className="text-[11px] text-gray-400 font-medium shrink-0">
+										{item.item_code}
+									</span>
+									<span className="text-[13px] font-semibold text-gray-900 flex-1 overflow-hidden whitespace-nowrap min-w-0" style={{ containerType: "inline-size" }}>
+										<span
+											className="inline-block"
+											style={item.item_name.length > 15 ? { animation: "cartMarquee 3s ease-in-out infinite alternate" } : undefined}
+										>{item.item_name}</span>
+									</span>
+								</div>
+
+								{/* === Body row: image + info + action === */}
+								<div className="flex gap-2.5">
+									{/* Product image */}
+									<div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+										{item.image ? (
+											<img
+												src={item.image}
+												alt={item.item_name}
+												className="w-full h-full object-cover rounded-lg"
+											/>
+										) : (
+											<span className="text-2xl text-gray-300">
+												{"\uD83D\uDCE6"}
+											</span>
+										)}
+									</div>
+
+									{/* Info columns */}
+									<div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												주문일
+											</span>
+											<span className="font-medium text-gray-700">
+												{item.order_date || "-"}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												참조번호
+											</span>
+											<span className="font-medium text-gray-700 truncate">
+												{item.reference_no || "-"}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												주문수량
+											</span>
+											<span className="font-medium text-gray-700">
+												{item.order_qty.toLocaleString()}
+											</span>
+										</div>
+										<div className="flex items-center gap-1.5 text-[11px]">
+											<span className="text-gray-400 min-w-[45px] shrink-0">
+												미출고
+											</span>
+											<span className="font-bold text-red-500">
+												{item.remain_qty.toLocaleString()}
+											</span>
+										</div>
+									</div>
+
+									{/* Action column: qty display + delete button */}
+									<div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+										{/* Qty display - clickable to open simple keypad */}
+										<button
+											onClick={() => openNumpad(item)}
+											className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all bg-blue-50 border-blue-200 hover:bg-blue-100 cursor-pointer active:scale-95"
+										>
+											<span
+												className="text-sm font-bold text-blue-700"
+												style={{ fontVariantNumeric: "tabular-nums" }}
+											>
+												{item.outbound_qty.toLocaleString()}
+											</span>
+											<span className="text-[10px] text-gray-400">EA</span>
+										</button>
+
+										{/* Delete button */}
+										<button
+											onClick={() => handleRemove(item.rowKey)}
+											className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+										>
+											<svg
+												className="w-3.5 h-3.5"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth={2}
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+												/>
+											</svg>
+											삭제
+										</button>
+									</div>
+								</div>
+
+								{/* Packaging button - full width (포장 미완료 시만 표시) */}
+								{!(item.packages && item.packages.length > 0) && (
+									<div className="mt-1.5">
+										<button
+											onClick={() => openPackaging(item)}
+											className="w-full flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-xs font-semibold active:scale-95 transition-all bg-amber-50 border border-amber-200 text-amber-700 hover:bg-amber-100"
+										>
+											<span>{"\uD83D\uDCE6"}</span>
+											포장단위
+										</button>
+									</div>
+								)}
+
+								{/* === Package info (포장 등록 시 — 클릭하면 모달 열림) === */}
+								{item.packages && item.packages.length > 0 && (() => {
+									const packagedQty = item.packages.reduce(
+										(s, p) => s + p.count * p.qtyPerUnit,
+										0,
+									);
+									const unpacked = Math.max(0, item.outbound_qty - packagedQty);
+									const isComplete = unpacked === 0;
+									return (
+									<div
+										onClick={() => openPackaging(item)}
+										className={`mt-2.5 px-3 py-2 border rounded-lg cursor-pointer active:scale-95 transition-all ${
+											isComplete
+												? "bg-gradient-to-r from-green-50 to-emerald-50 border-green-200"
+												: "bg-gradient-to-r from-amber-50 to-orange-50 border-amber-200"
+										}`}
+									>
+										<div className="flex items-center justify-between mb-1">
+											<span
+												className={`text-[10px] font-bold text-white px-2 py-0.5 rounded-full ${
+													isComplete
+														? "bg-gradient-to-r from-green-500 to-green-600"
+														: "bg-gradient-to-r from-amber-500 to-orange-500"
+												}`}
+											>
+												{isComplete ? "포장완료" : "부분포장"}
+											</span>
+											<span
+												className={`text-[11px] font-semibold ${
+													isComplete ? "text-green-600" : "text-amber-600"
+												}`}
+											>
+												{packagedQty.toLocaleString()}{" "}
+												EA
+											</span>
+										</div>
+										<div className="grid grid-cols-2 gap-x-2 gap-y-0.5">
+											{item.packages.map((pkg, idx) => (
+												<div
+													key={idx}
+													className="flex items-center gap-1.5 text-[11px] text-gray-600"
+												>
+													<span>{pkg.unit.icon}</span>
+													<span>
+														{pkg.count}
+														{pkg.unit.label} x {pkg.qtyPerUnit.toLocaleString()}EA
+														= {(pkg.count * pkg.qtyPerUnit).toLocaleString()}EA
+													</span>
+												</div>
+											))}
+										</div>
+										{!isComplete && (
+											<div className="mt-1 pt-1 border-t border-amber-200 flex items-center justify-between text-[11px]">
+												<span className="text-amber-700 font-medium">미포장</span>
+												<span className="font-bold text-amber-700">
+													{unpacked.toLocaleString()} EA
+												</span>
+											</div>
+										)}
+									</div>
+									);
+								})()}
+							</div>
+						);
+					})}
+							</div>
+						</div>
+					));
+				};
+
+						return (
+							<>
+								{Array.from(loadingGroups.entries()).map(([code, group]) => (
+									<div key={code} className="rounded-2xl border-2 border-purple-200 bg-gradient-to-br from-purple-50/60 to-violet-50/40 p-3">
+										<div className="flex items-center gap-2 mb-3">
+											<span className="text-lg">{"\uD83D\uDEA2"}</span>
+											<span className="text-sm font-bold text-purple-700">{group.loading_name}</span>
+											<span className="text-[10px] text-purple-400 font-mono">{code}</span>
+											<span className="text-[10px] text-purple-500 bg-purple-100 px-1.5 py-0.5 rounded-full">{group.items.length}건</span>
+										</div>
+										{renderTypeGroupedCards(group.items)}
+									</div>
+								))}
+								{ungrouped.length > 0 && renderTypeGroupedCards(ungrouped)}
+							</>
+						);
+					})()}
+				</div>
+			)}
+
+			{/* ===== Result toast (only when message exists) ===== */}
+			{resultMsg && (
+				<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-40">
+					<div
+						className={`px-4 py-3 rounded-xl text-sm font-medium shadow-lg ${
+							resultMsg.startsWith("오류")
+								? "bg-red-50 text-red-700 border border-red-200"
+								: "bg-green-50 text-green-700 border border-green-200"
+						}`}
+					>
+						{resultMsg}
+					</div>
+				</div>
+			)}
+
+			{/* ===== Warehouse picker modal ===== */}
+			{warehousePickerOpen && (
+				<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
+					<div
+						className="absolute inset-0 bg-black/50"
+						onClick={() => setWarehousePickerOpen(false)}
+					/>
+					<div className="relative bg-white w-full sm:max-w-md sm:rounded-2xl rounded-t-2xl max-h-[80vh] flex flex-col shadow-2xl z-10 overflow-hidden">
+						{/* Header */}
+						<div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+							<h3 className="text-lg font-bold text-gray-900">창고 선택</h3>
+							<button
+								onClick={() => setWarehousePickerOpen(false)}
+								className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"
+							>
+								<svg
+									className="w-4 h-4"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={2}
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M6 18L18 6M6 6l12 12"
+									/>
+								</svg>
+							</button>
+						</div>
+
+						{/* Warehouse list */}
+						<div className="flex-1 overflow-y-auto p-4">
+							{warehouses.length === 0 ? (
+								<p className="text-center text-sm text-gray-400 py-8">
+									등록된 창고가 없습니다
+								</p>
+							) : (
+								<div className="flex flex-col gap-2">
+									{warehouses.map((wh) => (
+										<button
+											key={wh.warehouse_code}
+											onClick={() => {
+												setSelectedWarehouse(wh.warehouse_code);
+												setWarehousePickerOpen(false);
+											}}
+											className={`flex items-center gap-3 p-4 rounded-xl border transition-all active:scale-[0.98] text-left ${
+												selectedWarehouse === wh.warehouse_code
+													? "border-blue-400 bg-blue-50 shadow-sm"
+													: "border-gray-200 bg-white hover:border-blue-300"
+											}`}
+										>
+											<div
+												className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${
+													selectedWarehouse === wh.warehouse_code
+														? "bg-blue-500 text-white"
+														: "bg-gray-100 text-gray-400"
+												}`}
+											>
+												<svg
+													className="w-5 h-5"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 0h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z"
+													/>
+												</svg>
+											</div>
+											<div className="flex-1 min-w-0">
+												<p className="text-sm font-semibold text-gray-900">
+													{wh.warehouse_name}
+												</p>
+												<p className="text-[11px] text-gray-400">
+													{wh.warehouse_code}
+													{wh.warehouse_type ? ` | ${wh.warehouse_type}` : ""}
+												</p>
+											</div>
+											{selectedWarehouse === wh.warehouse_code && (
+												<svg
+													className="w-5 h-5 text-blue-500 shrink-0"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2.5}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M4.5 12.75l6 6 9-13.5"
+													/>
+												</svg>
+											)}
+										</button>
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
+			)}
+
+			{/* ===== SimpleKeypad Modal (qty edit) ===== */}
+			{numpadTarget && (
+				<SimpleKeypadModal
+					open={numpadOpen}
+					onClose={() => {
+						setNumpadOpen(false);
+						setNumpadTarget(null);
+					}}
+					onConfirm={handleNumpadConfirm}
+					maxQty={numpadTarget.remain_qty}
+					itemName={numpadTarget.item_name}
+					initialQty={numpadTarget.outbound_qty}
+				/>
+			)}
+
+			{/* ===== NumberPad Modal (packaging) ===== */}
+			{packagingTarget && (
+				<NumberPadModal
+					open={packagingOpen}
+					onClose={() => {
+						setPackagingOpen(false);
+						setPackagingTarget(null);
+					}}
+					onConfirm={handlePackagingConfirm}
+					maxQty={packagingTarget.outbound_qty}
+					itemName={packagingTarget.item_name}
+					itemNumber={packagingTarget.item_code}
+					initialPackages={packagingTarget.packages}
+				/>
+			)}
+
+			{/* ===== Loading Unit Modal (적재함 일괄 선택) ===== */}
+			<LoadingUnitModal
+				open={loadingModalOpen}
+				onClose={() => setLoadingModalOpen(false)}
+				onSelect={handleLoadingSelect}
+				onClear={handleLoadingClear}
+				pkgCodes={selectedPkgCodes}
+				currentLoading={null}
+			/>
+
+			{/* ===== 출고 완료 결과 모달 ===== */}
+			{confirmResult && (
+				<div className="fixed inset-0 z-[70] flex items-center justify-center">
+					<div className="absolute inset-0 bg-black/50" />
+					<div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden z-10">
+						{/* 헤더 */}
+						<div
+							className={`px-6 py-5 text-center ${COLOR_MAP.blue.buttonBg}`}
+						>
+							<div className="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3">
+								<svg
+									className="w-8 h-8 text-white"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth={2}
+									viewBox="0 0 24 24"
+								>
+									<path
+										strokeLinecap="round"
+										strokeLinejoin="round"
+										d="M4.5 12.75l6 6 9-13.5"
+									/>
+								</svg>
+							</div>
+							<h3 className="text-xl font-bold text-white">출고 처리 완료</h3>
+							<p className="text-white/80 text-lg font-mono mt-1">
+								{confirmResult.outboundNumber}
+							</p>
+						</div>
+
+						{/* 처리 내역 */}
+						<div className="px-6 py-4">
+							<div className="flex items-center justify-between text-sm text-gray-500 mb-3">
+								<span>
+									창고:{" "}
+									<span className="font-semibold text-gray-900">
+										{confirmResult.warehouse}
+									</span>
+								</span>
+								<span>{confirmResult.date}</span>
+							</div>
+
+							<div className="text-xs font-semibold text-gray-400 mb-2">
+								처리된 품목 ({confirmResult.items.length}건)
+							</div>
+							<div className="max-h-[200px] overflow-y-auto flex flex-col gap-2">
+								{confirmResult.items.map((item) => (
+									<div
+										key={item.id}
+										className="flex items-center justify-between p-3 bg-green-50 rounded-xl border border-green-100"
+									>
+										<div className="flex-1 min-w-0">
+											<p className="text-sm font-semibold text-gray-900 truncate">
+												{item.item_name}
+											</p>
+											<p className="text-[11px] text-gray-400">
+												{item.item_code}
+											</p>
+										</div>
+										<span className="text-sm font-bold text-green-600 ml-3">
+											{item.outbound_qty?.toLocaleString()} EA
+										</span>
+									</div>
+								))}
+							</div>
+						</div>
+
+						{/* 확인 버튼 */}
+						<div className="px-6 py-4 border-t border-gray-100">
+							<button
+								onClick={() => {
+									setConfirmResult(null);
+									router.push("/COMPANY_7/pop/outbound");
+								}}
+								className={`w-full h-12 rounded-xl text-white font-bold text-base active:scale-[0.98] transition-all ${COLOR_MAP.blue.buttonBg} ${COLOR_MAP.blue.buttonBgHover} shadow-[0_4px_12px_rgba(59,130,246,0.3)]`}
+							>
+								확인
+							</button>
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/OutboundManage.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/OutboundManage.tsx
new file mode 100644
index 00000000..186c518f
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/OutboundManage.tsx
@@ -0,0 +1,874 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier } from "../inbound/SupplierModal";
+import {
+  getOutboundList,
+  updateOutbound,
+  deleteOutbound,
+  getOutboundWarehouses,
+  type OutboundItem,
+  type WarehouseOption,
+} from "@/lib/api/outbound";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundRecord extends OutboundItem {
+  detail_id?: string;
+  seq_no?: number;
+  detail_outbound_type?: string;
+  header_memo?: string;
+  item_number?: string;
+}
+
+const STATUS_OPTIONS = ["출고완료", "부분출고", "대기"];
+const OUTBOUND_TYPE_OPTIONS = [
+  { value: "all", label: "전체" },
+  { value: "판매출고", label: "판매출고" },
+  { value: "생산출고", label: "생산출고" },
+  { value: "외주출고", label: "외주출고" },
+  { value: "사급출고", label: "사급출고" },
+  { value: "반품출고", label: "반품출고" },
+  { value: "기타출고", label: "기타출고" },
+  { value: "재고이동", label: "재고이동" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function OutboundManage() {
+  const router = useRouter();
+  const today = new Date().toISOString().slice(0, 10);
+
+  /* ── Filters ── */
+  const [outboundDate, setOutboundDate] = useState(today);
+  const [outboundType, setOutboundType] = useState("all");
+  const [keyword, setKeyword] = useState("");
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(
+    null,
+  );
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+
+  /* ── Data ── */
+  const [records, setRecords] = useState<OutboundRecord[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [warehouses, setWarehouses] = useState<WarehouseOption[]>([]);
+
+  /* ── Edit modal ── */
+  const [editRecord, setEditRecord] = useState<OutboundRecord | null>(null);
+  const [editForm, setEditForm] = useState<Record<string, any>>({});
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  /* ── Helpers ── */
+  const getRowKey = (r: OutboundRecord) => r.detail_id || r.id;
+
+  /* ---------------------------------------------------------------- */
+  /* Fetch                                                             */
+  /* ---------------------------------------------------------------- */
+
+  const fetchRecords = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params: Record<string, string> = {};
+      if (outboundDate) {
+        params.date_from = outboundDate;
+        params.date_to = outboundDate;
+      }
+      if (outboundType !== "all") params.outbound_type = outboundType;
+      if (keyword.trim()) params.search_keyword = keyword.trim();
+
+      const res = await getOutboundList(params);
+      if (res.success) {
+        let data = res.data as unknown as OutboundRecord[];
+        if (selectedCustomer?.customer_code) {
+          data = data.filter(
+            (r) => r.customer_code === selectedCustomer.customer_code,
+          );
+        }
+        setRecords(data);
+        setSelectedIds(new Set());
+      }
+    } catch (e) {
+      console.error("출고 목록 조회 실패", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [outboundDate, outboundType, keyword, selectedCustomer]);
+
+  useEffect(() => {
+    getOutboundWarehouses()
+      .then((res) => {
+        if (res.success) setWarehouses(res.data);
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    fetchRecords();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  /* ---------------------------------------------------------------- */
+  /* Selection                                                         */
+  /* ---------------------------------------------------------------- */
+
+  const toggleSelect = (key: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const toggleSelectAll = () => {
+    if (selectedIds.size === records.length) setSelectedIds(new Set());
+    else setSelectedIds(new Set(records.map(getRowKey)));
+  };
+
+  /* ---------------------------------------------------------------- */
+  /* Delete                                                            */
+  /* ---------------------------------------------------------------- */
+
+  const handleDelete = async () => {
+    if (selectedIds.size === 0) return;
+
+    const headerIds = new Set<string>();
+    records.forEach((r) => {
+      if (selectedIds.has(getRowKey(r))) headerIds.add(r.id);
+    });
+
+    if (
+      !confirm(
+        `선택한 ${headerIds.size}건의 출고를 삭제하시겠습니까?\n(재고가 롤백됩니다)`,
+      )
+    )
+      return;
+
+    setDeleting(true);
+    try {
+      for (const hid of headerIds) {
+        await deleteOutbound(hid);
+      }
+      await fetchRecords();
+    } catch (e: any) {
+      alert(`삭제 실패: ${e?.message || "알 수 없는 오류"}`);
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  /* ---------------------------------------------------------------- */
+  /* Edit                                                              */
+  /* ---------------------------------------------------------------- */
+
+  const openEdit = (record: OutboundRecord) => {
+    setEditRecord(record);
+    setEditForm({
+      outbound_date: record.outbound_date?.slice(0, 10) || today,
+      outbound_qty: record.outbound_qty ?? 0,
+      unit_price: record.unit_price ?? 0,
+      total_amount: record.total_amount ?? 0,
+      lot_number: record.lot_number || "",
+      warehouse_code: record.warehouse_code || "",
+      location_code: record.location_code || "",
+      outbound_status: record.outbound_status || "출고완료",
+      manager_id: record.manager_id || "",
+      memo: record.memo || "",
+    });
+  };
+
+  const handleEditFromSelection = () => {
+    if (selectedIds.size !== 1) {
+      alert("수정할 항목을 1건만 선택해주세요.");
+      return;
+    }
+    const key = Array.from(selectedIds)[0];
+    const rec = records.find((r) => getRowKey(r) === key);
+    if (rec) openEdit(rec);
+  };
+
+  const updateField = (key: string, value: any) => {
+    setEditForm((prev) => {
+      const next = { ...prev, [key]: value };
+      if (key === "outbound_qty" || key === "unit_price") {
+        next.total_amount =
+          Math.round(
+            (Number(next.outbound_qty) || 0) *
+              (Number(next.unit_price) || 0) *
+              100,
+          ) / 100;
+      }
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    if (!editRecord) return;
+    setSaving(true);
+    try {
+      const payload: Record<string, any> = { ...editForm };
+      if (editRecord.detail_id) payload.detail_id = editRecord.detail_id;
+
+      await updateOutbound(editRecord.id, payload as Partial<OutboundItem>);
+      setEditRecord(null);
+      await fetchRecords();
+    } catch (e: any) {
+      alert(`수정 실패: ${e?.message || "알 수 없는 오류"}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  /* ---------------------------------------------------------------- */
+  /* Render                                                            */
+  /* ---------------------------------------------------------------- */
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => router.push("/COMPANY_7/pop/outbound")}
+          className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+        >
+          <svg
+            className="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15.75 19.5L8.25 12l7.5-7.5"
+            />
+          </svg>
+        </button>
+        <div>
+          <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">
+            출고관리
+          </h1>
+          <p className="text-xs text-gray-400 mt-0.5">
+            출고 내역을 조회, 수정, 삭제합니다
+          </p>
+        </div>
+      </div>
+
+      {/* ===== Search / Filter ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
+          {/* 출고일 */}
+          <div>
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              출고일
+            </label>
+            <input
+              type="date"
+              value={outboundDate}
+              onChange={(e) => setOutboundDate(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+            />
+          </div>
+          {/* 출고유형 */}
+          <div>
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              출고유형
+            </label>
+            <select
+              value={outboundType}
+              onChange={(e) => setOutboundType(e.target.value)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 bg-white"
+            >
+              {OUTBOUND_TYPE_OPTIONS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          {/* 거래처 */}
+          <div>
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              거래처
+            </label>
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm text-left outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 bg-white flex items-center justify-between"
+            >
+              <span
+                className={
+                  selectedCustomer
+                    ? "text-gray-900 truncate"
+                    : "text-gray-400"
+                }
+              >
+                {selectedCustomer ? selectedCustomer.customer_name : "전체"}
+              </span>
+              {selectedCustomer ? (
+                <span
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setSelectedCustomer(null);
+                  }}
+                  className="text-gray-400 hover:text-gray-600 ml-1 shrink-0"
+                >
+                  <svg
+                    className="w-4 h-4"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </span>
+              ) : (
+                <svg
+                  className="w-4 h-4 text-gray-400 shrink-0"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+                  />
+                </svg>
+              )}
+            </button>
+          </div>
+          {/* 검색어 + 검색버튼 */}
+          <div className="col-span-2">
+            <label className="text-xs font-semibold text-gray-500 mb-1 block">
+              검색
+            </label>
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={keyword}
+                onChange={(e) => setKeyword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") fetchRecords();
+                }}
+                placeholder="출고번호, 품목명, 거래처명..."
+                className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+              />
+              <button
+                onClick={fetchRecords}
+                disabled={loading}
+                className="min-w-[48px] min-h-[40px] rounded-lg flex items-center justify-center text-white active:scale-95 transition-all disabled:opacity-50"
+                style={{
+                  background: "linear-gradient(to bottom, #34d399, #059669)",
+                }}
+              >
+                {loading ? (
+                  <svg
+                    className="w-5 h-5 animate-spin"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                  >
+                    <circle
+                      className="opacity-25"
+                      cx="12"
+                      cy="12"
+                      r="10"
+                      stroke="currentColor"
+                      strokeWidth="4"
+                    />
+                    <path
+                      className="opacity-75"
+                      fill="currentColor"
+                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                    />
+                  </svg>
+                ) : (
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth={2}
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
+                    />
+                  </svg>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Action buttons ===== */}
+      <div className="flex items-center justify-between">
+        <span className="text-sm text-gray-500">
+          {selectedIds.size > 0
+            ? `${selectedIds.size}건 선택`
+            : `총 ${records.length}건`}
+        </span>
+        <div className="flex items-center gap-2">
+          <button
+            disabled={selectedIds.size !== 1}
+            onClick={handleEditFromSelection}
+            className="px-4 py-2 rounded-lg text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{
+              background: "linear-gradient(to bottom, #34d399, #059669)",
+            }}
+          >
+            수정
+          </button>
+          <button
+            disabled={selectedIds.size === 0 || deleting}
+            onClick={handleDelete}
+            className="px-4 py-2 rounded-lg text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            style={{
+              background: "linear-gradient(to bottom, #f87171, #dc2626)",
+            }}
+          >
+            {deleting ? "삭제 중..." : "삭제"}
+          </button>
+        </div>
+      </div>
+
+      {/* ===== Record list ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              checked={
+                records.length > 0 && selectedIds.size === records.length
+              }
+              onChange={toggleSelectAll}
+              className="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
+            />
+            <span className="text-xs font-semibold text-gray-500">
+              출고 내역
+            </span>
+          </div>
+          <span className="text-[11px] text-gray-400">{records.length}건</span>
+        </div>
+
+        {loading && records.length === 0 ? (
+          <div className="flex items-center justify-center py-16">
+            <svg
+              className="w-8 h-8 animate-spin text-emerald-500"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+              />
+            </svg>
+          </div>
+        ) : records.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg
+              className="w-16 h-16 mb-4 opacity-20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={1}
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"
+              />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">
+              출고 내역이 없습니다
+            </p>
+            <p className="text-xs text-gray-400">
+              조회 조건을 변경하거나 출고를 진행해 주세요
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {records.map((record) => {
+              const key = getRowKey(record);
+              return (
+                <div
+                  key={key}
+                  className={`relative rounded-xl border p-3 transition-all cursor-pointer ${
+                    selectedIds.has(key)
+                      ? "ring-2 ring-emerald-500 border-emerald-300 bg-emerald-50/30"
+                      : "border-gray-200 bg-white hover:border-emerald-300"
+                  }`}
+                  onClick={() => toggleSelect(key)}
+                >
+                  {/* Card header */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <input
+                      type="checkbox"
+                      checked={selectedIds.has(key)}
+                      onChange={() => toggleSelect(key)}
+                      onClick={(e) => e.stopPropagation()}
+                      className="w-4 h-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500"
+                    />
+                    <span className="text-[11px] text-gray-400 font-medium">
+                      {record.outbound_number}
+                    </span>
+                    <span className="text-[11px] font-semibold px-1.5 py-0.5 rounded-full bg-emerald-50 text-emerald-600">
+                      {record.detail_outbound_type || record.outbound_type}
+                    </span>
+                    <span
+                      className={`ml-auto text-[11px] font-semibold px-1.5 py-0.5 rounded-full ${
+                        record.outbound_status === "출고완료"
+                          ? "bg-green-50 text-green-600"
+                          : record.outbound_status === "부분출고"
+                            ? "bg-amber-50 text-amber-600"
+                            : "bg-gray-50 text-gray-500"
+                      }`}
+                    >
+                      {record.outbound_status || "출고"}
+                    </span>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEdit(record);
+                      }}
+                      className="ml-1 w-7 h-7 rounded-lg bg-gray-50 hover:bg-emerald-50 flex items-center justify-center text-gray-400 hover:text-emerald-600 transition-colors"
+                    >
+                      <svg
+                        className="w-3.5 h-3.5"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  {/* Card body */}
+                  <div className="flex flex-col gap-[3px]">
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        품목
+                      </span>
+                      <span className="font-medium text-gray-700 truncate">
+                        {record.item_name || "-"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        품번
+                      </span>
+                      <span className="font-medium text-gray-500 truncate">
+                        {record.item_code || record.item_number || "-"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        거래처
+                      </span>
+                      <span className="font-medium text-gray-700">
+                        {record.customer_name || "-"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        수량
+                      </span>
+                      <span className="font-bold text-emerald-700">
+                        {Number(record.outbound_qty).toLocaleString()}{" "}
+                        {record.unit || "EA"}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-[11px]">
+                      <span className="text-gray-400 min-w-[45px] shrink-0">
+                        출고일
+                      </span>
+                      <span className="font-medium text-gray-700">
+                        {record.outbound_date?.slice(0, 10) || "-"}
+                      </span>
+                    </div>
+                    {(record as any).warehouse_name && (
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">
+                          창고
+                        </span>
+                        <span className="font-medium text-gray-700">
+                          {(record as any).warehouse_name}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Edit Modal ===== */}
+      {editRecord && (
+        <div
+          className="fixed inset-0 z-50 bg-black/40"
+          onClick={() => setEditRecord(null)}
+        >
+          <div
+            className="absolute inset-x-0 bottom-0 sm:inset-auto sm:left-1/2 sm:top-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2 bg-white w-full sm:max-w-lg max-h-[90vh] rounded-t-2xl sm:rounded-2xl overflow-hidden flex flex-col"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Modal header */}
+            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 bg-gradient-to-b from-emerald-50 to-white shrink-0">
+              <div className="min-w-0">
+                <h2 className="text-lg font-bold text-gray-900">출고 수정</h2>
+                <p className="text-[11px] text-gray-400 truncate">
+                  {editRecord.outbound_number} | {editRecord.item_name}
+                </p>
+              </div>
+              <button
+                onClick={() => setEditRecord(null)}
+                className="w-9 h-9 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-gray-600 shrink-0 ml-2"
+              >
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              </button>
+            </div>
+
+            {/* Modal body */}
+            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5">
+              {/* 기본 정보 */}
+              <FieldGroup title="기본 정보">
+                <FormField
+                  label="출고일"
+                  type="date"
+                  value={editForm.outbound_date}
+                  onChange={(v) => updateField("outbound_date", v)}
+                />
+                <FormField
+                  label="출고상태"
+                  type="select"
+                  value={editForm.outbound_status}
+                  onChange={(v) => updateField("outbound_status", v)}
+                  options={STATUS_OPTIONS}
+                />
+              </FieldGroup>
+
+              {/* 수량/금액 */}
+              <FieldGroup title="수량/금액">
+                <FormField
+                  label="수량"
+                  type="number"
+                  value={editForm.outbound_qty}
+                  onChange={(v) => updateField("outbound_qty", v)}
+                />
+                <FormField
+                  label="단가"
+                  type="number"
+                  value={editForm.unit_price}
+                  onChange={(v) => updateField("unit_price", v)}
+                />
+                <FormField
+                  label="금액"
+                  type="number"
+                  value={editForm.total_amount}
+                  onChange={(v) => updateField("total_amount", v)}
+                  readOnly
+                />
+              </FieldGroup>
+
+              {/* 출고 상세 */}
+              <FieldGroup title="출고 상세">
+                <FormField
+                  label="LOT번호"
+                  value={editForm.lot_number}
+                  onChange={(v) => updateField("lot_number", v)}
+                />
+                <FormField
+                  label="창고"
+                  type="select"
+                  value={editForm.warehouse_code}
+                  onChange={(v) => updateField("warehouse_code", v)}
+                  options={warehouses.map((w) => ({
+                    value: w.warehouse_code,
+                    label: w.warehouse_name,
+                  }))}
+                  emptyLabel="선택..."
+                />
+                <FormField
+                  label="위치"
+                  value={editForm.location_code}
+                  onChange={(v) => updateField("location_code", v)}
+                />
+                <FormField
+                  label="담당자"
+                  value={editForm.manager_id}
+                  onChange={(v) => updateField("manager_id", v)}
+                />
+              </FieldGroup>
+
+              {/* 메모 */}
+              <div>
+                <h3 className="text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">
+                  메모
+                </h3>
+                <textarea
+                  value={editForm.memo}
+                  onChange={(e) => updateField("memo", e.target.value)}
+                  rows={3}
+                  className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100 resize-none"
+                  placeholder="메모 입력..."
+                />
+              </div>
+            </div>
+
+            {/* Modal footer */}
+            <div className="flex items-center gap-3 px-4 py-3 border-t border-gray-100 bg-gray-50/50 shrink-0">
+              <button
+                onClick={() => setEditRecord(null)}
+                className="flex-1 py-3 rounded-xl border border-gray-200 text-sm font-semibold text-gray-600 active:scale-95 transition-all"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={saving}
+                className="flex-1 py-3 rounded-xl text-sm font-semibold text-white active:scale-95 transition-all disabled:opacity-50"
+                style={{
+                  background: "linear-gradient(to bottom, #34d399, #059669)",
+                }}
+              >
+                {saving ? "저장 중..." : "저장"}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* ===== Customer Modal ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(customer) => setSelectedCustomer(customer)}
+      />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-components                                                      */
+/* ------------------------------------------------------------------ */
+
+function FieldGroup({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <h3 className="text-xs font-bold text-gray-500 mb-2 uppercase tracking-wider">
+        {title}
+      </h3>
+      <div className="grid grid-cols-2 gap-3">{children}</div>
+    </div>
+  );
+}
+
+interface FormFieldProps {
+  label: string;
+  value: any;
+  onChange: (v: any) => void;
+  type?: "text" | "number" | "date" | "select";
+  options?: string[] | { value: string; label: string }[];
+  emptyLabel?: string;
+  readOnly?: boolean;
+}
+
+function FormField({
+  label,
+  value,
+  onChange,
+  type = "text",
+  options,
+  emptyLabel,
+  readOnly,
+}: FormFieldProps) {
+  const baseClass =
+    "w-full px-3 py-2 border border-gray-200 rounded-lg text-sm outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100";
+
+  return (
+    <div>
+      <label className="text-[11px] font-semibold text-gray-400 mb-1 block">
+        {label}
+      </label>
+      {type === "select" && options ? (
+        <select
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className={`${baseClass} bg-white`}
+        >
+          {emptyLabel && <option value="">{emptyLabel}</option>}
+          {options.map((opt) => {
+            const v = typeof opt === "string" ? opt : opt.value;
+            const l = typeof opt === "string" ? opt : opt.label;
+            return (
+              <option key={v} value={v}>
+                {l}
+              </option>
+            );
+          })}
+        </select>
+      ) : (
+        <input
+          type={type}
+          value={value}
+          onChange={(e) =>
+            onChange(
+              type === "number" ? Number(e.target.value) : e.target.value,
+            )
+          }
+          readOnly={readOnly}
+          className={`${baseClass} ${readOnly ? "bg-gray-50 text-gray-500" : ""}`}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/ProductionOutbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/ProductionOutbound.tsx
new file mode 100644
index 00000000..a739e0fa
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/ProductionOutbound.tsx
@@ -0,0 +1,548 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "../inbound/SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundOrder {
+  id: string;
+  reference_no: string;
+  order_date: string;
+  customer_code: string;
+  customer_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  shipped_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  inspection_type: "self" | "request" | null;
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ProductionOutboundProps {
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  onCartClick: () => void;
+  saving: boolean;
+  outboundType: string;
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_customer_production";
+
+export function ProductionOutbound({ cart, onCartClick, saving, outboundType, sourceTable }: ProductionOutboundProps) {
+  const router = useRouter();
+
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(null);
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [orders, setOrders] = useState<OutboundOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<OutboundOrder | null>(null);
+
+  const [customerScanOpen, setCustomerScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  const [customerSearchText, setCustomerSearchText] = useState("");
+  const [customerDropdownOpen, setCustomerDropdownOpen] = useState(false);
+  const [allCustomers, setAllCustomers] = useState<Supplier[]>([]);
+  const customerInputRef = useRef<HTMLInputElement>(null);
+  const customerDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all customers
+   * TODO: API 연결 — 생산출고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllCustomers = useCallback(async () => {
+    setAllCustomers([]);
+  }, []);
+
+  useEffect(() => { fetchAllCustomers(); }, [fetchAllCustomers]);
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedCustomer(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectCustomer = (s: Supplier | null) => {
+    setSelectedCustomer(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  const filteredCustomers = useMemo(() => {
+    if (!customerSearchText.trim()) return [];
+    return allCustomers.filter((s) => matchChosung(s.customer_name, customerSearchText.trim()));
+  }, [allCustomers, customerSearchText]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        customerDropdownRef.current &&
+        !customerDropdownRef.current.contains(e.target as Node) &&
+        customerInputRef.current &&
+        !customerInputRef.current.contains(e.target as Node)
+      ) {
+        setCustomerDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch outbound orders
+   * TODO: API 연결 — 생산출고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  const filteredOrders = selectedCustomer
+    ? orders.filter((o) =>
+        o.customer_code === selectedCustomer.customer_code ||
+        o.customer_name === selectedCustomer.customer_name
+      )
+    : orders;
+
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.reference_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  const openNumpad = (order: OutboundOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    if (cart.cartItems.length > 0) {
+      const existingCustomer = String(cart.cartItems[0].row.customer_code || "");
+      if (existingCustomer && existingCustomer !== order.customer_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          customer_code: order.customer_code,
+          customer_name: order.customer_name,
+          reference_no: order.reference_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          outbound_type: outboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/outbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">생산출고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">생산 품목을 선택하여 출고하세요</p>
+          </div>
+        </div>
+
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover} shadow-[0_4px_12px_rgba(194,65,12,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedCustomer && (
+              <span className="text-[11px] font-medium text-orange-600 bg-orange-50 px-2 py-0.5 rounded-full">
+                {selectedCustomer.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedCustomer
+                  ? "bg-orange-50/50 border-orange-200 text-orange-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedCustomer ? selectedCustomer.customer_name : "거래처를 선택하세요"}
+            </button>
+            <button
+              onClick={() => setCustomerScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover} shadow-[0_4px_12px_rgba(194,65,12,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedCustomer && (
+              <button
+                onClick={() => { selectCustomer(null); setCustomerSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">출하 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-orange-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedCustomer ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 주문번호 검색..."
+              disabled={!selectedCustomer}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedCustomer
+                  ? "focus:border-orange-400 focus:ring-2 focus:ring-orange-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedCustomer}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover} ${
+                !selectedCustomer ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(194,65,12,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">출하 품목 목록</span>
+          <span className="text-[11px] text-gray-400">
+            {selectedCustomer ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedCustomer ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 출하 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-orange-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedCustomer ? "해당 거래처의 출하 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-orange-300"
+                  }`}
+                >
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex gap-2.5">
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.reference_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">출고수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미출고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      <button
+                        onClick={() => { if (!inCart) openNumpad(order); }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-orange-50 border-orange-200 hover:bg-orange-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-orange-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(s) => selectCustomer(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      <BarcodeScanModal
+        open={customerScanOpen}
+        onOpenChange={setCustomerScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setCustomerScanOpen(false);
+          const match = allCustomers.find(
+            (s) => s.customer_code === barcode || s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectCustomer(match);
+            setCustomerSearchText("");
+          } else {
+            setCustomerSearchText(barcode);
+            setCustomerDropdownOpen(true);
+          }
+        }}
+      />
+
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="출하 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/ReturnOutbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/ReturnOutbound.tsx
new file mode 100644
index 00000000..1959e8a7
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/ReturnOutbound.tsx
@@ -0,0 +1,562 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "../inbound/SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundOrder {
+  id: string;
+  reference_no: string;
+  order_date: string;
+  customer_code: string;
+  customer_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  shipped_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  inspection_type: "self" | "request" | null;
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface ReturnOutboundProps {
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  onCartClick: () => void;
+  saving: boolean;
+  outboundType: string;
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_customer_return";
+
+export function ReturnOutbound({ cart, onCartClick, saving, outboundType, sourceTable }: ReturnOutboundProps) {
+  const router = useRouter();
+
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(null);
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [orders, setOrders] = useState<OutboundOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<OutboundOrder | null>(null);
+
+  const [customerScanOpen, setCustomerScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  const [customerSearchText, setCustomerSearchText] = useState("");
+  const [customerDropdownOpen, setCustomerDropdownOpen] = useState(false);
+  const [allCustomers, setAllCustomers] = useState<Supplier[]>([]);
+  const customerInputRef = useRef<HTMLInputElement>(null);
+  const customerDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all customers
+   * TODO: API 연결 — 반품출고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllCustomers = useCallback(async () => {
+    setAllCustomers([]);
+  }, []);
+
+  useEffect(() => { fetchAllCustomers(); }, [fetchAllCustomers]);
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedCustomer(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectCustomer = (s: Supplier | null) => {
+    setSelectedCustomer(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  const filteredCustomers = useMemo(() => {
+    if (!customerSearchText.trim()) return [];
+    return allCustomers.filter((s) => matchChosung(s.customer_name, customerSearchText.trim()));
+  }, [allCustomers, customerSearchText]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        customerDropdownRef.current &&
+        !customerDropdownRef.current.contains(e.target as Node) &&
+        customerInputRef.current &&
+        !customerInputRef.current.contains(e.target as Node)
+      ) {
+        setCustomerDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch outbound orders
+   * TODO: API 연결 — 반품출고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  const filteredOrders = selectedCustomer
+    ? orders.filter((o) =>
+        o.customer_code === selectedCustomer.customer_code ||
+        o.customer_name === selectedCustomer.customer_name
+      )
+    : orders;
+
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.reference_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  const openNumpad = (order: OutboundOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    if (cart.cartItems.length > 0) {
+      const existingCustomer = String(cart.cartItems[0].row.customer_code || "");
+      if (existingCustomer && existingCustomer !== order.customer_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          customer_code: order.customer_code,
+          customer_name: order.customer_name,
+          reference_no: order.reference_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          outbound_type: outboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/outbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">반품출고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">반품 품목을 선택하여 출고하세요</p>
+          </div>
+        </div>
+
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className="relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60"
+          style={{
+            background: "linear-gradient(to bottom, #64748b, #334155)",
+            boxShadow: "0 4px 12px rgba(51,65,85,0.3)",
+          }}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedCustomer && (
+              <span className="text-[11px] font-medium text-slate-600 bg-slate-50 px-2 py-0.5 rounded-full">
+                {selectedCustomer.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedCustomer
+                  ? "bg-slate-50/50 border-slate-200 text-slate-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedCustomer ? selectedCustomer.customer_name : "거래처를 선택하세요"}
+            </button>
+            <button
+              onClick={() => setCustomerScanOpen(true)}
+              className="min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0"
+              style={{
+                background: "linear-gradient(to bottom, #64748b, #334155)",
+                boxShadow: "0 4px 12px rgba(51,65,85,0.3)",
+              }}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedCustomer && (
+              <button
+                onClick={() => { selectCustomer(null); setCustomerSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">출하 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-slate-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedCustomer ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 주문번호 검색..."
+              disabled={!selectedCustomer}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedCustomer
+                  ? "focus:border-slate-400 focus:ring-2 focus:ring-slate-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedCustomer}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${
+                !selectedCustomer ? "opacity-40 cursor-not-allowed" : ""
+              }`}
+              style={{
+                background: "linear-gradient(to bottom, #64748b, #334155)",
+                boxShadow: selectedCustomer ? "0 4px 12px rgba(51,65,85,0.3)" : "none",
+              }}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">출하 품목 목록</span>
+          <span className="text-[11px] text-gray-400">
+            {selectedCustomer ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedCustomer ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 출하 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-slate-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedCustomer ? "해당 거래처의 출하 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-slate-500 rounded-lg hover:bg-slate-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-slate-300"
+                  }`}
+                >
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex gap-2.5">
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.reference_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">출고수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미출고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      <button
+                        onClick={() => { if (!inCart) openNumpad(order); }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-slate-50 border-slate-200 hover:bg-slate-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-slate-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all"
+                          style={{
+                            background: "linear-gradient(135deg, #64748b 0%, #334155 100%)",
+                          }}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(s) => selectCustomer(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      <BarcodeScanModal
+        open={customerScanOpen}
+        onOpenChange={setCustomerScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setCustomerScanOpen(false);
+          const match = allCustomers.find(
+            (s) => s.customer_code === barcode || s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectCustomer(match);
+            setCustomerSearchText("");
+          } else {
+            setCustomerSearchText(barcode);
+            setCustomerDropdownOpen(true);
+          }
+        }}
+      />
+
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="출하 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SalesOutbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SalesOutbound.tsx
new file mode 100644
index 00000000..29abb282
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SalesOutbound.tsx
@@ -0,0 +1,591 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "../inbound/SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundOrder {
+  id: string;
+  reference_no: string;
+  order_date: string;
+  customer_code: string;
+  customer_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  shipped_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  /** Inspection type: "self" = self inspection required, "request" = inspection request optional, null = none */
+  inspection_type: "self" | "request" | null;
+  /** Item image URL from item_info.image (may be null) */
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface SalesOutboundProps {
+  /** useCartSync 훅 인스턴스 (page.tsx에서 생성하여 전달) */
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  /** 장바구니 버튼 클릭 핸들러 (dirty 저장 후 카트 페이지로 이동) */
+  onCartClick: () => void;
+  /** 카트 저장 중 상태 (버튼 스피너/비활성화용) */
+  saving: boolean;
+  /** 출고 유형 — 카트 품목에 기록됨 */
+  outboundType: string;
+  /** 소스 테이블명 — 카트 품목별 sourceTable */
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_customer_sales";
+
+export function SalesOutbound({ cart, onCartClick, saving, outboundType, sourceTable }: SalesOutboundProps) {
+  const router = useRouter();
+
+  /* State */
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(null);
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [orders, setOrders] = useState<OutboundOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  /* NumberPad state */
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<OutboundOrder | null>(null);
+
+  /* Barcode scan modal state */
+  const [customerScanOpen, setCustomerScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  /* Inline customer search state */
+  const [customerSearchText, setCustomerSearchText] = useState("");
+  const [customerDropdownOpen, setCustomerDropdownOpen] = useState(false);
+  const [allCustomers, setAllCustomers] = useState<Supplier[]>([]);
+  const customerInputRef = useRef<HTMLInputElement>(null);
+  const customerDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all customers for inline search
+   * TODO: API 연결 — 판매출고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllCustomers = useCallback(async () => {
+    setAllCustomers([]);
+  }, []);
+
+  useEffect(() => { fetchAllCustomers(); }, [fetchAllCustomers]);
+
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedCustomer(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectCustomer = (s: Supplier | null) => {
+    setSelectedCustomer(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  /* Filtered customers for inline dropdown */
+  const filteredCustomers = useMemo(() => {
+    if (!customerSearchText.trim()) return [];
+    return allCustomers.filter((s) => matchChosung(s.customer_name, customerSearchText.trim()));
+  }, [allCustomers, customerSearchText]);
+
+  /* Close dropdown on outside click */
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        customerDropdownRef.current &&
+        !customerDropdownRef.current.contains(e.target as Node) &&
+        customerInputRef.current &&
+        !customerInputRef.current.contains(e.target as Node)
+      ) {
+        setCustomerDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch outbound orders
+   * TODO: API 연결 — 판매출고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  /* Initial load */
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  /* Filter orders by selected customer */
+  const filteredOrders = selectedCustomer
+    ? orders.filter((o) =>
+        o.customer_code === selectedCustomer.customer_code ||
+        o.customer_name === selectedCustomer.customer_name
+      )
+    : orders;
+
+  /* Filter by keyword */
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.reference_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  /* Open numpad for an order */
+  const openNumpad = (order: OutboundOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  /* Add to cart with numpad result */
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    // 거래처 검증: 카트에 이미 다른 거래처 품목이 있으면 차단
+    if (cart.cartItems.length > 0) {
+      const existingCustomer = String(cart.cartItems[0].row.customer_code || "");
+      if (existingCustomer && existingCustomer !== order.customer_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          customer_code: order.customer_code,
+          customer_name: order.customer_name,
+          reference_no: order.reference_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          outbound_type: outboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Remove from cart (cancel) */
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  /* Search */
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/outbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">판매출고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">출하 품목을 선택하여 출고하세요</p>
+          </div>
+        </div>
+
+        {/* Cart button */}
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover} shadow-[0_4px_12px_rgba(21,128,61,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area (2 columns on tablet+) ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        {/* Customer search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedCustomer && (
+              <span className="text-[11px] font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                {selectedCustomer.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedCustomer
+                  ? "bg-green-50/50 border-green-200 text-green-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedCustomer ? selectedCustomer.customer_name : "거래처를 선택하세요"}
+            </button>
+            {/* QR/Barcode scan button */}
+            <button
+              onClick={() => setCustomerScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover} shadow-[0_4px_12px_rgba(21,128,61,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedCustomer && (
+              <button
+                onClick={() => { selectCustomer(null); setCustomerSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Item search card */}
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">출하 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-green-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedCustomer ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 주문번호 검색..."
+              disabled={!selectedCustomer}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedCustomer
+                  ? "focus:border-green-400 focus:ring-2 focus:ring-green-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            {/* QR/Barcode scan button */}
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedCustomer}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover} ${
+                !selectedCustomer ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(21,128,61,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">
+            출하 품목 목록
+          </span>
+          <span className="text-[11px] text-gray-400">
+            {selectedCustomer ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedCustomer ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 출하 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-green-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedCustomer ? "해당 거래처의 출하 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-green-500 rounded-lg hover:bg-green-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-green-300"
+                  }`}
+                >
+                  {/* Green left bar for in-cart items */}
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  {/* === Header row: item code + item name + inspection badge === */}
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  {/* === Body row: image + info + action === */}
+                  <div className="flex gap-2.5">
+                    {/* Product image */}
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    {/* Info columns */}
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.reference_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">출고수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미출고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    {/* Action column: qty display + add/cancel button */}
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      {/* Qty display - clickable to open numpad */}
+                      <button
+                        onClick={() => {
+                          if (!inCart) openNumpad(order);
+                        }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-green-50 border-green-200 hover:bg-green-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-green-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {/* Add / Cancel button */}
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.green.buttonBg} ${COLOR_MAP.green.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(s) => selectCustomer(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      {/* Barcode scan modal for customer */}
+      <BarcodeScanModal
+        open={customerScanOpen}
+        onOpenChange={setCustomerScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setCustomerScanOpen(false);
+          const match = allCustomers.find(
+            (s) =>
+              s.customer_code === barcode ||
+              s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectCustomer(match);
+            setCustomerSearchText("");
+          } else {
+            setCustomerSearchText(barcode);
+            setCustomerDropdownOpen(true);
+          }
+        }}
+      />
+
+      {/* Barcode scan modal for item */}
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="출하 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SubcontractorOutbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SubcontractorOutbound.tsx
new file mode 100644
index 00000000..28dc27f9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SubcontractorOutbound.tsx
@@ -0,0 +1,548 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "../inbound/SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundOrder {
+  id: string;
+  reference_no: string;
+  order_date: string;
+  customer_code: string;
+  customer_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  shipped_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  inspection_type: "self" | "request" | null;
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface SubcontractorOutboundProps {
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  onCartClick: () => void;
+  saving: boolean;
+  outboundType: string;
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_customer_subcontractor";
+
+export function SubcontractorOutbound({ cart, onCartClick, saving, outboundType, sourceTable }: SubcontractorOutboundProps) {
+  const router = useRouter();
+
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(null);
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [orders, setOrders] = useState<OutboundOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<OutboundOrder | null>(null);
+
+  const [customerScanOpen, setCustomerScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  const [customerSearchText, setCustomerSearchText] = useState("");
+  const [customerDropdownOpen, setCustomerDropdownOpen] = useState(false);
+  const [allCustomers, setAllCustomers] = useState<Supplier[]>([]);
+  const customerInputRef = useRef<HTMLInputElement>(null);
+  const customerDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all customers
+   * TODO: API 연결 — 외주출고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllCustomers = useCallback(async () => {
+    setAllCustomers([]);
+  }, []);
+
+  useEffect(() => { fetchAllCustomers(); }, [fetchAllCustomers]);
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedCustomer(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectCustomer = (s: Supplier | null) => {
+    setSelectedCustomer(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  const filteredCustomers = useMemo(() => {
+    if (!customerSearchText.trim()) return [];
+    return allCustomers.filter((s) => matchChosung(s.customer_name, customerSearchText.trim()));
+  }, [allCustomers, customerSearchText]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        customerDropdownRef.current &&
+        !customerDropdownRef.current.contains(e.target as Node) &&
+        customerInputRef.current &&
+        !customerInputRef.current.contains(e.target as Node)
+      ) {
+        setCustomerDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch outbound orders
+   * TODO: API 연결 — 외주출고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  const filteredOrders = selectedCustomer
+    ? orders.filter((o) =>
+        o.customer_code === selectedCustomer.customer_code ||
+        o.customer_name === selectedCustomer.customer_name
+      )
+    : orders;
+
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.reference_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  const openNumpad = (order: OutboundOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    if (cart.cartItems.length > 0) {
+      const existingCustomer = String(cart.cartItems[0].row.customer_code || "");
+      if (existingCustomer && existingCustomer !== order.customer_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          customer_code: order.customer_code,
+          customer_name: order.customer_name,
+          reference_no: order.reference_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          outbound_type: outboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/outbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">외주출고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">외주 품목을 선택하여 출고하세요</p>
+          </div>
+        </div>
+
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover} shadow-[0_4px_12px_rgba(109,40,217,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedCustomer && (
+              <span className="text-[11px] font-medium text-purple-600 bg-purple-50 px-2 py-0.5 rounded-full">
+                {selectedCustomer.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedCustomer
+                  ? "bg-purple-50/50 border-purple-200 text-purple-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedCustomer ? selectedCustomer.customer_name : "거래처를 선택하세요"}
+            </button>
+            <button
+              onClick={() => setCustomerScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover} shadow-[0_4px_12px_rgba(109,40,217,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedCustomer && (
+              <button
+                onClick={() => { selectCustomer(null); setCustomerSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">출하 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-purple-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedCustomer ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 주문번호 검색..."
+              disabled={!selectedCustomer}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedCustomer
+                  ? "focus:border-purple-400 focus:ring-2 focus:ring-purple-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedCustomer}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover} ${
+                !selectedCustomer ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(109,40,217,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">출하 품목 목록</span>
+          <span className="text-[11px] text-gray-400">
+            {selectedCustomer ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedCustomer ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 출하 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-purple-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedCustomer ? "해당 거래처의 출하 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-purple-500 rounded-lg hover:bg-purple-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-purple-300"
+                  }`}
+                >
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex gap-2.5">
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.reference_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">출고수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미출고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      <button
+                        onClick={() => { if (!inCart) openNumpad(order); }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-purple-50 border-purple-200 hover:bg-purple-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-purple-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.purple.buttonBg} ${COLOR_MAP.purple.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(s) => selectCustomer(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      <BarcodeScanModal
+        open={customerScanOpen}
+        onOpenChange={setCustomerScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setCustomerScanOpen(false);
+          const match = allCustomers.find(
+            (s) => s.customer_code === barcode || s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectCustomer(match);
+            setCustomerSearchText("");
+          } else {
+            setCustomerSearchText(barcode);
+            setCustomerDropdownOpen(true);
+          }
+        }}
+      />
+
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="출하 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SuppliedOutbound.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SuppliedOutbound.tsx
new file mode 100644
index 00000000..09710371
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/outbound/SuppliedOutbound.tsx
@@ -0,0 +1,548 @@
+"use client";
+
+import React, { useState, useCallback, useEffect, useMemo, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, matchChosung } from "../inbound/SupplierModal";
+import { SimpleKeypadModal } from "../common/SimpleKeypadModal";
+import { BarcodeScanModal } from "../common/BarcodeScanModal";
+import type { CartItemWithId } from "../common/useCartSync";
+import { COLOR_MAP } from "../common/theme";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundOrder {
+  id: string;
+  reference_no: string;
+  order_date: string;
+  customer_code: string;
+  customer_name: string;
+  item_code: string;
+  item_name: string;
+  spec: string;
+  material: string;
+  order_qty: number;
+  shipped_qty: number;
+  remain_qty: number;
+  unit_price: number;
+  status: string;
+  due_date: string;
+  source_table: string;
+  inspection_type: "self" | "request" | null;
+  image: string | null;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+interface SuppliedOutboundProps {
+  cart: import("../common/useCartSync").UseCartSyncReturn;
+  onCartClick: () => void;
+  saving: boolean;
+  outboundType: string;
+  sourceTable: string;
+}
+
+const STORAGE_KEY = "pop_customer_supplied";
+
+export function SuppliedOutbound({ cart, onCartClick, saving, outboundType, sourceTable }: SuppliedOutboundProps) {
+  const router = useRouter();
+
+  const [selectedCustomer, setSelectedCustomer] = useState<Supplier | null>(null);
+  const [customerModalOpen, setCustomerModalOpen] = useState(false);
+  const [orders, setOrders] = useState<OutboundOrder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  const [keyword, setKeyword] = useState("");
+
+  const [numpadOpen, setNumpadOpen] = useState(false);
+  const [numpadTarget, setNumpadTarget] = useState<OutboundOrder | null>(null);
+
+  const [customerScanOpen, setCustomerScanOpen] = useState(false);
+  const [itemScanOpen, setItemScanOpen] = useState(false);
+
+  const [customerSearchText, setCustomerSearchText] = useState("");
+  const [customerDropdownOpen, setCustomerDropdownOpen] = useState(false);
+  const [allCustomers, setAllCustomers] = useState<Supplier[]>([]);
+  const customerInputRef = useRef<HTMLInputElement>(null);
+  const customerDropdownRef = useRef<HTMLDivElement>(null);
+
+  /* Fetch all customers
+   * TODO: API 연결 — 사급출고용 거래처 조회 엔드포인트 확정 후 연동
+   */
+  const fetchAllCustomers = useCallback(async () => {
+    setAllCustomers([]);
+  }, []);
+
+  useEffect(() => { fetchAllCustomers(); }, [fetchAllCustomers]);
+  /* sessionStorage 복원 — 장바구니 갔다 돌아올 때 거래처 선택 유지 */
+  useEffect(() => {
+    const saved = sessionStorage.getItem(STORAGE_KEY);
+    if (saved) {
+      try {
+        const parsed = JSON.parse(saved);
+        setSelectedCustomer(parsed);
+      } catch {}
+    }
+  }, []);
+
+  /* 거래처 선택 래퍼 — sessionStorage에도 저장/제거 */
+  const selectCustomer = (s: Supplier | null) => {
+    setSelectedCustomer(s);
+    if (s) {
+      sessionStorage.setItem(STORAGE_KEY, JSON.stringify(s));
+    } else {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  const filteredCustomers = useMemo(() => {
+    if (!customerSearchText.trim()) return [];
+    return allCustomers.filter((s) => matchChosung(s.customer_name, customerSearchText.trim()));
+  }, [allCustomers, customerSearchText]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        customerDropdownRef.current &&
+        !customerDropdownRef.current.contains(e.target as Node) &&
+        customerInputRef.current &&
+        !customerInputRef.current.contains(e.target as Node)
+      ) {
+        setCustomerDropdownOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  /* Fetch outbound orders
+   * TODO: API 연결 — 사급출고 대상 품목 조회 엔드포인트 확정 후 연동
+   */
+  const fetchOrders = useCallback(async (_searchKeyword?: string) => {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      setOrders([]);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchOrders();
+  }, [fetchOrders]);
+
+  const filteredOrders = selectedCustomer
+    ? orders.filter((o) =>
+        o.customer_code === selectedCustomer.customer_code ||
+        o.customer_name === selectedCustomer.customer_name
+      )
+    : orders;
+
+  const displayOrders = keyword
+    ? filteredOrders.filter((o) =>
+        o.item_name.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.item_code.toLowerCase().includes(keyword.toLowerCase()) ||
+        o.reference_no.toLowerCase().includes(keyword.toLowerCase())
+      )
+    : filteredOrders;
+
+  const openNumpad = (order: OutboundOrder) => {
+    setNumpadTarget(order);
+    setNumpadOpen(true);
+  };
+
+  const handleNumpadConfirm = (qty: number) => {
+    if (!numpadTarget) return;
+    const order = numpadTarget;
+    if (cart.isItemInCart(order.id)) return;
+
+    if (cart.cartItems.length > 0) {
+      const existingCustomer = String(cart.cartItems[0].row.customer_code || "");
+      if (existingCustomer && existingCustomer !== order.customer_code) {
+        alert("다른 거래처의 품목이 이미 장바구니에 있습니다.\n같은 거래처의 품목만 담을 수 있습니다.");
+        setNumpadTarget(null);
+        return;
+      }
+    }
+
+    const finalQty = Math.min(qty, order.remain_qty);
+
+    cart.addItem(
+      {
+        row: {
+          id: order.id,
+          item_code: order.item_code,
+          item_name: order.item_name,
+          customer_code: order.customer_code,
+          customer_name: order.customer_name,
+          reference_no: order.reference_no,
+          unit_price: order.unit_price || 0,
+          spec: order.spec || "",
+          material: order.material || "",
+          order_qty: order.order_qty,
+          remain_qty: order.remain_qty,
+          order_date: order.order_date || "",
+          inspection_type: order.inspection_type,
+          source_table: order.source_table,
+          image: order.image || null,
+          outbound_type: outboundType,
+        },
+        quantity: finalQty,
+      },
+      order.id,
+      sourceTable,
+    );
+    setNumpadTarget(null);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleRemoveFromCart = (id: string) => {
+    cart.removeItem(id);
+    setTimeout(() => cart.saveToDb().catch(() => {}), 300);
+  };
+
+  const handleSearch = () => {
+    fetchOrders(keyword || undefined);
+  };
+
+  const isInCart = (id: string) => cart.isItemInCart(id);
+  const getCartItem = (id: string): CartItemWithId | undefined => cart.getCartItem(id);
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Header ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => router.push("/COMPANY_7/pop/outbound")}
+            className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+            </svg>
+          </button>
+          <div>
+            <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">사급출고</h1>
+            <p className="text-xs text-gray-400 mt-0.5">사급 품목을 선택하여 출고하세요</p>
+          </div>
+        </div>
+
+        <button
+          onClick={onCartClick}
+          disabled={saving}
+          className={`relative min-w-[144px] min-h-[48px] px-4 rounded-xl flex items-center justify-center gap-2 text-white font-semibold text-sm active:scale-95 transition-all shrink-0 disabled:opacity-60 ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover} shadow-[0_4px_12px_rgba(14,116,144,0.3)]`}
+        >
+          {saving ? (
+            <svg className="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+          ) : (
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+            </svg>
+          )}
+          <span>장바구니</span>
+          {cart.cartCount > 0 && (
+            <span
+              className={`absolute -top-1 -right-1 min-w-[20px] h-5 px-1 rounded-full text-[10px] font-bold text-white flex items-center justify-center ${
+                cart.isDirty ? "bg-orange-500 animate-pulse" : "bg-red-500"
+              }`}
+            >
+              {cart.cartCount}
+            </span>
+          )}
+        </button>
+      </div>
+
+      {/* ===== Search area ===== */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">거래처</span>
+            {selectedCustomer && (
+              <span className="text-[11px] font-medium text-cyan-600 bg-cyan-50 px-2 py-0.5 rounded-full">
+                {selectedCustomer.customer_name}
+              </span>
+            )}
+          </div>
+          <div className="relative flex items-center gap-2">
+            <button
+              onClick={() => setCustomerModalOpen(true)}
+              className={`flex-1 px-3 py-2.5 border rounded-lg text-sm text-left outline-none transition-all ${
+                selectedCustomer
+                  ? "bg-cyan-50/50 border-cyan-200 text-cyan-800 font-medium"
+                  : "border-gray-200 text-gray-500 hover:border-gray-300 hover:bg-gray-50"
+              }`}
+            >
+              {selectedCustomer ? selectedCustomer.customer_name : "거래처를 선택하세요"}
+            </button>
+            <button
+              onClick={() => setCustomerScanOpen(true)}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover} shadow-[0_4px_12px_rgba(14,116,144,0.3)]`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+            {selectedCustomer && (
+              <button
+                onClick={() => { selectCustomer(null); setCustomerSearchText(""); }}
+                className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center text-gray-400 hover:bg-gray-200 transition-colors shrink-0"
+              >
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+          <div className="flex items-center justify-between mb-1.5">
+            <span className="text-xs font-semibold text-gray-500">출하 품목</span>
+            <span className="text-[11px] font-semibold text-white bg-cyan-500 px-2 py-0.5 rounded-full min-w-[24px] text-center">
+              {selectedCustomer ? displayOrders.length : 0}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={keyword}
+              onChange={(e) => setKeyword(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") handleSearch(); }}
+              placeholder="품목명, 품목코드, 주문번호 검색..."
+              disabled={!selectedCustomer}
+              className={`flex-1 px-3 py-2.5 border border-gray-200 rounded-lg text-sm outline-none transition-all ${
+                selectedCustomer
+                  ? "focus:border-cyan-400 focus:ring-2 focus:ring-cyan-100"
+                  : "bg-gray-50 text-gray-400 cursor-not-allowed"
+              }`}
+            />
+            <button
+              onClick={() => setItemScanOpen(true)}
+              disabled={!selectedCustomer}
+              className={`min-w-[48px] min-h-[48px] rounded-xl flex items-center justify-center text-white active:scale-95 transition-all shrink-0 ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover} ${
+                !selectedCustomer ? "opacity-40 cursor-not-allowed" : "shadow-[0_4px_12px_rgba(14,116,144,0.3)]"
+              }`}
+            >
+              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 013.75 9.375v-4.5zM3.75 14.625c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5a1.125 1.125 0 01-1.125-1.125v-4.5zM13.5 4.875c0-.621.504-1.125 1.125-1.125h4.5c.621 0 1.125.504 1.125 1.125v4.5c0 .621-.504 1.125-1.125 1.125h-4.5A1.125 1.125 0 0113.5 9.375v-4.5z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 14.625v2.25h2.25m-2.25 2.25h4.5v-4.5" />
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* ===== Order items ===== */}
+      <div className="bg-white rounded-xl border border-gray-100 shadow-sm p-3">
+        <div className="flex items-center justify-between mb-2 pb-2 border-b border-gray-50">
+          <span className="text-xs font-semibold text-gray-500">출하 품목 목록</span>
+          <span className="text-[11px] text-gray-400">
+            {selectedCustomer ? `${displayOrders.length}건` : "-"}
+          </span>
+        </div>
+
+        {!selectedCustomer ? (
+          <div className="flex flex-col items-center justify-center py-16 text-gray-400">
+            <svg className="w-16 h-16 mb-4 opacity-20" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+            </svg>
+            <p className="text-sm font-medium text-gray-500 mb-1">거래처를 먼저 선택하세요</p>
+            <p className="text-xs text-gray-400">거래처를 선택하면 해당 거래처의 출하 품목이 표시됩니다</p>
+          </div>
+        ) : loading ? (
+          <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+            <svg className="animate-spin w-5 h-5 mr-2 text-cyan-500" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+            </svg>
+            불러오는 중...
+          </div>
+        ) : displayOrders.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 text-gray-400">
+            <svg className="w-12 h-12 mb-3 opacity-30" fill="none" stroke="currentColor" strokeWidth={1} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+            </svg>
+            <p className="text-sm">
+              {fetchError ? fetchError : selectedCustomer ? "해당 거래처의 출하 품목이 없습니다" : "거래처를 선택하거나 품목을 검색하세요"}
+            </p>
+            {fetchError && (
+              <button
+                onClick={() => fetchOrders()}
+                className="mt-3 px-4 py-2 text-xs font-medium text-white bg-cyan-500 rounded-lg hover:bg-cyan-600 active:scale-95 transition-all"
+              >
+                다시 시도
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+            {displayOrders.map((order) => {
+              const inCart = isInCart(order.id);
+              const cartItem = getCartItem(order.id);
+
+              return (
+                <div
+                  key={order.id}
+                  className={`relative rounded-xl border p-3 transition-all ${
+                    inCart
+                      ? "border-green-300 bg-gradient-to-br from-green-50/80 to-emerald-50/50"
+                      : "border-gray-200 bg-white hover:border-cyan-300"
+                  }`}
+                >
+                  {inCart && (
+                    <div className="absolute top-0 left-0 w-[3px] h-full bg-green-500 rounded-l-xl" />
+                  )}
+
+                  <div className="flex items-center gap-1.5 mb-2.5 pb-2 border-b border-gray-100">
+                    <span className="text-[11px] text-gray-400 font-medium shrink-0">{order.item_code}</span>
+                    <span className="text-[13px] font-semibold text-gray-900 flex-1 truncate">{order.item_name}</span>
+                    {order.inspection_type === "self" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-blue-100 text-blue-700 border border-blue-200 shrink-0 whitespace-nowrap">
+                        검사 필수
+                      </span>
+                    )}
+                    {order.inspection_type === "request" && (
+                      <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-100 text-amber-700 border border-amber-200 shrink-0 whitespace-nowrap">
+                        검사의뢰 선택
+                      </span>
+                    )}
+                  </div>
+
+                  <div className="flex gap-2.5">
+                    <div className="w-[56px] h-[56px] min-w-[56px] bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-center shrink-0 overflow-hidden">
+                      {order.image ? (
+                        <img src={order.image} alt={order.item_name} className="w-full h-full object-cover rounded-lg" />
+                      ) : (
+                        <span className="text-2xl text-gray-300">{"\uD83D\uDCE6"}</span>
+                      )}
+                    </div>
+
+                    <div className="flex-1 min-w-0 flex flex-col gap-[3px]">
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문일</span>
+                        <span className="font-medium text-gray-700">{order.order_date}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">주문번호</span>
+                        <span className="font-medium text-gray-700 truncate">{order.reference_no}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">출고수량</span>
+                        <span className="font-medium text-gray-700">{order.order_qty.toLocaleString()}</span>
+                      </div>
+                      <div className="flex items-center gap-1.5 text-[11px]">
+                        <span className="text-gray-400 min-w-[45px] shrink-0">미출고</span>
+                        <span className="font-bold text-red-500">
+                          {inCart
+                            ? (order.remain_qty - (cartItem?.quantity ?? 0)).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-1.5 items-stretch min-w-[80px] shrink-0">
+                      <button
+                        onClick={() => { if (!inCart) openNumpad(order); }}
+                        disabled={inCart}
+                        className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md border transition-all ${
+                          inCart
+                            ? "bg-gray-50 border-gray-200 cursor-default"
+                            : "bg-cyan-50 border-cyan-200 hover:bg-cyan-100 cursor-pointer active:scale-95"
+                        }`}
+                      >
+                        <span className={`text-sm font-bold ${inCart ? "text-gray-400" : "text-cyan-700"}`}
+                          style={{ fontVariantNumeric: "tabular-nums" }}
+                        >
+                          {inCart
+                            ? (cartItem?.quantity ?? order.remain_qty).toLocaleString()
+                            : order.remain_qty.toLocaleString()
+                          }
+                        </span>
+                        <span className="text-[10px] text-gray-400">EA</span>
+                      </button>
+
+                      {inCart ? (
+                        <button
+                          onClick={() => handleRemoveFromCart(order.id)}
+                          className="flex items-center justify-center gap-1 px-2.5 py-2 rounded-md bg-red-500 text-white text-xs font-semibold hover:bg-red-600 active:scale-95 transition-all"
+                        >
+                          취소
+                        </button>
+                      ) : (
+                        <button
+                          onClick={() => openNumpad(order)}
+                          className={`flex items-center justify-center gap-1 px-2.5 py-2 rounded-md text-white text-xs font-semibold active:scale-95 transition-all ${COLOR_MAP.cyan.buttonBg} ${COLOR_MAP.cyan.buttonBgHover}`}
+                        >
+                          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121 0 2.002-.881 2.002-2.003V6.75m-14.22 0h14.22" />
+                          </svg>
+                          담기
+                        </button>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* ===== Modals ===== */}
+      <SupplierModal
+        open={customerModalOpen}
+        onClose={() => setCustomerModalOpen(false)}
+        onSelect={(s) => selectCustomer(s)}
+      />
+
+      <SimpleKeypadModal
+        open={numpadOpen}
+        onClose={() => { setNumpadOpen(false); setNumpadTarget(null); }}
+        onConfirm={handleNumpadConfirm}
+        maxQty={numpadTarget?.remain_qty ?? 0}
+        itemName={numpadTarget?.item_name ?? ""}
+      />
+
+      <BarcodeScanModal
+        open={customerScanOpen}
+        onOpenChange={setCustomerScanOpen}
+        targetField="거래처"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setCustomerScanOpen(false);
+          const match = allCustomers.find(
+            (s) => s.customer_code === barcode || s.customer_name.includes(barcode)
+          );
+          if (match) {
+            selectCustomer(match);
+            setCustomerSearchText("");
+          } else {
+            setCustomerSearchText(barcode);
+            setCustomerDropdownOpen(true);
+          }
+        }}
+      />
+
+      <BarcodeScanModal
+        open={itemScanOpen}
+        onOpenChange={setItemScanOpen}
+        targetField="출하 품목"
+        autoSubmit
+        onScanSuccess={(barcode) => {
+          setItemScanOpen(false);
+          setKeyword(barcode);
+          fetchOrders(barcode);
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/AcceptProcessModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/AcceptProcessModal.tsx
new file mode 100644
index 00000000..3980a595
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/AcceptProcessModal.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface AcceptProcessModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (qty: number) => void;
+  maxQty: number;
+  processName: string;
+  seqNo: number;
+  loading?: boolean;
+}
+
+/* ------------------------------------------------------------------ */
+/* Numpad Keys                                                         */
+/* ------------------------------------------------------------------ */
+
+const KEYS = [
+  { label: "7", action: "7" },
+  { label: "8", action: "8" },
+  { label: "9", action: "9" },
+  { label: "\u2190", action: "backspace" },
+  { label: "4", action: "4" },
+  { label: "5", action: "5" },
+  { label: "6", action: "6" },
+  { label: "C", action: "clear" },
+  { label: "1", action: "1" },
+  { label: "2", action: "2" },
+  { label: "3", action: "3" },
+  { label: "MAX", action: "max" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function AcceptProcessModal({
+  open,
+  onClose,
+  onConfirm,
+  maxQty,
+  processName,
+  seqNo,
+  loading = false,
+}: AcceptProcessModalProps) {
+  const [qty, setQty] = useState("0");
+
+  useEffect(() => {
+    if (open) {
+      setQty("0");
+    }
+  }, [open]);
+
+  const qtyNum = parseInt(qty, 10) || 0;
+  const isOverMax = qtyNum > maxQty;
+
+  const handleKey = useCallback(
+    (key: string) => {
+      setQty((prev) => {
+        switch (key) {
+          case "backspace":
+            return prev.length <= 1 ? "0" : prev.slice(0, -1);
+          case "clear":
+            return "0";
+          case "max":
+            return String(maxQty);
+          default: {
+            const next = prev === "0" ? key : prev + key;
+            const num = parseInt(next, 10);
+            if (isNaN(num)) return prev;
+            return next;
+          }
+        }
+      });
+    },
+    [maxQty]
+  );
+
+  const handleConfirm = () => {
+    const finalQty = Math.min(qtyNum, maxQty);
+    if (finalQty <= 0) return;
+    onConfirm(finalQty);
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      {/* Panel */}
+      <div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
+        {/* Header */}
+        <div
+          className="px-4 py-3"
+          style={{ background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)" }}
+        >
+          <div className="flex items-center justify-between">
+            <span className="text-white font-bold text-base">공정 접수</span>
+            <span className="text-white/80 text-xs bg-white/20 px-2.5 py-1 rounded-full">
+              최대 {maxQty.toLocaleString()} EA
+            </span>
+          </div>
+          <p className="text-white/80 text-xs mt-1">
+            {seqNo}공정: {processName}
+          </p>
+        </div>
+
+        {/* Body */}
+        <div className="p-4">
+          <p className="text-center text-sm font-semibold text-gray-700 mb-1">
+            접수 수량 입력
+          </p>
+          <p className="text-center text-xs text-gray-400 mb-3">
+            접수할 수량(EA)을 입력하세요
+          </p>
+
+          {/* Display */}
+          <input
+            type="text"
+            readOnly
+            value={qtyNum.toLocaleString()}
+            className={`w-full px-4 py-3 text-right text-3xl font-bold border-2 rounded-xl bg-gray-50 mb-3 ${
+              isOverMax ? "border-red-300 text-red-500" : "border-gray-200 text-gray-900"
+            }`}
+            style={{ fontVariantNumeric: "tabular-nums" }}
+          />
+
+          {isOverMax && (
+            <p className="text-xs text-red-500 text-center mb-2 font-medium">
+              접수가능량({maxQty.toLocaleString()})을 초과합니다
+            </p>
+          )}
+
+          {/* Numpad */}
+          <div className="grid grid-cols-4 gap-2.5">
+            {KEYS.map((key) => (
+              <button
+                key={key.action}
+                onClick={() => handleKey(key.action)}
+                className={`h-14 rounded-xl text-lg font-semibold active:scale-95 transition-all ${
+                  key.action === "backspace" || key.action === "clear"
+                    ? "bg-amber-100 text-amber-700 hover:bg-amber-200"
+                    : key.action === "max"
+                    ? "bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm"
+                    : "bg-gray-100 text-gray-900 hover:bg-gray-200"
+                }`}
+              >
+                {key.label}
+              </button>
+            ))}
+
+            {/* Bottom row */}
+            <button
+              onClick={() => handleKey("0")}
+              className="col-span-2 h-14 rounded-xl text-lg font-semibold bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
+            >
+              0
+            </button>
+            <button
+              onClick={handleConfirm}
+              disabled={qtyNum <= 0 || loading}
+              className="col-span-2 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+              style={{
+                background:
+                  qtyNum <= 0 || loading
+                    ? "#9ca3af"
+                    : "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)",
+              }}
+            >
+              {loading ? "처리중..." : "접수"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/DefectTypeModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/DefectTypeModal.tsx
new file mode 100644
index 00000000..5956288a
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/DefectTypeModal.tsx
@@ -0,0 +1,365 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface DefectType {
+  id: string;
+  defect_code: string;
+  defect_name: string;
+  defect_type: string;
+  severity: string;
+}
+
+export interface DefectEntry {
+  defect_code: string;
+  defect_name: string;
+  qty: string;
+  disposition: "scrap" | "rework" | "accept";
+}
+
+interface DefectTypeModalProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: (entries: DefectEntry[]) => void;
+  defectTypes: DefectType[];
+  maxQty: number;
+  initialEntries?: DefectEntry[];
+}
+
+/* ------------------------------------------------------------------ */
+/* Simple Number Input with Stepper                                    */
+/* ------------------------------------------------------------------ */
+
+function QtyInput({
+  value,
+  onChange,
+  max,
+}: {
+  value: number;
+  onChange: (v: number) => void;
+  max: number;
+}) {
+  const [padOpen, setPadOpen] = useState(false);
+  const [padValue, setPadValue] = useState(String(value));
+
+  const handlePadOpen = () => {
+    setPadValue("");
+    setPadOpen(true);
+  };
+
+  const handlePadKey = (key: string) => {
+    if (key === "backspace") {
+      setPadValue((prev) => prev.length > 1 ? prev.slice(0, -1) : "0");
+    } else if (key === "clear") {
+      setPadValue("0");
+    } else if (key === "max") {
+      setPadValue(String(max));
+    } else {
+      setPadValue((prev) => prev === "0" ? key : prev + key);
+    }
+  };
+
+  const handlePadConfirm = () => {
+    const num = Math.min(Math.max(0, parseInt(padValue, 10) || 0), max);
+    onChange(num);
+    setPadOpen(false);
+  };
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <button
+          onClick={() => onChange(Math.max(0, value - 1))}
+          className="w-10 h-10 rounded-lg bg-gray-100 text-gray-600 text-lg font-bold flex items-center justify-center active:scale-95 transition-all hover:bg-gray-200"
+        >
+          -
+        </button>
+        <button
+          onClick={handlePadOpen}
+          className="w-16 h-10 text-center text-lg font-bold text-gray-900 bg-gray-50 rounded-lg border-2 border-gray-200 hover:border-red-300 active:scale-95 transition-all"
+          style={{ fontVariantNumeric: "tabular-nums" }}
+        >
+          {value}
+        </button>
+        <button
+          onClick={() => onChange(Math.min(max, value + 1))}
+          className="w-10 h-10 rounded-lg bg-gray-100 text-gray-600 text-lg font-bold flex items-center justify-center active:scale-95 transition-all hover:bg-gray-200"
+        >
+          +
+        </button>
+      </div>
+
+      {/* 숫자 키패드 모달 */}
+      {padOpen && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center">
+          <div className="absolute inset-0 bg-black/40" onClick={() => setPadOpen(false)} />
+          <div className="relative bg-white rounded-2xl shadow-2xl p-4 w-[280px] z-10">
+            <div className="text-center mb-3">
+              <p className="text-sm text-gray-500">불량 수량 (최대 {max})</p>
+              <p className="text-3xl font-bold text-gray-900 mt-1" style={{ fontVariantNumeric: "tabular-nums" }}>{padValue || "0"}</p>
+            </div>
+            <div className="grid grid-cols-3 gap-2 mb-3">
+              {["1","2","3","4","5","6","7","8","9"].map((k) => (
+                <button key={k} onClick={() => handlePadKey(k)}
+                  className="h-12 rounded-xl bg-gray-100 text-lg font-bold text-gray-800 active:scale-95 active:bg-gray-200 transition-all">{k}</button>
+              ))}
+              <button onClick={() => handlePadKey("clear")}
+                className="h-12 rounded-xl bg-gray-200 text-sm font-bold text-gray-600 active:scale-95 transition-all">C</button>
+              <button onClick={() => handlePadKey("0")}
+                className="h-12 rounded-xl bg-gray-100 text-lg font-bold text-gray-800 active:scale-95 transition-all">0</button>
+              <button onClick={() => handlePadKey("backspace")}
+                className="h-12 rounded-xl bg-gray-200 text-sm font-bold text-gray-600 active:scale-95 transition-all">←</button>
+            </div>
+            <button onClick={() => handlePadKey("max")}
+              className="w-full h-10 rounded-xl bg-red-50 text-red-600 text-sm font-bold mb-2 active:scale-95 transition-all">MAX ({max})</button>
+            <div className="flex gap-2">
+              <button onClick={() => setPadOpen(false)}
+                className="flex-1 h-11 rounded-xl bg-gray-100 text-gray-700 font-semibold active:scale-95 transition-all">취소</button>
+              <button onClick={handlePadConfirm}
+                className="flex-1 h-11 rounded-xl bg-red-500 text-white font-bold active:scale-95 transition-all">확인</button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Disposition labels                                                   */
+/* ------------------------------------------------------------------ */
+
+const DISPOSITIONS: { value: DefectEntry["disposition"]; label: string; color: string }[] = [
+  { value: "scrap", label: "폐기", color: "bg-red-100 text-red-700 border-red-200" },
+  { value: "rework", label: "재작업", color: "bg-amber-100 text-amber-700 border-amber-200" },
+  { value: "accept", label: "특채", color: "bg-blue-100 text-blue-700 border-blue-200" },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function DefectTypeModal({
+  open,
+  onClose,
+  onConfirm,
+  defectTypes,
+  maxQty,
+  initialEntries,
+}: DefectTypeModalProps) {
+  const [entries, setEntries] = useState<
+    Array<{ defect_code: string; defect_name: string; qty: number; disposition: DefectEntry["disposition"] }>
+  >([]);
+
+  useEffect(() => {
+    if (open) {
+      if (initialEntries && initialEntries.length > 0) {
+        setEntries(
+          initialEntries.map((e) => ({
+            ...e,
+            qty: parseInt(e.qty, 10) || 0,
+          }))
+        );
+      } else {
+        setEntries([]);
+      }
+    }
+  }, [open, initialEntries]);
+
+  const totalDefectQty = entries.reduce((sum, e) => sum + e.qty, 0);
+
+  const addEntry = (dt: DefectType) => {
+    // If already exists, just increment
+    const existing = entries.find((e) => e.defect_code === dt.defect_code);
+    if (existing) {
+      setEntries((prev) =>
+        prev.map((e) =>
+          e.defect_code === dt.defect_code ? { ...e, qty: Math.min(e.qty + 1, maxQty) } : e
+        )
+      );
+    } else {
+      setEntries((prev) => [
+        ...prev,
+        {
+          defect_code: dt.defect_code,
+          defect_name: dt.defect_name,
+          qty: 1,
+          disposition: "scrap" as const,
+        },
+      ]);
+    }
+  };
+
+  const removeEntry = (code: string) => {
+    setEntries((prev) => prev.filter((e) => e.defect_code !== code));
+  };
+
+  const updateQty = (code: string, qty: number) => {
+    setEntries((prev) =>
+      prev.map((e) => (e.defect_code === code ? { ...e, qty } : e))
+    );
+  };
+
+  const updateDisposition = (code: string, disposition: DefectEntry["disposition"]) => {
+    setEntries((prev) =>
+      prev.map((e) => (e.defect_code === code ? { ...e, disposition } : e))
+    );
+  };
+
+  const handleConfirm = () => {
+    const validEntries = entries.filter((e) => e.qty > 0);
+    onConfirm(
+      validEntries.map((e) => ({
+        defect_code: e.defect_code,
+        defect_name: e.defect_name,
+        qty: String(e.qty),
+        disposition: e.disposition,
+      }))
+    );
+    onClose();
+  };
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-black/40" onClick={onClose} />
+
+      {/* Panel */}
+      <div className="relative bg-white w-full sm:w-[90%] sm:max-w-[480px] rounded-t-2xl sm:rounded-2xl shadow-2xl z-10 overflow-hidden max-h-[85dvh] flex flex-col">
+        {/* Header */}
+        <div
+          className="flex items-center justify-between px-4 py-3 shrink-0"
+          style={{ background: "linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)" }}
+        >
+          <span className="text-white font-bold text-base">불량 유형 선택</span>
+          <div className="flex items-center gap-3">
+            <span className="text-white/80 text-xs bg-white/20 px-2.5 py-1 rounded-full">
+              총 {totalDefectQty}개
+            </span>
+            <button
+              onClick={onClose}
+              className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center text-white hover:bg-white/30 active:scale-95 transition-all"
+            >
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {/* Defect type selection */}
+          <p className="text-sm font-semibold text-gray-700 mb-3">불량 유형 선택</p>
+          <div className="grid grid-cols-2 gap-2 mb-4">
+            {defectTypes.map((dt) => {
+              const isSelected = entries.some((e) => e.defect_code === dt.defect_code);
+              return (
+                <button
+                  key={dt.id}
+                  onClick={() => addEntry(dt)}
+                  className={`px-3 py-3 rounded-xl text-sm font-medium border-2 active:scale-95 transition-all text-left ${
+                    isSelected
+                      ? "border-red-400 bg-red-50 text-red-700"
+                      : "border-gray-200 bg-white text-gray-700 hover:border-red-300 hover:bg-red-50"
+                  }`}
+                >
+                  <span className="block font-bold">{dt.defect_name}</span>
+                  <span className="block text-xs text-gray-400 mt-0.5">{dt.defect_code}</span>
+                </button>
+              );
+            })}
+            {defectTypes.length === 0 && (
+              <div className="col-span-2 text-center py-6 text-gray-400 text-sm">
+                등록된 불량 유형이 없습니다
+              </div>
+            )}
+          </div>
+
+          {/* Selected entries */}
+          {entries.length > 0 && (
+            <>
+              <p className="text-sm font-semibold text-gray-700 mb-3">불량 상세</p>
+              <div className="flex flex-col gap-3">
+                {entries.map((entry) => (
+                  <div
+                    key={entry.defect_code}
+                    className="border-2 border-red-100 rounded-xl p-3 bg-red-50/50"
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-sm font-bold text-gray-900">{entry.defect_name}</span>
+                      <button
+                        onClick={() => removeEntry(entry.defect_code)}
+                        className="w-7 h-7 rounded-lg bg-red-100 text-red-500 flex items-center justify-center hover:bg-red-200 active:scale-95 transition-all"
+                      >
+                        <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                      </button>
+                    </div>
+
+                    {/* Qty */}
+                    <div className="flex items-center justify-between mb-2">
+                      <span className="text-xs text-gray-500">수량</span>
+                      <QtyInput
+                        value={entry.qty}
+                        onChange={(v) => updateQty(entry.defect_code, v)}
+                        max={maxQty}
+                      />
+                    </div>
+
+                    {/* Disposition */}
+                    <div className="flex gap-2">
+                      {DISPOSITIONS.map((d) => (
+                        <button
+                          key={d.value}
+                          onClick={() => updateDisposition(entry.defect_code, d.value)}
+                          className={`flex-1 py-2 rounded-lg text-xs font-semibold border active:scale-95 transition-all ${
+                            entry.disposition === d.value
+                              ? d.color
+                              : "bg-white text-gray-400 border-gray-200"
+                          }`}
+                        >
+                          {d.label}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="shrink-0 border-t border-gray-200 p-4 flex gap-3">
+          <button
+            onClick={onClose}
+            className="flex-1 h-12 rounded-xl text-base font-semibold bg-gray-100 text-gray-700 hover:bg-gray-200 active:scale-95 transition-all"
+          >
+            취소
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={entries.length === 0 || totalDefectQty <= 0}
+            className="flex-1 h-12 rounded-xl text-base font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+            style={{
+              background:
+                entries.length === 0 || totalDefectQty <= 0
+                  ? "#9ca3af"
+                  : "linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)",
+            }}
+          >
+            확인 ({totalDefectQty}개)
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessDetailModal.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessDetailModal.tsx
new file mode 100644
index 00000000..26022c4a
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessDetailModal.tsx
@@ -0,0 +1,230 @@
+"use client";
+
+import React from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface ProcessStep {
+  no: number;
+  name: string;
+  code: string;
+  status: "completed" | "in_progress" | "waiting" | "acceptable";
+  inputQty: number;
+  goodQty: number;
+  defectQty: number;
+  planQty: number;
+  availableQty: number;
+}
+
+interface ProcessDetailModalProps {
+  open: boolean;
+  onClose: () => void;
+  workInstructionNo: string;
+  totalQty: number;
+  steps: ProcessStep[];
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function ProcessDetailModal({
+  open,
+  onClose,
+  workInstructionNo,
+  totalQty,
+  steps,
+}: ProcessDetailModalProps) {
+  if (!open) return null;
+
+  const completedCount = steps.filter((s) => s.status === "completed").length;
+  const overallPct = steps.length > 0 ? Math.round((completedCount / steps.length) * 100) : 0;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center" style={{ background: "rgba(0,0,0,0.5)" }}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md mx-4 overflow-hidden">
+        {/* Header */}
+        <div className="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
+          <div>
+            <h3 className="text-lg font-bold text-gray-900">공정 순서 상세</h3>
+            <p className="text-xs text-gray-400 mt-0.5">{workInstructionNo}</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 active:scale-95 transition-all"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Summary bar */}
+        <div className="px-5 py-4">
+          <div className="mb-4 p-4 bg-gray-50 rounded-xl">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-sm font-bold text-gray-900">작업지시 총량</span>
+              <span className="text-xl font-extrabold text-gray-900">
+                {totalQty.toLocaleString()} EA
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="h-3 flex-1 bg-gray-200 rounded-full overflow-hidden">
+                <div
+                  className="h-full bg-blue-500 rounded-full transition-all"
+                  style={{ width: `${overallPct}%` }}
+                />
+              </div>
+              <span className="text-sm font-bold text-blue-600">
+                {completedCount}/{steps.length} 공정
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Steps */}
+        <div className="px-5 pb-4 max-h-[400px] overflow-y-auto -mt-2">
+          {steps.map((s) => {
+            const borderColor =
+              s.status === "completed"
+                ? "border-green-400 bg-green-50"
+                : s.status === "in_progress"
+                ? "border-blue-400 bg-blue-50"
+                : s.status === "acceptable"
+                ? "border-amber-400 bg-amber-50"
+                : "border-gray-200 bg-gray-50";
+
+            const dotColor =
+              s.status === "completed"
+                ? "bg-green-500"
+                : s.status === "in_progress"
+                ? "bg-blue-500"
+                : s.status === "acceptable"
+                ? "bg-amber-500"
+                : "bg-gray-400";
+
+            const badge =
+              s.status === "completed" ? (
+                <span className="text-xs font-bold px-3 py-1 rounded-full bg-green-100 text-green-700">완료</span>
+              ) : s.status === "in_progress" ? (
+                <span className="text-xs font-bold px-3 py-1 rounded-full bg-blue-100 text-blue-700">진행중</span>
+              ) : s.status === "acceptable" ? (
+                <span className="text-xs font-bold px-3 py-1 rounded-full bg-amber-100 text-amber-700">접수가능</span>
+              ) : (
+                <span className="text-xs font-bold px-3 py-1 rounded-full bg-gray-100 text-gray-500">대기</span>
+              );
+
+            const barColor =
+              s.status === "completed"
+                ? "bg-green-500"
+                : s.status === "in_progress"
+                ? "bg-blue-500"
+                : s.status === "acceptable"
+                ? "bg-amber-500"
+                : "bg-gray-300";
+
+            const barTextColor =
+              s.status === "completed"
+                ? "text-green-600"
+                : s.status === "in_progress"
+                ? "text-blue-600"
+                : s.status === "acceptable"
+                ? "text-amber-600"
+                : "text-gray-400";
+
+            const pct = s.planQty > 0 ? Math.round((s.inputQty / s.planQty) * 100) : 0;
+            const unaccept = s.planQty - s.inputQty;
+
+            return (
+              <div key={s.code + "-" + s.no} className={`rounded-xl border-2 ${borderColor} mb-3 overflow-hidden`}>
+                {/* Header */}
+                <div className="flex items-center gap-3 p-4 pb-2">
+                  <div
+                    className={`w-10 h-10 rounded-full ${dotColor} text-white flex items-center justify-center text-base font-bold shrink-0`}
+                  >
+                    {s.no}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between">
+                      <span className="text-base font-bold text-gray-900 truncate">{s.name}</span>
+                      {badge}
+                    </div>
+                    <span className="text-xs text-gray-400">{s.code}</span>
+                  </div>
+                </div>
+
+                {/* Progress bar */}
+                <div className="px-4 pb-2">
+                  <div className="flex items-center gap-2">
+                    <div className="h-2.5 flex-1 bg-gray-100 rounded-full overflow-hidden">
+                      <div
+                        className={`h-full ${barColor} rounded-full transition-all`}
+                        style={{ width: `${Math.min(pct, 100)}%` }}
+                      />
+                    </div>
+                    <span className={`text-xs font-bold ${barTextColor}`}>{pct}%</span>
+                  </div>
+                </div>
+
+                {/* Qty grid */}
+                <div className="grid grid-cols-4 gap-1 px-4 pb-3">
+                  <div className="text-center py-1.5">
+                    <div className="text-[10px] text-gray-400">지시</div>
+                    <div className="text-base font-extrabold text-gray-900">{s.planQty.toLocaleString()}</div>
+                  </div>
+                  <div className="text-center py-1.5">
+                    <div className="text-[10px] text-blue-500">접수</div>
+                    <div className="text-base font-extrabold text-blue-700">{s.inputQty.toLocaleString()}</div>
+                  </div>
+                  <div className="text-center py-1.5">
+                    <div className="text-[10px] text-emerald-500">양품</div>
+                    <div className="text-base font-extrabold text-emerald-600">{s.goodQty.toLocaleString()}</div>
+                  </div>
+                  {s.status === "completed" || s.status === "in_progress" ? (
+                    <div className="text-center py-1.5">
+                      <div className="text-[10px] text-red-500">불량</div>
+                      <div className="text-base font-extrabold text-red-600">{s.defectQty.toLocaleString()}</div>
+                    </div>
+                  ) : (
+                    <div className="text-center py-1.5">
+                      <div className="text-[10px] text-gray-400">미접수</div>
+                      <div className="text-base font-extrabold text-gray-500">{Math.max(0, unaccept).toLocaleString()}</div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Additional accept qty */}
+                {s.status === "in_progress" && s.availableQty > 0 && (
+                  <div className="px-4 pb-3 text-right">
+                    <span className="text-xs text-violet-600 font-semibold">
+                      추가접수가능 {s.availableQty.toLocaleString()}
+                    </span>
+                  </div>
+                )}
+                {s.status === "acceptable" && s.availableQty > 0 && (
+                  <div className="px-4 pb-3 text-right">
+                    <span className="text-xs text-amber-600 font-semibold">
+                      접수가능 {s.availableQty.toLocaleString()}
+                    </span>
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Footer */}
+        <div className="px-5 py-3 border-t border-gray-100">
+          <button
+            onClick={onClose}
+            className="w-full py-3 rounded-xl text-sm font-bold text-white bg-blue-500 active:scale-[0.98] transition-all"
+          >
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessTimer.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessTimer.tsx
new file mode 100644
index 00000000..65a2bec0
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessTimer.tsx
@@ -0,0 +1,243 @@
+"use client";
+
+import React, { useState, useEffect, useRef, useCallback } from "react";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+export type TimerStatus = "idle" | "running" | "paused" | "completed";
+
+interface ProcessTimerProps {
+  status: TimerStatus;
+  /** ISO string or epoch — when the timer was first started */
+  startedAt: string | null;
+  /** ISO string or epoch — when paused (null if not paused) */
+  pausedAt: string | null;
+  /** Total paused seconds accumulated before current pause */
+  totalPausedSeconds: number;
+  /** Completed at timestamp */
+  completedAt: string | null;
+  /** Actual work time in seconds (from server, used when completed) */
+  actualWorkTime: number | null;
+  onStart: () => void;
+  onPause: () => void;
+  onResume: () => void;
+  onComplete: () => void;
+  disabled?: boolean;
+}
+
+/* ------------------------------------------------------------------ */
+/* Helpers                                                             */
+/* ------------------------------------------------------------------ */
+
+function formatTime(totalSeconds: number): string {
+  const h = Math.floor(totalSeconds / 3600);
+  const m = Math.floor((totalSeconds % 3600) / 60);
+  const s = totalSeconds % 60;
+  return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+export function ProcessTimer({
+  status,
+  startedAt,
+  pausedAt,
+  totalPausedSeconds,
+  completedAt,
+  actualWorkTime,
+  onStart,
+  onPause,
+  onResume,
+  onComplete,
+  disabled = false,
+}: ProcessTimerProps) {
+  const [elapsed, setElapsed] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  const calcElapsed = useCallback(() => {
+    if (!startedAt) return 0;
+    const start = new Date(startedAt).getTime();
+    const now = Date.now();
+    let pausedMs = totalPausedSeconds * 1000;
+
+    // If currently paused, add time since pause started
+    if (pausedAt) {
+      const pauseStart = new Date(pausedAt).getTime();
+      pausedMs += now - pauseStart;
+    }
+
+    return Math.max(0, Math.floor((now - start - pausedMs) / 1000));
+  }, [startedAt, pausedAt, totalPausedSeconds]);
+
+  useEffect(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+
+    if (status === "completed" && actualWorkTime !== null) {
+      setElapsed(actualWorkTime);
+      return;
+    }
+
+    if (status === "running") {
+      setElapsed(calcElapsed());
+      intervalRef.current = setInterval(() => {
+        setElapsed(calcElapsed());
+      }, 1000);
+    } else if (status === "paused") {
+      setElapsed(calcElapsed());
+    } else if (status === "idle") {
+      setElapsed(0);
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [status, startedAt, pausedAt, totalPausedSeconds, actualWorkTime, calcElapsed]);
+
+  /* Color by status */
+  const colorMap: Record<TimerStatus, { bg: string; text: string; border: string; ring: string }> = {
+    idle: { bg: "bg-gray-50", text: "text-gray-400", border: "border-gray-200", ring: "ring-gray-200" },
+    running: { bg: "bg-blue-50", text: "text-blue-600", border: "border-blue-200", ring: "ring-blue-300" },
+    paused: { bg: "bg-amber-50", text: "text-amber-600", border: "border-amber-200", ring: "ring-amber-300" },
+    completed: { bg: "bg-green-50", text: "text-green-600", border: "border-green-200", ring: "ring-green-300" },
+  };
+
+  const colors = colorMap[status];
+  const statusLabels: Record<TimerStatus, string> = {
+    idle: "대기",
+    running: "진행중",
+    paused: "일시정지",
+    completed: "완료",
+  };
+
+  return (
+    <div className={`rounded-2xl border-2 ${colors.border} ${colors.bg} p-5 sm:p-6`}>
+      {/* Status badge */}
+      <div className="flex items-center justify-between mb-4">
+        <span className={`text-xs font-bold px-3 py-1 rounded-full ${colors.bg} ${colors.text} border ${colors.border}`}>
+          {statusLabels[status]}
+        </span>
+        {status === "running" && (
+          <span className="flex items-center gap-1.5">
+            <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+            <span className="text-xs text-blue-500 font-medium">작업중</span>
+          </span>
+        )}
+      </div>
+
+      {/* Timer display */}
+      <div className="text-center mb-5">
+        <p
+          className={`text-5xl sm:text-6xl font-black tracking-wider ${colors.text}`}
+          style={{ fontVariantNumeric: "tabular-nums", fontFamily: "monospace" }}
+        >
+          {formatTime(elapsed)}
+        </p>
+        {startedAt && (
+          <p className="text-xs text-gray-400 mt-2">
+            시작: {new Date(startedAt).toLocaleTimeString("ko-KR")}
+            {completedAt && ` | 종료: ${new Date(completedAt).toLocaleTimeString("ko-KR")}`}
+          </p>
+        )}
+      </div>
+
+      {/* Buttons */}
+      <div className="flex gap-3">
+        {status === "idle" && (
+          <button
+            onClick={onStart}
+            disabled={disabled}
+            className="flex-1 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+            style={{ background: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)" }}
+          >
+            <span className="flex items-center justify-center gap-2">
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+              시작
+            </span>
+          </button>
+        )}
+
+        {status === "running" && (
+          <>
+            <button
+              onClick={onPause}
+              disabled={disabled}
+              className="flex-1 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+              style={{ background: "linear-gradient(135deg, #f59e0b 0%, #d97706 100%)" }}
+            >
+              <span className="flex items-center justify-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
+                </svg>
+                일시정지
+              </span>
+            </button>
+            <button
+              onClick={onComplete}
+              disabled={disabled}
+              className="flex-1 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+              style={{ background: "linear-gradient(135deg, #10b981 0%, #059669 100%)" }}
+            >
+              <span className="flex items-center justify-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 6h12v12H6z" />
+                </svg>
+                종료
+              </span>
+            </button>
+          </>
+        )}
+
+        {status === "paused" && (
+          <>
+            <button
+              onClick={onResume}
+              disabled={disabled}
+              className="flex-1 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+              style={{ background: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)" }}
+            >
+              <span className="flex items-center justify-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+                재개
+              </span>
+            </button>
+            <button
+              onClick={onComplete}
+              disabled={disabled}
+              className="flex-1 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+              style={{ background: "linear-gradient(135deg, #10b981 0%, #059669 100%)" }}
+            >
+              <span className="flex items-center justify-center gap-2">
+                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M6 6h12v12H6z" />
+                </svg>
+                종료
+              </span>
+            </button>
+          </>
+        )}
+
+        {status === "completed" && (
+          <div className="flex-1 h-14 rounded-xl bg-green-100 border-2 border-green-300 flex items-center justify-center gap-2 text-green-700 font-bold text-lg">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+            </svg>
+            작업 완료
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessWork.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessWork.tsx
new file mode 100644
index 00000000..eb632a78
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/ProcessWork.tsx
@@ -0,0 +1,2858 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { toast } from "sonner";
+import { usePopSettings } from "@/hooks/pop/usePopSettings";
+import { apiClient } from "@/lib/api/client";
+import { dataApi } from "@/lib/api/data";
+import { ConfirmModal } from "../common/ConfirmModal";
+import {
+	type DefectEntry,
+	type DefectType,
+	DefectTypeModal,
+} from "./DefectTypeModal";
+import { ProcessTimer, type TimerStatus } from "./ProcessTimer";
+import { MaterialInputSection } from "./sections/MaterialInputSection";
+import { isReworkProcess, type WorkOrderProcessView } from "./types";
+
+/* ================================================================== */
+/* Types                                                               */
+/* ================================================================== */
+
+interface ProcessData {
+	id: string;
+	wo_id: string;
+	seq_no: number;
+	process_code: string;
+	process_name: string;
+	status: string;
+	plan_qty: number;
+	input_qty: number;
+	good_qty: number;
+	defect_qty: number;
+	concession_qty: number;
+	total_production_qty: number;
+	result_status: string;
+	result_note: string;
+	started_at: string | null;
+	paused_at: string | null;
+	total_paused_time: number;
+	completed_at: string | null;
+	actual_work_time: string | null;
+	accepted_at: string | null;
+	accepted_by: string | null;
+	defect_detail: string | null;
+	target_warehouse_id: string | null;
+	target_location_code: string | null;
+	is_rework: boolean;
+	rework_source_id: string | null;
+	routing_detail_id: string | null;
+	batch_id?: string | null;
+	wop_id: string;
+	seq: number;
+	equipment_code: string | null;
+}
+
+/** raw work_order_process row → ProcessData 정규화 */
+function normalizeProcessData(raw: Record<string, unknown>): ProcessData {
+	const toInt = (v: unknown): number => {
+		if (typeof v === "number" && Number.isFinite(v)) return v;
+		if (v == null) return 0;
+		const n = parseInt(String(v), 10);
+		return Number.isFinite(n) ? n : 0;
+	};
+	const s = (v: unknown) => (v == null ? null : String(v));
+	return {
+		id: String(raw.id || ""),
+		wo_id: String(raw.wo_id || ""),
+		seq_no: toInt(raw.seq_no),
+		process_code: String(raw.process_code || ""),
+		process_name: String(raw.process_name || ""),
+		status: String(raw.status || ""),
+		plan_qty: toInt(raw.plan_qty),
+		input_qty: toInt(raw.input_qty),
+		good_qty: toInt(raw.good_qty),
+		defect_qty: toInt(raw.defect_qty),
+		concession_qty: toInt(raw.concession_qty),
+		total_production_qty: toInt(raw.total_production_qty),
+		result_status: String(raw.result_status || ""),
+		result_note: String(raw.result_note || ""),
+		started_at: s(raw.started_at),
+		paused_at: s(raw.paused_at),
+		total_paused_time: toInt(raw.total_paused_time),
+		completed_at: s(raw.completed_at),
+		actual_work_time: s(raw.actual_work_time),
+		accepted_at: s(raw.accepted_at),
+		accepted_by: s(raw.accepted_by),
+		defect_detail: s(raw.defect_detail),
+		target_warehouse_id: s(raw.target_warehouse_id),
+		target_location_code: s(raw.target_location_code),
+		is_rework: isReworkProcess(raw as { is_rework?: string | boolean | null }),
+		rework_source_id: s(raw.rework_source_id),
+		routing_detail_id: s(raw.routing_detail_id),
+		batch_id: s(raw.batch_id),
+		wop_id: String(raw.wop_id || ""),
+		seq: toInt(raw.seq),
+		equipment_code: s(raw.equipment_code),
+	};
+}
+
+interface WorkInstructionInfo {
+	work_instruction_no: string;
+	item_name: string;
+	item_code: string;
+	qty: number;
+}
+
+interface ChecklistItem {
+	id: string;
+	work_order_process_id: string; // 신 구조: wop_result.id (접수 카드 id). copyChecklistToSplit 이 wop_result.id 로 저장
+	source_work_item_id: string;
+	source_detail_id: string;
+	work_phase: string;
+	item_title: string;
+	item_sort_order: string;
+	detail_content: string;
+	detail_type: string;
+	detail_label: string | null;
+	detail_sort_order: string;
+	is_required: string | null;
+	result_value: string | null;
+	is_passed: string | null;
+	status: string;
+	spec_value: string | null;
+	inspection_code: string | null;
+	inspection_method: string | null;
+	unit: string | null;
+	lower_limit: string | null;
+	upper_limit: string | null;
+	input_type: string | null;
+	group_started_at: string | null;
+	group_paused_at: string | null;
+	group_total_paused_time: string | null;
+	group_completed_at: string | null;
+	recorded_by: string | null;
+	recorded_at: string | null;
+	started_at: string | null;
+}
+
+interface Warehouse {
+	id: string;
+	warehouse_code: string;
+	warehouse_name: string;
+}
+
+interface WarehouseLocation {
+	id: string;
+	location_code: string;
+	location_name: string;
+}
+
+interface BatchHistoryItem {
+	seq: number;
+	batch_qty: number;
+	batch_good: number;
+	batch_defect: number;
+	accumulated_total: number;
+	changed_at: string;
+	changed_by: string | null;
+}
+
+type ActiveSection = "checklist" | "result" | "inventory" | "material";
+
+const PHASE_ORDER: Record<string, number> = { PRE: 1, IN: 2, POST: 3 };
+const PHASE_LABELS: Record<string, string> = {
+	PRE: "작업 전",
+	IN: "작업 중",
+	POST: "작업 후",
+};
+
+/* ================================================================== */
+/* ISA-101 Design Tokens                                               */
+/* ================================================================== */
+
+const DESIGN = {
+	bg: {
+		page: "#F5F5F5",
+		card: "#FFFFFF",
+		header: "#1a1a2e",
+		infoBar: "#1a1a2e",
+	},
+	sidebar: { width: "clamp(220px, 18vw, 360px)" },
+	timer: { fontSize: 48 },
+	button: { height: 60, touchMin: 48 },
+	input: { height: 52 },
+	footer: { height: 64 },
+} as const;
+
+/* ================================================================== */
+/* Numpad Modal                                                        */
+/* ================================================================== */
+
+const KEYS = [
+	{ label: "7", action: "7" },
+	{ label: "8", action: "8" },
+	{ label: "9", action: "9" },
+	{ label: "\u2190", action: "backspace" },
+	{ label: "4", action: "4" },
+	{ label: "5", action: "5" },
+	{ label: "6", action: "6" },
+	{ label: "C", action: "clear" },
+	{ label: "1", action: "1" },
+	{ label: "2", action: "2" },
+	{ label: "3", action: "3" },
+	{ label: "MAX", action: "max" },
+];
+
+function SimpleNumpadModal({
+	open,
+	onClose,
+	onConfirm,
+	maxQty,
+	title,
+	subtitle,
+}: {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: (qty: number) => void;
+	maxQty: number;
+	title: string;
+	subtitle: string;
+}) {
+	const [qty, setQty] = useState("0");
+
+	useEffect(() => {
+		if (open) setQty("0");
+	}, [open]);
+
+	const qtyNum = parseInt(qty, 10) || 0;
+
+	const handleKey = useCallback(
+		(key: string) => {
+			setQty((prev) => {
+				switch (key) {
+					case "backspace":
+						return prev.length <= 1 ? "0" : prev.slice(0, -1);
+					case "clear":
+						return "0";
+					case "max":
+						return String(maxQty);
+					default: {
+						const next = prev === "0" ? key : prev + key;
+						const num = parseInt(next, 10);
+						if (isNaN(num)) return prev;
+						return next;
+					}
+				}
+			});
+		},
+		[maxQty],
+	);
+
+	if (!open) return null;
+
+	return (
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			<div className="absolute inset-0 bg-black/40" onClick={onClose} />
+			<div className="relative bg-white w-[90%] max-w-[360px] rounded-2xl shadow-2xl z-10 overflow-hidden">
+				<div
+					className="px-4 py-3"
+					style={{
+						background: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)",
+					}}
+				>
+					<span className="text-white font-bold text-base">{title}</span>
+					<p className="text-white/80 text-xs mt-0.5">{subtitle}</p>
+				</div>
+				<div className="p-4">
+					<input
+						type="text"
+						readOnly
+						value={qtyNum.toLocaleString()}
+						className="w-full px-4 py-3 text-right text-3xl font-bold border-2 border-gray-200 rounded-xl bg-gray-50 text-gray-900 mb-3"
+						style={{ fontVariantNumeric: "tabular-nums" }}
+					/>
+					<div className="grid grid-cols-4 gap-2.5">
+						{KEYS.map((key) => (
+							<button
+								key={key.action}
+								onClick={() => handleKey(key.action)}
+								className={`h-14 rounded-xl text-lg font-semibold active:scale-95 transition-all ${
+									key.action === "backspace" || key.action === "clear"
+										? "bg-amber-100 text-amber-700 hover:bg-amber-200"
+										: key.action === "max"
+											? "bg-blue-100 text-blue-700 hover:bg-blue-200 text-sm"
+											: "bg-gray-100 text-gray-900 hover:bg-gray-200"
+								}`}
+							>
+								{key.label}
+							</button>
+						))}
+						<button
+							onClick={() => handleKey("0")}
+							className="col-span-2 h-14 rounded-xl text-lg font-semibold bg-gray-100 text-gray-900 hover:bg-gray-200 active:scale-95 transition-all"
+						>
+							0
+						</button>
+						<button
+							onClick={() => {
+								if (qtyNum > 0) {
+									onConfirm(Math.min(qtyNum, maxQty));
+									onClose();
+								}
+							}}
+							disabled={qtyNum <= 0}
+							className="col-span-2 h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+							style={{
+								background:
+									qtyNum <= 0
+										? "#9ca3af"
+										: "linear-gradient(135deg, #10b981 0%, #059669 100%)",
+							}}
+						>
+							확인
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/* ================================================================== */
+/* Checklist Group                                                     */
+/* ================================================================== */
+
+interface ChecklistGroup {
+	phase: string;
+	title: string;
+	itemId: string;
+	representativeItemId: string;
+	sortOrder: number;
+	items: ChecklistItem[];
+	completed: number;
+	total: number;
+	timerStarted: boolean;
+	timerCompleted: boolean;
+	timerPaused: boolean;
+	timerState: {
+		startedAt: string | null;
+		pausedAt: string | null;
+		totalPausedTime: number;
+		completedAt: string | null;
+	};
+}
+
+/* ================================================================== */
+/* Helper: formatTime                                                  */
+/* ================================================================== */
+
+function formatTime(totalSeconds: number): string {
+	const h = Math.floor(totalSeconds / 3600);
+	const m = Math.floor((totalSeconds % 3600) / 60);
+	const s = totalSeconds % 60;
+	return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+}
+
+function calcGroupWorkSeconds(timer: ChecklistGroup["timerState"]): number {
+	if (!timer.startedAt) return 0;
+	const now = Date.now();
+	const start = new Date(timer.startedAt).getTime();
+	const end = timer.completedAt ? new Date(timer.completedAt).getTime() : now;
+	let pausedMs = timer.totalPausedTime * 1000;
+	if (timer.pausedAt && !timer.completedAt) {
+		pausedMs += now - new Date(timer.pausedAt).getTime();
+	}
+	return Math.max(0, Math.floor((end - start - pausedMs) / 1000));
+}
+
+/* ================================================================== */
+/* Main Component                                                      */
+/* ================================================================== */
+
+export interface ProcessWorkInfo {
+	planQty: number;
+	inputQty: number;
+	status: string | undefined;
+	isCompleted: boolean;
+}
+
+interface ProcessWorkProps {
+	/**
+	 * 신 구조: wop_result.id (work_order_process_result 의 접수/실적 단위 id).
+	 * URL route /production/work/[processId] 의 processId = 접수 카드 id.
+	 * save-result / confirm-result / cancel-accept / timer / group-timer /
+	 * result-history / material-input / bom-materials / material-inputs API 는
+	 * 모두 이 id 를 work_order_process_id body/path 파라미터로 받는다.
+	 */
+	processId: string;
+	onInfoChange?: (info: ProcessWorkInfo | null) => void;
+	hideInlineStatus?: boolean;
+}
+
+export function ProcessWork({
+	processId,
+	onInfoChange,
+	hideInlineStatus = false,
+}: ProcessWorkProps) {
+	const router = useRouter();
+	const contentRef = useRef<HTMLDivElement>(null);
+
+	/* ---- Core State ---- */
+	const { settings: popSettings } = usePopSettings();
+	const peSettings = popSettings.screens.processExecution;
+	const [process, setProcess] = useState<ProcessData | null>(null);
+	const [wiInfo, setWiInfo] = useState<WorkInstructionInfo | null>(null);
+	const [checklist, setChecklist] = useState<ChecklistItem[]>([]);
+	const [defectTypes, setDefectTypes] = useState<DefectType[]>([]);
+	const [processList, setProcessList] = useState<
+		Array<{ process_code: string; process_name: string }>
+	>([]);
+	const [loading, setLoading] = useState(true);
+	const [saving, setSaving] = useState(false);
+
+	/* ---- Navigation State ---- */
+	const [activeSection, setActiveSection] =
+		useState<ActiveSection>("checklist");
+	const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+
+	/* ---- Timer tick ---- */
+	const [tick, setTick] = useState(Date.now());
+
+	/* ---- Production Input ---- */
+	const [productionQty, setProductionQty] = useState(0);
+	const [defectEntries, setDefectEntries] = useState<DefectEntry[]>([]);
+	const [resultNote, setResultNote] = useState("");
+
+	/* ---- Modals ---- */
+	const [prodQtyModal, setProdQtyModal] = useState(false);
+	const [defectModal, setDefectModal] = useState(false);
+	const [confirmModalState, setConfirmModalState] = useState<{
+		open: boolean;
+		message: string;
+		title?: string;
+		confirmText?: string;
+		variant?: "primary" | "danger" | "success";
+		onConfirm: () => void;
+	}>({ open: false, message: "", onConfirm: () => {} });
+	const askConfirm = (
+		message: string,
+		onConfirm: () => void,
+		opts?: {
+			title?: string;
+			confirmText?: string;
+			variant?: "primary" | "danger" | "success";
+		},
+	) => {
+		setConfirmModalState({
+			open: true,
+			message,
+			title: opts?.title,
+			confirmText: opts?.confirmText,
+			variant: opts?.variant,
+			onConfirm: () => {
+				setConfirmModalState((s) => ({ ...s, open: false }));
+				onConfirm();
+			},
+		});
+	};
+
+	/* ---- Last Process / Warehouse ---- */
+	const [isLastProcess, setIsLastProcess] = useState(false);
+	const [warehouses, setWarehouses] = useState<Warehouse[]>([]);
+	const [warehouseLocations, setWarehouseLocations] = useState<
+		WarehouseLocation[]
+	>([]);
+	const [selectedWarehouse, setSelectedWarehouse] = useState<string>("");
+	const [selectedLocation, setSelectedLocation] = useState<string>("");
+	const [packageUnit, setPackageUnit] = useState<string>("");
+	const [inboundDone, setInboundDone] = useState(false);
+
+	/* ---- Batch Badge (단일/다중품목) ---- */
+	const [batchBadge, setBatchBadge] = useState<{
+		isMulti: boolean;
+		index: number;
+		total: number;
+		itemType: string;
+	} | null>(null);
+
+	/* ---- Batch History ---- */
+	const [history, setHistory] = useState<BatchHistoryItem[]>([]);
+	const [historyLoading, setHistoryLoading] = useState(false);
+
+	/* ================================================================ */
+	/* Data Fetch                                                        */
+	/* ================================================================ */
+
+	const fetchProcess = useCallback(async () => {
+		let capturedItemType = "";
+		setLoading(true);
+		try {
+			// 1. Fetch process data (신 구조: wop_result + wop JOIN, processId=wop_result.id)
+			const procRes = await apiClient.get(
+				`/pop/production/result/${processId}`,
+			);
+			const procRaw = procRes.data?.data as
+				| Record<string, unknown>
+				| undefined;
+			const procData = procRaw ? normalizeProcessData(procRaw) : null;
+			if (procData) {
+				setProcess(procData);
+
+				// 2. Fetch work instruction info
+				if (procData.wo_id) {
+					try {
+						const wiRes = await dataApi.getTableData("work_instruction", {
+							size: 1,
+							filters: { id: procData.wo_id },
+						});
+						const wi = wiRes.data?.[0] as Record<string, unknown> | undefined;
+						if (wi) {
+							let itemName = String(wi.item_name || "");
+							let itemCode = String(wi.item_code || wi.item_number || "");
+
+							// item_name이 비어있고 item_id가 있으면 item_info에서 조회
+							if (!itemName && wi.item_id) {
+								try {
+									const itemRes = await apiClient.get(
+										`/data/item_info/${wi.item_id}`,
+									);
+									const item = itemRes.data?.data;
+									if (item) {
+										itemName = String(item.item_name || "");
+										itemCode = String(item.item_number || item.item_code || "");
+									}
+								} catch {
+									/* non-critical */
+								}
+							}
+
+							// batch_id가 있으면 해당 품목 조회 (다중 품목 지원, 매칭 실패 시 wi 기반 원 값 유지)
+							let batchItemType = "";
+							if (procData.batch_id) {
+								try {
+									const batchItemRes = await dataApi.getTableData("item_info", {
+										size: 1,
+										filters: { item_number: procData.batch_id },
+									});
+									const batchItem = batchItemRes.data?.[0] as Record<string, unknown> | undefined;
+									if (batchItem) {
+										itemName = String(batchItem.item_name || itemName);
+										itemCode = String(batchItem.item_number || itemCode);
+										batchItemType = String(batchItem.type || "");
+									}
+									// 매칭 실패 시 itemName/itemCode 원 값 유지 (fallback 금지)
+								} catch {
+									/* non-critical, itemName/itemCode 원 값 유지 */
+								}
+							}
+							// item_type이 없으면 WI의 item_number로 조회
+							if (!batchItemType && wi.item_number) {
+								try {
+									const wiItemRes = await dataApi.getTableData("item_info", {
+										size: 1,
+										filters: { item_number: String(wi.item_number) },
+									});
+									const wiItem = wiItemRes.data?.[0] as Record<string, unknown> | undefined;
+									if (wiItem) {
+										batchItemType = String(wiItem.type || "");
+									}
+								} catch {
+									/* non-critical */
+								}
+							}
+							// batchItemType을 임시 저장 (step 6에서 사용)
+							capturedItemType = batchItemType;
+
+							setWiInfo({
+								work_instruction_no: String(wi.work_instruction_no || ""),
+								item_name: itemName,
+								item_code: itemCode,
+								qty: parseInt(String(wi.qty), 10) || 0,
+							});
+						}
+					} catch {
+						// Non-critical
+					}
+				}
+			}
+
+			// 3. Fetch checklist (process_work_result)
+			const checkRes = await dataApi.getTableData("process_work_result", {
+				size: 500,
+				filters: { work_order_process_id: processId },
+			});
+			setChecklist((checkRes.data ?? []) as ChecklistItem[]);
+
+			// 4. Defect types
+			try {
+				const dtRes = await apiClient.get("/pop/production/defect-types");
+				setDefectTypes(dtRes.data?.data || []);
+			} catch {
+				setDefectTypes([]);
+			}
+
+			// 5. Is last process
+			try {
+				const lpRes = await apiClient.get(
+					`/pop/production/is-last-process/${processId}`,
+				);
+				const lpData = lpRes.data?.data;
+				setIsLastProcess(lpData?.isLast || false);
+				if (lpData?.targetWarehouseId) {
+					setSelectedWarehouse(lpData.targetWarehouseId);
+					setSelectedLocation(lpData.targetLocationCode || "");
+					setInboundDone(true);
+				}
+			} catch {
+				setIsLastProcess(false);
+			}
+
+			// 6. 같은 작업지시의 공정 목록 (재작업 공정 지정용)
+			if (procData?.wo_id) {
+				try {
+					const plRes = await dataApi.getTableData("work_order_process", {
+						size: 100,
+						filters: { wo_id: procData.wo_id },
+					});
+					const allSiblingsRaw = (plRes.data ?? []) as Record<string, unknown>[];
+					// 신 구조: work_order_process 는 마스터 공정만 (자식 row 없음)
+					const allSiblings = allSiblingsRaw.map(normalizeProcessData);
+					const masters = allSiblings.sort((a, b) => a.seq_no - b.seq_no);
+					// 중복 제거
+					const seen = new Set<string>();
+					setProcessList(
+						masters.map((p) => ({
+							process_code: p.process_code,
+							process_name: p.process_name,
+						})).filter((m) => {
+							if (seen.has(m.process_code)) return false;
+							seen.add(m.process_code);
+							return true;
+						}),
+					);
+					// 다중품목 판단: 마스터 공정의 DISTINCT batch_id
+					const uniqueBatches: string[] = [];
+					for (const p of masters) {
+						const bid = p.batch_id || "";
+						if (bid && !uniqueBatches.includes(bid)) {
+							uniqueBatches.push(bid);
+						}
+					}
+					const currentBid = procData?.batch_id || "";
+					const isMultiBatch = uniqueBatches.length > 1;
+					const bIdx = currentBid ? uniqueBatches.indexOf(currentBid) + 1 : 1;
+					const fetchedItemType = capturedItemType;
+					setBatchBadge({
+						isMulti: isMultiBatch,
+						index: Math.max(bIdx, 1),
+						total: Math.max(uniqueBatches.length, 1),
+						itemType: fetchedItemType,
+					});
+				} catch {
+					setProcessList([]);
+				}
+			}
+
+			// 7. Warehouses
+			try {
+				const whRes = await apiClient.get("/pop/production/warehouses");
+				setWarehouses(whRes.data?.data || []);
+			} catch {
+				setWarehouses([]);
+			}
+		} catch {
+			toast.error("공정 정보 조회 실패");
+		} finally {
+			setLoading(false);
+		}
+	}, [processId]);
+
+	useEffect(() => {
+		fetchProcess();
+	}, [fetchProcess]);
+
+	/* ---- Batch History ---- */
+	const loadHistory = useCallback(async () => {
+		setHistoryLoading(true);
+		try {
+			const res = await apiClient.get("/pop/production/result-history", {
+				params: { work_order_process_id: processId },
+			});
+			if (res.data?.success) {
+				setHistory(res.data.data || []);
+			}
+		} catch {
+			/* ignore */
+		} finally {
+			setHistoryLoading(false);
+		}
+	}, [processId]);
+
+	useEffect(() => {
+		loadHistory();
+	}, [loadHistory]);
+
+	/* ---- Timer tick for group timers ---- */
+	useEffect(() => {
+		const id = setInterval(() => setTick(Date.now()), 1000);
+		return () => clearInterval(id);
+	}, []);
+
+	/* ================================================================ */
+	/* Checklist Groups                                                  */
+	/* ================================================================ */
+
+	const groups = useMemo<ChecklistGroup[]>(() => {
+		const map = new Map<string, ChecklistGroup>();
+		for (const item of checklist) {
+			const key = item.source_work_item_id;
+			if (!map.has(key)) {
+				map.set(key, {
+					phase: item.work_phase,
+					title: item.item_title,
+					itemId: key,
+					representativeItemId: item.id,
+					sortOrder: parseInt(item.item_sort_order || "0", 10),
+					items: [],
+					completed: 0,
+					total: 0,
+					timerStarted: !!item.group_started_at,
+					timerCompleted: !!item.group_completed_at,
+					timerPaused: !!item.group_paused_at,
+					timerState: {
+						startedAt: item.group_started_at ?? null,
+						pausedAt: item.group_paused_at ?? null,
+						totalPausedTime: parseInt(item.group_total_paused_time || "0", 10),
+						completedAt: item.group_completed_at ?? null,
+					},
+				});
+			}
+			const g = map.get(key)!;
+			g.items.push(item);
+			g.total++;
+			if (item.status === "recorded" || item.status === "completed")
+				g.completed++;
+			// Update timer state (any row may have timer data)
+			if (item.group_started_at) {
+				g.timerStarted = true;
+				g.timerState.startedAt = item.group_started_at;
+			}
+			if (item.group_completed_at) {
+				g.timerCompleted = true;
+				g.timerState.completedAt = item.group_completed_at;
+			}
+			if (item.group_paused_at) {
+				g.timerPaused = true;
+				g.timerState.pausedAt = item.group_paused_at;
+			}
+			if (item.group_total_paused_time) {
+				g.timerState.totalPausedTime =
+					parseInt(item.group_total_paused_time, 10) || 0;
+			}
+		}
+
+		for (const g of map.values()) {
+			const sorted = [...g.items].sort(
+				(a, b) =>
+					parseInt(a.detail_sort_order || "0", 10) -
+					parseInt(b.detail_sort_order || "0", 10),
+			);
+			g.representativeItemId = sorted[0]?.id ?? g.representativeItemId;
+		}
+
+		return Array.from(map.values()).sort(
+			(a, b) =>
+				(PHASE_ORDER[a.phase] ?? 9) - (PHASE_ORDER[b.phase] ?? 9) ||
+				a.sortOrder - b.sortOrder,
+		);
+	}, [checklist]);
+
+	const groupsByPhase = useMemo(() => {
+		const result: Record<string, ChecklistGroup[]> = {};
+		for (const g of groups) {
+			if (!result[g.phase]) result[g.phase] = [];
+			result[g.phase].push(g);
+		}
+		return result;
+	}, [groups]);
+
+	const availablePhases = useMemo(() => {
+		const phases: string[] = [];
+		if (groupsByPhase["PRE"]?.length) phases.push("PRE");
+		if (groupsByPhase["IN"]?.length) phases.push("IN");
+		if (groupsByPhase["POST"]?.length) phases.push("POST");
+		return phases;
+	}, [groupsByPhase]);
+
+	// 각 phase의 필수 항목이 모두 값 입력/선택(recorded) 되었는지
+	const requiredMetByPhase = useMemo<Record<string, boolean>>(() => {
+		const out: Record<string, boolean> = { PRE: true, IN: true, POST: true };
+		for (const phase of ["PRE", "IN", "POST"]) {
+			const required = checklist.filter(
+				(i) => i.work_phase === phase && i.is_required === "Y",
+			);
+			out[phase] = required.every(
+				(i) =>
+					i.status === "recorded" ||
+					i.status === "completed" ||
+					(i.result_value !== null &&
+						i.result_value !== undefined &&
+						i.result_value !== ""),
+			);
+		}
+		return out;
+	}, [checklist]);
+
+	const canAccessPhase = useCallback(
+		(phase: string): boolean => {
+			if (phase === "PRE") return true;
+			if (phase === "IN") return requiredMetByPhase.PRE;
+			if (phase === "POST")
+				return requiredMetByPhase.PRE && requiredMetByPhase.IN;
+			return true;
+		},
+		[requiredMetByPhase],
+	);
+
+	// Phase(PRE/IN/POST) 단위 타이머 상태 — 각 phase 의 첫 그룹 첫 item 을 대표 row 로 사용
+	type PhaseTimerState = {
+		startedAt: string | null;
+		pausedAt: string | null;
+		totalPausedTime: number;
+		completedAt: string | null;
+		representativeItemId: string;
+		status: "idle" | "running" | "paused" | "completed";
+	};
+	const phaseTimerMap = useMemo<Record<string, PhaseTimerState>>(() => {
+		const result: Record<string, PhaseTimerState> = {};
+		for (const phase of ["PRE", "IN", "POST"]) {
+			const phaseGroups = groupsByPhase[phase] || [];
+			if (phaseGroups.length === 0) continue;
+			const repId = phaseGroups[0].representativeItemId;
+			const repItem = checklist.find((i) => i.id === repId);
+			if (!repItem) continue;
+			const startedAt = repItem.group_started_at ?? null;
+			const pausedAt = repItem.group_paused_at ?? null;
+			const completedAt = repItem.group_completed_at ?? null;
+			result[phase] = {
+				startedAt,
+				pausedAt,
+				completedAt,
+				totalPausedTime: parseInt(
+					repItem.group_total_paused_time || "0",
+					10,
+				),
+				representativeItemId: repId,
+				status: completedAt
+					? "completed"
+					: pausedAt
+						? "paused"
+						: startedAt
+							? "running"
+							: "idle",
+			};
+		}
+		return result;
+	}, [groupsByPhase, checklist]);
+
+	// Auto-select first group
+	useEffect(() => {
+		if (groups.length > 0 && !selectedGroupId) {
+			setSelectedGroupId(groups[0].itemId);
+		}
+	}, [groups, selectedGroupId]);
+
+	const selectedGroup = useMemo(
+		() => groups.find((g) => g.itemId === selectedGroupId) || null,
+		[groups, selectedGroupId],
+	);
+
+	const currentItems = useMemo(
+		() =>
+			selectedGroup?.items.sort(
+				(a, b) =>
+					parseInt(a.detail_sort_order || "0", 10) -
+					parseInt(b.detail_sort_order || "0", 10),
+			) || [],
+		[selectedGroup],
+	);
+
+	/* ================================================================ */
+	/* Timer Handlers                                                    */
+	/* ================================================================ */
+
+	const timerStatus: TimerStatus = (() => {
+		if (!process) return "idle";
+		if (process.status === "completed") return "completed";
+		if (process.paused_at) return "paused";
+		if (process.started_at) return "running";
+		return "idle";
+	})();
+
+	const handleTimerAction = async (
+		action: "start" | "pause" | "resume" | "complete",
+	) => {
+		// 낙관적 업데이트: UI 즉시 반영
+		setProcess((prev) => {
+			if (!prev) return prev;
+			const now = new Date().toISOString();
+			if (action === "start")
+				return {
+					...prev,
+					status: "in_progress",
+					started_at: now,
+					paused_at: null,
+				};
+			if (action === "pause") return { ...prev, paused_at: now };
+			if (action === "resume") {
+				const pausedSec = prev.paused_at
+					? Math.floor((Date.now() - new Date(prev.paused_at).getTime()) / 1000)
+					: 0;
+				return {
+					...prev,
+					paused_at: null,
+					total_paused_time: prev.total_paused_time + pausedSec,
+				};
+			}
+			if (action === "complete")
+				return {
+					...prev,
+					status: "completed",
+					completed_at: now,
+					paused_at: null,
+				};
+			return prev;
+		});
+
+		// API 백그라운드 호출
+		try {
+			const body: Record<string, unknown> = {
+				work_order_process_id: processId,
+				action,
+			};
+			if (action === "complete") {
+				body.good_qty = process?.good_qty || "0";
+				body.defect_qty = process?.defect_qty || "0";
+			}
+			await apiClient.post("/pop/production/timer", body);
+			// 서버 데이터로 동기화 (조용히)
+			fetchProcess();
+		} catch (error: unknown) {
+			const err = error as { response?: { data?: { message?: string } } };
+			toast.error(err.response?.data?.message || "타이머 오류");
+			fetchProcess(); // 실패 시 서버 상태로 복원
+		}
+	};
+
+	/* ---- Phase Timer (PRE/IN/POST 단위 — phase 내 모든 row 에 동일값 기록) ---- */
+	const handlePhaseTimerAction = (
+		action: "start" | "pause" | "resume" | "complete",
+		phase: string,
+	) => {
+		if (!phaseTimerMap[phase]) return;
+
+		const now = new Date().toISOString();
+		setChecklist((prev) =>
+			prev.map((item) => {
+				if (item.work_phase !== phase) return item;
+				if (action === "start")
+					return { ...item, group_started_at: now, group_paused_at: null };
+				if (action === "pause") return { ...item, group_paused_at: now };
+				if (action === "resume") {
+					const pausedSec = item.group_paused_at
+						? Math.floor(
+								(Date.now() - new Date(item.group_paused_at).getTime()) / 1000,
+							)
+						: 0;
+					const prev_total =
+						parseInt(item.group_total_paused_time || "0", 10) || 0;
+					return {
+						...item,
+						group_paused_at: null,
+						group_total_paused_time: String(prev_total + pausedSec),
+					};
+				}
+				if (action === "complete")
+					return { ...item, group_completed_at: now, group_paused_at: null };
+				return item;
+			}),
+		);
+
+		apiClient
+			.post("/pop/production/group-timer", {
+				phase,
+				work_order_process_id: processId,
+				action,
+			})
+			.catch(() => {
+				fetchProcess();
+			});
+	};
+
+	// 입력 영역 사용자 상호작용 시 해당 phase 가 idle 이면 자동 시작
+	const handlePhaseAutoStart = useCallback(
+		(phase: string) => {
+			const ts = phaseTimerMap[phase];
+			if (ts && ts.status === "idle") {
+				handlePhaseTimerAction("start", phase);
+			}
+		},
+		// handlePhaseTimerAction 은 클로저로 phaseTimerMap 참조하므로 의존성 동일
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[phaseTimerMap],
+	);
+
+	/* ================================================================ */
+	/* Checklist Save                                                    */
+	/* ================================================================ */
+
+	const handleChecklistSave = async (
+		itemId: string,
+		resultValue: string,
+		isPassed: string | null,
+	) => {
+		try {
+			const now = new Date().toISOString();
+			await apiClient.post("/pop/execute-action", {
+				tasks: [
+					{
+						type: "data-update",
+						targetTable: "process_work_result",
+						targetColumn: "result_value",
+						operationType: "assign",
+						valueSource: "fixed",
+						fixedValue: resultValue,
+						lookupMode: "manual",
+						manualItemField: "id",
+						manualPkColumn: "id",
+					},
+					{
+						type: "data-update",
+						targetTable: "process_work_result",
+						targetColumn: "status",
+						operationType: "assign",
+						valueSource: "fixed",
+						fixedValue: "recorded",
+						lookupMode: "manual",
+						manualItemField: "id",
+						manualPkColumn: "id",
+					},
+					...(isPassed !== null
+						? [
+								{
+									type: "data-update",
+									targetTable: "process_work_result",
+									targetColumn: "is_passed",
+									operationType: "assign",
+									valueSource: "fixed",
+									fixedValue: isPassed,
+									lookupMode: "manual",
+									manualItemField: "id",
+									manualPkColumn: "id",
+								},
+							]
+						: []),
+					{
+						type: "data-update",
+						targetTable: "process_work_result",
+						targetColumn: "recorded_at",
+						operationType: "assign",
+						valueSource: "fixed",
+						fixedValue: now,
+						lookupMode: "manual",
+						manualItemField: "id",
+						manualPkColumn: "id",
+					},
+				],
+				data: { items: [{ id: itemId }], fieldValues: {} },
+			});
+			// Update local state
+			setChecklist((prev) =>
+				prev.map((c) =>
+					c.id === itemId
+						? {
+								...c,
+								result_value: resultValue,
+								is_passed: isPassed,
+								status: "recorded",
+								recorded_at: now,
+							}
+						: c,
+				),
+			);
+		} catch {
+			toast.error("체크리스트 저장 실패");
+		}
+	};
+
+	/* ================================================================ */
+	/* Save Result (batch-cumulative)                                    */
+	/* ================================================================ */
+
+	const handleSaveResult = async () => {
+		if (productionQty <= 0) {
+			toast.warning("생산수량을 입력해주세요.");
+			return;
+		}
+		setSaving(true);
+		try {
+			const totalDefect = defectEntries.reduce(
+				(s, e) => s + parseInt(e.qty, 10),
+				0,
+			);
+			const res = await apiClient.post("/pop/production/save-result", {
+				work_order_process_id: processId,
+				production_qty: String(productionQty),
+				good_qty: String(productionQty - totalDefect),
+				defect_qty: String(totalDefect),
+				defect_detail: defectEntries.length > 0 ? defectEntries : undefined,
+				result_note: resultNote || undefined,
+			});
+			if (res.data?.success) {
+				const d = res.data.data;
+				setProcess((prev) => {
+					if (!prev) return prev;
+					return { ...prev, ...d };
+				});
+				setProductionQty(0);
+				setDefectEntries([]);
+				setResultNote("");
+				loadHistory();
+				if (d?.status === "completed") {
+					toast.success("모든 수량이 완료되어 자동 확정되었습니다.");
+				} else {
+					toast.success("실적이 저장되었습니다.");
+				}
+			} else {
+				toast.error(res.data?.message || "저장 실패");
+			}
+		} catch (error: unknown) {
+			const err = error as { response?: { data?: { message?: string } } };
+			toast.error(err.response?.data?.message || "실적 저장 중 오류");
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	/* ---- Confirm Result ---- */
+	const handleConfirmResult = () => {
+		askConfirm(
+			"실적을 확정하시겠습니까?\n확정 후에는 추가 등록이 불가합니다.",
+			async () => {
+				setSaving(true);
+				try {
+					const res = await apiClient.post("/pop/production/confirm-result", {
+						work_order_process_id: processId,
+					});
+					if (res.data?.success) {
+						await fetchProcess();
+						toast.success("실적이 확정되었습니다.");
+					} else {
+						toast.error(res.data?.message || "확정 실패");
+					}
+				} catch (error: unknown) {
+					const err = error as { response?: { data?: { message?: string } } };
+					toast.error(err.response?.data?.message || "확정 중 오류");
+				} finally {
+					setSaving(false);
+				}
+			},
+			{ title: "실적 확정", confirmText: "확정", variant: "success" },
+		);
+	};
+
+	/* ================================================================ */
+	/* Inventory Inbound                                                 */
+	/* ================================================================ */
+
+	const fetchLocations = useCallback(async (warehouseId: string) => {
+		if (!warehouseId) {
+			setWarehouseLocations([]);
+			return;
+		}
+		try {
+			const res = await apiClient.get(
+				`/pop/production/warehouse-locations/${warehouseId}`,
+			);
+			setWarehouseLocations(res.data?.data || []);
+		} catch {
+			setWarehouseLocations([]);
+		}
+	}, []);
+
+	const handleInbound = () => {
+		if (!selectedWarehouse) {
+			toast.warning("창고를 선택해주세요.");
+			return;
+		}
+		askConfirm(
+			"생산입고를 진행하시겠습니까?",
+			async () => {
+				setSaving(true);
+				try {
+					const wh = warehouses.find((w) => w.id === selectedWarehouse);
+					const warehouseCode = wh?.warehouse_code || selectedWarehouse;
+					const res = await apiClient.post(
+						"/pop/production/inventory-inbound",
+						{
+							work_order_process_id: processId,
+							warehouse_code: warehouseCode,
+							location_code: selectedLocation || undefined,
+						},
+					);
+					if (res.data?.success) {
+						setInboundDone(true);
+						toast.success(`재고 입고 완료: ${res.data.data?.qty || 0}개`);
+					} else {
+						toast.error(res.data?.message || "입고 실패");
+					}
+				} catch (error: unknown) {
+					const err = error as {
+						response?: { data?: { message?: string }; status?: number };
+					};
+					const msg = err.response?.data?.message;
+					if (err.response?.status === 409) {
+						setInboundDone(true);
+						toast.info(msg || "이미 입고 완료");
+					} else {
+						toast.error(msg || "입고 중 오류");
+					}
+				} finally {
+					setSaving(false);
+				}
+			},
+			{ title: "생산 입고", confirmText: "입고", variant: "primary" },
+		);
+	};
+
+	/* ================================================================ */
+	/* Computed Values                                                    */
+	/* ================================================================ */
+
+	const totalDefectQty = defectEntries.reduce(
+		(s, e) => s + parseInt(e.qty, 10),
+		0,
+	);
+	const goodQtyThisBatch = productionQty - totalDefectQty;
+	const inputQty = process?.input_qty ?? 0;
+	const totalProduced = process?.total_production_qty ?? 0;
+	const accumulatedGood = process?.good_qty ?? 0;
+	const accumulatedDefect = process?.defect_qty ?? 0;
+	const remaining = Math.max(0, inputQty - totalProduced);
+	const isCompleted = process?.status === "completed";
+	const isConfirmed = process?.result_status === "confirmed";
+	const hasChecklist = checklist.length > 0;
+
+	useEffect(() => {
+		if (!onInfoChange) return;
+		if (!process) {
+			onInfoChange(null);
+			return;
+		}
+		onInfoChange({
+			planQty: process.plan_qty ?? 0,
+			inputQty,
+			status: process.status,
+			isCompleted,
+		});
+	}, [onInfoChange, process, inputQty, isCompleted]);
+
+	/* ================================================================ */
+	/* Loading / Error                                                   */
+	/* ================================================================ */
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center py-20">
+				<div className="flex flex-col items-center gap-3">
+					<div className="w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full animate-spin" />
+					<span className="text-sm text-gray-400">공정 정보 로딩중...</span>
+				</div>
+			</div>
+		);
+	}
+
+	if (!process) {
+		return (
+			<div className="flex flex-col items-center justify-center py-20 gap-3">
+				<p className="text-gray-400">공정을 찾을 수 없습니다</p>
+				<button
+					onClick={() => router.back()}
+					className="px-4 py-2 rounded-xl bg-gray-100 text-gray-700 text-sm font-semibold active:scale-95 transition-all"
+				>
+					뒤로가기
+				</button>
+			</div>
+		);
+	}
+
+	/* ================================================================ */
+	/* Render                                                            */
+	/* ================================================================ */
+
+	return (
+		<div
+			className="flex flex-col flex-1 min-h-0"
+			style={{ backgroundColor: DESIGN.bg.page }}
+		>
+			{/* ============================================================ */}
+			{/* Info Bar (Dark Header)                                        */}
+			{/* ============================================================ */}
+			<div
+				className="shrink-0 px-4 sm:px-6 py-3"
+				style={{ backgroundColor: DESIGN.bg.infoBar }}
+			>
+				<div className="flex items-center gap-3 sm:gap-6">
+					<div className="flex flex-wrap items-center gap-x-4 gap-y-2 sm:gap-x-8 sm:gap-y-2 flex-1 min-w-0">
+						{wiInfo && (
+							<div className="flex items-center gap-1.5 shrink-0">
+								<span className="text-white/40 text-sm">작업지시</span>
+								<span className="text-white font-medium text-base">
+									{wiInfo.work_instruction_no}
+								</span>
+							</div>
+						)}
+						{wiInfo && (
+							<div className="flex items-center gap-1.5 shrink-0">
+								<span className="text-white/40 text-sm">품목</span>
+								<span className="text-white font-medium text-base">
+									{wiInfo.item_name}
+								</span>
+							</div>
+						)}
+						{false && batchBadge && (
+							<div className="flex items-center gap-1.5 shrink-0">
+								{batchBadge?.isMulti ? (
+									<span className="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-0.5 rounded-full">
+										다중 {batchBadge?.index}/{batchBadge?.total}{batchBadge?.itemType ? ` · ${batchBadge?.itemType}` : ""}
+									</span>
+								) : (
+									<span className="bg-gray-100 text-gray-600 text-xs font-bold px-2 py-0.5 rounded-full">
+										단일{batchBadge?.itemType ? ` · ${batchBadge?.itemType}` : ""}
+									</span>
+								)}
+							</div>
+						)}
+						<div className="flex items-center gap-1.5 shrink-0">
+							<span className="text-white/40 text-sm">공정</span>
+							<span className="text-white font-medium text-base">
+								{process.seq_no ? `${process.seq_no}. ` : ""}
+								{process.process_name || "공정"}
+							</span>
+						</div>
+						{!hideInlineStatus && (
+							<div className="flex items-center gap-1.5 shrink-0">
+								<span className="text-white/40 text-sm">지시</span>
+								<span className="text-white font-medium text-base">
+									{process.plan_qty.toLocaleString()}
+								</span>
+							</div>
+						)}
+						{!hideInlineStatus && (
+							<div className="flex items-center gap-1.5 shrink-0">
+								<span className="text-amber-400/80 text-sm">접수</span>
+								<span className="text-amber-300 font-bold text-lg">
+									{inputQty.toLocaleString()}
+								</span>
+							</div>
+						)}
+					</div>
+					{batchBadge && (
+						<div className="flex items-center gap-1.5 shrink-0">
+							{batchBadge.isMulti ? (
+								<span className="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-0.5 rounded-full">
+									다중 {batchBadge.index}/{batchBadge.total}{batchBadge.itemType ? ` · ${batchBadge.itemType}` : ""}
+								</span>
+							) : (
+								<span className="bg-gray-100 text-gray-600 text-xs font-bold px-2 py-0.5 rounded-full">
+									단일{batchBadge.itemType ? ` · ${batchBadge.itemType}` : ""}
+								</span>
+							)}
+						</div>
+					)}
+					{/* Status badge */}
+					{!hideInlineStatus && (
+						<span
+							className={`text-[13px] font-bold px-2.5 py-1 rounded-full shrink-0 ${
+								isCompleted
+									? "bg-green-500/20 text-green-300"
+									: process.status === "in_progress"
+										? "bg-blue-500/20 text-blue-300"
+										: "bg-white/10 text-white/50"
+							}`}
+						>
+							{isCompleted
+								? "완료"
+								: process.status === "in_progress"
+									? "진행중"
+									: process.status}
+						</span>
+					)}
+					{process.is_rework && (
+						<span className="text-[13px] font-bold px-2 py-0.5 rounded-full bg-amber-500/20 text-amber-300 shrink-0">
+							재작업
+						</span>
+					)}
+				</div>
+			</div>
+
+			{/* ============================================================ */}
+			{/* Main Layout: Sidebar(left) + Timer+Content(right)             */}
+			{/* ============================================================ */}
+			{(hasChecklist || !isConfirmed || (isLastProcess && !inboundDone)) && (
+				<div className="flex flex-1 gap-0 min-h-0 overflow-hidden">
+					{/* ========================================================= */}
+					{/* Left Sidebar (always visible)                              */}
+					{/* ========================================================= */}
+					<div
+						className="shrink-0 flex flex-col overflow-y-auto border-r border-gray-200 bg-gray-50"
+						style={{
+							width: DESIGN.sidebar.width,
+							scrollbarWidth: "thin",
+						}}
+					>
+						<div className="py-3">
+							{/* Checklist groups by phase */}
+							{availablePhases.map((phase) => {
+								const phaseGroups = groupsByPhase[phase] || [];
+								const phaseDone = phaseGroups.reduce(
+									(s, g) => s + g.completed,
+									0,
+								);
+								const phaseTotal = phaseGroups.reduce((s, g) => s + g.total, 0);
+								const allDone = phaseDone >= phaseTotal && phaseTotal > 0;
+								const phaseLocked = !canAccessPhase(phase);
+
+								return (
+									<div key={phase} className="mb-4">
+										<div className="flex items-center gap-2 px-3 mb-1.5">
+											<div
+												className={`w-4 h-4 rounded-full flex items-center justify-center ${
+													allDone
+														? "bg-green-500"
+														: phaseLocked
+															? "bg-gray-200"
+															: "bg-gray-300"
+												}`}
+											>
+												<svg
+													className="w-2.5 h-2.5 text-white"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={3}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M4.5 12.75l6 6 9-13.5"
+													/>
+												</svg>
+											</div>
+											<span
+												className={`text-base font-bold uppercase tracking-wider ${
+													phaseLocked ? "text-gray-300" : "text-gray-400"
+												}`}
+											>
+												{PHASE_LABELS[phase] || phase}
+											</span>
+											<span
+												className={`ml-auto text-[13px] font-semibold ${
+													allDone
+														? "text-green-500"
+														: phaseLocked
+															? "text-gray-300"
+															: "text-gray-300"
+												}`}
+											>
+												{phaseDone}/{phaseTotal}
+											</span>
+											{phaseLocked && (
+												<svg
+													className="w-3.5 h-3.5 text-gray-300"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+													/>
+												</svg>
+											)}
+										</div>
+										{phaseGroups.map((g) => {
+											const isSelected =
+												selectedGroupId === g.itemId &&
+												activeSection === "checklist";
+											const isDone = g.completed >= g.total && g.total > 0;
+											const isLocked = phaseLocked;
+											return (
+												<button
+													key={g.itemId}
+													disabled={isLocked}
+													onClick={() => {
+														if (isLocked) return;
+														setSelectedGroupId(g.itemId);
+														setActiveSection("checklist");
+														contentRef.current?.scrollTo({
+															top: 0,
+															behavior: "smooth",
+														});
+													}}
+													className={`w-full flex items-center gap-3 mx-2 mb-1.5 px-3 py-3 rounded-xl text-left transition-all ${
+														isLocked
+															? "bg-gray-50 border border-gray-200 opacity-60 cursor-not-allowed"
+															: isSelected
+																? "bg-blue-50 border-2 border-blue-400 shadow-sm"
+																: isDone
+																	? "bg-green-50/50 border border-green-200"
+																	: "bg-white border border-gray-200 hover:border-blue-300 hover:shadow-sm"
+													}`}
+													style={{ width: "calc(100% - 16px)" }}
+												>
+													<span
+														className={`w-3 h-3 rounded-full shrink-0 ${
+															isLocked
+																? "bg-gray-300"
+																: isDone
+																	? "bg-green-500"
+																	: g.timerStarted
+																		? "bg-blue-500 animate-pulse"
+																		: isSelected
+																			? "bg-blue-500"
+																			: "bg-gray-300"
+														}`}
+													/>
+													<span
+														className={`text-sm flex-1 ${
+															isLocked
+																? "text-gray-400 font-medium"
+																: isSelected
+																	? "font-bold text-blue-800"
+																	: isDone
+																		? "text-green-700 font-medium"
+																		: "text-gray-700 font-medium"
+														}`}
+													>
+														{g.title}
+													</span>
+													<span
+														className={`text-xs font-bold px-2 py-0.5 rounded-full ${
+															isDone
+																? "bg-green-100 text-green-600"
+																: isSelected
+																	? "bg-blue-100 text-blue-600"
+																	: "bg-gray-100 text-gray-400"
+														}`}
+													>
+														{g.completed}/{g.total}
+													</span>
+												</button>
+											);
+										})}
+									</div>
+								);
+							})}
+
+							{/* Result section link */}
+							{!isConfirmed && (
+								<div className="mb-4">
+									{/* 자재 투입 (설정으로 제어) */}
+									{peSettings.materialInput && (
+										<button
+											onClick={() => {
+												setActiveSection("material");
+												contentRef.current?.scrollTo({
+													top: 0,
+													behavior: "smooth",
+												});
+											}}
+											className={`w-full flex items-center gap-3 mx-2 mb-1.5 px-3 py-3 rounded-xl text-left transition-all ${
+												activeSection === "material"
+													? "bg-blue-50 border-2 border-blue-400 shadow-sm"
+													: "bg-white border border-gray-200 hover:border-blue-300 hover:shadow-sm"
+											}`}
+											style={{ width: "calc(100% - 16px)" }}
+										>
+											<span className="text-base">📦</span>
+											<span
+												className={`text-sm font-medium ${activeSection === "material" ? "font-bold text-blue-800" : "text-gray-700"}`}
+											>
+												자재 투입
+											</span>
+										</button>
+									)}
+
+									<button
+										onClick={() => {
+											setActiveSection("result");
+											contentRef.current?.scrollTo({
+												top: 0,
+												behavior: "smooth",
+											});
+										}}
+										className={`w-full flex items-center gap-3 mx-2 mb-1.5 px-3 py-3 rounded-xl text-left transition-all ${
+											activeSection === "result"
+												? "bg-blue-50 border-2 border-blue-400 shadow-sm"
+												: "bg-white border border-gray-200 hover:border-blue-300 hover:shadow-sm"
+										}`}
+										style={{ width: "calc(100% - 16px)" }}
+									>
+										<span className="text-base">📋</span>
+										<span
+											className={`text-sm font-medium ${activeSection === "result" ? "font-bold text-blue-800" : "text-gray-700"}`}
+										>
+											실적 입력
+										</span>
+									</button>
+								</div>
+							)}
+
+							{/* Inventory section link */}
+							{isLastProcess && (
+								<div>
+									<button
+										onClick={() => {
+											setActiveSection("inventory");
+											contentRef.current?.scrollTo({
+												top: 0,
+												behavior: "smooth",
+											});
+										}}
+										className={`w-full flex items-center gap-3 mx-2 mb-1.5 px-3 py-3 rounded-xl text-left transition-all ${
+											activeSection === "inventory"
+												? "bg-blue-50 border-2 border-blue-400 shadow-sm"
+												: inboundDone
+													? "bg-green-50 border border-green-300"
+													: "bg-white border border-gray-200 hover:border-blue-300 hover:shadow-sm"
+										}`}
+										style={{ width: "calc(100% - 16px)" }}
+									>
+										<span className="text-base">{inboundDone ? "✅" : "🏭"}</span>
+										<span
+											className={`text-sm font-medium ${
+												activeSection === "inventory"
+													? "font-bold text-blue-800"
+													: inboundDone
+														? "text-green-700 font-bold"
+														: "text-gray-700"
+											}`}
+										>
+											재고 입고{inboundDone ? " 완료" : ""}
+										</span>
+									</button>
+								</div>
+							)}
+						</div>
+					</div>
+
+					{/* ========================================================= */}
+					{/* Mobile Tabs (hidden — sidebar always visible)                */}
+					{/* ========================================================= */}
+					<div className="hidden shrink-0 flex overflow-x-auto bg-white border-b border-gray-200 px-2 gap-1">
+						{availablePhases.map((phase) => {
+							const phaseGroups = groupsByPhase[phase] || [];
+							const phaseDone = phaseGroups.reduce(
+								(s, g) => s + g.completed,
+								0,
+							);
+							const phaseTotal = phaseGroups.reduce((s, g) => s + g.total, 0);
+							const isActive =
+								activeSection === "checklist" &&
+								selectedGroup &&
+								selectedGroup.phase === phase;
+							return (
+								<button
+									key={phase}
+									onClick={() => {
+										const grps = groupsByPhase[phase];
+										if (grps && grps.length > 0) {
+											setSelectedGroupId(grps[0].itemId);
+											setActiveSection("checklist");
+										}
+									}}
+									className={`shrink-0 px-3 py-2 text-xs font-semibold rounded-t-lg transition-all ${
+										isActive
+											? "bg-blue-50 text-blue-700 border-b-2 border-blue-500"
+											: "text-gray-500"
+									}`}
+								>
+									{PHASE_LABELS[phase]} ({phaseDone}/{phaseTotal})
+								</button>
+							);
+						})}
+						{!isConfirmed && (
+							<button
+								onClick={() => setActiveSection("result")}
+								className={`shrink-0 px-3 py-2 text-xs font-semibold rounded-t-lg transition-all ${
+									activeSection === "result"
+										? "bg-amber-50 text-amber-700 border-b-2 border-amber-500"
+										: "text-gray-500"
+								}`}
+							>
+								실적
+							</button>
+						)}
+						{isLastProcess && (
+							<button
+								onClick={() => setActiveSection("inventory")}
+								className={`shrink-0 px-3 py-2 text-xs font-semibold rounded-t-lg transition-all ${
+									activeSection === "inventory"
+										? "bg-green-50 text-green-700 border-b-2 border-green-500"
+										: "text-gray-500"
+								}`}
+							>
+								입고 {inboundDone && "✓"}
+							</button>
+						)}
+					</div>
+
+					{/* ========================================================= */}
+					{/* Right Column: Timer + Content                              */}
+					{/* ========================================================= */}
+					<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+						{/* Group Summary Bar (제목 + 중앙 그룹 타이머 + 완료 배지) */}
+						<div className="shrink-0 px-4 py-3 border-b bg-white border-gray-100">
+							<div className="flex items-center gap-4">
+								<span className="text-base font-bold text-gray-900 truncate">
+									{selectedGroup?.title || "그룹 선택"}
+								</span>
+								<div className="flex-1 flex items-center justify-center gap-2">
+									{selectedGroup &&
+										activeSection === "checklist" &&
+										!isCompleted &&
+										(() => {
+											const ts = phaseTimerMap[selectedGroup.phase];
+											if (!ts) return null;
+											const status = ts.status;
+											const elapsedSec = calcGroupWorkSeconds(ts);
+											const ph = selectedGroup.phase;
+											return (
+												<>
+													{status !== "idle" && (
+														<span
+															className={`text-sm font-bold tracking-wider px-3 py-1 rounded-full ${
+																status === "completed"
+																	? "bg-green-100 text-green-700"
+																	: status === "paused"
+																		? "bg-amber-100 text-amber-700"
+																		: "bg-blue-100 text-blue-700"
+															}`}
+															style={{
+																fontVariantNumeric: "tabular-nums",
+																fontFamily: "monospace",
+															}}
+														>
+															{formatTime(elapsedSec)}
+														</span>
+													)}
+													{status === "idle" && (
+														<button
+															onClick={() =>
+																handlePhaseTimerAction("start", ph)
+															}
+															className="h-9 px-4 rounded-lg text-sm font-bold text-white active:scale-95 transition-all"
+															style={{
+																background:
+																	"linear-gradient(135deg,#3b82f6,#1d4ed8)",
+															}}
+														>
+															시작
+														</button>
+													)}
+													{status === "running" && (
+														<>
+															<button
+																onClick={() =>
+																	handlePhaseTimerAction("pause", ph)
+																}
+																className="h-9 px-4 rounded-lg text-sm font-bold text-white active:scale-95 transition-all"
+																style={{
+																	background:
+																		"linear-gradient(135deg,#f59e0b,#d97706)",
+																}}
+															>
+																정지
+															</button>
+															<button
+																onClick={() =>
+																	handlePhaseTimerAction("complete", ph)
+																}
+																className="h-9 px-4 rounded-lg text-sm font-bold text-white active:scale-95 transition-all"
+																style={{
+																	background:
+																		"linear-gradient(135deg,#10b981,#059669)",
+																}}
+															>
+																종료
+															</button>
+														</>
+													)}
+													{status === "paused" && (
+														<>
+															<button
+																onClick={() =>
+																	handlePhaseTimerAction("resume", ph)
+																}
+																className="h-9 px-4 rounded-lg text-sm font-bold text-white active:scale-95 transition-all"
+																style={{
+																	background:
+																		"linear-gradient(135deg,#3b82f6,#1d4ed8)",
+																}}
+															>
+																재개
+															</button>
+															<button
+																onClick={() =>
+																	handlePhaseTimerAction("complete", ph)
+																}
+																className="h-9 px-4 rounded-lg text-sm font-bold text-white active:scale-95 transition-all"
+																style={{
+																	background:
+																		"linear-gradient(135deg,#10b981,#059669)",
+																}}
+															>
+																종료
+															</button>
+														</>
+													)}
+													{status === "completed" && (
+														<span className="text-xs font-semibold text-green-600 px-2 py-1 bg-green-50 rounded-lg">
+															완료
+														</span>
+													)}
+												</>
+											);
+										})()}
+								</div>
+								{selectedGroup && (
+									<span
+										className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
+											selectedGroup.completed >= selectedGroup.total &&
+											selectedGroup.total > 0
+												? "bg-green-100 text-green-700"
+												: "bg-gray-100 text-gray-500"
+										}`}
+									>
+										완료 {selectedGroup.completed}/{selectedGroup.total}
+									</span>
+								)}
+							</div>
+						</div>
+
+						{/* Content Area (scrollable) */}
+						<div ref={contentRef} className="flex-1 overflow-y-auto p-4 flex flex-col">
+							{/* Checklist Content */}
+							{activeSection === "checklist" && selectedGroup && (
+								<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+									{/* Mobile group navigation (sidebar not visible) */}
+									<div className="md:hidden flex overflow-x-auto gap-1.5 mb-4 pb-1">
+										{(groupsByPhase[selectedGroup.phase] || []).map((g) => {
+											const isSelected = g.itemId === selectedGroupId;
+											const isDone = g.completed >= g.total && g.total > 0;
+											return (
+												<button
+													key={g.itemId}
+													onClick={() => setSelectedGroupId(g.itemId)}
+													className={`shrink-0 px-3 py-1.5 rounded-lg text-xs font-medium border transition-all ${
+														isSelected
+															? "border-blue-400 bg-blue-50 text-blue-700"
+															: isDone
+																? "border-green-200 bg-green-50 text-green-600"
+																: "border-gray-200 bg-white text-gray-600"
+													}`}
+												>
+													{g.title} ({g.completed}/{g.total})
+												</button>
+											);
+										})}
+									</div>
+
+									{/* Checklist items */}
+									<div className="flex flex-col gap-2">
+										{currentItems.map((item) => (
+											<ChecklistRow
+												key={item.id}
+												item={item}
+												disabled={isCompleted || false}
+												onSave={handleChecklistSave}
+												showPhoto={peSettings.groupPhotoEnabled}
+												onUserInteract={() =>
+													handlePhaseAutoStart(selectedGroup.phase)
+												}
+											/>
+										))}
+										{currentItems.length === 0 && (
+											<p className="text-sm text-gray-400 text-center py-6">
+												체크리스트 항목이 없습니다
+											</p>
+										)}
+									</div>
+								</div>
+							)}
+
+							{/* ====== Material Input Content (설정) ====== */}
+							{activeSection === "material" && peSettings.materialInput && (
+								<MaterialInputSection processId={processId} />
+							)}
+
+							{/* ====== Result Content ====== */}
+							{activeSection === "result" && !isConfirmed && (
+								<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5 flex flex-col flex-1">
+									<p className="text-sm font-bold text-gray-900 mb-4 flex items-center gap-2">
+										<svg
+											className="w-4 h-4 text-blue-500"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth={2}
+											viewBox="0 0 24 24"
+										>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+											/>
+										</svg>
+										이번 차수 실적 입력
+										<span className="ml-auto flex items-center gap-3 text-xs font-normal text-black">
+											{totalProduced > 0 && (
+												<span>
+													누적: {totalProduced}/{inputQty} ({Math.round((totalProduced / inputQty) * 100)}%)
+												</span>
+											)}
+											{remaining > 0 && (
+												<span>잔여: {remaining.toLocaleString()}</span>
+											)}
+										</span>
+									</p>
+
+									<div className="grid grid-cols-3 gap-3">
+										{/* Production Qty */}
+										<button
+											onClick={() => setProdQtyModal(true)}
+											className="flex flex-col items-center justify-center gap-2 p-3.5 rounded-xl border-2 border-gray-200 bg-gray-50 hover:border-blue-300 active:scale-[0.98] transition-all"
+										>
+											<span className="text-sm text-gray-500">생산수량</span>
+											<span
+												className="text-xl font-bold text-gray-900"
+												style={{ fontVariantNumeric: "tabular-nums" }}
+											>
+												{productionQty > 0
+													? `${productionQty.toLocaleString()} EA`
+													: "0 EA"}
+											</span>
+										</button>
+
+										{/* Good Qty (자동 계산) */}
+										<div className="flex flex-col items-center justify-center gap-2 p-3.5 rounded-xl border-2 border-green-200 bg-green-50">
+											<span className="text-sm text-green-600 font-medium">
+												양품
+											</span>
+											<span
+												className="text-xl font-bold text-green-700"
+												style={{ fontVariantNumeric: "tabular-nums" }}
+											>
+												{goodQtyThisBatch > 0
+													? `${goodQtyThisBatch.toLocaleString()} EA`
+													: "0 EA"}
+											</span>
+										</div>
+
+										{/* Defect */}
+										<button
+											onClick={() => setDefectModal(true)}
+											className="flex flex-col items-center justify-center gap-2 p-3.5 rounded-xl border-2 border-gray-200 bg-gray-50 hover:border-red-300 active:scale-[0.98] transition-all"
+										>
+											<span className="text-sm text-gray-500">불량</span>
+											<span
+												className={`text-xl font-bold ${totalDefectQty > 0 ? "text-red-600" : "text-gray-400"}`}
+												style={{ fontVariantNumeric: "tabular-nums" }}
+											>
+												{totalDefectQty > 0
+													? `${totalDefectQty.toLocaleString()} EA`
+													: "0 EA"}
+											</span>
+										</button>
+
+										{/* Defect entries summary */}
+										{defectEntries.length > 0 && (
+											<div className="flex flex-wrap gap-1.5">
+												{defectEntries.map((de) => (
+													<span
+														key={de.defect_code}
+														className="text-xs px-2 py-1 rounded-full bg-red-50 text-red-600 border border-red-200 font-medium"
+													>
+														{de.defect_name}: {de.qty}개 (
+														{de.disposition === "scrap"
+															? "폐기"
+															: de.disposition === "rework"
+																? "재작업"
+																: "특채"}
+														)
+													</span>
+												))}
+											</div>
+										)}
+
+									</div>
+
+									{/* 비고 + 사진 첨부 (2-col 2-row) */}
+									<div className="grid grid-cols-2 gap-3 mt-3 flex-1">
+										{/* 비고 */}
+										<textarea
+											value={resultNote}
+											onChange={(e) => setResultNote(e.target.value)}
+											placeholder="비고 (선택)"
+											className="w-full h-full min-h-[88px] px-3 py-2.5 rounded-xl border-2 border-gray-200 text-sm text-gray-700 resize-none focus:outline-none focus:border-blue-300"
+											rows={2}
+										/>
+
+										{/* 사진 첨부 (설정으로 제어) */}
+										{peSettings.photoUpload && (
+											<label className="flex flex-col items-center justify-center gap-2 min-h-[88px] px-4 py-3 rounded-xl bg-gray-50 border-2 border-dashed border-gray-200 text-gray-500 text-sm font-medium cursor-pointer hover:bg-gray-100 active:scale-[0.98] transition-all">
+												<svg
+													className="w-5 h-5"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={2}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
+													/>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
+													/>
+												</svg>
+												📷 사진 첨부 (선택)
+												<input
+													type="file"
+													accept="image/*"
+													capture="environment"
+													className="hidden"
+													onChange={async (e) => {
+														const file = e.target.files?.[0];
+														if (!file) return;
+														const formData = new FormData();
+														formData.append("file", file);
+														formData.append(
+															"targetTable",
+															"work_order_process",
+														);
+														formData.append("targetObjid", processId);
+														try {
+															const res = await fetch("/api/files", {
+																method: "POST",
+																headers: {
+																	Authorization: `Bearer ${localStorage.getItem("accessToken") || localStorage.getItem("token") || ""}`,
+																},
+																body: formData,
+															});
+															res.ok ? toast.success("사진 첨부 완료") : toast.error("첨부 실패");
+														} catch {
+															toast.error("첨부 오류");
+														}
+														e.target.value = "";
+													}}
+												/>
+											</label>
+										)}
+									</div>
+
+									{/* Save + Confirm buttons */}
+									<div className="flex flex-col gap-3 mt-4">
+										<button
+											onClick={handleSaveResult}
+											disabled={productionQty <= 0 || saving}
+											className="w-full h-12 rounded-xl text-base font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+											style={{
+												background:
+													productionQty <= 0 || saving
+														? "#9ca3af"
+														: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)",
+											}}
+										>
+											{saving
+												? "저장중..."
+												: totalProduced + productionQty >= inputQty &&
+														inputQty > 0
+													? "작업 완료"
+													: "분할 완료"}
+										</button>
+
+										{/* 공정 확정 버튼 제거 (CEO 결정 2026-04-09): 작업 완료/분할 완료로 충분 */}
+									</div>
+
+									{/* Batch History */}
+									{history.length > 0 && (
+										<div className="mt-6">
+											<p className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">
+												등록 이력
+											</p>
+											<div className="overflow-x-auto">
+												<table className="w-full text-sm">
+													<thead>
+														<tr className="text-xs text-gray-400">
+															<th className="px-2 py-1.5 text-left font-medium">
+																차수
+															</th>
+															<th className="px-2 py-1.5 text-right font-medium">
+																생산
+															</th>
+															<th className="px-2 py-1.5 text-right font-medium">
+																양품
+															</th>
+															<th className="px-2 py-1.5 text-right font-medium">
+																불량
+															</th>
+															<th className="px-2 py-1.5 text-right font-medium">
+																누적
+															</th>
+															<th className="px-2 py-1.5 text-right font-medium">
+																시각
+															</th>
+														</tr>
+													</thead>
+													<tbody>
+														{[...history].reverse().map((h, i) => (
+															<tr
+																key={h.seq}
+																className="border-t border-gray-100"
+															>
+																<td className="px-2 py-2">
+																	<span
+																		className={`text-xs font-bold px-1.5 py-0.5 rounded ${i === 0 ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-600"}`}
+																	>
+																		#{h.seq}
+																	</span>
+																</td>
+																<td className="px-2 py-2 text-right font-semibold text-gray-900">
+																	+{h.batch_qty}
+																</td>
+																<td className="px-2 py-2 text-right text-green-600">
+																	+{h.batch_good}
+																</td>
+																<td className="px-2 py-2 text-right text-red-600">
+																	+{h.batch_defect}
+																</td>
+																<td className="px-2 py-2 text-right text-gray-500">
+																	{h.accumulated_total}
+																</td>
+																<td className="px-2 py-2 text-right text-gray-400 text-xs">
+																	{new Date(h.changed_at).toLocaleTimeString(
+																		"ko-KR",
+																		{ hour: "2-digit", minute: "2-digit" },
+																	)}
+																</td>
+															</tr>
+														))}
+													</tbody>
+												</table>
+											</div>
+										</div>
+									)}
+									{historyLoading && (
+										<div className="flex items-center gap-2 py-4 text-sm text-gray-400">
+											<div className="w-4 h-4 border-2 border-gray-300 border-t-transparent rounded-full animate-spin" />
+											불러오는 중...
+										</div>
+									)}
+								</div>
+							)}
+
+							{/* Confirmed badge */}
+							{activeSection === "result" && isConfirmed && (
+								<div className="bg-blue-50 border-2 border-blue-200 rounded-2xl p-6 text-center">
+									<div className="flex items-center justify-center gap-2 text-blue-700 font-bold text-lg">
+										<svg
+											className="w-6 h-6"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth={2.5}
+											viewBox="0 0 24 24"
+										>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z"
+											/>
+										</svg>
+										실적 확정 완료
+									</div>
+									<div className="flex items-center justify-center gap-4 mt-3 text-sm text-blue-600">
+										<span>양품: {accumulatedGood.toLocaleString()}</span>
+										<span>불량: {accumulatedDefect.toLocaleString()}</span>
+										<span>총: {totalProduced.toLocaleString()}</span>
+									</div>
+								</div>
+							)}
+
+							{/* ====== Inventory Content ====== */}
+							{activeSection === "inventory" && isLastProcess && (
+								<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+									<p className="text-sm font-bold text-green-700 mb-4 flex items-center gap-2">
+										<svg
+											className="w-4 h-4"
+											fill="none"
+											stroke="currentColor"
+											strokeWidth={2}
+											viewBox="0 0 24 24"
+										>
+											<path
+												strokeLinecap="round"
+												strokeLinejoin="round"
+												d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z"
+											/>
+										</svg>
+										생산입고 (마지막 공정)
+									</p>
+
+									{/* Current production summary */}
+									<div className="rounded-xl border border-gray-200 bg-gray-50 p-4 mb-4">
+										<div className="flex items-center gap-6">
+											<div className="flex flex-col items-center">
+												<span
+													className="text-2xl font-bold text-green-600"
+													style={{ fontVariantNumeric: "tabular-nums" }}
+												>
+													{accumulatedGood}
+												</span>
+												<span className="text-xs text-green-500 font-medium mt-0.5">
+													양품
+												</span>
+											</div>
+											<div className="h-8 w-px bg-gray-200" />
+											<div className="flex flex-col items-center">
+												<span
+													className="text-2xl font-bold text-red-600"
+													style={{ fontVariantNumeric: "tabular-nums" }}
+												>
+													{accumulatedDefect}
+												</span>
+												<span className="text-xs text-red-500 font-medium mt-0.5">
+													불량
+												</span>
+											</div>
+											<div className="h-8 w-px bg-gray-200" />
+											<div className="flex flex-col items-center">
+												<span
+													className="text-2xl font-bold text-gray-900"
+													style={{ fontVariantNumeric: "tabular-nums" }}
+												>
+													{totalProduced}
+												</span>
+												<span className="text-xs text-gray-400 font-medium mt-0.5">
+													총 생산
+												</span>
+											</div>
+										</div>
+									</div>
+
+									{!inboundDone ? (
+										accumulatedGood > 0 ? (
+											<div className="flex flex-col gap-3 mb-4">
+												{/* Warehouse selection */}
+												<div>
+													<label className="text-xs font-semibold text-gray-500 mb-1.5 block">
+														창고 선택
+													</label>
+													<div className="grid grid-cols-2 gap-2">
+														{warehouses.map((wh) => (
+															<button
+																key={wh.id}
+																onClick={() => {
+																	setSelectedWarehouse(wh.id);
+																	setSelectedLocation("");
+																	fetchLocations(wh.id);
+																}}
+																className={`p-3 rounded-xl text-sm font-medium border-2 active:scale-95 transition-all text-left ${
+																	selectedWarehouse === wh.id
+																		? "border-green-400 bg-green-50 text-green-700"
+																		: "border-gray-200 bg-white text-gray-700 hover:border-green-300"
+																}`}
+															>
+																{wh.warehouse_name}
+															</button>
+														))}
+													</div>
+												</div>
+
+												{/* Location selection */}
+												{warehouseLocations.length > 0 && (
+													<div>
+														<label className="text-xs font-semibold text-gray-500 mb-1.5 block">
+															위치 선택
+														</label>
+														<div className="grid grid-cols-3 gap-2">
+															{warehouseLocations.map((loc) => (
+																<button
+																	key={loc.id}
+																	onClick={() =>
+																		setSelectedLocation(loc.location_code)
+																	}
+																	className={`p-2.5 rounded-xl text-xs font-medium border-2 active:scale-95 transition-all ${
+																		selectedLocation === loc.location_code
+																			? "border-green-400 bg-green-50 text-green-700"
+																			: "border-gray-200 bg-white text-gray-600 hover:border-green-300"
+																	}`}
+																>
+																	{loc.location_name || loc.location_code}
+																</button>
+															))}
+														</div>
+													</div>
+												)}
+
+												{/* 포장 단위 (선택) */}
+												<div>
+													<label className="text-xs font-semibold text-gray-500 mb-1.5 block">
+														포장 단위 (선택)
+													</label>
+													<div className="grid grid-cols-3 gap-2">
+														{["낱개", "박스", "파렛트"].map((pkg) => (
+															<button
+																key={pkg}
+																onClick={() =>
+																	setPackageUnit((prev: string) =>
+																		prev === pkg ? "" : pkg,
+																	)
+																}
+																className={`p-2.5 rounded-xl text-sm font-medium border-2 active:scale-95 transition-all ${
+																	packageUnit === pkg
+																		? "border-blue-400 bg-blue-50 text-blue-700"
+																		: "border-gray-200 bg-white text-gray-600"
+																}`}
+															>
+																{pkg}
+															</button>
+														))}
+													</div>
+												</div>
+
+												{/* 사진 첨부 (선택) */}
+												<label className="flex items-center gap-2 px-4 py-3 rounded-xl bg-gray-50 border-2 border-dashed border-gray-200 text-gray-500 text-sm font-medium cursor-pointer hover:bg-gray-100">
+													📷 입고 사진 첨부 (선택)
+													<input
+														type="file"
+														accept="image/*"
+														capture="environment"
+														className="hidden"
+														onChange={async (e) => {
+															const file = e.target.files?.[0];
+															if (!file) return;
+															const formData = new FormData();
+															formData.append("file", file);
+															formData.append(
+																"targetTable",
+																"work_order_process",
+															);
+															formData.append("targetObjid", processId);
+															try {
+																const res = await fetch("/api/files", {
+																	method: "POST",
+																	headers: {
+																		Authorization: `Bearer ${localStorage.getItem("accessToken") || localStorage.getItem("token") || ""}`,
+																	},
+																	body: formData,
+																});
+																res.ok ? toast.success("사진 첨부 완료") : toast.error("첨부 실패");
+															} catch {
+																toast.error("첨부 오류");
+															}
+															e.target.value = "";
+														}}
+													/>
+												</label>
+
+												{/* Inbound button */}
+												<button
+													onClick={handleInbound}
+													disabled={!selectedWarehouse || saving}
+													className="w-full h-14 rounded-xl text-lg font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+													style={{
+														background:
+															!selectedWarehouse || saving
+																? "#9ca3af"
+																: "linear-gradient(135deg, #22c55e 0%, #15803d 100%)",
+													}}
+												>
+													{saving
+														? "처리중..."
+														: `생산입고 (양품 ${accumulatedGood}개)`}
+												</button>
+											</div>
+										) : (
+											<div className="flex flex-col items-center gap-3 py-8 text-amber-600">
+												<svg
+													className="w-10 h-10"
+													fill="none"
+													stroke="currentColor"
+													strokeWidth={1.5}
+													viewBox="0 0 24 24"
+												>
+													<path
+														strokeLinecap="round"
+														strokeLinejoin="round"
+														d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
+													/>
+												</svg>
+												<p className="text-sm font-semibold">
+													실적을 먼저 등록해주세요
+												</p>
+												<p className="text-xs text-amber-500">
+													양품 수량이 0개입니다
+												</p>
+											</div>
+										)
+									) : (
+										<div className="flex flex-col items-center gap-3 py-8 text-green-600">
+											<svg
+												className="w-12 h-12"
+												fill="none"
+												stroke="currentColor"
+												strokeWidth={2}
+												viewBox="0 0 24 24"
+											>
+												<path
+													strokeLinecap="round"
+													strokeLinejoin="round"
+													d="M4.5 12.75l6 6 9-13.5"
+												/>
+											</svg>
+											<p className="text-lg font-bold">재고 입고 완료</p>
+											<p className="text-sm text-green-500">
+												{accumulatedGood}개가 입고 처리되었습니다
+											</p>
+										</div>
+									)}
+								</div>
+							)}
+						</div>
+					</div>
+					{/* end Right Column */}
+				</div>
+			)}
+
+			{/* ============================================================ */}
+			{/* Footer Actions (완료/확정 상태일 때만 표시)                     */}
+			{/* ============================================================ */}
+			{(isCompleted || isConfirmed) && (
+				<div
+					className="shrink-0 border-t border-gray-200 bg-white px-4 flex items-center justify-between gap-3"
+					style={{ height: `${DESIGN.footer.height}px` }}
+				>
+					<div className="flex items-center justify-center w-full gap-2 text-green-600">
+						<svg
+							className="w-5 h-5"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2.5}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+						<span className="text-sm font-bold">
+							{isConfirmed ? "실적 확정 완료" : "공정 완료"}
+						</span>
+					</div>
+				</div>
+			)}
+
+			{/* ============================================================ */}
+			{/* Modals                                                        */}
+			{/* ============================================================ */}
+			<SimpleNumpadModal
+				open={prodQtyModal}
+				onClose={() => setProdQtyModal(false)}
+				onConfirm={(qty) => setProductionQty(qty)}
+				maxQty={remaining > 0 ? remaining : 99999}
+				title="생산수량 입력"
+				subtitle={`잔여: ${remaining.toLocaleString()} EA`}
+			/>
+
+			<DefectTypeModal
+				open={defectModal}
+				onClose={() => setDefectModal(false)}
+				onConfirm={setDefectEntries}
+				defectTypes={defectTypes}
+				maxQty={productionQty > 0 ? productionQty : 99999}
+				initialEntries={defectEntries}
+				processList={processList}
+			/>
+
+			<ConfirmModal
+				open={confirmModalState.open}
+				title={confirmModalState.title}
+				message={confirmModalState.message}
+				confirmText={confirmModalState.confirmText}
+				variant={confirmModalState.variant}
+				onConfirm={confirmModalState.onConfirm}
+				onCancel={() => setConfirmModalState((s) => ({ ...s, open: false }))}
+			/>
+		</div>
+	);
+}
+
+/* ================================================================== */
+/* Checklist Row Component                                             */
+/* ================================================================== */
+
+function ChecklistRow({
+	item,
+	disabled,
+	onSave,
+	showPhoto = true,
+	onUserInteract,
+}: {
+	item: ChecklistItem;
+	disabled: boolean;
+	onSave: (id: string, value: string, isPassed: string | null) => void;
+	showPhoto?: boolean;
+	onUserInteract?: () => void;
+}) {
+	const [localValue, setLocalValue] = useState(item.result_value || "");
+	const [isEditing, setIsEditing] = useState(false);
+	const isRecorded = item.status === "recorded" || item.status === "completed";
+	const isRequired = item.is_required === "Y";
+	// 입력 컨트롤 상호작용 시 호출 (phase 타이머 자동 시작 트리거)
+	const notify = () => onUserInteract?.();
+	// 저장된 카드 클릭 → 수정 모드 진입
+	const enterEdit = () => {
+		if (disabled || !isRecorded || isEditing) return;
+		setLocalValue(item.result_value || "");
+		setIsEditing(true);
+		notify();
+	};
+
+	// Inspection type: check limits
+	const detailType = item.detail_type || "";
+	// 판단기준(judgment_criteria) 우선 → 폴백으로 detail_type 매핑
+	const jc =
+		(item as ChecklistItem & { judgment_criteria?: string })
+			.judgment_criteria || "";
+	const isInspection =
+		jc === "CAT_JC_01" ||
+		detailType === "inspection" ||
+		detailType === "number" ||
+		detailType === "equip_condition" ||
+		detailType === "production_result" ||
+		detailType.startsWith("inspect");
+	const isCheckbox =
+		jc === "CAT_JC_03" ||
+		detailType === "checkbox" ||
+		detailType === "check" ||
+		detailType === "checklist" ||
+		detailType === "procedure" ||
+		detailType === "equip_inspection";
+	const isPlc = item.input_type === "plc" || detailType === "plc_data";
+	const hasLimits = !!(item.lower_limit || item.upper_limit);
+
+	const handleSave = () => {
+		if (!localValue.trim()) return;
+
+		let isPassed: string | null = null;
+		if (isInspection && hasLimits) {
+			const numVal = parseFloat(localValue);
+			const lower = item.lower_limit ? parseFloat(item.lower_limit) : -Infinity;
+			const upper = item.upper_limit ? parseFloat(item.upper_limit) : Infinity;
+			isPassed =
+				!isNaN(numVal) && numVal >= lower && numVal <= upper ? "Y" : "N";
+
+			if (isPassed === "N") {
+				const rangeStr = `${item.lower_limit || ""}~${item.upper_limit || ""}`;
+				toast.warning(
+					`기준 초과! 입력값: ${localValue} / 허용 범위: ${rangeStr} — 불합격으로 기록됩니다.`,
+				);
+			}
+		}
+
+		onSave(item.id, localValue, isPassed);
+		setIsEditing(false);
+	};
+
+	// Build range text
+	const rangeText = buildRangeText(item);
+
+	const canEdit = isRecorded && !isEditing && !disabled;
+	return (
+		<div
+			onClick={canEdit ? enterEdit : undefined}
+			className={`p-4 rounded-xl border-2 transition-all ${
+				isRecorded
+					? "border-green-200 bg-green-50/50"
+					: isRequired
+						? "border-amber-300 bg-amber-50/30"
+						: "border-gray-200 bg-gray-50/50"
+			} ${canEdit ? "cursor-pointer hover:border-green-400" : ""}`}
+		>
+			<div className="flex items-center justify-between mb-2">
+				<span className="text-base font-semibold text-gray-900 truncate flex-1">
+					{item.detail_label || item.detail_content || item.item_title}
+				</span>
+				<div className="flex items-center gap-2 shrink-0 ml-2">
+					{isRequired && !isRecorded && (
+						<span className="text-xs font-bold text-red-500 px-2 py-0.5 bg-red-50 rounded-full">
+							필수
+						</span>
+					)}
+					{isRecorded && (
+						<svg
+							className="w-5 h-5 text-green-500"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2.5}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M4.5 12.75l6 6 9-13.5"
+							/>
+						</svg>
+					)}
+				</div>
+			</div>
+
+			{/* Range/spec info */}
+			{rangeText && (
+				<div className="flex items-center gap-2 mb-2 text-sm text-gray-400">
+					📏 {rangeText}
+				</div>
+			)}
+
+			{/* Input area */}
+			{!disabled && (!isRecorded || isEditing) && (
+				<div className="flex items-center gap-2">
+					{isPlc ? (
+						<div className="w-full p-3 rounded-xl bg-blue-50 border border-blue-200">
+							<div className="flex items-center justify-between">
+								<span className="text-sm text-blue-600 font-medium">
+									📡 PLC 자동 연동
+								</span>
+								<span className="text-xs text-blue-400">설정 필요</span>
+							</div>
+							<p className="text-xs text-blue-400 mt-1">
+								POP 관리 설정에서 PLC 매핑을 설정하면 자동으로 값이 표시됩니다
+							</p>
+							<input
+								type="number"
+								value={localValue}
+								onChange={(e) => {
+									notify();
+									setLocalValue(e.target.value);
+								}}
+								onFocus={notify}
+								onKeyDown={(e) => e.key === "Enter" && handleSave()}
+								placeholder="수동 입력"
+								className="mt-2 w-full px-3 py-2 rounded-lg border border-blue-200 text-sm"
+							/>
+							{localValue && (
+								<button
+									onClick={() => {
+										notify();
+										handleSave();
+									}}
+									className="mt-2 w-full py-2 rounded-lg text-sm font-bold text-white bg-blue-500"
+								>
+									저장
+								</button>
+							)}
+						</div>
+					) : isCheckbox ? (
+						<div className="flex gap-3 w-full">
+							<button
+								onClick={() => {
+									notify();
+									onSave(item.id, "Y", "Y");
+									setIsEditing(false);
+								}}
+								className="flex-1 py-3 rounded-xl text-base font-bold bg-green-100 text-green-700 border-2 border-green-300 hover:bg-green-200 active:scale-95 transition-all"
+							>
+								✓ 합격
+							</button>
+							<button
+								onClick={() => {
+									notify();
+									onSave(item.id, "N", "N");
+									setIsEditing(false);
+								}}
+								className="flex-1 py-3 rounded-xl text-base font-bold bg-red-100 text-red-700 border-2 border-red-300 hover:bg-red-200 active:scale-95 transition-all"
+							>
+								✗ 불합격
+							</button>
+						</div>
+					) : (
+						<>
+							<input
+								type={isInspection ? "number" : "text"}
+								value={localValue}
+								onChange={(e) => {
+									notify();
+									setLocalValue(e.target.value);
+								}}
+								onFocus={notify}
+								onKeyDown={(e) => e.key === "Enter" && handleSave()}
+								placeholder={isInspection ? "측정값 입력" : "값 입력"}
+								className="flex-1 px-4 py-3 rounded-xl border-2 border-gray-200 text-base font-medium focus:outline-none focus:border-blue-400"
+								style={{ minHeight: 48 }}
+							/>
+							<button
+								onClick={() => {
+									notify();
+									handleSave();
+								}}
+								disabled={!localValue.trim()}
+								className="px-5 py-3 rounded-xl text-base font-bold text-white active:scale-95 transition-all disabled:opacity-40"
+								style={{
+									minHeight: DESIGN.button.touchMin,
+									background: !localValue.trim()
+										? "#9ca3af"
+										: "linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)",
+								}}
+							>
+								저장
+							</button>
+						</>
+					)}
+				</div>
+			)}
+
+			{/* Recorded value display */}
+			{isRecorded && !isEditing && item.result_value && (
+				<div className="flex items-center gap-2 text-sm mt-1">
+					<span className="text-gray-500">결과:</span>
+					<span
+						className={`font-bold ${
+							item.is_passed === "Y"
+								? "text-green-600"
+								: item.is_passed === "N"
+									? "text-red-600"
+									: "text-gray-700"
+						}`}
+					>
+						{item.result_value === "Y"
+							? "합격"
+							: item.result_value === "N"
+								? "불합격"
+								: item.result_value}
+					</span>
+					{item.is_passed === "Y" && (
+						<span className="text-xs px-2 py-0.5 rounded-full bg-green-100 text-green-700 font-bold">
+							PASS
+						</span>
+					)}
+					{item.is_passed === "N" && (
+						<span className="text-xs px-2 py-0.5 rounded-full bg-red-100 text-red-700 font-bold">
+							FAIL
+						</span>
+					)}
+				</div>
+			)}
+
+			{/* 사진 업로드 (설정으로 제어) */}
+			{!disabled && showPhoto && (
+				<div className="mt-2 flex items-center gap-2">
+					<label className="flex items-center gap-2 px-3 py-2 rounded-lg bg-gray-100 text-gray-600 text-sm font-medium cursor-pointer hover:bg-gray-200 active:scale-95 transition-all">
+						<svg
+							className="w-4 h-4"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={2}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
+							/>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
+							/>
+						</svg>
+						사진
+						<input
+							type="file"
+							accept="image/*"
+							capture="environment"
+							className="hidden"
+							onChange={async (e) => {
+								const file = e.target.files?.[0];
+								if (!file) return;
+								const formData = new FormData();
+								formData.append("file", file);
+								formData.append("targetTable", "process_work_result");
+								formData.append("targetObjid", item.id);
+								try {
+									const res = await fetch("/api/files", {
+										method: "POST",
+										headers: {
+											Authorization: `Bearer ${localStorage.getItem("accessToken") || localStorage.getItem("token") || ""}`,
+										},
+										body: formData,
+									});
+									if (res.ok) {
+										toast.success("사진 업로드 완료");
+									} else {
+										toast.error("업로드 실패");
+									}
+								} catch {
+									toast.error("업로드 중 오류");
+								}
+								e.target.value = "";
+							}}
+						/>
+					</label>
+				</div>
+			)}
+		</div>
+	);
+}
+
+/* ================================================================== */
+/* Helper: Build range text for checklist items                        */
+/* ================================================================== */
+
+function buildRangeText(item: ChecklistItem): string {
+	const parts: string[] = [];
+	const lower = item.lower_limit;
+	const upper = item.upper_limit;
+	const unit = item.unit || "";
+
+	if (lower && upper) {
+		parts.push(`${lower}~${upper}${unit ? " " + unit : ""}`);
+	} else if (lower) {
+		parts.push(`하한: ${lower}${unit ? " " + unit : ""}`);
+	} else if (upper) {
+		parts.push(`상한: ${upper}${unit ? " " + unit : ""}`);
+	} else if (item.spec_value) {
+		parts.push(`기준: ${item.spec_value}`);
+	}
+
+	if (unit && !lower && !upper) {
+		parts.push(`단위: ${unit}`);
+	}
+
+	return parts.join(" | ");
+}
+
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/WorkOrderList.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/WorkOrderList.tsx
new file mode 100644
index 00000000..a1018575
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/WorkOrderList.tsx
@@ -0,0 +1,1587 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { useAuth } from "@/hooks/useAuth";
+import { apiClient } from "@/lib/api/client";
+import { dataApi } from "@/lib/api/data";
+import { ConfirmModal } from "../common/ConfirmModal";
+import { COLOR_MAP } from "../common/theme";
+import { AcceptProcessModal } from "./AcceptProcessModal";
+import { ProcessDetailModal, type ProcessStep } from "./ProcessDetailModal";
+import {
+	isReworkProcess,
+	type WorkOrderProcessView,
+} from "./types";
+
+const POP_NEW_PROD_STATE_KEY = "pop-new-production-process-state";
+
+/** 같은 batch_id를 가진 마스터 공정(virtual split 제외)만 반환 */
+function getSameBatchMasters(
+	processes: WorkOrderProcess[],
+	batchId: string | null | undefined,
+): WorkOrderProcess[] {
+	return processes.filter(
+		(p) =>
+			!p.parent_process_id &&
+			((!batchId && !p.batch_id) || (batchId && p.batch_id === batchId)),
+	);
+}
+
+/* 텍스트가 넘칠 때 자동 슬라이드 (마키) */
+function AutoScrollText({
+	children,
+	className,
+}: {
+	children: React.ReactNode;
+	className?: string;
+}) {
+	const outerRef = useRef<HTMLDivElement>(null);
+	const innerRef = useRef<HTMLSpanElement>(null);
+	const [needsScroll, setNeedsScroll] = useState(false);
+
+	useEffect(() => {
+		const check = () => {
+			if (outerRef.current && innerRef.current) {
+				setNeedsScroll(
+					innerRef.current.scrollWidth > outerRef.current.clientWidth + 2,
+				);
+			}
+		};
+		check();
+		window.addEventListener("resize", check);
+		return () => window.removeEventListener("resize", check);
+	}, [children]);
+
+	return (
+		<div
+			ref={outerRef}
+			className={`overflow-hidden whitespace-nowrap ${className || ""}`}
+		>
+			<span
+				ref={innerRef}
+				className="inline-block"
+				style={
+					needsScroll
+						? { animation: "cardMarquee 8s linear infinite" }
+						: undefined
+				}
+			>
+				{children}
+				{needsScroll && <span className="inline-block w-12" />}
+				{needsScroll && children}
+			</span>
+			{needsScroll && (
+				<style>{`@keyframes cardMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }`}</style>
+			)}
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface WorkInstruction {
+	id: string;
+	work_instruction_no: string;
+	item_id: string;
+	item_name: string;
+	item_code: string;
+	item_number: string;
+	qty: number;
+	completed_qty: number;
+	status: string;
+	progress_status: string;
+	routing: string | null;
+	start_date: string;
+	end_date: string;
+	equipment_id: string;
+	work_team: string;
+	worker: string;
+}
+
+/** Phase D: 정규화 View 재export (기존 타입명 유지) */
+type WorkOrderProcess = WorkOrderProcessView;
+
+interface ProcessMng {
+	id: string;
+	process_code: string;
+	process_name: string;
+}
+
+interface EquipmentMng {
+	id: string;
+	equipment_code: string;
+	equipment_name: string;
+}
+
+type TabFilter = "all" | "acceptable" | "in_progress" | "waiting" | "completed";
+
+/* ------------------------------------------------------------------ */
+/* Constants                                                           */
+/* ------------------------------------------------------------------ */
+
+const TABS: {
+	key: TabFilter;
+	label: string;
+	color: string;
+	bgActive: string;
+}[] = [
+	{
+		key: "acceptable",
+		label: "접수가능",
+		color: "text-amber-700",
+		bgActive: "bg-amber-50",
+	},
+	{
+		key: "in_progress",
+		label: "진행중",
+		color: "text-blue-700",
+		bgActive: "bg-blue-50",
+	},
+	{
+		key: "waiting",
+		label: "대기",
+		color: "text-gray-500",
+		bgActive: "bg-gray-50",
+	},
+	{
+		key: "completed",
+		label: "완료",
+		color: "text-green-700",
+		bgActive: "bg-green-50",
+	},
+];
+
+const STATUS_BADGE: Record<
+	string,
+	{ bg: string; text: string; label: string; dot: string; prefix: string }
+> = {
+	acceptable: {
+		bg: "bg-amber-100",
+		text: "text-amber-700",
+		label: "접수가능",
+		dot: "bg-amber-500",
+		prefix: "",
+	},
+	waiting: {
+		bg: "bg-gray-100",
+		text: "text-gray-500",
+		label: "대기",
+		dot: "bg-gray-400",
+		prefix: "",
+	},
+	in_progress: {
+		bg: "bg-blue-100",
+		text: "text-blue-700",
+		label: "진행중",
+		dot: "bg-blue-500",
+		prefix: "\u25CF ",
+	},
+	completed: {
+		bg: "bg-green-100",
+		text: "text-green-700",
+		label: "완료",
+		dot: "bg-green-500",
+		prefix: "\u2713 ",
+	},
+};
+
+const BORDER_LEFT_COLOR: Record<string, string> = {
+	acceptable: "border-l-amber-400",
+	in_progress: "border-l-blue-500",
+	waiting: "border-l-gray-300",
+	completed: "border-l-green-500",
+};
+
+const COLS_GRID_CLASS: Record<number, string> = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+};
+
+/* ------------------------------------------------------------------ */
+/* Compressed Process Steps (center-aligned)                           */
+/* ------------------------------------------------------------------ */
+
+function CompressedProcessSteps({
+	processes,
+	currentSeqNo,
+	status,
+	onClick,
+	batchId,
+	allProcesses,
+}: {
+	processes: WorkOrderProcess[];
+	currentSeqNo: number;
+	status: string;
+	onClick?: () => void;
+	batchId?: string;
+	allProcesses?: WorkOrderProcess[];
+}) {
+	const sorted = getSameBatchMasters(processes, batchId).sort(
+		(a, b) => a.seq_no - b.seq_no,
+	);
+
+	if (sorted.length === 0) return null;
+
+	const currentIdx = sorted.findIndex((p) => p.seq_no === currentSeqNo);
+	if (currentIdx < 0) return null;
+
+	// For completed status: batch_id 기반 진행률 표시
+	if (status === "completed") {
+		// 각 마스터 seq에 최소 1건 confirmed accepted_result가 있으면 완료로 판정
+		let maxCompletedSeq = currentSeqNo; // 최소한 현재 seq까지는 완료
+
+		if (allProcesses) {
+			for (const m of sorted) {
+				const hasConfirmed = allProcesses.some(
+					(p) =>
+						p.parent_process_id === m.id &&
+						p.result_status === "confirmed",
+				);
+				if (hasConfirmed && m.seq_no > maxCompletedSeq) {
+					maxCompletedSeq = m.seq_no;
+				}
+			}
+		}
+
+		const completedCount = sorted.filter(
+			(p) => p.seq_no <= maxCompletedSeq,
+		).length;
+		const allDone = completedCount === sorted.length;
+
+		return (
+			<div
+				className="flex items-center justify-center gap-0.5 mb-3 py-2 px-3 bg-green-50 rounded-xl cursor-pointer hover:bg-green-100 transition"
+				onClick={(e) => {
+					e.stopPropagation();
+					onClick?.();
+				}}
+			>
+				{sorted.map((proc, idx) => {
+					const seqNum = proc.seq_no;
+					const isDone = seqNum <= maxCompletedSeq;
+					return (
+						<React.Fragment key={proc.id}>
+							{idx > 0 && (
+								<span
+									className={`w-3 h-0.5 ${isDone ? "bg-green-400" : "bg-gray-300"} shrink-0`}
+								/>
+							)}
+							<span
+								className={`rounded-full flex items-center justify-center shrink-0 text-[9px] font-bold ${
+									isDone
+										? "bg-green-500 text-white"
+										: "bg-gray-200 text-gray-400"
+								}`}
+								style={{
+									width: idx === currentIdx ? 28 : 24,
+									height: idx === currentIdx ? 28 : 24,
+									fontSize: idx === currentIdx ? 10 : 9,
+								}}
+							>
+								{isDone ? "\u2713" : idx + 1}
+							</span>
+						</React.Fragment>
+					);
+				})}
+				<span className="text-[10px] text-green-600 font-bold ml-2">
+					{allDone ? "전체 완료" : `${completedCount}/${sorted.length} 완료`}
+				</span>
+			</div>
+		);
+	}
+
+	// Compressed view: show prev, current, next + collapsed counts
+	const prevIdx = currentIdx - 1;
+	const nextIdx = currentIdx + 1;
+	const beforeCollapsed = prevIdx > 0 ? prevIdx : 0;
+	const afterCollapsed =
+		sorted.length - 1 - (nextIdx < sorted.length ? nextIdx : currentIdx);
+
+	// 공정명 축약 (4글자 초과 시 잘라내기)
+	const shortName = (name: string) => {
+		if (!name) return "?";
+		const clean = name.replace(/^제조반_/, "");
+		return clean.length > 4 ? clean.slice(0, 4) : clean;
+	};
+
+	const stepLabel = (proc: WorkOrderProcess, isCurrent: boolean) => {
+		const isCompleted = proc.status === "completed";
+		const isInProgress =
+			proc.status === "in_progress" || proc.status === "acceptable";
+
+		if (isCurrent) {
+			const bgColor = isInProgress
+				? "bg-blue-500"
+				: isCompleted
+					? "bg-green-500"
+					: "bg-amber-400";
+			const ringColor = isInProgress
+				? "ring-blue-200"
+				: isCompleted
+					? "ring-green-200"
+					: "ring-amber-200";
+			return (
+				<span
+					className={`rounded-lg ${bgColor} text-white ring-2 ${ringColor} flex items-center justify-center shrink-0 font-bold px-3 ${isInProgress ? "animate-pulse" : ""}`}
+					style={{ height: 36, fontSize: 14, whiteSpace: "nowrap" }}
+				>
+					{shortName(proc.process_name)}
+				</span>
+			);
+		}
+
+		if (isCompleted) {
+			return (
+				<span
+					className="rounded-lg bg-green-100 text-green-700 border border-green-400 flex items-center justify-center shrink-0 font-bold px-2.5"
+					style={{ height: 32, fontSize: 13, whiteSpace: "nowrap" }}
+				>
+					{shortName(proc.process_name)}
+				</span>
+			);
+		}
+
+		return (
+			<span
+				className="rounded-lg bg-gray-100 text-gray-500 border border-gray-300 flex items-center justify-center shrink-0 font-bold px-2.5"
+				style={{ height: 32, fontSize: 13, whiteSpace: "nowrap" }}
+			>
+				{shortName(proc.process_name)}
+			</span>
+		);
+	};
+
+	const lineBetween = (
+		fromProc: WorkOrderProcess,
+		toProc: WorkOrderProcess,
+	) => {
+		const fromDone = fromProc.status === "completed";
+		const toDone = toProc.status === "completed";
+		const color = fromDone || toDone ? "bg-green-400" : "bg-gray-200";
+		return <span className={`w-3 h-0.5 ${color} shrink-0`} />;
+	};
+
+	// 모든 상태에서 클릭 가능 (공정 상세 모달)
+	const isClickable = !!onClick;
+
+	return (
+		<div
+			className={`flex items-center justify-center gap-1 mb-3 py-3 px-4 bg-gray-50 rounded-xl transition ${
+				isClickable ? "cursor-pointer hover:bg-gray-100" : ""
+			}`}
+			onClick={
+				isClickable
+					? (e) => {
+							e.stopPropagation();
+							onClick?.();
+						}
+					: undefined
+			}
+		>
+			{/* Collapsed before */}
+			{beforeCollapsed > 0 && (
+				<>
+					<span
+						className="rounded-lg bg-green-100 text-green-700 border border-green-300 flex items-center justify-center shrink-0 text-xs font-bold px-2"
+						style={{ height: 32 }}
+					>
+						+{beforeCollapsed}
+					</span>
+					<span className="w-3 h-0.5 bg-green-400 shrink-0" />
+				</>
+			)}
+
+			{/* Previous step */}
+			{prevIdx >= 0 && (
+				<>
+					{stepLabel(sorted[prevIdx], false)}
+					<span className="w-3 h-0.5 bg-gray-300 shrink-0" />
+				</>
+			)}
+
+			{/* Current step */}
+			{stepLabel(sorted[currentIdx], true)}
+
+			{/* Next step */}
+			{nextIdx < sorted.length && (
+				<>
+					<span className="w-3 h-0.5 bg-gray-300 shrink-0" />
+					{stepLabel(sorted[nextIdx], false)}
+				</>
+			)}
+
+			{/* Collapsed after */}
+			{afterCollapsed > 0 && (
+				<>
+					<span className="w-3 h-0.5 bg-gray-200 shrink-0" />
+					<span
+						className="rounded-lg bg-gray-200 text-gray-500 flex items-center justify-center shrink-0 text-xs font-bold px-2"
+						style={{ height: 32 }}
+					>
+						+{afterCollapsed}
+					</span>
+				</>
+			)}
+
+			{/* Chevron for clickable */}
+			{isClickable && (
+				<svg
+					className="w-4 h-4 text-gray-400 ml-2 shrink-0"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth={2}
+					viewBox="0 0 24 24"
+				>
+					<path
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						d="M8.25 4.5l7.5 7.5-7.5 7.5"
+					/>
+				</svg>
+			)}
+		</div>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* Card sub-components by status                                       */
+/* ------------------------------------------------------------------ */
+
+/** Acceptable card body */
+function AcceptableCardBody({
+	planQty,
+	prevGoodQty,
+	availableQty,
+	reworkAvailableQty,
+}: {
+	planQty: number;
+	prevGoodQty: number | null;
+	availableQty: number;
+	reworkAvailableQty?: number;
+}) {
+	return (
+		<>
+			<div className="grid grid-cols-3 gap-2 mb-3">
+				<div className="text-center bg-gray-50 rounded-xl py-4">
+					<div className="text-sm text-gray-400">지시수량</div>
+					<div className="text-3xl font-extrabold text-gray-900">
+						{planQty.toLocaleString()}
+					</div>
+				</div>
+				<div className="text-center bg-emerald-50 rounded-xl py-4">
+					<div className="text-sm text-emerald-500">전공정양품</div>
+					<div className="text-3xl font-extrabold text-emerald-600">
+						{prevGoodQty !== null ? prevGoodQty.toLocaleString() : "-"}
+					</div>
+				</div>
+				<div className="text-center bg-blue-50 rounded-xl py-4">
+					<div className="text-sm text-blue-500">접수가능</div>
+					<div
+						className="font-extrabold text-blue-600"
+						style={{ fontSize: 28 }}
+					>
+						{availableQty.toLocaleString()}
+					</div>
+				</div>
+			</div>
+			{reworkAvailableQty && reworkAvailableQty > 0 ? (
+				reworkAvailableQty >= availableQty ? null : (
+					<div className="flex items-center gap-2 mb-3 px-3 py-2 bg-amber-50 border border-amber-200 rounded-xl">
+						<span className="text-xs font-bold text-white bg-amber-500 px-2 py-0.5 rounded-full">
+							리워크
+						</span>
+						<span className="text-xs text-amber-700 font-medium">
+							재작업 물량 {reworkAvailableQty}개 포함
+						</span>
+					</div>
+				)
+			) : null}
+		</>
+	);
+}
+
+/** In-progress card body */
+function InProgressCardBody({
+	inputQty,
+	goodQty,
+	defectQty,
+	remainQty,
+	progressPct,
+	additionalAvailable,
+}: {
+	inputQty: number;
+	goodQty: number;
+	defectQty: number;
+	remainQty: number;
+	progressPct: number;
+	additionalAvailable: number;
+}) {
+	return (
+		<>
+			{/* Progress bar */}
+			<div className="flex items-center gap-2 mb-3">
+				<div className="h-2.5 flex-1 bg-gray-100 rounded-full overflow-hidden">
+					<div
+						className="h-full bg-blue-500 rounded-full transition-all"
+						style={{ width: `${progressPct}%` }}
+					/>
+				</div>
+				<span className="text-xs font-bold text-blue-600">{progressPct}%</span>
+			</div>
+
+			{/* 4-col qty grid */}
+			<div className="grid grid-cols-4 gap-1.5 mb-2">
+				<div className="text-center bg-blue-50 rounded-xl py-3">
+					<div className="text-sm text-blue-500">접수</div>
+					<div className="text-3xl font-extrabold text-blue-700">
+						{inputQty.toLocaleString()}
+					</div>
+				</div>
+				<div className="text-center bg-emerald-50 rounded-xl py-3">
+					<div className="text-sm text-emerald-500">양품</div>
+					<div className="text-3xl font-extrabold text-emerald-700">
+						{goodQty.toLocaleString()}
+					</div>
+				</div>
+				<div className="text-center bg-red-50 rounded-xl py-3">
+					<div className="text-sm text-red-500">불량</div>
+					<div className="text-3xl font-extrabold text-red-700">
+						{defectQty.toLocaleString()}
+					</div>
+				</div>
+				<div className="text-center bg-amber-50 rounded-xl py-3">
+					<div className="text-sm text-amber-500">잔여</div>
+					<div className="text-3xl font-extrabold text-amber-700">
+						{remainQty.toLocaleString()}
+					</div>
+				</div>
+			</div>
+			{additionalAvailable > 0 && (
+				<div className="text-right text-sm text-violet-600 font-semibold">
+					추가접수가능 {additionalAvailable.toLocaleString()}
+				</div>
+			)}
+		</>
+	);
+}
+
+/** Waiting card body */
+function WaitingCardBody({
+	planQty,
+	prevProcessName,
+	prevProgressPct,
+	currentProcessName,
+	currentSeqNo,
+}: {
+	planQty: number;
+	prevProcessName: string | null;
+	prevProgressPct: number | null;
+	currentProcessName: string;
+	currentSeqNo: number;
+}) {
+	return (
+		<>
+			<div className="grid grid-cols-3 gap-2 mb-3">
+				<div className="text-center bg-gray-50 rounded-xl py-3">
+					<div className="text-sm text-gray-400">지시수량</div>
+					<div className="text-3xl font-extrabold text-gray-900">
+						{planQty.toLocaleString()}
+					</div>
+				</div>
+				<div className="text-center bg-blue-50 rounded-xl py-3">
+					<div className="text-sm text-blue-500">이전공정</div>
+					<div className="text-base font-bold text-blue-600 truncate">
+						{prevProcessName || "-"}
+					</div>
+					{prevProgressPct !== null && (
+						<div className="text-xs text-blue-400 mt-1">
+							진행중 ({prevProgressPct}%)
+						</div>
+					)}
+				</div>
+				<div className="text-center bg-gray-50 rounded-xl py-3">
+					<div className="text-sm text-gray-400">현재공정</div>
+					<div className="text-base font-bold text-gray-600 truncate">
+						{currentProcessName}
+					</div>
+					<div className="text-xs text-gray-400 mt-1">
+						{currentSeqNo}번째 공정
+					</div>
+				</div>
+			</div>
+			<div className="text-center text-sm text-gray-400">
+				이전공정 완료 시 접수 가능합니다
+			</div>
+		</>
+	);
+}
+
+/** Completed card body */
+function CompletedCardBody({
+	goodQty,
+	defectQty,
+	planQty,
+	inputQty,
+}: {
+	goodQty: number;
+	defectQty: number;
+	planQty: number;
+	inputQty: number;
+}) {
+	return (
+		<div className="grid grid-cols-4 gap-1.5">
+			<div className="text-center bg-emerald-50 rounded-xl py-3">
+				<div className="text-sm text-emerald-500">양품</div>
+				<div className="text-3xl font-extrabold text-emerald-700">
+					{goodQty.toLocaleString()}
+				</div>
+			</div>
+			<div className="text-center bg-red-50 rounded-xl py-3">
+				<div className="text-sm text-red-500">불량</div>
+				<div className="text-3xl font-extrabold text-red-700">
+					{defectQty.toLocaleString()}
+				</div>
+			</div>
+			<div className="text-center bg-gray-50 rounded-xl py-3">
+				<div className="text-sm text-gray-400">지시</div>
+				<div className="text-3xl font-extrabold text-gray-600">
+					{planQty.toLocaleString()}
+				</div>
+			</div>
+			<div className="text-center bg-blue-50 rounded-xl py-3">
+				<div className="text-sm text-blue-500">접수</div>
+				<div className="text-3xl font-extrabold text-blue-700">
+					{inputQty.toLocaleString()}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/** Rework card body */
+function ReworkCardBody({
+	reworkQty,
+	availableQty,
+	originProcessName,
+	originProcessCode,
+	originDefectQty,
+	reworkRound,
+}: {
+	reworkQty: number;
+	availableQty: number;
+	originProcessName: string;
+	originProcessCode: string;
+	originDefectQty: number;
+	reworkRound: number;
+}) {
+	return (
+		<>
+			{/* Rework info summary */}
+			<div className="mb-3 p-2.5 bg-orange-50 border border-orange-200 rounded-xl">
+				<div className="flex items-center gap-1.5 text-sm font-semibold text-orange-700">
+					<span>{originProcessName || originProcessCode}</span>
+					<span className="text-orange-400">&rarr;</span>
+					<span>불량 {originDefectQty}개</span>
+					<span className="text-orange-400">&rarr;</span>
+					<span className="bg-orange-500 text-white text-xs px-1.5 py-0.5 rounded font-bold">
+						재작업 {reworkRound}회차
+					</span>
+				</div>
+			</div>
+
+			<div className="grid grid-cols-2 gap-3 mb-3">
+				<div className="text-center bg-orange-50 rounded-xl py-4">
+					<div className="text-sm text-orange-500">재작업수량</div>
+					<div
+						className="font-extrabold text-orange-600"
+						style={{ fontSize: 32 }}
+					>
+						{reworkQty.toLocaleString()}
+					</div>
+				</div>
+				<div className="text-center bg-blue-50 rounded-xl py-4">
+					<div className="text-sm text-blue-500">접수가능</div>
+					<div
+						className="font-extrabold text-blue-600"
+						style={{ fontSize: 32 }}
+					>
+						{availableQty.toLocaleString()}
+					</div>
+				</div>
+			</div>
+		</>
+	);
+}
+
+/* ------------------------------------------------------------------ */
+/* Main Component                                                      */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Phase A-2b: 데이터/필터/열 상태는 page.tsx의 useProcessData에서 주입.
+ * 내부 fetchAll/syncAndFetch는 제거되고 refetch()로 대체 (sync 없는 재조회).
+ */
+export interface WorkOrderListProps {
+	instructions: WorkInstruction[];
+	allProcesses: WorkOrderProcess[];
+	processList: ProcessMng[];
+	equipmentList: EquipmentMng[];
+	itemNameMap: Record<string, string>;
+	itemTypeMap: Record<string, string>;
+	loading: boolean;
+	selectedProcess: string;
+	selectedEquipment: string;
+	cardCols: 1 | 2 | 3;
+	refetch: () => void;
+}
+
+export function WorkOrderList(props: WorkOrderListProps) {
+	const {
+		instructions,
+		allProcesses,
+		processList,
+		equipmentList,
+		itemNameMap,
+		itemTypeMap,
+		loading,
+		selectedProcess,
+		selectedEquipment,
+		cardCols,
+		refetch,
+	} = props;
+	const router = useRouter();
+	const { user } = useAuth();
+	const currentUserId = user?.userId || "";
+
+	const [activeTab, setActiveTab] = useState<TabFilter>("acceptable");
+
+	/* Accept Modal */
+	const [acceptModal, setAcceptModal] = useState<{
+		open: boolean;
+		processId: string;
+		processName: string;
+		seqNo: number;
+		maxQty: number;
+		reworkSourceId?: string;
+	}>({ open: false, processId: "", processName: "", seqNo: 0, maxQty: 0 });
+	const [acceptLoading, setAcceptLoading] = useState(false);
+
+	const [cancelConfirm, setCancelConfirm] = useState<{
+		open: boolean;
+		processId: string;
+	}>({ open: false, processId: "" });
+
+	/* Process Detail Modal */
+	const [detailModal, setDetailModal] = useState<{
+		open: boolean;
+		wiNo: string;
+		totalQty: number;
+		steps: ProcessStep[];
+		woId?: string;
+		showReworkHistory?: boolean;
+	}>({ open: false, wiNo: "", totalQty: 0, steps: [] });
+
+	// Phase A-2b: 데이터 패칭은 useProcessData가 담당 — 내부 fetchAll/syncAndFetch 제거
+
+	/* ---- Lookup maps ---- */
+	const instructionMap = useMemo(() => {
+		const map: Record<string, WorkInstruction> = {};
+		for (const wi of instructions) {
+			map[wi.id] = wi;
+		}
+		return map;
+	}, [instructions]);
+
+	const processesByWo = useMemo(() => {
+		const map: Record<string, WorkOrderProcess[]> = {};
+		for (const proc of allProcesses) {
+			if (!proc.wo_id) continue;
+			if (!map[proc.wo_id]) map[proc.wo_id] = [];
+			map[proc.wo_id].push(proc);
+		}
+		return map;
+	}, [allProcesses]);
+
+	/** 서버 응답 batch_count/batch_index를 Drawer/카드 기존 구조로 어댑팅 */
+	const multiBatchInfo = useMemo(() => {
+		const map: Record<string, { isMulti: boolean; index: number; total: number; itemType: string }> = {};
+		for (const proc of allProcesses) {
+			const total = Math.max(Number(proc.batch_count ?? 1) || 1, 1);
+			const index = Number(proc.batch_index ?? 1) || 1;
+			const isMulti = total > 1;
+			const bid = proc.batch_id || "";
+			let itemType = "";
+			if (bid) itemType = itemTypeMap[bid] || "";
+			if (!itemType) {
+				const wi = instructionMap[proc.wo_id];
+				if (wi?.item_number) itemType = itemTypeMap[wi.item_number] || "";
+			}
+			map[proc.id] = { isMulti, index, total, itemType };
+		}
+		return map;
+	}, [allProcesses, itemTypeMap, instructionMap]);
+
+	const masterProcesses = useMemo(() => {
+		// 마스터 행 + 분할 행(진행중/완료/리워크) — 중복 제거
+		const seen = new Set<string>();
+		return allProcesses.filter((p) => {
+			if (seen.has(p.id)) return false;
+			const include =
+				!p.parent_process_id || // 마스터 행
+				p.status === "in_progress" ||
+				p.status === "completed" || // 분할 행
+				isReworkProcess(p); // 재작업
+			if (include) seen.add(p.id);
+			return include;
+		});
+	}, [allProcesses]);
+
+	const equipmentMap = useMemo(() => {
+		const map: Record<string, EquipmentMng> = {};
+		for (const eq of equipmentList) {
+			map[eq.id] = eq;
+			if (eq.equipment_code) map[eq.equipment_code] = eq;
+		}
+		return map;
+	}, [equipmentList]);
+
+	// Phase A-5: 필터 UI는 page.tsx의 SupplierModal/EquipmentModal에서 담당.
+	// WorkOrderList는 selectedProcess/selectedEquipment props만 사용해 filteredProcesses를 계산.
+
+	/* ---- Filtered processes ---- */
+	const filteredProcesses = useMemo(() => {
+		if (selectedProcess === "__all__") return []; // 공정 미선택 시 빈 목록
+		return masterProcesses.filter((proc) => {
+			const isRework = isReworkProcess(proc);
+			const isMaster = !proc.parent_process_id;
+			// 완료/진행중 탭에서는 SPLIT만 표시 (마스터 제외)
+			if (
+				isMaster &&
+				!isRework &&
+				(activeTab === "completed" || activeTab === "in_progress")
+			)
+				return false;
+			// 리워크 마스터가 in_progress/completed면 SPLIT이 생성된 것 → 리워크 마스터 숨김 (SPLIT은 표시)
+			if (
+				isRework &&
+				!proc.parent_process_id &&
+				(proc.status === "in_progress" || proc.status === "completed")
+			)
+				return false;
+			// 재작업 카드는 공정 필터 무시 (모든 공정에서 표시)
+			if (!isRework && proc.process_code !== selectedProcess) return false;
+			if (selectedEquipment !== "__all__") {
+				const wi = instructionMap[proc.wo_id];
+				if (!wi) return false;
+				const eqId = wi.equipment_id;
+				const eq = equipmentMap[eqId];
+				if (!eq || eq.equipment_code !== selectedEquipment) return false;
+			}
+			if (activeTab !== "all" && proc.status !== activeTab) return false;
+			return true;
+		});
+	}, [
+		masterProcesses,
+		selectedProcess,
+		selectedEquipment,
+		activeTab,
+		instructionMap,
+		equipmentMap,
+	]);
+
+	/* ---- Tab counts ---- */
+	const tabCounts = useMemo(() => {
+		const preFiltered = masterProcesses.filter((proc) => {
+			const isRework = isReworkProcess(proc);
+			// 재작업 카드는 공정 필터 무시 (모든 공정에서 표시)
+			if (
+				selectedProcess !== "__all__" &&
+				!isRework &&
+				proc.process_code !== selectedProcess
+			)
+				return false;
+			if (selectedEquipment !== "__all__") {
+				const wi = instructionMap[proc.wo_id];
+				if (!wi) return false;
+				const eq = equipmentMap[wi.equipment_id];
+				if (!eq || eq.equipment_code !== selectedEquipment) return false;
+			}
+			return true;
+		});
+
+		const counts: Record<TabFilter, number> = {
+			all: preFiltered.length,
+			acceptable: 0,
+			in_progress: 0,
+			waiting: 0,
+			completed: 0,
+		};
+		for (const proc of preFiltered) {
+			const isMaster = !proc.parent_process_id;
+			const isRw = isReworkProcess(proc);
+			// 리워크 마스터가 in_progress/completed면 SPLIT이 있으므로 카운트 제외
+			if (
+				isRw &&
+				!proc.parent_process_id &&
+				(proc.status === "in_progress" || proc.status === "completed")
+			)
+				continue;
+			if (proc.status === "acceptable") counts.acceptable++;
+			else if (proc.status === "in_progress" && (!isMaster || isRw))
+				counts.in_progress++;
+			else if (proc.status === "completed" && (!isMaster || isRw))
+				counts.completed++;
+			else counts.waiting++;
+		}
+		return counts;
+	}, [
+		masterProcesses,
+		selectedProcess,
+		selectedEquipment,
+		instructionMap,
+		equipmentMap,
+	]);
+
+	/* ---- Accept handler ---- */
+	const openAcceptModal = async (
+		processId: string,
+		processName: string,
+		seqNo: number,
+		reworkSourceId?: string,
+	) => {
+		try {
+			const res = await apiClient.get("/pop/production/available-qty", {
+				params: { work_order_process_id: processId },
+			});
+			const data = res.data?.data;
+			const maxQty = data?.availableQty ?? 0;
+			setAcceptModal({
+				open: true,
+				processId,
+				processName,
+				seqNo,
+				maxQty,
+				reworkSourceId,
+			});
+		} catch {
+			toast.error("접수가능량 조회 실패");
+		}
+	};
+
+	const handleAccept = async (qty: number) => {
+		setAcceptLoading(true);
+		try {
+			const body: Record<string, unknown> = {
+				work_order_process_id: acceptModal.processId,
+				accept_qty: qty,
+			};
+			// 리워크 추적: rework_source_id가 있으면 전달 (원점 복귀 추적)
+			if (acceptModal.reworkSourceId) {
+				body.rework_source_id = acceptModal.reworkSourceId;
+			}
+			const res = await apiClient.post("/pop/production/accept-process", body);
+			if (res.data?.success) {
+				setAcceptModal((m) => ({ ...m, open: false }));
+				refetch();
+			} else {
+				toast.error(res.data?.message || "접수 실패");
+			}
+		} catch (error: any) {
+			toast.error(error.response?.data?.message || "접수 중 오류 발생");
+		} finally {
+			setAcceptLoading(false);
+		}
+	};
+
+	/* ---- Navigate to work route ---- */
+	const goToWork = (processId: string) => {
+		try {
+			const existing = JSON.parse(
+				sessionStorage.getItem(POP_NEW_PROD_STATE_KEY) || "{}",
+			);
+			sessionStorage.setItem(
+				POP_NEW_PROD_STATE_KEY,
+				JSON.stringify({
+					...existing,
+					activeTab,
+					scrollY: window.scrollY,
+				}),
+			);
+		} catch {
+			/* ignore */
+		}
+		router.push(`/COMPANY_7/pop/production/work/${processId}`);
+	};
+
+	/* ---- Restore activeTab + scrollY on mount ---- */
+	useEffect(() => {
+		try {
+			const saved = sessionStorage.getItem(POP_NEW_PROD_STATE_KEY);
+			if (!saved) return;
+			const parsed = JSON.parse(saved);
+			if (
+				parsed.activeTab === "all" ||
+				parsed.activeTab === "acceptable" ||
+				parsed.activeTab === "in_progress" ||
+				parsed.activeTab === "waiting" ||
+				parsed.activeTab === "completed"
+			) {
+				setActiveTab(parsed.activeTab);
+			}
+			if (typeof parsed.scrollY === "number") {
+				requestAnimationFrame(() => window.scrollTo(0, parsed.scrollY));
+			}
+		} catch {
+			/* ignore */
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	/* ---- Open process detail modal ---- */
+	const openDetailModal = (proc: WorkOrderProcess) => {
+		const wi = instructionMap[proc.wo_id];
+		const siblings = getSameBatchMasters(
+			processesByWo[proc.wo_id] || [],
+			proc.batch_id,
+		).sort((a, b) => a.seq_no - b.seq_no);
+
+		const totalQty = wi ? wi.qty : proc.plan_qty;
+
+		const steps: ProcessStep[] = siblings.map((s) => {
+			const sInput = s.input_qty;
+			const sGood = s.good_qty;
+			const sDefect = s.defect_qty;
+			const sPlan = s.plan_qty;
+			// Available = plan - input (simplified)
+			const avail = Math.max(0, sPlan - sInput);
+			return {
+				no: s.seq_no,
+				name: s.process_name || s.process_code,
+				code: s.process_code,
+				status: s.status,
+				inputQty: sInput,
+				goodQty: sGood,
+				defectQty: sDefect,
+				planQty: sPlan,
+				availableQty: avail,
+			};
+		});
+
+		// Check if this wo has any rework processes
+		const hasReworks = allProcesses.some(
+			(p) =>
+				p.wo_id === proc.wo_id &&
+				isReworkProcess(p),
+		);
+
+		setDetailModal({
+			open: true,
+			wiNo: wi?.work_instruction_no || "작업지시",
+			totalQty,
+			steps,
+			woId: proc.wo_id,
+			showReworkHistory: hasReworks,
+		});
+	};
+
+	/* ---- Helper: get previous process display info (name + progress) ---- */
+	const getPrevProcessInfo = (proc: WorkOrderProcess) => {
+		const siblings = getSameBatchMasters(
+			processesByWo[proc.wo_id] || [],
+			proc.batch_id,
+		).sort((a, b) => a.seq_no - b.seq_no);
+
+		const currentIdx = siblings.findIndex((p) => p.id === proc.id);
+		if (currentIdx <= 0)
+			return {
+				prevProcessName: null as string | null,
+				prevProgressPct: null as number | null,
+			};
+
+		const prev = siblings[currentIdx - 1];
+		const prevGood = prev.good_qty;
+		const prevPlan = prev.plan_qty;
+		const prevPct = prevPlan > 0 ? Math.round((prevGood / prevPlan) * 100) : 0;
+		return {
+			prevProcessName: prev.process_name || prev.process_code,
+			prevProgressPct:
+				prev.status === "in_progress"
+					? prevPct
+					: prev.status === "completed"
+						? 100
+						: null,
+		};
+	};
+
+	/* ---- Helper: get equipment name ---- */
+	const getEquipmentName = (proc: WorkOrderProcess): string => {
+		const wi = instructionMap[proc.wo_id];
+		if (!wi?.equipment_id) return "미배정";
+		const eq = equipmentMap[wi.equipment_id];
+		return eq?.equipment_name || "미배정";
+	};
+
+	/* ---- Render ---- */
+	return (
+		<div className="flex flex-col gap-3">
+			{/* Phase A-3/A-5: 카드 열 토글·새로고침·필터 UI는 page.tsx가 담당 */}
+
+			{/* ===== Tab bar ===== */}
+			<div className="flex gap-1.5 overflow-x-auto no-scrollbar bg-gray-100 p-1 rounded-xl">
+				{TABS.map((tab) => {
+					const count = tabCounts[tab.key];
+					const isActive = activeTab === tab.key;
+					return (
+						<button
+							key={tab.key}
+							onClick={() => setActiveTab(tab.key)}
+							className={`flex-1 min-w-[60px] py-2.5 rounded-lg text-xs font-semibold transition-all active:scale-95 flex items-center justify-center gap-1.5 ${
+								isActive
+									? `${tab.bgActive} ${tab.color} shadow-sm`
+									: "text-gray-500 hover:text-gray-700"
+							}`}
+						>
+							{tab.label}
+							{count > 0 && (
+								<span
+									className={`text-[10px] min-w-[18px] h-[18px] flex items-center justify-center rounded-full px-1 ${
+										isActive ? "bg-black/10" : "bg-gray-200/60"
+									}`}
+								>
+									{count}
+								</span>
+							)}
+						</button>
+					);
+				})}
+			</div>
+
+			{/* Loading */}
+			{loading && (
+				<div className="flex items-center justify-center py-16">
+					<div className="flex flex-col items-center gap-3">
+						<div className="w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full animate-spin" />
+						<span className="text-sm text-gray-400">공정 조회중...</span>
+					</div>
+				</div>
+			)}
+
+			{/* Empty state */}
+			{!loading && filteredProcesses.length === 0 && (
+				<div className="flex flex-col items-center justify-center py-16 gap-3">
+					<div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
+						<svg
+							className="w-8 h-8 text-gray-300"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth={1.5}
+							viewBox="0 0 24 24"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V19.5a2.25 2.25 0 002.25 2.25h.75"
+							/>
+						</svg>
+					</div>
+					<p className="text-sm text-gray-400">
+						{selectedProcess === "__all__"
+							? "공정을 선택해주세요"
+							: `${TABS.find((t) => t.key === activeTab)?.label || ""} 상태의 공정이 없습니다`}
+					</p>
+				</div>
+			)}
+
+			{/* ===== Process Cards Grid ===== */}
+			{!loading && filteredProcesses.length > 0 && (
+				<div
+					className={`grid ${COLS_GRID_CLASS[cardCols] || "grid-cols-1"} gap-4`}
+				>
+					{filteredProcesses
+						.sort((a, b) => {
+							const order: Record<string, number> = {
+								acceptable: 0,
+								in_progress: 1,
+								waiting: 2,
+								completed: 3,
+							};
+							const diff = (order[a.status] ?? 2) - (order[b.status] ?? 2);
+							if (diff !== 0) return diff;
+							return a.seq_no - b.seq_no;
+						})
+						.map((proc) => {
+							const wi = instructionMap[proc.wo_id];
+							const badge = STATUS_BADGE[proc.status] || STATUS_BADGE.waiting;
+							const siblingProcesses = getSameBatchMasters(
+								processesByWo[proc.wo_id] || [],
+								proc.batch_id,
+							);
+							const planQty = proc.plan_qty;
+							const goodQty = proc.good_qty;
+							const defectQty = proc.defect_qty;
+							const inputQty = proc.input_qty;
+							const isRework = isReworkProcess(proc);
+							const borderLeft = isRework
+								? "border-l-orange-500"
+								: BORDER_LEFT_COLOR[proc.status] || "border-l-gray-300";
+							const eqName = getEquipmentName(proc);
+
+							// Split processes (children of this master)
+							const mySplits = allProcesses
+								.filter((s) => s.parent_process_id === proc.id)
+								.sort((a, b) => {
+									const ta = a.started_at
+										? new Date(a.started_at).getTime()
+										: 0;
+									const tb = b.started_at
+										? new Date(b.started_at).getTime()
+										: 0;
+									return tb - ta;
+								});
+
+							const progressPct =
+								planQty > 0
+									? Math.min(100, Math.round((goodQty / planQty) * 100))
+									: 0;
+							const remainQty = Math.max(0, inputQty - goodQty - defectQty);
+							const prevInfo = getPrevProcessInfo(proc);
+							const prevGoodQtyNum =
+								proc.prev_good_qty != null
+									? Number(proc.prev_good_qty)
+									: null;
+
+							// Server-computed: available qty
+							const availableQty = Number(proc.available_qty ?? 0);
+
+							// Additional available for in_progress
+							const additionalAvailable = Math.max(0, planQty - inputQty);
+
+							// Split order label (서버 계산 — split_no / split_total)
+							const splitInfo =
+								proc.split_no != null &&
+								proc.split_total != null &&
+								Number(proc.split_total) > 1
+									? {
+											order: Number(proc.split_no),
+											total: Number(proc.split_total),
+										}
+									: null;
+
+							// 합류 불가 리워크 감지: 접수가능 물량이 전부 리워크일 때
+							const reworkQtyAvail = Number(proc.rework_available_qty ?? 0);
+							const normalAvail = availableQty - reworkQtyAvail;
+							const isReworkOnly =
+								!isRework &&
+								proc.status === "acceptable" &&
+								reworkQtyAvail > 0 &&
+								normalAvail <= 0 &&
+								availableQty > 0;
+
+							// 리워크 표시 여부 (실제 리워크 카드 OR 합류불가 리워크)
+							const showReworkBadge = isRework || isReworkOnly;
+
+							// Rework info: origin process + rework round
+							let reworkRound = 1;
+							let originProcessName = proc.process_name || proc.process_code;
+							let originProcessCode = proc.process_code;
+							let originDefectQty = defectQty;
+							if (isRework) {
+								// 신 구조: 리워크 = wop_result.is_rework='Y' (virtual 카드)
+								//   같은 rework_source_id 그룹 내에서 accepted_at 순 차수 계산
+								const sameSource = allProcesses.filter(
+									(p) =>
+										p.wo_id === proc.wo_id &&
+										isReworkProcess(p) &&
+										p.rework_source_id === proc.rework_source_id,
+								);
+								const sortedReworks = [...sameSource].sort((a, b) => {
+									const da = a.accepted_at
+										? new Date(a.accepted_at).getTime()
+										: 0;
+									const db = b.accepted_at
+										? new Date(b.accepted_at).getTime()
+										: 0;
+									return da - db || a.id.localeCompare(b.id);
+								});
+								const myIdx = sortedReworks.findIndex((r) => r.id === proc.id);
+								reworkRound = myIdx >= 0 ? myIdx + 1 : 1;
+
+								// Find origin (source) process — rework_source_id 는 wop_result.id
+								if (proc.rework_source_id) {
+									const origin = allProcesses.find(
+										(p) => p.id === proc.rework_source_id,
+									);
+									if (origin) {
+										originProcessName =
+											origin.process_name || origin.process_code;
+										originProcessCode = origin.process_code;
+										originDefectQty = origin.defect_qty;
+									}
+								}
+							}
+
+							return (
+								<div
+									key={`${proc.id}-${proc.status}-${proc.parent_process_id || "m"}`}
+									className="card-item"
+								>
+									<div
+										className={`bg-white rounded-2xl border-l-4 ${borderLeft} border border-gray-100 shadow-sm overflow-hidden flex flex-col ${
+											proc.status === "waiting" ? "opacity-75" : ""
+										} ${showReworkBadge ? "border-2 border-orange-200" : ""} ${
+											proc.status === "in_progress"
+												? "cursor-pointer active:scale-[0.99] transition-transform"
+												: ""
+										}`}
+										style={{ height: "100%" }}
+										onClick={
+											proc.status === "in_progress"
+												? () =>
+														goToWork(
+															proc.parent_process_id
+																? proc.id
+																: mySplits[0]?.id || proc.id,
+														)
+												: undefined
+										}
+									>
+										<div className="p-4 flex-1 flex flex-col">
+											{/* Header: Work instruction number + status badge */}
+											<div className="flex items-center justify-between mb-1">
+												<div className="flex items-center gap-2 min-w-0">
+													{showReworkBadge && (
+														<span className="bg-orange-500 text-white text-[10px] font-bold px-2 py-0.5 rounded shrink-0">
+															🔄 리워크
+														</span>
+													)}
+													<h3 className="text-xl font-extrabold text-gray-900 truncate">
+														{wi?.work_instruction_no || "작업지시"}
+														{splitInfo && (
+															<span className="text-sm font-bold text-blue-500 ml-1">
+																(접수 #{splitInfo.order})
+															</span>
+														)}
+													</h3>
+												</div>
+												<span
+													className={`shrink-0 ml-2 text-sm font-bold px-3 py-1.5 rounded-full ${badge.bg} ${badge.text}`}
+												>
+													{badge.prefix}
+													{badge.label}
+												</span>
+											</div>
+
+											{/* 단일/다중품목 뱃지 */}
+											{(() => {
+												const bInfo = multiBatchInfo[proc.id];
+												if (!bInfo) return null;
+												const typeLabel = bInfo.itemType || "";
+												return (
+													<div className="flex items-center gap-1.5 mb-1">
+														{bInfo.isMulti ? (
+															<span className="bg-blue-100 text-blue-700 text-xs font-bold px-2 py-0.5 rounded-full">
+																다중 {bInfo.index}/{bInfo.total}{typeLabel ? ` · ${typeLabel}` : ""}
+															</span>
+														) : (
+															<span className="bg-gray-100 text-gray-600 text-xs font-bold px-2 py-0.5 rounded-full">
+																단일{typeLabel ? ` · ${typeLabel}` : ""}
+															</span>
+														)}
+													</div>
+												);
+											})()}
+
+											{/* Sub-info: item name + equipment */}
+											<AutoScrollText className="text-sm text-gray-500 mb-3">
+												📦 {`${wi?.item_name || "품목"}${wi?.item_code || wi?.item_number ? `(${wi?.item_code || wi?.item_number})` : ""}`}
+												{" · "}
+												{!isRework
+													? `⚙️ ${eqName}`
+													: `⚙️ ${proc.process_name || proc.process_code}`}
+											</AutoScrollText>
+
+											{/* Process steps (compressed) — both normal and rework cards */}
+											{siblingProcesses.length > 1 && (
+												<CompressedProcessSteps
+													processes={processesByWo[proc.wo_id] || []}
+													currentSeqNo={proc.seq_no}
+													status={proc.status}
+													onClick={() => openDetailModal(proc)}
+													batchId={
+														proc.batch_id ?? undefined
+													}
+													allProcesses={allProcesses}
+												/>
+											)}
+
+											{/* Status-specific body (pushed to bottom with mt-auto) */}
+											<div className="mt-auto">
+												{isRework ? (
+													<ReworkCardBody
+														reworkQty={planQty}
+														availableQty={availableQty}
+														originProcessName={originProcessName}
+														originProcessCode={originProcessCode}
+														originDefectQty={originDefectQty}
+														reworkRound={reworkRound}
+													/>
+												) : proc.status === "acceptable" ? (
+													<AcceptableCardBody
+														planQty={planQty}
+														prevGoodQty={prevGoodQtyNum}
+														availableQty={availableQty}
+														reworkAvailableQty={reworkQtyAvail}
+													/>
+												) : proc.status === "in_progress" ? (
+													<InProgressCardBody
+														inputQty={inputQty}
+														goodQty={goodQty}
+														defectQty={defectQty}
+														remainQty={remainQty}
+														progressPct={progressPct}
+														additionalAvailable={additionalAvailable}
+													/>
+												) : proc.status === "waiting" ? (
+													<WaitingCardBody
+														planQty={planQty}
+														prevProcessName={prevInfo.prevProcessName}
+														prevProgressPct={prevInfo.prevProgressPct}
+														currentProcessName={
+															proc.process_name || proc.process_code
+														}
+														currentSeqNo={proc.seq_no}
+													/>
+												) : proc.status === "completed" ? (
+													<CompletedCardBody
+														goodQty={goodQty}
+														defectQty={defectQty}
+														planQty={planQty}
+														inputQty={inputQty}
+													/>
+												) : null}
+											</div>
+										</div>
+
+										{/* Action button (full width, bottom) */}
+										{isRework && proc.status === "acceptable" && (
+											<button
+												onClick={() =>
+													openAcceptModal(
+														proc.id,
+														proc.process_name,
+														proc.seq_no,
+														(proc as unknown as Record<string, unknown>)
+															.rework_source_id as string | undefined,
+													)
+												}
+												className={`w-full py-3.5 text-sm font-bold text-white active:scale-[0.98] transition-all ${COLOR_MAP.orange.buttonBg} ${COLOR_MAP.orange.buttonBgHover}`}
+											>
+												리워크 접수
+											</button>
+										)}
+										{!isRework &&
+											proc.status === "acceptable" &&
+											availableQty > 0 && (
+												<button
+													onClick={() =>
+														openAcceptModal(
+															proc.id,
+															proc.process_name,
+															proc.seq_no,
+														)
+													}
+													className={`w-full py-3.5 text-sm font-bold text-white active:scale-[0.98] transition-all ${COLOR_MAP.amber.buttonBg} ${COLOR_MAP.amber.buttonBgHover}`}
+												>
+													접수
+												</button>
+											)}
+										{!isRework &&
+											proc.status === "acceptable" &&
+											availableQty <= 0 &&
+											inputQty > 0 && (
+												<div className="w-full py-3 text-sm font-bold text-center text-gray-400 bg-gray-100">
+													전량 접수 완료
+												</div>
+											)}
+										{proc.status === "in_progress" &&
+											proc.total_production_qty === 0 &&
+											proc.parent_process_id && (
+												<button
+													onClick={(e) => {
+														e.stopPropagation();
+														setCancelConfirm({
+															open: true,
+															processId: proc.id,
+														});
+													}}
+													className="w-full py-4 text-base font-bold text-red-500 border-t-2 border-red-100 bg-red-50/50 active:scale-[0.98] transition-all"
+												>
+													접수 취소
+												</button>
+											)}
+									</div>
+								</div>
+							);
+						})}
+				</div>
+			)}
+
+			{/* Phase A-5: FilterSelectorModal 인스턴스는 page.tsx의 SupplierModal/EquipmentModal로 대체 */}
+
+			{/* Accept Process Modal */}
+			<AcceptProcessModal
+				open={acceptModal.open}
+				onClose={() => setAcceptModal((m) => ({ ...m, open: false }))}
+				onConfirm={handleAccept}
+				maxQty={acceptModal.maxQty}
+				processName={acceptModal.processName}
+				seqNo={acceptModal.seqNo}
+				loading={acceptLoading}
+			/>
+
+			{/* Process Detail Modal */}
+			<ProcessDetailModal
+				open={detailModal.open}
+				onClose={() => setDetailModal((m) => ({ ...m, open: false }))}
+				workInstructionNo={detailModal.wiNo}
+				totalQty={detailModal.totalQty}
+				steps={detailModal.steps}
+				woId={detailModal.woId}
+				showReworkHistory={detailModal.showReworkHistory}
+			/>
+
+			{/* Cancel accept confirm modal */}
+			<ConfirmModal
+				open={cancelConfirm.open}
+				title="접수 취소"
+				message="접수를 취소하시겠습니까?"
+				confirmText="취소"
+				cancelText="닫기"
+				variant="danger"
+				onConfirm={async () => {
+					const pid = cancelConfirm.processId;
+					setCancelConfirm({ open: false, processId: "" });
+					try {
+						const res = await apiClient.post("/pop/production/cancel-accept", {
+							work_order_process_id: pid,
+						});
+						if (res.data?.success) {
+							refetch();
+						} else {
+							toast.error(res.data?.message || "취소 실패");
+						}
+					} catch (err: unknown) {
+						const e2 = err as { response?: { data?: { message?: string } } };
+						toast.error(e2.response?.data?.message || "취소 중 오류");
+					}
+				}}
+				onCancel={() => setCancelConfirm({ open: false, processId: "" })}
+			/>
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/sections/MaterialInputSection.tsx b/frontend/app/(main)/COMPANY_7/pop/_components/production/sections/MaterialInputSection.tsx
new file mode 100644
index 00000000..6204bb0b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/sections/MaterialInputSection.tsx
@@ -0,0 +1,370 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { apiClient } from "@/lib/api/client";
+
+/* ================================================================== */
+/* Material Qty Keypad (±20% 범위 안내 포함)                            */
+/* ================================================================== */
+
+function MaterialQtyKeypad({
+	open,
+	onClose,
+	onConfirm,
+	initialValue,
+	unit,
+	requiredQty,
+	itemName,
+}: {
+	open: boolean;
+	onClose: () => void;
+	onConfirm: (val: string) => void;
+	initialValue: string;
+	unit: string;
+	requiredQty: number;
+	itemName: string;
+}) {
+	const [val, setVal] = useState(initialValue || "0");
+
+	useEffect(() => {
+		if (open) setVal(initialValue || "0");
+	}, [open, initialValue]);
+
+	const press = (k: string) => {
+		setVal((prev) => {
+			if (k === "backspace") return prev.length <= 1 ? "0" : prev.slice(0, -1);
+			if (k === "clear") return "0";
+			if (k === "dot") return prev.includes(".") ? prev : prev + ".";
+			if (k === "ref") return String(requiredQty);
+			if (prev === "0" && k !== ".") return k;
+			return prev + k;
+		});
+	};
+
+	if (!open) return null;
+	const numVal = parseFloat(val);
+	const lower = requiredQty * 0.8;
+	const upper = requiredQty * 1.2;
+	const outOfRange = !isNaN(numVal) && (numVal < lower || numVal > upper);
+
+	return (
+		<div className="fixed inset-0 z-[60] flex items-center justify-center">
+			<div className="absolute inset-0 bg-black/40" onClick={onClose} />
+			<div className="relative bg-white rounded-2xl shadow-2xl p-4 w-[320px] z-10">
+				<div className="text-center mb-3">
+					<p className="text-sm text-gray-500 truncate">{itemName}</p>
+					<p className="text-xs text-blue-500 mt-0.5">
+						기준 {requiredQty} {unit} (±20%)
+					</p>
+					<p
+						className={`text-3xl font-bold mt-2 ${outOfRange ? "text-amber-600" : "text-gray-900"}`}
+						style={{ fontVariantNumeric: "tabular-nums" }}
+					>
+						{val} <span className="text-base text-gray-400">{unit}</span>
+					</p>
+				</div>
+				<div className="grid grid-cols-3 gap-2 mb-3">
+					{["1", "2", "3", "4", "5", "6", "7", "8", "9"].map((k) => (
+						<button
+							key={k}
+							onClick={() => press(k)}
+							className="h-14 rounded-xl bg-gray-100 text-xl font-bold text-gray-800 active:scale-95 active:bg-gray-200 transition-all"
+						>
+							{k}
+						</button>
+					))}
+					<button
+						onClick={() => press("dot")}
+						className="h-14 rounded-xl bg-gray-100 text-xl font-bold text-gray-800 active:scale-95 transition-all"
+					>
+						.
+					</button>
+					<button
+						onClick={() => press("0")}
+						className="h-14 rounded-xl bg-gray-100 text-xl font-bold text-gray-800 active:scale-95 transition-all"
+					>
+						0
+					</button>
+					<button
+						onClick={() => press("backspace")}
+						className="h-14 rounded-xl bg-gray-200 text-base font-bold text-gray-600 active:scale-95 transition-all"
+					>
+						←
+					</button>
+				</div>
+				<div className="flex gap-2 mb-2">
+					<button
+						onClick={() => press("clear")}
+						className="flex-1 h-10 rounded-xl bg-gray-100 text-gray-600 text-sm font-bold active:scale-95"
+					>
+						초기화
+					</button>
+					<button
+						onClick={() => press("ref")}
+						className="flex-1 h-10 rounded-xl bg-blue-50 text-blue-600 text-sm font-bold active:scale-95"
+					>
+						기준값 ({requiredQty})
+					</button>
+				</div>
+				<div className="flex gap-2">
+					<button
+						onClick={onClose}
+						className="flex-1 h-12 rounded-xl bg-gray-100 text-gray-700 font-semibold active:scale-95"
+					>
+						취소
+					</button>
+					<button
+						onClick={() => {
+							onConfirm(val);
+							onClose();
+						}}
+						className="flex-1 h-12 rounded-xl text-white font-bold active:scale-95"
+						style={{
+							background: outOfRange
+								? "linear-gradient(135deg, #f59e0b, #d97706)"
+								: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
+						}}
+					>
+						{outOfRange ? "확인 (범위 외)" : "확인"}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+/* ================================================================== */
+/* Material Qty Input Row (키패드 트리거 버튼)                          */
+/* ================================================================== */
+
+function MaterialQtyInputRow({
+	material,
+	value,
+	onChange,
+}: {
+	material: {
+		id: string;
+		child_item_name: string;
+		required_qty: number;
+		unit: string;
+	};
+	value: string;
+	onChange: (v: string) => void;
+}) {
+	const [open, setOpen] = useState(false);
+	return (
+		<div className="flex items-center shrink-0">
+			<button
+				type="button"
+				onClick={() => setOpen(true)}
+				className="px-8 py-4 rounded-xl border-2 border-blue-300 text-xl font-bold text-blue-700 hover:border-blue-500 active:scale-[0.96] transition-all bg-blue-50 min-w-[120px] text-center"
+			>
+				{value || <span className="text-blue-300 font-semibold">입력</span>}
+			</button>
+			<MaterialQtyKeypad
+				open={open}
+				onClose={() => setOpen(false)}
+				onConfirm={onChange}
+				initialValue={value}
+				unit={material.unit}
+				requiredQty={material.required_qty}
+				itemName={material.child_item_name}
+			/>
+		</div>
+	);
+}
+
+/* ================================================================== */
+/* Material Input Section                                              */
+/* ================================================================== */
+
+/**
+ * Phase B-1: ProcessWork.tsx L2810-2993에서 분리.
+ * BOM 자재 조회/투입 — processId 외 props 없음 (원본 시그니처 유지).
+ * 원본 동작 그대로: 자체 state + 자체 API 호출, peSettings.materialInput 판별은 상위(ProcessWork)에서 수행.
+ *
+ * 신 구조: processId = wop_result.id (접수 카드 id).
+ * 백엔드 /pop/production/bom-materials/:id, /material-inputs/:id,
+ * /material-input (body.work_order_process_id) 모두 wop_result.id 해석.
+ */
+export function MaterialInputSection({ processId }: { processId: string }) {
+	const [bomMaterials, setBomMaterials] = useState<
+		Array<{
+			id: string;
+			child_item_id: string;
+			child_item_code: string;
+			child_item_name: string;
+			bom_qty: number;
+			unit: string;
+			required_qty: number;
+			input_qty: number;
+		}>
+	>([]);
+	const [inputValues, setInputValues] = useState<Record<string, string>>({});
+	const [inputted, setInputted] = useState<
+		Array<{
+			id: string;
+			item_code: string;
+			item_name: string;
+			input_qty: string;
+			unit: string;
+			recorded_at: string;
+		}>
+	>([]);
+	const [loading, setLoading] = useState(true);
+	const [saving, setSaving] = useState(false);
+	const [defaultWarehouseCode, setDefaultWarehouseCode] = useState<string>("");
+
+	useEffect(() => {
+		const fetchData = async () => {
+			setLoading(true);
+			try {
+				const [bomRes, inputRes, whRes] = await Promise.all([
+					apiClient.get(`/pop/production/bom-materials/${processId}`),
+					apiClient.get(`/pop/production/material-inputs/${processId}`),
+					apiClient.get("/pop/production/warehouses"),
+				]);
+				setBomMaterials(bomRes.data?.data?.materials || []);
+				setInputted(inputRes.data?.data || []);
+				const wh = whRes.data?.data?.[0];
+				if (wh?.warehouse_code) setDefaultWarehouseCode(wh.warehouse_code);
+			} catch {
+				/* non-critical */
+			}
+			setLoading(false);
+		};
+		fetchData();
+	}, [processId]);
+
+	const handleSave = async () => {
+		const inputs = bomMaterials
+			.filter((m) => {
+				const val = parseFloat(inputValues[m.id] || "0");
+				return val > 0;
+			})
+			.map((m) => ({
+				child_item_id: m.child_item_id,
+				child_item_code: m.child_item_code,
+				child_item_name: m.child_item_name,
+				input_qty: parseFloat(inputValues[m.id] || "0"),
+				unit: m.unit,
+				bom_detail_id: m.id,
+				required_qty: m.required_qty,
+				warehouse_code: defaultWarehouseCode || undefined,
+				location_code: defaultWarehouseCode || undefined,
+			}));
+
+		if (inputs.length === 0) {
+			toast.warning("투입 수량을 입력해주세요.");
+			return;
+		}
+
+		setSaving(true);
+		try {
+			const res = await apiClient.post("/pop/production/material-input", {
+				work_order_process_id: processId,
+				inputs,
+			});
+			if (res.data?.success) {
+				toast.success(res.data.message || "투입 완료");
+				setInputValues({});
+				const inputRes = await apiClient.get(
+					`/pop/production/material-inputs/${processId}`,
+				);
+				setInputted(inputRes.data?.data || []);
+			} else {
+				toast.error(res.data?.message || "투입 실패");
+			}
+		} catch {
+			toast.error("투입 중 오류");
+		}
+		setSaving(false);
+	};
+
+	if (loading) {
+		return (
+			<div className="text-center py-8 text-gray-400">자재 정보 조회중...</div>
+		);
+	}
+
+	return (
+		<div className="space-y-3">
+			{/* BOM 기준 자재 목록 — 컴팩트 */}
+			<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-3">
+				<div className="flex items-center justify-between mb-2">
+					<h3 className="text-sm font-bold text-gray-900">BOM 자재 목록</h3>
+					<span className="text-xs text-gray-400">{bomMaterials.length}건</span>
+				</div>
+				{bomMaterials.length === 0 ? (
+					<p className="text-sm text-gray-400 py-4 text-center">
+						BOM 자재 정보가 없습니다
+					</p>
+				) : (
+					<div>
+						<div className="divide-y divide-gray-200">
+							{bomMaterials.map((m) => (
+								<div key={m.id} className="flex items-center gap-2 py-3">
+									<div className="flex-1 min-w-0">
+										<span className="text-base font-bold text-gray-900">
+											{m.child_item_name}
+										</span>
+										<span className="text-sm text-gray-400 ml-1">
+											({m.child_item_code})
+										</span>
+										<span className="text-base font-bold text-blue-600 ml-3">
+											소요 {m.required_qty}
+										</span>
+									</div>
+									<MaterialQtyInputRow
+										material={m}
+										value={inputValues[m.id] || ""}
+										onChange={(v) =>
+											setInputValues((prev) => ({ ...prev, [m.id]: v }))
+										}
+									/>
+									<span className="text-base font-semibold text-gray-500 shrink-0 w-8">
+										{m.unit}
+									</span>
+								</div>
+							))}
+						</div>
+						<button
+							onClick={handleSave}
+							disabled={saving}
+							className="w-full mt-4 py-4 rounded-xl text-lg font-bold text-white active:scale-[0.98] transition-all disabled:opacity-40"
+							style={{
+								background: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
+							}}
+						>
+							{saving ? "저장중..." : "자재 투입 확정"}
+						</button>
+					</div>
+				)}
+			</div>
+
+			{/* 투입 이력 */}
+			{inputted.length > 0 && (
+				<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4">
+					<h3 className="text-base font-bold text-gray-900 mb-3">투입 이력</h3>
+					{inputted.map((item) => (
+						<div
+							key={item.id}
+							className="flex items-center justify-between py-2 border-b border-gray-100 last:border-0"
+						>
+							<div>
+								<p className="text-sm font-semibold text-gray-900">
+									{item.item_name}
+								</p>
+								<p className="text-xs text-gray-400">{item.item_code}</p>
+							</div>
+							<p className="text-base font-bold text-green-600">
+								{item.input_qty} {item.unit}
+							</p>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/types.ts b/frontend/app/(main)/COMPANY_7/pop/_components/production/types.ts
new file mode 100644
index 00000000..11b1775f
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/types.ts
@@ -0,0 +1,234 @@
+/**
+ * POP 공정실행 화면 타입/정규화 유틸 (Phase D)
+ *
+ * 목적:
+ * - 서버 응답의 stringly-typed 필드(수량 string, is_rework "Y"/"true"/"1")를
+ *   UI 레이어에서 number/boolean으로 일원화
+ * - normalize는 useProcessData 입구 1곳에서만 수행, 이후 컴포넌트는 View만 취급
+ */
+
+/** 서버 응답 raw row (일부 string + Phase C number 혼재) */
+export interface WorkOrderProcessRaw {
+	id: string;
+	wo_id: string;
+	seq_no: string | number;
+	process_code: string;
+	process_name: string;
+	status: string;
+	result_status?: string;
+	plan_qty?: string | number | null;
+	input_qty?: string | number | null;
+	good_qty?: string | number | null;
+	defect_qty?: string | number | null;
+	concession_qty?: string | number | null;
+	total_production_qty?: string | number | null;
+	parent_process_id?: string | null;
+	is_rework?: string | boolean | null;
+	rework_source_id?: string | null;
+	started_at?: string | null;
+	completed_at?: string | null;
+	accepted_by?: string | null;
+	accepted_at?: string | null;
+	created_date?: string | null;
+	batch_id?: string | null;
+	equipment_code?: string | null;
+	// Phase C 서버 계산 필드
+	available_qty?: string | number | null;
+	prev_good_qty?: string | number | null;
+	my_input_qty?: string | number | null;
+	rework_available_qty?: string | number | null;
+	split_no?: string | number | null;
+	split_total?: string | number | null;
+	batch_count?: string | number | null;
+	batch_list?: string[] | null;
+	batch_index?: number | null;
+	/** 신 구조 — 이 wop 에 속한 접수 카드 배열 (wop_result rows) */
+	accepted_results?: Array<{
+		id: string; // wop_result.id
+		seq: string | number;
+		status: string;
+		result_status?: string;
+		input_qty?: string | number | null;
+		good_qty?: string | number | null;
+		defect_qty?: string | number | null;
+		concession_qty?: string | number | null;
+		total_production_qty?: string | number | null;
+		is_rework?: string | boolean | null;
+		rework_source_id?: string | null;
+		accepted_by?: string | null;
+		accepted_at?: string | null;
+		started_at?: string | null;
+		completed_at?: string | null;
+		equipment_code?: string | null;
+		batch_id?: string | null;
+	}> | null;
+}
+
+/** UI 컴포넌트가 사용하는 정규화 View — 수량 number, 플래그 boolean */
+export interface WorkOrderProcessView {
+	id: string;
+	wo_id: string;
+	seq_no: number;
+	process_code: string;
+	process_name: string;
+	status: "acceptable" | "waiting" | "in_progress" | "completed";
+	result_status: string;
+
+	// 수량 (모두 number, null 폴백 0)
+	plan_qty: number;
+	input_qty: number;
+	good_qty: number;
+	defect_qty: number;
+	concession_qty: number;
+	total_production_qty: number;
+
+	// 리워크
+	is_rework: boolean;
+	rework_source_id: string | null;
+
+	// 계층 / 배치
+	parent_process_id: string | null;
+	batch_id: string | null;
+
+	// 타이밍
+	started_at: string | null;
+	completed_at: string | null;
+	accepted_at: string | null;
+	accepted_by: string | null;
+	created_date: string | null;
+
+	// 설비
+	equipment_code: string | null;
+
+	// Phase C 서버 계산 필드
+	available_qty: number;
+	prev_good_qty: number | null;
+	my_input_qty: number;
+	rework_available_qty: number;
+	split_no: number | null;
+	split_total: number | null;
+	batch_count: number;
+	batch_list: string[] | null;
+	batch_index: number | null;
+	/** 신 구조 — 이 wop 에 속한 접수 카드 배열 (정규화됨) */
+	accepted_results: Array<{
+		id: string; // wop_result.id — 접수/실적 단위 식별자
+		seq: number;
+		status: "acceptable" | "waiting" | "in_progress" | "completed";
+		result_status: string;
+		input_qty: number;
+		good_qty: number;
+		defect_qty: number;
+		concession_qty: number;
+		total_production_qty: number;
+		is_rework: boolean;
+		rework_source_id: string | null;
+		accepted_by: string | null;
+		accepted_at: string | null;
+		started_at: string | null;
+		completed_at: string | null;
+		equipment_code: string | null;
+		batch_id: string | null;
+	}>;
+}
+
+/** 범용 Yes 판정 — "Y"/"true"/"1" (대소문자 유연) 또는 boolean true */
+export function isYes(v: unknown): boolean {
+	if (v === true) return true;
+	if (typeof v !== "string") return false;
+	const s = v.trim().toLowerCase();
+	return s === "y" || s === "true" || s === "1";
+}
+
+/** 리워크 행 여부 — is_rework만 보는 래퍼 (Phase D 집약 대상) */
+export function isReworkProcess(
+	row: { is_rework?: string | boolean | null } | null | undefined,
+): boolean {
+	if (!row) return false;
+	return isYes(row.is_rework);
+}
+
+/** 수량 정규화 — string/null → number, NaN 방지 */
+function toInt(v: unknown): number {
+	if (typeof v === "number" && Number.isFinite(v)) return v;
+	if (v == null) return 0;
+	const n = parseInt(String(v), 10);
+	return Number.isFinite(n) ? n : 0;
+}
+
+/** nullable 숫자 정규화 — null 유지 */
+function toNullableInt(v: unknown): number | null {
+	if (v == null) return null;
+	if (typeof v === "number") return Number.isFinite(v) ? v : null;
+	const n = parseInt(String(v), 10);
+	return Number.isFinite(n) ? n : null;
+}
+
+/**
+ * 서버 raw row → 정규화 View
+ * - 수량 문자열 → number (NaN 방지)
+ * - is_rework → boolean
+ * - seq_no → number
+ * - Phase C 계산 필드 number 통일
+ */
+export function normalizeWorkOrderProcess(
+	raw: WorkOrderProcessRaw,
+): WorkOrderProcessView {
+	return {
+		id: String(raw.id || ""),
+		wo_id: String(raw.wo_id || ""),
+		seq_no: toInt(raw.seq_no),
+		process_code: String(raw.process_code || ""),
+		process_name: String(raw.process_name || ""),
+		status: (raw.status as WorkOrderProcessView["status"]) || "waiting",
+		result_status: String(raw.result_status || ""),
+		plan_qty: toInt(raw.plan_qty),
+		input_qty: toInt(raw.input_qty),
+		good_qty: toInt(raw.good_qty),
+		defect_qty: toInt(raw.defect_qty),
+		concession_qty: toInt(raw.concession_qty),
+		total_production_qty: toInt(raw.total_production_qty),
+		is_rework: isYes(raw.is_rework),
+		rework_source_id: raw.rework_source_id ?? null,
+		parent_process_id: raw.parent_process_id ?? null,
+		batch_id: raw.batch_id ?? null,
+		started_at: raw.started_at ?? null,
+		completed_at: raw.completed_at ?? null,
+		accepted_at: raw.accepted_at ?? null,
+		accepted_by: raw.accepted_by ?? null,
+		created_date: raw.created_date ?? null,
+		equipment_code: raw.equipment_code ?? null,
+		// Phase C
+		available_qty: toInt(raw.available_qty),
+		prev_good_qty: toNullableInt(raw.prev_good_qty),
+		my_input_qty: toInt(raw.my_input_qty),
+		rework_available_qty: toInt(raw.rework_available_qty),
+		split_no: toNullableInt(raw.split_no),
+		split_total: toNullableInt(raw.split_total),
+		batch_count: toInt(raw.batch_count),
+		batch_list: Array.isArray(raw.batch_list) ? raw.batch_list : null,
+		batch_index: raw.batch_index ?? null,
+		accepted_results: Array.isArray(raw.accepted_results)
+			? raw.accepted_results.map((ar) => ({
+					id: String(ar.id || ""),
+					seq: toInt(ar.seq),
+					status:
+						(ar.status as WorkOrderProcessView["status"]) || "in_progress",
+					result_status: String(ar.result_status || ""),
+					input_qty: toInt(ar.input_qty),
+					good_qty: toInt(ar.good_qty),
+					defect_qty: toInt(ar.defect_qty),
+					concession_qty: toInt(ar.concession_qty),
+					total_production_qty: toInt(ar.total_production_qty),
+					is_rework: isYes(ar.is_rework),
+					rework_source_id: ar.rework_source_id ?? null,
+					accepted_by: ar.accepted_by ?? null,
+					accepted_at: ar.accepted_at ?? null,
+					started_at: ar.started_at ?? null,
+					completed_at: ar.completed_at ?? null,
+					equipment_code: ar.equipment_code ?? null,
+					batch_id: ar.batch_id ?? null,
+				}))
+			: [],
+	};
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/_components/production/useProcessData.ts b/frontend/app/(main)/COMPANY_7/pop/_components/production/useProcessData.ts
new file mode 100644
index 00000000..791e59cf
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/_components/production/useProcessData.ts
@@ -0,0 +1,229 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { apiClient } from "@/lib/api/client";
+import { dataApi } from "@/lib/api/data";
+import {
+	normalizeWorkOrderProcess,
+	type WorkOrderProcessRaw,
+	type WorkOrderProcessView,
+} from "./types";
+
+/* ------------------------------------------------------------------ */
+/* Types (WorkOrderList.tsx와 동일 스키마)                              */
+/* ------------------------------------------------------------------ */
+
+export interface WorkInstruction {
+	id: string;
+	work_instruction_no: string;
+	item_id: string;
+	item_name: string;
+	item_code: string;
+	item_number: string;
+	qty: number;
+	completed_qty: number;
+	status: string;
+	progress_status: string;
+	routing: string | null;
+	start_date: string;
+	end_date: string;
+	equipment_id: string;
+	work_team: string;
+	worker: string;
+}
+
+/** Phase D: 정규화 View re-export (기존 타입명 유지 호환) */
+export type WorkOrderProcess = WorkOrderProcessView;
+
+export interface ProcessMng {
+	id: string;
+	process_code: string;
+	process_name: string;
+}
+
+export interface EquipmentMng {
+	id: string;
+	equipment_code: string;
+	equipment_name: string;
+}
+
+const REFRESH_COOLDOWN_MS = 3000;
+
+/**
+ * 공정실행 화면 데이터 훅
+ *
+ * - 진입 시 1회 sync-work-instructions POST + 데이터 로드
+ * - refresh(): 수동 새로고침 — sync 포함, 3초 쿨다운 (연타 차단)
+ * - refetch(): mutation 이후 — sync 없이 데이터만 재조회
+ * - 에러 → sonner toast (silent catch 금지)
+ */
+export function useProcessData() {
+	const [instructions, setInstructions] = useState<WorkInstruction[]>([]);
+	const [allProcesses, setAllProcesses] = useState<WorkOrderProcess[]>([]);
+	const [processList, setProcessList] = useState<ProcessMng[]>([]);
+	const [equipmentList, setEquipmentList] = useState<EquipmentMng[]>([]);
+	const [itemNameMap, setItemNameMap] = useState<Record<string, string>>({});
+	const [itemTypeMap, setItemTypeMap] = useState<Record<string, string>>({});
+	const [loading, setLoading] = useState(true);
+	const [syncing, setSyncing] = useState(false);
+
+	const lastRefreshAt = useRef<number>(0);
+	const inFlight = useRef<Promise<void> | null>(null);
+
+	const fetchData = useCallback(
+		async (opts?: { withSync?: boolean }): Promise<void> => {
+			// 동시 호출 방지 (같은 fetch가 이미 진행 중이면 그 Promise를 공유)
+			if (inFlight.current) return inFlight.current;
+
+			const task = (async () => {
+				setLoading(true);
+				if (opts?.withSync) setSyncing(true);
+				try {
+					if (opts?.withSync) {
+						try {
+							await apiClient.post("/pop/production/sync-work-instructions");
+						} catch {
+							toast.warning(
+								"동기화 실패 — 최신 작업지시가 반영되지 않을 수 있습니다",
+							);
+						}
+					}
+
+					const [wiRes, procRes, pmRes, eqRes] = await Promise.all([
+						apiClient.get("/work-instruction/list"),
+						apiClient.get("/pop/production/processes"),
+						dataApi.getTableData("process_mng", { size: 500 }),
+						dataApi.getTableData("equipment_mng", { size: 500 }),
+					]);
+
+					// work-instruction: header+detail 조인이라 id 중복 → 첫 행만 취함
+					let wiRaw: Record<string, unknown>[] = [];
+					if (wiRes.data?.data) {
+						wiRaw = Array.isArray(wiRes.data.data)
+							? wiRes.data.data
+							: wiRes.data.data.rows || [];
+					} else if (Array.isArray(wiRes.data)) {
+						wiRaw = wiRes.data;
+					}
+					const seen = new Set<string>();
+					const wiData: WorkInstruction[] = [];
+					const newItemNameMap: Record<string, string> = {};
+					const newItemTypeMap: Record<string, string> = {};
+					for (const raw of wiRaw) {
+						const wiId = String(raw.wi_id || raw.id || "");
+						const rawItemNumber = String(raw.item_number || "");
+						const rawItemName = String(raw.item_name || "");
+						const rawItemType = String(raw.item_type || "");
+						if (rawItemNumber && rawItemName) {
+							newItemNameMap[rawItemNumber] = rawItemName;
+						}
+						if (rawItemNumber && rawItemType) {
+							newItemTypeMap[rawItemNumber] = rawItemType;
+						}
+						if (!wiId || seen.has(wiId)) continue;
+						seen.add(wiId);
+						wiData.push({
+							...raw,
+							id: wiId,
+							item_name: rawItemName,
+							item_code: String(raw.item_code || ""),
+							item_number: rawItemNumber,
+							qty: parseInt(String(raw.total_qty || raw.qty || 0), 10),
+						} as unknown as WorkInstruction);
+					}
+					setInstructions(wiData);
+					setItemNameMap(newItemNameMap);
+					setItemTypeMap(newItemTypeMap);
+					const rawRows: WorkOrderProcessRaw[] = procRes.data?.data ?? [];
+					// 마스터(wop) + accepted_results 평탄화: 신 구조 접수 카드 = wop_result 항목을
+					// 기존 UI 의 "분할 카드(parent_process_id 있음)" 형태로 펼쳐서 기존 필터 로직과
+					// 호환 유지. virtual row 의 id = wop_result.id (라우팅/API body 식별자)
+					const flat: WorkOrderProcessView[] = [];
+					for (const raw of rawRows) {
+						const master = normalizeWorkOrderProcess(raw);
+						flat.push(master);
+						for (const ar of master.accepted_results) {
+							flat.push({
+								...master,
+								// 접수 카드 → virtual split row
+								id: ar.id, // wop_result.id
+								parent_process_id: master.id, // 마스터(wop.id) 참조
+								status: ar.status,
+								result_status: ar.result_status,
+								input_qty: ar.input_qty,
+								good_qty: ar.good_qty,
+								defect_qty: ar.defect_qty,
+								concession_qty: ar.concession_qty,
+								total_production_qty: ar.total_production_qty,
+								is_rework: ar.is_rework,
+								rework_source_id: ar.rework_source_id,
+								accepted_by: ar.accepted_by,
+								accepted_at: ar.accepted_at,
+								started_at: ar.started_at,
+								completed_at: ar.completed_at,
+								equipment_code: ar.equipment_code,
+								batch_id: ar.batch_id ?? master.batch_id,
+								// split 표시용 (접수 #n)
+								split_no: ar.seq,
+								split_total: master.accepted_results.length,
+								// 분할 카드 자체의 accepted_results 는 의미 없음 (재귀 금지)
+								accepted_results: [],
+							});
+						}
+					}
+					setAllProcesses(flat);
+					setProcessList((pmRes.data ?? []) as ProcessMng[]);
+					setEquipmentList((eqRes.data ?? []) as EquipmentMng[]);
+				} catch {
+					toast.error("데이터 조회 실패");
+				} finally {
+					setLoading(false);
+					setSyncing(false);
+				}
+			})();
+
+			inFlight.current = task;
+			try {
+				await task;
+			} finally {
+				inFlight.current = null;
+			}
+		},
+		[],
+	);
+
+	// 진입 시 1회만 sync + 로드
+	useEffect(() => {
+		fetchData({ withSync: true });
+		// fetchData는 stable — 의존성에 넣으면 useCallback deps 변화 없어도 무관하나,
+		// 명시적으로 빈 배열로 두어 "마운트 시 정확히 1회"를 강제
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	/** 수동 새로고침 — sync 포함, 3초 쿨다운 */
+	const refresh = useCallback(() => {
+		const now = Date.now();
+		if (now - lastRefreshAt.current < REFRESH_COOLDOWN_MS) return;
+		lastRefreshAt.current = now;
+		fetchData({ withSync: true });
+	}, [fetchData]);
+
+	/** Mutation(접수/실적/취소) 직후 — sync 없이 데이터만 재조회 */
+	const refetch = useCallback(() => {
+		fetchData({ withSync: false });
+	}, [fetchData]);
+
+	return {
+		instructions,
+		allProcesses,
+		processList,
+		equipmentList,
+		itemNameMap,
+		itemTypeMap,
+		loading,
+		syncing,
+		refresh,
+		refetch,
+	};
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/cart/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/cart/page.tsx
new file mode 100644
index 00000000..bad53939
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/cart/page.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import { InboundCartPage } from "../../_components/inbound/InboundCartPage";
+
+function InboundCartContent() {
+  const searchParams = useSearchParams();
+  const backUrl = searchParams.get("backUrl") || "/COMPANY_7/pop/inbound";
+
+  return <InboundCartPage backUrl={backUrl} />;
+}
+
+export default function InboundCartRoute() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+          불러오는 중...
+        </div>
+      }
+    >
+      <InboundCartContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/change/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/change/page.tsx
new file mode 100644
index 00000000..5f4a9b88
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/change/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ChangeInbound } from "../../_components/inbound/ChangeInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ChangeInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/change");
+  };
+
+  return (
+    <ChangeInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="교환입고"
+      sourceTable="change_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/error/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/error/page.tsx
new file mode 100644
index 00000000..888ae32c
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/error/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ErrorInbound } from "../../_components/inbound/ErrorInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ErrorInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/error");
+  };
+
+  return (
+    <ErrorInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="불량입고"
+      sourceTable="error_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/inbound-manage/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/inbound-manage/page.tsx
new file mode 100644
index 00000000..7cf34faf
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/inbound-manage/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { InboundManage } from "../../_components/inbound/InboundManage";
+
+export default function InboundManagePage() {
+  return <InboundManage />;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/page.tsx
new file mode 100644
index 00000000..b8320024
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/page.tsx
@@ -0,0 +1,438 @@
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface InboundMenuItem {
+  id: string;
+  title: string;
+  gradient: string;
+  shadowColor: string;
+  icon: React.ReactNode;
+  href: string;
+}
+
+interface RecentInboundItem {
+  id: string;
+  time: string;
+  type: string;
+  itemName: string;
+  qty: string;
+  supplier: string;
+  statusColor: string;
+  statusLabel: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Static Data (UI만)                                                  */
+/* ------------------------------------------------------------------ */
+
+const EXTERNAL_ITEMS: InboundMenuItem[] = [
+  {
+    id: "purchase",
+    title: "구매입고",
+    gradient: "linear-gradient(135deg,#3b82f6,#1d4ed8)",
+    shadowColor: "rgba(59,130,246,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/purchase",
+  },
+  {
+    id: "outsourcing",
+    title: "외주입고",
+    gradient: "linear-gradient(135deg,#8b5cf6,#6d28d9)",
+    shadowColor: "rgba(139,92,246,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/subcontractor",
+  },
+  {
+    id: "return",
+    title: "반품입고",
+    gradient: "linear-gradient(135deg,#f59e0b,#d97706)",
+    shadowColor: "rgba(245,158,11,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/return-external",
+  },
+  {
+    id: "supplied-material",
+    title: "사급자재",
+    gradient: "linear-gradient(135deg,#06b6d4,#0e7490)",
+    shadowColor: "rgba(6,182,212,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/supplied",
+  },
+  {
+    id: "defect",
+    title: "불량입고",
+    gradient: "linear-gradient(135deg,#ef4444,#b91c1c)",
+    shadowColor: "rgba(239,68,68,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/error",
+  },
+  {
+    id: "outsource-return",
+    title: "외주자재회수",
+    gradient: "linear-gradient(135deg,#ec4899,#be185d)",
+    shadowColor: "rgba(236,72,153,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/recovery",
+  },
+  {
+    id: "exchange",
+    title: "교환입고",
+    gradient: "linear-gradient(135deg,#14b8a6,#0f766e)",
+    shadowColor: "rgba(20,184,166,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/change",
+  },
+];
+
+const INTERNAL_ITEMS: InboundMenuItem[] = [
+  {
+    id: "production",
+    title: "생산입고",
+    gradient: "linear-gradient(135deg,#22c55e,#15803d)",
+    shadowColor: "rgba(34,197,94,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/production",
+  },
+  {
+    id: "return-internal",
+    title: "반납입고",
+    gradient: "linear-gradient(135deg,#f97316,#c2410c)",
+    shadowColor: "rgba(249,115,22,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/return-internal",
+  },
+  {
+    id: "transfer",
+    title: "재고이동",
+    gradient: "linear-gradient(135deg,#64748b,#334155)",
+    shadowColor: "rgba(100,116,139,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 7.5h-.75A2.25 2.25 0 004.5 9.75v7.5a2.25 2.25 0 002.25 2.25h7.5a2.25 2.25 0 002.25-2.25v-7.5a2.25 2.25 0 00-2.25-2.25h-.75m0-3l-3-3m0 0l-3 3m3-3v11.25m6-2.25h.75a2.25 2.25 0 012.25 2.25v7.5a2.25 2.25 0 01-2.25 2.25h-7.5a2.25 2.25 0 01-2.25-2.25v-7.5a2.25 2.25 0 012.25-2.25H12m-3 0V5.25" />
+      </svg>
+    ),
+    href: "#",
+  },
+  {
+    id: "inbound-manage",
+    title: "입고관리",
+    gradient: "linear-gradient(135deg,#3b82f6,#1e40af)",
+    shadowColor: "rgba(59,130,246,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound/inbound-manage",
+  },
+];
+
+/* 최근 입고 정적 목업 데이터 */
+const RECENT_ITEMS: RecentInboundItem[] = [
+  {
+    id: "1",
+    time: "10:14",
+    type: "구매입고",
+    itemName: "데모제일 20L (3공정 시연용)",
+    qty: "20 EA",
+    supplier: "거래처테스트(발주처)",
+    statusColor: "text-green-600 bg-green-50",
+    statusLabel: "완료",
+  },
+  {
+    id: "2",
+    time: "09:52",
+    type: "구매입고",
+    itemName: "용주N_CTG28_반투명",
+    qty: "10 EA",
+    supplier: "거래처테스트(발주처)",
+    statusColor: "text-gray-600 bg-gray-50",
+    statusLabel: "대기",
+  },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+function InboundTypeSelect() {
+  const router = useRouter();
+
+  /* KPI carousel */
+  const [kpiIdx, setKpiIdx] = useState(1);
+  const kpiTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const startKpiAuto = useCallback(() => {
+    if (kpiTimerRef.current) clearInterval(kpiTimerRef.current);
+    kpiTimerRef.current = setInterval(() => setKpiIdx((p) => (p + 1) % 3), 4000);
+  }, []);
+
+  useEffect(() => {
+    startKpiAuto();
+    return () => {
+      if (kpiTimerRef.current) clearInterval(kpiTimerRef.current);
+    };
+  }, [startKpiAuto]);
+
+  const handleMenuClick = (item: InboundMenuItem) => {
+    if (item.href === "#") {
+      alert(`${item.title} 화면은 준비 중입니다.`);
+    } else {
+      router.push(item.href);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      {/* ===== Back + Title ===== */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => router.push("/COMPANY_7/pop/main")}
+          className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+          </svg>
+        </button>
+        <div>
+          <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">입고</h1>
+          <p className="text-xs text-gray-400 mt-0.5">입고 유형을 선택하세요</p>
+        </div>
+      </div>
+
+      {/* ===== KPI Carousel ===== */}
+      <div className="relative overflow-hidden">
+        <div
+          className="flex select-none"
+          style={{
+            transform: `translateX(-${kpiIdx * 100}%)`,
+            transition: "transform 0.4s cubic-bezier(.25,.46,.45,.94)",
+          }}
+        >
+          {/* Slide 1 — 금일 입고 현황 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="금일 입고" color="text-blue-600" />
+                <KpiCell value="0" label="검수 대기" color="text-amber-600" />
+                <KpiCell value="0" label="완료" color="text-green-600" />
+              </div>
+            </div>
+          </div>
+          {/* Slide 2 — 유형별 건수 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="완료" color="text-blue-600" />
+                <KpiCell value="0" label="구매입고" color="text-purple-600" />
+                <KpiCell value="0" label="외주입고" color="text-gray-600" />
+              </div>
+            </div>
+          </div>
+          {/* Slide 3 — 수량/품질 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="금일 수량" color="text-blue-600" unit="EA" />
+                <KpiCell value="0" label="합격률" color="text-green-600" unit="%" />
+                <KpiCell value="0" label="불량" color="text-red-600" unit="건" />
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Dots */}
+        <div className="flex justify-center gap-2 mt-3">
+          {[0, 1, 2].map((idx) => (
+            <button
+              key={idx}
+              onClick={() => {
+                setKpiIdx(idx);
+                startKpiAuto();
+              }}
+              className="border-none p-0 transition-all duration-300 cursor-pointer"
+              style={{
+                width: kpiIdx === idx ? 24 : 8,
+                height: 8,
+                borderRadius: kpiIdx === idx ? 4 : "50%",
+                background: kpiIdx === idx ? "#3b82f6" : "#D1D5DB",
+              }}
+              aria-label={`KPI 슬라이드 ${idx + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* ===== External Inbound ===== */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full bg-blue-500" />
+          <h2 className="text-base sm:text-lg font-bold text-gray-900">외부 입고</h2>
+        </div>
+        <div className="flex flex-wrap justify-start gap-x-5 gap-y-4 sm:gap-x-6 sm:gap-y-5">
+          {EXTERNAL_ITEMS.map((item) => (
+            <MenuIcon key={item.id} item={item} onClick={handleMenuClick} />
+          ))}
+        </div>
+      </section>
+
+      {/* ===== Internal Inbound ===== */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full bg-green-500" />
+          <h2 className="text-base sm:text-lg font-bold text-gray-900">내부 입고</h2>
+        </div>
+        <div className="flex flex-wrap justify-start gap-x-5 gap-y-4 sm:gap-x-6 sm:gap-y-5">
+          {INTERNAL_ITEMS.map((item) => (
+            <MenuIcon key={item.id} item={item} onClick={handleMenuClick} />
+          ))}
+        </div>
+      </section>
+
+      {/* ===== Recent Inbound ===== */}
+      <section>
+        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+          <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
+            <h3 className="text-base sm:text-lg font-bold text-gray-900">최근 입고</h3>
+            <span className="text-xs text-gray-400">최근 5건</span>
+          </div>
+          <div className="flex flex-col gap-2">
+            {RECENT_ITEMS.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors"
+              >
+                <span
+                  className="text-xs font-semibold text-gray-400 min-w-[44px] text-right"
+                  style={{ fontVariantNumeric: "tabular-nums" }}
+                >
+                  {item.time}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-gray-900 truncate">{item.itemName}</span>
+                    <span
+                      className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-full shrink-0 ${item.statusColor}`}
+                    >
+                      {item.statusLabel}
+                    </span>
+                  </div>
+                  <div className="text-xs text-gray-400 mt-0.5 truncate">
+                    {item.type} | {item.supplier} | {item.qty}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-components                                                      */
+/* ------------------------------------------------------------------ */
+
+function KpiCell({
+  value,
+  label,
+  color,
+  unit,
+}: {
+  value: string;
+  label: string;
+  color: string;
+  unit?: string;
+}) {
+  return (
+    <div className="flex flex-col items-center py-2">
+      <div className="flex items-end gap-0.5">
+        <span
+          className={`text-2xl sm:text-3xl font-extrabold leading-none ${color}`}
+          style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }}
+        >
+          {value}
+        </span>
+        {unit && <span className="text-xs text-gray-400 mb-0.5">{unit}</span>}
+      </div>
+      <span className="text-[11px] font-medium text-gray-400 mt-1">{label}</span>
+    </div>
+  );
+}
+
+function MenuIcon({
+  item,
+  onClick,
+}: {
+  item: InboundMenuItem;
+  onClick: (item: InboundMenuItem) => void;
+}) {
+  return (
+    <div
+      className="flex flex-col items-center gap-2 w-16 sm:w-[72px] cursor-pointer group"
+      style={{ WebkitTapHighlightColor: "transparent" }}
+      onClick={() => onClick(item)}
+    >
+      <div
+        className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center transition-transform duration-150 group-hover:scale-105 group-active:scale-[0.93]"
+        style={{ background: item.gradient, boxShadow: `0 4px 12px ${item.shadowColor}` }}
+      >
+        {item.icon}
+      </div>
+      <span className="text-[11px] sm:text-xs font-semibold text-gray-700 text-center leading-tight">
+        {item.title}
+      </span>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Page                                                                */
+/* ------------------------------------------------------------------ */
+
+export default function InboundPage() {
+  return <InboundTypeSelect />;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/production/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/production/page.tsx
new file mode 100644
index 00000000..9246c4d9
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/production/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ProductionInbound } from "../../_components/inbound/ProductionInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ProductionInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/production");
+  };
+
+  return (
+    <ProductionInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="생산입고"
+      sourceTable="production_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/purchase/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/purchase/page.tsx
new file mode 100644
index 00000000..b7070b50
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/purchase/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { PurchaseInbound } from "../../_components/inbound/PurchaseInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function PurchaseInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/purchase");
+  };
+
+  return (
+    <PurchaseInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="구매입고"
+      sourceTable="purchase_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/recovery/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/recovery/page.tsx
new file mode 100644
index 00000000..8883f3a0
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/recovery/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { RecoveryInbound } from "../../_components/inbound/RecoveryInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function RecoveryInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/recovery");
+  };
+
+  return (
+    <RecoveryInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="외주자재회수"
+      sourceTable="recovery_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/return-external/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/return-external/page.tsx
new file mode 100644
index 00000000..ccdfe4f5
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/return-external/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ReturnExternalInbound } from "../../_components/inbound/ReturnExternalInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ReturnExternalInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/return-external");
+  };
+
+  return (
+    <ReturnExternalInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="반품입고"
+      sourceTable="return_external_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/return-internal/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/return-internal/page.tsx
new file mode 100644
index 00000000..d1157d0d
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/return-internal/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ReturnInternalInbound } from "../../_components/inbound/ReturnInternalInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ReturnInternalInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/return-internal");
+  };
+
+  return (
+    <ReturnInternalInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="반납입고"
+      sourceTable="return_internal_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/subcontractor/page.tsx
new file mode 100644
index 00000000..468cf7cd
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/subcontractor/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { SubcontractorInbound } from "../../_components/inbound/SubcontractorInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function SubcontractorInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/subcontractor");
+  };
+
+  return (
+    <SubcontractorInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="외주입고"
+      sourceTable="subcontractor_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/inbound/supplied/page.tsx b/frontend/app/(main)/COMPANY_7/pop/inbound/supplied/page.tsx
new file mode 100644
index 00000000..f4eb71cc
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/inbound/supplied/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { SuppliedInbound } from "../../_components/inbound/SuppliedInbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function SuppliedInboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("inbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/inbound/cart?backUrl=/COMPANY_7/pop/inbound/supplied");
+  };
+
+  return (
+    <SuppliedInbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      inboundType="사급자재"
+      sourceTable="supplied_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/layout.tsx b/frontend/app/(main)/COMPANY_7/pop/layout.tsx
new file mode 100644
index 00000000..0c898212
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/layout.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+import { PopShell } from "@/components/pop/hardcoded";
+
+/**
+ * COMPANY_7 POP 전용 layout
+ *
+ * - PopShell을 한 번만 렌더링하여 navigation 간 시계/상태/전체화면 스플래시 유지
+ * - 타이틀: 업체명 고정 (PopShell 기본값 user?.companyName 사용 → title prop 미전달)
+ * - 공지 배너: main 화면(/pop/main)에서만 표시
+ * - 카트 버튼은 각 inbound 컴포넌트가 content 내부에서 렌더링 (테마 색상별)
+ */
+export default function PopLayout({ children }: { children: ReactNode }) {
+  const pathname = usePathname();
+  const isMain = pathname.endsWith("/pop/main");
+  return <PopShell showBanner={isMain}>{children}</PopShell>;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/main/page.tsx b/frontend/app/(main)/COMPANY_7/pop/main/page.tsx
new file mode 100644
index 00000000..9dedfc02
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/main/page.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import type React from "react";
+import { KpiCarousel, RecentActivity } from "@/components/pop/hardcoded";
+
+interface MenuIconItem {
+  id: string;
+  title: string;
+  gradient: string;
+  shadowColor: string;
+  icon: React.ReactNode;
+  href: string;
+}
+
+const MENU_ITEMS: MenuIconItem[] = [
+  {
+    id: "incoming",
+    title: "입고",
+    gradient: "linear-gradient(135deg,#3b82f6,#1d4ed8)",
+    shadowColor: "rgba(59,130,246,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/inbound",
+  },
+  {
+    id: "outgoing",
+    title: "출고",
+    gradient: "linear-gradient(135deg,#22c55e,#15803d)",
+    shadowColor: "rgba(34,197,94,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0H6.75m11.25 0h2.625c.621 0 1.125-.504 1.125-1.125v-4.875c0-.621-.504-1.125-1.125-1.125H17.25m-13.5-.375V6.375c0-.621.504-1.125 1.125-1.125h7.5c.621 0 1.125.504 1.125 1.125v7.125" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound",
+  },
+  {
+    id: "production",
+    title: "생산",
+    gradient: "linear-gradient(135deg,#f59e0b,#d97706)",
+    shadowColor: "rgba(245,158,11,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/production",
+  },
+  {
+    id: "quality",
+    title: "품질",
+    gradient: "linear-gradient(135deg,#ef4444,#b91c1c)",
+    shadowColor: "rgba(239,68,68,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    href: "#",
+  },
+  {
+    id: "equipment",
+    title: "설비",
+    gradient: "linear-gradient(135deg,#8b5cf6,#6d28d9)",
+    shadowColor: "rgba(139,92,246,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+    ),
+    href: "#",
+  },
+  {
+    id: "inventory",
+    title: "재고",
+    gradient: "linear-gradient(135deg,#06b6d4,#0e7490)",
+    shadowColor: "rgba(6,182,212,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" />
+      </svg>
+    ),
+    href: "#",
+  },
+  {
+    id: "safety",
+    title: "안전관리",
+    gradient: "linear-gradient(135deg,#f97316,#c2410c)",
+    shadowColor: "rgba(249,115,22,.3)",
+    icon: (
+      <svg className="w-7 h-7 sm:w-8 sm:h-8 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
+      </svg>
+    ),
+    href: "#",
+  },
+];
+
+function LocalMenuIcons() {
+  const router = useRouter();
+
+  const handleClick = (item: MenuIconItem) => {
+    if (item.href === "#") {
+      alert(`${item.title} 화면은 준비 중입니다.`);
+      return;
+    }
+    router.push(item.href);
+  };
+
+  return (
+    <section>
+      <h2 className="text-xl sm:text-[22px] font-bold text-gray-900 tracking-tight mb-4">메뉴</h2>
+      <div className="flex flex-wrap justify-center gap-x-6 gap-y-5 sm:gap-x-8 sm:gap-y-6 lg:gap-x-10">
+        {MENU_ITEMS.map((item) => (
+          <div
+            key={item.id}
+            className="flex flex-col items-center gap-2 w-16 sm:w-20 cursor-pointer group"
+            style={{ WebkitTapHighlightColor: "transparent" }}
+            onClick={() => handleClick(item)}
+          >
+            <div
+              className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center transition-transform duration-150 group-hover:scale-110 group-active:scale-[0.93]"
+              style={{ background: item.gradient, boxShadow: `0 4px 12px ${item.shadowColor}` }}
+            >
+              {item.icon}
+            </div>
+            <span className="text-xs sm:text-sm font-semibold text-gray-700">{item.title}</span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default function PopMainPage() {
+  return (
+    <>
+      <KpiCarousel />
+      <LocalMenuIcons />
+      <RecentActivity />
+    </>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/cart/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/cart/page.tsx
new file mode 100644
index 00000000..6fb13dff
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/cart/page.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import { OutboundCartPage } from "../../_components/outbound/OutboundCartPage";
+
+function OutboundCartContent() {
+  const searchParams = useSearchParams();
+  const backUrl = searchParams.get("backUrl") || "/COMPANY_7/pop/outbound";
+
+  return <OutboundCartPage backUrl={backUrl} />;
+}
+
+export default function OutboundCartRoute() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center py-12 text-sm text-gray-400">
+          불러오는 중...
+        </div>
+      }
+    >
+      <OutboundCartContent />
+    </Suspense>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/etc/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/etc/page.tsx
new file mode 100644
index 00000000..6fb18a6b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/etc/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { EtcOutbound } from "../../_components/outbound/EtcOutbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function EtcOutboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("outbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/outbound/cart?backUrl=/COMPANY_7/pop/outbound/etc");
+  };
+
+  return (
+    <EtcOutbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      outboundType="기타출고"
+      sourceTable="etc_outbound_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/outbound-manage/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/outbound-manage/page.tsx
new file mode 100644
index 00000000..f4fb3d2c
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/outbound-manage/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { OutboundManage } from "../../_components/outbound/OutboundManage";
+
+export default function OutboundManagePage() {
+  return <OutboundManage />;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/page.tsx
new file mode 100644
index 00000000..d5c664d1
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/page.tsx
@@ -0,0 +1,402 @@
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface OutboundMenuItem {
+  id: string;
+  title: string;
+  gradient: string;
+  shadowColor: string;
+  icon: React.ReactNode;
+  href: string;
+}
+
+interface RecentOutboundItem {
+  id: string;
+  time: string;
+  type: string;
+  itemName: string;
+  qty: string;
+  supplier: string;
+  statusColor: string;
+  statusLabel: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Static Data (UI만)                                                  */
+/* ------------------------------------------------------------------ */
+
+const EXTERNAL_ITEMS: OutboundMenuItem[] = [
+  {
+    id: "sales",
+    title: "판매출고",
+    gradient: "linear-gradient(135deg,#22c55e,#15803d)",
+    shadowColor: "rgba(34,197,94,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/sales",
+  },
+  {
+    id: "return",
+    title: "반품출고",
+    gradient: "linear-gradient(135deg,#64748b,#334155)",
+    shadowColor: "rgba(100,116,139,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/return",
+  },
+  {
+    id: "subcontractor",
+    title: "외주출고",
+    gradient: "linear-gradient(135deg,#8b5cf6,#6d28d9)",
+    shadowColor: "rgba(139,92,246,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/subcontractor",
+  },
+  {
+    id: "supplied",
+    title: "사급출고",
+    gradient: "linear-gradient(135deg,#06b6d4,#0e7490)",
+    shadowColor: "rgba(6,182,212,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/supplied",
+  },
+  {
+    id: "etc",
+    title: "기타출고",
+    gradient: "linear-gradient(135deg,#475569,#1e293b)",
+    shadowColor: "rgba(71,85,105,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/etc",
+  },
+];
+
+const INTERNAL_ITEMS: OutboundMenuItem[] = [
+  {
+    id: "production",
+    title: "생산출고",
+    gradient: "linear-gradient(135deg,#f97316,#c2410c)",
+    shadowColor: "rgba(249,115,22,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/production",
+  },
+  {
+    id: "transfer",
+    title: "재고이동",
+    gradient: "linear-gradient(135deg,#fb923c,#ea580c)",
+    shadowColor: "rgba(251,146,60,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
+      </svg>
+    ),
+    href: "#",
+  },
+  {
+    id: "outbound-manage",
+    title: "출고관리",
+    gradient: "linear-gradient(135deg,#10b981,#047857)",
+    shadowColor: "rgba(16,185,129,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 01-2.25 2.25M16.5 7.5V18a2.25 2.25 0 002.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 002.25 2.25h13.5M6 7.5h3v3H6v-3z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/outbound/outbound-manage",
+  },
+];
+
+/* 최근 출고 정적 목업 데이터 */
+const RECENT_ITEMS: RecentOutboundItem[] = [
+  {
+    id: "1",
+    time: "10:14",
+    type: "판매출고",
+    itemName: "데모제일 20L (3공정 시연용)",
+    qty: "20 EA",
+    supplier: "거래처테스트(발주처)",
+    statusColor: "text-green-600 bg-green-50",
+    statusLabel: "완료",
+  },
+  {
+    id: "2",
+    time: "09:52",
+    type: "외주출고",
+    itemName: "용주N_CTG28_반투명",
+    qty: "10 EA",
+    supplier: "거래처테스트(발주처)",
+    statusColor: "text-gray-600 bg-gray-50",
+    statusLabel: "대기",
+  },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+function OutboundTypeSelect() {
+  const router = useRouter();
+
+  /* KPI carousel */
+  const [kpiIdx, setKpiIdx] = useState(1);
+  const kpiTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const startKpiAuto = useCallback(() => {
+    if (kpiTimerRef.current) clearInterval(kpiTimerRef.current);
+    kpiTimerRef.current = setInterval(() => setKpiIdx((p) => (p + 1) % 3), 4000);
+  }, []);
+
+  useEffect(() => {
+    startKpiAuto();
+    return () => {
+      if (kpiTimerRef.current) clearInterval(kpiTimerRef.current);
+    };
+  }, [startKpiAuto]);
+
+  const handleMenuClick = (item: OutboundMenuItem) => {
+    if (item.href === "#") {
+      alert(`${item.title} 화면은 준비 중입니다.`);
+    } else {
+      router.push(item.href);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      {/* ===== Back + Title ===== */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => router.push("/COMPANY_7/pop/main")}
+          className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+          </svg>
+        </button>
+        <div>
+          <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">출고</h1>
+          <p className="text-xs text-gray-400 mt-0.5">출고 유형을 선택하세요</p>
+        </div>
+      </div>
+
+      {/* ===== KPI Carousel ===== */}
+      <div className="relative overflow-hidden">
+        <div
+          className="flex select-none"
+          style={{
+            transform: `translateX(-${kpiIdx * 100}%)`,
+            transition: "transform 0.4s cubic-bezier(.25,.46,.45,.94)",
+          }}
+        >
+          {/* Slide 1 — 금일 출고 현황 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="금일 출고" color="text-blue-600" />
+                <KpiCell value="0" label="출고 대기" color="text-amber-600" />
+                <KpiCell value="0" label="완료" color="text-green-600" />
+              </div>
+            </div>
+          </div>
+          {/* Slide 2 — 유형별 건수 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="완료" color="text-blue-600" />
+                <KpiCell value="0" label="판매출고" color="text-purple-600" />
+                <KpiCell value="0" label="외주출고" color="text-gray-600" />
+              </div>
+            </div>
+          </div>
+          {/* Slide 3 — 수량/출고율 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="금일 수량" color="text-blue-600" unit="EA" />
+                <KpiCell value="0" label="출고율" color="text-green-600" unit="%" />
+                <KpiCell value="0" label="반품" color="text-red-600" unit="건" />
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Dots */}
+        <div className="flex justify-center gap-2 mt-3">
+          {[0, 1, 2].map((idx) => (
+            <button
+              key={idx}
+              onClick={() => {
+                setKpiIdx(idx);
+                startKpiAuto();
+              }}
+              className="border-none p-0 transition-all duration-300 cursor-pointer"
+              style={{
+                width: kpiIdx === idx ? 24 : 8,
+                height: 8,
+                borderRadius: kpiIdx === idx ? 4 : "50%",
+                background: kpiIdx === idx ? "#3b82f6" : "#D1D5DB",
+              }}
+              aria-label={`KPI 슬라이드 ${idx + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* ===== External Outbound ===== */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full bg-blue-500" />
+          <h2 className="text-base sm:text-lg font-bold text-gray-900">외부 출고</h2>
+        </div>
+        <div className="flex flex-wrap justify-start gap-x-5 gap-y-4 sm:gap-x-6 sm:gap-y-5">
+          {EXTERNAL_ITEMS.map((item) => (
+            <MenuIcon key={item.id} item={item} onClick={handleMenuClick} />
+          ))}
+        </div>
+      </section>
+
+      {/* ===== Internal Outbound ===== */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full bg-green-500" />
+          <h2 className="text-base sm:text-lg font-bold text-gray-900">내부 출고</h2>
+        </div>
+        <div className="flex flex-wrap justify-start gap-x-5 gap-y-4 sm:gap-x-6 sm:gap-y-5">
+          {INTERNAL_ITEMS.map((item) => (
+            <MenuIcon key={item.id} item={item} onClick={handleMenuClick} />
+          ))}
+        </div>
+      </section>
+
+      {/* ===== Recent Outbound ===== */}
+      <section>
+        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+          <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
+            <h3 className="text-base sm:text-lg font-bold text-gray-900">최근 출고</h3>
+            <span className="text-xs text-gray-400">최근 5건</span>
+          </div>
+          <div className="flex flex-col gap-2">
+            {RECENT_ITEMS.map((item) => (
+              <div
+                key={item.id}
+                className="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition-colors"
+              >
+                <span
+                  className="text-xs font-semibold text-gray-400 min-w-[44px] text-right"
+                  style={{ fontVariantNumeric: "tabular-nums" }}
+                >
+                  {item.time}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-semibold text-gray-900 truncate">{item.itemName}</span>
+                    <span
+                      className={`text-[10px] font-semibold px-1.5 py-0.5 rounded-full shrink-0 ${item.statusColor}`}
+                    >
+                      {item.statusLabel}
+                    </span>
+                  </div>
+                  <div className="text-xs text-gray-400 mt-0.5 truncate">
+                    {item.type} | {item.supplier} | {item.qty}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-components                                                      */
+/* ------------------------------------------------------------------ */
+
+function KpiCell({
+  value,
+  label,
+  color,
+  unit,
+}: {
+  value: string;
+  label: string;
+  color: string;
+  unit?: string;
+}) {
+  return (
+    <div className="flex flex-col items-center py-2">
+      <div className="flex items-end gap-0.5">
+        <span
+          className={`text-2xl sm:text-3xl font-extrabold leading-none ${color}`}
+          style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }}
+        >
+          {value}
+        </span>
+        {unit && <span className="text-xs text-gray-400 mb-0.5">{unit}</span>}
+      </div>
+      <span className="text-[11px] font-medium text-gray-400 mt-1">{label}</span>
+    </div>
+  );
+}
+
+function MenuIcon({
+  item,
+  onClick,
+}: {
+  item: OutboundMenuItem;
+  onClick: (item: OutboundMenuItem) => void;
+}) {
+  return (
+    <div
+      className="flex flex-col items-center gap-2 w-16 sm:w-[72px] cursor-pointer group"
+      style={{ WebkitTapHighlightColor: "transparent" }}
+      onClick={() => onClick(item)}
+    >
+      <div
+        className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center transition-transform duration-150 group-hover:scale-105 group-active:scale-[0.93]"
+        style={{ background: item.gradient, boxShadow: `0 4px 12px ${item.shadowColor}` }}
+      >
+        {item.icon}
+      </div>
+      <span className="text-[11px] sm:text-xs font-semibold text-gray-700 text-center leading-tight">
+        {item.title}
+      </span>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Page                                                                */
+/* ------------------------------------------------------------------ */
+
+export default function OutboundPage() {
+  return <OutboundTypeSelect />;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/production/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/production/page.tsx
new file mode 100644
index 00000000..714e6080
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/production/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ProductionOutbound } from "../../_components/outbound/ProductionOutbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ProductionOutboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("outbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/outbound/cart?backUrl=/COMPANY_7/pop/outbound/production");
+  };
+
+  return (
+    <ProductionOutbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      outboundType="생산출고"
+      sourceTable="production_outbound_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/return/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/return/page.tsx
new file mode 100644
index 00000000..4d121178
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/return/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { ReturnOutbound } from "../../_components/outbound/ReturnOutbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function ReturnOutboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("outbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/outbound/cart?backUrl=/COMPANY_7/pop/outbound/return");
+  };
+
+  return (
+    <ReturnOutbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      outboundType="반품출고"
+      sourceTable="return_outbound_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/sales/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/sales/page.tsx
new file mode 100644
index 00000000..d4453c91
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/sales/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { SalesOutbound } from "../../_components/outbound/SalesOutbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function SalesOutboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("outbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/outbound/cart?backUrl=/COMPANY_7/pop/outbound/sales");
+  };
+
+  return (
+    <SalesOutbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      outboundType="판매출고"
+      sourceTable="shipment_instruction_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/subcontractor/page.tsx
new file mode 100644
index 00000000..0c09b62b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/subcontractor/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { SubcontractorOutbound } from "../../_components/outbound/SubcontractorOutbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function SubcontractorOutboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("outbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/outbound/cart?backUrl=/COMPANY_7/pop/outbound/subcontractor");
+  };
+
+  return (
+    <SubcontractorOutbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      outboundType="외주출고"
+      sourceTable="outsource_outbound_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/outbound/supplied/page.tsx b/frontend/app/(main)/COMPANY_7/pop/outbound/supplied/page.tsx
new file mode 100644
index 00000000..ab011b4b
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/outbound/supplied/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { SuppliedOutbound } from "../../_components/outbound/SuppliedOutbound";
+import { useCartSync } from "../../_components/common/useCartSync";
+
+export default function SuppliedOutboundPage() {
+  const router = useRouter();
+  const cart = useCartSync("outbound");
+  const [saving, setSaving] = useState(false);
+
+  const handleCartClick = async () => {
+    if (cart.isDirty) {
+      setSaving(true);
+      const ok = await cart.saveToDb();
+      setSaving(false);
+      if (!ok) return;
+    }
+    router.push("/COMPANY_7/pop/outbound/cart?backUrl=/COMPANY_7/pop/outbound/supplied");
+  };
+
+  return (
+    <SuppliedOutbound
+      cart={cart}
+      onCartClick={handleCartClick}
+      saving={saving}
+      outboundType="사급출고"
+      sourceTable="supplied_outbound_detail"
+    />
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/production/page.tsx b/frontend/app/(main)/COMPANY_7/pop/production/page.tsx
new file mode 100644
index 00000000..da116829
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/production/page.tsx
@@ -0,0 +1,242 @@
+"use client";
+
+import React, { useState, useRef, useCallback, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+interface ProductionMenuItem {
+  id: string;
+  title: string;
+  gradient: string;
+  shadowColor: string;
+  icon: React.ReactNode;
+  href: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* Static Data                                                         */
+/* ------------------------------------------------------------------ */
+
+const MENU_ITEMS: ProductionMenuItem[] = [
+  {
+    id: "process-execution",
+    title: "공정실행",
+    gradient: "linear-gradient(135deg,#f59e0b,#d97706)",
+    shadowColor: "rgba(245,158,11,.3)",
+    icon: (
+      <svg className="w-7 h-7 text-white" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+        <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+      </svg>
+    ),
+    href: "/COMPANY_7/pop/production/process",
+  },
+];
+
+/* ------------------------------------------------------------------ */
+/* Component                                                           */
+/* ------------------------------------------------------------------ */
+
+function ProductionMenu() {
+  const router = useRouter();
+
+  /* KPI carousel */
+  const [kpiIdx, setKpiIdx] = useState(0);
+  const kpiTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const startKpiAuto = useCallback(() => {
+    if (kpiTimerRef.current) clearInterval(kpiTimerRef.current);
+    kpiTimerRef.current = setInterval(() => setKpiIdx((p) => (p + 1) % 3), 4000);
+  }, []);
+
+  useEffect(() => {
+    startKpiAuto();
+    return () => {
+      if (kpiTimerRef.current) clearInterval(kpiTimerRef.current);
+    };
+  }, [startKpiAuto]);
+
+  const handleMenuClick = (item: ProductionMenuItem) => {
+    if (item.href === "#") {
+      alert(`${item.title} 화면은 준비 중입니다.`);
+    } else {
+      router.push(item.href);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-5">
+      {/* ===== Back + Title ===== */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => router.push("/COMPANY_7/pop/main")}
+          className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+          </svg>
+        </button>
+        <div>
+          <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">생산관리</h1>
+          <p className="text-xs text-gray-400 mt-0.5">메뉴를 선택하세요</p>
+        </div>
+      </div>
+
+      {/* ===== KPI Carousel ===== */}
+      <div className="relative overflow-hidden">
+        <div
+          className="flex select-none"
+          style={{
+            transform: `translateX(-${kpiIdx * 100}%)`,
+            transition: "transform 0.4s cubic-bezier(.25,.46,.45,.94)",
+          }}
+        >
+          {/* Slide 1 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="금일 생산" color="text-amber-600" />
+                <KpiCell value="0" label="진행 중" color="text-blue-600" />
+                <KpiCell value="0" label="완료" color="text-green-600" />
+              </div>
+            </div>
+          </div>
+          {/* Slide 2 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="작업지시" color="text-amber-600" unit="건" />
+                <KpiCell value="0" label="공정완료" color="text-green-600" unit="건" />
+                <KpiCell value="0" label="불량" color="text-red-600" unit="건" />
+              </div>
+            </div>
+          </div>
+          {/* Slide 3 */}
+          <div className="min-w-full shrink-0">
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+              <div className="grid grid-cols-3 gap-0">
+                <KpiCell value="0" label="금일 수량" color="text-amber-600" unit="EA" />
+                <KpiCell value="0" label="달성률" color="text-green-600" unit="%" />
+                <KpiCell value="0" label="불량률" color="text-red-600" unit="%" />
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Dots */}
+        <div className="flex justify-center gap-2 mt-3">
+          {[0, 1, 2].map((idx) => (
+            <button
+              key={idx}
+              onClick={() => {
+                setKpiIdx(idx);
+                startKpiAuto();
+              }}
+              className="border-none p-0 transition-all duration-300 cursor-pointer"
+              style={{
+                width: kpiIdx === idx ? 24 : 8,
+                height: 8,
+                borderRadius: kpiIdx === idx ? 4 : "50%",
+                background: kpiIdx === idx ? "#f59e0b" : "#D1D5DB",
+              }}
+              aria-label={`KPI 슬라이드 ${idx + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* ===== Production Menu ===== */}
+      <section>
+        <div className="flex items-center gap-2 mb-3">
+          <div className="w-1 h-5 rounded-full bg-amber-500" />
+          <h2 className="text-base sm:text-lg font-bold text-gray-900">생산 메뉴</h2>
+        </div>
+        <div className="flex flex-wrap justify-start gap-x-5 gap-y-4 sm:gap-x-6 sm:gap-y-5">
+          {MENU_ITEMS.map((item) => (
+            <MenuIcon key={item.id} item={item} onClick={handleMenuClick} />
+          ))}
+        </div>
+      </section>
+
+      {/* ===== Recent Activity ===== */}
+      <section>
+        <div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 sm:p-5">
+          <div className="flex items-center justify-between mb-4 pb-3 border-b border-gray-100">
+            <h3 className="text-base sm:text-lg font-bold text-gray-900">최근 생산활동</h3>
+            <span className="text-xs text-gray-400">최근 5건</span>
+          </div>
+          <div className="flex items-center justify-center py-8">
+            <p className="text-sm text-gray-400">최근 생산활동 내역이 없습니다</p>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Sub-components                                                      */
+/* ------------------------------------------------------------------ */
+
+function KpiCell({
+  value,
+  label,
+  color,
+  unit,
+}: {
+  value: string;
+  label: string;
+  color: string;
+  unit?: string;
+}) {
+  return (
+    <div className="flex flex-col items-center py-2">
+      <div className="flex items-end gap-0.5">
+        <span
+          className={`text-2xl sm:text-3xl font-extrabold leading-none ${color}`}
+          style={{ fontVariantNumeric: "tabular-nums", letterSpacing: "-0.02em" }}
+        >
+          {value}
+        </span>
+        {unit && <span className="text-xs text-gray-400 mb-0.5">{unit}</span>}
+      </div>
+      <span className="text-[11px] font-medium text-gray-400 mt-1">{label}</span>
+    </div>
+  );
+}
+
+function MenuIcon({
+  item,
+  onClick,
+}: {
+  item: ProductionMenuItem;
+  onClick: (item: ProductionMenuItem) => void;
+}) {
+  return (
+    <div
+      className="flex flex-col items-center gap-2 w-16 sm:w-[72px] cursor-pointer group"
+      style={{ WebkitTapHighlightColor: "transparent" }}
+      onClick={() => onClick(item)}
+    >
+      <div
+        className="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl flex items-center justify-center transition-transform duration-150 group-hover:scale-105 group-active:scale-[0.93]"
+        style={{ background: item.gradient, boxShadow: `0 4px 12px ${item.shadowColor}` }}
+      >
+        {item.icon}
+      </div>
+      <span className="text-[11px] sm:text-xs font-semibold text-gray-700 text-center leading-tight">
+        {item.title}
+      </span>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/* Page                                                                */
+/* ------------------------------------------------------------------ */
+
+export default function ProductionPage() {
+  return <ProductionMenu />;
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/production/process/page.tsx b/frontend/app/(main)/COMPANY_7/pop/production/process/page.tsx
new file mode 100644
index 00000000..cec6c597
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/production/process/page.tsx
@@ -0,0 +1,326 @@
+"use client";
+
+import React, { useState, useEffect, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { SupplierModal, type Supplier, type PartnerSourceConfig } from "../../_components/inbound/SupplierModal";
+import { EquipmentModal, type EquipmentItem } from "../../_components/common/EquipmentModal";
+import { getProcessEquipments } from "@/lib/api/processInfo";
+import { useProcessData } from "../../_components/production/useProcessData";
+import { WorkOrderList } from "../../_components/production/WorkOrderList";
+
+/* ------------------------------------------------------------------ */
+/* Types                                                               */
+/* ------------------------------------------------------------------ */
+
+type ColsKey = 1 | 2 | 3;
+
+/** process_mng 테이블 소스 설정 — SupplierModal에 전달하여 공정 목록 조회 */
+const PROCESS_SOURCE: PartnerSourceConfig = {
+  tableName: "process_mng",
+  fields: {
+    code: "process_code",
+    name: "process_name",
+  },
+};
+
+/* ------------------------------------------------------------------ */
+/* Static Data                                                         */
+/* ------------------------------------------------------------------ */
+
+const COLS_OPTIONS: ColsKey[] = [1, 2, 3];
+/** 신규 POP 전용 카드 열 localStorage 키 (구 POP `workorder-card-cols`와 독립) */
+const POP_NEW_COLS_KEY = "pop-new-workorder-cols";
+/** 신규 POP 공정실행 목록 상태 sessionStorage 키 (라우트 이동 후 복원) */
+const POP_NEW_PROD_STATE_KEY = "pop-new-production-process-state";
+const DEFAULT_COLS: ColsKey = 2;
+
+/* ------------------------------------------------------------------ */
+/* Page                                                                */
+/* ------------------------------------------------------------------ */
+
+export default function ProductionProcessPage() {
+  const router = useRouter();
+
+  /* 카드 열 수 (localStorage 연동) */
+  const [cols, setCols] = useState<ColsKey>(DEFAULT_COLS);
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(POP_NEW_COLS_KEY);
+      if (saved) {
+        const n = parseInt(saved, 10) as ColsKey;
+        if (COLS_OPTIONS.includes(n)) setCols(n);
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+  const handleSetCols = (n: ColsKey) => {
+    setCols(n);
+    try {
+      localStorage.setItem(POP_NEW_COLS_KEY, String(n));
+    } catch {
+      // ignore
+    }
+  };
+
+  /* 필터 상태 */
+  const [selectedProcess, setSelectedProcess] = useState<Supplier | null>(null);
+  const [processModalOpen, setProcessModalOpen] = useState(false);
+  const [selectedEquipment, setSelectedEquipment] = useState<EquipmentItem | null>(null);
+  const [equipmentModalOpen, setEquipmentModalOpen] = useState(false);
+  const [equipments, setEquipments] = useState<EquipmentItem[]>([]);
+  const [equipmentLoading, setEquipmentLoading] = useState(false);
+
+  /* 마운트 시 selectedProcess 복원 (selectedEquipment는 equipments 로딩 완료 후 2단계 복원) */
+  useEffect(() => {
+    try {
+      const saved = sessionStorage.getItem(POP_NEW_PROD_STATE_KEY);
+      if (!saved) return;
+      const parsed = JSON.parse(saved);
+      if (parsed.selectedProcess && parsed.selectedProcess.customer_code) {
+        setSelectedProcess(parsed.selectedProcess as Supplier);
+      }
+    } catch {
+      // ignore
+    }
+  }, []);
+
+  /* selectedProcess 변경 시 sessionStorage 머지 저장 */
+  useEffect(() => {
+    try {
+      const existing = JSON.parse(
+        sessionStorage.getItem(POP_NEW_PROD_STATE_KEY) || "{}",
+      );
+      sessionStorage.setItem(
+        POP_NEW_PROD_STATE_KEY,
+        JSON.stringify({ ...existing, selectedProcess }),
+      );
+    } catch {
+      // ignore
+    }
+  }, [selectedProcess]);
+
+  /* selectedEquipment 변경 시 sessionStorage 머지 저장 */
+  useEffect(() => {
+    try {
+      const existing = JSON.parse(
+        sessionStorage.getItem(POP_NEW_PROD_STATE_KEY) || "{}",
+      );
+      sessionStorage.setItem(
+        POP_NEW_PROD_STATE_KEY,
+        JSON.stringify({ ...existing, selectedEquipment }),
+      );
+    } catch {
+      // ignore
+    }
+  }, [selectedEquipment]);
+
+  /* equipments 로딩 완료 후 selectedEquipment 1회 복원 */
+  const equipRestoredRef = useRef(false);
+  useEffect(() => {
+    if (equipRestoredRef.current) return;
+    if (equipmentLoading) return;
+    if (equipments.length === 0) return;
+    try {
+      const saved = sessionStorage.getItem(POP_NEW_PROD_STATE_KEY);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+        const savedEq = parsed.selectedEquipment as EquipmentItem | null;
+        if (savedEq && savedEq.id) {
+          const found = equipments.find((e) => e.id === savedEq.id);
+          if (found) setSelectedEquipment(found);
+        }
+      }
+    } catch {
+      // ignore
+    }
+    equipRestoredRef.current = true;
+  }, [equipmentLoading, equipments]);
+
+  /* 공정 변경 시 해당 공정 등록 설비 조회 */
+  useEffect(() => {
+    if (!selectedProcess?.customer_code) {
+      setEquipments([]);
+      setSelectedEquipment(null);
+      return;
+    }
+    let cancelled = false;
+    setEquipmentLoading(true);
+    getProcessEquipments(selectedProcess.customer_code)
+      .then((res) => {
+        if (cancelled) return;
+        if (res.success && Array.isArray(res.data)) {
+          const list: EquipmentItem[] = res.data.map((e) => ({
+            id: String(e.id ?? ""),
+            equipment_code: String(e.equipment_code ?? ""),
+            equipment_name: String(e.equipment_name ?? e.equipment_code ?? ""),
+          }));
+          setEquipments(list);
+        } else {
+          setEquipments([]);
+        }
+        setSelectedEquipment(null);
+      })
+      .finally(() => {
+        if (!cancelled) setEquipmentLoading(false);
+      });
+    return () => { cancelled = true; };
+  }, [selectedProcess?.customer_code]);
+
+  const equipmentDisabled = !selectedProcess;
+
+  /* 데이터 훅 — 진입 시 1회 sync, refresh/refetch 제공 */
+  const {
+    instructions,
+    allProcesses,
+    processList,
+    equipmentList,
+    itemNameMap,
+    itemTypeMap,
+    loading,
+    syncing,
+    refresh,
+    refetch,
+  } = useProcessData();
+
+  /* WorkOrderList용 문자열 필터값 ("__all__" 또는 code) */
+  const selectedProcessCode = selectedProcess?.customer_code || "__all__";
+  const selectedEquipmentCode = selectedEquipment?.equipment_code || "__all__";
+
+  return (
+    <div className="flex flex-col gap-4">
+      {/* ===== Back + Title ===== */}
+      <div className="flex items-center gap-3">
+        <button
+          onClick={() => router.push("/COMPANY_7/pop/production")}
+          className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+        >
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+          </svg>
+        </button>
+        <h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">공정실행</h1>
+      </div>
+
+      {/* ===== Top Row: Card Cols + Refresh ===== */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium text-gray-600">카드 열:</span>
+          <div className="flex items-center gap-1">
+            {COLS_OPTIONS.map((c) => (
+              <button
+                key={c}
+                onClick={() => handleSetCols(c)}
+                className={`w-10 h-10 rounded-lg text-sm font-semibold transition-all active:scale-95 ${
+                  cols === c
+                    ? "bg-blue-500 text-white shadow-sm"
+                    : "bg-white text-gray-700 border border-gray-200 hover:bg-gray-50"
+                }`}
+              >
+                {c}열
+              </button>
+            ))}
+          </div>
+        </div>
+        <button
+          onClick={refresh}
+          disabled={syncing}
+          className="flex items-center gap-2 px-4 h-10 rounded-lg bg-white border border-blue-300 text-blue-600 text-sm font-semibold hover:bg-blue-50 active:scale-95 transition-all disabled:opacity-50"
+        >
+          <svg
+            className={`w-4 h-4 ${syncing ? "animate-spin" : ""}`}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={2}
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
+            />
+          </svg>
+          <span>{syncing ? "동기화중..." : "새로고침"}</span>
+        </button>
+      </div>
+
+      {/* ===== Filter Row: Process + Equipment ===== */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        <button
+          onClick={() => setProcessModalOpen(true)}
+          className="flex items-center gap-2 h-14 px-4 bg-white border border-gray-200 rounded-xl text-left hover:bg-gray-50 active:scale-[0.99] transition-all"
+        >
+          <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" strokeWidth={1.8} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+          <span className={`flex-1 text-sm ${selectedProcess ? "text-gray-900 font-semibold" : "text-gray-400"}`}>
+            {selectedProcess ? selectedProcess.customer_name : "공정을 선택하세요"}
+          </span>
+          <svg className="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </button>
+        <button
+          onClick={() => { if (!equipmentDisabled) setEquipmentModalOpen(true); }}
+          disabled={equipmentDisabled}
+          className={`flex items-center gap-2 h-14 px-4 bg-white border border-gray-200 rounded-xl text-left transition-all ${
+            equipmentDisabled
+              ? "opacity-60 cursor-not-allowed"
+              : "hover:bg-gray-50 active:scale-[0.99]"
+          }`}
+        >
+          <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" strokeWidth={1.8} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3 3v1.5M3 21v-6m0 0l2.77-.693a9 9 0 016.208.682l.108.054a9 9 0 006.086.71l3.114-.732a48.524 48.524 0 01-.005-10.499l-3.11.732a9 9 0 01-6.085-.711l-.108-.054a9 9 0 00-6.208-.682L3 4.5M3 15V4.5" />
+          </svg>
+          <span className={`flex-1 text-sm ${selectedEquipment ? "text-gray-900 font-semibold" : "text-gray-400"}`}>
+            {selectedEquipment
+              ? selectedEquipment.equipment_name
+              : equipmentDisabled
+              ? "공정 선택 후 설비 선택"
+              : "설비를 선택하세요"}
+          </span>
+          <svg className="w-5 h-5 text-gray-400 shrink-0" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+          </svg>
+        </button>
+      </div>
+
+      {/* ===== Work Order List (복사된 구 POP 컴포넌트, 플랜 A-2b로 props 리팩터됨) ===== */}
+      <WorkOrderList
+        instructions={instructions}
+        allProcesses={allProcesses}
+        processList={processList}
+        equipmentList={equipmentList}
+        itemNameMap={itemNameMap}
+        itemTypeMap={itemTypeMap}
+        loading={loading}
+        selectedProcess={selectedProcessCode}
+        selectedEquipment={selectedEquipmentCode}
+        cardCols={cols}
+        refetch={refetch}
+      />
+
+      {/* ===== Process Selection Modal ===== */}
+      <SupplierModal
+        open={processModalOpen}
+        onClose={() => setProcessModalOpen(false)}
+        onSelect={(s) => setSelectedProcess(s)}
+        source={PROCESS_SOURCE}
+        title="공정 선택"
+        searchPlaceholder="공정명 또는 코드 검색..."
+      />
+
+      {/* ===== Equipment Selection Modal ===== */}
+      <EquipmentModal
+        open={equipmentModalOpen}
+        onClose={() => setEquipmentModalOpen(false)}
+        onSelect={(e) => setSelectedEquipment(e)}
+        items={equipments}
+        loading={equipmentLoading}
+        title="설비 선택"
+        searchPlaceholder="설비명 또는 코드 검색..."
+      />
+    </div>
+  );
+}
diff --git a/frontend/app/(main)/COMPANY_7/pop/production/work/[processId]/page.tsx b/frontend/app/(main)/COMPANY_7/pop/production/work/[processId]/page.tsx
new file mode 100644
index 00000000..e25f9588
--- /dev/null
+++ b/frontend/app/(main)/COMPANY_7/pop/production/work/[processId]/page.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+import { useState } from "react";
+import {
+	ProcessWork,
+	type ProcessWorkInfo,
+} from "../../../_components/production/ProcessWork";
+
+export default function WorkPage() {
+	const params = useParams();
+	const router = useRouter();
+	const processId = params.processId as string;
+	const [info, setInfo] = useState<ProcessWorkInfo | null>(null);
+
+	const statusBadge = (() => {
+		if (!info) return null;
+		if (info.isCompleted) {
+			return { text: "완료", cls: "bg-green-100 text-green-700" };
+		}
+		if (info.status === "in_progress") {
+			return { text: "진행중", cls: "bg-blue-100 text-blue-700" };
+		}
+		return { text: info.status ?? "-", cls: "bg-gray-100 text-gray-600" };
+	})();
+
+	return (
+		<div className="flex flex-col gap-4 flex-1 min-h-0">
+			{/* ===== Back + Title + Status row ===== */}
+			<div className="flex items-center gap-3">
+				<button
+					onClick={() => router.push("/COMPANY_7/pop/production/process")}
+					className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
+				>
+					<svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+						<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+					</svg>
+				</button>
+				<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">공정 작업</h1>
+				<div className="flex-1" />
+				{info && (
+					<div className="flex items-center gap-4">
+						<span className="inline-flex items-center gap-1.5">
+							<span className="text-blue-700/70 text-xl font-medium">지시</span>
+							<span className="text-blue-700 text-4xl font-bold">{info.planQty.toLocaleString()}</span>
+						</span>
+						<span className="inline-flex items-center gap-1.5">
+							<span className="text-amber-500/70 text-xl font-medium">접수</span>
+							<span className="text-amber-500 text-4xl font-bold">{info.inputQty.toLocaleString()}</span>
+						</span>
+					</div>
+				)}
+				<div className="flex-1" />
+				{statusBadge && (
+					<span
+						className={`rounded-full px-5 py-2 text-lg font-bold ${statusBadge.cls}`}
+					>
+						{statusBadge.text}
+					</span>
+				)}
+			</div>
+			<ProcessWork
+				processId={processId}
+				onInfoChange={setInfo}
+				hideInlineStatus
+			/>
+		</div>
+	);
+}
diff --git a/frontend/app/(main)/COMPANY_8/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/inbound-outbound/page.tsx
index a6cf4b13..a80772f1 100644
--- a/frontend/app/(main)/COMPANY_8/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_8/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx
index 740ecf68..b89834f2 100644
--- a/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_8/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -118,6 +119,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -752,7 +760,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/COMPANY_9/logistics/inbound-outbound/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/inbound-outbound/page.tsx
index bbad370b..271cdb78 100644
--- a/frontend/app/(main)/COMPANY_9/logistics/inbound-outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_9/logistics/inbound-outbound/page.tsx
@@ -23,6 +23,7 @@ import { useAuth } from "@/hooks/useAuth";
 import { toast } from "sonner";
 import { exportToExcel } from "@/lib/utils/excelExport";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 
 const HISTORY_TABLE = "inventory_history";
 
@@ -65,6 +66,13 @@ const parseRemark = (remark: string | null | undefined): string => {
 export default function InboundOutboundPage() {
   const { user } = useAuth();
 
+  // remark의 value_code → value_label 변환용 카테고리 맵 (상위 parseRemark 를 shadow)
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [searchFilters, setSearchFilters] = useState<FilterValue[]>([]);
diff --git a/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx
index 73a8c8b3..69bbad1a 100644
--- a/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_9/logistics/inventory/page.tsx
@@ -9,7 +9,7 @@
  * ★ 재고 직접 등록/삭제 불가 — 입출고를 통해서만 변동, 조정만 가능
  */
 
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -62,6 +62,7 @@ import { TableSettingsModal } from "@/components/common/TableSettingsModal";
 import { DynamicSearchFilter, FilterValue } from "@/components/common/DynamicSearchFilter";
 import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { toast } from "sonner";
+import { useCategoryLabelMap, makeParseRemark } from "@/lib/categoryLabel";
 import { exportToExcel } from "@/lib/utils/excelExport";
 
 const STOCK_TABLE = "inventory_stock";
@@ -118,6 +119,13 @@ export default function InventoryStatusPage() {
   const { user } = useAuth();
   const ts = useTableSettings("c16-inventory", STOCK_TABLE, STOCK_COLUMNS);
 
+  // remark의 value_code → value_label 변환 파서
+  const codeLabelMap = useCategoryLabelMap([
+    { table: "inbound_mng", column: "inbound_type" },
+    { table: "outbound_mng", column: "outbound_type" },
+  ]);
+  const parseRemark = useMemo(() => makeParseRemark(codeLabelMap), [codeLabelMap]);
+
   // 좌측: 재고 목록
   const [stockItems, setStockItems] = useState<any[]>([]);
   const [stockLoading, setStockLoading] = useState(false);
@@ -750,7 +758,7 @@ export default function InventoryStatusPage() {
                               {h.reference_number || h.reference_no || ""}
                             </TableCell>
                             <TableCell className="truncate max-w-[150px]">
-                              {h.remark || h.reason || ""}
+                              {parseRemark(h.remark) || h.reason || ""}
                             </TableCell>
                             <TableCell>{userMap[h.writer] || userMap[h.created_by] || h.writer || h.created_by || ""}</TableCell>
                           </TableRow>
diff --git a/frontend/app/(main)/layout.tsx b/frontend/app/(main)/layout.tsx
index fe7f5661..ddc15372 100644
--- a/frontend/app/(main)/layout.tsx
+++ b/frontend/app/(main)/layout.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { usePathname } from "next/navigation";
 import { AuthProvider } from "@/contexts/AuthContext";
 import { MenuProvider } from "@/contexts/MenuContext";
 import { MessengerProvider } from "@/contexts/MessengerContext";
@@ -8,6 +11,13 @@ import { MessengerFAB } from "@/components/messenger/MessengerFAB";
 import { MessengerModal } from "@/components/messenger/MessengerModal";
 
 export default function MainLayout({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const isPop = pathname.includes("/pop/") || pathname.endsWith("/pop");
+
+  if (isPop) {
+    return <>{children}</>;
+  }
+
   return (
     <AuthProvider>
       <MenuProvider>
diff --git a/frontend/components/layout/AppLayout.tsx b/frontend/components/layout/AppLayout.tsx
index 9ad75f38..4dd25c95 100644
--- a/frontend/components/layout/AppLayout.tsx
+++ b/frontend/components/layout/AppLayout.tsx
@@ -523,6 +523,15 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   // POP 모드 진입 핸들러
   const handlePopModeClick = async () => {
     try {
+      // PC → POP 전환 시 전체화면 적용
+      try {
+        if (!document.fullscreenElement) {
+          await document.documentElement.requestFullscreen();
+        }
+      } catch {
+        // 전체화면 미지원 또는 거부 시 무시
+      }
+
       const response = await menuApi.getPopMenus();
       if (response.success && response.data) {
         const { childMenus, landingMenu } = response.data;
diff --git a/frontend/hooks/pop/useCartSync.ts b/frontend/hooks/pop/useCartSync.ts
index d0fe5b04..3d054604 100644
--- a/frontend/hooks/pop/useCartSync.ts
+++ b/frontend/hooks/pop/useCartSync.ts
@@ -4,17 +4,17 @@
  * DB(cart_items 테이블) <-> 로컬 상태를 동기화하고 변경사항(dirty)을 감지한다.
  *
  * 동작 방식:
- * 1. 마운트 시 DB에서 해당 screen_id + user_id의 장바구니를 로드
+ * 1. 마운트 시 DB에서 해당 카테고리(inbound/outbound)의 장바구니를 로드
  * 2. addItem/removeItem/updateItem은 로컬 상태만 변경 (DB 미반영, dirty 상태)
  * 3. saveToDb 호출 시 로컬 상태를 DB에 일괄 반영 (추가/수정/삭제)
  * 4. isDirty = 로컬 상태와 DB 마지막 로드 상태의 차이 존재 여부
  *
  * 사용 예시:
  * ```typescript
- * const cart = useCartSync("SCR-001", "item_info");
+ * const cart = useCartSync("inbound");
  *
- * // 품목 추가 (로컬만, DB 미반영)
- * cart.addItem({ row, quantity: 10 }, "D1710008");
+ * // 품목 추가 (로컬만, DB 미반영) — sourceTable은 항목별로 전달
+ * cart.addItem({ row, quantity: 10 }, "D1710008", "purchase_detail");
  *
  * // DB 저장 (pop-icon 확인 모달에서 호출)
  * await cart.saveToDb();
@@ -40,6 +40,8 @@ export interface CartChanges {
 	toDelete: (string | number)[];
 }
 
+export type CartCategory = "inbound" | "outbound";
+
 export interface UseCartSyncReturn {
 	cartItems: CartItemWithId[];
 	savedItems: CartItemWithId[];
@@ -48,7 +50,7 @@ export interface UseCartSyncReturn {
 	isDirty: boolean;
 	loading: boolean;
 
-	addItem: (item: CartItem, rowKey: string) => void;
+	addItem: (item: CartItem, rowKey: string, sourceTable?: string) => void;
 	removeItem: (rowKey: string) => void;
 	updateItemQuantity: (
 		rowKey: string,
@@ -111,8 +113,9 @@ function dbRowToCartItem(dbRow: Record<string, unknown>): CartItemWithId {
 
 function cartItemToDbRecord(
 	item: CartItemWithId,
-	screenId: string,
+	cartType: string,
 	selectedColumns?: string[],
+	screenId?: string,
 ): Record<string, unknown> {
 	const rowData =
 		selectedColumns && selectedColumns.length > 0
@@ -121,9 +124,8 @@ function cartItemToDbRecord(
 				)
 			: item.row;
 
-	return {
-		cart_type: "pop",
-		screen_id: screenId,
+	const record: Record<string, unknown> = {
+		cart_type: cartType,
 		source_table: item.sourceTable,
 		row_key: item.rowKey,
 		row_data: JSON.stringify(rowData),
@@ -136,6 +138,11 @@ function cartItemToDbRecord(
 		status: item.status,
 		memo: item.memo || "",
 	};
+	// 레거시 모드: screen_id 포함
+	if (screenId) {
+		record.screen_id = screenId;
+	}
+	return record;
 }
 
 // ===== dirty check: 두 배열의 내용이 동일한지 비교 =====
@@ -157,32 +164,48 @@ function areItemsEqual(a: CartItemWithId[], b: CartItemWithId[]): boolean {
 
 // ===== 훅 본체 =====
 
+// 오버로드: 카테고리 기반 (신규) + 레거시 screen_id 기반 (PopCardListComponent 등)
+export function useCartSync(category: CartCategory): UseCartSyncReturn;
+export function useCartSync(screenId: string, sourceTable: string): UseCartSyncReturn;
 export function useCartSync(
-	screenId: string,
-	sourceTable: string,
+	categoryOrScreenId: string,
+	sourceTable?: string,
 ): UseCartSyncReturn {
+	// 레거시 호출 감지: 2번째 인자가 있으면 구 시그니처 (screen_id 기반)
+	const isLegacy = sourceTable !== undefined;
+	const cartTypeValue = isLegacy ? "pop" : `pop_${categoryOrScreenId}`;
+	const screenIdValue = isLegacy ? categoryOrScreenId : undefined;
+	const legacySourceTable = isLegacy ? sourceTable : undefined;
+
 	const [cartItems, setCartItems] = useState<CartItemWithId[]>([]);
 	const [savedItems, setSavedItems] = useState<CartItemWithId[]>([]);
 	const [syncStatus, setSyncStatus] = useState<CartSyncStatus>("clean");
 	const [loading, setLoading] = useState(false);
 
-	const screenIdRef = useRef(screenId);
-	const sourceTableRef = useRef(sourceTable);
-	screenIdRef.current = screenId;
-	sourceTableRef.current = sourceTable;
+	const categoryRef = useRef(categoryOrScreenId);
+	categoryRef.current = categoryOrScreenId;
+	const cartTypeRef = useRef(cartTypeValue);
+	cartTypeRef.current = cartTypeValue;
+	const legacySourceTableRef = useRef(legacySourceTable);
+	legacySourceTableRef.current = legacySourceTable;
 
 	// ----- DB에서 장바구니 로드 -----
 	const loadFromDb = useCallback(async () => {
-		if (!screenId || !sourceTable) return;
+		if (!categoryOrScreenId) return;
 		setLoading(true);
 		try {
+			const filters: Record<string, string> = {
+				cart_type: cartTypeValue,
+				status: "in_cart",
+			};
+			// 레거시: screen_id로 필터링
+			if (screenIdValue) {
+				filters.screen_id = screenIdValue;
+			}
+
 			const result = await dataApi.getTableData("cart_items", {
 				size: 500,
-				filters: {
-					screen_id: screenId,
-					cart_type: "pop",
-					status: "in_cart",
-				},
+				filters,
 			});
 
 			const items = (result.data || []).map(dbRowToCartItem);
@@ -194,7 +217,7 @@ export function useCartSync(
 		} finally {
 			setLoading(false);
 		}
-	}, [screenId, sourceTable]);
+	}, [categoryOrScreenId, cartTypeValue, screenIdValue]);
 
 	// 마운트 시 자동 로드
 	useEffect(() => {
@@ -213,7 +236,7 @@ export function useCartSync(
 
 	// ----- 로컬 조작 (DB 미반영) -----
 
-	const addItem = useCallback((item: CartItem, rowKey: string) => {
+	const addItem = useCallback((item: CartItem, rowKey: string, sourceTable?: string) => {
 		setCartItems((prev) => {
 			const exists = prev.find((i) => i.rowKey === rowKey);
 			if (exists) {
@@ -232,7 +255,7 @@ export function useCartSync(
 			const newItem: CartItemWithId = {
 				...item,
 				cartId: undefined,
-				sourceTable: sourceTableRef.current,
+				sourceTable: sourceTable || legacySourceTableRef.current || "",
 				rowKey,
 				status: "in_cart",
 				_origin: "local",
@@ -293,7 +316,8 @@ export function useCartSync(
 	// ----- diff 계산 (백엔드 전송용) -----
 	const getChanges = useCallback(
 		(selectedColumns?: string[]): CartChanges => {
-			const currentScreenId = screenIdRef.current;
+			const currentCartType = cartTypeRef.current;
+			const currentScreenId = isLegacy ? categoryRef.current : undefined;
 
 			const cartRowKeys = new Set(cartItems.map((i) => i.rowKey));
 			const toDeleteItems = savedItems.filter(
@@ -306,7 +330,6 @@ export function useCartSync(
 				if (!c.cartId) return false;
 				const saved = savedMap.get(c.rowKey);
 				if (!saved) return false;
-				// row JSON 비교 (검사 결과 등 포함)
 				const rowChanged = JSON.stringify(c.row) !== JSON.stringify(saved.row);
 				return (
 					c.quantity !== saved.quantity ||
@@ -318,11 +341,11 @@ export function useCartSync(
 
 			return {
 				toCreate: toCreateItems.map((item) =>
-					cartItemToDbRecord(item, currentScreenId, selectedColumns),
+					cartItemToDbRecord(item, currentCartType, selectedColumns, currentScreenId),
 				),
 				toUpdate: toUpdateItems.map((item) => ({
 					id: item.cartId,
-					...cartItemToDbRecord(item, currentScreenId, selectedColumns),
+					...cartItemToDbRecord(item, currentCartType, selectedColumns, currentScreenId),
 				})),
 				toDelete: toDeleteItems.map((item) => item.cartId!),
 			};
@@ -335,7 +358,8 @@ export function useCartSync(
 		async (selectedColumns?: string[]): Promise<boolean> => {
 			setSyncStatus("saving");
 			try {
-				const currentScreenId = screenIdRef.current;
+				const currentCartType = cartTypeRef.current;
+				const currentScreenId = isLegacy ? categoryRef.current : undefined;
 
 				// 삭제 대상: savedItems에 있지만 cartItems에 없는 것
 				const cartRowKeys = new Set(cartItems.map((i) => i.rowKey));
@@ -375,8 +399,9 @@ export function useCartSync(
 				for (const item of toCreate) {
 					const record = cartItemToDbRecord(
 						item,
-						currentScreenId,
+						currentCartType,
 						selectedColumns,
+						currentScreenId,
 					);
 					// cart_items.id는 NOT NULL + 자동생성 없음 → UUID 직접 생성
 					const recordWithId = { id: crypto.randomUUID(), ...record };
@@ -386,8 +411,9 @@ export function useCartSync(
 				for (const item of toUpdate) {
 					const record = cartItemToDbRecord(
 						item,
-						currentScreenId,
+						currentCartType,
 						selectedColumns,
+						currentScreenId,
 					);
 					promises.push(
 						dataApi.updateRecord("cart_items", item.cartId!, record),
diff --git a/frontend/hooks/pop/usePopSettings.ts b/frontend/hooks/pop/usePopSettings.ts
index 6eafa9cd..b81ae3d5 100644
--- a/frontend/hooks/pop/usePopSettings.ts
+++ b/frontend/hooks/pop/usePopSettings.ts
@@ -120,6 +120,7 @@ const POP_SCREEN_MAP: Record<string, number> = {
   "/pop/outbound/sales": 5,
   "/pop/production": 8,
   "/pop/production/process": 7,
+  "/COMPANY_7/pop/production/process": 7,
 };
 
 // URL -> settingsKey mapping
@@ -132,6 +133,7 @@ const PATH_TO_SETTINGS_KEY: Record<string, keyof PopSettings["screens"]> = {
   "/pop/outbound/sales": "outbound",
   "/pop/production": "processExecution",
   "/pop/production/process": "processExecution",
+  "/COMPANY_7/pop/production/process": "processExecution",
 };
 
 function getScreenIdFromPath(pathname: string): number | null {
diff --git a/frontend/hooks/useLogin.ts b/frontend/hooks/useLogin.ts
index d52bc0d3..ec79203e 100644
--- a/frontend/hooks/useLogin.ts
+++ b/frontend/hooks/useLogin.ts
@@ -132,6 +132,14 @@ export const useLogin = () => {
           if (isPopMode) {
             const popPath = result.data?.popLandingPath;
             if (popPath) {
+              // POP 모드 로그인 시 전체화면 전환 시도
+              try {
+                if (!document.fullscreenElement) {
+                  await document.documentElement.requestFullscreen();
+                }
+              } catch {
+                // 전체화면 미지원 또는 거부 시 무시
+              }
               router.push(popPath);
             } else {
               setError("POP 화면이 설정되어 있지 않습니다. 관리자에게 메뉴 관리에서 POP 화면을 설정해달라고 요청하세요.");
diff --git a/frontend/lib/api/packaging.ts b/frontend/lib/api/packaging.ts
index 767d5c62..b172bb10 100644
--- a/frontend/lib/api/packaging.ts
+++ b/frontend/lib/api/packaging.ts
@@ -100,6 +100,28 @@ export async function deletePkgUnit(id: string) {
   return res.data as { success: boolean; message?: string };
 }
 
+// --- 품목별 포장단위 조회 API ---
+
+export interface PkgUnitByItem {
+  id: string;
+  pkg_code: string;
+  pkg_name: string;
+  pkg_type: string;
+  status: string;
+  width_mm: number | null;
+  length_mm: number | null;
+  height_mm: number | null;
+  self_weight_kg: number | null;
+  max_load_kg: number | null;
+  volume_l: number | null;
+  pkg_qty: number;
+}
+
+export async function getPkgUnitsByItem(itemNumber: string) {
+  const res = await apiClient.get(`/packaging/pkg-units-by-item/${encodeURIComponent(itemNumber)}`);
+  return res.data as { success: boolean; data: PkgUnitByItem[] };
+}
+
 // --- 포장단위 매칭품목 API ---
 
 export async function getPkgUnitItems(pkgCode: string) {
@@ -117,6 +139,29 @@ export async function deletePkgUnitItem(id: string) {
   return res.data as { success: boolean; message?: string };
 }
 
+// --- 포장코드별 적재함 조회 API ---
+
+export interface LoadingUnitByPkg {
+  id: string;
+  loading_code: string;
+  loading_name: string;
+  loading_type: string;
+  status: string;
+  width_mm: number | null;
+  length_mm: number | null;
+  height_mm: number | null;
+  self_weight_kg: number | null;
+  max_load_kg: number | null;
+  max_stack: number | null;
+  max_load_qty: number;
+  load_method: string | null;
+}
+
+export async function getLoadingUnitsByPkg(pkgCode: string) {
+  const res = await apiClient.get(`/packaging/loading-units-by-pkg/${encodeURIComponent(pkgCode)}`);
+  return res.data as { success: boolean; data: LoadingUnitByPkg[] };
+}
+
 // --- 적재함 API ---
 
 export async function getLoadingUnits() {
diff --git a/frontend/lib/categoryLabel.ts b/frontend/lib/categoryLabel.ts
new file mode 100644
index 00000000..f0045d1c
--- /dev/null
+++ b/frontend/lib/categoryLabel.ts
@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { apiClient } from "@/lib/api/client";
+
+export type CategoryLabelMap = Record<string, string>; // value_code -> value_label
+
+export interface CategoryTarget {
+	table: string;
+	column: string;
+}
+
+/**
+ * 여러 (table, column) 쌍의 카테고리 값을 한 번에 조회해서
+ * value_code -> value_label 통합 맵을 반환한다.
+ */
+export function useCategoryLabelMap(targets: CategoryTarget[]): CategoryLabelMap {
+	const [map, setMap] = useState<CategoryLabelMap>({});
+	const key = useMemo(() => JSON.stringify(targets), [targets]);
+
+	useEffect(() => {
+		let cancelled = false;
+		(async () => {
+			const merged: CategoryLabelMap = {};
+			for (const { table, column } of targets) {
+				try {
+					const res = await apiClient.get(
+						`/table-categories/${table}/${column}/values`,
+					);
+					if (res.data?.success && Array.isArray(res.data.data)) {
+						const flatten = (vals: any[]) => {
+							for (const v of vals) {
+								if (v.valueCode && v.valueLabel) {
+									merged[v.valueCode] = v.valueLabel;
+								}
+								if (v.children?.length) flatten(v.children);
+							}
+						};
+						flatten(res.data.data);
+					}
+				} catch {
+					/* skip */
+				}
+			}
+			if (!cancelled) setMap(merged);
+		})();
+		return () => {
+			cancelled = true;
+		};
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [key]);
+
+	return map;
+}
+
+/**
+ * remark 원문을 화면 표시용 문자열로 변환하는 파서 팩토리.
+ *  - JSON remark → 사람 읽을 수 있는 한글 (창고이동/재고조정/재고확인/공정입고)
+ *  - value_code → codeLabelMap 에서 찾은 value_label
+ *  - 매칭 없음 → 원문 그대로 (과거 한글 레코드 호환)
+ */
+export function makeParseRemark(codeLabelMap: CategoryLabelMap) {
+	return (remark: string | null | undefined): string => {
+		if (!remark) return "";
+		const trimmed = remark.trim();
+
+		if (trimmed.startsWith("{")) {
+			try {
+				const d = JSON.parse(trimmed);
+				switch (d.type) {
+					case "move":
+						return `창고이동 (${d.from_warehouse} → ${d.to_warehouse})`;
+					case "adjust":
+						return `재고조정 (${d.reason || "사유 없음"}, ${d.system_qty}→${d.actual_qty}, 차이:${d.diff >= 0 ? "+" : ""}${d.diff})`;
+					case "confirm":
+						return `재고확인 (${d.reason || "이상없음"})`;
+					case "process_inbound":
+						return "공정입고";
+					default:
+						return d.reason || d.memo || trimmed;
+				}
+			} catch {
+				return trimmed;
+			}
+		}
+
+		if (codeLabelMap[trimmed]) return codeLabelMap[trimmed];
+		return trimmed;
+	};
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 35eb950d..912701f3 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -30,6 +30,7 @@
     "components/screen/ScreenDesigner_old.tsx",
     "components/admin/dashboard/widgets/yard-3d/Yard3DCanvas_NEW.tsx",
     "components/flow/FlowDataListModal.tsx",
-    "test-scenarios"
+    "test-scenarios/**",
+    "app/test-type-safety/**"
   ]
 }