SKRF-452 refactor: submitted forms page exception

src/components/ChangeFormStatusButton/ChangeFormStatusButton.tsx

@@ -5,6 +5,7 @@ import { EventStatus } from '@/types/event';
 import { FaCheckCircle } from 'react-icons/fa';
 import { FaRegCheckCircle } from 'react-icons/fa';
 
+import AlertModal from '../Modals/AlertModal';
 import ConfirmModal from '../Modals/ConfirmModal';
 import { ButtonValueStyled, StatusButtonContainer } from './ChangeFormStatusButton.style';
 
@@ -20,19 +21,24 @@ const ChangeFormStatusButton = ({ eventId, formId, status }: ChangeFormStatusBut
 
   return (
     <>
-      {showModal && (
-        <ConfirmModal
-          message={`상태를 ${status === 'CONFIRMED' ? '"대기"로' : '"확인"으로'} 변경하시겠습니까?`}
-          onConfirm={() =>
-            changeSubmittedFormStatus({
-              eventId,
-              formUserId: formId,
-              participationStatus: status === 'CONFIRMED' ? 'PENDING' : 'CONFIRMED',
-            })
-          }
-          onClose={modalClose}
-        />
-      )}
+      {showModal &&
+        (status === 'CANCEL_REQUESTED' ? (
+          <AlertModal message="취소요청한 폼은 상태를 변경할 수 없습니다." onClose={modalClose} />
+        ) : (
+          <ConfirmModal
+            message={`상태를 ${
+              status === 'CONFIRMED' ? '"대기"로' : '"승인"으로'
+            } 변경하시겠습니까?`}
+            onConfirm={() =>
+              changeSubmittedFormStatus({
+                eventId,
+                formUserId: formId,
+                participationStatus: status === 'CONFIRMED' ? 'PENDING' : 'CONFIRMED',
+              })
+            }
+            onClose={modalClose}
+          />
+        ))}
       <StatusButtonContainer
         status={status}
         onClick={() => modalOpen()}

src/components/Modals/FormDetailModal/FormDetailModal.tsx

@@ -8,14 +8,21 @@ interface FormDetailModalProps {
   onClose: () => void;
   options: { title: string; content: string }[];
   nthForm: number;
+  ticketCount?: string;
 }
 
-const FormDetailModal = ({ onClose, options, nthForm }: FormDetailModalProps) => {
+const FormDetailModal = ({ onClose, options, nthForm, ticketCount }: FormDetailModalProps) => {
   return (
     <Portal>
       <BackgroundOverlay onClick={onClose}>
         <FormDetailModalContainer>
           <SubmittedFormDetailTitleStyled>{`${nthForm}번째 폼`}</SubmittedFormDetailTitleStyled>
+          {ticketCount && (
+            <FormItemContainer>
+              <QuestionStyled>인원수</QuestionStyled>
+              <div>{ticketCount}</div>
+            </FormItemContainer>
+          )}
           {options.map((option, index) => {
             return (
               <FormItemContainer key={index}>

src/components/SubmittedForms/Category/Category.tsx

@@ -9,15 +9,17 @@ import {
 interface CategoryProps {
   optionTitles: string[];
   managed: boolean;
+  isPerform: boolean;
 }
 
-const Category = ({ optionTitles, managed }: CategoryProps) => {
+const Category = ({ optionTitles, managed, isPerform }: CategoryProps) => {
   const manageTitles = ['요청', '상태', '취소'];
 
   return (
     <CategoryStyled>
       <CategoryNthStyled>순서</CategoryNthStyled>
       <CategoryRowStyled>제출시간</CategoryRowStyled>
+      {isPerform && <CategoryNthStyled>인원</CategoryNthStyled>}
       {optionTitles.map((title, index) => {
         return <CategoryItemStyled key={index}>{title}</CategoryItemStyled>;
       })}

src/components/SubmittedForms/SubmittedForm/SubmittedForm.tsx

@@ -17,6 +17,7 @@ interface SubmittedFormProps {
     status: EventStatus;
     dateTime: string;
   };
+  ticketCount?: string;
   managed: boolean;
 }
 
@@ -26,6 +27,7 @@ const SubmittedForm = ({
   userId,
   options,
   participation,
+  ticketCount,
   managed,
 }: SubmittedFormProps) => {
   const { showModal, modalOpen, modalClose } = useModal();
@@ -34,10 +36,18 @@ const SubmittedForm = ({
 
   return (
     <>
-      {showModal && <FormDetailModal onClose={modalClose} options={options} nthForm={nthForm} />}
+      {showModal && (
+        <FormDetailModal
+          onClose={modalClose}
+          options={options}
+          nthForm={nthForm}
+          ticketCount={ticketCount}
+        />
+      )}
       <FormStyled key={index}>
         <FormNthStyled>{nthForm}</FormNthStyled>
         <FormRowStyled>{dateTime}</FormRowStyled>
+        {ticketCount && <FormNthStyled>{ticketCount}</FormNthStyled>}
         {options.map((option, index) => (
           <FormItemStyled onClick={modalOpen} key={index}>
             {option.content}

src/components/SubmittedForms/SubmittedForms.tsx

@@ -10,12 +10,18 @@ import {
 } from './SubmittedForms.style';
 
 const SubmittedForms = ({ formInfo, userForms }: { formInfo: FormInfo; userForms: UserForm[] }) => {
+  const isPerform = Boolean(userForms[0].ticketCount);
+
   return (
     <SubmittedFormsContainer>
       <SubmittedFormsWrapper>
         <FormsWrapper>
           <FormLengthStyled>{`제출된 폼: ${formInfo.count}`}</FormLengthStyled>
-          <Category optionTitles={formInfo.optionTitles} managed={formInfo.managed} />
+          <Category
+            optionTitles={formInfo.optionTitles}
+            managed={formInfo.managed}
+            isPerform={isPerform}
+          />
           {userForms?.map((form, index) => {
             return (
               <SubmittedForm
@@ -25,6 +31,7 @@ const SubmittedForms = ({ formInfo, userForms }: { formInfo: FormInfo; userForms
                 userId={form.userId}
                 options={form.options}
                 participation={form.participation}
+                ticketCount={form.ticketCount}
                 managed={formInfo.managed}
               />
             );

src/styles/common.ts

@@ -106,6 +106,7 @@ const CommonEmptyEventsWrapper = styled.div`
   justify-content: center;
   align-items: center;
   width: 100%;
+  padding: 2rem 0;
   color: ${Theme.color.gray};
 `;
 

src/types/forms.ts

@@ -2,7 +2,7 @@ import { EventStatus } from './event';
 
 interface Form {
   title: string;
-  content: string; //#TODO: boolean일 수도 있음 (체크박스?)
+  content: string;
 }
 
 interface UserForm {
@@ -12,6 +12,7 @@ interface UserForm {
     status: EventStatus;
     dateTime: string;
   };
+  ticketCount: string;
 }
 
 interface FormInfo {