[FEAT] 드롭다운 수정

SystemConsultantGroup · Jul 31, 2024 · df50cf6 · df50cf6
1 parent b5ef70e
commit df50cf6
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/src/components/common/Dropdown/Dropdown.module.css b/src/components/common/Dropdown/Dropdown.module.css
@@ -1,19 +1,19 @@
 .dropdownToggle {
   padding: 10px 12px;
   width: 300px;
-  background-color: #ffffff;
-  border: 1px solid #000000;
+  background-color: var(--color-surfaceContainerLowest);
+  border: 1px solid var(--color-onSurface);
   border-radius: 8px;
-  color: #000000;
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0.4px;
+  color: var(--color-onSurface);
 }
 
 .dropdownToggle:hover {
-  background-color: #f5f5f5;
-  color: #61646b;
+  background-color: var(--color-surfaceBright);
+  color: var(--color-onSurfaceVariant);
 }
 
 .dropdownToggle.opened {
@@ -31,15 +31,13 @@
   border-radius: 0 0 8px 8px;
   padding: 0;
   margin: 0;
-  border: 1px solid #000000;
+  border: 1px solid var(--color-onSurface);
 }
 
 .dropdownItem {
   padding: 8px 12px;
   cursor: pointer;
-  background-color: #ffffff;
-  color: #000000;
-  font-family: "Work Sans", sans-serif;
+  background-color: var(--color-surfaceContainerLowest);
   font-weight: 500;
   font-size: 14px;
   line-height: 20px;
@@ -48,8 +46,8 @@
 }
 
 .dropdownItem:hover {
-  background-color: #dfe2eb;
-  color: #61646b;
+  background-color: var(--color-surfaceBright);
+  color: var(--color-onSurfaceVariant);
 }
 
 .dropdownList .dropdownItem:last-child {

diff --git a/src/components/common/Dropdown/Dropdown.tsx b/src/components/common/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, Menu } from "@mantine/core";
+import { Button, Menu, MenuTarget, MenuDropdown, MenuItem } from "@mantine/core";
 import classes from "./Dropdown.module.css";
 
 interface DropdownProps {
@@ -18,7 +18,7 @@ export function Dropdown({ options, placeholder }: DropdownProps) {
 
   return (
     <Menu offset={0} opened={opened} onChange={setOpened}>
-      <Menu.Target>
+      <MenuTarget>
         <Button
           justify="space-between"
           className={`${classes.dropdownToggle} ${opened ? classes.opened : ""}`}
@@ -27,6 +27,7 @@ export function Dropdown({ options, placeholder }: DropdownProps) {
           rightSection={
             <span className={classes.toggleIcon}>
               {opened ? (
+                /* opened dropdown = Lets Icons v1.0 Single Arrow Arrow_drop_up */
                 <svg
                   width="24"
                   height="24"
@@ -40,6 +41,7 @@ export function Dropdown({ options, placeholder }: DropdownProps) {
                   />
                 </svg>
               ) : (
+                /* closed dropdown = Lets Icons v1.0 Single Arrow Arrow_drop_down */
                 <svg
                   width="24"
                   height="24"
@@ -56,18 +58,18 @@ export function Dropdown({ options, placeholder }: DropdownProps) {
             </span>
           }
         ></Button>
-      </Menu.Target>
-      <Menu.Dropdown className={classes.dropdownList}>
+      </MenuTarget>
+      <MenuDropdown className={classes.dropdownList}>
         {options.map((option) => (
-          <Menu.Item
+          <MenuItem
             key={option}
             className={classes.dropdownItem}
             onClick={() => handleOptionClick(option)}
           >
             {option}
-          </Menu.Item>
+          </MenuItem>
         ))}
-      </Menu.Dropdown>
+      </MenuDropdown>
     </Menu>
   );
 }