인프런 커뮤니티 질문&답변

import {Bigframe,
    ResultWrapper,
    UserBox,
    UserInfo,
    Boundary
} from "@/styles/emotion";
import { gql,useQuery } from "@apollo/client"
import { useRouter } from "next/router"
import{useState} from 'react'

const FETCH_PRODUCT = gql`
    query fetchBoard($boardId: ID!){
        fetchBoard(boardId:$boardId){
            writer
            title
            contents
            createdAt
        }
    }
`

export default function BulletinBoardFetch() {
    
        const router = useRouter()
        const[writer,setWriter]=useState("")
        const[creatDt,setCreatDt]=useState("")

        console.log(router.query.qqq)
    
        const{data}=useQuery(FETCH_PRODUCT,{
            variables:{
                boardId: `${router.query.qqq}`
            }
        })
    
        console.log(data)
        setCreatDt(data.fetchBoard.createdAt)
        setWriter(data.fetchBoard.writer)
    
    
    return(
        <div>
            <Bigframe>
                <div>
                    banner1
                </div>
                <div>
                    banner2
                </div>
                <ResultWrapper>
                    <UserBox>
                        <img src="../../../public/userpic.png" alt=""/>
                        <UserInfo>
                            <Writer>{writer}</Writer>
                            <CreateDate>{createDt}</CreateDate>
                        </UserInfo>
                        <img src="../../../public/clip.png" alt=""/>
                        <img src="../../../public/location.png" alt=""/>
                        <Boundary></Boundary>
                    </UserBox>
                </ResultWrapper>
            </Bigframe>
        </div>
    )
}

뭐가 문제인걸까요...ㅠㅠ