[ Develop ] 스타일 초기 세팅 완료 👉가이드 제시

[Happhee]

💚 어떤 기능인가요?

스타일 사용 방법입니다!!

✨ emotion.d.ts

import { SerializedStyles } from '@emotion/react';

declare module '@emotion/react' {
  export interface Theme {
    colors: {
      mainGreen: string;
      mainDarkgreen: string;
      subYellow: string;
      orange: string;
      blue: string;
      lightGreen: string;
      white: string;
      gray001: string;
      gray002: string;
      gray003: string;
      gray004: string;
      gray005: string;
      gray006: string;
      gray007: string;
      gray008: string;
      gray009: string;
      black: string;
    };
    fonts: {
      t1_28_medium_150: SerializedStyles;
      t2_26_semibold_150: SerializedStyles;
      t3_19_bold_140: SerializedStyles;
      t3_19_medium_130: SerializedStyles;
      t4_18_semibold_150: SerializedStyles;
      t4_18_regular_150: SerializedStyles;
      b1_20_bold_140: SerializedStyles;
      b2_18_bold_140: SerializedStyles;
      b2_18_medium_130: SerializedStyles;
      b2_18_regular_130: SerializedStyles;
      b3_16_semibold_140: SerializedStyles;
      b4_15_semibold_146: SerializedStyles;
      b5_14_semibold_140: SerializedStyles;
      b5_14_medium_140: SerializedStyles;
      b6_13_medium_120: SerializedStyles;
      b7_12_bold_120: SerializedStyles;
      b7_12_medium_140: SerializedStyles;
      b7_12_regular_120: SerializedStyles;
    };
  }
}

✨ theme.ts

import { css, Theme } from '@emotion/react';

const colors = {
  mainGreen: '#1DB981',
  mainDarkgreen: '#1D8669',
  subYellow: '#FFE766',
  orange: '#FF9D55',
  blue: '#4484FF',
  lightGreen: '#F5FFF0',
  white: '#FFFFFF',
  gray001: '#FCFCFC',
  gray002: '#F8F8F8',
  gray003: '#E8E8E8',
  gray004: '#E2E2E2',
  gray005: '#D9D9D9',
  gray006: '#A9A9A9',
  gray007: '#9D9D9D',
  gray008: '#787878',
  gray009: '#636363',
  black: '#636363',
};

interface Font {
  weight: 400 | 500 | 600 | 700 | 800;
  size: number;
  height: number;
  spacing: 0;
}

function FONT({ weight, size, height, spacing }: Font) {
  return css`
    font-family: Pretendard;
    font-weight: ${weight};
    font-size: ${size}rem;
    line-height: ${height}%;
    spacing: ${spacing}%;
  `;
}

const fonts = {
  t1_28_medium_150: FONT({ weight: 500, size: 2.8, height: 4.2, spacing: 0 }),
  t2_26_semibold_150: FONT({ weight: 600, size: 2.6, height: 3.9, spacing: 0 }),
  t3_19_bold_140: FONT({ weight: 700, size: 1.9, height: 2.66, spacing: 0 }),
  t3_19_medium_130: FONT({ weight: 500, size: 1.8, height: 2.47, spacing: 0 }),
  t4_18_semibold_150: FONT({ weight: 600, size: 1.8, height: 2.7, spacing: 0 }),
  t4_18_regular_150: FONT({ weight: 400, size: 1.8, height: 2.7, spacing: 0 }),
  b1_20_bold_140: FONT({ weight: 700, size: 2, height: 2.8, spacing: 0 }),
  b2_18_bold_140: FONT({ weight: 700, size: 1.8, height: 2.52, spacing: 0 }),
  b2_18_medium_130: FONT({ weight: 500, size: 1.8, height: 2.34, spacing: 0 }),
  b2_18_regular_130: FONT({ weight: 400, size: 1.8, height: 2.34, spacing: 0 }),
  b3_16_semibold_140: FONT({
    weight: 600,
    size: 1.6,
    height: 2.24,
    spacing: 0,
  }),
  b4_15_semibold_146: FONT({
    weight: 600,
    size: 1.5,
    height: 2.19,
    spacing: 0,
  }),
  b5_14_semibold_140: FONT({
    weight: 600,
    size: 1.4,
    height: 1.96,
    spacing: 0,
  }),
  b5_14_medium_140: FONT({ weight: 500, size: 1.4, height: 1.96, spacing: 0 }),
  b6_13_medium_120: FONT({ weight: 500, size: 1.3, height: 1.56, spacing: 0 }),
  b7_12_bold_120: FONT({ weight: 700, size: 1.2, height: 1.44, spacing: 0 }),
  b7_12_medium_140: FONT({ weight: 500, size: 1.2, height: 1.68, spacing: 0 }),
  b7_12_regular_120: FONT({ weight: 400, size: 1.2, height: 1.44, spacing: 0 }),
};

const theme: Theme = {
  colors,
  fonts,
};
export default theme;

font 👉 Ag 로 보면 됩니다!!!

✨ 사용법

const StGuide = styled.div`
  // 색상 설정
  background-color: ${({ theme }) => theme.colors.mainGreen};

  // 폰트 설정 
 //  👉  t2_26_semibold_150: FONT({ weight: 600, size: 2.6, height: 3.9, spacing: 0 }) 이렇게 해놓아서 앞에 속성명 안적어도 됩니다!
  ${({ theme }) => theme.fonts.t2_26_semibold_150};
`

---

적용해보고 오류 나면 바로 도움요청 해주세요💚

[say-young516]

진짜 미쳤다!!!!!!!!!!!!! 능력자 서희... 오늘도 아주 반해버려~.. 고마워!!!!!!!!!!

[say-young516]

아 글고 확인은 했는데 내 부분은 아직 와프라서..! Ag나 이런 거에도 확정된 폰트가 안 뜨더라궁 뜨자마자 바로 갈겨볼게~ 질문 받아줄 준비하고 이써 딱 대ㅋㅎ

[aeuna]

아 FONT 부분 function으로 빼서 css에서 변수들 받아서 처리해버리는구나 넘나 좋다!
바로~ 적용해보겠습니당
혹시 SerializedStyles <= 요 친구 관련해서 관련 자료나 설명 있을까여?!

[Happhee]

UI library에서 spacing system props 구현하기
출처: https://vroomfan.tistory.com/37 [내실내놀 개발자:티스토리]

export interface SerializedStyles {
  name: string
  styles: string
  map?: string
  next?: SerializedStyles
}

function FONT({ weight, size, height, spacing }: Font) {
  return css`
    font-family: Pretendard;
    font-weight: ${weight};
    font-size: ${size}rem;
    line-height: ${height}%;
    spacing: ${spacing}%;
  `;
}

const fonts = {
  t1_28_medium_150: FONT({ weight: 500, size: 2.8, height: 4.2, spacing: 0 }),
//   t1_28_medium_150: SerializedStyles;
  }

참고해서 이해해보며는 좋게따!!