Grafana 클론코딩 #4 - 대시보드 편집과 저장 구현하기

// public/app/features/dashboard-scene/scene/DashboardScene.tsx
export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
  ...
  public onEnterEditMode = (source: 'user' | 'assistant' = 'user') => {
    ...
    this._initialState = sceneUtils.cloneSceneObjectState(this.state, { isDirty: false });
    this._initialUrlState = locationService.getLocation();

    this.setState({ isEditing: true, editable: true });
    this.state.body.editModeChanged?.(true);
    this._changeTracker.startTrackingChanges();
    ...
  };
  ...
}

// public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx
export class PanelEditor extends SceneObjectBase<PanelEditorState> {
  private _layoutItemState?: SceneObjectState;
  private _layoutItem: DashboardLayoutItem;
  private _originalSaveModel!: Panel;
  ...
  private setOriginalState(panelRef: SceneObjectRef<VizPanel>) {
    const panel = panelRef.resolve();

    this._originalSaveModel = vizPanelToPanel(panel);
    this._layoutItemState = sceneUtils.cloneSceneObjectState(this._layoutItem.state);
  }
  ...
}

// public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx
export class PanelEditor extends SceneObjectBase<PanelEditorState> {
  ...
  private _setupChangeDetection() {
    const panel = this.state.panelRef.resolve();
    const performSaveModelDiff = () => {
      this.setState({
        isDirty: !deepEqual(this._originalSaveModel, vizPanelToPanel(panel)),
      });
    };
    ...
  }
  ...
}

// public/app/features/dashboard-scene/panel-edit/PanelEditor.tsx
export class PanelEditor extends SceneObjectBase<PanelEditorState> {
  ...
  public onDiscard = () => {
    this.setState({ isDirty: false });

    const panel = this.state.panelRef.resolve();
    const dashboard = getDashboardSceneFor(this);
    ...
    if (this.state.isNewPanel) {
      dashboard.removePanel(panel);
    } else {
      this._layoutItem!.setState(this._layoutItemState!);
    }

    locationService.partial({ editPanel: null });
  };
  ...
}

-- db/metadata/003_panels.sql
BEGIN;

CREATE TABLE IF NOT EXISTS schema_migrations (
    name text PRIMARY KEY
);

ALTER TABLE dashboards ADD COLUMN IF NOT EXISTS panels jsonb NOT NULL DEFAULT '[]'::jsonb
    CHECK (jsonb_typeof(panels) = 'array');

UPDATE dashboards
...

COMMIT;

-- db/metadata/003_panels.sql
...
UPDATE dashboards
SET panels = jsonb_build_array(jsonb_build_object(
    'id', 'daily-sales',
    'type', 'table',
    'title', '일별 매출과 영업이익',
    'sql', $query$SELECT
  order_date AS "날짜",
  SUM(payment_amount) AS "매출",
  SUM(profit) AS "영업이익"
FROM analytics.profit_daily(DATE '2026-07-01', DATE '2026-07-31')
GROUP BY order_date
ORDER BY order_date$query$
))
WHERE uid = 'sales-overview' AND panels = '[]'::jsonb
  AND NOT EXISTS (SELECT 1 FROM schema_migrations WHERE name = '003_panels');

INSERT INTO schema_migrations (name) VALUES ('003_panels') ON CONFLICT DO NOTHING;
...

docker compose exec -T metadata-db psql -U dashboard_lab -d dashboard_lab \
  -v ON_ERROR_STOP=1 -f /docker-entrypoint-initdb.d/003_panels.sql

// backend/internal/dashboard/dashboard.go
type Panel struct {
    ID    string `json:"id"`
    Type  string `json:"type"`
    Title string `json:"title"`
    SQL   string `json:"sql"`
}

type Document struct {
    Title       string  `json:"title"`
    Description string  `json:"description"`
    Panels      []Panel `json:"panels"`
}

// backend/internal/dashboard/dashboard.go
type Store interface {
    List(context.Context) ([]Dashboard, error)
    GetByUID(context.Context, string) (Dashboard, error)
    Update(context.Context, string, Document) (Dashboard, error)
}

// backend/internal/dashboard/dashboard.go
type ValidationError struct{ Message string }

func (e *ValidationError) Error() string { return e.Message }

