feat: 구매/참가자 관리 페이지 퍼블리싱

design-system/stories/buttons/SecondaryButton.stories.tsx

@@ -23,6 +23,12 @@ const meta = {
       description: '버튼 색상',
       defaultValue: 'pink',
     },
+    size: {
+      control: 'radio',
+      options: ['large', 'small'],
+      description: '버튼 크기',
+      defaultValue: 'large',
+    },
     onClick: {
       action: 'clicked',
       description: '버튼 클릭 핸들러',
@@ -36,19 +42,30 @@ export const Default: Story = {
   args: {
     label: 'Default Button',
     color: 'pink',
+    size: 'large',
   },
 };
 
-export const Pink: Story = {
+export const SmallPink: Story = {
   args: {
-    label: '전송하기',
+    label: '작은 버튼',
     color: 'pink',
+    size: 'small',
+  },
+};
+
+export const BigBlack: Story = {
+  args: {
+    label: '큰 버튼',
+    color: 'black',
+    size: 'large',
   },
 };
 
-export const Black: Story = {
+export const SmallBlack: Story = {
   args: {
-    label: '로그인',
+    label: '작은 검은 버튼',
     color: 'black',
+    size: 'small',
   },
 };

design-system/stories/buttons/TertiaryButton.stories.tsx

@@ -17,12 +17,24 @@ const meta = {
       description: '버튼에 표시될 텍스트',
       defaultValue: 'Button',
     },
+    type: {
+      control: 'radio',
+      options: ['button', 'submit'],
+      description: '버튼 타입',
+      defaultValue: 'button',
+    },
     color: {
       control: 'radio',
       options: ['pink', 'black'],
       description: '버튼 색상',
       defaultValue: 'pink',
     },
+    size: {
+      control: 'radio',
+      options: ['small', 'medium', 'large'], // medium 추가
+      description: '버튼 크기',
+      defaultValue: 'large',
+    },
     onClick: {
       action: 'clicked',
       description: '버튼 클릭 핸들러',
@@ -37,6 +49,7 @@ export const Default: Story = {
     label: 'Default Button',
     type: 'button',
     color: 'pink',
+    size: 'large',
   },
 };
 
@@ -45,6 +58,7 @@ export const Pink: Story = {
     label: '전송하기',
     type: 'button',
     color: 'pink',
+    size: 'large',
   },
 };
 
@@ -53,5 +67,24 @@ export const Black: Story = {
     label: '로그인',
     type: 'button',
     color: 'black',
+    size: 'large',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: '작은 버튼',
+    type: 'button',
+    color: 'pink',
+    size: 'small',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    label: '중간 버튼',
+    type: 'button',
+    color: 'pink',
+    size: 'medium',
   },
 };

design-system/ui/buttons/SecondaryButton.tsx

@@ -1,19 +1,25 @@
 interface SecondaryButtonProps {
   label: string;
   color: 'pink' | 'black';
+  size: 'small' | 'large';
   onClick?: () => void;
   className?: string;
 }
 
-const SecondaryButton = ({ label, color, onClick, className }: SecondaryButtonProps) => {
-  const baseStyle = `font-bold text-white
-  text-sm sm:px-3 sm:py-2 sm:text-xs sm:rounded
-  md:px-3.5 md:py-2.5 md:text-sm md:rounded-md
-  lg:px-4 lg:py-2.5 lg:text-base lg:rounded-md`;
+const SecondaryButton = ({ label, color, size, onClick, className }: SecondaryButtonProps) => {
+  const baseStyle = `font-bold text-white rounded`;
+
+  const sizeStyle =
+    size === 'large'
+      ? `text-sm sm:px-3 sm:py-2 sm:text-xs sm:rounded
+         md:px-3.5 md:py-2.5 md:text-sm md:rounded-md
+         lg:px-4 lg:py-2.5 lg:text-base lg:rounded-md`
+      : `px-2 py-1 text-xs`;
+
   const colorStyle = color === 'pink' ? 'bg-main' : 'bg-black';
 
   return (
-    <button className={`${baseStyle} ${colorStyle} ${className}`} onClick={onClick}>
+    <button className={`${baseStyle} ${sizeStyle} ${colorStyle} ${className}`} onClick={onClick}>
       {label}
     </button>
   );

design-system/ui/buttons/TertiaryButton.tsx

@@ -2,22 +2,28 @@ interface TertiaryButtonProps {
   label: string;
   type: 'button' | 'submit';
   color: 'pink' | 'black';
+  size: 'small' | 'medium' | 'large';
   onClick?: () => void;
   className?: string;
 }
 
-const TertiaryButton = ({ label, type, color, onClick, className }: TertiaryButtonProps) => {
-  const baseStyle = `flex justify-center items-center border
-  text-sm sm:px-2.5 sm:py-2 sm:text-xs sm:rounded
-  md:px-3 md:py-2.5 md:text-sm md:rounded-md
-  lg:px-3 lg:py-2.5 lg:text-base lg:rounded-md`;
+const TertiaryButton = ({ label, type, color, size, onClick, className }: TertiaryButtonProps) => {
+  const baseStyle = `flex justify-center items-center border rounded`;
+
+  const sizeClasses = {
+    small: 'px-1.5 py-0.5 text-11 md:px-2 md:text-11',
+    medium: 'px-4 py-1 text-sm',
+    large:
+      'text-sm sm:px-2.5 sm:py-2 sm:text-xs sm:rounded md:px-3 md:py-2.5 md:text-sm md:rounded-md lg:px-3 lg:py-2.5 lg:text-base lg:rounded-md',
+  };
+
   const colorStyle =
     color === 'pink'
       ? 'border-main text-main hover:bg-main hover:text-white hover:font-bold'
       : 'border-black text-black hover:bg-black hover:text-white hover:font-bold';
 
   return (
-    <button type={type} className={`${baseStyle} ${colorStyle} ${className}`} onClick={onClick}>
+    <button type={type} className={`${baseStyle} ${sizeClasses[size]} ${colorStyle} ${className}`} onClick={onClick}>
       {label}
     </button>
   );

design-system/ui/modals/ButtonModal.tsx

@@ -2,13 +2,12 @@ import { useState } from 'react';
 import { flexCenter, flexColumn } from '../../styles/flex';
 
 interface ButtonModalProps {
-  onClick: () => void;
+  onApply: (filters: string[]) => void;
   onClose: () => void;
   className?: string;
 }
 
-const ButtonModal = ({ onClick, onClose, className = '' }: ButtonModalProps) => {
-  const [open, setOpen] = useState(false);
+const ButtonModal = ({ onApply, onClose, className = '' }: ButtonModalProps) => {
   const [selectedFilter, setSelectedFilter] = useState<string[]>([]);
 
   const options = ['전체', '체크인 완료', '체크인 전'];
@@ -21,46 +20,43 @@ const ButtonModal = ({ onClick, onClose, className = '' }: ButtonModalProps) =>
   };
 
   return (
-    <div>
-      <button onClick={() => setOpen(true)}>필터</button>
-      {!open && (
-        <div className={`w-80 h-full space-y-4 px-6 py-5 rounded-[5px] border border-black ${className}`}>
-          <h1 className="text-sm text-black font-semibold">티켓 필터</h1>
-          <hr />
-          <div className={`${flexColumn} space-y-2`}>
-            <h2 className="text-sm text-black font-semibold">체크인</h2>
-            <div className="flex gap-1">
-              {options.map(option => (
-                <button
-                  key={option}
-                  onClick={() => handleSelectOption(option)}
-                  className={`${flexCenter} w-full h-7 mb-3 bg-white text-sm border-[0.3px] rounded-[2px] ${
-                    selectedFilter.includes(option)
-                      ? 'border-main text-main'
-                      : 'border-placeholderText text-placeholderText'
-                  }`}
-                >
-                  {option}
-                </button>
-              ))}
-            </div>
-            <div className="flex text-sm font-normal text-black space-x-2">
+    <div className="fixed inset-0 flex items-center justify-center w-full max-w-lg h-full mx-auto bg-black bg-opacity-30 z-30">
+      <div className={`w-[95%] space-y-3 px-6 py-5 rounded-[5px] bg-white ${className}`}>
+        <h1 className="text-sm text-black font-semibold">티켓 필터</h1>
+        <hr />
+        <div className={`${flexColumn} space-y-2`}>
+          <h2 className="text-sm text-black font-semibold">체크인</h2>
+          <div className="flex gap-2.5">
+            {options.map(option => (
               <button
-                onClick={onClose}
-                className="w-full h-7 rounded-[4px] border-[0.3px] border-black hover:bg-main hover:border-main hover:text-white"
+                key={option}
+                onClick={() => handleSelectOption(option)}
+                className={`${flexCenter} px-3 py-1 mb-6 bg-white text-sm border-[0.3px] rounded-[5px] ${
+                  selectedFilter.includes(option)
+                    ? 'border-main text-main'
+                    : 'border-placeholderText text-placeholderText'
+                }`}
               >
-                취소
+                {option}
               </button>
-              <button
-                onClick={onClick}
-                className="w-full h-7 rounded-[4px] border-[0.3px] border-black hover:bg-main hover:border-main hover:text-white"
-              >
-                적용하기
-              </button>
-            </div>
+            ))}
+          </div>
+          <div className="flex text-sm font-normal text-black space-x-2">
+            <button
+              onClick={onClose}
+              className="w-full h-7 rounded-[4px] border-[0.3px] border-black hover:bg-main hover:border-main hover:text-white"
+            >
+              취소
+            </button>
+            <button
+              onClick={() => onApply(selectedFilter)}
+              className="w-full h-7 rounded-[4px] border-[0.3px] border-black hover:bg-main hover:border-main hover:text-white"
+            >
+              확인
+            </button>
           </div>
         </div>
-      )}
+      </div>
     </div>
   );
 };

src/app/routes/Router.tsx

@@ -23,6 +23,7 @@ import TicketCreatePage from '../../pages/dashboard/ui/ticket/TicketCreatePage';
 import HostInfoPage from '../../pages/menu/ui/HostInfoPage';
 import EmailPage from '../../pages/dashboard/ui/EmailPage';
 import EventDetailsPage from '../../pages/event/ui/EventDetailsPage';
+import ParticipantsManagementPage from '../../pages/dashboard/ui/ParticipantsMangementPage';
 
 const routesConfig = [
   {
@@ -55,6 +56,11 @@ const routesConfig = [
     element: <EventDetailsPage />,
     requiresAuth: false,
   },
+  {
+    path: MAIN_ROUTES.search,
+    element: <SearchPage />,
+    requiresAuth: false,
+  },
   {
     path: MAIN_ROUTES.menu,
     element: <MenuPage />,
@@ -86,8 +92,8 @@ const routesConfig = [
     requiresAuth: false,
   },
   {
-    path: MAIN_ROUTES.search,
-    element: <SearchPage />,
+    path: MENU_ROUTES.hostInfo,
+    element: <HostInfoPage />,
     requiresAuth: false,
   },
   {
@@ -125,10 +131,9 @@ const routesConfig = [
     element: <EmailPage />,
     requiresAuth: false,
   },
-
   {
-    path: MENU_ROUTES.hostInfo,
-    element: <HostInfoPage />,
+    path: DASHBOARD_ROUTES.participantsMangement,
+    element: <ParticipantsManagementPage />,
     requiresAuth: false,
   },
 ];

src/app/routes/routes.ts

@@ -36,4 +36,5 @@ export const DASHBOARD_ROUTES = {
   ticket: `${MAIN_ROUTES.dashbord}/ticket`,
   ticketCreate: `${MAIN_ROUTES.dashbord}/ticket/create`,
   email: `${MAIN_ROUTES.dashbord}/email`,
+  participantsMangement: `${MAIN_ROUTES.dashbord}/participants-mangement`,
 };