From b75923a9c2cdfb20febb44c8ebff2da8067a84ef Mon Sep 17 00:00:00 2001
From: jinhojang6 <jinho5051@gmail.com>
Date: Tue, 1 Oct 2024 22:43:40 +0900
Subject: [PATCH] feat: update filter dropdown style

---
 src/components/Dropdown/Checkbox.tsx          | 47 ++++++++++---------
 src/components/Dropdown/Dropdown.tsx          | 22 ++++-----
 .../Explore/OperatorGrid/OperatorGrid.tsx     |  2 -
 3 files changed, 36 insertions(+), 35 deletions(-)

diff --git a/src/components/Dropdown/Checkbox.tsx b/src/components/Dropdown/Checkbox.tsx
index bca1887..8d0f4f4 100644
--- a/src/components/Dropdown/Checkbox.tsx
+++ b/src/components/Dropdown/Checkbox.tsx
@@ -1,10 +1,33 @@
 import styled from '@emotion/styled'
 
-const CustomCheckboxWrapper = styled.label`
+interface CustomCheckboxProps {
+  checked: boolean
+  onChange: () => void
+  label: string
+}
+
+const Checkbox: React.FC<CustomCheckboxProps> = ({
+  checked,
+  onChange,
+  label,
+}) => (
+  <Container>
+    <HiddenCheckbox type="checkbox" checked={checked} onChange={onChange} />
+    <StyledCheckbox isChecked={checked} />
+    <LabelText>{label}</LabelText>
+  </Container>
+)
+
+const Container = styled.label`
   display: flex;
   align-items: center;
   cursor: pointer;
-  margin-bottom: 10px;
+  padding: 10px 16px 10px 11px;
+  border-bottom: 1px solid white;
+
+  &:last-of-type {
+    border-bottom: none;
+  }
 `
 
 const HiddenCheckbox = styled.input`
@@ -20,7 +43,7 @@ const StyledCheckbox = styled.span<{ isChecked: boolean }>`
   width: 18px;
   height: 18px;
   background-color: ${({ isChecked }) => (isChecked ? 'white' : 'black')};
-  border: 2px solid white;
+  border: 1px solid white;
   position: relative;
   margin-right: 10px;
 
@@ -38,22 +61,4 @@ const LabelText = styled.span`
   color: white;
 `
 
-interface CustomCheckboxProps {
-  checked: boolean
-  onChange: () => void
-  label: string
-}
-
-const Checkbox: React.FC<CustomCheckboxProps> = ({
-  checked,
-  onChange,
-  label,
-}) => (
-  <CustomCheckboxWrapper>
-    <HiddenCheckbox type="checkbox" checked={checked} onChange={onChange} />
-    <StyledCheckbox isChecked={checked} />
-    <LabelText>{label}</LabelText>
-  </CustomCheckboxWrapper>
-)
-
 export default Checkbox
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index 79aa567..7b28522 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -64,7 +64,7 @@ const Dropdown: React.FC<DropdownProps> = ({
 
   return (
     <DropdownContainer ref={dropdownRef}>
-      <DropdownHeader onClick={toggleDropdown}>
+      <DropdownHeader onClick={toggleDropdown} isExpanded={isExpanded}>
         <span>{title}</span>
         <Chevron isExpanded={isExpanded}>
           <img src="/assets/chevron-down.svg" alt="chevron down" />
@@ -98,15 +98,15 @@ const DropdownContainer = styled.div`
   width: 200px;
 `
 
-const DropdownHeader = styled.div`
+const DropdownHeader = styled.div<{ isExpanded: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   cursor: pointer;
   border: 1px solid white;
-  background-color: black;
-  color: white;
+  background-color: ${({ isExpanded }) => (isExpanded ? 'white' : 'black')};
+  color: ${({ isExpanded }) => (isExpanded ? 'black' : 'white')};
 `
 
 const Chevron = styled.span<{ isExpanded: boolean }>`
@@ -124,27 +124,25 @@ const DropdownContent = styled.div`
   background-color: black;
   border: 1px solid white;
   z-index: 10;
-  padding: 10px;
+
   box-sizing: border-box;
 `
 
 const ButtonContainer = styled.div`
   display: flex;
-  margin-top: 10px;
+  height: 40px;
 `
 
 const Button = styled.button`
   background-color: transparent;
-  border: 1px solid white;
+  border-top: 1px solid white;
   width: 100%;
+  padding: 10px 16px;
   color: white;
-  padding: 5px;
   cursor: pointer;
-  transition: background-color 0.3s;
 
-  &:hover {
-    background-color: white;
-    color: black;
+  &:first-of-type {
+    border-right: 1px solid white;
   }
 `
 
diff --git a/src/components/Explore/OperatorGrid/OperatorGrid.tsx b/src/components/Explore/OperatorGrid/OperatorGrid.tsx
index 15f3879..c30cd1c 100644
--- a/src/components/Explore/OperatorGrid/OperatorGrid.tsx
+++ b/src/components/Explore/OperatorGrid/OperatorGrid.tsx
@@ -126,14 +126,12 @@ const GridItem = styled.div`
   overflow: hidden;
   cursor: pointer;
   background-color: var(--grey-900);
-  border-radius: 8px;
 `
 
 const Placeholder = styled.div`
   width: 100%;
   aspect-ratio: 1;
   background-color: var(--grey-900);
-  border-radius: 8px;
   opacity: 0.5;
 `