From 9b2b70853876544406d4276bef85de422f778f4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Wed, 11 Feb 2026 10:12:10 +0900
Subject: [PATCH] =?UTF-8?q?fix(WEB):=20DevToolbar=20=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B0=98=EC=9D=91=ED=98=95=20=EB=B0=8F=20=EC=95=88?=
 =?UTF-8?q?=EB=93=9C=EB=A1=9C=EC=9D=B4=EB=93=9C=20=ED=95=98=EB=8B=A8?=
 =?UTF-8?q?=EB=B0=94=20=EB=8C=80=EC=9D=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- bottom-4 → bottom-9로 변경하여 안드로이드 하단 네비게이션바 회피
- max-w-[calc(100vw-1rem)] 추가하여 모바일 화면 넘침 방지
- 버튼 영역에 flex-wrap 적용하여 모바일에서 줄바꿈 지원
---
 src/components/dev/DevToolbar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/dev/DevToolbar.tsx b/src/components/dev/DevToolbar.tsx
index 518d14f4..ea3d523e 100644
--- a/src/components/dev/DevToolbar.tsx
+++ b/src/components/dev/DevToolbar.tsx
@@ -132,7 +132,7 @@ export function DevToolbar() {
   // 숨김 상태일 때 작은 버튼만 표시
   if (!isVisible) {
     return (
-      <div className="fixed bottom-4 right-4 z-[9999]">
+      <div className="fixed bottom-9 right-4 z-[9999]">
         <Button
           size="sm"
           variant="outline"
@@ -185,7 +185,7 @@ export function DevToolbar() {
   const hasFlowData = flowData.quoteId || flowData.orderId || flowData.workOrderId || flowData.lotNo;
 
   return (
-    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[9999]">
+    <div className="fixed bottom-9 left-1/2 -translate-x-1/2 z-[9999] max-w-[calc(100vw-1rem)]">
       <div className="bg-yellow-50 border-2 border-yellow-400 rounded-lg shadow-2xl overflow-hidden">
         {/* 헤더 */}
         <div className="flex items-center justify-between px-3 py-2 bg-yellow-100 border-b border-yellow-300">
@@ -257,7 +257,7 @@ export function DevToolbar() {
 
         {/* 판매/생산 플로우 버튼 영역 */}
         {isExpanded && (
-          <div className="flex items-center gap-2 px-3 py-3">
+          <div className="flex flex-wrap items-center gap-2 px-3 py-3">
             {FLOW_STEPS.map((step, index) => {
               const Icon = step.icon;
               const isActive = activePage === step.type;
@@ -331,7 +331,7 @@ export function DevToolbar() {
 
         {/* 2행: 회계 + 기준정보 + 자재 버튼 영역 */}
         {isExpanded && (
-          <div className="flex items-center gap-2 px-3 pb-3 border-t border-yellow-300 pt-3">
+          <div className="flex flex-wrap items-center gap-2 px-3 pb-3 border-t border-yellow-300 pt-3">
             {/* 회계 */}
             <span className="text-xs text-yellow-600 font-medium mr-1">회계:</span>
             {ACCOUNTING_STEPS.map((step) => {