Merge pull request #269 from boostcampwm-2024/feature-fe-#268

Popover 컴포넌트에 align 옵션 추가

Author: yewonJin

apps/frontend/src/components/commons/popover/Content.tsx

@@ -9,7 +9,7 @@ interface ContentProps {
 }
 
 export function Content({ children, className }: ContentProps) {
-  const { open, setOpen, triggerRef, placement, offset } = usePopover();
+  const { open, setOpen, triggerRef, placement, offset, align } = usePopover();
   const contentRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState({ top: 0, left: 0 });
 
@@ -22,10 +22,11 @@ export function Content({ children, className }: ContentProps) {
         contentRect,
         placement,
         offset,
+        align,
       );
       setPosition(newPosition);
     }
-  }, [open, placement, offset, triggerRef]);
+  }, [open, placement, offset, align, triggerRef]);
 
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {

apps/frontend/src/components/commons/popover/index.tsx

@@ -1,17 +1,24 @@
 import { useRef, useState } from "react";
 import { Content } from "./Content";
 import { Trigger } from "./Trigger";
-import { PopoverContext, Placement, Offset } from "@/hooks/usePopover";
+import {
+  PopoverContext,
+  Placement,
+  Offset,
+  Alignment,
+} from "@/hooks/usePopover";
 
 interface PopoverProps {
   children: React.ReactNode;
   placement?: Placement;
   offset?: Partial<Offset>;
+  align?: Alignment;
 }
 
 function Popover({
   children,
   placement = "bottom",
+  align = "center",
   offset = { x: 0, y: 0 },
 }: PopoverProps) {
   const [open, setOpen] = useState(false);
@@ -30,6 +37,7 @@ function Popover({
         triggerRef,
         placement,
         offset: fullOffset,
+        align,
       }}
     >
       {children}

apps/frontend/src/hooks/usePopover.ts

@@ -1,6 +1,7 @@
 import { createContext, useContext } from "react";
 
 export type Placement = "top" | "right" | "bottom" | "left";
+export type Alignment = "start" | "center" | "end";
 
 export interface Offset {
   x: number;
@@ -13,6 +14,7 @@ export interface PopoverContextType {
   triggerRef: React.RefObject<HTMLDivElement>;
   placement: Placement;
   offset: Offset;
+  align: Alignment;
 }
 
 export const PopoverContext = createContext<PopoverContextType | null>(null);

apps/frontend/src/lib/getPopoverPosition.ts

@@ -1,4 +1,4 @@
-import { Placement, Offset } from "@/hooks/usePopover";
+import { Placement, Offset, Alignment } from "@/hooks/usePopover";
 
 export interface Position {
   top: number;
@@ -9,45 +9,75 @@ interface PositionConfig {
   triggerRect: DOMRect;
   contentRect: DOMRect;
   offset: Offset;
+  align: Alignment;
 }
 
+const alignmentMap: Record<
+  Alignment,
+  (triggerSize: number, contentSize: number) => number
+> = {
+  start: () => 0,
+  center: (triggerSize, contentSize) => (triggerSize - contentSize) / 2,
+  end: (triggerSize, contentSize) => triggerSize - contentSize,
+};
+
+const getAlignment = (
+  triggerSize: number,
+  contentSize: number,
+  align: Alignment,
+): number => {
+  return alignmentMap[align](triggerSize, contentSize);
+};
+
 const getTopPosition = ({
   triggerRect,
   contentRect,
   offset,
+  align,
 }: PositionConfig): Position => ({
   top: triggerRect.top - contentRect.height - offset.y,
   left:
-    triggerRect.left + (triggerRect.width - contentRect.width) / 2 + offset.x,
+    triggerRect.left +
+    getAlignment(triggerRect.width, contentRect.width, align) +
+    offset.x,
 });
 
 const getRightPosition = ({
   triggerRect,
   contentRect,
   offset,
+  align,
 }: PositionConfig): Position => ({
   top:
-    triggerRect.top + (triggerRect.height - contentRect.height) / 2 + offset.y,
+    triggerRect.top +
+    getAlignment(triggerRect.height, contentRect.height, align) +
+    offset.y,
   left: triggerRect.right + offset.x,
 });
 
 const getBottomPosition = ({
   triggerRect,
   contentRect,
   offset,
+  align,
 }: PositionConfig): Position => ({
   top: triggerRect.bottom + offset.y,
   left:
-    triggerRect.left + (triggerRect.width - contentRect.width) / 2 + offset.x,
+    triggerRect.left +
+    getAlignment(triggerRect.width, contentRect.width, align) +
+    offset.x,
 });
 
 const getLeftPosition = ({
   triggerRect,
   contentRect,
   offset,
+  align,
 }: PositionConfig): Position => ({
   top:
-    triggerRect.top + (triggerRect.height - contentRect.height) / 2 + offset.y,
+    triggerRect.top +
+    getAlignment(triggerRect.height, contentRect.height, align) +
+    offset.y,
   left: triggerRect.left - contentRect.width - offset.x,
 });
 
@@ -63,7 +93,8 @@ export function getPosition(
   contentRect: DOMRect,
   placement: Placement,
   offset: Offset,
+  align: Alignment,
 ): Position {
-  const config = { triggerRect, contentRect, offset };
+  const config = { triggerRect, contentRect, offset, align };
   return positionMap[placement](config);
 }