// backend/internal/dashboard/dashboard.go
func (d Document) Validate() error {
    invalid := func(message string) error { return &ValidationError{Message: message} }
    if strings.TrimSpace(d.Title) == "" || len([]rune(d.Title)) > 200 {
        return invalid("대시보드 제목은 1~200자로 입력해 주세요.")
    }
    if len([]rune(d.Description)) > 2000 {
        return invalid("설명은 2000자 이내로 입력해 주세요.")
    }
    if d.Panels == nil || len(d.Panels) > 20 {
        return invalid("panels는 최대 20개의 패널을 가진 배열이어야 합니다.")
    }
    ...
}

// backend/internal/dashboard/dashboard.go
func (d Document) Validate() error {
    ...
    ids := make(map[string]bool)
    for i, panel := range d.Panels {
        if strings.TrimSpace(panel.ID) == "" || len(panel.ID) > 100 || ids[panel.ID] {
            return invalid("패널 ID는 비어 있거나 중복될 수 없습니다.")
        }
        ids[panel.ID] = true
        if panel.Type != "table" {
            return invalid("현재는 table 패널만 지원합니다.")
        }
        if strings.TrimSpace(panel.Title) == "" || len([]rune(panel.Title)) > 200 {
            return invalid(fmt.Sprintf("%d번째 패널 제목은 1~200자로 입력해 주세요.", i+1))
        }
        if strings.TrimSpace(panel.SQL) == "" || len(panel.SQL) > 20000 {
            return invalid(fmt.Sprintf("%d번째 패널 SQL은 비어 있지 않고 20000바이트 이내여야 합니다.", i+1))
        }
    }
    return nil
}

// backend/internal/dashboard/dashboard.go
func (s *PostgresStore) Update(ctx context.Context, uid string, document Document) (Dashboard, error) {
    if err := document.Validate(); err != nil {
        return Dashboard{}, err
    }
    panels, err := json.Marshal(document.Panels)
    if err != nil {
        return Dashboard{}, err
    }
    item := Dashboard{
        UID: uid, Title: document.Title,
        Description: document.Description, Panels: document.Panels,
    }
    ...
}

// backend/internal/dashboard/dashboard.go
func (s *PostgresStore) Update(ctx context.Context, uid string, document Document) (Dashboard, error) {
    ...
    err = s.db.QueryRowContext(ctx, `
        UPDATE dashboards SET title = $2, description = $3, panels = $4::jsonb, updated_at = now()
        WHERE uid = $1 RETURNING updated_at
    `, uid, document.Title, document.Description, string(panels)).Scan(&item.UpdatedAt)
    if errors.Is(err, sql.ErrNoRows) {
        return Dashboard{}, ErrNotFound
    }
    return item, err
}

// backend/internal/dashboard/dashboard.go
func (s *PostgresStore) List(ctx context.Context) ([]Dashboard, error) {
    ...
    for rows.Next() {
        var item Dashboard
        var panels []byte
        if err := rows.Scan(&item.UID, &item.Title, &item.Description, &item.UpdatedAt, &panels); err != nil {
            return nil, err
        }
        if err := json.Unmarshal(panels, &item.Panels); err != nil {
            return nil, err
        }
        dashboards = append(dashboards, item)
    }
    ...
}

// backend/cmd/api/main.go
func newHandler(store dashboard.Store, runner query.Runner) http.Handler {
    ...
    mux.HandleFunc("PUT /api/v1/dashboards/{uid}", updateDashboard(store))
    ...
}

// backend/cmd/api/main.go
func updateDashboard(store dashboard.Store) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        r.Body = http.MaxBytesReader(w, r.Body, 512*1024)
        decoder := json.NewDecoder(r.Body)
        decoder.DisallowUnknownFields()
        var document dashboard.Document
        if err := decoder.Decode(&document); err != nil {
            writeError(w, http.StatusBadRequest, "저장할 JSON 형식이 올바르지 않습니다.")
            return
        }
        if err := decoder.Decode(&struct{}{}); err != io.EOF {
            writeError(w, http.StatusBadRequest, "JSON 값은 하나만 전송해 주세요.")
            return
        }
        ...
    }
}

