);
}
diff --git a/src/app/(crew)/my-favorite/page.tsx b/src/app/(crew)/my-favorite/page.tsx
index 4bebe141..2c617400 100644
--- a/src/app/(crew)/my-favorite/page.tsx
+++ b/src/app/(crew)/my-favorite/page.tsx
@@ -2,7 +2,9 @@ import LikedList from '@/src/components/gathering-list/liked-list-container';
export default function FavoritePage() {
return (
-
+
);
diff --git a/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx b/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
index d85fa36a..cbbdde5d 100644
--- a/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
+++ b/src/app/(crew)/my-gathering/_component/gathering-list-with-date.tsx
@@ -1,7 +1,7 @@
'use client';
import { useMemo } from 'react';
-import { formatDate, getDayOfWeek } from '@/src/utils/format-date';
+import { formatDate } from '@/src/utils/format-date';
import ScheduledGatheringCard from '@/src/components/common/gathering-card/scheduled-gathering-card/container';
import { GatheringCardProps } from '@/src/types/gathering-data';
@@ -28,7 +28,7 @@ export default function GatheringListWithDate({ gatheringList }: GatheringListWi
{formatDate(gathering.dateTime).date}
- {getDayOfWeek(gathering.dateTime)}
+ {formatDate(gathering.dateTime).dayOfWeek}
)}
diff --git a/src/app/(crew)/my-gathering/layout.tsx b/src/app/(crew)/my-gathering/layout.tsx
index 19e7f034..efc478bc 100644
--- a/src/app/(crew)/my-gathering/layout.tsx
+++ b/src/app/(crew)/my-gathering/layout.tsx
@@ -5,8 +5,8 @@ import { usePathname, useRouter } from 'next/navigation';
import Tabs from '@/src/components/common/tab';
const myGatheringTabs = [
- { id: 'my-gathering-joined', label: '참여한 약속', route: '/my-gathering/joined' },
- { id: 'my-gathering-hosted', label: '만든 약속', route: '/my-gathering/hosted' },
+ { id: 'my-gathering-joined', label: '내가 참여한 약속', route: '/my-gathering/joined' },
+ { id: 'my-gathering-hosted', label: '내가 만든 약속', route: '/my-gathering/hosted' },
];
export default function MyGatheringLayout({
@@ -29,13 +29,15 @@ export default function MyGatheringLayout({
};
return (
-
+
+
나의 약속
handleTabClick(id)}
/>
+
{children}
);
diff --git a/src/app/(crew)/my-page/_components/review-tabs.tsx b/src/app/(crew)/my-page/_components/review-tabs.tsx
index 0fcbb3f8..c1b63f3d 100644
--- a/src/app/(crew)/my-page/_components/review-tabs.tsx
+++ b/src/app/(crew)/my-page/_components/review-tabs.tsx
@@ -50,14 +50,7 @@ export default function ReviewTabs() {
);
}
diff --git a/src/components/common/gathering-card/presenter.tsx b/src/components/common/gathering-card/presenter.tsx
index 40b315e3..70172e0c 100644
--- a/src/components/common/gathering-card/presenter.tsx
+++ b/src/components/common/gathering-card/presenter.tsx
@@ -41,7 +41,7 @@ export default function GatheringCardPresenter({
deadlineMessage,
className,
}: GatheringCardPresenterProps) {
- const { date, time } = formatDate(dateTime);
+ const { date, dayOfWeek, time } = formatDate(dateTime);
const handleLikeClick = (e: MouseEvent) => {
e.stopPropagation();
@@ -77,7 +77,7 @@ export default function GatheringCardPresenter({
- {date}
+ {`${date} ${dayOfWeek}`}
diff --git a/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx b/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
index 522df903..6d22ffda 100644
--- a/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
+++ b/src/components/common/gathering-card/scheduled-gathering-card/presenter.tsx
@@ -1,22 +1,12 @@
import Image from 'next/image';
import { Badge } from '@mantine/core';
import { formatDate } from '@/src/utils/format-date';
-import LikeBtn from '@/src/components/common/input/button/like-btn';
-import IcoPerson from '@/public/assets/icons/person.svg';
+import { GatheringCardProps } from '@/src/types/gathering-data';
+import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg';
+import Button from '../../input/button';
interface ScheduledGatheringCardPresenterProps {
- data: {
- id: number;
- crewTitle: string;
- crewMainLocation: string;
- crewSubLocation: string;
- title: string;
- dateTime: string;
- currentCount: number;
- totalCount: number;
- imageUrl: string;
- liked: boolean;
- };
+ data: GatheringCardProps;
onClick: () => void;
}
@@ -24,75 +14,44 @@ export default function ScheduledGatheringCardPresenter({
data,
onClick,
}: ScheduledGatheringCardPresenterProps) {
- const {
- id,
- crewTitle,
- crewMainLocation,
- crewSubLocation,
- title,
- dateTime,
- currentCount,
- totalCount,
- imageUrl,
- liked,
- } = data;
+ const { crewTitle, title, dateTime, location, currentCount, totalCount, imageUrl } = data;
- const { date, time } = formatDate(dateTime);
+ const { date, dayOfWeek, time } = formatDate(dateTime);
return (
-
-
{crewTitle}
-
-
- {crewMainLocation} {crewSubLocation}
-
-
+
{crewTitle}
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
- {/* Image Section */}
-
+
-
- {/* Content Section */}
-
-
-
- {title}
-
-
-
- {date}
-
-
- {time}
-
+
+
+
+
{`${date} ${dayOfWeek}`}
+
+
{time}
+
+
{title}
+
{location}
+
+
+
+
+
+ 참여인원 {currentCount}/{totalCount}
+
+
-
-
- 참여인원 {currentCount}/{totalCount}
-
diff --git a/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx b/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx
index 2ebc5461..fcfcc214 100644
--- a/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx
+++ b/src/components/common/gathering-card/scheduled-gathering-card/scheduled-gathering.stories.tsx
@@ -37,6 +37,7 @@ export const LikedEvent: Story = {
crewSubLocation: '강남구 역삼동',
title: '가나다라마가나다라마가나다라마가',
dateTime: '2024-10-30T00:30',
+ location: '역삼역 1번출구',
currentCount: 8,
totalCount: 12,
imageUrl:
@@ -57,6 +58,7 @@ export const NotLikedEvent: Story = {
crewSubLocation: '용산구 한강로',
title: '등산 모임',
dateTime: '2024-11-12T09:00',
+ location: '한강진역 1번출구',
currentCount: 5,
totalCount: 10,
imageUrl:
diff --git a/src/components/common/tab/index.tsx b/src/components/common/tab/index.tsx
index 912798e7..60cb33e1 100644
--- a/src/components/common/tab/index.tsx
+++ b/src/components/common/tab/index.tsx
@@ -21,27 +21,11 @@ export interface TabsProps {
*/
export default function Tabs({ tabs, activeTab, onTabClick, variant = 'default' }: TabsProps) {
- const gap = 8;
- const tabCount = tabs.length;
- const buttonWidth = `calc((1200px - ${(tabCount - 1) * gap}px) / ${tabCount})`;
-
- // 기본 스타일
const baseStyle =
- variant === 'review'
- ? 'flex h-11 w-32 items-center justify-center text-center text-base font-medium'
- : 'px-4 py-2 font-bold sm:text-base md:text-lg lg:text-lg';
-
- // 활성화된 탭 스타일
- const activeStyle = variant === 'review' ? 'bg-black text-white' : 'bg-blue-500 text-white';
-
- // 비활성화된 탭 스타일
- const inactiveStyle =
- variant === 'review' ? 'bg-white text-black' : 'border border-blue-500 bg-white text-blue-500';
-
- const tabListStyle = variant === 'review' ? 'gap-2' : 'gap-4';
+ 'rounded-xl w-full border border-blue-500 px-4 py-2 font-bold sm:text-base md:w-max md:text-lg lg:text-lg ';
return (
-
+
{tabs.map((tab) => {
const isActive = activeTab === tab.id;
@@ -50,10 +34,9 @@ export default function Tabs({ tabs, activeTab, onTabClick, variant = 'default'
key={tab.id}
role="tab"
type="button"
- style={variant === 'default' ? { width: buttonWidth } : undefined}
aria-selected={isActive}
onClick={() => onTabClick(tab.id)}
- className={`rounded-xl ${baseStyle} ${isActive ? activeStyle : inactiveStyle}`}
+ className={`${baseStyle} ${isActive ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'}`}
>
{tab.label}
diff --git a/src/components/gathering-list/liked-list-presenter.tsx b/src/components/gathering-list/liked-list-presenter.tsx
index 0a643629..f3846327 100644
--- a/src/components/gathering-list/liked-list-presenter.tsx
+++ b/src/components/gathering-list/liked-list-presenter.tsx
@@ -21,7 +21,7 @@ export default function LikedListPresenter({
const { content, pageSize, totalPages } = gatheringData;
return (
-