diff --git a/src/test/common/DropdownMenu.test.tsx b/src/test/common/DropdownMenu.test.tsx
new file mode 100644
index 0000000..8a0a900
--- /dev/null
+++ b/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(menu);
+ expect(() => wrapper.unmount()).not.toThrow();
+ });
+
+ test('should contain a button', () => {
+ const { getByRole } = render(
+ menu,
+ );
+
+ const menuButton = getByRole('button', { name: /menu/i });
+ expect(menuButton).not.toBeNull();
+ });
+
+ test('should open the menu when button is clicked', async () => {
+ const { getByRole } = render(
+ menu,
+ );
+
+ 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(
+ menu,
+ );
+
+ 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(
+ menu,
+ );
+
+ 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 스타일 확인
+ });
+});
diff --git a/src/ui/trip/TripInfo.tsx b/src/ui/trip/TripInfo.tsx
index 8db6bab..33a87ad 100644
--- a/src/ui/trip/TripInfo.tsx
+++ b/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) {
{dDay}
-