✨ Feat: month, chart 컴포넌트 연결

9oormthon-univ-3-study · Sep 17, 2024 · d86e34f · d86e34f
1 parent 8709298
commit d86e34f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/acoountbook/src/components/home/month/Month.jsx b/acoountbook/src/components/home/month/Month.jsx
@@ -2,18 +2,22 @@ import { useState } from "react";
 import * as M from "./Month.style";
 import MonthItem from "./MonthItem";
 
-export default function Month() {
-  const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export default function Month({ months, onMonthSelect }) {
   const [selected, setSelected] = useState();
 
+  const handleClick = (month) => {
+    setSelected(month);
+    onMonthSelect(month);
+  };
+
   return (
     <M.Container>
       {months.map((month) => (
         <MonthItem
           key={month}
           month={month.toString()}
           isSelected={selected === month}
-          onClick={() => setSelected(month)}
+          onClick={() => handleClick(month)}
         />
       ))}
     </M.Container>

diff --git a/acoountbook/src/pages/Home.jsx b/acoountbook/src/pages/Home.jsx
@@ -3,13 +3,21 @@ import Menu from "../components/home/menu/Menu";
 import Month from "../components/home/month/Month";
 import Chart from "../components/home/chart/Chart";
 import Content from "../components/home/content/Content";
+import { useState } from "react";
 
 export default function Home() {
+  const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  const [selectedMonth, setSelectedMonth] = useState();
+
+  const handleMonthSelect = (month) => {
+    setSelectedMonth(month);
+  };
+
   return (
     <H.Container>
       <Menu />
-      <Month />
-      <Chart />
+      <Month months={months} onMonthSelect={handleMonthSelect} />
+      <Chart month={selectedMonth} total={0} />
       <Content />
     </H.Container>
   );