jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rest api 연결 ui 개선

Browse Source
This commit is contained in:
dohyeons
2025-10-27 09:39:11 +09:00
parent 4e3dbd4bc8
commit ef5b86cc4c
3 changed files with 167 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/components/admin/ExternalDbConnectionModal.tsx
View File

@@ -73,6 +73,9 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
// 연결 정보가 변경될 때 폼 데이터 업데이트
useEffect(() => {
// 테스트 관련 상태 초기화
setTestResult(null);
if (connection) {
setFormData({
...connection,
@@ -304,7 +307,9 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
<Dialog open={isOpen} onOpenChange={onClose}>
<DialogContent className="max-h-[90vh] max-w-[95vw] overflow-y-auto sm:max-w-2xl">
<DialogHeader>
<DialogTitle className="text-base sm:text-lg">{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}</DialogTitle>
<DialogTitle className="text-base sm:text-lg">
{isEditMode ? "연결 정보 수정" : "새 외부 DB 연결 추가"}
</DialogTitle>
</DialogHeader>
<div className="space-y-3 sm:space-y-4">
@@ -437,7 +442,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
type="button"
variant="ghost"
size="sm"
className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
onClick={() => setShowPassword(!showPassword)}
>
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
@@ -464,7 +469,7 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
>
{testingConnection ? "테스트 중..." : "연결 테스트"}
</Button>
{testingConnection && <div className="text-sm text-gray-500">연결을 확인하고 있습니다...</div>}
{testingConnection && <div className="text-muted-foreground text-sm">연결을 확인하고 있습니다...</div>}
</div>
{/* 테스트 결과 표시 */}
@@ -492,7 +497,9 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
{!testResult.success && testResult.error && (
<div className="mt-2 text-xs">
<div>오류 코드: {testResult.error.code}</div>
{testResult.error.details && <div className="mt-1 text-destructive">{testResult.error.details}</div>}
{testResult.error.details && (
<div className="text-destructive mt-1">{testResult.error.details}</div>
)}
</div>
)}
</div>
@@ -602,7 +609,11 @@ export const ExternalDbConnectionModal: React.FC<ExternalDbConnectionModalProps>
>
취소
</Button>
<Button onClick={handleSave} disabled={loading} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
<Button
onClick={handleSave}
disabled={loading}
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{loading ? "저장 중..." : isEditMode ? "수정" : "생성"}
</Button>
</DialogFooter>