이 계획서는 사이드바 속성 패널(Inspector)에 그리드 형태의 차트 데이터 에디터를 도입하고, 차트의 기본 글꼴 크기 및 범례(Series)별 색상을 직접 변경할 수 있도록 기능을 개선하는 상세 설계서입니다.

제안된 변경 사항

기능 구현을 위해 총 4개의 파일을 수정합니다.

[구성 요소: UI 레이아웃]

[MODIFY] 

  • #prop-section-chart 의 기존 텍스트 입력창( textarea )과 적용 버튼을 제거합니다.
  • 대신 행/열 개수를 설정할 수 있는 입력란과 "그리드 생성" 버튼을 배치합니다.
  • 동적으로 스프레드시트 형태의 입력창들이 렌더링될 그리드 컨테이너(#chart-grid-container)를 추가합니다.
  • 차트의 "기본 폰트 크기" 조절용 슬라이더를 추가합니다.
  • 범례별 색상을 직접 선택할 수 있는 "범례별 색상 설정" 섹션(#chart-series-colors-section)을 추가합니다.

[구성 요소: DOM 캐시]

[MODIFY] 

  • 새로 추가된 차트 관련 UI 요소들(그리드 크기 인풋, 그리드 컨테이너, 폰트 슬라이더, 색상 설정 컨테이너 등)을 전역  window.DOM  객체에 등록 및 캐싱합니다.

[구성 요소: 차트 렌더링 및 스타일링]

[MODIFY] 

  • 차트 렌더링 시  obj.chartFontSize  값을 가져와 범례, X축, Y축 라벨의 폰트 크기에 반영합니다.
  • 개별 색상이 커스텀 지정된  obj.chartColors  배열이 존재할 경우, 구글 차트의  colors  속성에 적용합니다.

[구성 요소: 속성 바인딩 및 동적 제어]

[MODIFY] 

  • 차트 선택 시  obj.chartData  배열의 규격에 맞추어 테이블 셀 인풋을 그리드 컨테이너에 렌더링합니다.
  • 사용자가 그리드 안의 어떤 셀이든 값을 타이핑하면 실시간으로  obj.chartData 를 갱신하고 슬라이드 차트를 즉각 리렌더링합니다.
  • "그리드 재생성" 클릭 시 기존 입력된 데이터를 최대한 보존하면서 가로/세로 크기를 확장/축소하는 변환 함수( resizeChartGrid )를 구현합니다.
  • 컬럼 헤더(범례명) 수에 맞추어 개별 색상 피커를 자동 생성하고, 색상 변경 시 차트에 실시간으로 색상이 반영되도록 연동합니다.
  • 폰트 크기 변경 이벤트를 감지하여 차트의 폰트를 키우거나 줄입니다.

검증 계획

수동 검증 시나리오

  1. 그리드 크기 변경: 행 수를 4에서 5로 변경하고 "그리드 재생성"을 눌렀을 때, 입력해둔 값들이 날아가지 않고 신규 행만 아래에 추가되는지 확인합니다.
  2. 그리드 내 데이터 수정: 셀 값을 수정했을 때 차트 그래프 모양이 막힘없이 실시간으로 변화하는지 확인합니다.
  3. 글꼴 크기 조절: 슬라이더를 드래그하여 글꼴 크기를 바꿨을 때 차트 내부의 범례 글자와 축 숫자가 함께 커지고 작아지는지 확인합니다.
  4. 범례별 색상 지정: 범례별 색상 피커를 이용해 색상을 변경했을 때 해당하는 계열(그래프 막대/선 등)의 색상이 즉시 교체되는지 확인합니다.