팀 프로젝트를 하면서 공통적으로 사용되어야 하는 요소들이 있다(Components, apis, reducer 등). 이번 게시글에서는 공통으로 사용하는 요소 중에 Style과 관련된 부분을 다루는 내용을 적어보려고 한다.
위 사진은 현재 진행중인 프로젝트의 src폴더 내에 있는 shared 폴더이다.
간단하게 설명하자면
golbal.ts: Global Style을 지정하여 프로젝트 전체의 스타일을 정의하는 파일theme.ts: 프로젝트 내에서 사용할 colors, sizes를 정의하는 theme파일
global.ts
import {createGlobalStyle} from "styled-components";
import reset from "styled-reset";
export const GlobalStyle = createGlobalStyle`
${reset}
/* 전역 스타일 작성 */
@font-face {
font-family: 'SUIT';
src:
font-weight:
font-style:
}
body {
font-family: 'SUIT', sans-serif;
}
`;
여기서는 styled-components내에 있는 기능을 사용하여 전역적으로 적용시킬 스타일을 지정하는데, 보통 reset css와 폰트를 적용하는 편이다.
이를 사용하려면 main파일에서 <App/>위에 <GlobalStyle/>를 써주기만 하면 적용된다.
theme.ts
theme파일에서는 colorSystem, fontSystem, dark/light theme, size, util등의 요소들을 지정해놓는다.
colorSystem
디자인 툴에서 사용하기로 약속한 colore들을 프로젝트 공용 파일에 미리 지정해두는 것이다.
어떤 식으로 분류하는지는 디자이너나 개발자의 자유지만, 여기서는
- primary
- secondary
- neutral
- red
- yellow
- blue
- white
- black
으로 나누어 지정해두었다.
사용법은
지정 파일(theme)에서 직접 가져와 style에 지정해주면 된다.
fontSystem
프로젝트에서 h1~h6를 컴포넌트로 만들어 사용하는데, 여기서 사용되는 fontSystem 코드이다.
이를 사용하기 위해서는 h1컴포넌트가 필요한데,
위와 같이 theme.fontSystem.h1에서 사용할 요소들을 가져와 지정해주면 된다.
위와 같이 프로젝트를 시작할 때 공통적으로 사용되는 부분들을 미리 지정해주는 것은 중요하다. 물론 초반 세팅 시간이 걸리고, 귀찮을 수 있다는 단점이 있지만 처음 적용하기만 하면 재사용하기 용이하고, 추후에 수정이 있어도 shared부분은 한번에 전체 수정이 가능하기 때문에 코드 추적을 하지 않아도 된다. 그렇기에 수정 속도가 굉장히 빠르다!
따라서 프로젝트 시작 시, 시간을 조금만 더 들여 위와 같은 요소들을 모두 정의하고 가는 것을 추천한다(디자이너와 함께!!).
