사용자가  xslide.kr  프로젝트의 표 기능을 개선해 달라고 요청했습니다:

  1. 툴팁에 있던 표 편집 기능들을 우측 속성창(Inspector)으로 이동.
  2. 행별 높이 조절 기능 및 열별 간격 조정 기능 추가.
  3. 개별 셀 또는 선택된 셀 범위에 대한 테두리 색상 및 굵기 수정 기능 추가.

사용자 검토 필요

기존의 호환성을 깨는 변경사항은 없습니다. 플로팅 툴팁(팝업) 대신 우측 속성창에서 표 편집을 하도록 UI 위치가 이동하며 기능이 추가될 예정입니다.

미해결 질문

없음.

제안된 변경 사항

[UI 및 DOM 요소 추가]

[MODIFY] index.html

  • 우측 속성창의  selection-properties  영역 하단에  <div id="prop-section-table" class="prop-sub-section" style="display:none">  태그를 추가합니다.
  • 추가할 표 컨트롤 속성 UI:
    • 표 구조 제어: 행/열 추가 및 삭제, 셀 병합/분할, 행/열 높이 및 너비 같게 분배하기 버튼.
    • 크기 제어: 선택된 범위의 행 높이, 열 너비를 설정하는 숫자 입력 필드.
    • 셀 서식: 글자 크기, 글자 색상, 굵게, 가로/세로 정렬 제어.
    • 배경 및 테두리: 셀 배경색, 테두리 색상, 테두리 굵기 설정.

[MODIFY] assets/js/modules/dom.js

  • 새로 추가되는 표 관련 속성창 UI 요소들의 DOM 참조를 등록합니다.

[속성창 로직 (Inspector)]

[MODIFY] assets/js/modules/inspector.js

  • syncInspectorWithObject  함수에서 선택된 오브젝트가  table 인 경우  DOM.sectionTable 을 보여주도록 로직을 추가합니다.
  • window.syncTableInspector()  함수를 생성하여, 현재 선택된 셀 범위( TableEditor.getSelectionBounds() )의 설정값을 읽어와 속성창 UI에 실시간 반영하도록 합니다.
  • bindInspectorEvents  에 표 관련 이벤트 리스너들을 추가하여 속성창 조작 시  state 와  TableEditor  로직을 업데이트하도록 연결합니다.

[표 편집 코어 로직 (Table Editor)]

[MODIFY] assets/js/modules/table_editor.js

  • 기존의 툴팁 UI 팝업을 띄우는  createFloatingToolbar ,  showToolbar ,  hideToolbar  로직을 제거합니다.
  • 플로팅 툴바를 띄우는 대신  window.syncTableInspector() 를 호출하여 우측 속성창을 갱신합니다.
  • 기존 메서드( addRow ,  delRow ,  addCol ,  delCol ,  mergeCells ,  splitCells  등)가 속성창에서 호출될 수 있도록 유지 및 최적화합니다.
  • 열 너비 조절( setColWidth ), 행 높이 조절( setRowHeight ) 함수를 추가합니다.
  • 개별 셀 테두리 설정 로직을  applyStyle  또는 별도 메서드에 추가합니다.

[MODIFY] assets/js/modules/editor.js

  • 표가 화면에 렌더링되는  generateObjectInnerHtml  함수(오브젝트가  table 인 경우)를 수정합니다.
  • 각  <td>  셀의  style  속성을 생성할 때, 전역 테이블 테두리가 아닌  cell.borderWidth  와  cell.borderColor  값이 있으면 우선적으로 적용되게 수정합니다.
  • 또한  cell.width  나  cell.height  값이 지정되어 있을 경우 반영되도록 렌더링 로직을 업데이트합니다.

검증 계획

수동 검증

  1. 에디터를 열고 표를 생성합니다.
  2. 캔버스에서 셀 또는 셀 범위를 선택했을 때 우측 속성창에 표 전용 컨트롤 패널이 나오는지 확인합니다.
  3. 속성창에서 행 높이, 열 너비를 변경하여 캔버스의 표가 변하는지 확인합니다.
  4. 셀 배경색, 테두리 색상 및 두께를 변경하여 시각적으로 올바르게 적용되는지 확인합니다.
  5. 속성창 버튼을 이용해 병합/분할, 행/열 추가/삭제가 기존 툴팁과 동일하게 작동하는지 확인합니다.