hotfix: 다크, 라이트 모드에 따른 색상 조정 및 채팅 커서 유지 기간 조정 (#383)

Author: Grit03

frontend/src/common/components/canvas/components/ZoomControls.tsx

@@ -22,7 +22,7 @@ function ZoomControls() {
       id="zoom-controls"
       className="absolute bottom-6 left-6 z-50 flex items-center gap-2"
     >
-      <div className="border-border bg-popover/80 flex items-center rounded-lg border p-0.5 shadow-lg backdrop-blur-xl">
+      <div className="border-border bg-popover/80 flex items-center rounded-lg border p-0.5 shadow-lg backdrop-blur-xl dark:bg-gray-800">
         <Button
           variant="ghost"
           size="icon"
@@ -32,7 +32,7 @@ function ZoomControls() {
         >
           <LuZoomOut size={14} />
         </Button>
-        <span className="text-muted-foreground w-12 text-center font-mono text-xs">
+        <span className="text-muted-foreground w-12 text-center text-xs">
           {Math.floor(camera.scale * 100)}%
         </span>
         <Button

frontend/src/common/components/cursor/MyCursor.tsx

@@ -13,6 +13,8 @@ interface MyCursorProps extends CursorProps {
   scale?: number;
 }
 
+const CURSOR_CHAT_TIMEOUT = 4500;
+
 function MyCursor({ color, type, message, scale = 1 }: MyCursorProps) {
   const autoCloseTimerRef = useRef<NodeJS.Timeout | null>(null);
 
@@ -39,7 +41,7 @@ function MyCursor({ color, type, message, scale = 1 }: MyCursorProps) {
     if (type === 'chat') {
       autoCloseTimerRef.current = setTimeout(() => {
         clearUserChatMessage();
-      }, 2000);
+      }, CURSOR_CHAT_TIMEOUT);
     }
 
     return () => {

frontend/src/features/export/components/ExportGroupDropdownButton.tsx

@@ -41,7 +41,11 @@ export function ExportGroupDropdownButton() {
     <Dialog>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="secondary" size="sm">
+          <Button
+            variant="secondary"
+            size="sm"
+            className="dark:hover:bg-secondary/50 border-1 border-gray-200 hover:bg-gray-200 dark:border-transparent"
+          >
             <LuExport />
             결과 내보내기
           </Button>

frontend/src/features/userListCard/UserListCard.tsx

@@ -61,7 +61,7 @@ function UserAvatarItem({ userId }: { userId: string }) {
   if (!user) return null;
 
   return (
-    <Avatar size="sm" className="!ring-gray-800">
+    <Avatar size="sm" className="!ring-color-popover dark:!ring-gray-800">
       <AvatarFallback
         className={cn(getContrastClass(user.color), 'text-xs font-semibold')}
         style={{ backgroundColor: user.color }}

frontend/src/pages/workspace/components/header/WorkspaceHeader.tsx

@@ -14,7 +14,7 @@ function RoundedContainer({ children, className }: ComponentProps<'div'>) {
   return (
     <div
       className={cn(
-        'border-border bg-popover/80 pointer-events-auto flex h-full items-center rounded-xl border px-2 py-1 shadow-2xl backdrop-blur-xl',
+        'border-border bg-popover/80 pointer-events-auto flex h-full items-center rounded-xl border px-2 py-1 shadow-2xl backdrop-blur-xl dark:bg-gray-800',
         className,
       )}
     >
@@ -46,6 +46,7 @@ function WorkspaceHeader() {
         <Button
           size="sm"
           variant="secondary"
+          className="dark:hover:bg-secondary/50 border-1 border-gray-200 hover:bg-gray-200 dark:border-transparent"
           onClick={() => toast.info('Coming soon...')}
         >
           <LuGithub size={16} />

frontend/src/pages/workspace/components/toolbar/ToolBar.tsx

@@ -28,7 +28,7 @@ function ToolBar() {
   return (
     <div
       id="tool-bar"
-      className="border-border bg-popover/80 fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 gap-2 rounded-2xl border p-1.5 shadow-2xl backdrop-blur-xl transition-all hover:scale-105"
+      className="border-border bg-popover/80 fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 gap-2 rounded-2xl border p-1.5 shadow-2xl backdrop-blur-xl transition-all hover:scale-105 dark:bg-gray-800"
     >
       <div className="flex items-center justify-center gap-2">
         <ToolButton

frontend/src/pages/workspace/components/toolbar/ToolButton.tsx

@@ -23,14 +23,14 @@ function ToolButton({
         disabled={disabled}
         className={`h-9 w-9 transition-all [&_svg]:size-5 ${
           active
-            ? 'bg-accent text-accent-foreground'
-            : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+            ? 'dark:bg-accent text-accent-foreground bg-gray-200'
+            : 'text-muted-foreground dark:hover:bg-accent hover:text-accent-foreground hover:bg-gray-200'
         } ${disabled ? 'cursor-not-allowed opacity-50' : ''}`}
       >
         {icon}
       </Button>
       {label && (
-        <span className="border-border bg-popover text-popover-foreground pointer-events-none absolute left-14 z-50 rounded border px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
+        <span className="border-border bg-popover text-popover-foreground pointer-events-none absolute -top-10 z-50 rounded border px-2 py-1 text-xs whitespace-nowrap opacity-0 shadow-lg transition-opacity group-hover:opacity-100">
           {label}
         </span>
       )}