// backend/cmd/api/main.go
func updateDashboard(store dashboard.Store) http.HandlerFunc {
    return func(w http.ResponseWriter, r *http.Request) {
        ...
        if err := document.Validate(); err != nil {
            writeError(w, http.StatusBadRequest, err.Error())
            return
        }
        item, err := store.Update(r.Context(), r.PathValue("uid"), document)
        if errors.Is(err, dashboard.ErrNotFound) {
            writeError(w, http.StatusNotFound, "dashboard not found")
            return
        }
        if err != nil {
            writeError(w, http.StatusInternalServerError, "대시보드를 저장하지 못했습니다. 다시 시도해 주세요.")
            return
        }
        writeJSON(w, http.StatusOK, item)
    }
}

// frontend/src/dashboard.ts
export type Panel = { id: string; type: 'table'; title: string; sql: string };
export type DashboardDocument = { title: string; description: string; panels: Panel[] };
export type Dashboard = DashboardDocument & { uid: string; updatedAt: string };

export function toDocument(dashboard: DashboardDocument): DashboardDocument {
  return {
    title: dashboard.title,
    description: dashboard.description,
    panels: dashboard.panels.map(({ id, type, title, sql }) => ({ id, type, title, sql })),
  };
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  const [saved, setSaved] = useState<Dashboard>();
  const [draft, setDraft] = useState<DashboardDocument>();
  const [editing, setEditing] = useState(false);
  const [panelEditor, setPanelEditor] = useState<Panel>();
  const [dialog, setDialog] = useState<'save' | 'discard' | undefined>();
  const [removeID, setRemoveID] = useState<string>();
  const [error, setError] = useState('');
  const [saveError, setSaveError] = useState('');
  const [saving, setSaving] = useState(false);
  const [notice, setNotice] = useState('');
  const dirty = !!saved && !!draft && JSON.stringify(toDocument(saved)) !== JSON.stringify(draft);
  ...
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  ...
  useEffect(() => {
    const controller = new AbortController();
    fetch(`${apiURL}/api/v1/dashboards/${uid}`, { signal: controller.signal })
      .then(readResponse<Dashboard>)
      .then((value) => { setSaved(value); setDraft(toDocument(value)); })
      .catch((reason: Error) => { if (reason.name !== 'AbortError') setError(reason.message); });
    return () => controller.abort();
  }, [uid]);
  ...
}

// frontend/src/dashboard.ts
export async function readResponse<T>(response: Response): Promise<T> {
  if (!response.ok) {
    const body = await response.json().catch(() => null);
    throw new Error(body?.message ?? `요청 실패 (${response.status})`);
  }
  return response.json() as Promise<T>;
}

// frontend/src/DashboardEditor.tsx
export function PanelEditor({ panel, onApply, onCancel }: {
  panel: Panel;
  onApply: (panel: Panel) => void;
  onCancel: () => void;
}) {
  const [form, setForm] = useState({ ...panel });
  const [preview, setPreview] = useState({ sql: panel.sql, run: 0 });
  const [error, setError] = useState('');
  ...
}

// frontend/src/DashboardEditor.tsx
export function PanelEditor({ panel, onApply, onCancel }: {
  panel: Panel; onApply: (panel: Panel) => void; onCancel: () => void;
}) {
  ...
  return <main className="dashboard-workspace">
    ...
    <div className="panel-editor-layout">
      <div>
        <section className="panel preview">
          <h2>{form.title || 'New panel'}</h2>
          <PanelData key={preview.run} sql={preview.sql} />
        </section>
        <section className="panel query-editor">
          <div className="panel-heading">
            <h2>Queries</h2>
            <button onClick={() => setPreview({ sql: form.sql, run: preview.run + 1 })}>
              Run query
            </button>
          </div>
          ...
          <label>SQL<textarea spellCheck={false} value={form.sql}
            onChange={(event) => setForm({ ...form, sql: event.target.value })} /></label>
          ...
        </section>
      </div>
      ...
    </div>
  </main>;
}

// frontend/src/DashboardEditor.tsx
export function PanelEditor({ panel, onApply, onCancel }: {
  panel: Panel; onApply: (panel: Panel) => void; onCancel: () => void;
}) {
  ...
  return <main className="dashboard-workspace">
    ...
    <div className="panel-editor-layout">
      ...
      <aside className="panel panel-options">
        <h2>Panel options</h2><p>Visualization: Table</p>
        <label>Panel title<input value={form.title}
          onChange={(event) => setForm({ ...form, title: event.target.value })} /></label>
        {error && <p role="alert" className="error-message">{error}</p>}
        ...
      </aside>
    </div>
  </main>;
}

