Member AI Usage History

관리자용 컴포넌트관리자(MASTER)만 쓰는 화면에 쓰입니다.

멤버의 AI 사용량을 일·주·월별 막대(Bar) 차트로 보여 줍니다. 프론트 UI만 제공하며 사용량 집계는 추후 적용 예정입니다.

관리자가 한 멤버의 AI 사용량을 기간별로 비교하는 컴포넌트입니다. 일별 / 주별 / 월별 탭으로 바꿔 가며 막대(Bar) 차트로 보고, 위에 합계·평균·최대 요약이 함께 나옵니다.

현재 프론트 UI만 작업된 상태입니다. 사용량을 실제로 기록하고 집계하는 기능(서버)은 추후 적용 예정이며, 이 페이지의 미리보기는 목 데이터입니다. 서버가 준비되면 같은 모양의 데이터를 props로 넘기기만 하면 화면은 그대로 쓸 수 있습니다.

Preview

탭을 눌러 기간을 바꾸고, 막대에 마우스를 올려 값을 확인해 보세요.

AI 사용량 추이

이작성 · 최근 사용량

합계: 5,240 토큰
평균: 374 토큰
최대: 10/19 · 700

tsx

<MemberAiUsageHistory
  data={{ day: dayPoints, week: weekPoints, month: monthPoints }}
  description="김관리 · 최근 사용량"
  unit="토큰"
  onPeriodChange={(period) => load(period)}
/>

마지막으로 고른 기간: day

What admins can see

항목	내용
기간 탭	일별 / 주별 / 월별. 데이터가 있는 기간만 탭으로 나타납니다.
합계	선택한 기간 전체의 사용량 합
평균	막대 하나(하루/한 주/한 달)의 평균
최대	가장 많이 쓴 시점과 그 값
막대 차트	시점별 사용량. 위쪽 모서리가 둥글고, 마우스를 올리면 값이 말풍선으로 나옵니다.

막대는 처음 나타날 때와 기간을 바꿀 때 부드럽게 자랍니다.
단위(unit)는 합계, 평균, 말풍선에 함께 붙습니다.

Data shape

기간 단위별로 { label, value } 배열을 넘깁니다. 가로축 이름(label)은 서버가 정한 그대로 보여 줍니다.

tsx

const data = {
  day:   [{ label: "10/07", value: 120 }, { label: "10/08", value: 340 }, ...],
  week:  [{ label: "1주", value: 1800 }, { label: "2주", value: 2400 }, ...],
  month: [{ label: "5월", value: 6200 }, { label: "6월", value: 7800 }, ...],
};

<MemberAiUsageHistory data={data} unit="토큰" />

세 기간을 모두 줄 필요는 없습니다. 예를 들어 { month: [...] }만 주면 탭 없이 월별 차트만 보입니다.
탭을 누를 때 서버에서 해당 기간 데이터를 가져오려면 onPeriodChange에서 요청하고, 그동안 loading을 켜세요.

Other states

AI 사용량 추이

데이터가 없는 경우

합계: 0 회
평균: 0 회
최대: -

표시할 사용량이 없습니다.

Props

Prop	Type	설명
`data`필수	`{ day?, week?, month? }: UsagePoint[]`	기간 단위별 사용량. 있는 기간만 탭으로 나옵니다.
`description`	`string`	제목 아래 설명. 보통 멤버 이름을 적습니다.
`unit`	`string`	단위. 기본 "회".
`defaultPeriod`	`"day" \| "week" \| "month"`	처음 보여 줄 기간. 기본 day.
`onPeriodChange`	`(period) => void`	기간 탭이 바뀔 때 호출합니다.
`loading`	`boolean`	true이면 차트 자리에 불러오는 중 표시.
`className`	`string`	추가 클래스.

Accessibility

차트에 role="img"와 기간·합계를 알려 주는 설명이 있고, 같은 수치가 합계·평균·최대 글자로도 나옵니다.
기간 탭은 Radix Tabs라 키보드(방향키)로 이동할 수 있습니다.

Member AI Usage History

관리자용 컴포넌트관리자(MASTER)만 쓰는 화면에 쓰입니다.

멤버의 AI 사용량을 일·주·월별 막대(Bar) 차트로 보여 줍니다. 프론트 UI만 제공하며 사용량 집계는 추후 적용 예정입니다.

shadcn/ui · Chart shadcn/ui · Tabs

Preview

탭을 눌러 기간을 바꾸고, 막대에 마우스를 올려 값을 확인해 보세요.

AI 사용량 추이

이작성 · 최근 사용량

합계: 5,240 토큰
평균: 374 토큰
최대: 10/19 · 700

tsx

<MemberAiUsageHistory
  data={{ day: dayPoints, week: weekPoints, month: monthPoints }}
  description="김관리 · 최근 사용량"
  unit="토큰"
  onPeriodChange={(period) => load(period)}
/>

마지막으로 고른 기간: day

What admins can see

항목	내용
기간 탭	일별 / 주별 / 월별. 데이터가 있는 기간만 탭으로 나타납니다.
합계	선택한 기간 전체의 사용량 합
평균	막대 하나(하루/한 주/한 달)의 평균
최대	가장 많이 쓴 시점과 그 값
막대 차트	시점별 사용량. 위쪽 모서리가 둥글고, 마우스를 올리면 값이 말풍선으로 나옵니다.

막대는 처음 나타날 때와 기간을 바꿀 때 부드럽게 자랍니다.
단위(unit)는 합계, 평균, 말풍선에 함께 붙습니다.

Data shape

기간 단위별로 { label, value } 배열을 넘깁니다. 가로축 이름(label)은 서버가 정한 그대로 보여 줍니다.

tsx

const data = {
  day:   [{ label: "10/07", value: 120 }, { label: "10/08", value: 340 }, ...],
  week:  [{ label: "1주", value: 1800 }, { label: "2주", value: 2400 }, ...],
  month: [{ label: "5월", value: 6200 }, { label: "6월", value: 7800 }, ...],
};

<MemberAiUsageHistory data={data} unit="토큰" />

세 기간을 모두 줄 필요는 없습니다. 예를 들어 { month: [...] }만 주면 탭 없이 월별 차트만 보입니다.
탭을 누를 때 서버에서 해당 기간 데이터를 가져오려면 onPeriodChange에서 요청하고, 그동안 loading을 켜세요.

Other states

AI 사용량 추이

데이터가 없는 경우

합계: 0 회
평균: 0 회
최대: -

표시할 사용량이 없습니다.

Props

Prop	Type	설명
`data`필수	`{ day?, week?, month? }: UsagePoint[]`	기간 단위별 사용량. 있는 기간만 탭으로 나옵니다.
`description`	`string`	제목 아래 설명. 보통 멤버 이름을 적습니다.
`unit`	`string`	단위. 기본 "회".
`defaultPeriod`	`"day" \| "week" \| "month"`	처음 보여 줄 기간. 기본 day.
`onPeriodChange`	`(period) => void`	기간 탭이 바뀔 때 호출합니다.
`loading`	`boolean`	true이면 차트 자리에 불러오는 중 표시.
`className`	`string`	추가 클래스.

Accessibility

차트에 role="img"와 기간·합계를 알려 주는 설명이 있고, 같은 수치가 합계·평균·최대 글자로도 나옵니다.
기간 탭은 Radix Tabs라 키보드(방향키)로 이동할 수 있습니다.