From 02eca202348722ccb8cb6a60bf64dcc8666303fd Mon Sep 17 00:00:00 2001 From: Bori-github Date: Fri, 31 Oct 2025 12:20:59 +0900 Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=ED=83=AD=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/features/playground/store.ts | 2 +- apps/executeJS/src/features/tab/index.ts | 1 + apps/executeJS/src/features/tab/ui/index.ts | 1 + .../src/features/tab/ui/tab-button.tsx | 50 +++++++++++++++++++ .../pages/playground/playground-groups.tsx | 44 ++++------------ 5 files changed, 64 insertions(+), 34 deletions(-) create mode 100644 apps/executeJS/src/features/tab/index.ts create mode 100644 apps/executeJS/src/features/tab/ui/index.ts create mode 100644 apps/executeJS/src/features/tab/ui/tab-button.tsx diff --git a/apps/executeJS/src/features/playground/store.ts b/apps/executeJS/src/features/playground/store.ts index 2959510..3e1303e 100644 --- a/apps/executeJS/src/features/playground/store.ts +++ b/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; diff --git a/apps/executeJS/src/features/tab/index.ts b/apps/executeJS/src/features/tab/index.ts new file mode 100644 index 0000000..5ecdd1f --- /dev/null +++ b/apps/executeJS/src/features/tab/index.ts @@ -0,0 +1 @@ +export * from './ui'; diff --git a/apps/executeJS/src/features/tab/ui/index.ts b/apps/executeJS/src/features/tab/ui/index.ts new file mode 100644 index 0000000..bf7c127 --- /dev/null +++ b/apps/executeJS/src/features/tab/ui/index.ts @@ -0,0 +1 @@ +export * from './tab-button'; diff --git a/apps/executeJS/src/features/tab/ui/tab-button.tsx b/apps/executeJS/src/features/tab/ui/tab-button.tsx new file mode 100644 index 0000000..b3546b3 --- /dev/null +++ b/apps/executeJS/src/features/tab/ui/tab-button.tsx @@ -0,0 +1,50 @@ +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 = ({ + tab, + isActive, + onActiveTab, + onCloseTab, +}) => { + const { id, title } = tab; + + return ( +
+ {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */} + + +
+ ); +}; diff --git a/apps/executeJS/src/pages/playground/playground-groups.tsx b/apps/executeJS/src/pages/playground/playground-groups.tsx index 465c97b..d4652ce 100644 --- a/apps/executeJS/src/pages/playground/playground-groups.tsx +++ b/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 = () => {
- {tabs.map(({ id, title }) => { - const active = id === activeTabId; + {tabs.map((tab) => { + const { id } = tab; + const isActive = id === activeTabId; return ( -
- {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */} - - -
+ tab={tab} + isActive={isActive} + onActiveTab={setActiveTab} + onCloseTab={closeTab} + /> ); })}
From 14eff3b3b91448133571ea714cfb2b6174605630 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Fri, 31 Oct 2025 13:09:50 +0900 Subject: [PATCH 2/5] =?UTF-8?q?style:=20=ED=83=AD=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/features/tab/ui/tab-button.tsx | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/apps/executeJS/src/features/tab/ui/tab-button.tsx b/apps/executeJS/src/features/tab/ui/tab-button.tsx index b3546b3..a9b85e7 100644 --- a/apps/executeJS/src/features/tab/ui/tab-button.tsx +++ b/apps/executeJS/src/features/tab/ui/tab-button.tsx @@ -18,33 +18,33 @@ export const TabButton: React.FC = ({ const { id, title } = tab; return ( -
+
{/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */} - - + + +
); }; From 2c8878f136e2cd70c9b1915fee06cdfe36fc3656 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Fri, 31 Oct 2025 13:15:42 +0900 Subject: [PATCH 3/5] =?UTF-8?q?style:=20=ED=83=AD=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EC=A0=9C=EB=AA=A9=20ellipsis=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/executeJS/src/features/tab/ui/tab-button.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/executeJS/src/features/tab/ui/tab-button.tsx b/apps/executeJS/src/features/tab/ui/tab-button.tsx index a9b85e7..6452ff0 100644 --- a/apps/executeJS/src/features/tab/ui/tab-button.tsx +++ b/apps/executeJS/src/features/tab/ui/tab-button.tsx @@ -19,7 +19,6 @@ export const TabButton: React.FC = ({ return (
- {/* TODO: 탭 최대 너비에 따른 제목 ellipsis 처리 @bori */}
@@ -31,7 +30,7 @@ export const TabButton: React.FC = ({ // TODO: 탭 우클릭 메뉴 로직 @bori console.log('우클릭 메뉴 -', id); }} - className={`group-hover:text-gray-50 px-2 cursor-pointer ${isActive ? 'text-gray-50' : 'text-gray-500'}`} + className={`group-hover:text-gray-50 w-40 px-2 truncate cursor-pointer ${isActive ? 'text-gray-50' : 'text-gray-500'}`} > {title} From 1b004e842ffd165a043bc380b07f187aa09938b5 Mon Sep 17 00:00:00 2001 From: Bori-github Date: Fri, 31 Oct 2025 13:20:37 +0900 Subject: [PATCH 4/5] =?UTF-8?q?style:=20=ED=83=AD=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EB=B3=B8=20=EC=A0=9C=EB=AA=A9=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=ED=83=AD=20=EC=A0=9C=EB=AA=A9=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=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/features/playground/store.ts | 2 +- apps/executeJS/src/features/tab/ui/tab-button.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/executeJS/src/features/playground/store.ts b/apps/executeJS/src/features/playground/store.ts index 3e1303e..4259f28 100644 --- a/apps/executeJS/src/features/playground/store.ts +++ b/apps/executeJS/src/features/playground/store.ts @@ -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'; diff --git a/apps/executeJS/src/features/tab/ui/tab-button.tsx b/apps/executeJS/src/features/tab/ui/tab-button.tsx index 6452ff0..7dc2c27 100644 --- a/apps/executeJS/src/features/tab/ui/tab-button.tsx +++ b/apps/executeJS/src/features/tab/ui/tab-button.tsx @@ -30,7 +30,7 @@ export const TabButton: React.FC = ({ // TODO: 탭 우클릭 메뉴 로직 @bori console.log('우클릭 메뉴 -', id); }} - className={`group-hover:text-gray-50 w-40 px-2 truncate cursor-pointer ${isActive ? 'text-gray-50' : 'text-gray-500'}`} + 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} From 661de63537c4723c00a1c344c62739b0eddb048e Mon Sep 17 00:00:00 2001 From: Bori-github Date: Sun, 2 Nov 2025 15:01:01 +0900 Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/executeJS/src/features/tab/ui/tab-button.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/executeJS/src/features/tab/ui/tab-button.tsx b/apps/executeJS/src/features/tab/ui/tab-button.tsx index 7dc2c27..b44b558 100644 --- a/apps/executeJS/src/features/tab/ui/tab-button.tsx +++ b/apps/executeJS/src/features/tab/ui/tab-button.tsx @@ -18,7 +18,7 @@ export const TabButton: React.FC = ({ const { id, title } = tab; return ( -
+
@@ -37,7 +37,7 @@ export const TabButton: React.FC = ({