From 659bd9caad4b4a39e8f33effaec25a6bd746a6c7 Mon Sep 17 00:00:00 2001
From: SeongHyun Kim <kksh7842@gmail.com>
Date: Wed, 8 Apr 2026 11:16:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B3=B5=EC=A0=95=EC=8B=A4=ED=96=89=20?=
 =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EA=B8=B4=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9E=90=EB=8F=99=20=EC=8A=AC=EB=9D=BC=EC=9D=B4=EB=93=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

AutoScrollText 컴포넌트: 텍스트가 영역을 넘으면 자동 마키 애니메이션
- 제품명(제품코드) 긴 경우 자동 슬라이드
- 짧으면 정지 상태로 표시
- 접수가능 카드 + 진행중 카드 모두 적용
---
 .../hardcoded/production/WorkOrderList.tsx    | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/frontend/components/pop/hardcoded/production/WorkOrderList.tsx b/frontend/components/pop/hardcoded/production/WorkOrderList.tsx
index a14d6a3a..fc45e0e7 100644
--- a/frontend/components/pop/hardcoded/production/WorkOrderList.tsx
+++ b/frontend/components/pop/hardcoded/production/WorkOrderList.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/hooks/useAuth";
 import { apiClient } from "@/lib/api/client";
@@ -9,6 +9,41 @@ import { AcceptProcessModal } from "./AcceptProcessModal";
 import { ProcessDetailModal, ProcessStep } from "./ProcessDetailModal";
 import { ProcessWork } from "./ProcessWork";
 
+/* 텍스트가 넘칠 때 자동 슬라이드 (마키) */
+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                                                               */
 /* ------------------------------------------------------------------ */
@@ -176,9 +211,9 @@ function FullscreenWorkModal({
                 <div className="text-base font-bold text-gray-900 mb-1">
                   {wi?.work_instruction_no || "작업지시"}
                 </div>
-                <div className="text-sm text-gray-500 mb-0.5 truncate">
-                  {wi?.item_name || ""}{(wi?.item_code || wi?.item_number) ? `(${wi?.item_code || wi?.item_number})` : ""}
-                </div>
+                <AutoScrollText className="text-sm text-gray-500 mb-0.5">
+                  📦 {wi?.item_name || ""}{(wi?.item_code || wi?.item_number) ? `(${wi?.item_code || wi?.item_number})` : ""}
+                </AutoScrollText>
                 <div className="text-sm text-gray-600 mb-0.5">
                   {proc.process_name} · {proc.equipment_code || "미배정"}
                 </div>
@@ -1401,8 +1436,10 @@ export function WorkOrderList() {
                       </div>
 
                       {/* Sub-info: item name + equipment */}
-                      <div className="flex items-center gap-3 text-sm text-gray-500 mb-3">
-                        <span className="truncate">📦 {wi?.item_name || "품목"}{(wi?.item_code || wi?.item_number) ? `(${wi?.item_code || wi?.item_number})` : ""}</span>
+                      <div className="flex items-center gap-3 text-sm text-gray-500 mb-3 min-w-0">
+                        <AutoScrollText className="flex-1 min-w-0">
+                          📦 {wi?.item_name || "품목"}{(wi?.item_code || wi?.item_number) ? `(${wi?.item_code || wi?.item_number})` : ""}
+                        </AutoScrollText>
                         {!isRework && (
                           <span className="shrink-0">⚙️ {eqName}</span>
                         )}