배포 가능한 대시보드 조립하기

중급~15 분0/4 단계

이번이 최종 완성 프로젝트입니다. KPI 카드, 차트, 보고서 레이아웃을 모두 만들어 봤으니, 이제 그 조각들을 실제 URL로 배포할 수 있는 하나의 완전한 대시보드 페이지로 합칠 차례입니다.

브랜드가 담긴 헤더, KPI 카드 한 줄, 차트 섹션, 데이터 테이블까지 — 하나의 응집력 있는 화면으로 전체 페이지를 조립합니다. 이해관계자에게 건네며 "여기 실시간 대시보드입니다"라고 말할 수 있는 결과물이죠.

처음부터 끝까지 생각하세요. 배포 가능한 앱은 예쁘기만 해서는 안 됩니다. 정돈되어 있고, 읽기 쉽고, 스스로를 설명할 수 있어야 합니다. 이 레슨을 마치면 포트폴리오에 넣을 수 있는 데이터 앱이 완성됩니다. 이제 출시해 봅시다.

안내

"판매 분석"이라는 h1 앱 제목이 담긴 페이지 헤더를 추가하세요.

힌트: `<header class="bg-gray-800 ..."><h1 class="text-2xl font-bold">판매 분석</h1></header>`를 사용하세요.

어디에 작성하나요?

11번째 줄에 작성하세요 — 그 주석 아래, 이미 추가한 코드 다음입니다.

반응형 그리드 컨테이너를 사용해 KPI 행을 추가하세요.

bg-purple-500 색상으로 스타일링한 막대 div를 사용해 차트 섹션을 추가하세요.

대시보드를 완성할 최근 주문 데이터 테이블을 추가하세요.

html

13 줄