From 4619428ed300507a3b5c477441ad9894e48360d3 Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Tue, 22 Jul 2025 21:42:59 +0900
Subject: [PATCH 1/5] feat: add setting modal

---
 src/renderer/src/App.tsx                      |  2 +
 .../src/components/setting/key-management.tsx | 38 +++++++++++++++
 .../src/components/setting/setting-modal.tsx  | 16 +++++++
 .../components/setting/setting-side-bar.tsx   | 48 +++++++++++++++++++
 .../src/components/setting/settings.types.ts  | 11 +++++
 5 files changed, 115 insertions(+)
 create mode 100644 src/renderer/src/components/setting/key-management.tsx
 create mode 100644 src/renderer/src/components/setting/setting-modal.tsx
 create mode 100644 src/renderer/src/components/setting/setting-side-bar.tsx
 create mode 100644 src/renderer/src/components/setting/settings.types.ts

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 151090e..29b507b 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -1,6 +1,7 @@
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import { MainPage } from '@/components/workspace/main-page'
 import { ConnectionWizard } from '@/components/connection-wizard/wizard-modal'
+import SettingModal from './components/setting/setting-modal'
 
 function App(): React.JSX.Element {
   return (
@@ -8,6 +9,7 @@ function App(): React.JSX.Element {
       <Routes>
         <Route path="/" element={<MainPage />}></Route>
         <Route path="/connection-wizard" element={<ConnectionWizard />}></Route>
+        <Route path="/setting" element={<SettingModal />} />
       </Routes>
     </HashRouter>
   )
diff --git a/src/renderer/src/components/setting/key-management.tsx b/src/renderer/src/components/setting/key-management.tsx
new file mode 100644
index 0000000..b4bf40a
--- /dev/null
+++ b/src/renderer/src/components/setting/key-management.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react'
+import { X } from 'lucide-react'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+
+export default function KeyManagement(): React.JSX.Element {
+  const [apiKey, setApiKey] = useState('')
+
+  return (
+    <div className="self-stretch flex flex-col justify-start items-start gap-6">
+      <div className="flex flex-col gap-1 w-full">
+        <label className="text-sm text-white font-semibold pb-1.5">OpenAI API Key</label>
+        <div className="relative w-full">
+          <Input
+            type="password"
+            placeholder="API Key"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+            spellCheck={false}
+            className={`w-full pr-8 text-xs text-white font-medium font-['Pretendard'] leading-[18px]
+              bg-gradient-to-b from-[#1d1d1d] to-neutral-800 rounded-lg border border-[#383838] transition duration-150
+              focus:outline-none focus:ring-0 focus:ring-transparent focus:ring-offset-0 focus:border-[#9F73FF]`}
+          />
+          {apiKey && (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setApiKey('')}
+              className="absolute right-1 top-1/2 -translate-y-1/2"
+            >
+              <X className="w-4 h-4 text-white/50 hover:text-white" />
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/setting/setting-modal.tsx b/src/renderer/src/components/setting/setting-modal.tsx
new file mode 100644
index 0000000..bcc904c
--- /dev/null
+++ b/src/renderer/src/components/setting/setting-modal.tsx
@@ -0,0 +1,16 @@
+import { useState } from 'react'
+import KeyManagement from './key-management'
+import SettingSideBar from './setting-side-bar'
+import { SettingSection } from './settings.types'
+
+export default function SettingModal(): React.JSX.Element {
+  const [activeTab, setActiveTab] = useState(SettingSection.KeyManagement)
+  return (
+    <div className={`flex w-full h-screen min-w-[800px] items-center justify-center`}>
+      <SettingSideBar activeTab={activeTab} setActiveTab={setActiveTab} />
+      <div className="p-6 w-full h-full flex-[2] bg-[#272727]">
+        <KeyManagement />
+      </div>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/setting/setting-side-bar.tsx b/src/renderer/src/components/setting/setting-side-bar.tsx
new file mode 100644
index 0000000..991488c
--- /dev/null
+++ b/src/renderer/src/components/setting/setting-side-bar.tsx
@@ -0,0 +1,48 @@
+import { CircleQuestionMarkIcon, Code2, KeyRound } from 'lucide-react'
+import { SettingSection, SettingItem } from './settings.types'
+
+const SETTING_ITEMS: SettingItem[] = [
+  {
+    icon: <KeyRound className="size-3 relative overflow-hidden" />,
+    label: 'API 키 관리',
+    key: SettingSection.KeyManagement
+  },
+  {
+    icon: <Code2 className="size-3 relative overflow-hidden" />,
+    label: '코드 에디터 설정',
+    key: SettingSection.StylingCodeEditor
+  },
+  {
+    icon: <CircleQuestionMarkIcon className="size-3 relative overflow-hidden" />,
+    label: '도움말',
+    key: SettingSection.Info
+  }
+]
+
+interface SettingSideBarProp {
+  activeTab: SettingSection
+  setActiveTab: (activeTab: SettingSection) => void
+}
+export default function SettingSideBar({
+  activeTab,
+  setActiveTab
+}: SettingSideBarProp): React.JSX.Element {
+  return (
+    <div className="flex-[1] w-full bg-[#1c1c1c] self-stretch px-4 py-6 inline-flex flex-col justify-start items-start">
+      {SETTING_ITEMS.map((settingItem) => {
+        return (
+          <div
+            key={settingItem.key}
+            className={`w-full text-[#808080]  px-4 py-2 rounded-sm inline-flex justify-start items-center gap-4 transition duration-200 cursor-pointer hover:bg-[#272727] ${activeTab === settingItem.key && 'bg-[#272727]'}`}
+            onClick={() => setActiveTab(settingItem.key)}
+          >
+            {settingItem.icon}
+            <div className="justify-start text-[#e3e3e3] text-xs font-medium font-['Pretendard'] leading-[18px]">
+              {settingItem.label}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/setting/settings.types.ts b/src/renderer/src/components/setting/settings.types.ts
new file mode 100644
index 0000000..f5481a7
--- /dev/null
+++ b/src/renderer/src/components/setting/settings.types.ts
@@ -0,0 +1,11 @@
+export enum SettingSection {
+  KeyManagement = 'KeyManagement',
+  StylingCodeEditor = 'StylingCodeEditor',
+  Info = 'Info'
+}
+
+export interface SettingItem {
+  icon: React.ReactNode
+  label: string
+  key: SettingSection
+}

From 45a50fd4b8c379eff06f58a6e90ee88dba691ef9 Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Tue, 22 Jul 2025 22:34:05 +0900
Subject: [PATCH 2/5] style: add spacing between setting items

---
 src/renderer/src/components/setting/setting-side-bar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/src/components/setting/setting-side-bar.tsx b/src/renderer/src/components/setting/setting-side-bar.tsx
index 991488c..d4e6ec9 100644
--- a/src/renderer/src/components/setting/setting-side-bar.tsx
+++ b/src/renderer/src/components/setting/setting-side-bar.tsx
@@ -28,7 +28,7 @@ export default function SettingSideBar({
   setActiveTab
 }: SettingSideBarProp): React.JSX.Element {
   return (
-    <div className="flex-[1] w-full bg-[#1c1c1c] self-stretch px-4 py-6 inline-flex flex-col justify-start items-start">
+    <div className="flex-[1] w-full bg-[#1c1c1c] self-stretch px-4 py-6 inline-flex flex-col justify-start items-start gap-2">
       {SETTING_ITEMS.map((settingItem) => {
         return (
           <div

From ab8a276181237dddaa123abc68de5dff9b606bae Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Tue, 22 Jul 2025 22:35:09 +0900
Subject: [PATCH 3/5] refactor: rename type.ts

---
 .../src/components/connection-wizard/confirm-settings.tsx       | 2 +-
 .../src/components/connection-wizard/database-button.tsx        | 2 +-
 .../components/connection-wizard/enter-connection-details.tsx   | 2 +-
 .../src/components/connection-wizard/footer-buttons.tsx         | 2 +-
 .../src/components/connection-wizard/install-driver.tsx         | 2 +-
 .../src/components/connection-wizard/select-database.tsx        | 2 +-
 src/renderer/src/components/connection-wizard/sidebar.tsx       | 2 +-
 src/renderer/src/components/connection-wizard/wizard-modal.tsx  | 2 +-
 .../components/connection-wizard/{type.ts => wizard.type.ts}    | 0
 9 files changed, 8 insertions(+), 8 deletions(-)
 rename src/renderer/src/components/connection-wizard/{type.ts => wizard.type.ts} (100%)

diff --git a/src/renderer/src/components/connection-wizard/confirm-settings.tsx b/src/renderer/src/components/connection-wizard/confirm-settings.tsx
index 47f7fe7..61c6fdd 100644
--- a/src/renderer/src/components/connection-wizard/confirm-settings.tsx
+++ b/src/renderer/src/components/connection-wizard/confirm-settings.tsx
@@ -1,4 +1,4 @@
-import { DATABASES, ConnectionDeatil } from './type'
+import { DATABASES, ConnectionDeatil } from './wizard.type'
 
 interface ConfirmSettingsProp {
   connectionDetail: ConnectionDeatil
diff --git a/src/renderer/src/components/connection-wizard/database-button.tsx b/src/renderer/src/components/connection-wizard/database-button.tsx
index a460f2d..37790e1 100644
--- a/src/renderer/src/components/connection-wizard/database-button.tsx
+++ b/src/renderer/src/components/connection-wizard/database-button.tsx
@@ -1,4 +1,4 @@
-import { DatabaseInfo } from './type'
+import { DatabaseInfo } from './wizard.type'
 
 interface DatabaseButtonProps {
   databaseInfo: DatabaseInfo
diff --git a/src/renderer/src/components/connection-wizard/enter-connection-details.tsx b/src/renderer/src/components/connection-wizard/enter-connection-details.tsx
index 7e92b51..02e7f6f 100644
--- a/src/renderer/src/components/connection-wizard/enter-connection-details.tsx
+++ b/src/renderer/src/components/connection-wizard/enter-connection-details.tsx
@@ -1,5 +1,5 @@
 import { X } from 'lucide-react'
-import { ConnectionDeatil } from './type'
+import { ConnectionDeatil } from './wizard.type'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
 import { cn } from '@/lib/utils'
diff --git a/src/renderer/src/components/connection-wizard/footer-buttons.tsx b/src/renderer/src/components/connection-wizard/footer-buttons.tsx
index 2f93b7c..f5f7b9c 100644
--- a/src/renderer/src/components/connection-wizard/footer-buttons.tsx
+++ b/src/renderer/src/components/connection-wizard/footer-buttons.tsx
@@ -1,6 +1,6 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react'
 import { Button } from '../ui/button'
-import { DB_SETUP_STEPS, DBSetupStep } from './type'
+import { DB_SETUP_STEPS, DBSetupStep } from './wizard.type'
 
 interface FooterButtonsProp {
   activeTab: DBSetupStep
diff --git a/src/renderer/src/components/connection-wizard/install-driver.tsx b/src/renderer/src/components/connection-wizard/install-driver.tsx
index 76cd8b5..d3732e9 100644
--- a/src/renderer/src/components/connection-wizard/install-driver.tsx
+++ b/src/renderer/src/components/connection-wizard/install-driver.tsx
@@ -1,5 +1,5 @@
 import { AlertCircle, CheckCircle2, FolderOpen } from 'lucide-react'
-import { DatabaseInfo } from './type'
+import { DatabaseInfo } from './wizard.type'
 import { Button } from '../ui/button'
 import { useEffect, useState } from 'react'
 
diff --git a/src/renderer/src/components/connection-wizard/select-database.tsx b/src/renderer/src/components/connection-wizard/select-database.tsx
index 960c2be..d423c28 100644
--- a/src/renderer/src/components/connection-wizard/select-database.tsx
+++ b/src/renderer/src/components/connection-wizard/select-database.tsx
@@ -1,6 +1,6 @@
 import { Search, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
-import { DATABASES, DatabaseInfo } from './type'
+import { DATABASES, DatabaseInfo } from './wizard.type'
 import { Input } from '@/components/ui/input'
 import { useState } from 'react'
 import { DatabaseButton } from './database-button'
diff --git a/src/renderer/src/components/connection-wizard/sidebar.tsx b/src/renderer/src/components/connection-wizard/sidebar.tsx
index 2621fc6..8ecb73b 100644
--- a/src/renderer/src/components/connection-wizard/sidebar.tsx
+++ b/src/renderer/src/components/connection-wizard/sidebar.tsx
@@ -1,4 +1,4 @@
-import { DB_SETUP_STEPS, DBSetupStep } from './type'
+import { DB_SETUP_STEPS, DBSetupStep } from './wizard.type'
 
 interface SidebarProp {
   activeTab: DBSetupStep
diff --git a/src/renderer/src/components/connection-wizard/wizard-modal.tsx b/src/renderer/src/components/connection-wizard/wizard-modal.tsx
index 85dceb6..dd61865 100644
--- a/src/renderer/src/components/connection-wizard/wizard-modal.tsx
+++ b/src/renderer/src/components/connection-wizard/wizard-modal.tsx
@@ -2,7 +2,7 @@ import { JSX, useEffect, useState } from 'react'
 import { toast } from 'sonner'
 import { FooterButtons } from './footer-buttons'
 import { SelectDatabase } from './select-database'
-import { ConnectionDeatil, DatabaseInfo, DBSetupStep } from './type'
+import { ConnectionDeatil, DatabaseInfo, DBSetupStep } from './wizard.type'
 import Sidebar from './sidebar'
 import InstallDriver from './install-driver'
 import EnterConnectionDetails from './enter-connection-details'
diff --git a/src/renderer/src/components/connection-wizard/type.ts b/src/renderer/src/components/connection-wizard/wizard.type.ts
similarity index 100%
rename from src/renderer/src/components/connection-wizard/type.ts
rename to src/renderer/src/components/connection-wizard/wizard.type.ts

From 0a9ac0801a8299723324f6725e42cee1a977aea1 Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Tue, 22 Jul 2025 22:43:41 +0900
Subject: [PATCH 4/5] docs: add comment on setting modal

---
 src/renderer/src/components/setting/key-management.tsx |  7 +++++++
 src/renderer/src/components/setting/setting-modal.tsx  |  7 +++++++
 .../src/components/setting/setting-side-bar.tsx        | 10 ++++++++++
 3 files changed, 24 insertions(+)

diff --git a/src/renderer/src/components/setting/key-management.tsx b/src/renderer/src/components/setting/key-management.tsx
index b4bf40a..d5216f6 100644
--- a/src/renderer/src/components/setting/key-management.tsx
+++ b/src/renderer/src/components/setting/key-management.tsx
@@ -3,6 +3,13 @@ import { X } from 'lucide-react'
 import { Button } from '../ui/button'
 import { Input } from '../ui/input'
 
+/**
+ * API 설정 화면
+ *
+ * @author 6-keem
+ *
+ * @returns JSX.Element
+ */
 export default function KeyManagement(): React.JSX.Element {
   const [apiKey, setApiKey] = useState('')
 
diff --git a/src/renderer/src/components/setting/setting-modal.tsx b/src/renderer/src/components/setting/setting-modal.tsx
index bcc904c..6bead57 100644
--- a/src/renderer/src/components/setting/setting-modal.tsx
+++ b/src/renderer/src/components/setting/setting-modal.tsx
@@ -3,6 +3,13 @@ import KeyManagement from './key-management'
 import SettingSideBar from './setting-side-bar'
 import { SettingSection } from './settings.types'
 
+/**
+ * 설정 모달 화면
+ *
+ * @author 6-keem
+ *
+ * @returns JSX.Element
+ */
 export default function SettingModal(): React.JSX.Element {
   const [activeTab, setActiveTab] = useState(SettingSection.KeyManagement)
   return (
diff --git a/src/renderer/src/components/setting/setting-side-bar.tsx b/src/renderer/src/components/setting/setting-side-bar.tsx
index d4e6ec9..f0ec9e4 100644
--- a/src/renderer/src/components/setting/setting-side-bar.tsx
+++ b/src/renderer/src/components/setting/setting-side-bar.tsx
@@ -23,6 +23,16 @@ interface SettingSideBarProp {
   activeTab: SettingSection
   setActiveTab: (activeTab: SettingSection) => void
 }
+
+/**
+ * 설정 모달의 사이드바
+ *
+ * @author 6-keem
+ *
+ * @param activeTab 현재 활성화 탭 (상태)
+ * @param setActiveTab 활성화 탭 변경 함수
+ * @returns JSX.Element
+ */
 export default function SettingSideBar({
   activeTab,
   setActiveTab

From 002c2515d7a1c3a407b050fd1477d0263bccce4d Mon Sep 17 00:00:00 2001
From: 6-keem <6ukeem@gmail.com>
Date: Tue, 22 Jul 2025 22:49:09 +0900
Subject: [PATCH 5/5] feat: integrate open modal feature into main page

---
 .../src/components/layout/side-bar.tsx        | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/layout/side-bar.tsx b/src/renderer/src/components/layout/side-bar.tsx
index 73d1b9d..09a0641 100644
--- a/src/renderer/src/components/layout/side-bar.tsx
+++ b/src/renderer/src/components/layout/side-bar.tsx
@@ -10,8 +10,28 @@ const topNavItems: NavItem[] = [
 ]
 
 const bottomNavItems: NavItem[] = [
-  { id: 'settings', icon: Settings },
-  { id: 'add', icon: Plus }
+  {
+    id: 'settings',
+    icon: Settings,
+    onClick: () => {
+      window.api.send('open-sub-window', {
+        width: 840,
+        height: 576,
+        route: '/setting'
+      })
+    }
+  },
+  {
+    id: 'add',
+    icon: Plus,
+    onClick: () => {
+      window.api.send('open-sub-window', {
+        width: 800,
+        height: 610,
+        route: '/connection-wizard'
+      })
+    }
+  }
 ]
 
 function NavButton({ item }: { item: NavItem }): React.JSX.Element {