Skip to content

Commit 8842887

Browse files
DohyunJegalDohyunJegal
committed
feat: Add CreateProjectModal component
1 parent 9c41b75 commit 8842887

1 file changed

Lines changed: 208 additions & 0 deletions

File tree

‎src/renderer/src/modals/CreateProjectModal.tsx‎

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
import { Button } from '@renderer/components/Button'
2+
import InputField from '@renderer/components/InputField'
3+
import Modal from '@renderer/components/Modal'
4+
import PageTitle from '@renderer/components/PageTitle'
5+
import RadioButton from '@renderer/components/RadioButton'
6+
import React, { useState } from 'react'
7+
8+
interface CreateProjectModalProps {
9+
isOpen: boolean
10+
onClose: () => void
11+
onSubmit?: (projectData: ProjectFormData) => void
12+
}
13+
14+
export interface ProjectFormData {
15+
projectName: string
16+
description: string
17+
dbType: 'MySQL' | 'PostgreSQL'
18+
host: string
19+
port: string
20+
username: string
21+
password: string
22+
}
23+
24+
const CreateProjectModal: React.FC<CreateProjectModalProps> = ({ isOpen, onClose, onSubmit }) => {
25+
const [formData, setFormData] = useState<ProjectFormData>({
26+
projectName: '',
27+
description: '',
28+
dbType: 'MySQL',
29+
host: '127.0.0.1',
30+
port: '3306',
31+
username: 'root',
32+
password: ''
33+
})
34+
35+
const [selected, setSelected] = useState('MySQL')
36+
const handleInputChange = (field: keyof ProjectFormData, value: string): void => {
37+
setFormData((prev) => ({
38+
...prev,
39+
[field]: value
40+
}))
41+
}
42+
43+
const handleSubmit = (): void => {
44+
const alertMessage = `
45+
입력값?
46+
프로젝트명: ${formData.projectName}
47+
프로젝트 설명: ${formData.description}
48+
DBMS: ${formData.dbType}
49+
호스트: ${formData.host}
50+
포트: ${formData.port}
51+
사용자명: ${formData.username}
52+
비밀번호: ${formData.password}
53+
`.trim()
54+
55+
alert(alertMessage)
56+
57+
if (onSubmit) {
58+
onSubmit(formData)
59+
}
60+
onClose()
61+
}
62+
63+
return (
64+
<>
65+
<style>
66+
{`
67+
.create-project-modal-header {
68+
margin-bottom: 14px;
69+
}
70+
71+
.create-project-modal-divider {
72+
margin: 14px 0;
73+
border: none;
74+
border-top: 1px solid #e5e7eb;
75+
}
76+
77+
.create-project-modal-form-container {
78+
display: flex;
79+
flex-direction: column;
80+
gap: 14px;
81+
}
82+
83+
.create-project-modal-input-group {
84+
display: flex;
85+
flex-direction: column;
86+
gap: 14px;
87+
}
88+
89+
.create-project-modal-dbms-section {
90+
margin-bottom: 14px;
91+
font-size: 20px;
92+
}
93+
94+
.create-project-modal-radio-group {
95+
display: flex;
96+
gap: 14px;
97+
}
98+
99+
.create-project-modal-row-group {
100+
display: flex;
101+
gap: 14px;
102+
}
103+
104+
.create-project-modal-button-container {
105+
display: flex;
106+
justify-content: flex-end;
107+
gap: 14px;
108+
margin-top: 14px;
109+
}
110+
`}
111+
</style>
112+
<Modal isOpen={isOpen} onClose={onClose}>
113+
<div className="create-project-modal-header">
114+
<PageTitle
115+
title="프로젝트 생성"
116+
description="새로운 데이터베이스 프로젝트의 정보를 입력해주세요."
117+
size="small"
118+
/>
119+
<hr className="create-project-modal-divider" />
120+
</div>
121+
<div className="create-project-modal-form-container">
122+
<div className="create-project-modal-input-group">
123+
<InputField
124+
title="프로젝트명"
125+
placeholder="프로젝트명"
126+
width={300}
127+
required={true}
128+
value={formData.projectName}
129+
onChange={(value) => handleInputChange('projectName', value)}
130+
/>
131+
<InputField
132+
title="프로젝트 설명"
133+
placeholder="프로젝트 설명"
134+
width={645}
135+
value={formData.description}
136+
onChange={(value) => handleInputChange('description', value)}
137+
/>
138+
</div>
139+
<div>
140+
<p className="create-project-modal-dbms-section">DBMS</p>
141+
<div className="create-project-modal-radio-group">
142+
<RadioButton
143+
label="MySQL"
144+
name="DBMS"
145+
value="MySQL"
146+
checked={selected === 'MySQL'}
147+
onChange={(e) => {
148+
setSelected(e.target.value)
149+
handleInputChange('dbType', e.target.value as 'MySQL' | 'PostgreSQL')
150+
}}
151+
/>
152+
<RadioButton
153+
label="PostgreSQL"
154+
name="DBMS"
155+
value="PostgreSQL"
156+
checked={selected === 'PostgreSQL'}
157+
onChange={(e) => {
158+
setSelected(e.target.value)
159+
handleInputChange('dbType', e.target.value as 'MySQL' | 'PostgreSQL')
160+
}}
161+
/>
162+
</div>
163+
</div>
164+
<div className="create-project-modal-row-group">
165+
<InputField
166+
title="호스트"
167+
placeholder="127.0.0.1"
168+
width={300}
169+
required={true}
170+
value={formData.host}
171+
onChange={(value) => handleInputChange('host', value)}
172+
/>
173+
<InputField
174+
title="포트"
175+
placeholder="3306"
176+
width={300}
177+
required={true}
178+
value={formData.port}
179+
onChange={(value) => handleInputChange('port', value)}
180+
/>
181+
</div>
182+
<InputField
183+
title="사용자명"
184+
placeholder="user"
185+
width={300}
186+
required={true}
187+
value={formData.username}
188+
onChange={(value) => handleInputChange('username', value)}
189+
/>
190+
<InputField
191+
title="비밀번호"
192+
placeholder="password"
193+
width={300}
194+
required={true}
195+
value={formData.password}
196+
onChange={(value) => handleInputChange('password', value)}
197+
/>
198+
</div>
199+
<div className="create-project-modal-button-container">
200+
<Button variant="gray">연결테스트</Button>
201+
<Button onClick={handleSubmit}>생성</Button>
202+
</div>
203+
</Modal>
204+
</>
205+
)
206+
}
207+
208+
export default CreateProjectModal

0 commit comments

Comments
 (0)