[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?: keyof typeof SHAPE_STYLE;
+}
+
+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 type { ComponentPropsWithoutRef } from 'react';
+import { clsx } from 'clsx';
+
+interface VerticalGridProps extends ComponentPropsWithoutRef<'div'> {
+  steps?: number;
+  labels: (number | string)[];
+  positions?: number[]; // 커스텀 위치 배열
+}
+
+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

@@ -6,7 +6,6 @@ import CurrencyAmountDisplay from '@/components/currency/CurrencyAmountDisplay';
 import CurrencyBadge from '@/components/currency/CurrencyBadge';
 import { useReportContext } from '@/components/report-page/ReportContext';
 
-import { type CountryCode } from '@/data/countryCode';
 import { useAccountBookStore } from '@/stores/useAccountBookStore';
 
 interface ReportBarProps {
@@ -30,8 +29,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,
+  );
+
   const styles = VARIANT_STYLES[variant];
   const percentage = (value / maxValue) * 100;
   const [showAmount, setShowAmount] = useState(false);
@@ -46,6 +47,8 @@ const ReportBar = ({ value, variant, maxValue }: ReportBarProps) => {
     return () => clearTimeout(timer);
   }, []);
 
+  if (!countryCode) return null;
+
   return (
     <div className="flex flex-1 items-center gap-2">
       <div

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,
       )}
     >