Feat/guests

package.json

@@ -10,7 +10,8 @@
     "check:types": "tsc",
     "check:format": "biome check .",
     "check:unused": "knip",
-    "check-all": "yarn check:types && yarn check:format && yarn check:unused"
+    "check-all": "yarn check:types && yarn check:format && yarn check:unused",
+    "fix": "yarn biome check --write ."
   },
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.1.15",

src/layouts/RootLayout.tsx

@@ -7,7 +7,7 @@ export default function RootLayout() {
     <div className="flex flex-col min-h-screen">
       <Header />
       <main
-        className="flex w-full flex-1 flex-col items-center justify-center bg-white px-3 xs:px-0"
+        className="flex w-full flex-1 flex-col bg-white px-3 xs:px-0"
         style={{ padding: '2rem' }}
       >
         <Outlet />

src/routes.ts

@@ -1,6 +1,7 @@
 import { createBrowserRouter } from 'react-router';
 import RootLayout from './layouts/RootLayout';
 import Event from './routes/Event';
+import Guests from './routes/Guests';
 import Home from './routes/Home';
 import Login from './routes/Login';
 import RegisterChoice from './routes/RegisterChoice';
@@ -22,6 +23,9 @@ export const router = createBrowserRouter([
   {
     path: '/event/:id',
     Component: RootLayout,
-    children: [{ index: true, Component: Event }],
+    children: [
+      { index: true, Component: Event },
+      { path: 'guests', Component: Guests },
+    ],
   },
 ]);

src/routes/Event.tsx

@@ -124,16 +124,14 @@ export default function Event() {
   }, [id]);
 
   const handleDelete = () => {
-    if (confirm('정말 이 일정을 삭제하시겠습니까?')) {
-      // 삭제 API 필요
-      console.info('Deleting event...');
-      navigate('/');
-    }
+    // 삭제 API 필요
+    console.info('Deleting event...');
+    toast.error('일정이 삭제되었습니다.');
+    navigate('/');
   };
 
   const handleCopyLink = () => {
     navigator.clipboard.writeText(joinLink);
-    // sonner 사용: 아주 간결합니다.
     toast.success('링크가 복사되었습니다!', {
       description: '참여자에게 주소를 공유해 보세요.',
     });
@@ -142,69 +140,70 @@ export default function Event() {
   if (!schedule) return null;
 
   return (
-    <div className="min-h-screen bg-white flex flex-col relative pb-20">
-      {/* 1. 상단 네비게이션*/}
-      <div className="max-w-screen-xl mx-auto w-full flex items-center justify-between px-6 py-8 sm:px-10">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => navigate(-1)}
-          className="rounded-full"
-        >
-          <IconChevronLeft />
-        </Button>
-        <h1 className="text-2xl sm:text-3xl font-bold flex-1 ml-6 truncate text-black">
-          {schedule.title}
-        </h1>
+    <div className="min-h-screen relative pb-20">
+      {/* 1. 상단 네비게이션 */}
+      <div className="w-full flex justify-center">
+        <div className="max-w-2xl min-w-[320px] w-[90%] flex items-center justify-between px-6 py-8">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate(-1)}
+            className="rounded-full"
+          >
+            <IconChevronLeft />
+          </Button>
+          <h1 className="text-2xl sm:text-3xl font-bold flex-1 ml-4 truncate text-black">
+            {schedule.title}
+          </h1>
 
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="rounded-full">
-              <IconMoreVertical />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-40" align="end">
-            <DropdownMenuItem
-              onClick={() => navigate('edit')}
-              className="cursor-pointer"
-            >
-              일정 수정하기
-            </DropdownMenuItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="rounded-full">
+                <IconMoreVertical />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-40" align="end">
+              <DropdownMenuItem
+                onClick={() => navigate('edit')}
+                className="cursor-pointer"
+              >
+                일정 수정하기
+              </DropdownMenuItem>
 
-            {/* 삭제 버튼은 AlertDialog와 연결 */}
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground text-red-600 font-medium">
-                  일정 삭제하기
-                </div>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    정말 일정을 삭제하시겠습니까?
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    삭제된 일정은 복구할 수 없으며, 모든 참여 정보가 함께
-                    사라집니다.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>취소</AlertDialogCancel>
-                  <AlertDialogAction
-                    onClick={handleDelete}
-                    className="bg-red-600 hover:bg-red-700"
-                  >
-                    삭제
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          </DropdownMenuContent>
-        </DropdownMenu>
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <div className="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent text-red-600 font-medium">
+                    일정 삭제하기
+                  </div>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      정말 일정을 삭제하시겠습니까?
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      삭제된 일정은 복구할 수 없으며, 모든 참여 정보가 함께
+                      사라집니다.
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>취소</AlertDialogCancel>
+                    <AlertDialogAction
+                      onClick={handleDelete}
+                      className="bg-red-600 hover:bg-red-700"
+                    >
+                      삭제
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </div>
 
       {/* 2. 메인 콘텐츠*/}
-      <div className="max-w-2xl mx-auto w-full px-6 flex flex-col items-start gap-10">
+      <div className="max-w-2xl min-w-[320px] mx-auto w-[90%] px-6 flex flex-col items-start gap-10">
         {/* 일정 정보 (왼쪽 정렬) */}
         <div className="text-left space-y-3 w-full">
           <p className="text-lg sm:text-xl font-bold text-black">
@@ -272,7 +271,7 @@ export default function Event() {
             </h2>
             <Button
               variant="link"
-              onClick={() => navigate('participants')}
+              onClick={() => navigate('guests')}
               className="text-base font-bold text-black p-0 h-auto"
             >
               더보기

src/routes/Guests.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
+import { toast } from 'sonner';
+
+// shadcn UI 컴포넌트
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+
+// SVG 아이콘 컴포넌트
+const IconChevronLeft = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="m15 18-6-6 6-6" />
+  </svg>
+);
+
+interface GuestResponse {
+  registration_id: number;
+  name: string;
+  email: string;
+  profile_image: string | null;
+}
+
+export default function Guests() {
+  // API로 불러올 registrations id
+  // const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  const [guests, setGuests] = useState<GuestResponse[]>([]);
+
+  useEffect(() => {
+    // 데이터 하드코딩
+    const mockGuests: GuestResponse[] = [
+      {
+        registration_id: 1,
+        name: '이준엽',
+        email: 'jun411@snu.ac.kr',
+        profile_image: 'https://github.com/shadcn.png',
+      },
+      {
+        registration_id: 2,
+        name: '이름2',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+      {
+        registration_id: 3,
+        name: '이름3',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+      {
+        registration_id: 4,
+        name: '이름4',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+      {
+        registration_id: 5,
+        name: '이름5',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+      {
+        registration_id: 6,
+        name: '이름6',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+      {
+        registration_id: 7,
+        name: '이름7',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+      {
+        registration_id: 8,
+        name: '이름8',
+        email: '이메일@example.com',
+        profile_image: null,
+      },
+    ];
+
+    setGuests(mockGuests);
+  }, []);
+
+  const handleCancelGuest = (regId: number, name: string) => {
+    // 삭제 API 필요
+    setGuests((prev) => prev.filter((g) => g.registration_id !== regId));
+    toast.success(`${name} 님의 참여가 취소되었습니다.`);
+  };
+
+  return (
+    <div className="min-h-screen relative pb-20">
+      {/* 1. 상단 네비게이션 */}
+      <div className="w-full flex justify-center">
+        <div className="max-w-2xl min-w-[320px] w-[90%] flex items-center px-6 py-8">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate(-1)}
+            className="rounded-full"
+          >
+            <IconChevronLeft />
+          </Button>
+          <h1 className="text-2xl sm:text-3xl font-bold ml-4 text-black">
+            참여자 명단({guests.length})
+          </h1>
+        </div>
+      </div>
+
+      {/* 2. 참여자 리스트 */}
+      <div className="max-w-2xl min-w-[320px] mx-auto w-[90%] px-6 flex flex-col gap-8 mt-4">
+        {guests.map((guest) => (
+          <div
+            key={guest.registration_id}
+            className="flex items-center justify-between w-full"
+          >
+            <div className="flex items-center gap-4">
+              <Avatar className="w-16 h-16 border-none shadow-sm">
+                <AvatarImage src={guest.profile_image || undefined} />
+                <AvatarFallback className="bg-black text-white text-xs">
+                  {guest.name.slice(0, 2)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex flex-col">
+                <span className="text-xl font-bold text-black">
+                  {guest.name}
+                </span>
+                <span className="text-gray-400 text-lg">{guest.email}</span>
+              </div>
+            </div>
+
+            {/* 강제취소 버튼 */}
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button
+                  variant="secondary"
+                  className="bg-[#333333] hover:bg-black text-white rounded-lg px-4 py-6 text-base font-bold"
+                >
+                  강제취소
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>
+                    <strong>{guest.name}</strong> 님의 신청을 취소하시겠습니까?
+                  </AlertDialogTitle>
+                  <AlertDialogDescription>
+                    취소 후 원복이 어렵습니다. 취소 메일이 참여자에게
+                    전송됩니다.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>신청 유지하기</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={() =>
+                      handleCancelGuest(guest.registration_id, guest.name)
+                    }
+                    className="bg-red-600 hover:bg-red-700"
+                  >
+                    취소하기
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}