# AIDT 디자인 시스템

이 문서는 AIDT 디자인 시스템를 통해 학습자료를 규격에 맞게 개발하는 것에 대한 가이드 라인을 제공합니다.

요구사항이 있는 경우 Elice에 문의해주세요

## 설치 방법

외부 학습 설치방법은 npm package를 설치하는 방법을 권장드립니다. 해당 패키지는 웹 환경에서만 사용 가능합니다.

```shell
# npm
npm install @elicecontents/content-ui --save

# yarn
yarn add @elicecontents/content-ui
```

## 📌 필수 Peer Dependencies

이 패키지를 정상적으로 사용하려면 아래 **Peer Dependencies**가 프로젝트에 설치되어 있어야 합니다.  
패키지를 사용하기 전에 반드시 해당 의존성이 설치되어 있는지 확인하세요.

```json
"peerDependencies": {
  "@base-ui-components/react": "^1.0.0-alpha.6",
  "@emotion/react": "^11.10.0",
  "@emotion/styled": "^11.10.0",
  "@mui/icons-material": "^5.14.10",
  "@mui/material": "^5.14.10",
  "@mui/x-data-grid": "^6.7.0",
  "@mui/x-date-pickers": "^6.7.0",
  "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0  || ^17.0.0 || ^18.0.0"
}
```

## Peer Dependencies 설치 방법

아래 명령어를 실행하여 필요한 의존성을 설치할 수 있습니다.

```shell
# npm 사용 시
npm install @base-ui-components/react @emotion/react @emotion/styled \
  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
  react react-dom --save

# yarn 사용 시
yarn add @base-ui-components/react @emotion/react @emotion/styled \
  @mui/icons-material @mui/material @mui/x-data-grid @mui/x-date-pickers \
  react react-dom
```
### 📌 참고 사항
- 이 패키지를 설치할 때, **peerDependencies는 자동으로 설치되지 않습니다**.
- 프로젝트에서 필요한 의존성이 모두 설치되어 있는지 확인하세요.
- 기존 프로젝트에 `react` 또는 `@mui/material`과 같은 라이브러리가 이미 설치되어 있다면 **버전 호환성을 확인한 후 설치**하는 것이 좋습니다.

## 기본적인 테마 설정

AIDT 디자인 시스템은 기본적인 디자인 틀을 갖고 있지만, 색상에 대한 기능이 따로 제공되어있습니다.


### 📖 AIDT Theme 사용 가이드
createAIDTTheme는 AIDT 디자인 시스템에 맞춰 MUI(Material-UI) 테마를 동적으로 생성하는 함수입니다.
이 문서는 createAIDTTheme의 사용 방법과 예제 컴포넌트(Layout)을 설명합니다.
MUI에서 ThemeProvider를 사용하여 createAIDTTheme를 적용할 수 있습니다

```ts
// createAIDTTheme 사용 예제
import React from "react";
import { ThemeProvider, CssBaseline } from "@mui/material";
import { createAIDTTheme } from "@elicecontents/content-ui";

const theme = createAIDTTheme({
  paletteMode: "light", // 테마 모드
  palettePublisher: "elice", // 브랜드
  paletteSubject: "korean", // 과목
  paletteLevel: "elementary", // 교육 단계 ('elementary', 'middle', 'high')
  typographyFontFamily: "pretendard", // 기본 글꼴
});

const App = () => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <h1>Hello, AIDT Theme!</h1>
  </ThemeProvider>
);

export default App;
```

위 코드가 적용되면, MUI의 기본 스타일이 AIDT 테마에 맞춰 변경됩니다.

아래는 AIDT 테마를 적용한 기본적인 Layout 컴포넌트 예제입니다.
기본적으로 `EliceLayout`은 합성 컴포넌트 방식으로 사용할 수 있습니다. 이를 통해 기본적인 UI의 틀을 구성할 수 있습니다.

```ts
// Layout 컴포넌트 예제
<EliceLayout>
  <EliceLayout.HeaderContainer>
    <EliceLayout.HeaderTitle>제목</EliceLayout.HeaderTitle>
    <EliceLayout.HeaderSubTitle>
      ...
    </EliceLayout.HeaderSubTitle>
  </EliceLayout.HeaderContainer>

  <EliceLayout.Content>
    <Typography>내용 영역</Typography>
  </EliceLayout.Content>

  <EliceLayout.FooterContainer>
    <EliceLayout.FooterPaging />
    <EliceLayout.FooterSubmit />
  </EliceLayout.FooterContainer>
</EliceLayout>

```