Merge pull request #260 from Nexters/feature/show-setting

공연 설정 팝업 구현
Nexters · Jan 11, 2025 · a6db111 · a6db111
2 parents ba35eb2 + 3f8288a
commit a6db111
Show file tree

Hide file tree

Showing 46 changed files with 1,258 additions and 684 deletions.
diff --git a/...dmin/src/components/AuthoritySettingDialogContent/AuthoritySettingDialogContent.styles.ts b/...dmin/src/components/AuthoritySettingDialogContent/AuthoritySettingDialogContent.styles.ts
diff --git a/apps/admin/src/components/AuthoritySettingDialogContent/index.tsx b/apps/admin/src/components/AuthoritySettingDialogContent/index.tsx
diff --git a/apps/admin/src/components/LinkFormDialogContent/LinkFormDialogContent.styles.ts b/apps/admin/src/components/LinkFormDialogContent/LinkFormDialogContent.styles.ts
@@ -54,7 +54,7 @@ const Label = styled.label<LabelProps>`
 
   &::after {
     content: ${({ required }) => (required ? "'*'" : 'none')};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     ${({ theme }) => theme.typo.b1};
     line-height: 22px;
     margin-left: 2px;

diff --git a/apps/admin/src/components/SettingDialogContent/SettingDialogContent.styles.ts b/apps/admin/src/components/SettingDialogContent/SettingDialogContent.styles.ts
@@ -211,7 +211,7 @@ const Label = styled.label<LabelProps>`
 
   &::after {
     content: ${({ required }) => (required ? "'*'" : 'none')};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     ${({ theme }) => theme.typo.b1};
     line-height: 22px;
     margin-left: 2px;
@@ -319,7 +319,7 @@ const TextAreaWrapper = styled.div`
 const TextAreaBox = styled.div<TextAreaProps>`
   border: 1px solid
     ${({ theme, hasError }) =>
-      hasError ? `${theme.palette.status.error} !important` : theme.palette.grey.g20};
+    hasError ? `${theme.palette.status.error1} !important` : theme.palette.grey.g20};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   position: absolute;

diff --git a/apps/admin/src/components/SettingDialogContent/index.tsx b/apps/admin/src/components/SettingDialogContent/index.tsx
@@ -394,7 +394,7 @@ const SettingDialogContent = ({ onDeleteAccount }: SettingDialogContentProps) =>
             </Styled.SettingDescriptionItem>
           </Styled.SettingDescriptionList>
           <Button
