[FE] `theme`의 역할에 맞도록 `theme` 객체 재정의

[Puterism]

기능 상세

• [ ] theme의 역할에 맞도록 theme 객체를 재정의한다.

설명

현재 theme 객체는 유동적으로 페이지의 색상을 변경할 수 있는 theme 객체의 역할보다는 Color palette의 역할에 가깝습니다. 예를 들어, 현재 텍스트 색상을 지정하는 스타일의 경우 다음과 같이 정의되어 있습니다.

color: ${theme.black[400]};

만약 theme을 이용하여 페이지를 다크 모드로 변경한다고 했을 때, 텍스트 색상은 밝은 색이 되어야 할 것입니다. 하지만 현재 상태에서는 무조건 검은색의 텍스트 색상만 보여진다는 의미가 됩니다.

따라서, 텍스트나 선과 같이 element의 색상이 theme에 따라서 어색하지 않게 보여줄 수 있도록 theme을 다시 정의해주어야 합니다.

예를 들어서 텍스트 색상은 다음과 같이 쓸 수 있을 듯합니다.

color: ${theme.color.text[400]};

어느 정도 기능 정의가 끝나면 함께 리팩토링을 진행해봤으면 합니다. 그 동안 theme과 관련하여 좀 더 공부해보고, 관련 사례도 찾아보겠습니다.