feat#26-mainpage-chat-ui

src/entities/chart/index.ts

@@ -0,0 +1 @@
+export * from './types';

src/entities/chart/types/chart.type.ts

@@ -0,0 +1,21 @@
+/**
+ * 차트 관련 entities
+ */
+
+// 차트 라인 데이터
+export interface ChartLine {
+  key: string;
+  name: string;
+}
+
+// 차트 데이터 포인트
+export interface ChartDataPoint {
+  [key: string]: string | number;
+}
+
+// 차트 데이터
+export interface ChartData {
+  title: string;
+  lines: ChartLine[];
+  data: ChartDataPoint[];
+}

src/entities/chart/types/index.ts

@@ -0,0 +1,2 @@
+export * from './chart.type';
+export * from './risk-analysis.type';

src/entities/chart/types/risk-analysis.type.ts

@@ -0,0 +1,58 @@
+/**
+ * 위험도 분석 관련 entities
+ */
+
+// 위험 요인
+export type RiskFactor = {
+  name: string;
+  percent: number;
+};
+
+// 위험도 요약
+export type RiskSummary = {
+  score: number;
+  factors: RiskFactor[];
+};
+
+// 임대인 정보
+export type Landlord = {
+  landlordId: number;
+  name: string;
+  normalizedKey: string;
+  ownedCount: number;
+  grade: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+// 임대인 신뢰도
+export type LandlordTrust = {
+  trustScore: number;
+  subrogationCount: number;
+  arrearsCount: number;
+  litigationCount: number;
+  ownedUnsoldCount: number;
+  grade: string;
+};
+
+// 임대인 소유 매물
+export type LandlordPlace = {
+  placeId: number;
+  label: string;
+  address: string;
+  addressDetail: string;
+};
+
+// 위험도 분석 응답 데이터
+export type RiskAnalysisResponse = {
+  data: {
+    riskSummary: RiskSummary;
+    landlord: Landlord;
+    landlordTrust: LandlordTrust;
+    landlordPlaces: LandlordPlace[];
+  };
+  status: string;
+  serverDateTime: string;
+  errorCode: string | null;
+  errorMessage: string | null;
+};

src/entities/index.ts

@@ -1,0 +1,3 @@
+export * from './auth';
+export * from './chart';
+export * from './risk-analysis';

src/features/main/components/common/ChartAxis.tsx

@@ -0,0 +1,18 @@
+import { XAxis, YAxis } from 'recharts';
+
+import { useChartConfig } from '../../hooks';
+
+type Props = {
+  dataKey: string;
+};
+
+export const ChartAxis = ({ dataKey }: Props) => {
+  const { xAxisConfig, yAxisConfig } = useChartConfig();
+
+  return (
+    <>
+      <XAxis dataKey={dataKey} {...xAxisConfig} />
+      <YAxis {...yAxisConfig} />
+    </>
+  );
+};

src/features/main/components/common/ChartGrid.tsx

@@ -0,0 +1,16 @@
+import { CartesianGrid } from 'recharts';
+
+import { useChartConfig } from '../../hooks';
+
+export const ChartGrid = () => {
+  const { gridConfig } = useChartConfig();
+
+  return (
+    <>
+      {/* 가로선 - 실선 */}
+      <CartesianGrid {...gridConfig.horizontal} />
+      {/* 세로선 - 점선 */}
+      <CartesianGrid {...gridConfig.vertical} />
+    </>
+  );
+};

src/features/main/components/common/ChartLineItem.tsx

@@ -0,0 +1,17 @@
+import { Line } from 'recharts';
+
+import type { ChartLine } from '@/entities';
+
+import { useChartConfig } from '../../hooks';
+
+type Props = {
+  line: ChartLine;
+  index: number;
+};
+
+export const ChartLineItem = ({ line, index }: Props) => {
+  const { getLineConfig } = useChartConfig();
+  const config = getLineConfig(line, index);
+
+  return <Line key={line.key} {...config} />;
+};

src/features/main/components/common/LegendLine.tsx

@@ -0,0 +1,25 @@
+import type { ChartLine } from '@/entities';
+
+import { useChartConfig } from '../../hooks';
+
+type Props = {
+  lines: ChartLine[];
+};
+
+export const LegendLine = ({ lines }: Props) => {
+  const { getLegendItemConfig } = useChartConfig();
+
+  return (
+    <ul className='m-0 flex list-none gap-5 p-0'>
+      {lines.map((line, index) => {
+        const config = getLegendItemConfig(line, index);
+        return (
+          <li key={config.key} className='flex items-center gap-2'>
+            <div className={`h-1 w-5 ${config.colorClass}`} />
+            <span className='text-sm text-gray-600'>{config.name}</span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};

src/features/main/components/common/Needle.tsx

@@ -0,0 +1,22 @@
+import { NeedleIcon } from '@/shared';
+
+type Props = {
+  needleAngle: number;
+};
+
+export const Needle = ({ needleAngle }: Props) => {
+  const correctedAngle = needleAngle - 90;
+
+  return (
+    <div
+      className='absolute top-1/2 left-1/2 origin-bottom -translate-x-1/2 -translate-y-full transition-transform duration-500 ease-in-out sm:h-20 md:h-16 lg:h-24'
+      style={{
+        transform: `rotate(${correctedAngle}deg)`,
+      }}
+    >
+      <div className='absolute bottom-0 left-1/2 z-10 size-2 -translate-x-1/2 translate-y-1/2 rounded-full bg-gray-400 sm:size-4 md:size-5 lg:size-6' />
+
+      <NeedleIcon className='absolute bottom-0 left-1/2 h-12 w-24 -translate-x-1/2 rounded-md text-gray-800 sm:h-16 sm:w-32 md:h-20 md:w-40 lg:h-24 lg:w-50' />
+    </div>
+  );
+};

src/features/main/components/common/index.ts

@@ -0,0 +1,5 @@
+export * from './ChartAxis';
+export * from './ChartGrid';
+export * from './ChartLineItem';
+export * from './LegendLine';
+export * from './Needle';

src/features/main/components/features/chart/ChartBox.tsx

@@ -1,87 +1,24 @@
-import {
-  CartesianGrid,
-  Legend,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
+import { Legend, LineChart, ResponsiveContainer, Tooltip } from 'recharts';
 
-import { getChartColor, getChartColorClass } from '@/shared';
+import type { ChartData } from '@/entities';
 
-type DataPoint = {
-  year: string;
-  [key: string]: string | number;
-};
+import { ChartAxis, ChartGrid, ChartLineItem, LegendLine } from '../../common';
 
 type Props = {
-  data: DataPoint[];
-  lines: {
-    key: string;
-    name: string;
-    showDot?: boolean;
-  }[];
-  title?: string;
-  height?: number;
-  yAxisFormatter?: (value: number) => string;
-  tooltipFormatter?: (value: number, name: string) => [string, string];
-  labelFormatter?: (label: string) => string;
+  chartData: ChartData;
 };
 
-export const ChartBox = ({
-  data,
-  lines,
-  title,
-  yAxisFormatter = (value) => value.toFixed(2),
-  tooltipFormatter = (value, name) => [`${value}%`, name],
-  labelFormatter = (label) => `20${label}년`,
-}: Props) => {
+export const ChartBox = ({ chartData }: Props) => {
+  const { title, lines, data } = chartData;
+
   return (
-    <div className='pt-5 pr-8 pb-1 pl-5'>
-      {title && (
-        <h3 className='mb-10 ml-5 text-start text-3xl font-bold text-[#333D4B]'>{title}</h3>
-      )}
+    <div className='w-full rounded-lg bg-white p-3'>
+      <h3 className='mb-10 ml-5 text-xl font-bold text-gray-900'>{title}</h3>
       <ResponsiveContainer width='100%' height={300}>
-        <LineChart data={data}>
-          {/* 가로선 - 실선 */}
-          <CartesianGrid horizontal={true} vertical={false} strokeDasharray='0' stroke='#BDBDBF' />
-          {/* 세로선 - 점선 */}
-          <CartesianGrid
-            horizontal={false}
-            vertical={true}
-            strokeDasharray='3 3'
-            stroke='#f0f0f0'
-          />
-          <XAxis
-            dataKey='year'
-            stroke='#BDBDBF'
-            fontSize={12}
-            tickLine={false}
-            axisLine={false}
-            tickMargin={10}
-          />
-          <YAxis
-            stroke='#BDBDBF'
-            fontSize={12}
-            tickLine={false}
-            axisLine={false}
-            tickFormatter={yAxisFormatter}
-            tickMargin={10}
-            domain={[0, 6]}
-            ticks={[0, 1, 2, 3, 4, 5, 6]}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: 'white',
-              border: '1px solid #e0e0e0',
-              borderRadius: '8px',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-            }}
-            formatter={tooltipFormatter}
-            labelFormatter={labelFormatter}
-          />
+        <LineChart data={data} margin={{ top: 5, right: 30, left: 0, bottom: 5 }}>
+          <ChartGrid />
+          <ChartAxis dataKey='month' />
+          <Tooltip />
           <Legend
             verticalAlign='top'
             align='left'
@@ -94,34 +31,12 @@ export const ChartBox = ({
             content={({ payload }) => {
               if (!payload || payload.length === 0) return null;
 
-              // lines 배열의 순서대로 범례를 생성
-              return (
-                <ul className='m-0 flex list-none gap-5 p-0'>
-                  {lines.map((line, index) => (
-                    <li key={line.key} className='flex items-center gap-2'>
-                      <div className={`h-1 w-5 ${getChartColorClass(index)}`} />
-                      <span className='text-sm text-gray-600'>{line.name}</span>
-                    </li>
-                  ))}
-                </ul>
-              );
+              return <LegendLine lines={lines} />;
             }}
           />
-          {lines.map((line, index) => {
-            const color = getChartColor(index);
-            return (
-              <Line
-                key={line.key}
-                type='monotone'
-                dataKey={line.key}
-                name={line.name}
-                stroke={color}
-                strokeWidth={2}
-                dot={line.showDot ? { r: 4, fill: color } : false}
-                activeDot={line.showDot ? { r: 6, stroke: color, strokeWidth: 2 } : false}
-              />
-            );
-          })}
+          {lines.map((line, index) => (
+            <ChartLineItem key={line.key} line={line} index={index} />
+          ))}
         </LineChart>
       </ResponsiveContainer>
     </div>