[#187] 여행 정보 드롭다운 메뉴 에러 해결 및 테스트

src/test/common/DropdownMenu.test.tsx

@@ -0,0 +1,70 @@
+import { render, waitFor, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import DropdownMenu from '@ui/common/DropdownMenu';
+import userEvent from '@testing-library/user-event';
+
+describe('DropdownMenu Component', () => {
+  const onMenuClick = jest.fn();
+  const items = [
+    { label: 'option1', onClick: onMenuClick },
+    { label: 'option2', onClick: onMenuClick, disabled: true },
+  ];
+
+  test('should render correctly', () => {
+    const wrapper = render(<DropdownMenu items={items}>menu</DropdownMenu>);
+    expect(() => wrapper.unmount()).not.toThrow();
+  });
+
+  test('should contain a button', () => {
+    const { getByRole } = render(
+      <DropdownMenu items={items}>menu</DropdownMenu>,
+    );
+
+    const menuButton = getByRole('button', { name: /menu/i });
+    expect(menuButton).not.toBeNull();
+  });
+
+  test('should open the menu when button is clicked', async () => {
+    const { getByRole } = render(
+      <DropdownMenu items={items}>menu</DropdownMenu>,
+    );
+
+    const menuButton = getByRole('button', { name: /menu/i });
+    expect(menuButton).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByText(/option1/i)).toBeNull();
+
+    await userEvent.click(menuButton);
+
+    await waitFor(() => {
+      expect(menuButton).toHaveAttribute('aria-expanded', 'true');
+      expect(screen.getByText(/option1/i)).toBeInTheDocument();
+      expect(screen.getByText(/option2/i)).toBeInTheDocument();
+    });
+  });
+
+  test('should call onClick event when menu item is clicked', async () => {
+    const { getByRole } = render(
+      <DropdownMenu items={items}>menu</DropdownMenu>,
+    );
+
+    const menuButton = getByRole('button', { name: /menu/i });
+    await userEvent.click(menuButton);
+
+    const option1 = await screen.findByText('option1');
+    fireEvent.click(option1);
+
+    expect(onMenuClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should have aria-disabled attribute for disabled menu item', async () => {
+    const { getByRole } = render(
+      <DropdownMenu items={items}>menu</DropdownMenu>,
+    );
+
+    const menuButton = getByRole('button', { name: /menu/i });
+    await userEvent.click(menuButton);
+
+    const disabledItem = await screen.findByText('option2');
+    expect(disabledItem).toHaveAttribute('aria-disabled', 'true'); // Radix UI 스타일 확인
+  });
+});

src/ui/trip/TripInfo.tsx

@@ -106,7 +106,7 @@ export default function TripInfo({ id }: TTripInfoProps) {
         } as React.CSSProperties
       }
       className={twMerge(
-        'section-box relative min-h-[136px] overflow-hidden bg-cover bg-center bg-no-repeat',
+        'section-box relative flex min-h-[136px] flex-row justify-between overflow-hidden bg-cover bg-center bg-no-repeat',
         // 'before:to--[#888888]/30 before:absolute before:inset-0 before:bg-gradient-to-r before:from-black before:opacity-50 before:content-[""]',
         // 'bg-[image:var(--bg-img)]',
         // backgroundImage && 'bg-[image:var(--bg-img)]',
@@ -118,7 +118,7 @@ export default function TripInfo({ id }: TTripInfoProps) {
         </h3>
         <div className="text-[2rem] font-black leading-none">{dDay}</div>
       </div>
-      <div className="absolute right-4 top-4">
+      <div>
         <DropdownMenu
           items={[
             { label: '공유하기', onClick: handleCopyInviteLink },
@@ -130,7 +130,6 @@ export default function TripInfo({ id }: TTripInfoProps) {
                 ]
               : []),
           ]}
-          className="bg-transparent font-black"
         >
           <Image
             src="/asset/icon/kebab.png"