From 95117ff8ec9c731c6950bbbd39200d66f3f9a311 Mon Sep 17 00:00:00 2001
From: chaeyeon LEE <98521882+colorkite10@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:29:28 +0900
Subject: [PATCH] SKRF-452 refactor: submitted forms page exception (#214)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 공연에 제출된 폼일 때 인당 예매수 보여주기

* refactor: 상태변경버튼 모달 메시지 '확인'->'승인'으로 변경

* refactor: 취소요청된 폼에 대해서는 상태변경 불가능

* refactor: ticketCount type 변경
---
 .../ChangeFormStatusButton.tsx                | 32 +++++++++++--------
 .../FormDetailModal/FormDetailModal.tsx       |  9 +++++-
 .../SubmittedForms/Category/Category.tsx      |  4 ++-
 .../SubmittedForm/SubmittedForm.tsx           | 12 ++++++-
 .../SubmittedForms/SubmittedForms.tsx         |  9 +++++-
 src/styles/common.ts                          |  1 +
 src/types/forms.ts                            |  3 +-
 7 files changed, 52 insertions(+), 18 deletions(-)

diff --git a/src/components/ChangeFormStatusButton/ChangeFormStatusButton.tsx b/src/components/ChangeFormStatusButton/ChangeFormStatusButton.tsx
index 3ba6353b..5d97e257 100644
--- a/src/components/ChangeFormStatusButton/ChangeFormStatusButton.tsx
+++ b/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()}
diff --git a/src/components/Modals/FormDetailModal/FormDetailModal.tsx b/src/components/Modals/FormDetailModal/FormDetailModal.tsx
index dc255724..bd138fae 100644
--- a/src/components/Modals/FormDetailModal/FormDetailModal.tsx
+++ b/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}>
diff --git a/src/components/SubmittedForms/Category/Category.tsx b/src/components/SubmittedForms/Category/Category.tsx
index 4cc76c52..bc21259e 100644
--- a/src/components/SubmittedForms/Category/Category.tsx
+++ b/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>;
       })}
diff --git a/src/components/SubmittedForms/SubmittedForm/SubmittedForm.tsx b/src/components/SubmittedForms/SubmittedForm/SubmittedForm.tsx
index 8eeec726..1234c35d 100644
--- a/src/components/SubmittedForms/SubmittedForm/SubmittedForm.tsx
+++ b/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}
diff --git a/src/components/SubmittedForms/SubmittedForms.tsx b/src/components/SubmittedForms/SubmittedForms.tsx
index 5b947677..e8916357 100644
--- a/src/components/SubmittedForms/SubmittedForms.tsx
+++ b/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}
               />
             );
diff --git a/src/styles/common.ts b/src/styles/common.ts
index e3989e41..9a1a8213 100644
--- a/src/styles/common.ts
+++ b/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};
 `;
 
diff --git a/src/types/forms.ts b/src/types/forms.ts
index 22e46bbb..a8480161 100644
--- a/src/types/forms.ts
+++ b/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 {