From 3d1d2030c644288861e5269c7f81ea5209ccb7f2 Mon Sep 17 00:00:00 2001
From: ejPark43 <pej22200310@handong.ac.kr>
Date: Tue, 6 Aug 2024 15:26:31 +0900
Subject: [PATCH] =?UTF-8?q?style:=20=EB=AA=A9=ED=91=9C=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=ED=98=B8?=
 =?UTF-8?q?=EB=B2=84=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goalEditDropdown/GoalEditDropdown.jsx     | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/homepage/component/goals/goalEditDropdown/GoalEditDropdown.jsx b/src/homepage/component/goals/goalEditDropdown/GoalEditDropdown.jsx
index 83ce5da..559c49b 100644
--- a/src/homepage/component/goals/goalEditDropdown/GoalEditDropdown.jsx
+++ b/src/homepage/component/goals/goalEditDropdown/GoalEditDropdown.jsx
@@ -3,7 +3,13 @@ import styled, { keyframes } from "styled-components";
 import GoalEditDropdownBtn from "../../../../asset/Icon/GoalEditDropdownBtn.svg";
 import { CSSTransition } from "react-transition-group";
 
-function GoalEditDropdown({ setIsDeleteModalOpen, setIsUpdate, setIsModalOpen, goal, onEdit }) {
+function GoalEditDropdown({
+  setIsDeleteModalOpen,
+  setIsUpdate,
+  setIsModalOpen,
+  goal,
+  onEdit,
+}) {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -42,7 +48,12 @@ function GoalEditDropdown({ setIsDeleteModalOpen, setIsUpdate, setIsModalOpen, g
   return (
     <DropdownContainer ref={dropdownRef} onClick={toggleDropdown}>
       <img src={GoalEditDropdownBtn} alt=""></img>
-      <CSSTransition in={isDropdownOpen} timeout={300} classNames="dropdown" unmountOnExit>
+      <CSSTransition
+        in={isDropdownOpen}
+        timeout={300}
+        classNames="dropdown"
+        unmountOnExit
+      >
         <DropdownMenu>
           <DropdownItem onClick={handleUpdateClick}>수정하기</DropdownItem>
           <Separator />
@@ -87,6 +98,11 @@ const DropdownContainer = styled.div`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  transition: 0.1s;
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 6px;
+  }
 `;
 
 const DropdownMenu = styled.div`