-            style={{ background: theme.palette.status.error }}
+            style={{ background: theme.palette.status.error1 }}
             colorTheme="primary"
             size="x-small"
             onClick={() => {

diff --git a/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts b/...dmin/src/components/ShowCastInfoFormDialogContent/ShowCastInfoFormDialogContent.styles.ts
@@ -22,7 +22,7 @@ const ShowInfoFormLabel = styled.span<ShowInfoFormLabelProps>`
   &::after {
     content: '*';
     ${({ theme }) => theme.typo.b3};
-    color: ${({ theme }) => theme.palette.status.error};
+    color: ${({ theme }) => theme.palette.status.error1};
     display: ${({ required }) => (required ? 'inline' : 'none')};
     margin-left: 2px;
   }
@@ -53,7 +53,7 @@ const FieldWrap = styled.div`
 const InputWrapper = styled.div<InputWrapperProps>`
   ${({ theme }) => theme.typo.b3};
   border: 1px solid
-    ${({ theme, isError }) => (isError ? theme.palette.status.error : theme.palette.grey.g20)};
+    ${({ theme, isError }) => (isError ? theme.palette.status.error1 : theme.palette.grey.g20)};
   border-radius: 4px;
   background-color: ${({ theme }) => theme.palette.grey.w};
   padding: 8px 36px 8px 12px;
@@ -67,7 +67,7 @@ const InputWrapper = styled.div<InputWrapperProps>`
 
   &:focus-within {
     border-color: ${({ theme, isError }) =>
-      isError ? theme.palette.status.error : theme.palette.grey.g70};
+    isError ? theme.palette.status.error1 : theme.palette.grey.g70};
   }
 `;
 
@@ -213,7 +213,7 @@ const ButtonWrap = styled.div`
 
 const ErrorMessage = styled.span`
   ${({ theme }) => theme.typo.b1};
-  color: ${({ theme }) => theme.palette.status.error};
+  color: ${({ theme }) => theme.palette.status.error1};
 `;
 
 const DraggableShowCastInfoMemberRow = styled.div`

diff --git a/apps/admin/src/components/ShowDeleteDialogContent/index.tsx b/apps/admin/src/components/ShowDeleteDialogContent/index.tsx
@@ -0,0 +1,32 @@
+import { useDeleteShow, useShowDetail } from '@boolti/api';
+import ShowDeleteForm from '../ShowDeleteForm';
+import { useToast } from '@boolti/ui';
+
+interface ShowDeleteDialogContentProps {
+  showId: number;
+}
+
+const ShowDeleteDialogContent: React.FC<ShowDeleteDialogContentProps> = ({ showId }) => {
+  const { data: show } = useShowDetail(showId);
+  const deleteShowMutation = useDeleteShow();
+
+  const toast = useToast();
+
+  if (!show) return;
+
+  return (
+    <ShowDeleteForm
+      showName={show.name}
+      onSubmit={async () => {
+        try {
+          await deleteShowMutation.mutateAsync(showId);
+          toast.success('공연을 삭제했습니다.');
+        } catch (_) {
+          toast.error('공연을 삭제하지 못했습니다. 잠시 후 다시 시도해주세요.');
+        }
+      }}
+    />
+  );
+};
+
+export default ShowDeleteDialogContent;
diff --git a/apps/admin/src/components/ShowDeleteForm/ShowDeleteForm.styles.ts b/apps/admin/src/components/ShowDeleteForm/ShowDeleteForm.styles.ts
@@ -1,10 +1,21 @@
+import { mq_lg } from '@boolti/ui';
 import styled from '@emotion/styled';
 
-const ShowDeleteForm = styled.form``;
+const ShowDeleteForm = styled.form`
+  position: relative;
+  margin: 16px 0;
+  height: calc(100vh - 148px);
+
+  ${mq_lg} {
+    margin: 0;
+    height: auto;
+  }
+`;
 
 const Description = styled.p`
   ${({ theme }) => theme.typo.b3};
   color: ${({ theme }) => theme.palette.grey.g70};
+  line-height: 24px;
   margin-bottom: 28px;
 `;
 
@@ -17,9 +28,24 @@ const TextFieldContainer = styled.div`
 `;
 
 const ButtonContainer = styled.div`
+  position: absolute;
+  width: 100%;
+  bottom: 0;
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+
+  button {
+    width: 100%;
+  }
+
+  ${mq_lg} {
+    position: initial;
+    bottom: auto;
+    justify-content: flex-end;
+
+    button {
+      width: auto;
+    }
+  }
 `;
 
 export default {

diff --git a/apps/admin/src/components/ShowDeleteForm/index.tsx b/apps/admin/src/components/ShowDeleteForm/index.tsx
@@ -31,9 +31,8 @@ const ShowDeleteForm = ({ showName, onSubmit }: ShowDeleteFormProps) => {
   return (
     <Styled.ShowDeleteForm onSubmit={handleSubmit(onSubmitForm)}>
       <Styled.Description>
-        삭제한 공연은 다시 되돌릴 수 없습니다.
-        <br />
-        삭제하시려면 정확한 공연명을 입력해 주세요.
+        공연을 삭제하시려면 정확한 공연명을 입력해 주세요.
+        <br />* 삭제 시 작성했던 공연 정보는 전부 사라지며 복구할 수 없어요.
       </Styled.Description>
       <Styled.TextFieldContainer>
         <TextField
@@ -50,16 +49,13 @@ const ShowDeleteForm = ({ showName, onSubmit }: ShowDeleteFormProps) => {
         />
       </Styled.TextFieldContainer>
       <Styled.ButtonContainer>
-        <Button type="button" size="bold" colorTheme="line">
-          취소
-        </Button>
         <Button
           type="submit"
           size="bold"
           colorTheme="primary"
           disabled={watch('showName', '').length === 0}
         >
-          삭제
+          삭제하기
         </Button>
       </Styled.ButtonContainer>
     </Styled.ShowDeleteForm>

diff --git a/apps/admin/src/components/ShowDetailLayout/ShowDetailLayout.styles.ts b/apps/admin/src/components/ShowDetailLayout/ShowDetailLayout.styles.ts
@@ -85,6 +85,24 @@ const ShowName = styled.h2<ShowNameProps>`
   }
 `;
 
+const ShowSettingButtonContainer = styled.div`
+  margin-right: 20px;
+
+  ${mq_lg} {
+    margin-right: 0;
+  }
+`;
+
+const HostListContainer = styled.div`
+  margin: 16px 0;
+  height: calc(100vh - 148px);
+
+  ${mq_lg} {
+    margin: 0;
+    height: auto;
+  }
+`;
+
 const TabContainer = styled.div`
   padding: 0 20px;
   white-space: nowrap;
