Gsshop React UI Component Library

Install @gsretail.com/gui-core

1. 필수 모듈 설치

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

npm i @emotion/react @emotion/styled @mui/lab @mui/material date-fns mobx mobx-react [email protected] @gsretail.com/gui-core

사용법

최신 버젼의 @gsretail.com/gui-core는 React 17.0.2 와 @mui/[email protected] 기준으로 제작되어 업데이트 되고 있습니다.

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

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

• @gui/core v2.1.0 ----> ag-grid ---> toastUI
• @gui/core v2.0.86 ----> @gui/core 내부망 중단, @gsretail.com/gui-core 퍼블릭 배포
• @gui/core v1.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 v1.2.337
• Material-Ui : 4.X <----> @gui/core v0.8.3

1. @gsretail.com/gui-core Theme 설정

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

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

index.css는 @gsretail.com/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 '@gsretail.com/gui-core';
import '@gsretail.com/gui-core/build/index.css';

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

2. @gsretail.com/gui-core 사용 예제

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

import { GuiButton } from '@gsretail.com/gui-core';

function App() {

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

export default App;

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

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

• 김헌기([email protected])
• 이민기([email protected])
• special guest 김석중([email protected])