fix: 출연진 등록 QA 대응 및 모바일 조금 대응

apps/admin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts

@@ -1,4 +1,4 @@
-import { Button } from '@boolti/ui';
+import { Button, mq_lg } from '@boolti/ui';
 import styled from '@emotion/styled';
 
 interface ShowInfoFormLabelProps {
@@ -23,6 +23,10 @@ const ShowInfoFormLabel = styled.span<ShowInfoFormLabelProps>`
     display: ${({ required }) => (required ? 'inline' : 'none')};
     margin-left: 2px;
   }
+
+  &:first-child {
+    padding-top: 8px;
+  }
 `;
 
 const MemberList = styled.div`
@@ -107,11 +111,14 @@ const MemberAddButton = styled.button`
   background: var(--W-White, #fff);
   ${({ theme }) => theme.typo.sh1};
   color: ${({ theme }) => theme.palette.grey.g40};
-  width: 536px;
 
   & > svg {
     margin-right: 8px;
   }
+
+  ${mq_lg} {
+    width: 536px;
+  }
 `;
 
 const RegisterButton = styled(Button)`
@@ -153,6 +160,10 @@ const ButtonWrap = styled.div`
   justify-content: space-between;
   align-items: center;
   margin-top: 32px;
+  padding-bottom: 16px;
+  ${mq_lg} {
+    padding-bottom: 0;
+  }
 `;
 
 const ErrorMessage = styled.span`

apps/admin/src/components/ShowCastInfoFormDialogContent/index.tsx

@@ -26,7 +26,7 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
     name: prevShowCastInfo?.name,
     members: previousShowCastInfoMemberLength > 0 ? prevShowCastInfo?.members : [{}],
   };
-  const { control, getValues, watch } = useForm<TempShowCastInfoFormInput>({
+  const { control, getValues, watch, getFieldState } = useForm<TempShowCastInfoFormInput>({
     defaultValues,
   });
   const { fields, append, remove, update } = useFieldArray({
@@ -42,8 +42,6 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
     };
   });
 
-  const disabled = !getValues('name');
-
   const toast = useToast();
   const confirm = useConfirm();
 
@@ -53,11 +51,23 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
   const [isMemberFieldBlurred, setIsMemberFieldBlurred] = useState<
     Array<{ userCode: boolean; roleName: boolean }>
   >(
-    prevShowCastInfo?.members
+    prevShowCastInfo?.members && previousShowCastInfoMemberLength > 0
       ? prevShowCastInfo.members.map(() => ({ userCode: false, roleName: false }))
       : [{ userCode: false, roleName: false }],
   );
 
+  const disabled =
+    !getValues('name') ||
+    (getFieldState('members').isTouched &&
+      controlledFields.some(
+        ({ userImgPath, userNickname, roleName }, index) =>
+          !userImgPath ||
+          !userNickname ||
+          !roleName ||
+          isMemberFieldBlurred[index].roleName ||
+          isMemberFieldBlurred[index].userCode,
+      ));
+
   return (
     <>
       <Styled.ShowInfoFormLabel required>팀명</Styled.ShowInfoFormLabel>
@@ -258,13 +268,7 @@ const ShowCastInfoFormDialogContent = ({ onDelete, prevShowCastInfo, onSave }: P
           type="button"
           colorTheme="primary"
           size="bold"
-          disabled={
-            disabled ||
-            controlledFields.some(
-              ({ userImgPath, userNickname, roleName }) =>
-                !userImgPath || !userNickname || !roleName,
-            )
-          }
+          disabled={disabled}
           onClick={async (e) => {
             e.preventDefault();
 

apps/admin/src/components/ShowInfoFormContent/ShowCastInfoFormContent.tsx

@@ -1,4 +1,4 @@
-import { Button, useDialog } from '@boolti/ui';
+import { useDialog } from '@boolti/ui';
 
 import Styled from './ShowInfoFormContent.styles';
 import { PlusIcon } from '@boolti/icon';
@@ -13,43 +13,51 @@ interface Props {
 const ShowCastInfoFormContent = ({ onSave }: Props) => {
   const dialog = useDialog();
 
+  const onClick = () => {
+    dialog.open({
+      isAuto: true,
+      title: '출연진 정보 등록',
+      content: (
+        <ShowCastInfoFormDialogContent
+          onSave={async (value) => {
+            try {
+              await onSave(value);
+              dialog.close();
+            } catch {
+              return new Promise((_, reject) => reject('저장 중 오류가 발생하였습니다.'));
+            }
+          }}
+        />
+      ),
+    });
+  };
+
   return (
     <Styled.ShowInfoFormGroup>
       <Styled.ShowInfoFormGroupHeader>
         <Styled.ShowInfoFormGroupInfo>
-          <Styled.ShowInfoFormTitle>출연진 정보</Styled.ShowInfoFormTitle>
+          <Styled.ShowInfoFormTitle>
+            출연진 정보
+            <Styled.MobileCastInfoRegisterButton type="button" onClick={onClick}>
+              <PlusIcon />
+              등록하기
+            </Styled.MobileCastInfoRegisterButton>
+          </Styled.ShowInfoFormTitle>
           <Styled.ShowInfoFormSubtitle>
             출연진 정보를 팀 단위로 등록해 주세요.
             <br />
             정보는 공연 등록 이후에도 <strong>수정 및 추가</strong>할 수 있어요.
           </Styled.ShowInfoFormSubtitle>
         </Styled.ShowInfoFormGroupInfo>
-        <Button
+        <Styled.DesktopCastInfoRegisterButton
           type="button"
           colorTheme="netural"
           size="bold"
           icon={<PlusIcon />}
-          onClick={() => {
-            dialog.open({
-              isAuto: true,
-              title: '출연진 정보 등록',
-              content: (
-                <ShowCastInfoFormDialogContent
-                  onSave={async (value) => {
-                    try {
-                      await onSave(value);
-                      dialog.close();
-                    } catch {
-                      return new Promise((_, reject) => reject('저장 중 오류가 발생하였습니다.'));
-                    }
-                  }}
-                />
-              ),
-            });
-          }}
+          onClick={onClick}
         >
           등록하기
-        </Button>
+        </Styled.DesktopCastInfoRegisterButton>
       </Styled.ShowInfoFormGroupHeader>
     </Styled.ShowInfoFormGroup>
   );

apps/admin/src/components/ShowInfoFormContent/ShowInfoFormContent.styles.ts

@@ -45,6 +45,9 @@ const ShowInfoFormGroupInfo = styled.div`
 `;
 
 const ShowInfoFormTitle = styled.h3`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   ${({ theme }) => theme.typo.sh2};
   color: ${({ theme }) => theme.palette.grey.g90};
 
@@ -534,6 +537,26 @@ const MobileTicketAction = styled.div<MobileTicketActionProps>`
   }
 `;
 
+const MobileCastInfoRegisterButton = styled.button`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  ${({ theme }) => theme.typo.sh1};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  cursor: pointer;
+
+  ${mq_lg} {
+    display: none;
+  }
+`;
+
+const DesktopCastInfoRegisterButton = styled(Button)`
+  display: none;
+  ${mq_lg} {
+    display: block;
+  }
+`;
+
 export default {
   ShowInfoFormGroup,
   ShowInfoFormGroupHeader,
@@ -583,4 +606,6 @@ export default {
   MobileTicketGroupHeader,
   MobileTicketGroupInfo,
   MobileTicketAction,
+  DesktopCastInfoRegisterButton,
+  MobileCastInfoRegisterButton,
 };

apps/admin/src/pages/ShowInfoPage/index.tsx

@@ -36,6 +36,7 @@ import Portal from '@boolti/ui/src/components/Portal';
 import ShowCastInfoFormContent from '~/components/ShowInfoFormContent/ShowCastInfoFormContent';
 import ShowCastInfo from '~/components/ShowCastInfo';
 import { TempShowCastInfoFormInput } from '~/components/ShowCastInfoFormDialogContent';
+import { useBodyScrollLock } from '~/hooks/useBodyScrollLock';
 
 const ShowInfoPage = () => {
   const queryClient = useQueryClient();
@@ -66,6 +67,8 @@ const ShowInfoPage = () => {
 
   const [previewDrawerOpen, setPreviewDrawerOpen] = useState<boolean>(false);
 
+  useBodyScrollLock(previewDrawerOpen);
+
   const onSubmit: SubmitHandler<ShowInfoFormInputs> = async (data) => {
     if (!show) return;
 

apps/preview/src/index.css

@@ -18,3 +18,9 @@
     'Segoe UI Symbol',
     sans-serif;
 }
+
+body {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

packages/ui/src/components/ShowPreview/ShowCastInfo.tsx

@@ -13,30 +13,32 @@ interface Props {
 
 const ShowCastInfo = ({ showCastTeams }: Props) => {
   return (
-    <Styled.ShowInfo>
+    <Styled.CastInfo>
       {showCastTeams.length > 0 ? (
         showCastTeams.map((team, teamIndex) => (
-          <Styled.ShowInfoGroup key={teamIndex}>
+          <Styled.ShowInfoGroup key={teamIndex} type="small">
             <Styled.ShowInfoTitleContainer>
               <Styled.ShowInfoTitle>{team.name}</Styled.ShowInfoTitle>
             </Styled.ShowInfoTitleContainer>
-            <Styled.ShowCastList>
-              {team.members?.map((member, memberIndex) => (
-                <Styled.ShowCastListItem key={memberIndex}>
-                  <Styled.UserImage
-                    style={
-                      {
-                        '--imgPath': `url(${member.userImgPath})`,
-                      } as React.CSSProperties
-                    }
-                  />
-                  <Styled.UserInfoWrap>
-                    <Styled.UserNickname>{member.userNickname}</Styled.UserNickname>
-                    <Styled.UserRoleName>{member.roleName}</Styled.UserRoleName>
-                  </Styled.UserInfoWrap>
-                </Styled.ShowCastListItem>
-              ))}
-            </Styled.ShowCastList>
+            {team.members && team.members.length > 0 && (
+              <Styled.ShowCastList>
+                {team.members.map((member, memberIndex) => (
+                  <Styled.ShowCastListItem key={memberIndex}>
+                    <Styled.UserImage
+                      style={
+                        {
+                          '--imgPath': `url(${member.userImgPath})`,
+                        } as React.CSSProperties
+                      }
+                    />
+                    <Styled.UserInfoWrap>
+                      <Styled.UserNickname>{member.userNickname}</Styled.UserNickname>
+                      <Styled.UserRoleName>{member.roleName}</Styled.UserRoleName>
+                    </Styled.UserInfoWrap>
+                  </Styled.ShowCastListItem>
+                ))}
+              </Styled.ShowCastList>
+            )}
           </Styled.ShowInfoGroup>
         ))
       ) : (
@@ -45,7 +47,7 @@ const ShowCastInfo = ({ showCastTeams }: Props) => {
           <Styled.EmptyCastTeamDescription>조금만 기다려주세요!</Styled.EmptyCastTeamDescription>
         </Styled.EmptryCastTeam>
       )}
-    </Styled.ShowInfo>
+    </Styled.CastInfo>
   );
 };
 

packages/ui/src/components/ShowPreview/ShowPreview.styles.ts

@@ -122,8 +122,12 @@ const ShowPreviewTicketPeriodText = styled.p`
 
 const ShowInfo = styled.div``;
 
-const ShowInfoGroup = styled.div`
-  padding: 32px 0;
+const CastInfo = styled.div`
+  padding-bottom: 16px;
+`;
+
+const ShowInfoGroup = styled.div<{ type?: 'small' | 'normal' }>`
+  padding: ${({ type = 'normal' }) => (type === 'normal' ? '32px 0' : '24px 0')};
   border-bottom: 1px solid ${({ theme }) => theme.palette.mobile.grey.g85};
 
   &:first-of-type {
@@ -139,7 +143,10 @@ const ShowInfoTitleContainer = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 16px;
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
 `;
 
 const ShowInfoTitle = styled.h3`
@@ -330,6 +337,7 @@ export default {
   ShowPreviewTicketPeriodInfo,
   ShowPreviewTicketPeriodTitle,
   ShowPreviewTicketPeriodText,
+  CastInfo,
   ShowInfo,
   ShowInfoGroup,
   ShowInfoTitleContainer,