🐛 Fix event button & horizontal width (#64)

### 📝 작업 내용

- 일정 신청 페이지에서 신청하기 버튼이 죽어있던걸 다시 연결했습니다.
- 참여자 목록 페이지에서 강제 취소 버튼에 api를 연결했습니다. 
- 일정 상세 페이지에서 가로 길이 오류를 해결했습니다.
- 취소 모달에서 버튼 색상을 파란색으로 수정했습니다.

### 📸 스크린샷 (선택)

### 🚀 리뷰 요구사항 (선택)

Author: jun-0411

src/components/EventDetailContent.tsx

@@ -14,7 +14,7 @@ interface ShortEventDetailContentProps {
 
 export function EventDetailContent({ view, event }: EventDetailContentProps) {
   return (
-    <div className="w-full flex flex-col items-start gap-10">
+    <div className="w-full flex flex-col gap-10">
       <section className="space-y-6">
         <div className="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm space-y-4">
           <h2 className="text-2xl font-extrabold text-gray-900">
@@ -36,7 +36,7 @@ export function EventDetailContent({ view, event }: EventDetailContentProps) {
         </div>
 
         <div className="bg-gray-50 rounded-2xl p-4 flex flex-col gap-2 text-lg">
-          <div className="flex items-start gap-2 text-gray-900">
+          <div className="flex gap-2 text-gray-900">
             <Clock className="w-4 h-4 mt-0.5 flex-shrink-0" />
             <div className="flex flex-wrap gap-x-1.5 leading-snug">
               <span className="font-medium">신청 기간:</span>

src/hooks/useEventDetail.ts

@@ -157,6 +157,24 @@ export default function useEventDetail(id?: string) {
     }
   };
 
+  // 7. 참여 강제 취소 로직 핸들러
+  const handleBanEvent = async (registrationId: string) => {
+    setLoading(true);
+    try {
+      await patchRegistration(registrationId, {
+        status: 'BANNED',
+      });
+      if (id) await handleFetchDetail(id);
+      return true;
+    } catch (error) {
+      toast.error('취소 처리 중 오류가 발생했습니다.');
+      console.error('Ban event error:', error);
+      return false;
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return {
     loading,
     data,
@@ -167,5 +185,6 @@ export default function useEventDetail(id?: string) {
     handleJoinEvent,
     handleCancelEvent,
     handleDeleteEvent,
+    handleBanEvent,
   };
 }

src/mocks/handlers/event.ts

@@ -14,8 +14,7 @@ export const eventHandlers = [
       event: {
         publicId: id as string,
         title: '모이샤 정기모임',
-        description:
-          '2월 2일 모이샤 정기모임을 가집니다!\n장소는 서울대 잔디광장이며 신청 마감 시 확정 신청자는 참가비 2,000원을 걷으니 참고 부탁드립니다!',
+        description: '2월 2일 모이샤 정기모임을 가집니다!',
         totalApplicants: 15,
         // DetailedEvent는 Event를 상속받으므로 필요한 기본 필드들(장소, 시간 등)이 포함되어야 합니다.
         location: '서울대 잔디광장',

src/routes/EventMain.tsx

@@ -187,7 +187,7 @@ export default function EventMain() {
                       <AlertDialogCancel>취소</AlertDialogCancel>
                       <AlertDialogAction
                         onClick={onDeleteClick}
-                        className="bg-red-600 hover:bg-red-700"
+                        className="bg-primary text-white hover:bg-primary/90 rounded-xl"
                       >
                         삭제
                       </AlertDialogAction>

src/routes/EventRegister.tsx

@@ -187,6 +187,23 @@ export default function EventRegister() {
               </a>
             </div>
           </div>
+
+          {/* 블러 푸터 (권한별 분기) */}
+          <footer className="fixed bottom-0 left-0 right-0 z-40">
+            <div className="h-16 bg-gradient-to-t from-white to-transparent" />
+            <div className="bg-white/90 backdrop-blur-xl px-6 pb-10 pt-2 flex flex-col items-center gap-2">
+              <div className="max-w-2xl min-w-[320px] mx-auto w-[90%] px-6 flex flex-col items-center gap-3">
+                <Button
+                  variant="moiming"
+                  size="xl"
+                  type="submit"
+                  className="w-full px-6 flex"
+                >
+                  신청하기
+                </Button>
+              </div>
+            </div>
+          </footer>
         </form>
 
         {/* 블러 푸터 (권한별 분기) */}

src/routes/Guests.tsx

@@ -1,4 +1,5 @@
 import LoadingSkeleton from '@/components/LoadingSkeleton';
+import useEventDetail from '@/hooks/useEventDetail';
 import { useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { useNavigate, useParams } from 'react-router';
@@ -26,6 +27,7 @@ export default function Guests() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<GuestStatus>('CONFIRMED');
+  const { handleBanEvent } = useEventDetail(id);
 
   // 1. 무한 스크롤 훅 연결
   const { data, isLoading, fetchNextPage, hasNextPage, isFetchingNextPage } =
@@ -48,9 +50,11 @@ export default function Guests() {
     }
   }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
 
-  const handleCancelGuest = (name: string | null) => {
-    // TODO: patchRegistration API 호출 로직 추가 필요
-    toast.success(`${name} 님의 참여가 취소되었습니다.`);
+  const handleCancelGuest = async (name: string | null, regId: string) => {
+    const success = await handleBanEvent(regId);
+    if (success) {
+      toast.success(`${name} 님의 참여가 취소되었습니다.`);
+    }
   };
 
   // 로딩 중이거나 데이터가 아직 없을 때 (리다이렉트 판단 전) 스피너나 빈 화면 표시
@@ -156,8 +160,10 @@ export default function Guests() {
                     <AlertDialogFooter>
                       <AlertDialogCancel>신청 유지하기</AlertDialogCancel>
                       <AlertDialogAction
-                        onClick={() => handleCancelGuest(guest.name)}
-                        className="bg-red-600 hover:bg-red-700"
+                        onClick={() =>
+                          handleCancelGuest(guest.name, guest.registrationId)
+                        }
+                        className="bg-primary text-white hover:bg-primary/90 rounded-xl"
                       >
                         취소하기
                       </AlertDialogAction>