필수 종속성

npm i @emotion/react @emotion/styled @mui/icons-material styled-components

npm i @types/styled-components --save-dev

Button Icon이 MUI 아이콘을 사용하고 있기 때문에 MUI icon을 사용하기 위해서 필요한 패키지

아이콘은 링크 참조해서 사용할것 https://mui.com/material-ui/material-icons/

styled-components 패키지는 필수

기본 셋팅

StyledThemeProvider를 사용한 theme 제공이 필수적이여야 함

컴포넌트들은 theme파일에서 제공되는 color, mediaScreen 등 사이즈를 따라감

• 예시

const color = {
  primary: '#B47250',
  secondary: '#E0B276',
  black: '#212121',
  text: '#424242',
  white: '#ffffff',
  gray: '#BDBDBD',
  error: '#FF0000',
  g900: '#0D0D0D',
  g800: '#424242',
  g600: '#757575',
  g400: '#BDBDBD',
  g200: '#EEEEEE',
};

const typography = {
  weight: {
    regular: '400',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
  size: {
    s1: 12,
    s2: 14,
    s3: 16,
  },
  family: {
    pretendard: 'Pretendard Variable',
    cormorantSC: 'Cormorant SC, serif',
  },
};

const mediaScreen = {
  tablet: '1420px',
  mobile: '768px',
};

const theme = {
  color,
  typography,
  mediaScreen,
};

export default theme;

사용방법

import { Button, TextField } from 'among-react-modules';

...
<Button text="Button" />
<TextField id="id-field" label="TextField" onChange={() => {console.log('Change!')}} />

DEV

• 현재는 dependencies에 있는 항목들이 devDependencies로 이동되어 있음(모듈화 진행중 필요없는 종속성을 제거하기 위해서임)

• 개발 진행시 package.json 파일에 아래 항목 추가 ( 그래도 에러가 발생한다면 (npm i를 이미 진행했다면)node_modules 삭제한뒤, npm i 한번 진행 필요함 )

• 개발이후에는 반드시 종속성을 되돌려두고 Publish를 진행할것

...
dependencies: {
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.15.13",
  "@types/node": "^16.18.91",
  "@types/react": "^18.2.67",
  "@types/react-dom": "^18.2.22",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "^5.0.1",
  "styled-components": "^6.1.8",
  "typescript": "^4.9.5",
  "web-vitals": "^2.1.4"
    ...
},
devDependencies: {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    ...
}
...