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 ? ( +
+ {options.map((option) => ( + + ))} +
+ ) : null; + return (
- {isKebabOpen && ( -
- {options.map((option) => { - return ( - - ); - })} -
- )} + {createPortal(kebabMenu, document.body)} {/* createPortal 사용 */}
); } diff --git a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts index aa9bd387..6cf8948b 100644 --- a/frontend/src/components/ProfileFrame/ProfileFrame.style.ts +++ b/frontend/src/components/ProfileFrame/ProfileFrame.style.ts @@ -5,7 +5,6 @@ type Size = number; export const profileBox = () => { return css` position: relative; - z-index: -1; `; };