From 77c5bcde5947606c6c42fcf1591a66581cba56f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B6=8C=ED=98=81=EC=84=B1?= <shine1324@gmail.com>
Date: Tue, 10 Mar 2026 16:17:17 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20[QMS]=20=EB=AA=A9=EC=97=85=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=82=AC=EC=9A=A9=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20Mock=20=EB=B0=B0=EC=A7=80=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 6개 컴포넌트에 isMock prop 추가 (ReportList, RouteList, DocumentList, Day1ChecklistPanel, Day1DocumentSection, Day1DocumentViewer)
- 각 컴포넌트 헤더에 amber 톤 Mock 배지 표시
- API 연동 완료 시 isMock prop 제거로 자동 해제
---
 .../qms/components/Day1ChecklistPanel.tsx     | 11 +++++++++-
 .../qms/components/Day1DocumentSection.tsx    | 11 +++++++++-
 .../qms/components/Day1DocumentViewer.tsx     | 12 +++++++++--
 .../quality/qms/components/DocumentList.tsx   | 20 +++++++++++++------
 .../quality/qms/components/ReportList.tsx     | 12 +++++++++--
 .../quality/qms/components/RouteList.tsx      | 20 +++++++++++++------
 .../[locale]/(protected)/quality/qms/page.tsx |  7 ++++++-
 7 files changed, 74 insertions(+), 19 deletions(-)

