-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into docs/update-readme
- Loading branch information
Showing
23 changed files
with
1,681 additions
and
165 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { axiosInstance } from "@/api/instance"; | ||
| import { ChartResponse, ChartPlatforms } from "@/types/chart"; | ||
|
|
||
| export const chart = { | ||
| //금일 조회수 | ||
| getToday: async (): Promise<ChartResponse> => { | ||
| const response = await axiosInstance.get<ChartResponse>("/api/statistic/today?limit=5"); | ||
| return response.data; | ||
| }, | ||
| //전체 조회수 | ||
| getAll: async (): Promise<ChartResponse> => { | ||
| const response = await axiosInstance.get<ChartResponse>("/api/statistic/all?limit=5"); | ||
| return response.data; | ||
| }, | ||
| //금일 조회수 | ||
| getPlatform: async (): Promise<ChartPlatforms> => { | ||
| const response = await axiosInstance.get<ChartPlatforms>("/api/statistic/platform"); | ||
| return response.data; | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import { useState, useEffect, useRef } from "react"; | ||
|
|
||
| import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"; | ||
|
|
||
| import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"; | ||
| import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; | ||
|
|
||
| import { ChartType } from "@/types/chart"; | ||
|
|
||
| type BarType = { | ||
| data: ChartType[]; | ||
| title: string; | ||
| description: string; | ||
| color: boolean; | ||
| }; | ||
|
|
||
| export default function BarChartItem({ data, title, description, color }: BarType) { | ||
| const [componentWidth, setComponentWidth] = useState(0); | ||
| const cardRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| const resizeObserver = new ResizeObserver((entries) => { | ||
| for (let entry of entries) { | ||
| setComponentWidth(entry.contentRect.width); | ||
| } | ||
| }); | ||
|
|
||
| if (cardRef.current) { | ||
| resizeObserver.observe(cardRef.current); | ||
| } | ||
| return () => { | ||
| if (cardRef.current) { | ||
| resizeObserver.unobserve(cardRef.current); | ||
| } | ||
| }; | ||
| }, []); | ||
| const truncateText = (text: string) => { | ||
| const charWidth = 55; | ||
| const maxChars = Math.floor(componentWidth / charWidth); | ||
|
|
||
| return text.length > maxChars ? `${text.slice(0, Math.max(0, maxChars - 3))}...` : text; | ||
| }; | ||
|
|
||
| const chartConfig = { | ||
| desktop: { | ||
| label: "Desktop", | ||
| color: color ? "hsl(200, 70%, 68%)" : "hsl(120, 70%, 68%)", | ||
| }, | ||
| } satisfies ChartConfig; | ||
|
|
||
| return ( | ||
| <Card ref={cardRef} className="w-[50%]"> | ||
| <CardHeader> | ||
| <CardTitle>{title}</CardTitle> | ||
| <CardDescription>{description}</CardDescription> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <ChartContainer config={chartConfig}> | ||
| <BarChart accessibilityLayer data={data}> | ||
| <CartesianGrid vertical={false} /> | ||
| <XAxis | ||
| dataKey="title" | ||
| tickLine={false} | ||
| tickMargin={10} | ||
| axisLine={false} | ||
| tickFormatter={(value) => truncateText(value)} | ||
| /> | ||
| <ChartTooltip cursor={true} content={<ChartTooltipContent />} /> | ||
| <Bar dataKey="viewCount" fill="var(--color-desktop)" radius={8} /> | ||
| </BarChart> | ||
| </ChartContainer> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import BarChartItem from "@/components/chart/BarChartItem"; | ||
| import ChartSkeleton from "@/components/chart/ChartSkeleton"; | ||
| import PieChartItem from "@/components/chart/PieChartItem"; | ||
|
|
||
| import { useChart } from "@/hooks/queries/useChart"; | ||
|
|
||
| export default function Chart() { | ||
| const { data, isLoading, error } = useChart(); | ||
| if (!data || isLoading) return <ChartSkeleton />; | ||
| if (error) return <p>Error loading data</p>; | ||
| const { chartAll, chartToday, chartPlatform } = data; | ||
|
|
||
| return ( | ||
| <div className="p-8"> | ||
| <div className="flex"> | ||
| <BarChartItem title="전체 조회수" description="전체 조회수 TOP5" data={chartAll.data} color={true} /> | ||
| <BarChartItem title="오늘의 조회수" description="금일 조회수 TOP5" data={chartToday.data} color={false} /> | ||
| </div> | ||
| <div> | ||
| <PieChartItem data={chartPlatform.data} title="플랫폼별 블로그 수" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import BarChartItem from "@/components/chart/BarChartItem"; | ||
| import PieChartItem from "@/components/chart/PieChartItem"; | ||
|
|
||
| export default function ChartSkeleton() { | ||
| return ( | ||
| <div className="p-8"> | ||
| <div className="flex"> | ||
| <BarChartItem title="전체 조회수" description="전체 조회수 TOP5" data={[]} color={true} /> | ||
| <BarChartItem title="오늘의 조회수" description="금일 조회수 TOP5" data={[]} color={false} /> | ||
| </div> | ||
| <div> | ||
| <PieChartItem data={[]} title="플랫폼별 블로그 수" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { LabelList, Pie, PieChart, Cell } from "recharts"; | ||
|
|
||
| import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; | ||
| import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"; | ||
|
|
||
| import { ChartPlatform } from "@/types/chart"; | ||
|
|
||
| type BarType = { | ||
| data: ChartPlatform[]; | ||
| title: string; | ||
| }; | ||
|
|
||
| const chartConfig: ChartConfig = { | ||
| count: { | ||
| label: "Count", | ||
| }, | ||
| tistory: { | ||
| label: "Tistory", | ||
| color: "hsl(210, 60%, 70%)", | ||
| }, | ||
| velog: { | ||
| label: "Velog", | ||
| color: "hsl(150, 60%, 70%)", | ||
| }, | ||
| etc: { | ||
| label: "etc", | ||
| color: "hsl(30, 60%, 70%)", | ||
| }, | ||
| } satisfies ChartConfig; | ||
|
|
||
| export default function PieChartItem({ data, title }: BarType) { | ||
| return ( | ||
| <Card className="flex flex-col"> | ||
| <CardHeader className="items-center pb-0"> | ||
| <CardTitle>{title}</CardTitle> | ||
| </CardHeader> | ||
| <CardContent className="flex-1 pb-0"> | ||
| <ChartContainer | ||
| config={chartConfig} | ||
| className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background" | ||
| > | ||
| <PieChart> | ||
| <ChartTooltip content={<ChartTooltipContent hideLabel />} /> | ||
| <Pie data={data} dataKey="count" nameKey="platform"> | ||
| {data.map((entry, index) => ( | ||
| <Cell key={`cell-${index}`} fill={chartConfig[entry.platform]?.color || "#ccc"} /> | ||
| ))} | ||
| <LabelList dataKey="platform" className="fill-background" stroke="none" fontSize={12} /> | ||
| </Pie> | ||
| </PieChart> | ||
| </ChartContainer> | ||
| </CardContent> | ||
| </Card> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { | ||
| AlertDialog, | ||
| AlertDialogAction, | ||
| AlertDialogContent, | ||
| AlertDialogDescription, | ||
| AlertDialogFooter, | ||
| AlertDialogHeader, | ||
| AlertDialogTitle, | ||
| } from "@/components/ui/alert-dialog"; | ||
|
|
||
| import { AlertType } from "@/types/alert"; | ||
|
|
||
| export default function Alert({ alertOpen, onClose }: { alertOpen: AlertType; onClose: () => void }) { | ||
| return ( | ||
| <AlertDialog open={alertOpen.isOpen}> | ||
| <AlertDialogContent> | ||
| <AlertDialogHeader> | ||
| <AlertDialogTitle>{alertOpen.title}</AlertDialogTitle> | ||
| <AlertDialogDescription>{alertOpen.content}</AlertDialogDescription> | ||
| </AlertDialogHeader> | ||
| <AlertDialogFooter> | ||
| <AlertDialogAction onClick={onClose}>확인</AlertDialogAction> | ||
| </AlertDialogFooter> | ||
| </AlertDialogContent> | ||
| </AlertDialog> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.