// frontend/src/DashboardEditor.tsx
export function PanelEditor({ panel, onApply, onCancel }: {
  panel: Panel; onApply: (panel: Panel) => void; onCancel: () => void;
}) {
  ...
  return <main className="dashboard-workspace">
    <nav className="workspace-toolbar">
      <strong>Edit panel</strong>
      <div className="toolbar-actions">
        <button onClick={onCancel}>Discard panel changes</button>
        <button className="primary" onClick={() => {
          if (!form.title.trim() || !form.sql.trim()) {
            setError('패널 제목과 SQL을 입력해 주세요.'); return;
          }
          onApply(form);
        }}>Apply</button>
      </div>
    </nav>
    ...
  </main>;
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  ...
  if (panelEditor) return <PanelEditor key={panelEditor.id} panel={panelEditor}
    onCancel={() => setPanelEditor(undefined)}
    onApply={(panel) => {
      setDraft((current) => current && ({
        ...current,
        panels: current.panels.some((p) => p.id === panel.id)
          ? current.panels.map((p) => p.id === panel.id ? panel : p)
          : [...current.panels, panel],
      }));
      setPanelEditor(undefined);
      setNotice('패널 변경을 적용했습니다. 대시보드를 저장하면 DB에 반영됩니다.');
    }} />;
  ...
}

// frontend/src/dashboard.ts
export function movePanel(panels: Panel[], id: string, offset: number): Panel[] {
  const from = panels.findIndex((panel) => panel.id === id);
  const to = from + offset;
  if (from < 0 || to < 0 || to >= panels.length) return panels;
  const next = [...panels];
  [next[from], next[to]] = [next[to], next[from]];
  return next;
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  ...
  return <main className="dashboard-workspace">
    ...
    {removeID && <Dialog title="Remove panel?" onClose={() => setRemoveID(undefined)}>
      ...
      <div className="dialog-actions">
        <button onClick={() => setRemoveID(undefined)}>Cancel</button>
        <button onClick={() => {
          setDraft({ ...draft, panels: draft.panels.filter((p) => p.id !== removeID) });
          setRemoveID(undefined);
        }}>Remove panel</button>
      </div>
    </Dialog>}
  </main>;
}

// frontend/src/TablePanel.tsx
export function PanelData({ sql }: { sql: string }) {
  const [frame, setFrame] = useState<TableFrame>();
  const [error, setError] = useState<string>();
  useEffect(() => {
    const controller = new AbortController();
    setFrame(undefined);
    setError(undefined);
    fetch(`${apiURL}/api/v1/query`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ sql }),
      signal: controller.signal,
    })
      ...
    return () => controller.abort();
  }, [sql]);
  ...
}

// frontend/src/TablePanel.tsx
export function PanelData({ sql }: { sql: string }) {
  ...
  useEffect(() => {
    ...
    fetch(`${apiURL}/api/v1/query`, {
      ...
    })
      .then(async (response) => {
        if (!response.ok) {
          const body = await response.json().catch(() => undefined);
          throw new Error(body?.message ?? '표 데이터를 불러오지 못했습니다.');
        }
        return response.json() as Promise<TableFrame>;
      })
      .then((value) => { if (!controller.signal.aborted) setFrame(value); })
      .catch((reason: Error) => { if (!controller.signal.aborted) setError(reason.message); });
    return () => controller.abort();
  }, [sql]);
  ...
}