diff --git a/src/app/[locale]/(protected)/quality/qms/components/Day1ChecklistPanel.tsx b/src/app/[locale]/(protected)/quality/qms/components/Day1ChecklistPanel.tsx
index 92cb2d9f..6c4f5500 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/Day1ChecklistPanel.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/Day1ChecklistPanel.tsx
@@ -11,6 +11,7 @@ interface Day1ChecklistPanelProps {
   searchTerm: string;
   onSubItemSelect: (categoryId: string, subItemId: string) => void;
   onSubItemToggle: (categoryId: string, subItemId: string, isCompleted: boolean) => void;
+  isMock?: boolean;
 }
 
 export function Day1ChecklistPanel({
@@ -19,6 +20,7 @@ export function Day1ChecklistPanel({
   searchTerm,
   onSubItemSelect,
   onSubItemToggle,
+  isMock,
 }: Day1ChecklistPanelProps) {
   const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
     new Set(categories.map(c => c.id)) // 기본적으로 모두 펼침
@@ -95,7 +97,14 @@ export function Day1ChecklistPanel({
     <div className="bg-white rounded-lg border border-gray-200 overflow-hidden h-full flex flex-col">
       {/* 헤더 */}
       <div className="bg-gray-100 px-2 sm:px-4 py-2 sm:py-3 border-b border-gray-200">
-        <h3 className="font-semibold text-gray-900 text-sm sm:text-base">점검표 항목</h3>
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-gray-900 text-sm sm:text-base">점검표 항목</h3>
+          {isMock && (
+            <span className="bg-amber-100 text-amber-700 text-[9px] sm:text-[10px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
+              Mock
+            </span>
+          )}
+        </div>
         {/* 검색 결과 카운트 */}
         {searchTerm && (
           <div className="mt-1.5 sm:mt-2 text-xs text-gray-500">
diff --git a/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentSection.tsx b/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentSection.tsx
index e35f9c15..81e8b588 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentSection.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentSection.tsx
@@ -12,6 +12,7 @@ interface Day1DocumentSectionProps {
   onDocumentSelect: (documentId: string) => void;
   onConfirmComplete: () => void;
   isCompleted: boolean;
+  isMock?: boolean;
 }
 
 export function Day1DocumentSection({
@@ -20,6 +21,7 @@ export function Day1DocumentSection({
   onDocumentSelect,
   onConfirmComplete,
   isCompleted,
+  isMock,
 }: Day1DocumentSectionProps) {
   if (!checkItem) {
     return (
@@ -36,7 +38,14 @@ export function Day1DocumentSection({
     <div className="bg-white rounded-lg border border-gray-200 overflow-hidden h-full flex flex-col">
       {/* 헤더 */}
       <div className="bg-gray-100 px-2 sm:px-4 py-2 sm:py-3 border-b border-gray-200">
-        <h3 className="font-semibold text-gray-900 text-sm sm:text-base">기준 문서화</h3>
+        <div className="flex items-center gap-2">
+          <h3 className="font-semibold text-gray-900 text-sm sm:text-base">기준 문서화</h3>
+          {isMock && (
+            <span className="bg-amber-100 text-amber-700 text-[9px] sm:text-[10px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
+              Mock
+            </span>
+          )}
+        </div>
       </div>
 
       {/* 콘텐츠 */}
diff --git a/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentViewer.tsx b/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentViewer.tsx
index 008d2719..871b6b72 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentViewer.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/Day1DocumentViewer.tsx
@@ -7,9 +7,10 @@ import type { StandardDocument } from '../types';
 
 interface Day1DocumentViewerProps {
   document: StandardDocument | null;
+  isMock?: boolean;
 }
 
-export function Day1DocumentViewer({ document }: Day1DocumentViewerProps) {
+export function Day1DocumentViewer({ document, isMock }: Day1DocumentViewerProps) {
   if (!document) {
     return (
       <div className="bg-white rounded-lg border border-gray-200 h-full flex items-center justify-center">
@@ -38,7 +39,14 @@ export function Day1DocumentViewer({ document }: Day1DocumentViewerProps) {
             <FileText className="h-3 w-3 sm:h-4 sm:w-4" />
           </div>
           <div>
-            <h3 className="font-medium text-gray-900 text-xs sm:text-sm">{document.title}</h3>
+            <div className="flex items-center gap-2">
+              <h3 className="font-medium text-gray-900 text-xs sm:text-sm">{document.title}</h3>
+              {isMock && (
+                <span className="bg-amber-100 text-amber-700 text-[9px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
+                  Mock
+                </span>
+              )}
+            </div>
             <p className="text-[10px] sm:text-xs text-gray-500">
               {document.version !== '-' && <span className="mr-2">{document.version}</span>}
               {document.date}
diff --git a/src/app/[locale]/(protected)/quality/qms/components/DocumentList.tsx b/src/app/[locale]/(protected)/quality/qms/components/DocumentList.tsx
index 604219fc..7853be0b 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/DocumentList.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/DocumentList.tsx
@@ -11,6 +11,7 @@ interface DocumentListProps {
   documents: Document[];
   routeCode: string | null;
   onViewDocument: (doc: Document, item?: DocumentItem) => void;
+  isMock?: boolean;
 }
 
 const getIcon = (type: string) => {
@@ -27,7 +28,7 @@ const getIcon = (type: string) => {
   }
 };
 
-export const DocumentList = ({ documents, routeCode, onViewDocument }: DocumentListProps) => {
+export const DocumentList = ({ documents, routeCode, onViewDocument, isMock }: DocumentListProps) => {
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
   // 문서 카테고리 클릭 핸들러
@@ -52,12 +53,19 @@ export const DocumentList = ({ documents, routeCode, onViewDocument }: DocumentL
 
   return (
     <div className="bg-white rounded-lg p-3 sm:p-4 shadow-sm h-full flex flex-col overflow-hidden">
-      <h2 className="font-bold text-gray-800 text-xs sm:text-sm mb-3 sm:mb-4">
-        관련 서류{' '}
-        {routeCode && (
-          <span className="text-gray-400 font-normal ml-1">({routeCode})</span>
+      <div className="flex items-center gap-2 mb-3 sm:mb-4">
+        <h2 className="font-bold text-gray-800 text-xs sm:text-sm">
+          관련 서류{' '}
+          {routeCode && (
+            <span className="text-gray-400 font-normal ml-1">({routeCode})</span>
+          )}
+        </h2>
+        {isMock && (
+          <span className="bg-amber-100 text-amber-700 text-[9px] sm:text-[10px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
+            Mock
+          </span>
         )}
-      </h2>
+      </div>
 
       <div className="space-y-2 sm:space-y-3 overflow-y-auto flex-1">
         {!routeCode ? (
diff --git a/src/app/[locale]/(protected)/quality/qms/components/ReportList.tsx b/src/app/[locale]/(protected)/quality/qms/components/ReportList.tsx
index 90c7f231..cc073165 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/ReportList.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/ReportList.tsx
@@ -8,13 +8,21 @@ interface ReportListProps {
   reports: InspectionReport[];
   selectedId: string | null;
   onSelect: (report: InspectionReport) => void;
+  isMock?: boolean;
 }
 
-export const ReportList = ({ reports, selectedId, onSelect }: ReportListProps) => {
+export const ReportList = ({ reports, selectedId, onSelect, isMock }: ReportListProps) => {
   return (
     <div className="bg-white rounded-lg p-3 sm:p-4 shadow-sm h-full flex flex-col">
       <div className="flex items-center justify-between mb-3 sm:mb-4">
-        <h2 className="font-bold text-sm sm:text-lg text-gray-800">품질관리서 목록</h2>
+        <div className="flex items-center gap-2">
+          <h2 className="font-bold text-sm sm:text-lg text-gray-800">품질관리서 목록</h2>
+          {isMock && (
+            <span className="bg-amber-100 text-amber-700 text-[9px] sm:text-[10px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
+              Mock
+            </span>
+          )}
+        </div>
         <span className="bg-blue-100 text-blue-800 text-[10px] sm:text-xs font-bold px-1.5 sm:px-2 py-0.5 sm:py-1 rounded-full">
           {reports.length}건
         </span>
diff --git a/src/app/[locale]/(protected)/quality/qms/components/RouteList.tsx b/src/app/[locale]/(protected)/quality/qms/components/RouteList.tsx
index a1be689d..805d4ac6 100644
--- a/src/app/[locale]/(protected)/quality/qms/components/RouteList.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/components/RouteList.tsx
@@ -11,9 +11,10 @@ interface RouteListProps {
   onSelect: (route: RouteItem) => void;
   onToggleItem: (routeId: string, itemId: string, isCompleted: boolean) => void;
   reportCode: string | null;
+  isMock?: boolean;
 }
 
-export const RouteList = ({ routes, selectedId, onSelect, onToggleItem, reportCode }: RouteListProps) => {
+export const RouteList = ({ routes, selectedId, onSelect, onToggleItem, reportCode, isMock }: RouteListProps) => {
   const [expandedId, setExpandedId] = useState<string | null>(null);
 
   const handleClick = (route: RouteItem) => {
@@ -28,12 +29,19 @@ export const RouteList = ({ routes, selectedId, onSelect, onToggleItem, reportCo
 
   return (
     <div className="bg-white rounded-lg p-3 sm:p-4 shadow-sm h-full flex flex-col overflow-hidden">
-      <h2 className="font-bold text-gray-800 text-xs sm:text-sm mb-3 sm:mb-4">
-        수주루트 목록{' '}
-        {reportCode && (
-          <span className="text-gray-400 font-normal ml-1">({reportCode})</span>
+      <div className="flex items-center gap-2 mb-3 sm:mb-4">
+        <h2 className="font-bold text-gray-800 text-xs sm:text-sm">
+          수주루트 목록{' '}
+          {reportCode && (
+            <span className="text-gray-400 font-normal ml-1">({reportCode})</span>
+          )}
+        </h2>
+        {isMock && (
+          <span className="bg-amber-100 text-amber-700 text-[9px] sm:text-[10px] font-semibold px-1.5 py-0.5 rounded border border-amber-200">
+            Mock
+          </span>
         )}
-      </h2>
+      </div>
 
       <div className="space-y-2 sm:space-y-3 overflow-y-auto flex-1">
         {routes.length === 0 ? (
diff --git a/src/app/[locale]/(protected)/quality/qms/page.tsx b/src/app/[locale]/(protected)/quality/qms/page.tsx
index 1658882f..6fb4ebb9 100644
--- a/src/app/[locale]/(protected)/quality/qms/page.tsx
+++ b/src/app/[locale]/(protected)/quality/qms/page.tsx
@@ -298,6 +298,7 @@ export default function QualityInspectionPage() {
               searchTerm={searchTerm}
               onSubItemSelect={handleSubItemSelect}
               onSubItemToggle={handleSubItemToggle}
+              isMock
             />
           </div>
 
@@ -312,6 +313,7 @@ export default function QualityInspectionPage() {
                 onDocumentSelect={setSelectedStandardDocId}
                 onConfirmComplete={handleConfirmComplete}
                 isCompleted={isSelectedItemCompleted}
+                isMock
               />
             </div>
           )}
@@ -321,7 +323,7 @@ export default function QualityInspectionPage() {
             <div className={`col-span-12 min-h-[200px] sm:min-h-[250px] lg:min-h-[500px] lg:h-full overflow-auto ${
               displaySettings.showDocumentSection ? 'lg:col-span-5' : 'lg:col-span-8'
             }`}>
-              <Day1DocumentViewer document={selectedStandardDoc} />
+              <Day1DocumentViewer document={selectedStandardDoc} isMock />
             </div>
           )}
         </div>
@@ -333,6 +335,7 @@ export default function QualityInspectionPage() {
                 reports={filteredReports}
                 selectedId={selectedReport?.id || null}
                 onSelect={handleReportSelect}
+                isMock
               />
             </div>
 
@@ -343,6 +346,7 @@ export default function QualityInspectionPage() {
                 onSelect={handleRouteSelect}
                 onToggleItem={handleToggleItem}
                 reportCode={selectedReport?.code || null}
+                isMock
               />
             </div>
 
@@ -351,6 +355,7 @@ export default function QualityInspectionPage() {
                 documents={currentDocuments}
                 routeCode={selectedRoute?.code || null}
                 onViewDocument={handleViewDocument}
+                isMock
               />
             </div>
           </div>