✨ feat: 디자인 시스템 설정

✅ 체크리스트

[x] semantic color 상수화
[x] typography 상수화
[x] global style 설정
[x] 스타일 파일 경로 설정 @styles/...

📝 작업 상세 내용

⚡️ semantic color 상수화

figma에 정의된 디자인 시스템 중 semantic color 상수화에 관련된 설명입니다.

단순 문자열로만 정의된 색상 필드의 부분적인 타입을 명확하게 하기 위해 타입 명시를 진행했습니다.

/styles/semantic.ts

export type HexColor = `#${string}`;
export type RGBAColor = `rgba(${number}, ${number}, ${number}, ${number})`;

상수임에도 불구하고 figma에 정의된 시스템을 복사해 바로 사용하는 편이 편할 것이라 생각돼 TYPO와 다르게 SEMANTIC이 아닌 소문자로 선언해 주었습니다. 때문에 특정 컬러 사용 시 figma dev 모드에서 복사해 semantic.accent.solid.light.hero로 사용해 주시면 됩니다. 다만, 피그마에는 semantic.accent.solid.hero로 설정되어 있어 이 부분은 회의가 필요해 보입니다!

export const semantic = {
  accent: {
    solid: {
      light: {
        hero: '#00895A' as HexColor,
        normal: '#029764' as HexColor,
        alternative: '#00A66E' as HexColor,
      },
      dark: {
        hero: '#00A66E' as HexColor,
        normal: '#00B478' as HexColor,
        alternative: '#00C482' as HexColor,
      },
    },
    transparent: {
      light: {
        hero: 'rgba(0, 137, 90, 0.20)' as RGBAColor,
        normal: 'rgba(2, 151, 100, 0.14)' as RGBAColor,
        alternative: 'rgba(0, 166, 110, 0.08)' as RGBAColor,
      },
      dark: {
        hero: 'rgba(0, 166, 110, 0.26)' as RGBAColor,
        normal: 'rgba(0, 180, 120, 0.20)' as RGBAColor,
        alternative: 'rgba(0, 196, 130, 0.14)' as RGBAColor,
      },
    },
  },

⚡️ typography 상수화

figma에 정의된 디자인 시스템 중 typography 상수화에 관련된 설명입니다.

typography 같은 경우 디자인 시스템에 작명되어 있는 이름을 그대로 사용해 선언해 주었습니다. 모든 폰트 파일은 public/assets/font에 있습니다. 모든 폰트는 웹 폰트 로딩 시간을 줄이기 위해 woff2를 사용했습니다.

/styles/typo.ts

export const TYPO = {
  display4: {
    fontSize: '4.5rem',
    fontStyle: 'normal',
    fontWeight: 700,
    lineHeight: '5.5rem',
    letterSpacing: '-0.018em',
  },
 ... 
  caption1: {
    fontSize: '0.8125rem',
    fontStyle: 'normal',
    fontWeight: 400,
    lineHeight: '1.25rem',
  },
} as const;

만일 특정 타이포로 작업하고 싶으신 경우 styled-components에서의 사용법은 아래와 같습니다.

import styled from 'styled-components'
import { TYPO } from '@styles/typo'

const App = () => {
  return (<Font>잔디 일기</Font>)
}

const Font = styled.p`
  ${TYPO.display4}
`

⚡️ global style 설정

기존의 reset.css 파일을 삭제하고 styled-components를 적용함에 따라 GlobalStyle.ts로 대체해 주었습니다.

/styles/GlobalStyle.ts

import { createGlobalStyle } from 'styled-components';

export const GlobalStyle = createGlobalStyle`
  @font-face {
    font-family: 'KoPubWorldDotum';
    font-display: swap;
    font-weight: 500;
    src: url('/assets/font/KoPubWorldDotum.woff2') format("woff2");
  }

  @font-face {
    font-family: 'Pretendard';
    font-display: swap;
    font-weight: 500;
    src: url('/assets/font/Pretendard.woff2') format("woff2");
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
...
`;

main.tsx

...
import { GlobalStyle } from './styles/GlobalStyle';

ReactDOM.createRoot(document.getElementById('root')!).render(
        ...
        <Suspense>
          <GlobalStyle />
          <RouterProvider router={router} />
        </Suspense>
);

⚡️ 스타일 파일 경로 설정

간편 경로를 설정해 주었습니다. 앞으로 스타일 디렉터리 내에 있는 파일들의 경로를 설정할 때 타 파일 경로들과 동일하게 @styles/...로 import 해 주시면 됩니다!

tsconfig.paths.json

{
  "compilerOptions": {
    "paths": {
      "@style/*": ["src/style/*"],
    }
  }
}

vite.config.ts

export default defineConfig({
  ...
  resolve: {
    alias: {
      '@style': path.resolve(__dirname, 'src/style'),
    },
  },
});

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

margin, padding 등 아직 지정해 두지 않은 것들이 있는데, 만일 작업 중 필요성이 느껴지면 후속 작업으로 디자인 시스템 설정을 추가할 예정입니다.

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

https://lakelouise.tistory.com/337 https://blog.banksalad.com/tech/font-preload-on-safari/

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

[x] 브랜치 확인하기
[x] 불필요한 코드가 들어가지 않았는지 재확인하기
[x] issue 닫기
[x] reviewers, assignees, Labels 등록 확인하기

이슈 번호: #144

CHZZK-Study / Grass-Diary-Client