From 87092985bca92143d863ee9b5b96ffe9f77ef3a3 Mon Sep 17 00:00:00 2001
From: MijuKim <alwn8918@gmail.com>
Date: Wed, 18 Sep 2024 08:07:49 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EC=9B=94=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=20=EC=8B=9C=20=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=20(#1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 acoountbook/src/components/home/month/Month.jsx          | 9 ++++++++-
 acoountbook/src/components/home/month/MonthItem.jsx      | 8 ++++++--
 acoountbook/src/components/home/month/MonthItem.style.js | 3 ++-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/acoountbook/src/components/home/month/Month.jsx b/acoountbook/src/components/home/month/Month.jsx
index 60630bc..d1001b3 100644
--- a/acoountbook/src/components/home/month/Month.jsx
+++ b/acoountbook/src/components/home/month/Month.jsx
@@ -4,10 +4,17 @@ import MonthItem from "./MonthItem";
 
 export default function Month() {
   const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+  const [selected, setSelected] = useState();
+
   return (
     <M.Container>
       {months.map((month) => (
-        <MonthItem key={month} month={month.toString()} />
+        <MonthItem
+          key={month}
+          month={month.toString()}
+          isSelected={selected === month}
+          onClick={() => setSelected(month)}
+        />
       ))}
     </M.Container>
   );
diff --git a/acoountbook/src/components/home/month/MonthItem.jsx b/acoountbook/src/components/home/month/MonthItem.jsx
index b5a739f..3c82ba4 100644
--- a/acoountbook/src/components/home/month/MonthItem.jsx
+++ b/acoountbook/src/components/home/month/MonthItem.jsx
@@ -1,5 +1,9 @@
 import * as M from "./MonthItem.style";
 
-export default function MonthItem({ month }) {
-  return <M.Button>{month}월</M.Button>;
+export default function MonthItem({ month, isSelected, onClick }) {
+  return (
+    <M.Button isSelected={isSelected} onClick={onClick}>
+      {month}월
+    </M.Button>
+  );
 }
diff --git a/acoountbook/src/components/home/month/MonthItem.style.js b/acoountbook/src/components/home/month/MonthItem.style.js
index 5f57388..fdb4ecc 100644
--- a/acoountbook/src/components/home/month/MonthItem.style.js
+++ b/acoountbook/src/components/home/month/MonthItem.style.js
@@ -10,7 +10,8 @@ export const Button = styled.button`
   font-size: 18px;
   font-weight: 600;
 
-  background-color: #f5f5f5;
+  background-color: ${(props) => (props.isSelected ? "#92b1d4" : "#f5f5f5")};
+  color: ${(props) => (props.isSelected ? "white" : "black")};
 
   &:hover {
     color: white;