From f904e75ae4b5b67fe559cb0c6ee9731c4922866a Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Fri, 20 Dec 2024 01:45:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=A4=EB=B2=84=20=ED=83=AD=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=A0=95=EB=A0=AC=20?=
 =?UTF-8?q?Select=EB=A5=BC=20BottomSheetSelect=EB=A1=9C=20=EA=B5=90?=
 =?UTF-8?q?=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../members/main/MemberList/index.tsx         | 49 +++----------------
 1 file changed, 6 insertions(+), 43 deletions(-)

diff --git a/src/components/members/main/MemberList/index.tsx b/src/components/members/main/MemberList/index.tsx
index acfbb2597..e70c84fd2 100644
--- a/src/components/members/main/MemberList/index.tsx
+++ b/src/components/members/main/MemberList/index.tsx
@@ -260,19 +260,12 @@ const MemberList: FC<MemberListProps> = ({ banner }) => {
               `}
             >
               <Text typography='SUIT_14_M'>{`전체 ${memberProfileData.pages[0].totalMembersCount}명`}</Text>
-              <StyledMobileFilter
-                placeholder=''
+              <StyledBottomSheetSelect
                 options={ORDER_OPTIONS}
                 value={orderBy.value}
+                placeholder=''
                 onChange={handleSelectOrderBy}
-                trigger={(placeholder) => (
-                  <OrderFilter>
-                    <Text typography='SUIT_16_M' color={colors.gray300}>
-                      {placeholder}
-                    </Text>
-                    <StyledSwitchVertical />
-                  </OrderFilter>
-                )}
+                icon={<StyledSwitchVertical />}
               />
             </div>
           )}
@@ -613,35 +606,6 @@ const StyledMobileFilterWrapper = styled.div`
     display: none; /* Chrome, Safari, Opera */
   }
 `;
-const StyledMobileFilter = styled(MemberListFilterSheet)`
-  flex: none;
-`;
-
-const MobileFilterTrigger = styled.button<{ selected?: boolean }>`
-  display: flex;
-  gap: 12px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 10px;
-  background: ${colors.gray800};
-  padding: 11px 16px;
-  width: max-content;
-  min-width: fit-content;
-  height: 48px;
-  color: ${colors.gray300};
-  ${({ selected }) =>
-    selected &&
-    css`
-      color: ${colors.white};
-    `}
-`;
-
-const StyledChevronDown = styled(IconChevronDown)`
-  width: 20px;
-  height: 20px;
-  color: ${colors.white};
-`;
 
 const StyledSwitchVertical = styled(IconSwitchVertical)`
   width: 20px;
@@ -649,8 +613,7 @@ const StyledSwitchVertical = styled(IconSwitchVertical)`
   color: ${colors.gray300};
 `;
 
-const OrderFilter = styled.div`
-  display: flex;
-  gap: 12px;
-  align-items: center;
+const StyledBottomSheetSelect = styled(BottomSheetSelect)`
+  background-color: transparent;
+  color: ${colors.gray300};
 `;