fix-fe: popOverMenu width 수정 (#406)

Co-authored-by: Jeongwoo Park <[email protected]>
woowacourse-teams · Aug 23, 2024 · 5395b98 · 5395b98
1 parent 802f932
commit 5395b98
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/frontend/src/components/common/DropdownItem/style.ts b/frontend/src/components/common/DropdownItem/style.ts
@@ -13,6 +13,10 @@ const Item = styled.button<{ isHighlight: boolean; size: 'sm' | 'md' }>`
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
   &:hover {
     background-color: ${({ isHighlight, theme }) =>
       isHighlight ? theme.baseColors.redscale[300] : theme.baseColors.grayscale[300]};

diff --git a/frontend/src/components/common/PopOverMenu/index.tsx b/frontend/src/components/common/PopOverMenu/index.tsx
@@ -18,20 +18,22 @@ export default function PopOverMenu({ isOpen, setClose, size = 'sm', popOverPosi
       popOverPosition={popOverPosition}
     >
       {isOpen && (
-        <S.List size={size}>
-          {items.map(({ name, isHighlight, id, onClick }) => (
-            <DropdownItem
-              size={size}
-              onClick={() => {
-                setClose();
-                onClick({ targetProcessId: id });
-              }}
-              key={id}
-              item={name}
-              isHighlight={isHighlight}
-            />
-          ))}
-        </S.List>
+        <S.ListWrapper>
+          <S.List size={size}>
+            {items.map(({ name, isHighlight, id, onClick }) => (
+              <DropdownItem
+                size={size}
+                onClick={() => {
+                  setClose();
+                  onClick({ targetProcessId: id });
+                }}
+                key={id}
+                item={name}
+                isHighlight={isHighlight}
+              />
+            ))}
+          </S.List>
+        </S.ListWrapper>
       )}
     </S.Container>
   );

diff --git a/frontend/src/components/common/PopOverMenu/style.ts b/frontend/src/components/common/PopOverMenu/style.ts
@@ -4,10 +4,12 @@ interface ContainerProps {
   size: 'sm' | 'md';
   isOpen: boolean;
   popOverPosition?: string;
+  right?: number;
 }
 
 const Container = styled.div<ContainerProps>`
-  min-width: ${({ size }) => (size === 'sm' ? '90px' : '240px')};
+  width: ${({ size }) => (size === 'sm' ? '120px' : '240px')};
+
   position: absolute;
   inset: ${({ popOverPosition }) => popOverPosition ?? 'inherit'};
 
@@ -19,6 +21,10 @@ const Container = styled.div<ContainerProps>`
   z-index: 1;
 `;
 
+const ListWrapper = styled.div`
+  padding: 0 0.8rem 0.8rem;
+`;
+
 const List = styled.div<{ size: 'sm' | 'md' }>`
   width: 100%;
   padding: ${({ size }) => (size === 'md' ? '16px' : '8px')};
@@ -33,6 +39,7 @@ const List = styled.div<{ size: 'sm' | 'md' }>`
 
 const S = {
   Container,
+  ListWrapper,
   List,
 };
 

diff --git a/frontend/src/components/dashboard/ApplicantCard/index.tsx b/frontend/src/components/dashboard/ApplicantCard/index.tsx
@@ -31,6 +31,10 @@ export default function ApplicantCard({ name, createdAt, popOverMenuItems, onCar
     }
   };
 
+  const handleMouseLeave = () => {
+    setIsPopOverOpen(false);
+  };
+
   useEffect(() => {
     if (isPopOverOpen) {
       document.addEventListener('mousedown', handleClickOutside);
@@ -47,7 +51,10 @@ export default function ApplicantCard({ name, createdAt, popOverMenuItems, onCar
   };
 
   return (
-    <S.CardContainer onClick={cardClickHandler}>
+    <S.CardContainer
+      onMouseLeave={handleMouseLeave}
+      onClick={cardClickHandler}
+    >
       <S.CardDetail>
         <S.CardHeader>{name}</S.CardHeader>
         <S.CardDate>{`지원 일자: ${formatDate(createdAt)}`}</S.CardDate>