// frontend/src/DashboardEditor.tsx
function Dialog({ title, children, onClose }: {
  title: string; children: ReactNode; onClose: () => void;
}) {
  const ref = useRef<HTMLDialogElement>(null);
  useEffect(() => { ref.current?.showModal(); }, []);
  return <dialog ref={ref} aria-label={title}
    onCancel={(event) => { event.preventDefault(); onClose(); }}>
    <h2>{title}</h2>{children}
  </dialog>;
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  ...
  return <main className="dashboard-workspace">
    ...
    {dialog === 'save' && <Dialog title="Save dashboard"
      onClose={() => { if (!saving) setDialog(undefined); }}>
      <form onSubmit={(event) => { event.preventDefault(); void save(); }}>
        <label>Title<input autoFocus value={draft.title} disabled={saving}
          onChange={(event) => setDraft({ ...draft, title: event.target.value })} /></label>
        <label>Description<textarea value={draft.description} disabled={saving}
          onChange={(event) => setDraft({ ...draft, description: event.target.value })} /></label>
        <p>패널 {draft.panels.length}개의 제목, SQL, 순서를 저장합니다.</p>
        {saveError && <p role="alert" className="error-message">{saveError}</p>}
        <div className="dialog-actions">
          <button type="button" disabled={saving} onClick={() => setDialog(undefined)}>Cancel</button>
          <button className="primary" disabled={saving}>{saving ? 'Saving…' : 'Save'}</button>
        </div>
      </form>
    </Dialog>}
    ...
  </main>;
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  ...
  async function save() {
    if (!draft || saving) return;
    setSaving(true); setSaveError('');
    try {
      const result = await fetch(`${apiURL}/api/v1/dashboards/${uid}`, {
        method: 'PUT', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(toDocument(draft)),
      }).then(readResponse<Dashboard>);
      setSaved(result); setDraft(toDocument(result)); setDialog(undefined);
      setNotice('대시보드를 저장했습니다.');
    } catch (reason) {
      setSaveError(reason instanceof Error ? reason.message : '저장하지 못했습니다.');
    } finally { setSaving(false); }
  }
  ...
}

// frontend/src/DashboardEditor.tsx
export function DashboardDetail({ uid }: { uid: string }) {
  ...
  function exitEdit() {
    if (!saved) return;
    setDraft(toDocument(saved));
    setEditing(false); setDialog(undefined); setNotice('');
  }
  ...
}

backend % GOWORK=off go test ./...
ok  github.com/minyeamer/dashboard-lab/backend/cmd/api
ok  github.com/minyeamer/dashboard-lab/backend/internal/dashboard
ok  github.com/minyeamer/dashboard-lab/backend/internal/query

// frontend/src/DashboardEditor.test.tsx
it('retains inputs and reports server validation errors on failed save', async () => {
  const user = userEvent.setup();
  render(<DashboardDetail uid="example" />);
  await user.click(await screen.findByRole('button', { name: 'Edit' }));
  await user.click(screen.getByRole('button', { name: 'Save dashboard' }));
  await user.clear(screen.getByLabelText('Title', { exact: true }));
  await user.type(screen.getByLabelText('Title', { exact: true }), 'New title');
  await user.click(screen.getByRole('button', { name: 'Save' }));
  expect(await screen.findByRole('alert')).toHaveProperty('textContent', '서버 검증 오류');
  expect(screen.getByLabelText('Title', { exact: true })).toHaveProperty('value', 'New title');
});

import { useState } from 'react';

function ItemForm() {
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState('');
  return <form onSubmit={(event) => {
    event.preventDefault();
    setSubmitted(name.trim());
  }}>
    <label>이름<input value={name}
      onChange={(event) => setName(event.target.value)} /></label>
    <button type="submit">확인</button>
    <button type="button" onClick={() => setName('')}>초기화</button>
    <p>확인한 이름: {submitted}</p>
  </form>;
}

function updatePrice() {
  const original = { name: 'item', detail: { price: 1000 } };
  const shallow = { ...original };
  shallow.detail.price = 2000;
  console.log(original.detail.price); // 2000

  const independent = { ...original, detail: { ...original.detail } };
  independent.detail.price = 3000;
  console.log(original.detail.price); // 2000
}

type ItemInput struct {
    Name string `json:"name"`
}

func decodeItem(reader io.Reader) (ItemInput, error) {
    var item ItemInput
    decoder := json.NewDecoder(reader)
    decoder.DisallowUnknownFields()
    if err := decoder.Decode(&item); err != nil {
        return ItemInput{}, err
    }
    if err := decoder.Decode(&struct{}{}); err != io.EOF {
        return ItemInput{}, errors.New("expected one JSON document")
    }
    if strings.TrimSpace(item.Name) == "" {
        return ItemInput{}, errors.New("name is required")
    }
    return item, nil
}