[CowAPI] 22. 대시보드 (react)

1. 문제

• 대시보드 프론트 구현을 해야합니다.

2. 원인

• 대시보드 기능이 완료되지 않는 상황에서 프론트 엔드와의 협업이 끝난 상황입니다.

3. 해결방법

• 기존의 컴포넌트는 그대로 사용하면 됩니다.
• 필요한 부분은 제가 직접 구현하려고 합니다.

4. 코드

// 1. DashboardPage : 대시보드 페이지입니다.

// <NavigationBar/>`: 기존의 내비게이션을 활용합니다.
// <Title>` : 기존의 Title 컴포넌트를 재사용합니다.
// <Container>, <TableContanier>, <TableTitle> : 기존의 테이블 컴포넌트를 재사용합니다.

// <DashboardTable> : 구현해야하는 테이블 입니다.

<NavigationBar/>
<Title name="대시보드" />
<Container>
    <TableContainer>
    	<TableTitle>AI API Status</TableTitle>
		<DashboardTable aiList={aiList.aiList}></DashboardTable>
	</TableContainer>
</Container>

// 2. DashboardTable : 대시보드 테이블 입니다.

// Block, TableStyles : 기존의 컴포넌트를 재사용합니다, css가 적용됩니다.

// DashboardTable: aiList를 입력으로 받아 theader를 만들고 tbody를 만듭니다.
// DashboardTr: tbody에는 map을 이용하여 ai 정보가 담긴 trow를 생성합니다.

export const DashboardTable = ({ aiList }) => {
  return (
    <Block>
    	<TableStyles>
        <thead>
          <tr>
              <td>Ai</td>
              <td>ResponseTime</td>
              <td>Accuracy</td>
              <td>updated time</td>
          </tr>
        </thead>

        <tbody>
            {aiList.map((ai, index) => (
                <DashboardTr ai={ai} key = {index}/>
            ))}
        </tbody>

      </TableStyles>
    </Block>
  );
};

// 3. DashboardTr : key를 받은 DashboardTr는 aiList의 개수만큼 row를 생성하게 됩니다.

export const DashboardTr = ({ ai, key }) => {
  return (
          <tr key={key}>
            <td>{ai.name}</td>
            <td>{ai.responseTime}</td>
            <td>{ai.accuracy}</td>
            <td>{ai.updatedAt}</td>
          </tr>
  );
};

// 4. getDashboard : Publish 된 대시보드를 Subscribe 하는 코드 입니다.
// Server Sent Event를 사용했습니다.

const source = new EventSource(`${url}`);

source.addEventListener("event", async (event) => {
  ...
}