## 레이아웃배치 데이터 설계 (작업중)

- (대시보드)prop : 공통속성
- (위젯)prop : 컴포넌트 고유속성 => 위젯에서는 고유속성 정의
  
- component -> 개발자가 개발
- widget -> 사용자가 component 를 이용하여 Widget 생성
- 대시보드 -> Widget들을 배치할 수 있음
- paging -> 대시보드들을 paging 형식으로 배치할 수 있음

###컴포넌트 데이터 구조
```json5
// 컴포넌트 데이터 구조
component: [
	{
		titleName: "BarChart",
		componentId: "COM_BAR_CHART_01",
		snapshot: "", // 컴포넌트를 설명할 수 있는 이미지 스냅샷
		expressList: [] // 데이터를 표현할 수 있는 타입을 지정 (여러개의 타입 지정가능) - 방식 미정
		prop: {} // 컴포넌트 고유 속성
	},
	{
		titleName: "LineChart",
		componentId: "COM_LINE_CHART_01",
		snapshot: "", // 컴포넌트를 설명할 수 있는 이미지 스냅샷
		expressList: [] // 데이터를 표현할 수 있는 타입을 지정 (여러개의 타입 지정가능) - 방식 미정
		prop: {} // 컴포넌트 고유 속성
	}
]
```

###위젯 데이터 구조
```json5
// 위젯 데이터 구조
[
	widget: {
		widgetId: "WIDGET_20220716_4486",
		componentId: "COM_BAR_CHART_01",
		titleName: "이쁜 바 차트 위젯",
		prop: {}, // 컴포넌트 고유속성 위젯에서 정의
		dataset: {} // 위젯 연결 데이터 구조
	},
	widget: {
		widgetId: "WIDGET_20220716_8959",
		componentId: "COM_LINE_CHART_01",
		titleName: "이쁜 라인 차트 위젯",
        prop: {}, // 컴포넌트 고유속성 위젯에서 정의
		dataset: {} // 위젯 연결 데이터 구조
	}
]
```

###대시보드 데이터 구조
```json5
// 대시보드 데이터 구조
dashboard: {
    titleName: "대시보드 1"
    widgetList: [
        {widgetId: "WIDGET_202207161301_4486", prop: {
        x: 10 // x좌표, y: 10 // y좌표, width: 100 // width 크기, height: 100 // height 크기
        }},
        {widgetId: "WIDGET_202207161301_8959"
        , prop: {
        x: 10 // x좌표, y: 10 // y좌표, width: 100 // width 크기, height: 100 // height 크기
        }},
        {
        widgetId: "WIDGET_202207161301_4653", prop: {
        x: 10 // x좌표, y: 10 // y좌표, width: 100 // width 크기, height: 100 // height 크기
        }},
        {widgetId: "WIDGET_202207161301_2352", prop: {
        x: 10 // x좌표, y: 10 // y좌표, width: 100 // width 크기, height: 100 // height 크기
        }}
    ]
}
```