feat(WEB): 직원 관리 폼 직급/부서/직책 Select 드롭다운 연동

- 직급(rank) 필드를 API 기반 Select 드롭다운으로 변경
- 부서/직책 필드를 API 데이터 기반 Select로 변경
- handleDepartmentSelect, handlePositionSelect 핸들러 추가
- view 모드에서 Select disabled 상태 처리

src/components/hr/EmployeeManagement/EmployeeForm.tsx

@@ -287,6 +287,32 @@ export function EmployeeForm({
     }));
   };
 
+  // 부서 선택 변경 (id와 name 모두 업데이트)
+  const handleDepartmentSelect = (dpId: string, departmentId: string) => {
+    const dept = departments.find(d => String(d.id) === departmentId);
+    if (dept) {
+      setFormData(prev => ({
+        ...prev,
+        departmentPositions: prev.departmentPositions.map(dp =>
+          dp.id === dpId ? { ...dp, departmentId: String(dept.id), departmentName: dept.name } : dp
+        ),
+      }));
+    }
+  };
+
+  // 직책 선택 변경 (id와 name 모두 업데이트)
+  const handlePositionSelect = (dpId: string, positionId: string) => {
+    const position = titles.find(t => String(t.id) === positionId);
+    if (position) {
+      setFormData(prev => ({
+        ...prev,
+        departmentPositions: prev.departmentPositions.map(dp =>
+          dp.id === dpId ? { ...dp, positionId: String(position.id), positionName: position.name } : dp
+        ),
+      }));
+    }
+  };
+
   // 저장
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -600,13 +626,20 @@ export function EmployeeForm({
               {fieldSettings.showRank && (
                 <div className="space-y-2">
                   <Label htmlFor="rank">직급</Label>
-                  <Input
-                    id="rank"
+                  <Select
                     value={formData.rank}
-                    onChange={(e) => handleChange('rank', e.target.value)}
-                    placeholder="직급 입력"
+                    onValueChange={(value) => handleChange('rank', value)}
                     disabled={isViewMode}
-                  />
+                  >
+                    <SelectTrigger disabled={isViewMode}>
+                      <SelectValue placeholder="직급 선택" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {ranks.map((rank) => (
+                        <SelectItem key={rank.id} value={rank.name}>{rank.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </div>
               )}
 
@@ -657,20 +690,38 @@ export function EmployeeForm({
                   <div className="space-y-2">
                     {formData.departmentPositions.map((dp) => (
                       <div key={dp.id} className="flex items-center gap-2">
-                        <Input
-                          value={dp.departmentName}
-                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'departmentName', e.target.value)}
-                          placeholder="부서명"
-                          className="flex-1"
+                        <Select
+                          value={dp.departmentId}
+                          onValueChange={(value) => handleDepartmentSelect(dp.id, value)}
                           disabled={isViewMode}
-                        />
-                        <Input
-                          value={dp.positionName}
-                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'positionName', e.target.value)}
-                          placeholder="직책"
-                          className="flex-1"
+                        >
+                          <SelectTrigger className="flex-1" disabled={isViewMode}>
+                            <SelectValue placeholder="부서 선택">
+                              {dp.departmentName || '부서 선택'}
+                            </SelectValue>
+                          </SelectTrigger>
+                          <SelectContent>
+                            {departments.map((dept) => (
+                              <SelectItem key={dept.id} value={String(dept.id)}>{dept.name}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <Select
+                          value={dp.positionId}
+                          onValueChange={(value) => handlePositionSelect(dp.id, value)}
                           disabled={isViewMode}
-                        />
+                        >
+                          <SelectTrigger className="flex-1" disabled={isViewMode}>
+                            <SelectValue placeholder="직책 선택">
+                              {dp.positionName || '직책 선택'}
+                            </SelectValue>
+                          </SelectTrigger>
+                          <SelectContent>
+                            {titles.map((title) => (
+                              <SelectItem key={title.id} value={String(title.id)}>{title.name}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
                         {!isViewMode && (
                           <Button
                             type="button"