[FRT-24] 설정 화면

src/renderer/src/App.tsx

@@ -1,13 +1,15 @@
 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 (
     <HashRouter>
       <Routes>
         <Route path="/" element={<MainPage />}></Route>
         <Route path="/connection-wizard" element={<ConnectionWizard />}></Route>
+        <Route path="/setting" element={<SettingModal />} />
       </Routes>
     </HashRouter>
   )

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

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

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'

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

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'
 

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'

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

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'

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 {

src/renderer/src/components/setting/key-management.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+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('')
+
+  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>
+  )
+}

src/renderer/src/components/setting/setting-modal.tsx

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+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 (
+    <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>
+  )
+}

src/renderer/src/components/setting/setting-side-bar.tsx

@@ -0,0 +1,58 @@
+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
+}
+
+/**
+ * 설정 모달의 사이드바
+ *
+ * @author 6-keem
+ *
+ * @param activeTab 현재 활성화 탭 (상태)
+ * @param setActiveTab 활성화 탭 변경 함수
+ * @returns JSX.Element
+ */
+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 gap-2">
+      {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>
+  )
+}

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
+}