fix: Intro & QGrid 코드 정리 및 구조 변경

src/app/[locale]/LocaleProvider.js

@@ -4,7 +4,7 @@ import { I18nProviderClient } from '@/locales/client'
 
 export function LocaleProvider({ locale, children }) {
   return (
-    <I18nProviderClient locale={locale} fallback={<p>Loading...</p>}>
+    <I18nProviderClient locale={locale} fallback={''}>
       {children}
     </I18nProviderClient>
   )

src/app/[locale]/intro/page.jsx

@@ -1,6 +1,3 @@
-'use client'
-
-import Hero from '@/components/Hero'
 import Intro from '@/components/Intro'
 
 export default function IntroPage() {

src/app/[locale]/layout.js

@@ -7,7 +7,9 @@ export default function LocaleLayout({ children }) {
   const locale = useCurrentLocale()
   return (
     <>
-      <LocaleProvider locale={locale}>{children}</LocaleProvider>
+      <LocaleProvider locale={locale} fallback={''}>
+        {children}
+      </LocaleProvider>
     </>
   )
 }

src/components/Intro.jsx

@@ -1,6 +1,8 @@
 'use client'
 
-import { useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+
+import Link from 'next/link'
 
 import { Button } from '@nextui-org/react'
 
@@ -25,9 +27,13 @@ export default function Intro() {
     setDateRange,
   }
 
-  const gridProps = {
+  // const  gridProps = {
+  //   isPageable: false,
+  // }
+  const [gridProps, setGridProps] = useState({
+    gridData: [],
     isPageable: false,
-  }
+  })
 
   const modelProps = {
     open,
@@ -52,8 +58,22 @@ export default function Intro() {
     </>
   )
 
+  useEffect(() => {
+    async function fetchData() {
+      const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
+      const data = await response.json()
+      setGridProps({ ...gridProps, gridData: data })
+    }
+    fetchData()
+  }, [])
+
   return (
     <>
+      <div className="text-2xl">
+        <Link href={'/login'}>
+          <Button color="primary">로그인 페이지로 이동</Button>
+        </Link>
+      </div>
       <div className="my-2">
         <div className="text-2xl">Single Date Picker</div>
         <div>

src/components/common/grid/QGrid.jsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { AgGridReact } from 'ag-grid-react'
 
@@ -5,13 +7,14 @@ import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-quartz.css'
 
 export default function QGrid(props) {
+  console.log('QGrid props:', props)
   const { gridData, gridColumns, isPageable = true } = props
   const [count, setCount] = useState(0)
   const [clickedCount, setClickedCount] = useState(0)
   /**
    * 행 데이터를 설정할 때 useState을 사용하여 렌더링 전반에 걸쳐 일관된 배열 참조를 유지하는 것이 좋습니다
    */
-  const [rowData, setRowData] = useState([])
+  const [rowData, setRowData] = useState(null)
 
   /**
    * Column Definitions를 설정할 때는 useMemo 또는 useState를 사용하여 렌더 간에 일관된 참조를 유지하십시오.
@@ -57,12 +60,15 @@ export default function QGrid(props) {
 
   // Fetch data & update rowData state
   useEffect(() => {
-    gridData
+    // async function fetchData() {
-      ? setRowData(gridData)
+    //   const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json')
-      : fetch('https://www.ag-grid.com/example-assets/space-mission-data.json') // Fetch data from server
+    //   const data = await response.json()
-          .then((result) => result.json()) // Convert to JSON
+    //   setRowData(data)
-          .then((rowData) => setRowData(rowData)) // Update state of `rowData`
+    // }
-  }, [])
+
+    console.log('use effect')
+    gridData ? setRowData(gridData) : ''
+  }, [gridData])
 
   return (
     <div