<코멘트달기 section> boardId 오류

import { useState } from "react";
import CommentPageUi from "./BoardCommentWrite.presenter";
import { useMutation } from "@apollo/client";
import { CREATE_BOARD_COMMENT } from "./BoardCommentWrite.queries";
import { useRouter } from "next/router";
import { FETCH_BOARD_COMMENTS } from "../list/BoardCommentList.queries";

export default function CommentPage () {
  const [writer, setWriter] = useState("");
  const [password, setPassword] = useState("");
  const [contents, setContents] = useState("");

  const [createBoardComment] = useMutation(CREATE_BOARD_COMMENT)
  const router = useRouter;
  
  const onChangeWriter = (event) => {
    setWriter(event.target.value)
  }

  const onChangePassword = (event) => {
    setPassword(event.target.value)
  }

  const onChangeContents = (event) => {
    setContents(event.target.value)
  }

  const onClickSubmit =async() => {
    try {
      await createBoardComment ({
        variables : {
          createBoardCommentInput: {
            writer : writer,
            password : password,
            contents : contents,
            rating: 0,
          },
          boardId: router.query.boardId,
        },
        refetchQueries: [
          {
            query: FETCH_BOARD_COMMENTS,
            variables: { boardId : router.query.boardId},
          },
        ],
      });
    } catch (error) {
      alert(error.message);
    }
    alert("정상적으로 댓글이 달렸습니다.")
  }

  return (
    <CommentPageUi
      onChangeWriter = {onChangeWriter}
      onChangePassword ={onChangePassword}
      onChangeContents ={onChangeContents}
      onClickSubmit = {onClickSubmit}
      contents={contents}
      >
    </CommentPageUi>
  )
}

comment write

import { gql } from "@apollo/client";

export const CREATE_BOARD_COMMENT = gql`
  mutation createBoardComment(
    $createBoardCommentInput: CreateBoardCommentInput!
    $boardId: ID!
  ) {
    createBoardComment(
      createBoardCommentInput: $createBoardCommentInput
      boardId: $boardId
    ) {
      _id
    }
  }
`;

comment write query

import { gql } from "@apollo/client";

export const FETCH_BOARD_COMMENTS = gql`
  query fetchBoardComments($boardId: ID!) {
    fetchBoardComments(boardId: $boardId) {
      _id
      writer
      contents
      createdAt
      rating
    }
  }
`;

comment list query

import { useQuery } from "@apollo/client"
import { FETCH_BOARD_COMMENTS } from "./BoardCommentList.queries"
import { useRouter } from "next/router"
import BoardCommentListUI from "./BoardCommentList.presenter"

export default function BoardCommentList() {
  const router = useRouter()
  const {data} = useQuery(FETCH_BOARD_COMMENTS, {
    variables: {boardId : router.query.boardId}
  })
  return (
    <BoardCommentListUI data={data}
    />
    
  )
}

comment list

폴더명

에러1

에러2

둘 다 boardId와 관련있고, 내용으로 봐서는 boardId에 값이 없는 것 같은데, 코드를 아무리 봐도 문제점을 모르겠네요.. 문제가 뭘까요 ???