1. 문제
2. 원인
- 대시보드 기능이 완료되지 않는 상황에서 프론트 엔드와의 협업이 끝난 상황입니다.
3. 해결방법
- 기존의 컴포넌트는 그대로 사용하면 됩니다.
- 필요한 부분은 제가 직접 구현하려고 합니다.
4. 코드
<NavigationBar/>
<Title name="대시보드" />
<Container>
<TableContainer>
<TableTitle>AI API Status</TableTitle>
<DashboardTable aiList={aiList.aiList}></DashboardTable>
</TableContainer>
</Container>
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>
);
};
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>
);
};
const source = new EventSource(`${url}`);
source.addEventListener("event", async (event) => {
...
}