[FEAT] 드롭다운 업데이트

SystemConsultantGroup · Jul 24, 2024 · 7247406 · 7247406
1 parent 722e1b9
commit 7247406
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 24 deletions.
diff --git a/src/components/common/Dropdown/Dropdown.module.css b/src/components/common/Dropdown/Dropdown.module.css
@@ -1,35 +1,64 @@
-.dropdown {
-  position: relative;
-  display: inline-block;
+.dropdownToggle {
+  padding: 10px 12px;
   width: 300px;
-  font-family: pretendard;
-  background-color: white;
-  border: 1px solid black;
-  color: black;
+  background-color: #ffffff;
+  border: 1px solid #000000;
+  border-radius: 8px;
+  color: #000000;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.4px;
 }
 
-.dropdown:hover {
-  background-color: #dfe2eb;
+.dropdownToggle:hover {
+  background-color: #f5f5f5;
+  color: #61646b;
 }
 
-.dropdownToggle {
-  background-color: white;
-  border: 1px solid black;
-  padding: 8px;
-  width: 300px;
-  text-align: left;
-  color: black;
+.dropdownToggle.opened {
+  border-radius: 8px 8px 0 0;
+  border-bottom: none;
+}
+
+.toggleIcon {
+  width: 24px;
+  height: 24px;
+  left: 90%;
+}
+
+.dropdownList {
+  border-radius: 0 0 8px 8px;
+  padding: 0;
+  margin: 0;
+  border: 1px solid #000000;
 }
 
 .dropdownItem {
-  padding: 8px;
+  padding: 8px 12px;
   cursor: pointer;
-  background-color: white;
-  font-family: pretendard;
-  color: black;
-  width: 300px;
+  background-color: #ffffff;
+  color: #000000;
+  font-family: "Work Sans", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  letter-spacing: 0.4px;
+  width: 298px;
 }
 
 .dropdownItem:hover {
   background-color: #dfe2eb;
+  color: #61646b;
+}
+
+.dropdownList .dropdownItem:last-child {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.dropdownList .dropdownItem:not(:last-child) {
+  border-radius: 0;
 }
diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/common/Dropdown/Dropdown.tsx
@@ -9,17 +9,55 @@ interface DropdownProps {
 
 export function Dropdown({ options, placeholder }: DropdownProps) {
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  const [opened, setOpened] = useState<boolean>(false);
 
   const handleOptionClick = (option: string) => {
     setSelectedOption(option);
+    setOpened(false);
   };
 
   return (
-    <Menu>
+    <Menu offset={0} opened={opened} onChange={setOpened}>
       <Menu.Target>
-        <Button className={classes.dropdownToggle}>{selectedOption || placeholder}</Button>
+        <Button
+          justify="space-between"
+          className={`${classes.dropdownToggle} ${opened ? classes.opened : ""}`}
+          onClick={() => setOpened(!opened)}
+          leftSection={<span className={classes.buttonLabel}>{selectedOption || placeholder}</span>}
+          rightSection={
+            <span className={classes.toggleIcon}>
+              {opened ? (
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M12.1921 9.23047L15.9065 13.6879C16.3408 14.2089 15.9702 15 15.292 15L8.70803 15C8.02976 15 7.65924 14.2089 8.09346 13.6879L11.8079 9.23047C11.9079 9.11053 12.0921 9.11053 12.1921 9.23047Z"
+                    fill="#222222"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.8079 14.7695L8.09346 10.3121C7.65924 9.79109 8.02976 9 8.70803 9L15.292 9C15.9702 9 16.3408 9.79108 15.9065 10.3121L12.1921 14.7695C12.0921 14.8895 11.9079 14.8895 11.8079 14.7695Z"
+                    fill="#222222"
+                  />
+                </svg>
+              )}
+            </span>
+          }
+        ></Button>
       </Menu.Target>
-      <Menu.Dropdown>
+      <Menu.Dropdown className={classes.dropdownList}>
         {options.map((option) => (
           <Menu.Item
             key={option}