저번 시간에 기본적인 레이아웃은 전부 만들었다.
이제 실제 기능 구현만 만들면 완성이다.

요구 사항

1. input에 입력하면 썸네일로 만들 창에 값을 반영시켜줘야 한다.
2. 랜덤 배경색 버튼을 누르면 랜덤한 배경색으로 스타일을 반영해줘야 한다.
3. 초기화 버튼을 누르면 배경색이 투명해져야 한다.
4. 썸네일 추출 버튼을 누르면 파일을 다운로드 할 수 있어야 한다.

만들어 보자

input의 내용 반영

input의 내용을 반영하는 데는 그리 어렵지 않았다.
state를 활용해서 구현해보았다.

function App() {
  const [titleText, setTitleText] = useState('');

  const handleChange = (e) => {
    setTitleText(e.target.value);
  };

  return (
    <div className="App">
      <GlobalStyle />
      <NavBar />
      <Main>
        <ThumbNailBox>
          <TitleText>{titleText}</TitleText>
        </ThumbNailBox>
        <Container>
          <Button>배경색 초기화</Button>
          <Button>배경색 랜덤 지정</Button>
        </Container>
        <Container>
          <Input placeholder="제목을 입력하세요" onChange={handleChange} />
        </Container>
        <Container>
          <Button large>썸네일 추출!</Button>
        </Container>
      </Main>
    </div>
  );
}

결과

배경색 랜덤 지정하기

rgb 값이 0~255씩 3개니까, state에 객체로 담아서 해결해보려 한다.

function App() {
  const [boxRGB, setBoxRGB] = useState({ red: 0, green: 0, blue: 0 });

  const createRandomRGBValue = () => {
    const MAX_VALUE = 256;
    return Math.floor(Math.random() * MAX_VALUE);
  };
  const handleRandomButtonClick = () => {
    const redValue = createRandomRGBValue();
    const greenValue = createRandomRGBValue();
    const blueValue = createRandomRGBValue();
    setBoxRGB({ ...boxRGB, red: redValue, green: greenValue, blue: blueValue });
  };
  
}

클릭할 때마다 state값이 잘 바뀐다.

return <ThumbNailBox
          style={{ backgroundColor: `rgb(${boxRGB.red}, ${boxRGB.green}, ${boxRGB.blue})` }}
        >

이제 스타일에 backgroundColor에 rgb값을 지정해주면 된다!

색이 잘 바뀐다.

초기화 버튼 구현

기존 rgb값의 state를 255로 만들면 된다.

썸네일 추출하기

1편에서 다룬 html2canvas를 사용해보자.

순수 자바스크립트였다면 document.querySelector를 사용했겠지만, 리액트인 만큼 useRef를 활용해보자.

const canvasRef = useRef();

const handleExtractButtonClick = () => {
    console.log(canvasRef.current);
  };
.
.
.
<ThumbNailBox
          style={{ backgroundColor: `rgb(${boxRGB.red}, ${boxRGB.green}, ${boxRGB.blue})` }}
          ref={canvasRef}
        >
          <TitleText>{titleText}</TitleText>
        </ThumbNailBox>

<Button large onClick={handleExtractButtonClick}>
      썸네일 추출!
</Button>

추출할 대상인 박스에 ref 속성을 넣어주고, 추출버튼 클릭 이벤트로 콘솔 출력을 줬다.

잘 뜬다.

const handleExtractButtonClick = async () => {
    const extracted = await html2canvas(canvasRef.current);
    const imgLink = extracted.toDataURL('image/png');
    console.log(imgLink);
  };

이제 이미지링크를 만들어보자.

ref를 사용하니까 저번에 할 때 보다 길이가 엄청나다...

이제 이걸 모달창으로 띄우게 해봐야겠다.

function StyledModal({ className, imgLink, onClick, isActive }) {
  return (
    <Modal className={className} onClick={onClick} isActive={isActive}>
      <ThumbNailImg src={imgLink} alt="썸네일" />
    </Modal>
  );
}

모달 창을 만들었다.

결과

이미지 형식으로 잘 뜨는 것을 볼 수 있다!

후일담

netlify를 통해 서비스를 출시 하고, 같은 부트캠프 수강생들에게 만든 사이트를 공유했었다.
이후 실제로 사용해본 수강생에게 디스코드를 통해 후기를 들었다.

주로 내가 사용하기 위해 만들었고, 주변 동기들에게 공유했더라도 사용자가 많지는 않았지만, 사용자가 있었다는 것을 직접 보게되니 정말 서비스를 제공하고 사용자들의 리뷰를 받는 개발자가 된 것 같은 기분이 들었다. 결국 내가 불편하다 느꼈던 문제를 해결하는 것은 나와 같이 불편함을 느끼고 있는 또다른 사람에게 도움이 되는 과정이 아닐까?