[FE] [FEAT] Report Myself 컴포넌트 구현

frontend/.gitattributes

@@ -0,0 +1,2 @@
+# 자동 생성되는 라우트 트리 파일의 줄바꿈을 LF로 고정
+src/routeTree.gen.ts text eol=lf

frontend/src/components/report-page/ReportLegend.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+
+const LEGEND_COLOR = {
+  primary: 'bg-primary-normal',
+  secondary: 'bg-cool-neutral-90',
+} as const;
+
+const SHAPE_STYLE = {
+  box: 'size-2.5',
+  line: 'w-6.25 h-1 rounded-modal-10',
+} as const;
+
+interface ReportLegendProps {
+  color: keyof typeof LEGEND_COLOR;
+  label: string;
+  variant?: 'box' | 'line';
+}
+
+const ReportLegend = ({ color, label, variant = 'box' }: ReportLegendProps) => {
+  return (
+    <div className="flex items-center gap-1.5">
+      <div className={clsx(SHAPE_STYLE[variant], LEGEND_COLOR[color])} />
+      <span className="label1-normal-regular text-label-alternative">
+        {label}
+      </span>
+    </div>
+  );
+};
+
+export default ReportLegend;

frontend/src/components/report-page/VerticalGrid.tsx

@@ -0,0 +1,67 @@
+import { clsx } from 'clsx';
+
+interface VerticalGridProps {
+  steps?: number;
+  labels: (number | string)[];
+  positions?: number[]; // 커스텀 위치 배열
+  className?: string;
+}
+
+const VerticalGrid = ({
+  steps,
+  labels,
+  positions,
+  className,
+}: VerticalGridProps) => {
+  const gridPositions =
+    positions ||
+    (steps !== undefined
+      ? Array.from({ length: steps + 1 }, (_, i) => (i / steps) * 100)
+      : []);
+
+  if (gridPositions.length === 0) return null;
+
+  return (
+    <div
+      className={clsx(
+        'pointer-events-none absolute inset-0 flex h-full flex-col gap-4 pr-5',
+        className,
+      )}
+    >
+      <div className="relative flex-1">
+        {gridPositions.map((position, i) => (
+          <div
+            key={i}
+            className="border-line-normal-normal absolute top-0 h-full border-l border-dashed"
+            style={{
+              left: `${position}%`,
+            }}
+          />
+        ))}
+      </div>
+      <div className="relative">
+        {gridPositions.map((position, i) => {
+          const label = labels[i];
+          if (label === undefined || label === null) return null;
+
+          return (
+            <div
+              key={i}
+              className="text-label-assistive absolute text-xs whitespace-nowrap"
+              style={{
+                left: `${position}%`,
+                transform: 'translateX(-50%)',
+              }}
+            >
+              {typeof label === 'number'
+                ? Math.round(label).toLocaleString()
+                : label}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default VerticalGrid;

frontend/src/components/report-page/category/ReportBar.tsx

@@ -30,8 +30,10 @@ const VARIANT_STYLES = {
 
 const ReportBar = ({ value, variant, maxValue }: ReportBarProps) => {
   const { currencyType } = useReportContext();
-  const countryCode = useAccountBookStore((state) => state.accountBook?.localCountryCode) as CountryCode;
-
+  const countryCode = useAccountBookStore(
+    (state) => state.accountBook?.localCountryCode,
+  ) as CountryCode;
+
   const styles = VARIANT_STYLES[variant];
   const percentage = (value / maxValue) * 100;
   const [showAmount, setShowAmount] = useState(false);

frontend/src/components/report-page/category/ReportBarGraph.tsx

@@ -1,31 +1,9 @@
 import { useMemo } from 'react';
-import clsx from 'clsx';
 
 import ReportBarList from '@/components/report-page/category/ReportBarList';
+import ReportLegend from '@/components/report-page/ReportLegend';
 
-import type { CategoryId } from '@/types/category';
-
-const LEGEND_COLOR = {
-  me: 'bg-primary-normal',
-  other: 'bg-cool-neutral-95',
-} as const;
-
-interface ReportBarLegendProps {
-  color: keyof typeof LEGEND_COLOR;
-  label: string;
-}
-
-const ReportBarLegend = ({ color, label }: ReportBarLegendProps) => {
-  return (
-    <div className="flex items-center gap-1.5">
-      <div className={clsx('h-2.5 w-2.5', LEGEND_COLOR[color])} />
-      <span className="label1-normal-regular text-label-alternative">
-        {label}
-      </span>
-    </div>
-  );
-};
-
+import { type CategoryId } from '@/types/category';
 interface ReportBarGraphProps {
   maxLabel: number;
   items: {
@@ -49,8 +27,8 @@ const ReportBarGraph = ({ maxLabel, items }: ReportBarGraphProps) => {
   return (
     <div className="flex w-145.5 flex-col gap-3.5">
       <div className="flex justify-end gap-4">
-        <ReportBarLegend label="나" color="me" />
-        <ReportBarLegend label="다른 학생" color="other" />
+        <ReportLegend label="나" color="primary" />
+        <ReportLegend label="다른 학생" color="secondary" />
       </div>
       <ReportBarList items={data} maxLabel={maxLabel} />
     </div>

frontend/src/components/report-page/category/ReportBarList.tsx

@@ -1,5 +1,5 @@
 import ReportBarRow from '@/components/report-page/category/ReportBarRow';
-import VerticalGrid from '@/components/report-page/category/VerticalGrid';
+import VerticalGrid from '@/components/report-page/VerticalGrid';
 
 import type { CategoryId } from '@/types/category';
 
@@ -12,9 +12,15 @@ interface ReportBarListProps {
   }[];
 }
 const ReportBarList = ({ items, maxLabel }: ReportBarListProps) => {
+  const steps = 6;
+  const labels = Array.from(
+    { length: steps + 1 },
+    (_, i) => (maxLabel / steps) * i,
+  );
+
   return (
     <div className="relative h-125.25 pt-4.75">
-      <VerticalGrid steps={6} maxLabel={maxLabel} />
+      <VerticalGrid steps={steps} labels={labels} className="left-14.75" />
       <div className="relative z-10 flex flex-col gap-4.5">
         {items.map((item) => (
           <ReportBarRow

frontend/src/components/report-page/category/ReportCategory.tsx

@@ -23,10 +23,10 @@ const ReportCategory = ({ data }: ReportCategoryProps) => {
 
   return (
     <ReportContainer title="월별 지출 비교">
-      <ReportContent className="h-166.5 w-162.5 gap-7">
+      <ReportContent className="h-166.5 w-162.5 gap-7 pb-10.25">
         <h3 className="heading1-bold text-label-normal">
           나랑 같은 국가의 교환학생보다{' '}
-          <span className="text-primary-normal">{category}</span> 소비가 유독{' '}
+          <span className="text-primary-strong">{category}</span> 소비가 유독{' '}
           {data.isOverSpent ? '많아요' : '적어요'}
         </h3>
         <ReportBarGraph maxLabel={maxLabelValue} items={data.items} />

frontend/src/components/report-page/layout/ReportContent.tsx

@@ -17,7 +17,7 @@ const ReportContent = ({
   return (
     <div
       className={cn(
-        'rounded-modal-8 bg-cool-neutral-99 flex flex-col justify-between p-8',
+        'rounded-modal-8 bg-cool-neutral-99 flex flex-col p-8',
         className,
       )}
     >

frontend/src/components/report-page/mock.ts

@@ -6,6 +6,11 @@ interface CategoryItem {
   averageSpentAmount: string;
 }
 
+interface MyselfItem {
+  date: string;
+  cumulatedAmount: string;
+}
+
 const mockData = {
   countryCode: 'US',
   compareWithAverage: {
@@ -16,13 +21,12 @@ const mockData = {
   },
   compareWithLastMonth: {
     diff: '150',
-    thisMonth: '2026-01',
+    thisMonth: '1월',
     thisMonthCount: 20,
-    lastMonth: '2025-12',
+    lastMonth: '12월',
     lastMonthCount: 31,
     totalSpent: {
       thisMonthToDate: '830',
-      lastMonthToSameDay: '680',
       lastMonthTotal: '2311.46',
     },
     thisMonthItem: [
@@ -46,7 +50,7 @@ const mockData = {
       { date: '2026-01-18', cumulatedAmount: '700.3' },
       { date: '2026-01-19', cumulatedAmount: '780.1' },
       { date: '2026-01-20', cumulatedAmount: '830' },
-    ],
+    ] as Array<MyselfItem>,
     prevMonthItem: [
       { date: '2025-12-01', cumulatedAmount: '18' },
       { date: '2025-12-02', cumulatedAmount: '26' },
@@ -79,7 +83,7 @@ const mockData = {
       { date: '2025-12-29', cumulatedAmount: '1600' },
       { date: '2025-12-30', cumulatedAmount: '2000' },
       { date: '2025-12-31', cumulatedAmount: '2311.46' },
-    ],
+    ] as Array<MyselfItem>,
   },
   compareByCategory: {
     maxDiffCategoryIndex: 4,

frontend/src/components/report-page/monthly/ReportMonthly.tsx

@@ -0,0 +1,17 @@
+import ReportContainer from '@/components/report-page/layout/ReportContainer';
+import ReportContent from '@/components/report-page/layout/ReportContent';
+
+const ReportMonthly = () => {
+  return (
+    <ReportContainer title="월별 지출 비교">
+      <ReportContent className="h-62 w-109 gap-7 py-8.75 pl-7">
+        <h3 className="heading1-bold text-label-normal">
+          나랑 같은 국가의 교환학생보다 <br />
+          <span className="text-primary-strong">234달러 덜</span> 썼어요
+        </h3>
+      </ReportContent>
+    </ReportContainer>
+  );
+};
+
+export default ReportMonthly;

frontend/src/components/report-page/myself/ReportLineChart.tsx

@@ -0,0 +1,71 @@
+import {
+  buildAreaPath,
+  buildLinePath,
+} from '@/components/report-page/myself/buildPath';
+import { type ChartItem } from '@/components/report-page/reportType';
+
+interface ReportLineChartProps {
+  thisMonth: ChartItem[];
+  lastMonth: ChartItem[];
+  thisMonthCount: number;
+  lastMonthCount: number;
+  maxValue: number;
+  width?: number;
+  height?: number;
+}
+
+const ReportLineChart = ({
+  thisMonthCount,
+  lastMonthCount,
+  thisMonth,
+  lastMonth,
+  maxValue,
+  width = 348,
+  height = 140,
+}: ReportLineChartProps) => {
+  const maxDay = Math.max(thisMonthCount, lastMonthCount);
+
+  const thisPath = buildLinePath(thisMonth, width, height, maxValue, maxDay);
+  const lastLinePath = buildLinePath(lastMonth, width, height, maxValue, maxDay);
+  const lastAreaPath = buildAreaPath(
+    lastMonth,
+    width,
+    height,
+    maxValue,
+    maxDay,
+  );
+
+  const thisMonthWidth = (thisMonth.length / maxDay) * width;
+
+  return (
+    <svg width={width} height={height}>
+      <defs>
+        <clipPath id="thisMonthClip">
+          <rect x="0" y="0" width={thisMonthWidth} height={height} />
+        </clipPath>
+        <linearGradient id="graphGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stopColor="rgba(194, 196, 200, 0.50)" />
+          <stop offset="100%" stopColor="rgba(255, 255, 255, 0.50)" />
+        </linearGradient>
+      </defs>
+      <path d={lastAreaPath} fill="url(#graphGradient)" stroke="none" />
+      <path
+        d={lastLinePath}
+        fill="none"
+        stroke="#C2C4C8"
+        strokeWidth={2.5}
+      />
+      <path
+        d={thisPath}
+        fill="none"
+        stroke="#44A3B6"
+        strokeWidth={2.5}
+        strokeDasharray="1000"
+        className="animate-draw-path"
+        clipPath="url(#thisMonthClip)"
+      />
+    </svg>
+  );
+};
+
+export default ReportLineChart;