refactor: ref 제거 및 css으로 툴팁 구현한다 (#580)

[#578]
woowacourse-teams · Aug 17, 2023 · ae694ac · ae694ac
1 parent db33df9
commit ae694ac
Show file tree

Hide file tree

Showing 5 changed files with 8,855 additions and 9,029 deletions.
diff --git a/frontend/src/components/ui/compound/NavigationBar/Menu.tsx b/frontend/src/components/ui/compound/NavigationBar/Menu.tsx
@@ -97,7 +97,7 @@ const Menu = () => {
         <AdjustmentsHorizontalIcon width="2.8rem" stroke="#333" />
       </Button>
       {memberToken !== '' ? (
-        <PopupMenu trigger={<UserCircleIcon width="2.8rem" stroke="#333" />} menus={loginMenus} />
+        <PopupMenu menus={loginMenus} />
       ) : (
         <Button aria-label="로그인 하기" onClick={handleClickLoginIcon}>
           <UserCircleIcon width="2.8rem" stroke="#333" />

diff --git a/frontend/src/components/ui/compound/PopupMenu/Menus.tsx b/frontend/src/components/ui/compound/PopupMenu/Menus.tsx
@@ -48,6 +48,13 @@ const StartingPointBox = styled.div`
   background-color: #fff;
 
   transform: rotate(45deg);
+
+  @media screen and (max-width: 414px) {
+    top: auto;
+    bottom: -10px;
+    left: auto;
+    transform: rotate(-45deg);
+  }
 `;
 
 const containerCss = css`

diff --git a/frontend/src/components/ui/compound/PopupMenu/index.tsx b/frontend/src/components/ui/compound/PopupMenu/index.tsx
@@ -1,22 +1,19 @@
+import { UserCircleIcon } from '@heroicons/react/24/outline';
 import { css } from 'styled-components';
 
-import type { PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useRef, useState } from 'react';
+import type { PropsWithChildren } from 'react';
+import { useState } from 'react';
 
-import Box from '@common/Box';
 import FlexBox from '@common/FlexBox';
 
 import Menus from './Menus';
 
 interface Props {
-  trigger: ReactNode;
   menus: PropsWithChildren<{ onClick: () => void }>[];
 }
 
-const PopupMenu = ({ trigger, menus }: Props) => {
-  const triggerRef = useRef<HTMLButtonElement>(null);
+const PopupMenu = ({ menus }: Props) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [triggerWidth, setTriggerWidth] = useState(0);
 
   const handleToggleMenu = () => {
     setIsOpen((prev) => !prev);
@@ -26,33 +23,30 @@ const PopupMenu = ({ trigger, menus }: Props) => {
     setIsOpen(false);
   };
 
-  useEffect(() => {
-    if (triggerRef.current) setTriggerWidth(triggerRef.current.offsetWidth);
-  }, []);
-
   return (
     <FlexBox css={container}>
-      <button ref={triggerRef} onClick={handleToggleMenu}>
-        {trigger}
+      {isOpen && <Menus menus={menus} closeMenu={handleCloseMenu} />}
+      <button onClick={handleToggleMenu}>
+        <UserCircleIcon width="2.8rem" stroke="#333" />
       </button>
-      <Box css={getMenuContainerCss(triggerWidth)}>
-        {isOpen && <Menus menus={menus} closeMenu={handleCloseMenu} />}
-      </Box>
     </FlexBox>
   );
 };
 
 const container = css`
   position: relative;
-`;
+  display: inline-block;
 
-const getMenuContainerCss = (triggerWidth: number) => {
-  return css`
+  & > ul:first-child {
+    left: calc(100% + 20px);
     position: absolute;
+    top: -18px;
 
-    top: -2rem;
-    left: calc(${triggerWidth}px + 2rem);
-  `;
-};
+    @media screen and (max-width: 414px) {
+      top: -134px;
+      left: -43px;
+    }
+  }
+`;
 
 export default PopupMenu;
diff --git a/frontend/src/components/ui/modal/LoginModal/LoginModal.tsx b/frontend/src/components/ui/modal/LoginModal/LoginModal.tsx
@@ -36,7 +36,7 @@ const LoginModal = () => {
 };
 
 const containerCss = css`
-  padding: 4.8rem 5rem 6.4rem;
+  padding: 4.6rem 4.8rem 6.4rem;
 `;
 
 const GoogleLogin = styled.button`