diff --git a/src/app/(detail)/feed/[id]/page.tsx b/src/app/(detail)/feed/[id]/page.tsx
index 46e957c..017c835 100644
--- a/src/app/(detail)/feed/[id]/page.tsx
+++ b/src/app/(detail)/feed/[id]/page.tsx
@@ -22,6 +22,7 @@ import { VenueSection } from '@/features/feed/ui/detail/VenueSection';
 import { DetailHeader, DetailPageShell } from '@/shared/ui';
 import type {
     FeedApplication,
+    FeedAuthorProfile,
     FeedItem,
     FeedManagementFlow,
     SupporterApplication,
@@ -63,6 +64,76 @@ function formatPrice(price: number): string {
     return price.toLocaleString('ko-KR') + '원';
 }
 
+type FeedDisplayRole = FeedAuthorProfile['role'];
+
+function getFeedRoleLabel(role?: FeedDisplayRole): string {
+    if (role === 'OWNER') return '오너';
+    if (role === 'SUPPORTER') return '서포터';
+    return '파트너';
+}
+
+function SpotPromotionProgress({ item }: { item: FeedItem }) {
+    const progressPercent = Math.min(item.progressPercent ?? 0, 100);
+    const fundingGoal = item.fundingGoal ?? item.price;
+    const fundedAmount = item.fundedAmount ?? 0;
+    const remainingAmount = Math.max(
+        item.remainingAmount ?? fundingGoal - fundedAmount,
+        0,
+    );
+    const remainingParticipantCount = Math.max(
+        item.remainingParticipantCount ?? 0,
+        0,
+    );
+    const converted = Boolean(item.spotId) || item.status === 'MATCHED';
+
+    return (
+        <div className="mt-4 rounded-2xl border border-accent-border bg-accent-muted/60 px-4 py-3">
+            <div className="flex items-center justify-between gap-3">
+                <div>
+                    <p className="text-xs font-semibold tracking-[0.12em] text-accent uppercase">
+                        스팟 전환 현황
+                    </p>
+                    <p className="mt-1 text-sm font-semibold text-gray-900">
+                        {converted
+                            ? '스팟으로 전환됐어요'
+                            : remainingParticipantCount > 0
+                              ? `${remainingParticipantCount}명만 더 모이면 스팟이 열려요`
+                              : remainingAmount > 0
+                                ? `${formatPrice(remainingAmount)} 더 필요해요`
+                                : '스팟 전환 조건을 채웠어요'}
+                    </p>
+                </div>
+                <span className="shrink-0 rounded-full bg-white px-2.5 py-1 text-xs font-semibold text-accent">
+                    {progressPercent}%
+                </span>
+            </div>
+            <div className="mt-3 h-2 overflow-hidden rounded-full bg-white">
+                <div
+                    className="h-full rounded-full bg-accent transition-all duration-500"
+                    style={{ width: `${progressPercent}%` }}
+                />
+            </div>
+            <div className="mt-2 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xs text-gray-500">
+                <span>
+                    현재 {formatPrice(fundedAmount)} / 목표{' '}
+                    {formatPrice(fundingGoal)}
+                </span>
+                {!converted && remainingAmount > 0 && (
+                    <span>남은 금액 {formatPrice(remainingAmount)}</span>
+                )}
+            </div>
+        </div>
+    );
+}
+
+function RoleBadge({ role }: { role?: FeedDisplayRole }) {
+    return (
+        <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500">
+            {getFeedRoleLabel(role)}
+        </span>
+    );
+}
+
 function AuthorSection({ item }: { item: FeedItem }) {
     const profile = item.authorProfile;
     const isSupporter = profile?.role === 'SUPPORTER';
@@ -88,11 +159,7 @@ function AuthorSection({ item }: { item: FeedItem }) {
                         <p className="font-semibold text-gray-900">
                             {item.authorNickname}
                         </p>
-                        {profile && (
-                            <span className="rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500">
-                                {isSupporter ? '서포터' : '파트너'}
-                            </span>
-                        )}
+                        {profile && <RoleBadge role={profile.role} />}
                     </div>
                     <div className="mt-0.5 flex items-center gap-2 text-xs text-gray-400">
                         <span>{item.location}</span>
@@ -162,6 +229,7 @@ function OfferDetailContent({ item }: { item: FeedItem }) {
                         </span>
                     )}
                 </div>
+                <SpotPromotionProgress item={item} />
             </div>
 
             {/* 본문 */}
@@ -249,6 +317,7 @@ function RequestDetailContent({
                     서포터와 매칭된 후 채팅을 통해 금액과 일정을 함께
                     조율합니다.
                 </p>
+                <SpotPromotionProgress item={item} />
             </div>
 
             {/* 서포터 지원 현황 */}
diff --git a/src/entities/spot/types.ts b/src/entities/spot/types.ts
index 8dad818..5db65b2 100644
--- a/src/entities/spot/types.ts
+++ b/src/entities/spot/types.ts
@@ -33,6 +33,7 @@ export type PagedResponse<T> = ApiResponse<T[]>;
 
 export type SpotType = 'OFFER' | 'REQUEST';
 export type SpotStatus = 'OPEN' | 'MATCHED' | 'CLOSED' | 'CANCELLED';
+export type SpotMemberRole = 'OWNER' | 'SUPPORTER' | 'PARTNER';
 
 export type SpotForfeitPool = {
     toPool: number;
@@ -73,6 +74,9 @@ export type TimelineEvent = {
 
 export type SpotDetail = Spot & {
     timeline: TimelineEvent[];
+    settlement?: SpotSettlementApproval | null;
+    participantCount?: number;
+    isOwner?: boolean;
 };
 
 // ─── 목록 필터 ────────────────────────────────────────────────────────────────
@@ -83,7 +87,7 @@ export type SpotDashboardTab = 'OFFER' | 'REQUEST' | 'RENT';
 export type SpotParticipant = {
     userId: string;
     nickname: string;
-    role: 'AUTHOR' | 'PARTICIPANT';
+    role: SpotMemberRole | 'AUTHOR' | 'PARTICIPANT';
     joinedAt: string;
 };
 
@@ -191,6 +195,8 @@ export type SpotSettlementLineItem = {
 };
 
 export type SpotSettlementApproval = {
+    id?: string;
+    spotId?: string;
     status: WorkflowApprovalStatus;
     requestedAmount: number;
     approvedAmount: number;
diff --git a/src/features/chat/client/MainChatPageClient.tsx b/src/features/chat/client/MainChatPageClient.tsx
index f59b9ab..7b2e44a 100644
--- a/src/features/chat/client/MainChatPageClient.tsx
+++ b/src/features/chat/client/MainChatPageClient.tsx
@@ -11,6 +11,7 @@ import {
     IconFileText,
     IconHeartHandshake,
     IconMap,
+    IconReceipt,
 } from '@tabler/icons-react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { cn } from '@/shared/lib/cn';
@@ -307,6 +308,11 @@ function SpotItemList({
             ): item is Extract<SpotActionItem, { kind: 'reverse-offer' }> =>
                 item.kind === 'reverse-offer',
         ) ?? null;
+    const settlementItem =
+        actionItems.find(
+            (item): item is Extract<SpotActionItem, { kind: 'settlement' }> =>
+                item.kind === 'settlement',
+        ) ?? null;
     const voteItems = actionItems.filter(
         (item): item is Extract<SpotActionItem, { kind: 'vote' }> =>
             item.kind === 'vote',
@@ -316,6 +322,7 @@ function SpotItemList({
     const hasFiles = room.spot.files.length > 0;
     const hasItems =
         Boolean(reverseOfferItem) ||
+        Boolean(settlementItem) ||
         voteItems.length > 0 ||
         hasSchedule ||
         hasFiles;
@@ -399,6 +406,41 @@ function SpotItemList({
                 </button>
             ))}
 
+            {settlementItem && (
+                <button
+                    type="button"
+                    onClick={() => onActionItem(settlementItem)}
+                    className="flex items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition-colors active:bg-zinc-100"
+                >
+                    <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-zinc-100 text-zinc-600">
+                        <IconReceipt size={16} stroke={1.75} />
+                    </div>
+                    <div className="min-w-0 flex-1">
+                        <div className="flex items-baseline justify-between gap-2">
+                            <span className="truncate text-[13.5px] font-semibold text-zinc-900">
+                                정산
+                            </span>
+                            <span
+                                suppressHydrationWarning
+                                className="shrink-0 text-[10.5px] font-medium text-zinc-400 tabular-nums"
+                            >
+                                {formatListTime(settlementItem.updatedAt)}
+                            </span>
+                        </div>
+                        <p className="mt-0.5 truncate text-[12.5px] leading-snug text-zinc-500">
+                            {settlementItem.settlement
+                                ? settlementItem.settlement.status ===
+                                  'APPROVED'
+                                    ? `승인 완료 · ${settlementItem.settlement.approvedAmount.toLocaleString('ko-KR')}P`
+                                    : `승인 대기 · ${settlementItem.settlement.requestedAmount.toLocaleString('ko-KR')}P`
+                                : settlementItem.isAuthor
+                                  ? '아직 정산 요청 전 · 제출 필요'
+                                  : '오너 정산 요청 대기 중'}
+                        </p>
+                    </div>
+                </button>
+            )}
+
             {hasSchedule && room.spot.schedule && (
                 <button
                     type="button"
diff --git a/src/features/chat/model/spot-action-items.ts b/src/features/chat/model/spot-action-items.ts
index 6462fee..2707242 100644
--- a/src/features/chat/model/spot-action-items.ts
+++ b/src/features/chat/model/spot-action-items.ts
@@ -1,4 +1,9 @@
-import type { SharedFile, SpotSchedule, SpotVote } from '@/entities/spot/types';
+import type {
+    SharedFile,
+    SpotSchedule,
+    SpotSettlementApproval,
+    SpotVote,
+} from '@/entities/spot/types';
 import type {
     ChatScheduleDraft,
     ChatActionTarget,
@@ -110,10 +115,31 @@ function createReverseOfferActionItem(
     };
 }
 
+function createSettlementActionItem(
+    room: SpotChatRoom,
+    settlement: SpotSettlementApproval | null,
+): SpotActionItem {
+    return {
+        kind: 'settlement',
+        id: getSpotSettlementActionId(room.id),
+        roomId: room.id,
+        roomTitle: room.title,
+        settlement,
+        spotStatus: room.spot.status,
+        isAuthor: room.spot.authorId === room.currentUserId,
+        updatedAt:
+            settlement?.approvedAt ?? settlement?.submittedAt ?? room.updatedAt,
+    };
+}
+
 export function getSpotScheduleActionId(roomId: string): string {
     return `schedule-${roomId}`;
 }
 
+export function getSpotSettlementActionId(roomId: string): string {
+    return `settlement-${roomId}`;
+}
+
 export function getSpotActionItems(room: SpotChatRoom): SpotActionItem[] {
     const items: SpotActionItem[] = [];
 
@@ -121,6 +147,12 @@ export function getSpotActionItems(room: SpotChatRoom): SpotActionItem[] {
         items.push(createReverseOfferActionItem(room, room.reverseOffer));
     }
 
+    if (room.spot.status === 'CLOSED') {
+        items.push(
+            createSettlementActionItem(room, room.spot.settlement ?? null),
+        );
+    }
+
     items.push(
         ...room.spot.votes.map((vote) => createVoteActionItem(room, vote)),
     );
@@ -180,6 +212,7 @@ export function isSupportedChatActionKind(
         value === 'vote' ||
         value === 'schedule' ||
         value === 'file' ||
-        value === 'reverse-offer'
+        value === 'reverse-offer' ||
+        value === 'settlement'
     );
 }
diff --git a/src/features/chat/model/types.ts b/src/features/chat/model/types.ts
index a49e793..6a1ac12 100644
--- a/src/features/chat/model/types.ts
+++ b/src/features/chat/model/types.ts
@@ -9,7 +9,12 @@ export type MainChatTopTab = 'personal' | 'team';
 export type PersonalCounterpartRole = 'SUPPORTER' | 'PARTNER';
 export type MainChatPersonalFilter = 'all' | 'unread' | 'SUPPORTER' | 'PARTNER';
 export type MainChatTeamFilter = 'all' | 'vote' | 'schedule' | 'file';
-export type ChatActionKind = 'vote' | 'schedule' | 'file' | 'reverse-offer';
+export type ChatActionKind =
+    | 'vote'
+    | 'schedule'
+    | 'file'
+    | 'reverse-offer'
+    | 'settlement';
 
 export type ChatReverseOfferStatus =
     | 'PARTNER_REVIEW'
@@ -242,4 +247,16 @@ export type SpotActionItem =
           roomTitle: string;
           reverseOffer: ChatReverseOfferSummary;
           updatedAt: string;
+      }
+    | {
+          kind: Extract<ChatActionKind, 'settlement'>;
+          id: string;
+          roomId: string;
+          roomTitle: string;
+          settlement:
+              | import('@/entities/spot/types').SpotSettlementApproval
+              | null;
+          spotStatus: import('@/entities/spot/types').SpotStatus;
+          isAuthor: boolean;
+          updatedAt: string;
       };
diff --git a/src/features/chat/model/use-main-chat-store.ts b/src/features/chat/model/use-main-chat-store.ts
index 3a7653b..6ee7e80 100644
--- a/src/features/chat/model/use-main-chat-store.ts
+++ b/src/features/chat/model/use-main-chat-store.ts
@@ -269,7 +269,11 @@ async function enrichSpotRoomWithBackend(
     room: SpotChatRoom,
 ): Promise<SpotChatRoom> {
     const spotId = room.spot.id;
-    const [participants, schedule, votes, files] = await Promise.all([
+    const [detail, participants, schedule, votes, files] = await Promise.all([
+        spotsApi
+            .get(spotId)
+            .then((response) => response.data)
+            .catch(() => room.spot),
         spotsApi
             .getParticipants(spotId)
             .then((response) => response.data)
@@ -288,15 +292,22 @@ async function enrichSpotRoomWithBackend(
             .catch(() => room.spot.files),
     ]);
     const owner = participants.find(
-        (participant) => participant.role === 'AUTHOR',
+        (participant) =>
+            participant.role === 'OWNER' || participant.role === 'AUTHOR',
     );
 
     return {
         ...room,
         spot: {
             ...room.spot,
-            authorId: room.spot.authorId || owner?.userId || '',
-            authorNickname: room.spot.authorNickname || owner?.nickname || '',
+            ...detail,
+            authorId:
+                detail.authorId || room.spot.authorId || owner?.userId || '',
+            authorNickname:
+                detail.authorNickname ||
+                room.spot.authorNickname ||
+                owner?.nickname ||
+                '',
             participants,
             schedule: schedule ?? undefined,
             votes,
diff --git a/src/features/chat/ui/ChatCreationPanel.tsx b/src/features/chat/ui/ChatCreationPanel.tsx
index 85c223d..27b3b41 100644
--- a/src/features/chat/ui/ChatCreationPanel.tsx
+++ b/src/features/chat/ui/ChatCreationPanel.tsx
@@ -13,6 +13,7 @@ import {
     IconHeartHandshake,
     IconLink,
     IconPlus,
+    IconReceipt,
     IconTrash,
     IconUpload,
     IconUsers,
@@ -22,6 +23,7 @@ import { UserAvatarStatic } from '@/shared/ui';
 import { SearchBar } from '@/shared/ui/SearchBar';
 import { useChatNavStore } from '@/shared/model/chat-nav-store';
 import { formatKrw } from '@/features/post/model/pricing-preview';
+import { spotsApi } from '@/features/spot/api/spot-api';
 import { useMainChatStore } from '../model/use-main-chat-store';
 import { resolveReverseOfferFinancialSummary } from '../model/reverse-offer-finance';
 import { formatReverseOfferApprovalProgress } from '../model/types';
@@ -1506,6 +1508,144 @@ function FileActionPanel({
     );
 }
 
+function SettlementActionPanel({
+    item,
+    onClose,
+}: {
+    item: Extract<SpotActionItem, { kind: 'settlement' }>;
+    onClose: () => void;
+}) {
+    const liveRoom = useMainChatStore(
+        (state) =>
+            state.rooms.find(
+                (candidate): candidate is SpotChatRoom =>
+                    candidate.id === item.roomId &&
+                    candidate.category === 'spot',
+            ) ?? null,
+    );
+    const loadRoom = useMainChatStore((state) => state.loadRoom);
+    const [isApproving, setIsApproving] = useState(false);
+    const [approveError, setApproveError] = useState<string | null>(null);
+    const settlement = liveRoom?.spot.settlement ?? item.settlement;
+    const isAuthor = liveRoom
+        ? liveRoom.spot.authorId === liveRoom.currentUserId
+        : item.isAuthor;
+    const canApprove =
+        Boolean(liveRoom) && !isAuthor && settlement?.status === 'PENDING';
+
+    async function handleApprove() {
+        if (!liveRoom || !canApprove || isApproving) return;
+
+        setIsApproving(true);
+        setApproveError(null);
+
+        try {
+            await spotsApi.approveSettlement(liveRoom.spot.id);
+            await loadRoom(liveRoom.id);
+            onClose();
+        } catch {
+            setApproveError(
+                '정산 승인에 실패했어요. 잠시 후 다시 시도해주세요.',
+            );
+        } finally {
+            setIsApproving(false);
+        }
+    }
+
+    const totalAmount =
+        settlement?.approvedAmount ?? settlement?.requestedAmount ?? 0;
+    const statusLabel = !settlement
+        ? isAuthor
+            ? '정산 제출 필요'
+            : '오너 정산 요청 대기'
+        : settlement.status === 'APPROVED'
+          ? '승인 완료'
+          : '승인 대기';
+
+    return (
+        <div className="pb-2">
+            <div className="mb-1 flex items-center justify-center">
+                <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-amber-500/20 text-amber-200">
+                    <IconReceipt size={16} />
+                </div>
+            </div>
+            <p className="mb-1 text-center text-sm font-semibold text-white">
+                정산
+            </p>
+            <p className="mb-4 text-center text-xs text-white/40">
+                {item.roomTitle} · {statusLabel}
+            </p>
+
+            <div className="mb-3 rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
+                <p className="text-[11px] font-semibold tracking-[0.14em] text-white/35 uppercase">
+                    Settlement
+                </p>
+                <p className="mt-2 text-sm font-semibold text-white">
+                    {statusLabel}
+                </p>
+                <p className="mt-2 text-sm leading-6 text-white/65">
+                    {settlement?.summary ??
+                        (isAuthor
+                            ? '종료된 스팟이라 정산 요청을 제출해야 해요. 채팅방 본문 종료 단계에서 항목을 입력할 수 있어요.'
+                            : '아직 오너가 정산 요청을 제출하지 않았어요.')}
+                </p>
+            </div>
+
+            {settlement ? (
+                <div className="mb-4 rounded-2xl border border-white/10 bg-white/5 px-4 py-4">
+                    <div className="space-y-2">
+                        {settlement.lineItems.map((lineItem) => (
+                            <div
+                                key={lineItem.label}
+                                className="flex items-center justify-between gap-3 text-sm"
+                            >
+                                <span className="truncate text-white/60">
+                                    {lineItem.label}
+                                </span>
+                                <span className="shrink-0 font-semibold text-white">
+                                    {lineItem.amount.toLocaleString('ko-KR')}P
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                    <div className="mt-3 border-t border-white/10 pt-3">
+                        <div className="flex items-center justify-between text-sm">
+                            <span className="text-white/50">총 금액</span>
+                            <span className="font-bold text-white">
+                                {totalAmount.toLocaleString('ko-KR')}P
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            ) : null}
+
+            {approveError ? (
+                <p className="mb-3 rounded-xl bg-red-500/10 px-3 py-2 text-xs text-red-200">
+                    {approveError}
+                </p>
+            ) : null}
+
+            <Button
+                fullWidth
+                size="lg"
+                disabled={!canApprove || isApproving}
+                className={
+                    canApprove
+                        ? 'bg-amber-300 text-brand-900 hover:bg-amber-200 focus-visible:ring-amber-200/40'
+                        : 'bg-white/10 text-white/50'
+                }
+                onClick={canApprove ? handleApprove : onClose}
+            >
+                {isApproving
+                    ? '승인 중...'
+                    : canApprove
+                      ? '정산 승인하기'
+                      : '닫기'}
+            </Button>
+        </div>
+    );
+}
+
 function ReverseOfferActionPanel({
     item,
     onClose,
@@ -1792,6 +1932,13 @@ export function ChatCreationPanel({ onClose }: ChatCreationPanelProps) {
             return (
                 <FileActionPanel item={activeActionItem} onClose={onClose} />
             );
+        if (activeActionItem.kind === 'settlement')
+            return (
+                <SettlementActionPanel
+                    item={activeActionItem}
+                    onClose={onClose}
+                />
+            );
         if (activeActionItem.kind === 'reverse-offer')
             return (
                 <ReverseOfferActionPanel
diff --git a/src/features/chat/ui/lifecycle/ClosedPhasePanel.tsx b/src/features/chat/ui/lifecycle/ClosedPhasePanel.tsx
index 8a3ce94..30ebcc6 100644
--- a/src/features/chat/ui/lifecycle/ClosedPhasePanel.tsx
+++ b/src/features/chat/ui/lifecycle/ClosedPhasePanel.tsx
@@ -1,7 +1,13 @@
 'use client';
 
 import { IconStar } from '@tabler/icons-react';
-import type { SpotReview, TimelineEvent } from '@/entities/spot/types';
+import type {
+    SpotReview,
+    SpotSettlementApproval,
+    TimelineEvent,
+} from '@/entities/spot/types';
+import { SpotSettlementActions } from '@/features/spot/client/detail/SpotSettlementActions';
+import { useMainChatStore } from '../../model/use-main-chat-store';
 import type { SpotChatRoom } from '../../model/types';
 
 type Props = { room: SpotChatRoom };
@@ -13,12 +19,79 @@ function formatDate(iso: string): string {
     }).format(new Date(iso));
 }
 
+function formatPoints(value: number): string {
+    return `${value.toLocaleString('ko-KR')}P`;
+}
+
+function SettlementTile({
+    settlement,
+}: {
+    settlement?: SpotSettlementApproval | null;
+}) {
+    if (!settlement) {
+        return (
+            <div className="rounded-xl border border-dashed border-border-soft bg-card p-3">
+                <p className="text-sm font-semibold text-foreground">정산</p>
+                <p className="mt-1 text-xs text-muted-foreground">
+                    아직 정산 요청이 없어요. 오너가 활동 내역을 정리해 제출해야
+                    해요.
+                </p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="rounded-xl border border-border-soft bg-card p-3">
+            <div className="flex items-center justify-between gap-2">
+                <p className="text-sm font-semibold text-foreground">정산</p>
+                <span className="rounded-full bg-muted px-2 py-0.5 text-[11px] font-semibold text-muted-foreground">
+                    {settlement.status === 'APPROVED'
+                        ? '승인 완료'
+                        : '승인 대기'}
+                </span>
+            </div>
+            <p className="mt-1 text-xs leading-5 text-text-secondary">
+                {settlement.summary || '정산 내역 확인이 필요해요.'}
+            </p>
+            <div className="mt-2 space-y-1.5">
+                {settlement.lineItems.map((item) => (
+                    <div
+                        key={item.label}
+                        className="flex items-center justify-between text-xs"
+                    >
+                        <span className="text-muted-foreground">
+                            {item.label}
+                        </span>
+                        <span className="font-semibold text-foreground">
+                            {formatPoints(item.amount)}
+                        </span>
+                    </div>
+                ))}
+            </div>
+            <div className="mt-2 border-t border-border-soft pt-2 text-xs">
+                <div className="flex items-center justify-between">
+                    <span className="text-muted-foreground">요청 금액</span>
+                    <span className="font-bold text-foreground">
+                        {formatPoints(settlement.requestedAmount)}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}
+
 export function ClosedPhasePanel({ room }: Props) {
     const spot = room.spot;
+    const loadRoom = useMainChatStore((state) => state.loadRoom);
     const reviews = spot.reviews;
     const closedEvent = spot.timeline.find(
         (e) => e.kind === 'COMPLETED' || e.kind === 'CANCELLED',
     );
+    const workflow = {
+        spotId: spot.id,
+        progressLabel: '활동 종료 · 정산 단계',
+        settlementApproval: spot.settlement ?? undefined,
+    };
 
     return (
         <section className="space-y-3 rounded-2xl border border-border-soft bg-muted p-4">
@@ -38,6 +111,16 @@ export function ClosedPhasePanel({ room }: Props) {
                 )}
             </div>
 
+            <SettlementTile settlement={spot.settlement} />
+            <SpotSettlementActions
+                spotId={spot.id}
+                spotStatus={spot.status}
+                workflow={workflow}
+                currentUserId={room.currentUserId}
+                authorId={spot.authorId}
+                forfeitPool={spot.forfeitPool}
+                onSettled={() => void loadRoom(room.id)}
+            />
             <ReviewTile reviews={reviews} />
             <TimelineTile events={spot.timeline} />
         </section>
diff --git a/src/features/chat/ui/lifecycle/MatchedPhasePanel.tsx b/src/features/chat/ui/lifecycle/MatchedPhasePanel.tsx
index 7541cc7..8901279 100644
--- a/src/features/chat/ui/lifecycle/MatchedPhasePanel.tsx
+++ b/src/features/chat/ui/lifecycle/MatchedPhasePanel.tsx
@@ -36,6 +36,12 @@ function formatFileSize(sizeBytes: number): string {
     return `${sizeBytes}B`;
 }
 
+function getSpotMemberRoleLabel(role: SpotParticipant['role']): string {
+    if (role === 'OWNER' || role === 'AUTHOR') return '오너';
+    if (role === 'SUPPORTER') return '서포터';
+    return '파트너';
+}
+
 export function MatchedPhasePanel({ room }: Props) {
     const spot = room.spot;
 
@@ -170,12 +176,16 @@ function ParticipantsTile({
         >
             <div className="flex flex-wrap gap-2">
                 {participants.slice(0, MAX).map((p) => (
-                    <UserAvatarStatic
-                        key={p.userId}
-                        userId={p.userId}
-                        nickname={p.nickname}
-                        size="sm"
-                    />
+                    <div key={p.userId} className="flex items-center gap-1.5">
+                        <UserAvatarStatic
+                            userId={p.userId}
+                            nickname={p.nickname}
+                            size="sm"
+                        />
+                        <span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground">
+                            {getSpotMemberRoleLabel(p.role)}
+                        </span>
+                    </div>
                 ))}
                 {participants.length > MAX && (
                     <div className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-[11px] font-semibold text-muted-foreground">
diff --git a/src/features/feed/api/feed-api.ts b/src/features/feed/api/feed-api.ts
index 4add45f..014f855 100644
--- a/src/features/feed/api/feed-api.ts
+++ b/src/features/feed/api/feed-api.ts
@@ -82,6 +82,8 @@ export type BackendFeedApplication = Omit<
     applicantProfile?: FeedApplication['applicantProfile'];
     appliedRole?: FeedApplicationRole;
     deposit?: number;
+    spotConverted?: boolean;
+    spotId?: string | number | null;
 };
 
 export function toFeedApplication(
@@ -106,6 +108,9 @@ export function toFeedApplication(
                 : undefined),
         appliedRole: application.appliedRole ?? fallback?.role ?? 'PARTNER',
         deposit: application.deposit ?? fallback?.deposit ?? 0,
+        spotConverted: application.spotConverted,
+        spotId:
+            application.spotId == null ? undefined : String(application.spotId),
     };
 }
 
diff --git a/src/features/feed/model/types.ts b/src/features/feed/model/types.ts
index 5b31d49..068991a 100644
--- a/src/features/feed/model/types.ts
+++ b/src/features/feed/model/types.ts
@@ -11,7 +11,7 @@ export type FeedItemType = 'OFFER' | 'REQUEST' | 'RENT';
 export type FeedItemStatus = 'OPEN' | 'MATCHED' | 'CLOSED';
 export type FeedTabType = 'HOME' | 'EXPLORE';
 export type FeedCategory = '음악' | '요리' | '운동' | '공예' | '언어' | '기타';
-export type FeedAuthorRole = 'SUPPORTER' | 'PARTNER';
+export type FeedAuthorRole = 'OWNER' | 'SUPPORTER' | 'PARTNER';
 
 // 지원자 본인의 신청 생명주기 (SupporterApplicationStatus는 호스트 측 triage 라벨과 별개)
 export type FeedApplicationStatus =
@@ -69,6 +69,8 @@ export interface FeedApplication {
     applicantProfile?: FeedApplicationApplicantProfile | null;
     nickname?: string;
     avatarUrl?: string | null;
+    spotConverted?: boolean;
+    spotId?: string;
 }
 
 export interface FeedAuthorProfile {
@@ -91,6 +93,10 @@ export interface FeedItem {
     type: FeedItemType;
     status: FeedItemStatus;
     progressPercent?: number; // OFFER 타입일 때 펀딩 진행률 (0~100)
+    fundingGoal?: number;
+    fundedAmount?: number;
+    remainingAmount?: number;
+    remainingParticipantCount?: number;
     imageUrl?: string;
     views: number;
     likes: number;
diff --git a/src/features/feed/ui/detail/FeedParticipationActions.tsx b/src/features/feed/ui/detail/FeedParticipationActions.tsx
index 885a18c..c1c5722 100644
--- a/src/features/feed/ui/detail/FeedParticipationActions.tsx
+++ b/src/features/feed/ui/detail/FeedParticipationActions.tsx
@@ -367,11 +367,32 @@ export function FeedParticipationActions({
 
         try {
             if (decision === 'accept') {
-                await acceptFeedApplication.mutateAsync({
+                const response = await acceptFeedApplication.mutateAsync({
                     feedId: item.id,
                     applicationId,
                 });
-                showBottomNavMessage('신청자를 수락했어요.', '');
+                const convertedSpotId = response.data.spotId ?? item.spotId;
+
+                if (response.data.spotConverted && convertedSpotId) {
+                    showBottomNavMessage(
+                        '스팟이 생성됐어요. 팀 채팅으로 이동할게요.',
+                        '',
+                    );
+                    router.push(
+                        `/chat?tab=team&spotId=${encodeURIComponent(convertedSpotId)}`,
+                    );
+                    return;
+                }
+
+                const remainCopy =
+                    item.remainingParticipantCount != null &&
+                    item.remainingParticipantCount > 0
+                        ? ` 앞으로 ${item.remainingParticipantCount}명 더 필요해요.`
+                        : item.remainingAmount != null &&
+                            item.remainingAmount > 0
+                          ? ` 앞으로 ${item.remainingAmount.toLocaleString('ko-KR')}P 더 필요해요.`
+                          : '';
+                showBottomNavMessage(`신청자를 수락했어요.${remainCopy}`, '');
             } else {
                 await rejectFeedApplication.mutateAsync({
                     feedId: item.id,
diff --git a/src/features/spot/api/spot-api.ts b/src/features/spot/api/spot-api.ts
index d7475f4..7038493 100644
--- a/src/features/spot/api/spot-api.ts
+++ b/src/features/spot/api/spot-api.ts
@@ -21,12 +21,7 @@ import type {
     SpotReview,
     SubmitSettlementPayload,
 } from '@/entities/spot/types';
-import {
-    approveMockSpotSettlement,
-    getMockSpotReviews,
-    submitMockSpotReview,
-    submitMockSpotSettlement,
-} from '../model/mock';
+import { getMockSpotReviews, submitMockSpotReview } from '../model/mock';
 
 export type SpotListParams = {
     type?: SpotType;
@@ -94,9 +89,34 @@ type BackendPaged<T> = {
     meta?: PagedResponse<T>['meta'];
 };
 
-type BackendSpot = Omit<Spot, 'type' | 'status'> & {
+type BackendSettlementLineItem = {
+    label?: string;
+    amount?: number;
+};
+
+type BackendSettlement = {
+    id?: string | number;
+    spotId?: string | number;
+    status?: SpotSettlementApproval['status'];
+    summary?: string;
+    totalAmount?: number;
+    requestedAmount?: number;
+    approvedAmount?: number;
+    lineItems?: BackendSettlementLineItem[];
+    requesterId?: string;
+    createdAt?: string;
+    approvedBy?: string;
+    approvedAt?: string | null;
+};
+
+type BackendSpot = Omit<Spot, 'id' | 'type' | 'status'> & {
+    id: string | number;
     type: Spot['type'] | 'RENT';
     status: Spot['status'];
+    settlement?: BackendSettlement | null;
+    participantCount?: number;
+    isOwner?: boolean;
+    timeline?: SpotDetail['timeline'];
 };
 
 type BackendSpotMapItem = Omit<SpotMapItem, 'id' | 'type'> & {
@@ -107,7 +127,7 @@ type BackendSpotMapItem = Omit<SpotMapItem, 'id' | 'type'> & {
 type BackendParticipant = {
     userId: string;
     nickname?: string;
-    role: SpotParticipant['role'];
+    role?: SpotParticipant['role'];
     joinedAt: string;
 };
 
@@ -172,10 +192,41 @@ type BackendNote = {
 function toSpot(spot: BackendSpot): Spot {
     return {
         ...spot,
+        id: String(spot.id),
         type: spot.type === 'RENT' ? 'OFFER' : spot.type,
     };
 }
 
+function toSettlement(
+    settlement?: BackendSettlement | null,
+): SpotSettlementApproval | null {
+    if (!settlement) return null;
+
+    const requestedAmount =
+        settlement.requestedAmount ?? settlement.totalAmount ?? 0;
+    const approvedAmount =
+        settlement.approvedAmount ??
+        (settlement.status === 'APPROVED' ? requestedAmount : 0);
+
+    return {
+        id: settlement.id == null ? undefined : String(settlement.id),
+        spotId:
+            settlement.spotId == null ? undefined : String(settlement.spotId),
+        status: settlement.status ?? 'PENDING',
+        requestedAmount,
+        approvedAmount,
+        summary: settlement.summary ?? '',
+        lineItems: (settlement.lineItems ?? []).map((item) => ({
+            label: item.label ?? '정산 항목',
+            amount: item.amount ?? 0,
+        })),
+        submittedBy: settlement.requesterId,
+        submittedAt: settlement.createdAt,
+        approvedBy: settlement.approvedBy,
+        approvedAt: settlement.approvedAt ?? undefined,
+    };
+}
+
 function toSpotMapItem(item: BackendSpotMapItem): SpotMapItem {
     return {
         ...item,
@@ -187,7 +238,10 @@ function toSpotMapItem(item: BackendSpotMapItem): SpotMapItem {
 function toSpotDetail(spot: BackendSpot): SpotDetail {
     return {
         ...toSpot(spot),
-        timeline: [],
+        participantCount: spot.participantCount,
+        isOwner: spot.isOwner,
+        settlement: toSettlement(spot.settlement),
+        timeline: spot.timeline ?? [],
     };
 }
 
@@ -202,7 +256,7 @@ function toParticipant(participant: BackendParticipant): SpotParticipant {
     return {
         userId: participant.userId,
         nickname: participant.nickname ?? participant.userId,
-        role: participant.role,
+        role: (participant.role ?? 'PARTNER') as SpotParticipant['role'],
         joinedAt: participant.joinedAt,
     };
 }
@@ -680,10 +734,34 @@ export const spotsApi = {
         id: string,
         payload: SubmitSettlementPayload,
     ): Promise<{ data: SpotSettlementApproval }> =>
-        submitMockSpotSettlement(id, payload),
+        clientApiFetch<BackendSettlement>(endpoints.spots.settlement(id), {
+            method: 'POST',
+            body: JSON.stringify(payload),
+        }).then((data) => ({
+            data: toSettlement(data) ?? {
+                status: 'PENDING',
+                requestedAmount: 0,
+                approvedAmount: 0,
+                summary: '',
+                lineItems: [],
+            },
+        })),
 
     approveSettlement: async (
         id: string,
     ): Promise<{ data: SpotSettlementApproval }> =>
-        approveMockSpotSettlement(id),
+        clientApiFetch<BackendSettlement>(
+            endpoints.spots.settlementApprove(id),
+            {
+                method: 'POST',
+            },
+        ).then((data) => ({
+            data: toSettlement(data) ?? {
+                status: 'APPROVED',
+                requestedAmount: 0,
+                approvedAmount: 0,
+                summary: '',
+                lineItems: [],
+            },
+        })),
 };
diff --git a/src/features/spot/client/detail/SettlementSubmitSheet.tsx b/src/features/spot/client/detail/SettlementSubmitSheet.tsx
index 2780043..3f0012f 100644
--- a/src/features/spot/client/detail/SettlementSubmitSheet.tsx
+++ b/src/features/spot/client/detail/SettlementSubmitSheet.tsx
@@ -25,6 +25,7 @@ type Props = {
     open: boolean;
     onClose: () => void;
     forfeitPool?: SpotForfeitPool;
+    onSubmitted?: () => void;
 };
 
 export function SettlementSubmitSheet({
@@ -32,6 +33,7 @@ export function SettlementSubmitSheet({
     open,
     onClose,
     forfeitPool,
+    onSubmitted,
 }: Props) {
     const [items, setItems] = useState<LineItemDraft[]>([
         emptyLineItem(),
@@ -103,6 +105,7 @@ export function SettlementSubmitSheet({
         setItems([emptyLineItem(), emptyLineItem()]);
         setSummary('');
         onClose();
+        onSubmitted?.();
     };
 
     return (
diff --git a/src/features/spot/client/detail/SpotSettlementActions.tsx b/src/features/spot/client/detail/SpotSettlementActions.tsx
index 50e3b0e..a55aad5 100644
--- a/src/features/spot/client/detail/SpotSettlementActions.tsx
+++ b/src/features/spot/client/detail/SpotSettlementActions.tsx
@@ -17,6 +17,7 @@ type Props = {
     currentUserId: string;
     authorId: string;
     forfeitPool?: SpotForfeitPool;
+    onSettled?: () => void;
 };
 
 export function SpotSettlementActions({
@@ -26,6 +27,7 @@ export function SpotSettlementActions({
     currentUserId,
     authorId,
     forfeitPool,
+    onSettled,
 }: Props) {
     const [sheetOpen, setSheetOpen] = useState(false);
     const [approveOpen, setApproveOpen] = useState(false);
@@ -47,6 +49,7 @@ export function SpotSettlementActions({
     const handleApprove = async () => {
         await approve.mutateAsync(spotId);
         setApproveOpen(false);
+        onSettled?.();
     };
 
     return (
@@ -79,6 +82,7 @@ export function SpotSettlementActions({
                 open={sheetOpen}
                 onClose={() => setSheetOpen(false)}
                 forfeitPool={forfeitPool}
+                onSubmitted={onSettled}
             />
 
             <Modal
diff --git a/src/lib/endpoint.ts b/src/lib/endpoint.ts
index 92353ab..af3e74f 100644
--- a/src/lib/endpoint.ts
+++ b/src/lib/endpoint.ts
@@ -83,6 +83,10 @@ export const endpoints = {
         cancel: (spotId: string) => backendEndpoint(`/spots/${spotId}/cancel`),
         complete: (spotId: string) =>
             backendEndpoint(`/spots/${spotId}/complete`),
+        settlement: (spotId: string) =>
+            backendEndpoint(`/spots/${spotId}/settlement`),
+        settlementApprove: (spotId: string) =>
+            backendEndpoint(`/spots/${spotId}/settlement/approve`),
     },
     feeds: {
         root: backendEndpoint('/feeds'),