@@ -177,6 +195,8 @@ export default {
   HeaderContent,
   ShowNameWrapper,
   ShowName,
+  ShowSettingButtonContainer,
+  HostListContainer,
   TabContainer,
   Tab,
   TabItem,

diff --git a/apps/admin/src/components/ShowDetailLayout/index.tsx b/apps/admin/src/components/ShowDetailLayout/index.tsx
@@ -6,7 +6,7 @@ import {
 } from '@boolti/api';
 import { ArrowLeftIcon } from '@boolti/icon';
 import { Setting } from '@boolti/icon/src/components/Setting.tsx';
-import { palette, useDialog } from '@boolti/ui';
+import { Button, palette, useStepDialog } from '@boolti/ui';
 import { useTheme } from '@emotion/react';
 import { useInView } from 'react-intersection-observer';
 import { useMatch, useNavigate, useParams } from 'react-router-dom';
@@ -17,12 +17,14 @@ import { HREF, PATH } from '~/constants/routes';
 import Header from '../Header/index.tsx';
 import Layout from '../Layout/index.tsx';
 import Styled from './ShowDetailLayout.styles.ts';
-import AuthoritySettingDialogContent from '../AuthoritySettingDialogContent';
+import ShowSettingDialogContent from '../ShowSettingDialogContent/index.tsx';
 import { HostListItem, HostType } from '@boolti/api/src/types/host.ts';
 import { atom, useAtom, useAtomValue } from 'jotai';
 import { useEffect } from 'react';
-import { useDeviceWidth } from '~/hooks/useDeviceWidth.ts';
 import ProfileDropdown from '../ProfileDropdown/index.tsx';
+import HostList from '../ShowSettingDialogContent/components/HostList/index.tsx';
+import { useDeviceWidth } from '~/hooks/useDeviceWidth.ts';
+import ShowDeleteDialogContent from '../ShowDeleteDialogContent/index.tsx';
 
 const settlementTooltipText = {
   SEND: '내역서 확인 및 정산 요청을 진행해 주세요',
@@ -116,10 +118,10 @@ const TabItem = ({ type }: TabItemProps) => {
     <Styled.TabItem
       active={match !== null}
       id={type === 'SETTLEMENT' ? 'settlement-page-tooltip' : undefined}
-      onClick={async () => {
+      onClick={() => {
         if (!params.showId) return;
 
-        if (middleware && !(await middleware())) {
+        if (middleware && !middleware()) {
           return;
         }
 
@@ -154,17 +156,17 @@ const ShowDetailLayout = ({ children }: ShowDetailLayoutProps) => {
     initialInView: true,
   });
   const theme = useTheme();
+  const deviceWidth = useDeviceWidth();
+  const isMobile = deviceWidth < parseInt(theme.breakpoint.mobile, 10);
+
   const navigate = useNavigate();
   const params = useParams<{ showId: string }>();
 
-  const authoritySettingDialog = useDialog();
+  const showSettingDialog = useStepDialog<'main' | 'hostList' | 'deleteShow'>();
   const showId = Number(params!.showId);
 
   const [, setMyHostInfo] = useAtom(myHostInfoAtom);
 
-  const deviceWidth = useDeviceWidth();
-  const isMobile = deviceWidth < parseInt(theme.breakpoint.mobile, 10);
-
   const { data: show } = useShowDetail(showId);
   const { data: myHostInfoData } = useMyHostInfo(showId);
 
@@ -212,26 +214,53 @@ const ShowDetailLayout = ({ children }: ShowDetailLayoutProps) => {
                   {show?.name}
                 </Styled.ShowName>
                 {myHostInfoData?.type !== HostType.SUPPORTER && (
-                  <Styled.AuthorSettingButton
-                    type="button"
-                    colorTheme="netural"
-                    size="small"
-                    onClick={() => {
-                      authoritySettingDialog.open({
-                        title: '권한 설정',
-                        width: '600px',
-                        content: (
-                          <AuthoritySettingDialogContent
-                            showId={showId}
-                            onClose={authoritySettingDialog.close}
-                          />
-                        ),
-                      });
-                    }}
-                  >
-                    <Setting />
-                    {!isMobile && <span style={{ paddingLeft: '8px' }}>권한 설정</span>}
-                  </Styled.AuthorSettingButton>
+                  <Styled.ShowSettingButtonContainer>
+                    <Button
+                      type="button"
+                      colorTheme="secondary"
+                      size="x-small"
+                      icon={<Setting />}
+                      onClick={() => {
+                        showSettingDialog.open({
+                          initialHistory: ['main'],
+                          width: '600px',
+                          content: {
+                            main: {
+                              title: '공연 설정',
+                              children: ({ push }) => (
+                                <ShowSettingDialogContent
+                                  showId={showId}
+                                  onClickHostList={() => {
+                                    push('hostList');
+                                  }}
+                                  onClickDeleteButton={() => {
+                                    push('deleteShow');
+                                  }}
+                                />
+                              ),
+                            },
+                            hostList: {
+                              title: '관리 그룹',
+                              children: () => (
+                                <Styled.HostListContainer>
+                                  <HostList
+                                    showId={showId}
+                                    onCloseDialog={showSettingDialog.close}
+                                  />
+                                </Styled.HostListContainer>
+                              ),
+                            },
+                            deleteShow: {
+                              title: '공연 삭제',
+                              children: () => <ShowDeleteDialogContent showId={showId} />,
+                            },
+                          },
+                        });
+                      }}
+                    >
+                      {!isMobile && '공연 설정'}
+                    </Button>
+                  </Styled.ShowSettingButtonContainer>
                 )}
               </Styled.ShowNameWrapper>
               <Styled.TabContainer>