Skip to content

Commit 22b2bbd

Browse files
nahyeongjin1nahyeongjin1
authored
Merge pull request #28 from Queryus/feature/FRT-55
[FRT-55] API 연결
2 parents 3bf0797 + 4175b2b commit 22b2bbd

File tree

9 files changed

+277
-119
lines changed

9 files changed

+277
-119
lines changed

‎src/renderer/index.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@
55
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
66
<meta
77
http-equiv="Content-Security-Policy"
8-
content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data: https://fastly.jsdelivr.net;"
8+
content="
9+
default-src 'self';
10+
script-src 'self';
11+
style-src 'self' 'unsafe-inline';
12+
img-src 'self' data:;
13+
font-src 'self' data: https://fastly.jsdelivr.net;
14+
connect-src 'self' http://localhost:39722;
15+
"
916
/>
1017
</head>
1118
<body class="font-pretendard">

‎src/renderer/src/components/connection-wizard/confirm-settings.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { DATABASES, ConnectionDeatil } from './wizard.type'
1+
import { DATABASES, ConnectionDetail } from './wizard.type'
22

33
interface ConfirmSettingsProp {
4-
connectionDetail: ConnectionDeatil
4+
connectionDetail: ConnectionDetail
55
}
66

77
type ConnectionValue = string | number | null
@@ -17,9 +17,9 @@ type ConnectionValue = string | number | null
1717
export default function ConfirmSettings({
1818
connectionDetail
1919
}: ConfirmSettingsProp): React.JSX.Element {
20-
const entries = Object.entries(connectionDetail) as [keyof ConnectionDeatil, ConnectionValue][]
20+
const entries = Object.entries(connectionDetail) as [keyof ConnectionDetail, ConnectionValue][]
2121

22-
const labelMap: Record<keyof ConnectionDeatil, string> = {
22+
const labelMap: Record<keyof ConnectionDetail, string> = {
2323
nickname: '데이터베이스 연결 이름',
2424
databaseName: '데이터베이스명',
2525
username: '사용자명',
@@ -29,7 +29,7 @@ export default function ConfirmSettings({
2929
databaseType: '데이터베이스'
3030
}
3131

32-
const displayValue = (key: keyof ConnectionDeatil, value: ConnectionValue): string => {
32+
const displayValue = (key: keyof ConnectionDetail, value: ConnectionValue): string => {
3333
if (key === 'databaseType') {
3434
if (!value) return ''
3535
const db = DATABASES.find((d) => d.key === value)

‎src/renderer/src/components/connection-wizard/enter-connection-details.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import { X } from 'lucide-react'
2-
import { ConnectionDeatil } from './wizard.type'
2+
import { ConnectionDetail } from './wizard.type'
33
import { Button } from '../ui/button'
44
import { Input } from '../ui/input'
55
import { cn } from '@/lib/utils'
66

77
interface EnterConnectionDetailsProp {
8-
connectionDetail: ConnectionDeatil
9-
setConnectionDetail: (connectionDetail: ConnectionDeatil) => void
8+
connectionDetail: ConnectionDetail
9+
setConnectionDetail: React.Dispatch<React.SetStateAction<ConnectionDetail>>
1010
errorFields?: { [key: string]: boolean }
1111
setErrorFields?: (fields: { [key: string]: boolean }) => void
1212
}
1313

1414
interface InputFieldProps {
1515
label: string
16-
field: keyof ConnectionDeatil
16+
field: keyof ConnectionDetail
1717
placeholder?: string
18-
connectionDetail: ConnectionDeatil
19-
setConnectionDetail: (detail: ConnectionDeatil) => void
18+
connectionDetail: ConnectionDetail
19+
setConnectionDetail: (detail: ConnectionDetail) => void
2020
isNumber?: boolean
2121
hasError?: boolean
2222
onClearError?: () => void

‎src/renderer/src/components/connection-wizard/install-driver.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,24 @@
11
import { AlertCircle, CheckCircle2, FolderOpen } from 'lucide-react'
22
import { DatabaseInfo } from './wizard.type'
33
import { Button } from '../ui/button'
4-
import { useEffect, useState } from 'react'
4+
import { useEffect, useRef, useState } from 'react'
5+
import { api } from '@renderer/utils/api'
6+
import { toast } from 'sonner'
57

68
interface InstallDriverProp {
79
selectedDatabase: DatabaseInfo
810
isDriverDownloaded: boolean
911
setIsDriverDownloaded: (isDriverDownloaded: boolean) => void
1012
}
1113

14+
interface DBData {
15+
db_type: string
16+
is_installed: boolean
17+
driver_name: string
18+
driver_version: string
19+
driver_size_bytes: number
20+
}
21+
1222
/**
1323
* DB 드라이버 확인 및 설치 페이지
1424
*
@@ -21,36 +31,31 @@ export default function InstallDriver({
2131
isDriverDownloaded,
2232
setIsDriverDownloaded
2333
}: InstallDriverProp): React.JSX.Element {
24-
const [version, setVersion] = useState('알 수 없음')
25-
const [driverName, setDriverName] = useState('알 수 없음')
26-
const [driverVolume, setDriverVolume] = useState('알 수 없음')
27-
const [downloadUrl, setDownloadUrl] = useState('')
34+
const didFetch = useRef(false)
35+
const [dbData, setDBdata] = useState<DBData>()
2836

2937
useEffect(() => {
30-
if (!isDriverDownloaded)
31-
setTimeout(() => {
32-
handleCheckIsDownloaded()
33-
}, 1000)
38+
if (didFetch.current) return
39+
didFetch.current = true
40+
api
41+
.get(`/api/driver/info/${selectedDatabase?.id}`)
42+
.then((driverData) => {
43+
setDBdata(driverData.data as DBData)
44+
setIsDriverDownloaded(true)
45+
toast.success('데이터베이스 드라이버 확인 완료 🎉')
46+
})
47+
.catch(() => {
48+
setIsDriverDownloaded(false)
49+
toast.error('데이터베이스 드라이버 확인 중 오류가 발생했습니다.')
50+
})
3451
})
3552

36-
const handleCheckIsDownloaded = (): void => {
37-
/**
38-
* FIXME: API 호출
39-
*
40-
* 서버에서 드라이버 여부, 버전 가져와서 랜더링
41-
*/
42-
setDriverName(selectedDatabase.key + ' driver')
43-
setVersion('0.0.0')
44-
setDriverVolume('2MB')
45-
setIsDriverDownloaded(true)
46-
setDownloadUrl('https://www.google.com')
47-
}
48-
49-
const handleManualDownload = (): void => {
50-
if (!downloadUrl) throw Error('드라이버 다운로드 링크 없음')
53+
// NOTE: 수동 다운로드 보류 (sqlserver)
54+
// const handleManualDownload = (): void => {
55+
// if (!downloadUrl) throw Error('드라이버 다운로드 링크 없음')
5156

52-
window.api.send('open-external', downloadUrl)
53-
}
57+
// window.api.send('open-external', downloadUrl)
58+
// }
5459

5560
return (
5661
<div className="self-stretch inline-flex flex-col justify-start items-start gap-2">
@@ -81,12 +86,7 @@ export default function InstallDriver({
8186
className={`text-genie-100 bg-gradient-to-b bg-gradient-genie-gray rounded-lg outline-1 outline-offset-[-1px]
8287
outline-white/20 flex justify-center items-center gap-2 ${isDriverDownloaded && 'cursor-not-allowed'}`}
8388
>
84-
<Button
85-
size={'sm'}
86-
className="m-0 p-0"
87-
onClick={handleManualDownload}
88-
disabled={isDriverDownloaded}
89-
>
89+
<Button size={'sm'} className="m-0 p-0" disabled={isDriverDownloaded}>
9090
<FolderOpen className="size-3 relative overflow-hidden" />
9191
<div className="justify-start text-xs font-semibold font-['Pretendard'] leading-[18px]">
9292
수동 설치
@@ -101,23 +101,23 @@ export default function InstallDriver({
101101
버전
102102
</div>
103103
<div className="text-center justify-start text-genie-100 text-xs font-medium font-['Pretendard'] leading-[18px]">
104-
{version}
104+
{dbData?.driver_version}
105105
</div>
106106
</div>
107107
<div className="self-stretch inline-flex justify-start items-start gap-2">
108108
<div className="text-center justify-start text-genie-500 text-xs font-medium font-['Pretendard'] leading-[18px]">
109109
파일명
110110
</div>
111111
<div className="text-center justify-start text-genie-100 text-xs font-medium font-['Pretendard'] leading-[18px]">
112-
{driverName}
112+
{dbData?.driver_name}
113113
</div>
114114
</div>
115115
<div className="self-stretch inline-flex justify-start items-start gap-2">
116116
<div className="text-center justify-start text-genie-500 text-xs font-medium font-['Pretendard'] leading-[18px]">
117117
크기
118118
</div>
119119
<div className="text-center justify-start text-genie-100 text-xs font-medium font-['Pretendard'] leading-[18px]">
120-
{driverVolume}
120+
{dbData?.driver_size_bytes}
121121
</div>
122122
</div>
123123
</div>

‎src/renderer/src/components/connection-wizard/test-connection.tsx‎

Lines changed: 33 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,43 @@
1-
import { CircleCheck } from 'lucide-react'
21
import { Button } from '../ui/button'
32
import { toast } from 'sonner'
3+
import { ConnectionDetail, DatabaseInfo } from './wizard.type'
4+
import { api } from '@renderer/utils/api'
45

56
interface TestConnectionProp {
7+
selectedDatabase: DatabaseInfo
8+
connectionDetail: ConnectionDetail
69
setIsTested: (isTested: boolean) => void
710
}
8-
export default function TestConnection({ setIsTested }: TestConnectionProp): React.JSX.Element {
9-
const handleTest = (): void => {
10-
/**
11-
* FIXME:
12-
*
13-
* 1. 테스트 API 호출
14-
* 2. API 응답 결과 따라 분기
15-
*/
16-
const flag = true
17-
if (flag) {
18-
toast.success('연결 테스트 성공')
19-
setIsTested(true)
20-
} else {
21-
toast.error('연결 테스트 실패')
22-
setIsTested(false)
11+
12+
export default function TestConnection({
13+
selectedDatabase,
14+
connectionDetail,
15+
setIsTested
16+
}: TestConnectionProp): React.JSX.Element {
17+
const handleTest = async (): Promise<void> => {
18+
const payload = {
19+
type: selectedDatabase.id,
20+
host: connectionDetail.host,
21+
port: connectionDetail.port,
22+
username: connectionDetail.username,
23+
password: connectionDetail.password,
24+
name: connectionDetail.databaseName
2325
}
26+
27+
const filteredPayload = Object.fromEntries(Object.entries(payload).filter(([, v]) => v != null))
28+
29+
api
30+
.post('/api/user/db/connect/test', filteredPayload)
31+
.then((response) => {
32+
const flag = response.data as boolean
33+
setIsTested(flag)
34+
})
35+
.catch(() => {
36+
toast.error('데이터베이스 연결 테스트 중 오류가 발생했습니다.')
37+
38+
// FIXME: 테스트시에 true
39+
setIsTested(false)
40+
})
2441
}
2542

2643
return (
@@ -47,27 +64,6 @@ export default function TestConnection({ setIsTested }: TestConnectionProp): Rea
4764
</div>
4865
</div>
4966
</div>
50-
<div className="self-stretch w-full inline-flex flex-col justify-start items-start gap-6">
51-
<div className="self-stretch p-5 bg-gradient-genie-darkgray rounded-lg outline-1 outline-offset-[-1px] outline-genie-700 flex flex-col justify-start items-start gap-4">
52-
<div className="inline-flex justify-center items-center gap-2 text-genie-100">
53-
<CircleCheck className="w-4 h-4 relative overflow-hidden" />
54-
<div className="text-center justify-start text-genie-100 text-base font-bold font-['Pretendard'] leading-normal">
55-
테스트 항목
56-
</div>
57-
</div>
58-
<div className="justify-start text-genie-500 text-xs font-medium font-['Pretendard'] leading-[18px]">
59-
드라이버 로드 확인
60-
<br />
61-
호스트 및 포트 접근성 확인
62-
<br />
63-
인증 정보 검증
64-
<br />
65-
데이터베이스 접근 권한 확인
66-
<br />
67-
기본 쿼리 실행 테스트
68-
</div>
69-
</div>
70-
</div>
7167
</div>
7268
)
7369
}

0 commit comments

Comments
 (0)