자료형 명시하도록 수정

src/app/insight/page.tsx

@@ -1,15 +1,20 @@
 'use client';
 
+import dynamic from 'next/dynamic';
+import React from 'react';
+
 import { Box, Stack, Typography, Grid } from '@mui/material';
 
-import ChartRenderer from '@/components/ChartRenderer';
 import CommentCard from '@/components/CommentCard';
 import GradientBox from '@/components/GradientBox';
 import NewsCardVertical from '@/components/NewsCardVertical';
 import color from '@/constants/color';
 import insightData from '@/mocks/insight';
 import insightsDataList from '@/mocks/insights';
 
+// ChartRenderer를 동적으로 로드
+const ChartRenderer = dynamic(() => import('@/components/ChartRenderer'), { ssr: false });
+
 const Page = () => {
   return (
     <GradientBox sx={{ height: '100vh', width: '100vw' }}>

src/components/ChartRenderer.tsx

@@ -1,10 +1,13 @@
 'use client';
 
+import dynamic from 'next/dynamic';
 import React from 'react';
-import Plot from 'react-plotly.js';
 
 import { Data, Layout } from 'plotly.js';
 
+// Dynamically import Plotly component to avoid SSR issues
+const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
+
 interface PlotDataProps {
   data: Data[];
   layout: Partial<Layout>;

src/mocks/insight.ts

@@ -1,3 +1,5 @@
+import { Data } from 'plotly.js';
+
 const insightData = {
   id: 4,
   comment: `오늘의 인사이트에 대해 알려줄게!
@@ -16,14 +18,14 @@ const insightData = {
         type: 'scatter',
         mode: 'lines+markers',
         marker: { color: 'blue' },
-      },
+      } as Data,
       {
         type: 'bar',
         x: ['2010', '2012', '2014', '2016', '2018', '2020'],
         y: [2.8, 2.9, 3.1, 3.2, 3.3, 3.3],
         name: 'Sea Level Rise (mm)',
         marker: { color: 'lightblue' },
-      },
+      } as Data,
     ],
     layout: {
       title: '연도별 해수면 상승 추이',

src/mocks/insights.ts

@@ -1,3 +1,5 @@
+import { Data } from 'plotly.js';
+
 const insightsDataList = [
   {
     id: 1,
@@ -13,14 +15,14 @@ const insightsDataList = [
           type: 'scatter',
           mode: 'lines+markers',
           marker: { color: 'orange' },
-        },
+        } as Data,
         {
           type: 'bar',
           x: ['2012', '2014', '2016', '2018', '2020'],
           y: [18.2, 18.5, 18.8, 19.0, 19.4],
           name: 'Daily Bread Consumption (g)',
           marker: { color: 'lightblue' },
-        },
+        } as Data,
       ],
       layout: {
         title: '한국의 연도별 빵 소비량',
@@ -47,14 +49,14 @@ const insightsDataList = [
           type: 'scatter',
           mode: 'lines+markers',
           marker: { color: 'blue' },
-        },
+        } as Data,
         {
           type: 'bar',
           x: ['2010', '2012', '2014', '2016', '2018', '2020'],
           y: [30, 35, 40, 45, 50, 55],
           name: 'Extreme Weather Events',
           marker: { color: 'lightgreen' },
-        },
+        } as Data,
       ],
       layout: {
         title: '기후 변화에 따른 극단적 기후 현상 증가',
@@ -81,14 +83,14 @@ const insightsDataList = [
           type: 'scatter',
           mode: 'lines+markers',
           marker: { color: 'green' },
-        },
+        } as Data,
         {
           type: 'bar',
           x: ['2016', '2017', '2018', '2019', '2020', '2021'],
           y: [7, 14, 21, 28, 35, 42],
           name: 'AI Adoption in Industries',
           marker: { color: 'purple' },
-        },
+        } as Data,
       ],
       layout: {
         title: '산업별 AI 기술 채택 증가',