fix: [interview] 대분류 하위 '+ 중분류 추가' 버튼 개선

- 기존 '+' 단일문자 → '+ 중분류 추가' 텍스트 버튼으로 변경
- children 목록 하단에 항상 표시되도록 위치 이동
This commit is contained in:
김보곤
2026-02-28 21:33:47 +09:00
parent 2a45b6bfe8
commit b2226341ee

View File

@@ -1368,9 +1368,7 @@ className="text-sm px-3 py-1.5 bg-blue-600 text-white rounded hover:bg-blue-700"
)}
<span className="text-sm font-medium text-gray-800 truncate">{root.name}</span>
</div>
<div className="flex items-center gap-1 flex-shrink-0" onClick={e => e.stopPropagation()}>
<button onClick={() => { setShowAddChildFor(showAddChildFor === root.id ? null : root.id); setShowAddRoot(false); setNewName(''); }}
className="text-xs text-green-600 hover:text-green-800" title="중분류 추가">+</button>
<div className="flex items-center gap-1.5 flex-shrink-0" onClick={e => e.stopPropagation()}>
<button onClick={() => { setEditingId(root.id); setEditName(root.name); }}
className="text-xs text-blue-600 hover:text-blue-800">수정</button>
<button onClick={() => handleDelete(root.id)}
@@ -1379,11 +1377,10 @@ className="text-xs text-red-500 hover:text-red-700">삭제</button>
</div>
)}
{/* 중분류 추가 입력 */}
{showAddChildFor === root.id && renderAddInput(root.id)}
{/* 중분류 (자식) */}
{hasChildren && expanded && root.children.map(child => (
{/* 중분류 목록 + 하단 추가 버튼 */}
{expanded && (
<>
{hasChildren && root.children.map(child => (
<div key={child.id}>
{editingId === child.id ? (
<div className="py-2" style={{ paddingLeft: '2rem' }}>{renderEditRow(child.id)}</div>
@@ -1407,6 +1404,21 @@ className="text-xs text-red-500 hover:text-red-700">삭제</button>
)}
</div>
))}
{/* 중분류 추가 입력 */}
{showAddChildFor === root.id && renderAddInput(root.id)}
{/* + 중분류 추가 버튼 */}
{showAddChildFor !== root.id && (
<div className="py-1.5 pr-3 border-b border-gray-100" style={{ paddingLeft: '2rem' }}>
<button onClick={() => { setShowAddChildFor(root.id); setShowAddRoot(false); setNewName(''); }}
className="flex items-center gap-1 text-xs text-gray-400 hover:text-blue-600">
<span>+</span> 중분류 추가
</button>
</div>
)}
</>
)}
</div>
);
})}