From 084fa8499cdea1fa678ae73c9601809a687dda8a Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 14:33:37 +0900 Subject: [PATCH 01/10] refactor: rename folder editor > playground --- apps/executeJS/src/app/index.tsx | 2 +- .../src/pages/{editor => playground}/editor-page.test.tsx | 0 apps/executeJS/src/pages/{editor => playground}/editor-page.tsx | 0 apps/executeJS/src/pages/{editor => playground}/index.ts | 0 4 files changed, 1 insertion(+), 1 deletion(-) rename apps/executeJS/src/pages/{editor => playground}/editor-page.test.tsx (100%) rename apps/executeJS/src/pages/{editor => playground}/editor-page.tsx (100%) rename apps/executeJS/src/pages/{editor => playground}/index.ts (100%) diff --git a/apps/executeJS/src/app/index.tsx b/apps/executeJS/src/app/index.tsx index 3c3a5f7..e00f104 100644 --- a/apps/executeJS/src/app/index.tsx +++ b/apps/executeJS/src/app/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Providers } from './providers'; -import { EditorPage } from '../pages/editor'; +import { EditorPage } from '../pages/playground'; export const App: React.FC = () => { return ( diff --git a/apps/executeJS/src/pages/editor/editor-page.test.tsx b/apps/executeJS/src/pages/playground/editor-page.test.tsx similarity index 100% rename from apps/executeJS/src/pages/editor/editor-page.test.tsx rename to apps/executeJS/src/pages/playground/editor-page.test.tsx diff --git a/apps/executeJS/src/pages/editor/editor-page.tsx b/apps/executeJS/src/pages/playground/editor-page.tsx similarity index 100% rename from apps/executeJS/src/pages/editor/editor-page.tsx rename to apps/executeJS/src/pages/playground/editor-page.tsx diff --git a/apps/executeJS/src/pages/editor/index.ts b/apps/executeJS/src/pages/playground/index.ts similarity index 100% rename from apps/executeJS/src/pages/editor/index.ts rename to apps/executeJS/src/pages/playground/index.ts From 1a85c06da6da70a690af68359a42205386eea3e4 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 14:38:13 +0900 Subject: [PATCH 02/10] refactor: rename file editor-page > playground-page --- apps/executeJS/src/app/index.tsx | 4 ++-- apps/executeJS/src/pages/playground/index.ts | 2 +- .../{editor-page.test.tsx => playground-page.test.tsx} | 6 +++--- .../playground/{editor-page.tsx => playground-page.tsx} | 2 +- docs/docs/guide/development.mdx | 4 ++-- 5 files changed, 9 insertions(+), 9 deletions(-) rename apps/executeJS/src/pages/playground/{editor-page.test.tsx => playground-page.test.tsx} (79%) rename apps/executeJS/src/pages/playground/{editor-page.tsx => playground-page.tsx} (98%) diff --git a/apps/executeJS/src/app/index.tsx b/apps/executeJS/src/app/index.tsx index e00f104..99e305d 100644 --- a/apps/executeJS/src/app/index.tsx +++ b/apps/executeJS/src/app/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { Providers } from './providers'; -import { EditorPage } from '../pages/playground'; +import { PlaygroundPage } from '../pages/playground'; export const App: React.FC = () => { return ( - + ); }; diff --git a/apps/executeJS/src/pages/playground/index.ts b/apps/executeJS/src/pages/playground/index.ts index 0601973..d8d1af1 100644 --- a/apps/executeJS/src/pages/playground/index.ts +++ b/apps/executeJS/src/pages/playground/index.ts @@ -1 +1 @@ -export * from './editor-page'; +export * from './playground-page'; diff --git a/apps/executeJS/src/pages/playground/editor-page.test.tsx b/apps/executeJS/src/pages/playground/playground-page.test.tsx similarity index 79% rename from apps/executeJS/src/pages/playground/editor-page.test.tsx rename to apps/executeJS/src/pages/playground/playground-page.test.tsx index d5692e9..f0641e8 100644 --- a/apps/executeJS/src/pages/playground/editor-page.test.tsx +++ b/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(); + render(); expect(screen.getByText(/실행 \(Cmd\+Enter\)/)).toBeInTheDocument(); }); }); diff --git a/apps/executeJS/src/pages/playground/editor-page.tsx b/apps/executeJS/src/pages/playground/playground-page.tsx similarity index 98% rename from apps/executeJS/src/pages/playground/editor-page.tsx rename to apps/executeJS/src/pages/playground/playground-page.tsx index 1f9bab6..11962a0 100644 --- a/apps/executeJS/src/pages/playground/editor-page.tsx +++ b/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, diff --git a/docs/docs/guide/development.mdx b/docs/docs/guide/development.mdx index 1cfe188..00fa53a 100644 --- a/docs/docs/guide/development.mdx +++ b/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 래퍼 From efe47f57c7274f90ca54a1409b218292f2346ad9 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 14:57:12 +0900 Subject: [PATCH 03/10] feat: tab ui --- apps/executeJS/src/app/index.tsx | 4 +-- apps/executeJS/src/pages/playground/index.ts | 1 + .../pages/playground/playground-groups.tsx | 36 +++++++++++++++++++ 3 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 apps/executeJS/src/pages/playground/playground-groups.tsx diff --git a/apps/executeJS/src/app/index.tsx b/apps/executeJS/src/app/index.tsx index 99e305d..4be21c8 100644 --- a/apps/executeJS/src/app/index.tsx +++ b/apps/executeJS/src/app/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { Providers } from './providers'; -import { PlaygroundPage } from '../pages/playground'; +import { PlaygroundGroups } from '../pages/playground'; export const App: React.FC = () => { return ( - + ); }; diff --git a/apps/executeJS/src/pages/playground/index.ts b/apps/executeJS/src/pages/playground/index.ts index d8d1af1..e9d1de9 100644 --- a/apps/executeJS/src/pages/playground/index.ts +++ b/apps/executeJS/src/pages/playground/index.ts @@ -1 +1,2 @@ export * from './playground-page'; +export * from './playground-groups'; diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx new file mode 100644 index 0000000..bca5dea --- /dev/null +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -0,0 +1,36 @@ +import { useState } from 'react'; +import { PlaygroundPage } from './playground-page'; +import { PlusIcon } from '@radix-ui/react-icons'; + +interface Tab { + id: string; + title: string; +} + +const initialTabs: Tab[] = [{ id: 'playground-1', title: 'Playground 1' }]; + +export const PlaygroundGroups: React.FC = () => { + const [tabs, setTabs] = useState(initialTabs); + + return ( +
+
+
+ {tabs.map(({ id, title }) => { + return ( +
+ {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 */} + {title} +
+ ); + })} +
+ + +
+ +
+ ); +}; From 7d6017eb125ef474a9a1139ba998dbf822afac7e Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 15:02:26 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=ED=83=AD=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/playground/playground-groups.tsx | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index bca5dea..dd3cb51 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -12,13 +12,25 @@ const initialTabs: Tab[] = [{ id: 'playground-1', title: 'Playground 1' }]; export const PlaygroundGroups: React.FC = () => { const [tabs, setTabs] = useState(initialTabs); + const handleAddTab = () => { + setTabs((prevTabs) => { + const newTabId = `playground-${tabs.length + 1}`; + const newTab: Tab = { + id: newTabId, + title: `Playground ${tabs.length + 1}`, + }; + + return [...prevTabs, newTab]; + }); + }; + return ( -
-
-
+
+
+
{tabs.map(({ id, title }) => { return ( -
+
{/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 */} {title}
@@ -26,7 +38,11 @@ export const PlaygroundGroups: React.FC = () => { })}
-
From 13828afab6e418404d59ac6d51b6d51763886685 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 15:21:11 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=ED=83=AD=20=EB=8B=AB=EA=B8=B0=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/playground/playground-groups.tsx | 34 +++++++++++++++++-- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index dd3cb51..8eb5a14 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { PlaygroundPage } from './playground-page'; -import { PlusIcon } from '@radix-ui/react-icons'; +import { Cross2Icon, PlusIcon } from '@radix-ui/react-icons'; interface Tab { id: string; @@ -12,6 +12,16 @@ const initialTabs: Tab[] = [{ id: 'playground-1', title: 'Playground 1' }]; export const PlaygroundGroups: React.FC = () => { const [tabs, setTabs] = useState(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 newTabId = `playground-${tabs.length + 1}`; @@ -30,9 +40,27 @@ export const PlaygroundGroups: React.FC = () => {
{tabs.map(({ id, title }) => { return ( -
+
{/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 */} - {title} + +
); })} From db5a865075f1d3454114e4c31203eaa541883a25 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 15:22:25 +0900 Subject: [PATCH 06/10] =?UTF-8?q?style:=20=ED=83=AD=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/executeJS/src/pages/playground/playground-groups.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index 8eb5a14..c6461be 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -69,7 +69,7 @@ export const PlaygroundGroups: React.FC = () => { From 8988480bb73bef8747b35437b12e903d85808523 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 15:27:17 +0900 Subject: [PATCH 07/10] =?UTF-8?q?chore:=20=EC=A3=BC=EC=84=9D=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../executeJS/src/pages/playground/playground-groups.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index c6461be..fae101d 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -44,12 +44,17 @@ export const PlaygroundGroups: React.FC = () => { key={id} className="shrink-0 flex items-center p-2 border-r border-slate-800" > - {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 */} + {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */}
+ + {/* TODO: 활성화된 탭에 따른 플레이그라운드 렌더링 @bori */}
); From c9bd677d117d3567106d009aecfc32612ac024b0 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 19:05:31 +0900 Subject: [PATCH 08/10] =?UTF-8?q?chore:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20?= =?UTF-8?q?=ED=83=AD=20=EC=B6=94=EA=B0=80=20=EC=8B=9C=20=EC=9D=B4=EC=A0=84?= =?UTF-8?q?=20=EC=83=81=ED=83=9C=20=EA=B0=92=20=EB=B0=94=EB=9D=BC=EB=B3=B4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/executeJS/src/pages/playground/playground-groups.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index fae101d..821dd50 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -24,10 +24,10 @@ export const PlaygroundGroups: React.FC = () => { const handleAddTab = () => { setTabs((prevTabs) => { - const newTabId = `playground-${tabs.length + 1}`; + const newTabId = `playground-${prevTabs.length + 1}`; const newTab: Tab = { id: newTabId, - title: `Playground ${tabs.length + 1}`, + title: `Playground ${prevTabs.length + 1}`, }; return [...prevTabs, newTab]; From 147644d837bcbe440310551c84a8ccf77f954c6b Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 19:07:48 +0900 Subject: [PATCH 09/10] =?UTF-8?q?chore:=20=ED=83=AD=20id=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/executeJS/src/pages/playground/playground-groups.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index 821dd50..b67eaae 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -24,7 +24,8 @@ export const PlaygroundGroups: React.FC = () => { const handleAddTab = () => { setTabs((prevTabs) => { - const newTabId = `playground-${prevTabs.length + 1}`; + const date = new Date().valueOf(); + const newTabId = `playground-${date}`; const newTab: Tab = { id: newTabId, title: `Playground ${prevTabs.length + 1}`, From 7502cb05e189f483f806eec50f4003a011735ee9 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Tue, 28 Oct 2025 19:10:21 +0900 Subject: [PATCH 10/10] =?UTF-8?q?chore:=20=EC=83=88=EB=A1=9C=EC=9A=B4=20?= =?UTF-8?q?=ED=83=AD=20=EC=B6=94=EA=B0=80=20=EC=8B=9C=20title=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/executeJS/src/pages/playground/playground-groups.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index b67eaae..27d01df 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/apps/executeJS/src/pages/playground/playground-groups.tsx @@ -7,7 +7,9 @@ interface Tab { title: string; } -const initialTabs: Tab[] = [{ id: 'playground-1', title: 'Playground 1' }]; +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(initialTabs); @@ -28,7 +30,7 @@ export const PlaygroundGroups: React.FC = () => { const newTabId = `playground-${date}`; const newTab: Tab = { id: newTabId, - title: `Playground ${prevTabs.length + 1}`, + title: INITIAL_TAB_TITLE, }; return [...prevTabs, newTab];