(김준회) 돌체 관련, 다크모드 지원하도록 개선

- 가능하면 시멘틱 색상 사용(muted, muted-foreground)
- 어려운 컬러는 dark: 변수로 다크모드 클래스 지정

1 files changed, 20 insertions, 20 deletions

diff --git a/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx b/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx
index 8370cd34..096f9b24 100644
--- a/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx
+++ b/lib/vendor-document-list/ship/enhanced-doc-table-columns.tsx
@@ -37,12 +37,12 @@ interface GetColumnsProps {
 
 // 날짜 표시 컴포넌트 (간단 버전)
 const DateDisplay = ({ date, isSelected = false }: { date: string | null, isSelected?: boolean }) => {
-  if (!date) return <span className="text-gray-400">-</span>
+  if (!date) return <span className="text-muted-foreground">-</span>
   
   return (
     <span className={cn(
       "text-sm",
-      isSelected && "text-blue-600 font-semibold"
+      isSelected && "text-primary font-semibold"
     )}>
       {formatDate(date)}
     </span>
@@ -59,7 +59,7 @@ export function getSimplifiedDocumentColumns({
       id: "select",
       header: ({ table }) => (
         <div className="flex items-center justify-center">
-          <span className="text-xs text-gray-500">Select</span>
+          <span className="text-xs text-muted-foreground">Select</span>
         </div>
       ),
       cell: ({ row }) => {
@@ -180,7 +180,7 @@ export function getSimplifiedDocumentColumns({
         const firstRow = table.getRowModel().rows[0]?.original
         const stageName = firstRow?.firstStageName || "First Stage"
         return (
-          <div className="text-center font-medium text-gray-700">
+          <div className="text-center font-medium text-foreground">
             {stageName}
           </div>
         )
@@ -223,7 +223,7 @@ export function getSimplifiedDocumentColumns({
         const firstRow = table.getRowModel().rows[0]?.original
         const stageName = firstRow?.secondStageName || "Second Stage"
         return (
-          <div className="text-center font-medium text-gray-700">
+          <div className="text-center font-medium text-foreground">
             {stageName}
           </div>
         )
@@ -373,8 +373,8 @@ function DocNumberCell({ doc }: { doc: SimplifiedDocumentsView }) {
       className={cn(
         "font-mono text-sm font-medium cursor-pointer px-2 py-1 rounded transition-colors",
         isSelected 
-          ? "text-blue-600 font-bold bg-blue-50" 
-          : "hover:bg-gray-50"
+          ? "text-primary font-bold bg-primary/10" 
+          : "hover:bg-muted/50"
       )}
       onClick={() => {
         const newSelection = isSelected ? null : doc.documentId;
@@ -393,10 +393,10 @@ function TitleCell({ doc }: { doc: SimplifiedDocumentsView }) {
   return (
     <div 
       className={cn(
-        "font-medium text-gray-900 truncate max-w-[300px] cursor-pointer px-2 py-1 rounded transition-colors",
+        "font-medium text-foreground truncate max-w-[300px] cursor-pointer px-2 py-1 rounded transition-colors",
         isSelected 
-          ? "text-blue-600 font-bold bg-blue-50" 
-          : "hover:bg-gray-50"
+          ? "text-primary font-bold bg-primary/10" 
+          : "hover:bg-muted/50"
       )} 
       title={doc.title}
       onClick={() => {
@@ -413,12 +413,12 @@ function ProjectCodeCell({ projectCode, documentId }: { projectCode: string | nu
   const { selectedDocumentId } = React.useContext(DocumentSelectionContext);
   const isSelected = selectedDocumentId === documentId;
 
-  if (!projectCode) return <span className="text-gray-400">-</span>;
+  if (!projectCode) return <span className="text-muted-foreground">-</span>;
   
   return (
     <span className={cn(
       "text-sm font-medium",
-      isSelected && "text-blue-600 font-bold"
+      isSelected && "text-primary font-bold"
     )}>
       {projectCode}
     </span>
@@ -439,8 +439,8 @@ function FirstStageActualDateCell({ row }: { row: any }) {
   
   return (
     <div className={cn(
-      date ? "text-green-600 font-medium" : "",
-      isSelected && date && "text-green-700 font-bold"
+      date ? "text-emerald-600 dark:text-emerald-400 font-medium" : "",
+      isSelected && date && "text-emerald-700 dark:text-emerald-300 font-bold"
     )}>
       <DateDisplay date={date} isSelected={isSelected && !date} />
       {date && <span className="text-xs block">✓ 완료</span>}
@@ -462,8 +462,8 @@ function SecondStageActualDateCell({ row }: { row: any }) {
   
   return (
     <div className={cn(
-      date ? "text-green-600 font-medium" : "",
-      isSelected && date && "text-green-700 font-bold"
+      date ? "text-emerald-600 dark:text-emerald-400 font-medium" : "",
+      isSelected && date && "text-emerald-700 dark:text-emerald-300 font-bold"
     )}>
       <DateDisplay date={date} isSelected={isSelected && !date} />
       {date && <span className="text-xs block">✓ 완료</span>}
@@ -477,10 +477,10 @@ function AttachmentCountCell({ count, documentId }: { count: number, documentId:
 
   return (
     <div className="flex items-center justify-center gap-1">
-      <FileText className="w-4 h-4 text-gray-400" />
+      <FileText className="w-4 h-4 text-muted-foreground" />
       <span className={cn(
         "text-sm font-medium",
-        isSelected && "text-blue-600 font-bold"
+        isSelected && "text-primary font-bold"
       )}>
         {count}
       </span>
@@ -494,8 +494,8 @@ function UpdatedAtCell({ updatedAt, documentId }: { updatedAt: Date, documentId:
 
   return (
     <span className={cn(
-      "text-sm text-gray-600",
-      isSelected && "text-blue-600 font-semibold"
+      "text-sm text-muted-foreground",
+      isSelected && "text-primary font-semibold"
     )}>
       {formatDateTime(updatedAt)}
     </span>