+ setIsConfirmOpen(true)}
+ />
+
+
+ setIsConfirmOpen(false)}
+ onConfirm={cancelApplication}
+ open={isConfirmOpen}
+ title="신청을 취소할까요?"
+ tone="negative"
+ />
+
+ {
+ if (!open) {
+ setToast(null);
+ }
+ }}
+ open={toast !== null}
+ variant={toast === "failed" ? "negative" : "positive"}
+ />
+
+ );
+}
+
+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 ca44c7d..5aa9d51 100644
--- a/src/features/events/EventsListScreen.tsx
+++ b/src/features/events/EventsListScreen.tsx
@@ -2,24 +2,31 @@ import {
SegmentedControl,
SegmentedControlItem,
TopNavigationButton,
- Typography,
} from "@wanteddev/wds";
import { IconBell, IconSearch } from "@wanteddev/wds-icon";
import { Suspense, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
import FilterChipGroup from "@/components/ui/FilterChipGroup";
import ScreenHeader from "@/components/ui/ScreenHeader";
import { useScreenHeader } from "@/components/ui/useScreenHeader";
+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 { getSearchPath } from "@/features/search/constants/search";
// Figma: 행사 (nodeId 1243:70854)
function EventsListScreen() {
const navigate = useNavigate();
- const [tab, setTab] = useState("event");
+ const { pathname } = useLocation();
+ const tab: EventsTab =
+ pathname === EVENTS_TAB_PATHS.application ? "application" : "event";
const [statusFilter, setStatusFilter] = useState("all");
useScreenHeader(
@@ -49,7 +56,14 @@ function EventsListScreen() {
Figma Tool 프레임(56~88)은 높이 32에 위아래 여백이 없다 — 세로 패딩을 주면
토글과 그 아래 필터 행이 함께 밀린다. */}
-
+
+ navigate(EVENTS_TAB_PATHS[value as EventsTab], { replace: true })
+ }
+ size="small"
+ value={tab}
+ >
행사
신청내역
@@ -57,14 +71,16 @@ function EventsListScreen() {
- {/* 필터는 고정하고 목록만 스크롤된다 */}
-
-
+ {/* 필터는 고정하고 목록만 스크롤된다. 신청내역 탭은 Figma(1133:46168)에 필터 행이 없다 */}
+ {tab === "event" && (
+
+
+ )}
{/* 헤더·토글·필터는 데이터와 무관해서 바로 그리고, 데이터를 받는 목록 자리만 스켈레톤으로 채운다 */}
@@ -81,15 +97,22 @@ 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..3f98e6e
--- /dev/null
+++ b/src/features/events/components/EventsApplicationCard.tsx
@@ -0,0 +1,95 @@
+import { Button, ContentBadge, Typography } from "@wanteddev/wds";
+
+import type { MyEventApplication } from "@/entities/events/types";
+import {
+ EVENTS_APPLICATION_STATUS_BADGES,
+ formatApplicationDateTime,
+} from "@/features/events/constants/events";
+
+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"
+ ? `${formatApplicationDateTime(application.cancelledAt)} 취소`
+ : `${formatApplicationDateTime(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..fdc5f73
--- /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 { fetchMyEventApplication } from "@/entities/events/eventsApi";
+import EventsApplicationSummary from "@/features/events/components/EventsApplicationSummary";
+import EventsQuestionField from "@/features/events/components/EventsQuestionField";
+import { EVENTS_TAB_PATHS } from "@/features/events/constants/events";
+
+interface EventsApplicationDetailContentProps {
+ applicationId: string;
+ /** 신청 취소 요청 중에는 버튼을 막아 두 번 보내지 않게 한다 */
+ isCancelling: boolean;
+ onCancel: () => void;
+}
+
+// Figma: 신청내역 상세 (nodeId 1133:46181), 신청취소 상세 (1133:46216)
+// 신청 당시 문항에 내가 낸 답변을 채워 읽기 전용으로 보여 준다. 취소된 신청은 입력들을 흐리게 한다.
+function EventsApplicationDetailContent({
+ applicationId,
+ 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)에는 버튼이 없다 — 신청완료일 때만 보인다.
+ WDS Button 색은 primary/assistive뿐이라 outlined primary(SemiBold 글자)에 글자·테두리 색만
+ Status/Negative로 덮는다(ConfirmModal의 위험 버튼과 같은 방식). */}
+ {!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..1b2ce20
--- /dev/null
+++ b/src/features/events/components/EventsApplicationList.tsx
@@ -0,0 +1,58 @@
+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..7ee4145
--- /dev/null
+++ b/src/features/events/components/EventsApplicationSummary.tsx
@@ -0,0 +1,77 @@
+import { ContentBadge, Typography } from "@wanteddev/wds";
+
+import type { MyEventApplication } from "@/entities/events/types";
+import {
+ EVENTS_APPLICATION_STATUS_BADGES,
+ formatApplicationDateTime,
+} from "@/features/events/constants/events";
+
+// 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: `${formatApplicationDateTime(application.eventDateTime)} · ${application.location}`,
+ },
+ { label: "신청", value: formatApplicationDateTime(application.appliedAt) },
+ ...(application.status === "cancelled"
+ ? [
+ {
+ label: "취소",
+ value: formatApplicationDateTime(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 b37911b..eece401 100644
--- a/src/features/events/components/EventsEmptyState.tsx
+++ b/src/features/events/components/EventsEmptyState.tsx
@@ -7,6 +7,9 @@ interface EventsEmptyStateProps {
description: string;
/** 있을 때만 버튼을 노출한다 — Figma는 모집중 필터에만 "아카이빙 둘러보기"를 둔다 */
actionLabel?: string;
+ onAction?: () => void;
+ /** 설명 굵기 — 행사 목록 empty(1165:62725)는 Medium, 신청내역 empty(1410:52742)는 Regular다 */
+ descriptionWeight?: "medium" | "regular";
}
// Figma: 행사 모집중 empty > Empty State (nodeId 1165:62725)
@@ -18,16 +21,14 @@ function EventsEmptyState({
title,
description,
actionLabel,
+ onAction,
+ descriptionWeight = "medium",
}: EventsEmptyStateProps) {
return (
-
+ {rows.map((row) => (
+
+
+
+ {row.label}
+
+
+ {row.value}
+
+
+ ))}
+
- {/* Figma는 81px 박스 안에 71×70.109 아트를 left 7 / top 8로 얹는다 */}
-
- 
+
+ {/* Figma 그림 자리 81px(size-20.25). 그림(71×70.109)은 SVG 자체 크기로 가운데 둔다 */}
+
+
@@ -44,16 +45,21 @@ function EventsEmptyState({
align="center"
color="semantic.label.alternative"
variant="label1"
- weight="medium"
+ weight={descriptionWeight}
>
{description}
{actionLabel && (
- // 아카이빙 화면이 아직 없어서 동작은 보류다.
- // TODO: 아카이빙 목록 화면(billilge/stream-client-web#31)이 생기면 onClick을 연결한다
-