# 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 node-sass@7.0.1 @gsretail.com/gui-core
```

## 사용법

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

### 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;
```

더 많은 사용법은 [기간계 디자인 시스템](https://design.itgsshop.com/) 을 참고하여 주세요.

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

- 이민기(lee.mk@gsretail.com)
- special guest 김석중(kim.sj2@gsretail.com)