✨ Feat: 월 선택 시 색상 변경 (#1)

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

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;