[refactor] 드롭다운 클릭 시 이벤트 전파 방지 (#220)

morib-in · Dec 27, 2024 · e0aa5ee · e0aa5ee
1 parent 4a2b8a9
commit e0aa5ee
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/src/pages/MoribSetPage/components/CategoryMoribSet.tsx b/src/pages/MoribSetPage/components/CategoryMoribSet.tsx
@@ -23,13 +23,13 @@ const CategoryMoribSet = ({
 	const maxIconsToShow = 5;
 
 	return (
-		<div className="ml-[4.2rem] h-[99.6rem] w-[40.2rem] flex-shrink-0 rounded-[1.6rem] bg-gray-bg-03">
+		<div className="relative z-0 ml-[4.2rem] h-[99.6rem] w-[40.2rem] flex-shrink-0 overflow-x-hidden overflow-y-scroll rounded-[1.6rem] bg-gray-bg-03">
 			<div className="mb-[2.4rem] mt-[2.2rem] flex items-center justify-between px-[2.8rem]">
 				<h1 className="head-bold-24 text-white">내 모립세트</h1>
 				<IconPlus className="cursor-pointer" onClick={addMoribSet} />
 			</div>
 
-			<div className="mx-[1.8rem] gap-[10px]">
+			<div className="mx-[1.8rem] gap-[1rem]">
 				{moribSets.map((moribSet) => {
 					const additionalIconsCount =
 						moribSet.urlList.length > maxIconsToShow ? moribSet.urlList.length - maxIconsToShow : 0;
@@ -41,11 +41,8 @@ const CategoryMoribSet = ({
 							onClick={() => setActiveMoribSetId(moribSet.id)}
 						>
 							<div className="flex content-between items-center self-stretch">
-								<div className="flex w-[30.8rem] items-center gap-[6px]">
-									<div
-										className="h-[1.4rem] w-[1.4rem] rounded-[70px]"
-										style={{ backgroundColor: moribSet.selectedColor }}
-									/>
+								<div className="flex w-[30.8rem] items-center gap-[0.6rem]">
+									<div className={`h-[1.4rem] w-[1.4rem] rounded-[70px] ${moribSet.selectedColor}`} />
 									<h2
 										className={`body-semibold-16 w-[28.8rem] truncate ${moribSet.moribSetName ? 'text-white' : 'text-gray-03'}`}
 									>
@@ -54,19 +51,22 @@ const CategoryMoribSet = ({
 								</div>
 
 								<Dropdown.Root>
-									<Dropdown.Trigger>
-										<IconMeatBall className="cursor-pointer" />
+									<Dropdown.Trigger preventPropagation={true}>
+										<IconMeatBall className="cursor-pointer hover:rounded-full hover:bg-gray-bg-05" />
 									</Dropdown.Trigger>
-									<Dropdown.Content
-										boxShadow="shadow-none"
-										className="top-[26px] w-[12.4rem] overflow-x-hidden overflow-y-hidden"
-									>
-										<Dropdown.Item label="할 일 삭제" textColor="red" onClick={() => deleteMoribSet(moribSet.id)} />
+									<Dropdown.Content boxShadow="shadow-none" className="top-[26px] z-[50] w-[12.4rem] overflow-x-hidden">
+										<Dropdown.Item
+											label="할 일 삭제"
+											textColor="red"
+											onClick={() => {
+												deleteMoribSet(moribSet.id);
+											}}
+										/>
 									</Dropdown.Content>
 								</Dropdown.Root>
 							</div>
 
-							<div className="mt-[0.4rem] flex items-center gap-[6px]">
+							<div className="mt-[0.4rem] flex items-center gap-[0.6rem]">
 								{moribSet.urlList.slice(0, maxIconsToShow).map(({ faviconUrl }, url) => (
 									<img key={url} src={faviconUrl} alt="`favicon" className="h-[2rem] w-[2rem] rounded-full" />
 								))}

diff --git a/src/shared/components/Dropdown.tsx b/src/shared/components/Dropdown.tsx
@@ -50,13 +50,22 @@ const DropdownRoot = ({ children }: DropdownRootProps) => {
 // Dropdown의 메뉴를 trigger 하는 컴포넌트
 interface DropdownTriggerProps {
 	children: ReactNode;
+	preventPropagation?: boolean;
 }
 
-const DropdownTrigger = ({ children }: DropdownTriggerProps) => {
+const DropdownTrigger = ({ children, preventPropagation }: DropdownTriggerProps) => {
 	const { handleToggleOpen } = useDropdownContext();
 
 	return (
-		<button onClick={handleToggleOpen} className="relative">
+		<button
+			onClick={(e) => {
+				if (preventPropagation) {
+					e.stopPropagation();
+				}
+				handleToggleOpen();
+			}}
+			className="relative"
+		>
 			{children}
 		</button>
 	);