diff --git a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx index 8039903b..8abd06d5 100644 --- a/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx +++ b/src/app/(crew)/crew/detail/[id]/_components/gathering-detail-modal/presenter.tsx @@ -6,7 +6,7 @@ import Button from '@/src/components/common/input/button'; import { Profile } from '@/src/components/common/profile'; import { GatheringDetailType } from '@/src/types/gathering-data'; import IcoClock from '@/public/assets/icons/ic-clock.svg'; -import IcoUser from '@/public/assets/icons/ic-user.svg'; +import IcoPerson from '@/public/assets/icons/ic-gathering-person.svg'; export interface GatheringDetailModalProps { opened: boolean; @@ -60,44 +60,31 @@ export default function GatheringDetailModalPresenter({
-
-

- {data?.title} -

- -

- - {data?.location} -

-
-

- - {formatDate(data?.dateTime).date} - - +

+

+ {`${formatDate(data?.dateTime).date} ${formatDate(data?.dateTime).dayOfWeek}`} +

+
+

{formatDate(data?.dateTime).time} - -

-

{data?.introduce}

+

+
+

{data?.title}

+

{data?.location}

+
+

약속 공지사항

+
+ {data?.introduce || '소개 정보가 없습니다.'} +
+
-

-
- 아이콘 -
- - 참여인원 {data?.currentCount}/{data?.totalCount} - +

+ person icon +

+ 참여인원 {data?.currentCount}/ + {data?.totalCount} +

    @@ -135,7 +122,7 @@ export default function GatheringDetailModalPresenter({ onClick={onExit} className="btn-filled h-11 w-29.5 text-base font-medium" > - 탈퇴하기 + 약속 취소하기 )} {data?.gatheringCaptain && ( @@ -144,7 +131,7 @@ export default function GatheringDetailModalPresenter({ onClick={onDelete} className="btn-filled h-11 w-29.5 text-base font-medium" > - 삭제하기 + 약속 삭제하기 )} diff --git a/src/app/(crew)/my-crew/layout.tsx b/src/app/(crew)/my-crew/layout.tsx index 0a3f593c..52a45a81 100644 --- a/src/app/(crew)/my-crew/layout.tsx +++ b/src/app/(crew)/my-crew/layout.tsx @@ -24,18 +24,18 @@ export default function MyCrewLayout({ children }: { children: ReactNode }) { }, [currentPath]); return ( -
    -
    - { - handleTabClick(id); - }} - /> -
    -
    {children}
    +
    +
    나의 크루
    + { + handleTabClick(id); + }} + /> +
    +
    {children}
    ); } 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 */} -
    +
    {title}
    - - {/* Content Section */} -
    -
    -

    - {title} -

    -
    - - {date} - - - {time} - +
    +
    +
    +

    {`${date} ${dayOfWeek}`}

    +
    +

    {time}

    +
    +

    {title}

    +

    {location}

    +
    +
    +
    + person icon +

    + 참여인원 {currentCount}/{totalCount} +

    +
    -

    - person icon - 참여인원 {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 ( -
    +