diff --git a/frontend/src/components/KebabMenu/KebabMenu.style.ts b/frontend/src/components/KebabMenu/KebabMenu.style.ts index 7cb698f5..28a8eddf 100644 --- a/frontend/src/components/KebabMenu/KebabMenu.style.ts +++ b/frontend/src/components/KebabMenu/KebabMenu.style.ts @@ -12,9 +12,18 @@ export const kebabContainer = (props: { theme: Theme }) => css` border-bottom: 1px; } `; + +export const kebabItem = (props: { theme: Theme }) => css` + white-space: nowrap; + background: ${props.theme.colorPalette.white[100]}; + ${props.theme.typography.ButtonFont} + border: none; + border-bottom: 1px; +`; + export const optionBox = (props: { theme: Theme }) => css` position: absolute; - top: 100%; + top: 5rem; right: 0; display: flex; diff --git a/frontend/src/components/KebabMenu/KebabMenu.tsx b/frontend/src/components/KebabMenu/KebabMenu.tsx index 2df2bfbe..06382f4a 100644 --- a/frontend/src/components/KebabMenu/KebabMenu.tsx +++ b/frontend/src/components/KebabMenu/KebabMenu.tsx @@ -1,9 +1,8 @@ import * as S from '@_components/KebabMenu/KebabMenu.style'; - import { FocusEvent, useRef, useState } from 'react'; - import KebabButton from '@_common/assets/kebab_menu.svg'; import { useTheme } from '@emotion/react'; +import { createPortal } from 'react-dom'; // createPortal 추가 type Option = { name: string; disabled: boolean; onClick: () => void }; export interface KebabMenuProps { @@ -35,6 +34,22 @@ export default function KebabMenu(props: KebabMenuProps) { onClick(); }; + const kebabMenu = isKebabOpen ? ( +