230810 개발일지 TIL - React에서 page-flip 라이브러리를 스타일 컴포넌트로 수정시 에러

React에서 page-flip 라이브러리를 스타일 컴포넌트로 수정시 에러

Uncaught runtime errors:
×
ERROR
Invalid width or height
    at x.getSettings (http://localhost:3000/static/js/bundle.js:30650:48)
    at new t.PageFlip (http://localhost:3000/static/js/bundle.js:30682:124)
    at http://localhost:3000/static/js/bundle.js:57854:28
    at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:51745:30)
    at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:53238:17)
    at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:53210:13)
    at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:53200:11)
    at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:53190:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:55075:7)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:55027:18)

import styled from "styled-components";
import HTMLFlipBook from 'react-pageflip';

function MyBook(props) {
    return (
        <StyledFlipBook>
            <div className="demoPage">
            	<input type="text" 
                	value={userConcern}
                    onChange={handleTextareaChange}
                    placeholder="50자 이내로 작성하세요."
                    maxLength={50}
                    onKeyPress={handleKeyPress}
                />
            </div>
            <div className="demoPage">Page 2</div>
            <div className="demoPage">Page 3</div>
            <div className="demoPage">Page 4</div>
        </HTMLFlipBook>
    );
}

const StyledFlipBook = styled(HTMLFlipBook)`
  margin: 0 auto;
  width: 1200px;
  height: 800px;
`;

위 처럼 라이브러리의 코드를 수정 사용시 나타난 에러로

import styled from "styled-components";
import HTMLFlipBook from 'react-pageflip';

function MyBook(props) {
    return (
         <StyledFlipBook width={300} height={500}>
            <div className="demoPage">
            	<input type="text" 
                	value={userConcern}
                    onChange={handleTextareaChange}
                    placeholder="50자 이내로 작성하세요."
                    maxLength={50}
                    onKeyPress={handleKeyPress}
                />
            </div>
            <div className="demoPage">Page 2</div>
            <div className="demoPage">Page 3</div>
            <div className="demoPage">Page 4</div>
        </HTMLFlipBook>
    );
}

const StyledFlipBook = styled(HTMLFlipBook)`
`;

<StyledFlipBook width={300} height={500}></StyledFlipBook>

위 코드와 같이 너비와 높이를 넣어서 사용하면 해결된다.