이용자 분의 피드백을 받아서 관리자 페이지에서 길드 컨텐츠 점수의 총 합을 표시를 추가해보려고 한다.

const [weeklyScoreTotal, setWeeklyScoreTotal] = useState(0);
const [suroScoreTotal, setSuroScoreTotal] = useState(0);
const [flagScoreTotal, setFlagScoreTotal] = useState(0);

// tableData가 변경될 때마다 useEffect 실행
  useEffect(() => {
    // 각 점수의 합을 계산하여 상태 업데이트
    const newWeeklyScoreTotal = tableData.reduce((total, rowData) => total + rowData.weekly_score, 0);
    const newSuroScoreTotal = tableData.reduce((total, rowData) => total + rowData.suro_score, 0);
    const newFlagScoreTotal = tableData.reduce((total, rowData) => total + rowData.flag_score, 0);

    setWeeklyScoreTotal(newWeeklyScoreTotal);
    setSuroScoreTotal(newSuroScoreTotal);
    setFlagScoreTotal(newFlagScoreTotal);
  }, [tableData]);  // tableData가 변경될 때만 useEffect가 실행

---

 {/* 주간 미션 포인트, 지하 수로 점수, 플래그 레이스 점수 정보 */}
            <Grid item xs={4} md={4}>
              <Typography variant="body1">주간 미션: {weeklyScoreTotal.toLocaleString()}점</Typography>
              <Typography variant="body1">지하 수로: {suroScoreTotal.toLocaleString()}점</Typography>
              <Typography variant="body1">플래그 레이스: {flagScoreTotal.toLocaleString()}점</Typography>
            </Grid>

위 코드를 추가하여 간단하게 길드 컨텐츠 점수의 총 합을 표시 하려고 했다.

근데 문제 발생..

관리자 페이지에 접속하거나, 새로고침 했을 때는 정상적으로 출력 되었지만

OCR 직후에는 아래 사진처럼 점수가 더해지지 않고 문자열의 합으로 출력되었다.

 // OCR 결과를 테이블 데이터에 반영하고, 서버로 전송하는 함수
  const updateTableDataWithOcrResults = (ocrData: {
    flag_score_Area?: never[] | undefined;
    suro_score_Area?: never[] | undefined;
    weekly_score_Area?: never[] | undefined;
  }) => {
    const {
      flag_score_Area = [],
      suro_score_Area = [],
      weekly_score_Area = [],
    } = ocrData;

    // 새로운 테이블 데이터를 생성합니다.
    const newTableData = tableData.map((row, index) => ({
      ...row,
      weekly_score: weekly_score_Area[index] ?? row.weekly_score,
      suro_score: suro_score_Area[index] ?? row.suro_score,
      flag_score: flag_score_Area[index] ?? row.flag_score,
    }));

    // 상태를 업데이트합니다.
    setTableData(newTableData);

    // 업데이트된 데이터를 서버로 전송합니다.
    sendAllDataToServer(newTableData);
  };

OCR 결과를 테이블 데이터에 반영하는 코드에서 점수가 숫자가 아닌 문자로 저장 되는 것 같았다.

 // 문자열을 숫자로 변환하는 함수
  const convertToNumber = (value: string | undefined): number | undefined => {
    if (!value) return undefined;

    const parsedValue = parseFloat(value);
    return isNaN(parsedValue) ? 0 : parsedValue;
  };

  // OCR 결과를 테이블 데이터에 반영하고, 서버로 전송하는 함수
  const updateTableDataWithOcrResults = (ocrData: {
    flag_score_Area?: never[] | undefined;
    suro_score_Area?: never[] | undefined;
    weekly_score_Area?: never[] | undefined;
  }) => {
    const {
      flag_score_Area = [],
      suro_score_Area = [],
      weekly_score_Area = [],
    } = ocrData;

    // 새로운 테이블 데이터를 생성합니다.
    const newTableData = tableData.map((row, index) => ({
      ...row,
      weekly_score: convertToNumber(weekly_score_Area[index]) ?? row.weekly_score,
      suro_score: convertToNumber(suro_score_Area[index]) ?? row.suro_score,
      flag_score: convertToNumber(flag_score_Area[index]) ?? row.flag_score,
    }));

    // 상태를 업데이트합니다.
    setTableData(newTableData);

    // 업데이트된 데이터를 서버로 전송합니다.
    sendAllDataToServer(newTableData);
  };

그래서 문자열을 숫자로 변환하는 convertToNumber 함수를 생성하여 tableData 생성시 숫자로 변환되어 저장 되도록 코드를 수정 해주었다.

이렇게 해주니 OCR 직후에도 길드 컨텐츠 점수의 총 합이 제대로 출력되었다!