탭 버튼 UI 수정

apps/executeJS/src/features/playground/store.ts

@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { PLAYGROUND_STORAGE_KEY } from './const';
 
-interface Tab {
+export interface Tab {
   id: string;
   playgroundId: Playground['id'];
   title: string;
@@ -30,7 +30,7 @@ interface PlaygroundState {
   }) => void;
 }
 
-const INITIAL_TAB_TITLE = '✨New Playground';
+const INITIAL_TAB_TITLE = 'New Tab';
 const INITIAL_TAB_ID = 'first-playground-tab';
 const INITIAL_PLAYGROUND_ID = 'first-playground';
 

apps/executeJS/src/features/tab/index.ts

@@ -0,0 +1 @@
+export * from './ui';

apps/executeJS/src/features/tab/ui/index.ts

@@ -0,0 +1 @@
+export * from './tab-button';

apps/executeJS/src/features/tab/ui/tab-button.tsx

@@ -0,0 +1,49 @@
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { Tab } from '@/features/playground';
+
+interface TabButtonProps {
+  tab: Tab;
+  isActive: boolean;
+  onActiveTab: (id: Tab['id']) => void;
+  onCloseTab: (id: Tab['id']) => void;
+}
+
+export const TabButton: React.FC<TabButtonProps> = ({
+  tab,
+  isActive,
+  onActiveTab,
+  onCloseTab,
+}) => {
+  const { id, title } = tab;
+
+  return (
+    <div className={`shrink-0 p-1`}>
+      <div
+        className={`group flex items-center rounded-sm hover:bg-[rgba(255,255,255,0.1)] ${isActive ? 'bg-[rgba(255,255,255,0.1)]' : 'bg-transparent'}`}
+      >
+        <button
+          type="button"
+          onClick={() => onActiveTab(id)}
+          onContextMenu={(event) => {
+            event.preventDefault();
+            // TODO: 탭 우클릭 메뉴 로직 @bori
+            console.log('우클릭 메뉴 -', id);
+          }}
+          className={`group-hover:text-gray-50 w-40 pl-3 pr-2 truncate text-left cursor-pointer ${isActive ? 'text-gray-50' : 'text-gray-500'}`}
+        >
+          {title}
+        </button>
+        <button
+          type="button"
+          onClick={() => onCloseTab(id)}
+          className="h-full p-2 rounded-r-sm hover:bg-[rgba(255,255,255,0.1)] transition-colors cursor-pointer"
+        >
+          <Cross2Icon
+            className={`group-hover:text-gray-50 ${isActive ? 'text-gray-50' : 'text-gray-500'}`}
+          />
+        </button>
+      </div>
+    </div>
+  );
+};

apps/executeJS/src/pages/playground/playground-groups.tsx

@@ -1,5 +1,6 @@
-import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
+import { PlusIcon } from '@radix-ui/react-icons';
 
+import { TabButton } from '@/features/tab';
 import { usePlaygroundStore } from '@/features/playground';
 import { PlaygroundWidget } from '@/widgets/playground';
 
@@ -11,41 +12,18 @@ export const PlaygroundGroups: React.FC = () => {
     <div className="overflow-hidden w-screen h-screen">
       <div className="overflow-x-auto flex items-center border-b border-slate-800">
         <div className="flex shrink-0">
-          {tabs.map(({ id, title }) => {
-            const active = id === activeTabId;
+          {tabs.map((tab) => {
+            const { id } = tab;
+            const isActive = id === activeTabId;
 
             return (
-              <div
+              <TabButton
                 key={id}
-                className="shrink-0 flex items-center p-2 border-r border-slate-800"
-                // TODO: 활성화된 탭 스타일링 개선 @bori
-                style={{
-                  backgroundColor: active
-                    ? 'rgba(255, 255, 255, 0.1)'
-                    : 'transparent',
-                }}
-              >
-                {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */}
-                <button
-                  type="button"
-                  onClick={() => setActiveTab(id)}
-                  onContextMenu={(event) => {
-                    event.preventDefault();
-                    // TODO: 탭 우클릭 메뉴 로직 @bori
-                    console.log('우클릭 메뉴 -', id);
-                  }}
-                  className="pr-2"
-                >
-                  {title}
-                </button>
-                <button
-                  type="button"
-                  onClick={() => closeTab(id)}
-                  className="p-1 rounded-sm hover:bg-[rgba(255,255,255,0.2)] transition-colors cursor-pointer"
-                >
-                  <Cross2Icon />
-                </button>
-              </div>
+                tab={tab}
+                isActive={isActive}
+                onActiveTab={setActiveTab}
+                onCloseTab={closeTab}
+              />
             );
           })}
         </div>