fix : update

components/admin/extra-sheet-editor.tsx

@@ -223,7 +223,7 @@ export function ExtraSheetEditor({
             type="color"
             aria-label="เลือกสีพื้นหลังเซลล์"
             className="absolute inset-0 cursor-pointer opacity-0"
-            value={activeRow?.backgrounds[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
+            value={activeRow?.backgrounds?.[activeColumn?.id ?? ""] ?? DEFAULT_CELL_BACKGROUND}
             onChange={(event) => onChange(updateExtraSheetCells(value, selectedPoints(), {
               backgroundColor: event.target.value,
             }))}

components/public/structured-guide.tsx

@@ -1288,7 +1288,7 @@ function ExtraSectionContent({
                           <TableCell
                             key={column.id}
                             className="border-l first:border-l-0 whitespace-normal"
-                            style={sheetRow.backgrounds[column.id]
+                            style={sheetRow.backgrounds?.[column.id]
                               ? { backgroundColor: sheetRow.backgrounds[column.id] }
                               : undefined}
                           >

lib/guides/extra-sheet.test.ts

@@ -14,6 +14,7 @@ import {
   normalizeExtraSheetRichText,
   updateExtraSheetCell,
   updateExtraSheetCells,
+  type ExtraSheet,
 } from "@/lib/guides/extra-sheet";
 
 function idFactory() {
@@ -122,4 +123,17 @@ describe("Extra sheet", () => {
     expect(updateExtraSheetCells(updated, [{ row: 0, column: 0 }], { backgroundColor: null })
       .rows[0].backgrounds).toEqual({});
   });
+
+  it("renders legacy sheets that do not have background metadata yet", () => {
+    const sheet = createExtraSheet(idFactory());
+    const legacy = {
+      ...sheet,
+      rows: sheet.rows.map((row) => ({ id: row.id, cells: row.cells })),
+    } as ExtraSheet;
+
+    expect(extraSheetToMatrix(legacy)[0][0]).toEqual({
+      value: "",
+      backgroundColor: undefined,
+    });
+  });
 });

lib/guides/extra-sheet.ts

@@ -28,7 +28,7 @@ export const extraSheetSchema = z.strictObject({
     context.addIssue({ code: "custom", path: ["rows"], message: "รหัสแถวต้องไม่ซ้ำกัน" });
   }
   sheet.rows.forEach((row, rowIndex) => {
-    [...Object.keys(row.cells), ...Object.keys(row.backgrounds)].forEach((columnId) => {
+    [...Object.keys(row.cells), ...Object.keys(row.backgrounds ?? {})].forEach((columnId) => {
       if (!columnIds.has(columnId)) {
         context.addIssue({
           code: "custom",
@@ -72,7 +72,7 @@ export function extraSheetToMatrix(sheet: ExtraSheet): ExtraSheetMatrix {
   return sheet.rows.map((row) =>
     sheet.columns.map((column) => ({
       value: row.cells[column.id] ?? "",
-      backgroundColor: row.backgrounds[column.id],
+      backgroundColor: row.backgrounds?.[column.id],
     })),
   );
 }
@@ -102,7 +102,7 @@ export function matrixToExtraSheet(
     ])),
     backgrounds: Object.fromEntries(columns.flatMap((column, columnIndex) => {
       const backgroundColor = matrix[rowIndex]?.[columnIndex]?.backgroundColor
-        ?? sheet.rows[rowIndex]?.backgrounds[column.id];
+        ?? sheet.rows[rowIndex]?.backgrounds?.[column.id];
       return backgroundColor ? [[column.id, backgroundColor]] : [];
     })),
   }));
@@ -164,7 +164,7 @@ export function deleteExtraSheetColumn(sheet: ExtraSheet, index: number): ExtraS
     rows: sheet.rows.map((row) => ({
       ...row,
       cells: Object.fromEntries(Object.entries(row.cells).filter(([key]) => key !== columnId)),
-      backgrounds: Object.fromEntries(Object.entries(row.backgrounds).filter(([key]) => key !== columnId)),
+      backgrounds: Object.fromEntries(Object.entries(row.backgrounds ?? {}).filter(([key]) => key !== columnId)),
     })),
   };
 }
@@ -201,7 +201,7 @@ export function updateExtraSheetCells(
     ...sheet,
     rows: sheet.rows.map((row, rowIndex) => {
       const cells = { ...row.cells };
-      const backgrounds = { ...row.backgrounds };
+      const backgrounds = { ...(row.backgrounds ?? {}) };
       sheet.columns.forEach((column, columnIndex) => {
         if (!selected.has(`${rowIndex}:${columnIndex}`)) return;
         if (update.value !== undefined) cells[column.id] = update.value;