+ {filteredTasks.map((task) => (
+ // 각 task 항목에 대해 렌더링
+
+ {editingTaskId === task.id ? (
+ // 👇 현재 task가 편집 중인 항목일 때 UI 렌더링
+ <>
+ {/* "New name for [원래 이름]" 라벨 */}
+
{/* 스타일을 위한 클래스 */}
+
+
+
+ {/* 입력 필드 */}
+
setEditingTextValue(e.target.value)}
+ className="edit-input" // 스타일을 위한 클래스
+ autoFocus // 편집 모드 진입 시 자동으로 포커스
+ onKeyPress={(e) => { // Enter 키로 저장
+ if (e.key === 'Enter') {
+ handleSaveClick(task.id); // 현재 task ID를 전달
+ }
+ }}
+ />
+
+ {/* Cancel/Save 버튼 */}
+
{/* 기존 task-actions 클래스 재사용 */}
+ {/* 버튼 순서: Cancel, Save */}
+ {/* 클래스 추가 */}
+ handleSaveClick(task.id)} className="save-button" /> {/* 현재 task ID를 전달 */}
+
+
+ ) : (
+ // 👇 현재 task가 편집 중이 아닐 때 기본 UI 렌더링
+ <>
+
+ toggleTask(task.id)} // task.id 전달
+ />
+ {/* 완료된 할 일에 스타일 적용 */}
+
+
+
+
+ {/* Edit 클릭 시 handleEditClick 호출 */}
+ handleEditClick(task)} /> {/* task 객체 전체 전달 */}
+ deleteTask(task.id)} /> {/* task.id 전달 */}
+
+
+ )}
+