> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 실시간 API 대시보드 만들기

> 공개 API를 항상 최신 상태로 유지되는 대시보드로 전환합니다.

export const AiPrompt = ({children}) => {
  return <CodeBlock className="relative block max-w-full overflow-x-hidden font-sans !whitespace-pre-wrap !break-words" style={{
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
      <div className="pr-7" style={{
    whiteSpace: "pre-wrap",
    overflowWrap: "anywhere",
    wordBreak: "break-word"
  }}>
        {children}
      </div>
    </CodeBlock>;
};

API의 핵심 지표, 차트, 필터로 구성된 실시간 대시보드를 만듭니다. 자동으로 새로고침되고,
내보내기를 지원하며, 데이터에 실제로 존재하는 내용만 보여줍니다. 지속되어야 하는 데이터는
Replit Database에 저장하세요.

## 다음과 같은 경우에 적합합니다

* 스크린샷이 아니라 사람들이 검토할 수 있는 대시보드가 필요한 프로덕트 매니저.
* API를 기반으로 항상 최신 상태를 유지하는 비공개 대시보드가 필요한 운영 및 데이터 리드.

## 시작하기 전에

대시보드가 뒷받침해야 할 의사결정을 미리 적어두세요. API URL을 준비하거나 아래의
DummyJSON 엔드포인트를 사용하세요.

<Info>
  테스트 목적으로 다음의 무료 DummyJSON API 엔드포인트를 사용해 볼 수 있습니다.

  * 주문: `https://dummyjson.com/carts?limit=0`
  * 고객: `https://dummyjson.com/users?limit=0`
  * 카탈로그: `https://dummyjson.com/products?limit=0`
  * 카테고리: `https://dummyjson.com/products/categories`
</Info>

## Agent에게 요청하기

<AiPrompt>
  이 API \[URL]로부터 실시간 대시보드를 만들어 주세요. \[의사결정]에 답할 수 있는
  핵심 지표, 차트, 필터를 보여주세요. 자동으로 새로고침되고 내보내기를 지원하게
  해주세요. 지속되어야 하는 데이터는 Replit Database에 저장하세요. 데이터에
  실제로 존재하는 내용만 보여주세요.
</AiPrompt>

## 예상 결과

Agent가 데이터를 불러오고, 요약 지표와 차트를 선정하고, 필터를 추가합니다. 최소한
숫자 하나는 원본 소스와 대조하여 검증하세요. DummyJSON을 사용했다면, 주문 하나를
선택해 `https://dummyjson.com/carts/{id}`를 열어 합계가 일치하는지 확인하세요.
필터를 전환해 보고 모든 카드와 차트가 업데이트되는지 확인하세요. 한 번 내보내기를
실행하고 API와 행 하나를 대조해 확인하세요.

## 나에게 맞게 조정하기

<AiPrompt>
  페이지의 모든 숫자를 다시 계산하는 카테고리 필터를 추가해 주세요.
</AiPrompt>

<AiPrompt>대시보드가 로드 시 빠르게 유지되도록 API 응답을 캐시해 주세요.</AiPrompt>

## 문제 해결

* **API를 사용할 수 없거나 형태가 이상해 보임:** URL을 확인하고 응답에 예상하는 필드가 포함되어 있는지 확인하세요. 빠른 테스트를 위해서는 위의 DummyJSON 엔드포인트를 사용하세요.
* **숫자가 예상과 다르게 보임:** Agent에게 쿼리나 변환 과정을 보여달라고 요청한 다음, 최소한 숫자 하나는 원본 소스와 대조하여 검증하세요.
* **필터가 차트를 업데이트하지 않음:** Agent에게 각 필터를 요약 카드와 차트 데이터 모두에 연결하도록 요청하세요. 대시보드가 느리다면 API 응답을 캐시하거나 시작 시 불러오는 레코드 수를 줄이세요.

## 관련 문서

<CardGroup cols={2}>
  <Card title="주간 판매 보고서 생성하기" href="/ko/use-cases/weekly-pipeline-report">
    실시간 대시보드 대신 주간 스냅샷을 제공합니다.
  </Card>

  <Card title="유료 이벤트 웹사이트 출시하기" href="/ko/use-cases/launch-event-website">
    이미 보유한 데이터로 만드는 또 다른 실시간 Replit App입니다.
  </Card>
</CardGroup>