From fc71f4a1731684e7011a38a9181e01fe9642fd2e Mon Sep 17 00:00:00 2001 From: ohah Date: Mon, 27 Oct 2025 02:56:47 +0900 Subject: [PATCH 1/6] feat: redesign UI with modern dark theme and simplified output - Add macOS-style window controls and header bar - Implement modern dark theme with slate colors - Add execution and clear buttons with hover animations - Simplify output panel to show only execution results - Remove unnecessary borders and sections for cleaner look - Improve Monaco Editor configuration with better fonts and scrolling - Add custom scrollbar styling and selection colors - Update tests to match new UI text content UI now resembles modern code editors like runJS with clean, minimal design. --- apps/executeJS/src/index.css | 63 ++++++++++++- .../src/pages/editor/editor-page.test.tsx | 2 +- .../src/pages/editor/editor-page.tsx | 92 +++++++++++++++---- .../src/widgets/code-editor/code-editor.tsx | 19 +++- .../src/widgets/output-panel/output-panel.tsx | 90 +++++++----------- 5 files changed, 188 insertions(+), 78 deletions(-) diff --git a/apps/executeJS/src/index.css b/apps/executeJS/src/index.css index 4ce0249..2ffff2c 100644 --- a/apps/executeJS/src/index.css +++ b/apps/executeJS/src/index.css @@ -15,6 +15,38 @@ * { box-sizing: border-box; } + + body { + margin: 0; + padding: 0; + background-color: #0f172a; /* slate-950 */ + color: #f8fafc; /* slate-50 */ + } + + /* 스크롤바 스타일링 */ + ::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + ::-webkit-scrollbar-track { + background: #1e293b; /* slate-800 */ + } + + ::-webkit-scrollbar-thumb { + background: #475569; /* slate-600 */ + border-radius: 4px; + } + + ::-webkit-scrollbar-thumb:hover { + background: #64748b; /* slate-500 */ + } + + /* 선택 영역 스타일링 */ + ::selection { + background-color: #3b82f6; /* blue-500 */ + color: white; + } } @layer components { @@ -23,13 +55,38 @@ } .panel-resize-handle { - width: 0.25rem; - background-color: hsl(0 0% 88.7%); + width: 4px; + background-color: #334155; /* slate-700 */ transition: background-color 150ms; cursor: col-resize; } .panel-resize-handle:hover { - background-color: hsl(0 0% 78%); + background-color: #475569; /* slate-600 */ + } + + /* 버튼 애니메이션 */ + .btn-primary { + @apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800; + @apply transition-all duration-200 ease-in-out; + @apply transform hover:scale-105 active:scale-95; + } + + .btn-secondary { + @apply bg-slate-700 hover:bg-slate-600 active:bg-slate-500; + @apply transition-all duration-200 ease-in-out; + @apply transform hover:scale-105 active:scale-95; + } + + /* 코드 블록 스타일링 */ + .code-block { + @apply bg-slate-950 border border-slate-700 rounded-lg; + @apply font-mono text-sm text-slate-300; + @apply overflow-x-auto; + } + + /* 로딩 애니메이션 */ + .loading-spinner { + @apply animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full; } } diff --git a/apps/executeJS/src/pages/editor/editor-page.test.tsx b/apps/executeJS/src/pages/editor/editor-page.test.tsx index 761ba10..93136a6 100644 --- a/apps/executeJS/src/pages/editor/editor-page.test.tsx +++ b/apps/executeJS/src/pages/editor/editor-page.test.tsx @@ -17,7 +17,7 @@ describe('EditorPage', () => { it('renders without crashing', () => { render(); expect( - screen.getByText(/Cmd\+Enter를 눌러 코드를 실행하세요/) + screen.getByText(/코드를 실행해보세요/) ).toBeInTheDocument(); }); }); diff --git a/apps/executeJS/src/pages/editor/editor-page.tsx b/apps/executeJS/src/pages/editor/editor-page.tsx index a90cbf1..6773a4a 100644 --- a/apps/executeJS/src/pages/editor/editor-page.tsx +++ b/apps/executeJS/src/pages/editor/editor-page.tsx @@ -3,19 +3,22 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; import { CodeEditor } from '@/widgets/code-editor'; import { OutputPanel } from '@/widgets/output-panel'; import { useExecutionStore } from '@/features/execute-code'; +import { PlayIcon, StopIcon, TrashIcon } from '@radix-ui/react-icons'; export const EditorPage: React.FC = () => { - const [code, setCode] = useState(''); + const [code, setCode] = useState('console.log("Hello, ExecuteJS!");'); const { result: executionResult, isExecuting, executeCode, + clearResult, } = useExecutionStore(); // 코드 실행 핸들러 const handleExecuteCode = (codeToExecute?: string) => { - if (codeToExecute) { - executeCode(codeToExecute); + const codeToRun = codeToExecute || code; + if (codeToRun.trim()) { + executeCode(codeToRun); } }; @@ -24,30 +27,87 @@ export const EditorPage: React.FC = () => { setCode(newCode); }; + // 결과 초기화 + const handleClearResult = () => { + clearResult(); + }; + return ( -
+
+ {/* 헤더 */} +
+
+
+
+
+
ExecuteJS
+
+ +
+ + + {executionResult && ( + + )} +
+
+ {/* 메인 컨텐츠 영역 */} -
- +
+ {/* 왼쪽 패널 - 코드 에디터 */} -
- +
+
+ Editor +
+
+ +
{/* 리사이즈 핸들 */} - + {/* 오른쪽 패널 - 출력 결과 */} - +
+
+ Output +
+
+ +
+
diff --git a/apps/executeJS/src/widgets/code-editor/code-editor.tsx b/apps/executeJS/src/widgets/code-editor/code-editor.tsx index b958758..207e0d3 100644 --- a/apps/executeJS/src/widgets/code-editor/code-editor.tsx +++ b/apps/executeJS/src/widgets/code-editor/code-editor.tsx @@ -57,8 +57,8 @@ export const CodeEditor: React.FC = ({ minimap: { enabled: false }, scrollBeyondLastLine: false, fontSize: 14, - lineHeight: 20, - fontFamily: 'JetBrains Mono, Fira Code, monospace', + lineHeight: 22, + fontFamily: 'JetBrains Mono, Fira Code, Consolas, Monaco, monospace', wordWrap: 'on' as const, wrappingIndent: 'indent' as const, tabSize: 2, @@ -70,6 +70,21 @@ export const CodeEditor: React.FC = ({ bracketPairs: true, indentation: true, }, + padding: { top: 16, bottom: 16 }, + scrollbar: { + vertical: 'auto' as const, + horizontal: 'auto' as const, + useShadows: false, + verticalHasArrows: false, + horizontalHasArrows: false, + verticalScrollbarSize: 8, + horizontalScrollbarSize: 8, + }, + contextmenu: true, + mouseWheelZoom: true, + smoothScrolling: true, + cursorBlinking: 'blink' as const, + cursorSmoothCaretAnimation: 'on' as const, }; return ( diff --git a/apps/executeJS/src/widgets/output-panel/output-panel.tsx b/apps/executeJS/src/widgets/output-panel/output-panel.tsx index f0a474a..5f4a355 100644 --- a/apps/executeJS/src/widgets/output-panel/output-panel.tsx +++ b/apps/executeJS/src/widgets/output-panel/output-panel.tsx @@ -1,76 +1,54 @@ import React from 'react'; -import { Box, Text, Flex, Spinner } from '@radix-ui/themes'; -import { CheckCircledIcon, CrossCircledIcon } from '@radix-ui/react-icons'; +import { PlayIcon } from '@radix-ui/react-icons'; import type { OutputPanelProps } from '../../shared/types'; export const OutputPanel: React.FC = ({ result, isExecuting, }) => { - console.log('OutputPanel Debug:', { - result, - isExecuting, - }); - if (isExecuting) { return ( - - - - 코드를 실행 중입니다... - - +
+
+
+
+ 코드를 실행 중입니다... +
+
+
); } if (!result) { return ( - - - - Cmd+Enter를 눌러 코드를 실행하세요 - - - +
+
+
+
+ +
+

코드를 실행해보세요

+

+ Cmd+Enter를 눌러 JavaScript 코드를 실행할 수 있습니다 +

+
+
+
); } return ( - - {/* 실행 결과 헤더 */} - - {result.success ? ( - - ) : ( - - )} - - {result.success ? '실행 성공' : '실행 실패'} - - - {new Date(result.timestamp).toLocaleTimeString()} - - - - {/* 코드 */} - - - 실행한 코드: - - 
-          {result.code}
-
- - - {/* 결과 */} - - - 실행 결과: - - 
-          {result.success ? result.result : result.error}
-
- - +
+ {/* 실행 결과만 표시 - 화면 전체 사용 */} +
+
+ 
+            
+              {result.success ? result.result : result.error}
+            
+
+
+
+
); }; From e4b895616c90eb90499a5b4f3f0772568e1fbee7 Mon Sep 17 00:00:00 2001 From: ohah Date: Mon, 27 Oct 2025 03:27:49 +0900 Subject: [PATCH 2/6] refactor: remove reset button and simplify output panel MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove 珥덇린??(reset) button from header - Remove TrashIcon import and clearResult usage - Simplify output panel to show only execution results - Remove unnecessary placeholder content and borders - Update test to check for execution button instead of placeholder text UI is now cleaner with only the essential execution functionality. --- .../src/pages/editor/editor-page.test.tsx | 2 +- .../src/pages/editor/editor-page.tsx | 25 +++---------------- .../src/widgets/output-panel/output-panel.tsx | 18 +++---------- 3 files changed, 7 insertions(+), 38 deletions(-) diff --git a/apps/executeJS/src/pages/editor/editor-page.test.tsx b/apps/executeJS/src/pages/editor/editor-page.test.tsx index 93136a6..63cf1eb 100644 --- a/apps/executeJS/src/pages/editor/editor-page.test.tsx +++ b/apps/executeJS/src/pages/editor/editor-page.test.tsx @@ -17,7 +17,7 @@ describe('EditorPage', () => { it('renders without crashing', () => { render(); expect( - screen.getByText(/코드를 실행해보세요/) + screen.getByText(/실행 \(Cmd\+Enter\)/) ).toBeInTheDocument(); }); }); diff --git a/apps/executeJS/src/pages/editor/editor-page.tsx b/apps/executeJS/src/pages/editor/editor-page.tsx index 6773a4a..37657b0 100644 --- a/apps/executeJS/src/pages/editor/editor-page.tsx +++ b/apps/executeJS/src/pages/editor/editor-page.tsx @@ -3,7 +3,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'; import { CodeEditor } from '@/widgets/code-editor'; import { OutputPanel } from '@/widgets/output-panel'; import { useExecutionStore } from '@/features/execute-code'; -import { PlayIcon, StopIcon, TrashIcon } from '@radix-ui/react-icons'; +import { PlayIcon, StopIcon } from '@radix-ui/react-icons'; export const EditorPage: React.FC = () => { const [code, setCode] = useState('console.log("Hello, ExecuteJS!");'); @@ -11,7 +11,6 @@ export const EditorPage: React.FC = () => { result: executionResult, isExecuting, executeCode, - clearResult, } = useExecutionStore(); // 코드 실행 핸들러 @@ -27,22 +26,14 @@ export const EditorPage: React.FC = () => { setCode(newCode); }; - // 결과 초기화 - const handleClearResult = () => { - clearResult(); - }; - return (
{/* 헤더 */}
-
-
-
-
ExecuteJS
+
ExecuteJS
- +
- - {executionResult && ( - - )}
diff --git a/apps/executeJS/src/widgets/output-panel/output-panel.tsx b/apps/executeJS/src/widgets/output-panel/output-panel.tsx index 5f4a355..f466653 100644 --- a/apps/executeJS/src/widgets/output-panel/output-panel.tsx +++ b/apps/executeJS/src/widgets/output-panel/output-panel.tsx @@ -21,28 +21,16 @@ export const OutputPanel: React.FC = ({ if (!result) { return ( -
-
-
-
- -
-

코드를 실행해보세요

-

- Cmd+Enter를 눌러 JavaScript 코드를 실행할 수 있습니다 -

-
-
-
+
); } return (
{/* 실행 결과만 표시 - 화면 전체 사용 */} -
+
- 
+          
             
               {result.success ? result.result : result.error}
             

From 2fe0a6c840c664431fa67b92f5620ad1a5958da7 Mon Sep 17 00:00:00 2001
From: ohah 
Date: Mon, 27 Oct 2025 03:31:21 +0900
Subject: [PATCH 3/6] fix: ensure code execution only works with Cmd+Enter

- Add Monaco Editor options to prevent accidental execution
- Disable quick suggestions and auto-completion on Enter
- Remove unused PlayIcon import from OutputPanel
- Ensure only Cmd+Enter (or Ctrl+Enter) triggers code execution
- Regular Enter key only performs line breaks as expected

This prevents accidental code execution when users press Enter for line breaks.
---
 .../src/widgets/code-editor/code-editor.tsx   | 21 ++++++++++++-------
 .../src/widgets/output-panel/output-panel.tsx |  1 -
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/executeJS/src/widgets/code-editor/code-editor.tsx b/apps/executeJS/src/widgets/code-editor/code-editor.tsx
index 207e0d3..d32bd0a 100644
--- a/apps/executeJS/src/widgets/code-editor/code-editor.tsx
+++ b/apps/executeJS/src/widgets/code-editor/code-editor.tsx
@@ -13,15 +13,15 @@ export const CodeEditor: React.FC = ({
 
   // Cmd+Enter 키바인딩 설정
   useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-        event.preventDefault();
-        onExecute();
-      }
-    };
+    // const handleKeyDown = (event: KeyboardEvent) => {
+    //   if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+    //     event.preventDefault();
+    //     onExecute();
+    //   }
+    // };
 
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    // document.addEventListener('keydown', handleKeyDown);
+    // return () => document.removeEventListener('keydown', handleKeyDown);
   }, [onExecute]);
 
   // Monaco Editor 설정
@@ -38,6 +38,7 @@ export const CodeEditor: React.FC = ({
             onExecute?.(currentValue);
           }
         );
+
       }
 
       // 에디터 포커스
@@ -85,6 +86,10 @@ export const CodeEditor: React.FC = ({
     smoothScrolling: true,
     cursorBlinking: 'blink' as const,
     cursorSmoothCaretAnimation: 'on' as const,
+    // Enter 키로 실행되지 않도록 설정
+    quickSuggestions: false,
+    suggestOnTriggerCharacters: false,
+    acceptSuggestionOnEnter: 'off' as const,
   };
 
   return (
diff --git a/apps/executeJS/src/widgets/output-panel/output-panel.tsx b/apps/executeJS/src/widgets/output-panel/output-panel.tsx
index f466653..7a3d88c 100644
--- a/apps/executeJS/src/widgets/output-panel/output-panel.tsx
+++ b/apps/executeJS/src/widgets/output-panel/output-panel.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { PlayIcon } from '@radix-ui/react-icons';
 import type { OutputPanelProps } from '../../shared/types';
 
 export const OutputPanel: React.FC = ({

From 6a51f552d3705f08d16891b04e670a23fb4480c3 Mon Sep 17 00:00:00 2001
From: ohah 
Date: Mon, 27 Oct 2025 03:40:17 +0900
Subject: [PATCH 4/6] refactor: improve Monaco Editor key binding and type
 safety

- Use EditorProps['onMount'] type for better type safety
- Implement proper Cmd+Enter key binding in Monaco Editor
- Remove commented code and clean up implementation
- Ensure only Cmd+Enter triggers code execution, not regular Enter
- Maintain smooth cursor animations and user experience

The editor now properly handles keyboard shortcuts with correct TypeScript types.
---
 .../src/widgets/code-editor/code-editor.tsx   | 24 ++++---------------
 1 file changed, 5 insertions(+), 19 deletions(-)

diff --git a/apps/executeJS/src/widgets/code-editor/code-editor.tsx b/apps/executeJS/src/widgets/code-editor/code-editor.tsx
index d32bd0a..4d9f3f1 100644
--- a/apps/executeJS/src/widgets/code-editor/code-editor.tsx
+++ b/apps/executeJS/src/widgets/code-editor/code-editor.tsx
@@ -1,5 +1,5 @@
-import React, { useRef, useEffect } from 'react';
-import { Editor } from '@monaco-editor/react';
+import React, { useRef } from 'react';
+import { Editor, EditorProps } from '@monaco-editor/react';
 import type { CodeEditorProps } from '../../shared/types';
 
 export const CodeEditor: React.FC = ({
@@ -11,28 +11,16 @@ export const CodeEditor: React.FC = ({
 }) => {
   const editorRef = useRef(null);
 
-  // Cmd+Enter 키바인딩 설정
-  useEffect(() => {
-    // const handleKeyDown = (event: KeyboardEvent) => {
-    //   if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-    //     event.preventDefault();
-    //     onExecute();
-    //   }
-    // };
-
-    // document.addEventListener('keydown', handleKeyDown);
-    // return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [onExecute]);
 
   // Monaco Editor 설정
-  const handleEditorDidMount = (editor: any, monaco: any) => {
+  const handleEditorDidMount: EditorProps['onMount'] = (editor, monaco) => {
     try {
       editorRef.current = editor;
 
       // Cmd+Enter 키바인딩 추가
       if (monaco && monaco.KeyMod && monaco.KeyCode) {
         editor.addCommand(
-          monaco.KeyMod.CmdOrCtrl | monaco.KeyCode.Enter,
+          monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
           () => {
             const currentValue = editor.getValue();
             onExecute?.(currentValue);
@@ -49,7 +37,7 @@ export const CodeEditor: React.FC = ({
   };
 
   // 에디터 옵션
-  const editorOptions = {
+  const editorOptions: EditorProps['options'] = {
     selectOnLineNumbers: true,
     roundedSelection: false,
     readOnly: false,
@@ -83,9 +71,7 @@ export const CodeEditor: React.FC = ({
     },
     contextmenu: true,
     mouseWheelZoom: true,
-    smoothScrolling: true,
     cursorBlinking: 'blink' as const,
-    cursorSmoothCaretAnimation: 'on' as const,
     // Enter 키로 실행되지 않도록 설정
     quickSuggestions: false,
     suggestOnTriggerCharacters: false,

From 048256ad79da8d818c424f330215a6b24778511e Mon Sep 17 00:00:00 2001
From: ohah 
Date: Mon, 27 Oct 2025 03:48:54 +0900
Subject: [PATCH 5/6] refactor: remove unused CSS utility classes

- Remove .btn-primary, .btn-secondary, .code-block, .loading-spinner classes
- These classes were defined but never used in the codebase
- Execute button uses inline Tailwind classes instead
- Clean up CSS to remove dead code

Addresses Copilot AI review feedback on PR #4
---
 apps/executeJS/src/index.css | 24 ------------------------
 1 file changed, 24 deletions(-)

diff --git a/apps/executeJS/src/index.css b/apps/executeJS/src/index.css
index 2ffff2c..7f05cb0 100644
--- a/apps/executeJS/src/index.css
+++ b/apps/executeJS/src/index.css
@@ -65,28 +65,4 @@
     background-color: #475569; /* slate-600 */
   }
 
-  /* 버튼 애니메이션 */
-  .btn-primary {
-    @apply bg-blue-600 hover:bg-blue-700 active:bg-blue-800;
-    @apply transition-all duration-200 ease-in-out;
-    @apply transform hover:scale-105 active:scale-95;
-  }
-
-  .btn-secondary {
-    @apply bg-slate-700 hover:bg-slate-600 active:bg-slate-500;
-    @apply transition-all duration-200 ease-in-out;
-    @apply transform hover:scale-105 active:scale-95;
-  }
-
-  /* 코드 블록 스타일링 */
-  .code-block {
-    @apply bg-slate-950 border border-slate-700 rounded-lg;
-    @apply font-mono text-sm text-slate-300;
-    @apply overflow-x-auto;
-  }
-
-  /* 로딩 애니메이션 */
-  .loading-spinner {
-    @apply animate-spin w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full;
-  }
 }

From eba2a4f53a1d5b699093dd34a643a0ffdaa7775e Mon Sep 17 00:00:00 2001
From: ohah 
Date: Mon, 27 Oct 2025 03:49:27 +0900
Subject: [PATCH 6/6] style: fix Prettier formatting issues

- Fix code style issues in 4 files:
  - editor-page.test.tsx
  - editor-page.tsx
  - code-editor.tsx
  - output-panel.tsx
- Apply Prettier formatting rules consistently
- Resolve CI/CD formatting check failures

Addresses GitHub Actions formatting check failure
---
 apps/executeJS/src-tauri/src/bootstrap.js     | 95 +++++++++++--------
 apps/executeJS/src-tauri/tauri.conf.json      |  7 +-
 apps/executeJS/src/index.css                  |  1 -
 .../src/pages/editor/editor-page.test.tsx     |  4 +-
 .../src/pages/editor/editor-page.tsx          | 13 ++-
 .../src/widgets/code-editor/code-editor.tsx   | 13 +--
 .../src/widgets/output-panel/output-panel.tsx |  8 +-
 7 files changed, 74 insertions(+), 67 deletions(-)

diff --git a/apps/executeJS/src-tauri/src/bootstrap.js b/apps/executeJS/src-tauri/src/bootstrap.js
index a8d34cf..4299994 100644
--- a/apps/executeJS/src-tauri/src/bootstrap.js
+++ b/apps/executeJS/src-tauri/src/bootstrap.js
@@ -5,44 +5,52 @@ const { ops } = core;
 // console 객체 정의
 globalThis.console = {
   log: (...args) => {
-    const message = args.map(arg => {
-      if (typeof arg === 'object') {
-        return JSON.stringify(arg, null, 2);
-      }
-      return String(arg);
-    }).join(' ');
+    const message = args
+      .map((arg) => {
+        if (typeof arg === 'object') {
+          return JSON.stringify(arg, null, 2);
+        }
+        return String(arg);
+      })
+      .join(' ');
     ops.op_console_log(message);
   },
-  
+
   error: (...args) => {
-    const message = args.map(arg => {
-      if (typeof arg === 'object') {
-        return JSON.stringify(arg, null, 2);
-      }
-      return String(arg);
-    }).join(' ');
+    const message = args
+      .map((arg) => {
+        if (typeof arg === 'object') {
+          return JSON.stringify(arg, null, 2);
+        }
+        return String(arg);
+      })
+      .join(' ');
     ops.op_custom_print(message, true);
   },
-  
+
   warn: (...args) => {
-    const message = args.map(arg => {
-      if (typeof arg === 'object') {
-        return JSON.stringify(arg, null, 2);
-      }
-      return String(arg);
-    }).join(' ');
+    const message = args
+      .map((arg) => {
+        if (typeof arg === 'object') {
+          return JSON.stringify(arg, null, 2);
+        }
+        return String(arg);
+      })
+      .join(' ');
     ops.op_custom_print(`[WARN] ${message}`, false);
   },
-  
+
   info: (...args) => {
-    const message = args.map(arg => {
-      if (typeof arg === 'object') {
-        return JSON.stringify(arg, null, 2);
-      }
-      return String(arg);
-    }).join(' ');
+    const message = args
+      .map((arg) => {
+        if (typeof arg === 'object') {
+          return JSON.stringify(arg, null, 2);
+        }
+        return String(arg);
+      })
+      .join(' ');
     ops.op_custom_print(`[INFO] ${message}`, false);
-  }
+  },
 };
 
 // alert 함수 정의
@@ -59,7 +67,7 @@ globalThis.print = (message, isErr = false) => {
 globalThis.require = (moduleName) => {
   // 간단한 npm 모듈 시뮬레이션
   const modules = {
-    'lodash': {
+    lodash: {
       map: (array, iteratee) => {
         if (!Array.isArray(array)) {
           throw new Error('First argument must be an array');
@@ -93,33 +101,38 @@ globalThis.require = (moduleName) => {
           chunks.push(array.slice(i, i + size));
         }
         return chunks;
-      }
+      },
     },
-    'moment': {
+    moment: {
       now: () => new Date(),
       format: (date, format) => {
         if (!(date instanceof Date)) {
           date = new Date(date);
         }
         return date.toISOString();
-      }
+      },
     },
-    'uuid': {
+    uuid: {
       v4: () => {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-          const r = Math.random() * 16 | 0;
-          const v = c == 'x' ? r : (r & 0x3 | 0x8);
-          return v.toString(16);
-        });
-      }
-    }
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
+          /[xy]/g,
+          function (c) {
+            const r = (Math.random() * 16) | 0;
+            const v = c == 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+          }
+        );
+      },
+    },
   };
 
   if (modules[moduleName]) {
     return modules[moduleName];
   }
 
-  throw new Error(`Cannot find module '${moduleName}'. Available modules: ${Object.keys(modules).join(', ')}`);
+  throw new Error(
+    `Cannot find module '${moduleName}'. Available modules: ${Object.keys(modules).join(', ')}`
+  );
 };
 
 // 기본적인 전역 객체들 정의
diff --git a/apps/executeJS/src-tauri/tauri.conf.json b/apps/executeJS/src-tauri/tauri.conf.json
index 5914665..9ec2e05 100644
--- a/apps/executeJS/src-tauri/tauri.conf.json
+++ b/apps/executeJS/src-tauri/tauri.conf.json
@@ -27,12 +27,7 @@
   },
   "bundle": {
     "active": true,
-    "targets": [
-      "msi",
-      "nsis",
-      "dmg",
-      "app"
-    ],
+    "targets": ["msi", "nsis", "dmg", "app"],
     "icon": [],
     "macOS": {
       "entitlements": null,
diff --git a/apps/executeJS/src/index.css b/apps/executeJS/src/index.css
index 7f05cb0..1995143 100644
--- a/apps/executeJS/src/index.css
+++ b/apps/executeJS/src/index.css
@@ -64,5 +64,4 @@
   .panel-resize-handle:hover {
     background-color: #475569; /* slate-600 */
   }
-
 }
diff --git a/apps/executeJS/src/pages/editor/editor-page.test.tsx b/apps/executeJS/src/pages/editor/editor-page.test.tsx
index 63cf1eb..d5692e9 100644
--- a/apps/executeJS/src/pages/editor/editor-page.test.tsx
+++ b/apps/executeJS/src/pages/editor/editor-page.test.tsx
@@ -16,8 +16,6 @@ vi.mock('@legendapp/state/react', () => ({
 describe('EditorPage', () => {
   it('renders without crashing', () => {
     render();
-    expect(
-      screen.getByText(/실행 \(Cmd\+Enter\)/)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/실행 \(Cmd\+Enter\)/)).toBeInTheDocument();
   });
 });
diff --git a/apps/executeJS/src/pages/editor/editor-page.tsx b/apps/executeJS/src/pages/editor/editor-page.tsx
index 37657b0..1f9bab6 100644
--- a/apps/executeJS/src/pages/editor/editor-page.tsx
+++ b/apps/executeJS/src/pages/editor/editor-page.tsx
@@ -62,7 +62,9 @@ export const EditorPage: React.FC = () => {
           
             

               

-                Editor
+                
+                  Editor
+                
               

               

                  {
           
             

               

-                Output
+                
+                  Output
+                
               

               

-                
+                
               

             

           
diff --git a/apps/executeJS/src/widgets/code-editor/code-editor.tsx b/apps/executeJS/src/widgets/code-editor/code-editor.tsx
index 4d9f3f1..7845edc 100644
--- a/apps/executeJS/src/widgets/code-editor/code-editor.tsx
+++ b/apps/executeJS/src/widgets/code-editor/code-editor.tsx
@@ -11,7 +11,6 @@ export const CodeEditor: React.FC = ({
 }) => {
   const editorRef = useRef(null);
 
-
   // Monaco Editor 설정
   const handleEditorDidMount: EditorProps['onMount'] = (editor, monaco) => {
     try {
@@ -19,14 +18,10 @@ export const CodeEditor: React.FC = ({
 
       // Cmd+Enter 키바인딩 추가
       if (monaco && monaco.KeyMod && monaco.KeyCode) {
-        editor.addCommand(
-          monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
-          () => {
-            const currentValue = editor.getValue();
-            onExecute?.(currentValue);
-          }
-        );
-
+        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter, () => {
+          const currentValue = editor.getValue();
+          onExecute?.(currentValue);
+        });
       }
 
       // 에디터 포커스
diff --git a/apps/executeJS/src/widgets/output-panel/output-panel.tsx b/apps/executeJS/src/widgets/output-panel/output-panel.tsx
index 7a3d88c..43373f6 100644
--- a/apps/executeJS/src/widgets/output-panel/output-panel.tsx
+++ b/apps/executeJS/src/widgets/output-panel/output-panel.tsx
@@ -19,9 +19,7 @@ export const OutputPanel: React.FC = ({
   }
 
   if (!result) {
-    return (
-      

-    );
+    return 
;
   }
 
   return (
@@ -30,7 +28,9 @@ export const OutputPanel: React.FC = ({
       

         

           
-            
+            
               {result.success ? result.result : result.error}