+ setIsConfirmOpen(true)}
+ />
+
+
+ setIsConfirmOpen(false)}
+ onConfirm={() => {
+ setIsConfirmOpen(false);
+ cancel();
+ }}
+ open={isConfirmOpen}
+ title="신청을 취소할까요?"
+ tone="negative"
+ />
+
+ {
+ if (!open) {
+ closeToast();
+ }
+ }}
+ open={isToastOpen}
+ variant={toast.variant}
+ />
+
+ );
+}
+
+export default EventsApplicationDetailScreen;
diff --git a/src/features/events/EventsApplicationScreen.tsx b/src/features/events/EventsApplicationScreen.tsx
index 93c7815..5131d9d 100644
--- a/src/features/events/EventsApplicationScreen.tsx
+++ b/src/features/events/EventsApplicationScreen.tsx
@@ -12,12 +12,12 @@ import ScreenHeader from "@/components/ui/ScreenHeader";
import ScreenToast from "@/components/ui/ScreenToast";
import SubmittingOverlay from "@/components/ui/SubmittingOverlay";
import { useScreenHeader } from "@/components/ui/useScreenHeader";
+import type { EventsAnswer } from "@/entities/events/types";
import EventsQuestionField from "@/features/events/components/EventsQuestionField";
import EventsSummaryCard from "@/features/events/components/EventsSummaryCard";
import {
EVENTS_APPLICATION,
EVENTS_OTHER_OPTION_LABEL,
- type EventsAnswer,
} from "@/features/events/constants/eventsApplication";
import { submitEventsApplication } from "@/features/events/constants/eventsApplicationSubmit";
diff --git a/src/features/events/EventsListScreen.tsx b/src/features/events/EventsListScreen.tsx
index 3894b3e..8b5b50f 100644
--- a/src/features/events/EventsListScreen.tsx
+++ b/src/features/events/EventsListScreen.tsx
@@ -2,7 +2,6 @@ import {
SegmentedControl,
SegmentedControlItem,
TopNavigationButton,
- Typography,
} from "@wanteddev/wds";
import { IconBell, IconSearch } from "@wanteddev/wds-icon";
import { Suspense, useState } from "react";
@@ -11,16 +10,27 @@ import { useNavigate } from "react-router-dom";
import FilterChipGroup from "@/components/ui/FilterChipGroup";
import ScreenHeader from "@/components/ui/ScreenHeader";
import { useScreenHeader } from "@/components/ui/useScreenHeader";
+import { ARCHIVES_PATH } from "@/features/archives/constants/archives";
+import EventsApplicationList from "@/features/events/components/EventsApplicationList";
+import EventsApplicationListSkeleton from "@/features/events/components/EventsApplicationListSkeleton";
import EventsList from "@/features/events/components/EventsList";
import EventsListSkeleton from "@/features/events/components/EventsListSkeleton";
-import { EVENT_STATUS_FILTERS } from "@/features/events/constants/events";
+import {
+ EVENT_STATUS_FILTERS,
+ EVENTS_TAB_PATHS,
+ type EventsTab,
+} from "@/features/events/constants/events";
import { NOTIFICATIONS_PATH } from "@/features/notifications/constants/notifications";
import { getSearchPath } from "@/features/search/constants/search";
+interface EventsListScreenProps {
+ /** 행사/신청내역 탭 — 탭마다 경로가 달라서 라우터가 정해 넘긴다 */
+ tab: EventsTab;
+}
+
// Figma: 행사 (nodeId 1243:70854)
-function EventsListScreen() {
+function EventsListScreen({ tab }: EventsListScreenProps) {
const navigate = useNavigate();
- const [tab, setTab] = useState("event");
const [statusFilter, setStatusFilter] = useState("all");
useScreenHeader(
@@ -56,7 +66,14 @@ function EventsListScreen() {
Figma Tool 프레임(56~88)은 높이 32에 위아래 여백이 없다 — 세로 패딩을 주면
토글과 그 아래 필터 행이 함께 밀린다. */}
-
+
+ navigate(EVENTS_TAB_PATHS[value as EventsTab], { replace: true })
+ }
+ size="small"
+ value={tab}
+ >
행사
신청내역
@@ -64,23 +81,30 @@ function EventsListScreen() {
- {/* 필터는 고정하고 목록만 스크롤된다 */}
-
-
+ {/* 필터는 고정하고 목록만 스크롤된다. 신청내역 탭은 Figma(1133:46168)에 필터 행이 없다 */}
+ {tab === "event" && (
+
+
+ )}
- {/* 헤더·토글·필터는 데이터와 무관해서 바로 그리고, 데이터를 받는 목록 자리만 스켈레톤으로 채운다 */}
+ {/* 헤더·토글·필터는 데이터와 무관해서 바로 그리고, 데이터를 받는 목록 자리만 스켈레톤으로 채운다.
+ 탭 전환은 라우터 이동(transition)이라, 두 Suspense가 같은 자리의 같은 경계로 보이면 새 탭 데이터를
+ 받는 동안 이전 탭 화면을 붙잡아 탭이 멈춘 것처럼 보인다 — key로 탭마다 다른 경계로 둔다. */}
{tab === "event" ? (
-
navigate(`/events/${eventId}/apply`, { viewTransition: true })
}
+ onBrowseArchives={() =>
+ navigate(ARCHIVES_PATH, { viewTransition: true })
+ }
onSelect={(eventId) =>
navigate(`/events/${eventId}`, { viewTransition: true })
}
@@ -88,15 +112,25 @@ function EventsListScreen() {
/>
) : (
-
+ navigate(EVENTS_TAB_PATHS.event, { replace: true })
+ }
+ onSelectApplication={(applicationId) =>
+ navigate(`${EVENTS_TAB_PATHS.application}/${applicationId}`, {
+ viewTransition: true,
+ })
+ }
+ onSelectEvent={(eventId) =>
+ navigate(`/events/${eventId}`, { viewTransition: true })
+ }
+ />
+
)}
diff --git a/src/features/events/components/EventsApplicationCard.tsx b/src/features/events/components/EventsApplicationCard.tsx
new file mode 100644
index 0000000..0dbd708
--- /dev/null
+++ b/src/features/events/components/EventsApplicationCard.tsx
@@ -0,0 +1,93 @@
+import { Button, ContentBadge, Typography } from "@wanteddev/wds";
+
+import type { MyEventApplication } from "@/entities/events/types";
+import { EVENTS_APPLICATION_STATUS_BADGES } from "@/features/events/constants/events";
+import { formatDateTime } from "@/lib/date";
+
+interface EventsApplicationCardProps {
+ application: MyEventApplication;
+ onSelectEvent: () => void;
+ onSelectApplication: () => void;
+}
+
+// Figma: ApplicationHistory Card (nodeId 1133:46176, 신청취소 1133:46180) — Stream 로컬 카드.
+// 날짜 줄은 신청완료면 신청 일시, 신청취소면 취소 일시다.
+// 두 버튼은 WDS Button size="small"이 padding 7/14·radius 8·Label 2/Medium까지 Figma와 같다 —
+// `행사 상세`는 outlined, `신청 상세`는 solid(Fill/Normal 배경)이고 색은 둘 다 assistive다.
+function EventsApplicationCard({
+ application,
+ onSelectEvent,
+ onSelectApplication,
+}: EventsApplicationCardProps) {
+ const badge = EVENTS_APPLICATION_STATUS_BADGES[application.status];
+ const dateLabel =
+ application.status === "cancelled"
+ ? `${formatDateTime(application.cancelledAt)} 취소`
+ : `${formatDateTime(application.appliedAt)} 신청`;
+
+ return (
+
-
- 신청내역은 아직 준비 중이에요
-
-
+
+
+ );
+}
+
+export default EventsApplicationCard;
diff --git a/src/features/events/components/EventsApplicationDetailContent.tsx b/src/features/events/components/EventsApplicationDetailContent.tsx
new file mode 100644
index 0000000..8c9af93
--- /dev/null
+++ b/src/features/events/components/EventsApplicationDetailContent.tsx
@@ -0,0 +1,68 @@
+import { Button } from "@wanteddev/wds";
+import { use } from "react";
+import { Navigate } from "react-router-dom";
+
+import { NEGATIVE_BUTTON_SX } from "@/components/ui/negativeButtonSx";
+import { fetchMyEventApplication } from "@/entities/events/eventsApi";
+import EventsApplicationSummary from "@/features/events/components/EventsApplicationSummary";
+import EventsQuestionField from "@/features/events/components/EventsQuestionField";
+
+interface EventsApplicationDetailContentProps {
+ applicationId: string;
+ /** 없는 신청내역일 때 돌려보낼 곳 */
+ fallbackPath: string;
+ /** 신청 취소 요청 중에는 버튼을 막아 두 번 보내지 않게 한다 */
+ isCancelling: boolean;
+ onCancel: () => void;
+}
+
+// Figma: 신청내역 상세 (nodeId 1133:46181), 신청취소 상세 (1133:46216)
+// 신청 당시 문항에 내가 낸 답변을 채워 읽기 전용으로 보여 준다. 취소된 신청은 입력들을 흐리게 한다.
+function EventsApplicationDetailContent({
+ applicationId,
+ fallbackPath,
+ isCancelling,
+ onCancel,
+}: EventsApplicationDetailContentProps) {
+ const application = use(fetchMyEventApplication(applicationId));
+
+ // 없는 신청내역이면 볼 내용이 없어서 화면이 정한 곳(신청내역 목록)으로 돌려보낸다
+ if (!application) {
+ return
+ {/* 행사 이미지 API 전까지는 행사 목록 카드와 같은 단색 자리 */}
+
+
+
+
+ {badge.label}
+
+
+
+
+ {application.eventTitle}
+
+
+ {dateLabel}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default EventsApplicationDetailContent;
diff --git a/src/features/events/components/EventsApplicationDetailSkeleton.tsx b/src/features/events/components/EventsApplicationDetailSkeleton.tsx
new file mode 100644
index 0000000..42aae9c
--- /dev/null
+++ b/src/features/events/components/EventsApplicationDetailSkeleton.tsx
@@ -0,0 +1,69 @@
+import { Skeleton } from "@wanteddev/wds";
+
+import { useSkeletonAnimation } from "@/components/ui/ScreenSkeleton";
+
+const QUESTION_SKELETON_KEYS = ["question-1", "question-2", "question-3"];
+
+// 신청내역 상세를 받는 동안 보이는 스켈레톤 — 행사 요약 카드와 문항 카드 배치만 따른다.
+function EventsApplicationDetailSkeleton() {
+ const animation = useSkeletonAnimation();
+
+ return (
+
+
+ {/* Figma 신청취소 상세(1133:46216)에는 버튼이 없다 — 신청완료일 때만 보인다.
+ outlined primary(SemiBold 글자)에 빨간 글자·테두리를 덮는다(NEGATIVE_BUTTON_SX). */}
+ {!isCancelled && (
+
+ )}
+
+
+ );
+}
+
+export default EventsApplicationDetailSkeleton;
diff --git a/src/features/events/components/EventsApplicationList.tsx b/src/features/events/components/EventsApplicationList.tsx
new file mode 100644
index 0000000..61a5690
--- /dev/null
+++ b/src/features/events/components/EventsApplicationList.tsx
@@ -0,0 +1,57 @@
+import { Divider } from "@wanteddev/wds";
+import { Fragment, use } from "react";
+
+import { fetchMyEventApplications } from "@/entities/events/eventsApi";
+import EventsApplicationCard from "@/features/events/components/EventsApplicationCard";
+import EventsEmptyState from "@/features/events/components/EventsEmptyState";
+
+interface EventsApplicationListProps {
+ onSelectEvent: (eventId: string) => void;
+ onSelectApplication: (applicationId: string) => void;
+ onBrowseEvents: () => void;
+}
+
+// Figma: 행사/신청내역 (nodeId 1133:46168), 빈 상태 (1165:63551)
+// 카드 사이는 행사 목록과 같은 간격(24)과 구분선이다.
+function EventsApplicationList({
+ onSelectEvent,
+ onSelectApplication,
+ onBrowseEvents,
+}: EventsApplicationListProps) {
+ const applications = use(fetchMyEventApplications());
+
+ if (applications.length === 0) {
+ return (
+ // Figma는 가운데가 아니라 토글 아래 176px에 둔다(1165:63551, Empty State y=318)
+
+
+ {QUESTION_SKELETON_KEYS.map((key) => (
+
+
+ ))}
+
+
+ );
+ }
+
+ return (
+
+ {applications.map((application, index) => (
+
+ {index > 0 && (
+ onSelectApplication(application.id)}
+ onSelectEvent={() => onSelectEvent(application.eventId)}
+ />
+
+ ))}
+
+ );
+}
+
+export default EventsApplicationList;
diff --git a/src/features/events/components/EventsApplicationListSkeleton.tsx b/src/features/events/components/EventsApplicationListSkeleton.tsx
new file mode 100644
index 0000000..e177a80
--- /dev/null
+++ b/src/features/events/components/EventsApplicationListSkeleton.tsx
@@ -0,0 +1,82 @@
+import { Divider, Skeleton } from "@wanteddev/wds";
+import { Fragment } from "react";
+
+import {
+ SKELETON_ROW_KEYS,
+ useSkeletonAnimation,
+} from "@/components/ui/ScreenSkeleton";
+
+// 신청내역을 받는 동안 보이는 스켈레톤 — 신청내역 카드(70px 썸네일 + 배지·제목·날짜 + 버튼 두 개) 배치만 따른다.
+function EventsApplicationListSkeleton() {
+ const animation = useSkeletonAnimation();
+
+ return (
+
+
+ )}
+
+ {SKELETON_ROW_KEYS.map((key, index) => (
+
+ {index > 0 && (
+
+ ))}
+
+ );
+}
+
+export default EventsApplicationListSkeleton;
diff --git a/src/features/events/components/EventsApplicationSummary.tsx b/src/features/events/components/EventsApplicationSummary.tsx
new file mode 100644
index 0000000..397ae02
--- /dev/null
+++ b/src/features/events/components/EventsApplicationSummary.tsx
@@ -0,0 +1,75 @@
+import { ContentBadge, Typography } from "@wanteddev/wds";
+
+import type { MyEventApplication } from "@/entities/events/types";
+import { EVENTS_APPLICATION_STATUS_BADGES } from "@/features/events/constants/events";
+import { formatDateTime } from "@/lib/date";
+
+// Figma: 신청내역 상세 Event Summary (nodeId 1133:46188), 신청취소 상세 (1133:46223) — Stream 로컬 카드.
+// 신청 폼·완료 화면의 EventsSummaryCard(아이콘 + 일시·장소)와 달리 "행사·신청·취소" 라벨 행이라 따로 둔다.
+function EventsApplicationSummary({
+ application,
+}: {
+ application: MyEventApplication;
+}) {
+ const badge = EVENTS_APPLICATION_STATUS_BADGES[application.status];
+ const rows = [
+ {
+ label: "행사",
+ value: `${formatDateTime(application.eventDateTime)} · ${application.location}`,
+ },
+ { label: "신청", value: formatDateTime(application.appliedAt) },
+ ...(application.status === "cancelled"
+ ? [
+ {
+ label: "취소",
+ value: formatDateTime(application.cancelledAt),
+ },
+ ]
+ : []),
+ ];
+
+ return (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {badge.label}
+
+
+ {application.eventTitle}
+
+
+ );
+}
+
+export default EventsApplicationSummary;
diff --git a/src/features/events/components/EventsEmptyState.tsx b/src/features/events/components/EventsEmptyState.tsx
index 7bc0c42..604b6a1 100644
--- a/src/features/events/components/EventsEmptyState.tsx
+++ b/src/features/events/components/EventsEmptyState.tsx
@@ -5,8 +5,10 @@ import emptyEventsIllustration from "@/assets/icons/common/empty-events.svg";
interface EventsEmptyStateProps {
title: string;
description: string;
- /** 있을 때만 버튼을 노출한다 — Figma는 모집중 필터에만 "아카이빙 둘러보기"를 둔다 */
- actionLabel?: string;
+ /** 있을 때만 버튼을 노출한다 — 문구와 동작을 한 묶음으로 받아, 동작 없는 버튼이 그려지지 않게 한다 */
+ action?: { label: string; onClick: () => void };
+ /** 설명 굵기 — 행사 목록 empty(1165:62725)는 Medium, 신청내역 empty(1410:52742)는 Regular다 */
+ descriptionWeight?: "medium" | "regular";
}
// Figma: 행사 모집중 empty > Empty State (nodeId 1165:62725)
@@ -17,17 +19,14 @@ interface EventsEmptyStateProps {
function EventsEmptyState({
title,
description,
- actionLabel,
+ action,
+ descriptionWeight = "medium",
}: EventsEmptyStateProps) {
return (
-
+ {rows.map((row) => (
+
+
+
+ {row.label}
+
+
+ {row.value}
+
+
+ ))}
+
- {/* Figma는 81px 박스 안에 71×70.109 아트를 left 7 / top 8로 얹는다 */}
-
- 
+
toggleOption(option, checked)}
+ onCheckedChange={
+ isReadOnly
+ ? undefined
+ : (checked) => toggleOption(option, checked)
+ }
size="small"
/>
+ {/* Figma 그림 자리 81px(size-20.25). 그림(71×70.109)은 SVG 자체 크기로 가운데 둔다 */}
+
diff --git a/src/features/events/components/EventsList.tsx b/src/features/events/components/EventsList.tsx
index bbc744c..f9a4df2 100644
--- a/src/features/events/components/EventsList.tsx
+++ b/src/features/events/components/EventsList.tsx
@@ -11,7 +11,7 @@ import EventsEmptyState from "@/features/events/components/EventsEmptyState";
// 버튼은 Figma가 지정한 모집중에만 노출한다 — 모집종료 필터에서 "지난 행사를 보세요"는 모순이 된다.
const EMPTY_STATE_BY_FILTER: Record<
string,
- { title: string; description: string; actionLabel?: string }
+ { title: string; description: string; hasArchivesAction?: boolean }
> = {
all: {
description: "새로운 행사가 열리면 알려드릴게요",
@@ -22,7 +22,7 @@ const EMPTY_STATE_BY_FILTER: Record<
title: "지난 행사가 없어요",
},
open: {
- actionLabel: "아카이빙 둘러보기",
+ hasArchivesAction: true,
description: "지난 행사의 활동을 확인해 보세요",
title: "모집 중인 행사가 없어요",
},
@@ -36,11 +36,17 @@ interface EventsListProps {
statusFilter: string;
onSelect: (eventId: string) => void;
onApply: (eventId: string) => void;
+ onBrowseArchives: () => void;
}
// 행사 목록 데이터를 받아 그리는 부분. 데이터를 받는 동안은 EventsListScreen의 Suspense가
// EventsListSkeleton을 보여준다. 이동 같은 화면 동작은 Screen이 콜백으로 넘긴다.
-function EventsList({ statusFilter, onSelect, onApply }: EventsListProps) {
+function EventsList({
+ statusFilter,
+ onSelect,
+ onApply,
+ onBrowseArchives,
+}: EventsListProps) {
const events = use(fetchEvents());
// 빌릴게 카테고리 필터와 달리 모집 상태는 목데이터에 이미 들어있어서 실제로 걸러낼 수 있다.
@@ -50,14 +56,21 @@ function EventsList({ statusFilter, onSelect, onApply }: EventsListProps) {
: events.filter((event) => event.status === statusFilter);
if (visibleEvents.length === 0) {
+ const emptyState =
+ EMPTY_STATE_BY_FILTER[statusFilter] ?? EMPTY_STATE_BY_FILTER.all;
return (
// Figma는 Empty State를 목록 영역(헤더·Bottom Nav 사이) 가운데에 둔다.
// 카드 목록과 같은 gap-6 래퍼 안에 넣으면 flex-1이 높이를 못 받아 위에 붙어버려서,
// 빈 목록일 때는 래퍼를 대체해 h-full로 가운데 정렬한다.
+
@@ -44,17 +43,20 @@ function EventsEmptyState({
align="center"
color="semantic.label.alternative"
variant="label1"
- weight="medium"
+ weight={descriptionWeight}
>
{description}
- {actionLabel && (
- // 아카이빙 화면이 아직 없어서 동작은 보류다.
- // TODO: 아카이빙 목록 화면(billilge/stream-client-web#31)이 생기면 onClick을 연결한다
-