[ 🌈 Notice] 전역 스타일 사용법

[Happhee]

🌈 어떤 기능인가요?

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

✨ style.d.ts

import 'styled-components';

declare module 'styled-components' {
  export interface DefaultTheme {
    colors: {
      Pic_Color_Coral: string;
      Pic_Color_Yellow: string;
      Pic_Color_Blue: string;
      Pic_Color_Sky: string;
      Pic_Color_Gray_Black: string;
      Pic_Color_Gray_2: string;
      Pic_Color_Gray_3: string;
      Pic_Color_Gray_4: string;
      Pic_Color_Gray_5: string;
      Pic_Color_Gray_6: string;
      Pic_Color_White: string;
    };
    fonts: {
      Pic_Title1_Pretendard_Bold_24: SerializedStyles;
      Pic_Title2_Pretendard_Bold_20: SerializedStyles;
      Pic_Subtitle1_Pretendard_Semibold_20: SerializedStyles;
      Pic_Body1_Pretendard_Medium_16: SerializedStyles;
      Pic_Caption1_Pretendard_Semibold_12: SerializedStyles;
    };
  }
}

✨ theme.ts

import { css, DefaultTheme } from 'styled-components';

const colors = {
  Pic_Color_Coral: '#FF5D5D',
  Pic_Color_Yellow: '#FFFDC2',
  Pic_Color_Blue: '#3973CB',
  Pic_Color_Sky: '#C6DDFF',
  Pic_Color_Gray_Black: '#1E1F21',
  Pic_Color_Gray_2: '#525C67',
  Pic_Color_Gray_3: '#8A949E',
  Pic_Color_Gray_4: '#C3CDD5',
  Pic_Color_Gray_5: '#E8EBEF',
  Pic_Color_Gray_6: '#F4F5F7',
  Pic_Color_White: '#FFFFFF',
};

const fonts = {
  Pic_Title1_Pretendard_Bold_24: css`
    font-family: 'PretendardBold';
    font-size: 2.4rem;
    font-weight: 700;
    font-style: normal;
    line-height: 2.9rem;
  `,
  Pic_Title2_Pretendard_Bold_20: css`
    font-family: 'PretendardBold';
    font-size: 2rem;
    font-weight: 700;
    font-style: normal;
    line-height: 2.4rem;
  `,
  Pic_Subtitle1_Pretendard_Semibold_20: css`
    font-family: 'PretendardSemiBold';
    font-size: 2rem;
    font-weight: 600;
    font-style: normal;
    line-height: 2.4rem;
  `,
  Pic_Body1_Pretendard_Medium_16: css`
    font-family: 'PretendardMedium';
    font-size: 1.6rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1.9rem;
  `,
  Pic_Caption1_Pretendard_Semibold_12: css`
    font-family: 'PretendardSemiBold';
    font-size: 1.2rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4rem;
  `,
};

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

font 👉 같은 경우에는 피그마에 지정된 font, color명으로 연결시켜서 피그마에 업로드 해주신다고 합니다!

✨ 사용법

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

  // 폰트 설정 , 애초에 font-family, size, weight 다 지정해 주었기 때문에 한줄로 선언하는 것이 가능합니다!
 //  👉   ${({ theme }) => theme.fonts.Pic_Title2_Pretendard_Bold_20}
`

---

한 번 적용해보고 해주세요💛