From 288871cb390e4aa93b217e2dab2dcf4ba281282e Mon Sep 17 00:00:00 2001
From: kent <shine1324@gmail.com>
Date: Thu, 8 Jan 2026 17:52:48 +0900
Subject: [PATCH] =?UTF-8?q?feat(WEB):=20=EC=A7=81=EC=9B=90=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=20=ED=8F=BC=20=EC=A7=81=EA=B8=89/=EB=B6=80=EC=84=9C/?=
 =?UTF-8?q?=EC=A7=81=EC=B1=85=20Select=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 직급(rank) 필드를 API 기반 Select 드롭다운으로 변경
- 부서/직책 필드를 API 데이터 기반 Select로 변경
- handleDepartmentSelect, handlePositionSelect 핸들러 추가
- view 모드에서 Select disabled 상태 처리
---
 .../hr/EmployeeManagement/EmployeeForm.tsx    | 85 +++++++++++++++----
 1 file changed, 68 insertions(+), 17 deletions(-)

diff --git a/src/components/hr/EmployeeManagement/EmployeeForm.tsx b/src/components/hr/EmployeeManagement/EmployeeForm.tsx
index 268f05e4..1aab626c 100644
--- a/src/components/hr/EmployeeManagement/EmployeeForm.tsx
+++ b/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"