From 860445f2cf6466ca84d8c56600924818b2fa51b5 Mon Sep 17 00:00:00 2001
From: qkdflrgs <qkdflrgs@gmail.com>
Date: Fri, 28 Jul 2023 12:15:50 +0900
Subject: [PATCH] =?UTF-8?q?feat/#10:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EC=9D=B8=EB=94=94=EC=BC=80=EC=9D=B4=ED=84=B0=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DropdownIndicator/DropdownIndicator.tsx   | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 FE/src/components/DropdownIndicator/DropdownIndicator.tsx

diff --git a/FE/src/components/DropdownIndicator/DropdownIndicator.tsx b/FE/src/components/DropdownIndicator/DropdownIndicator.tsx
new file mode 100644
index 000000000..cb707eb9b
--- /dev/null
+++ b/FE/src/components/DropdownIndicator/DropdownIndicator.tsx
@@ -0,0 +1,43 @@
+import { styled } from "styled-components";
+
+type Props = {
+  text: string;
+  padding?: string;
+  onClick(): void;
+};
+
+export default function DropdownIndicator({ text, padding, onClick }: Props) {
+  return (
+    <IndicatorButton text={text} padding={padding} onClick={onClick}>
+      <IndicatorLabel>{text}</IndicatorLabel>
+      <IndicatorIcon src={"/icons/chevronDown.svg"} />
+    </IndicatorButton>
+  );
+}
+
+const IndicatorButton = styled.button<Props>`
+  display: flex;
+  align-items: center;
+  padding: ${({ padding }) => padding && padding};
+  gap: 4px;
+  &:hover {
+    opacity: ${({ theme }) => theme.opacity.hover};
+  }
+  &:active {
+    opacity: ${({ theme }) => theme.opacity.press};
+  }
+  &:disabled {
+    opacity: ${({ theme }) => theme.opacity.disabled};
+  }
+`;
+
+const IndicatorLabel = styled.span`
+  width: 60px;
+  font: ${({ theme }) => theme.font.availableMedium16};
+  color: ${({ theme }) => theme.colorSystem.neutral.text.default};
+  text-align: left;
+`;
+
+const IndicatorIcon = styled.img`
+  filter: ${({ theme }) => theme.filter.neutral.text.default};
+`;