[Blog Thumbnail Maker] 폰트 색상을 변경해보자

[Blog Thumbnail Maker] 썸네일 메이커 기능 개선 프로젝트

▲ 기능 개선을 하고싶은 항목들에 대한 포스팅

[Blog Thumbnail Maker] 폰트 사이즈를 조절해보자

▲ 지난 포스팅

 

개선된 폰트 사이즈 조절 기능을 소개한지도 어느덧 한 달에 가까운 시간이 흘러버리고 말았다.

기능 개선은 사실상 완료 단계라 포스팅만 하면 되는 상황인데 학교 기말고사 기간과 이런 저런 것들이 겹쳐 도저히 시간이 안 났고, 이제서야 시간적 여유가 생겨 다시 키보드를 두드린다.

 

핑계 아닌 핑계를 대자면 사실 기능 개선을 마치고는 이 프로젝트에 대한 대대적인 코드 리팩토링 작업을 하고 있었다.

그동안은 App.js 파일에서 깡그리 구현해왔는데, 기능 개선을 하다보니 유지보수의 용이성이 아주 나락으로 가고 있다는 사실을 문득 깨닫았다. 그때 그때 필요한 기능을 구현하며 변수명이라던지 함수명이라던지도 제멋대로 지어놔서 뭐가 뭔지 알 수가 없었다. 기본이 중요하다는 사실을 이제서야 다시 새긴다.

 

아무튼, 오늘은 지난 포스팅에서도 말했듯 폰트 색상을 변경하는 기능에 대해 소개해볼까 한다.

음... 기능만 구현했다. 기능만...😅

폰트 색상 변경 기능에 대한 이미지다.

버튼을 클릭하면 ColorPicker가 내려와 팔레트에서 색상을 선택하거나 색상의 hex값을 입력하여 텍스트 색상을 변경할 수 있는 기능이다.

 

본디 컬러 파레트 위의 공백에는 선택한 색상이 나타나야 한다. (밑의 React Color 라이브러리 관련 사진 참고).

이 부분을 미처 수정하지 않고 포스팅을 작성하고 있다...😅

빠른 시일 내로 저것도 고쳐놔야겠다. 원래 저런줄...

---

📚 이 기능을 구현하는 데에 사용한 라이브러리

React Color

React Color 라이브러리에서 사용할 수 있는 컬러피커의 종류

React Color 라이브러리는 위의 사진처럼 다양한 컬러피커들을 제공하고 있다.

신기해보여서 갖다 쓰기로 했다. 라이브러리를 갖다 쓰는 것은 항상 짜릿해 최고야 😆

---

✍️ 이 기능을 구현하며 참고한 레퍼런스

 

React Color Picker Tutorial - React.school

공식 문서를 읽어도 어떻게 써야 할지 감이 잡히지 않아서 유튜브에서 해외 튜토리얼 영상을 찾아서 보게 되었다.

영상을 보고 문제를 해결하면 수월하긴한데, 내 지식이 되는게 아닌 것 같은 이상한 느낌이 든다. 

 

⌨️ 기능 구현 코드

divTxtColor

const [showTxtButton, setShowTxtButton] = useState(false);
const txtColor = useSelector((state) => state.textColor.value);

<div id = "divTxtColor">
                        <button 
                        onClick = {()=> setShowTxtButton(setShowTxtButton=>!setShowTxtButton)}>
                        { showTxtButton? '폰트 색상 선택창 닫기' : '폰트 색상 선택하기' }
                        </button>
                        {showTxtButton && (<BlockPicker
                                                color={ txtColor }
                                                onChangeComplete={ (color) => dispatch(textColorChagne(color.hex)) }/>
                            )
                        }
                    </div> {/* End of divTxtColor */}

const [showTxtButton, setShowTxtButton] = useState(false);

버튼을 눌렀을 때 컬러피커가 나오게 하기 위한 버튼의 눌림 상태 저장할 useState. 초기값은 false 즉, 버튼을 클릭하지 않은 상태다.

 

const txtColor = useSelector((state) => state.textColor.value);

이 상수도 역시 redux로 상태관리 중인 그것. 코드 리팩토링을 다루면서 자세히 설명하겠다.

아무튼, 이 상태는 textColor를 hex값으로 넘겨받아 텍스트 컬러의 상태를 관리하기 위한 변수다.

{ showTxtButton? '폰트 색상 선택창 닫기' : '폰트 색상 선택하기' }

이 부분은 버튼의 value 속성을 정하는 부분이다. 삼항 연산자를 이용하여 showTxtButton의 값이 true, 즉 버튼이 클릭된 상태면 면 '폰트 색상 선택창 닫기', 그렇지 않으면 '폰트 색상 선택하기'를 value로 한다.

 

onClick 이벤트로 버튼을 누를시 setShowTxtButton으로 showTxtButton의 값을 바꿔주어 클릭했을때 true, 다시 클릭했을때 false로 돌아갈 수 있게 만들었다.

{showTxtButton && (<BlockPicker
                        color={ txtColor }
                        onChangeComplete={ (color) => dispatch(textColorChagne(color.hex)) }/>
                            )
                        }

이 부분은 버튼이 클릭되어 있고, 블록 컬러 피커가 나왔을 때를 다루는 곳이다.

onChangeComplete로 텍스트 색상을 hex값으로 넘겨주는 것을 볼 수 있다. 이 역시 redux를 통해 수정한 부분이므로, 차차 다뤄보도록 하자.

---

👀 느낀 점

포스팅으로 다루지 않은 썸네일 배경을 선택하는 것과 다른 것이라곤 색상의 hex값을 넘겨받는 존재가 canvas에 관련되었나 text에 관련되었나 하는 차이 뿐이다. 따라서 구현에 큰 어려움은 없었던 것 같다. 결론적으로 내 블로그 썸네일은 더 다양한 폰트 색상을 누릴 수 있게 되었다는 것...

 

공식 문서를 이해를 못해서 유튜브에서 튜토리얼 영상을 찾아보고 내 코드에 적용하는 것이 과연 바람직한 코딩의 방법일까 생각이 든다. 결국 구현은 되지만 코드 자체가 내 것이 안 되는 느낌? 구현의 즐거움도 잠시. 못내 찝찝한 맛이 난다.

 

다음 포스팅에서는 react-select 라이브러리를 이용해 캔버스 사이즈를 조절하는 기능을 추가한 것에 대해 다뤄보도록 하겠다.

지난 포스팅에서 기능별로 js 파일을 나누고 어쩌고 했었는데, 그 작업도 다 끝냈기 때문에 얼른 포스팅을 하고싶어 손가락이 근질근질하다.