From 5395b981abc66df0566f73c6a02f915dcffa2a42 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:22:17 +0900
Subject: [PATCH] =?UTF-8?q?fix-fe:=20popOverMenu=20width=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20(#406)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jeongwoo Park <121204715+lurgi@users.noreply.github.com>
---
 .../components/common/DropdownItem/style.ts   |  4 +++
 .../components/common/PopOverMenu/index.tsx   | 30 ++++++++++---------
 .../components/common/PopOverMenu/style.ts    |  9 +++++-
 .../dashboard/ApplicantCard/index.tsx         |  9 +++++-
 4 files changed, 36 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/common/DropdownItem/style.ts b/frontend/src/components/common/DropdownItem/style.ts
index 8f483a1d1..4dbd7037a 100644
--- 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
index 47612a1a3..1ddb55fa8 100644
--- 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
index 3c6d121c2..54ee1526f 100644
--- 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
index 041c4bc75..30c3ed833 100644
--- 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>