이 인라인 편집 기능은 editable-content 커스텀 요소를 통해 구현됩니다.
커스텀 요소 설정
-
HTMLElement를 상속하는EditableContent클래스를 정의하고customElements.define으로 등록합니다. -
connectedCallback()에서 클릭 이벤트 리스너를 설정하여 편집 모드를 활성화하며,importmap설정을 통해 JS 파일이 로드됩니다.
편집 흐름 (#edit 메서드)
-
클릭 시
name속성을 가진 커스텀 요소의 직계 자식 요소를 편집 대상으로 식별합니다. 이name속성은 서버 업데이트에 필수적입니다. -
원본 요소의 내용으로 초기화된
<input>또는<textarea>필드를 생성하고, 이를 원본 요소 대신 DOM에 삽입합니다. -
입력 필드에 포커스를 주고,
blur이벤트 발생 시 변경 사항을 저장하는 리스너를 설정합니다.
입력 필드 생성 (#create 메서드)
-
원본 요소의 태그 종류(블록/인라인)에 따라
<textarea>또는<input type="text">를 동적으로 생성합니다. -
원본 요소의 클래스, 값,
name속성을 상속하며, 입력 필드 클릭 시 추가 편집 이벤트가 발생하지 않도록stopPropagation()을 적용합니다.
변경 사항 저장 (#save 메서드)
-
blur이벤트 발생 시,FormData객체에 필드 이름과 값을 담아 서버로PATCH요청을 보냅니다. -
보안을 위해
X-CSRF-Token헤더를 포함하며, 요청 성공 시 원본 요소의 텍스트를 업데이트하고 입력 필드를 원본 요소로 교체하여 화면에 반영합니다.