<aside> 💡 About me, Project, Contact 등 개발자 역량을 보여주기 위한 포트폴리오 사이트 입니다.

• 진행기간 : 2022.10 ~ 2022.11 (2주)
• 인원 : 1인 </aside>

둘러보기

👉🏻  https://dongjae-protfolio.vercel.app/

👉🏻  Github Repository

사용한 기술 스택

• NextJS, TypeScript
• styled-components
• ESLint

담당 업무

• 자기소개 및 프로젝트 소개 구현
• 다양한 디바이스에서 최적의 사용자 경험을 제공하기 위해 반응형 스타일을 적용
• ThemeProvider로 공통 스타일 속성 관리

[Styled-Components] ThemeProvider로 공통 스타일 속성 관리

프로젝트를 진행하면서 자주 사용되는 공통 스타일 속성이 있습니다. 스타일을 컴포넌트마다 적용하면 컴포넌트의 수가 증가함에 따라 스타일 코드의 일관성이 떨어지고 재사용하기 어려워지는 것을 볼 수 있었습니다.

이런 문제점을 Styled-Components의 ThemeProvider를 사용하여 해결하였습니다. Styled-Components의 ThemeProvider는 React의 Context API와 비슷하게 모든 리액트 컴포넌트에게 Theme 속성을 전달하는 역할을 합니다.

theme.ts 파일을 생성하여 자주 사용되는 스타일 속성을 작성하였습니다.

export const theme: DefaultTheme = {
  colors: {
    Light_Blue50: "#E1F5FE",
    Light_Blue100: "#80D8FF",
    Light_Blue200: "#00B0FF",
    Light_Blue400: "#2E8EFF",
    Light_Blue500: "#03A9F4",
    Light_Blue600: "#039BE5",
    Light_Blue700: "#0091EA",

    red500: "#F44336",
    red600: "#E53935",
    red700: "#D50000",

    white000: "#ffffff",

    blue: "#1890ff",
  },
  fontSize: {
    size08: "8px",
    size12: "12px",
    size15: "15px",
    size18: "18px",
    size20: "20px",
    size22: "22px",
    size24: "24px",
    size32: "32px",
  },
};