From 90a1b4ae93dcecd201353a0749980037944208ce Mon Sep 17 00:00:00 2001
From: dutexion <dutexion@gmail.com>
Date: Mon, 1 Apr 2024 13:51:57 +0900
Subject: [PATCH] design :: dropmenu hover style

---
 src/components/common/DropMenu.tsx  | 12 +++++++++---
 src/components/common/SelectBar.tsx |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/common/DropMenu.tsx b/src/components/common/DropMenu.tsx
index edefd0e..2fd84cf 100644
--- a/src/components/common/DropMenu.tsx
+++ b/src/components/common/DropMenu.tsx
@@ -4,11 +4,12 @@ import { css } from '@emotion/react';
 
 type DropMenuType = {
   values: string[];
+  selectedIndex?: number;
   onSelect: (index: number) => void;
   onClose: (bool: boolean) => void;
 };
 
-export const DropMenu = ({ values, onSelect, onClose }: DropMenuType) => {
+export const DropMenu = ({ values, onSelect, onClose, selectedIndex = -1 }: DropMenuType) => {
   return (
     <Wrapper>
       {values &&
@@ -22,6 +23,7 @@ export const DropMenu = ({ values, onSelect, onClose }: DropMenuType) => {
                 onSelect(index);
                 onClose(false);
               }}
+              selected={index === selectedIndex}
             >
               {element}
             </Box>
@@ -41,16 +43,17 @@ const Wrapper = styled.div`
   margin-top: 8px;
 `;
 
-const Box = styled.div<{ isLast: string }>`
+const Box = styled.div<{ isLast: string; selected: boolean }>`
   width: 100%;
   font-size: 12px;
   font-weight: 400;
-  color: ${theme.color.gray7};
+  color: ${({ selected }) => (selected ? theme.color.mainDark1 : theme.color.gray7)};
   height: 46px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  transition: 0.1s linear;
   ${({ isLast }) => {
     return (
       isLast === 'false' &&
@@ -59,4 +62,7 @@ const Box = styled.div<{ isLast: string }>`
       `
     );
   }};
+  :hover {
+    color: ${theme.color.mainDark1};
+  }
 `;
diff --git a/src/components/common/SelectBar.tsx b/src/components/common/SelectBar.tsx
index f6c0902..899e995 100644
--- a/src/components/common/SelectBar.tsx
+++ b/src/components/common/SelectBar.tsx
@@ -37,7 +37,7 @@ export const SelectBar = ({ selectedIndex, onSelect, values, label }: SelectBarT
             <img src={ArrowImg} />
           </ImgContainer>
         </_SelectBar>
-        {isOpen && <DropMenu values={values} onSelect={onSelect} onClose={setIsOpen} />}
+        {isOpen && <DropMenu values={values} onSelect={onSelect} onClose={setIsOpen} selectedIndex={selectedIndex} />}
       </SelectBarWrapper>
     </Wrapper>
   );