@gsretail.com/gui_core

Gsshop React UI Component Library

Install @gsretail.com/gui_core

1. 필수 모듈 설치

@gui/core는 다음 모듈과 함께 설치합니다.

npm i @emotion/react @emotion/styled @mui/material@5.0.6 @mui/lab node-sass@6.0.1 @gsretail.com/gui_core date-fns react-date-range @types/react-date-range

사용법

최신 버젼의 @gui/core는 React 17.0.2 와 @mui/material@5.X 기준으로 제작되어 업데이트 되고 있습니다.

Material-UI 버젼별 @gui/core 버전 정보

모든 버젼은 ReactJS 17.X 을 사용하고 있습니다.

• @gui/core 1.4.0 < ---- > Air/gui 통합 --> gui-v3 v2.0.0
• Material-Ui : 5.X < ---- > @gui/core 1.4.0(방송 MSA 진행 전 최종 버전)
• Material-Ui : 5.X < ---- > @gui/core 1.3.1
• Material-Ui : 5.0.0-alpha.37 < ---- > @gui/core 1.2.337
• Material-Ui : 4.X < ---- > @gui/core 0.8.3

1. @gui/core Theme 설정

프로젝트 생성을 npx create-react-app project-name으로 생성을 전제로 진행합니다.

src 밑에 index.js를 다음과 같이 변경합니다.

index.css는 @gui/core에서 제공됩니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { createGuiTheme } from '@gui/core';
import '@gui/core/build/index.css';

// 공통 테마 적용
const guiTheme = createGuiTheme();
  
ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={guiTheme}>
      <CssBaseline />
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

2. @gui/core 사용 예제

다음은 GuiButton을 사용한 예제입니다.

import { GuiButton } from '@gui/core';

function App() {

  return (
    <div className="App">
      <GuiButton label="Button" />
    </div>
  );
}

export default App;

더 많은 사용법은 기간계 디자인 시스템 을 참고하여 주세요.

기간계 디자인 시스템 담당자

• 김헌기([e-mail])
• 이민기([e-mail])
• special guest 김석중([e-mail])