feat: 탭 UI

apps/executeJS/src/app/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Providers } from './providers';
-import { EditorPage } from '../pages/editor';
+import { PlaygroundGroups } from '../pages/playground';
 
 export const App: React.FC = () => {
   return (
     <Providers>
-      <EditorPage />
+      <PlaygroundGroups />
     </Providers>
   );
 };

apps/executeJS/src/pages/playground/index.ts

@@ -0,0 +1,2 @@
+export * from './playground-page';
+export * from './playground-groups';

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

@@ -0,0 +1,90 @@
+import { useState } from 'react';
+import { PlaygroundPage } from './playground-page';
+import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons';
+
+interface Tab {
+  id: string;
+  title: string;
+}
+
+const INITIAL_TAB_TITLE = '✨New Playground';
+
+const initialTabs: Tab[] = [{ id: 'playground-1', title: INITIAL_TAB_TITLE }];
+
+export const PlaygroundGroups: React.FC = () => {
+  const [tabs, setTabs] = useState<Tab[]>(initialTabs);
+
+  const handleCloseTab = (tabId: string) => {
+    setTabs((prevTabs) => {
+      if (prevTabs.length === 1) {
+        return prevTabs; // 최소 하나의 탭은 유지
+      }
+
+      return prevTabs.filter((tab) => tab.id !== tabId);
+    });
+  };
+
+  const handleAddTab = () => {
+    setTabs((prevTabs) => {
+      const date = new Date().valueOf();
+      const newTabId = `playground-${date}`;
+      const newTab: Tab = {
+        id: newTabId,
+        title: INITIAL_TAB_TITLE,
+      };
+
+      return [...prevTabs, newTab];
+    });
+  };
+
+  return (
+    <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 }) => {
+            return (
+              <div
+                key={id}
+                className="shrink-0 flex items-center p-2 border-r border-slate-800"
+              >
+                {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */}
+                <button
+                  type="button"
+                  onClick={() => {
+                    // TODO: 탭 전환 로직 @bori
+                  }}
+                  onContextMenu={(event) => {
+                    event.preventDefault();
+                    // TODO: 탭 우클릭 메뉴 로직 @bori
+                    console.log('우클릭 메뉴 -', id);
+                  }}
+                  className="pr-2"
+                >
+                  {title}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleCloseTab(id)}
+                  className="p-1 rounded-sm hover:bg-[rgba(255,255,255,0.2)] transition-colors cursor-pointer"
+                >
+                  <Cross2Icon />
+                </button>
+              </div>
+            );
+          })}
+        </div>
+
+        <button
+          type="button"
+          onClick={handleAddTab}
+          className="shrink-0 p-2 ml-1 rounded-sm hover:bg-[rgba(255,255,255,0.2)] transition-colors cursor-pointer"
+        >
+          <PlusIcon />
+        </button>
+      </div>
+
+      {/* TODO: 활성화된 탭에 따른 플레이그라운드 렌더링 @bori */}
+      <PlaygroundPage />
+    </div>
+  );
+};

apps/executeJS/src/pages/editor/editor-page.test.tsx → apps/executeJS/src/pages/playground/playground-page.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import { describe, it, expect, vi } from 'vitest';
 import '@testing-library/jest-dom';
-import { EditorPage } from './editor-page';
+import { PlaygroundPage } from './playground-page';
 
 // Tauri API 모킹
 vi.mock('@tauri-apps/api/core', () => ({
@@ -13,9 +13,9 @@ vi.mock('@legendapp/state/react', () => ({
   useObservable: vi.fn(() => []),
 }));
 
-describe('EditorPage', () => {
+describe('PlaygroundPage', () => {
   it('renders without crashing', () => {
-    render(<EditorPage />);
+    render(<PlaygroundPage />);
     expect(screen.getByText(/실행 \(Cmd\+Enter\)/)).toBeInTheDocument();
   });
 });

apps/executeJS/src/pages/editor/editor-page.tsx → apps/executeJS/src/pages/playground/playground-page.tsx

@@ -5,7 +5,7 @@ import { OutputPanel } from '@/widgets/output-panel';
 import { useExecutionStore } from '@/features/execute-code';
 import { PlayIcon, StopIcon } from '@radix-ui/react-icons';
 
-export const EditorPage: React.FC = () => {
+export const PlaygroundPage: React.FC = () => {
   const [code, setCode] = useState('console.log("Hello, ExecuteJS!");');
   const {
     result: executionResult,

docs/docs/guide/development.mdx

@@ -122,8 +122,8 @@ src/
 │   ├── index.tsx            # 앱 루트 컴포넌트
 │   └── providers.tsx        # 전역 프로바이더 (Legend State, Radix UI)
 ├── pages/                   # 페이지 레벨 컴포넌트
-│   └── editor/
-│       └── EditorPage.tsx   # 메인 에디터 페이지
+│   └── playground/
+│       └── PlaygroundPage.tsx   # 플레이그라운드 페이지
 ├── widgets/                 # 복합 UI 블록
 │   ├── code-editor/
 │   │   └── CodeEditor.tsx   # Monaco Editor 래퍼