Merge pull request #757 from woowacourse-teams/fix/#753

z-index 문제로 프로필 이미지가 보이지 않는 문제 수정
woowacourse-teams · Oct 24, 2024 · d45db9c · d45db9c
2 parents 703498b + ada98a0
commit d45db9c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git 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
@@ -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 ? (
+    <div ref={optionsRef} css={S.optionBox({ theme })}>
+      {options.map((option) => (
+        <button
+          css={S.kebabItem({ theme })}
+          aria-label={option.name}
+          key={option.name}
+          onClick={() => handleOptionClick(option.onClick)}
+          disabled={option.disabled}
+        >
+          {option.name}
+        </button>
+      ))}
+    </div>
+  ) : null;
+
   return (
     <div css={S.kebabContainer({ theme })}>
       <button
@@ -45,22 +60,7 @@ export default function KebabMenu(props: KebabMenuProps) {
       >
         <KebabButton />
       </button>
-      {isKebabOpen && (
-        <div ref={optionsRef} css={S.optionBox({ theme })}>
-          {options.map((option) => {
-            return (
-              <button
-                aria-label={option.name}
-                key={option.name}
-                onClick={() => handleOptionClick(option.onClick)}
-                disabled={option.disabled}
-              >
-                {option.name}
-              </button>
-            );
-          })}
-        </div>
-      )}
+      {createPortal(kebabMenu, document.body)} {/* createPortal 사용 */}
     </div>
   );
 }
diff --git 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;
   `;
 };