Mock data/map

 useEffect(() => {
    fetch('/Data/headerData.json')
      .then(res => res.json())
      .then(res => setHeaderData(res));

    fetch('/Data/listRelatedData.json')
      .then(res => res.json())
      .then(res => setRelaredListUserData(res));

    fetch('/Data/WrapAuthor.json')
      .then(res => res.json())
      .then(res => setAuthorData(res));

    fetch('/Data/FooterBar.json')
      .then(res => res.json())
      .then(res => setFooterData(res));
  }, []);

return (
    <div className="detailPage">
      <Header pageHeaderData={headerData} />
      <div className="wrapBodyFrame">
        <BodyFrame
          setIsCommentOpen={setIsCommentOpen}
          isCommentOpen={isCommentOpen}
          inputComment={inputComment}
          contentBodyData={contentBodyData}
        />
        {isCommentOpen && (
          <CommentArea
            addComment={addComment}
            deleteComment={deleteComment}
            inputComment={inputComment}
            onChange={onChange}
            value={commentValue}
          />
        )}
        <WrapAuthor authorData={authorData} />
        <section className="wrapArticle">
          <ListRelatedArticle relatedData={relaredListUserData} />
        </section>
        <div className="wrapFooterBanner">
          <img
            src="/images/DetailPage/footerImage.png"
            className="footerImage"
            alt="하단 배너"
          />
        </div>
      </div>
      <FooterBar
        footerBar={footerBarData}
        onChangePostContent={onChangePostContent}
      />
    </div>
  );

const [relaredListUserData, setRelaredListUserData] = useState([]);
  const [isCommentOpen, setIsCommentOpen] = useState(false);
  const [inputComment, setInputComment] = useState([]);
  const [commentValue, setCommentValue] = useState('');
  const [headerData, setHeaderData] = useState([]);
  const [authorData, setAuthorData] = useState([]);
  const [footerBarData, setFooterData] = useState([]);
  const [contentBodyData, setContentData] = useState([]);

再構築事項