feat: 공연 미리보기 모바일 대응 (운영 배포) (#145)

* fix: 401 에러 관련 수정 (#140) * fix: 드롭다운 색상 수정 * fix: 인증 관련 오류 수정 * fix: 글로벌 에러바운더리 추가 * chore: 주석 코드 리버트 * fix: 덜컥임 수정, 필드 추가 (#142) * fix: StrictMode 제거 및 불필요한 의존성 제거 * fix: 덜컥임 없도록 수정 * feat: ShowSalesTicketResponse 하위 필드 추가 * feat: 공연 미리보기 모바일 대응 (#144) --------- Co-authored-by: Minsu Kim <alstn2468_@naver.com>
Nexters · Aug 6, 2024 · 6060c77 · 6060c77
1 parent 600d8a3
commit 6060c77
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 4 deletions.
diff --git a/apps/admin/src/pages/ShowInfoPage/ShowInfoPage.styles.ts b/apps/admin/src/pages/ShowInfoPage/ShowInfoPage.styles.ts
@@ -65,6 +65,28 @@ const ShowInfoPreview = styled.div`
   justify-content: center;
   align-items: center;
   position: relative;
+  overflow-y: auto;
+
+  ${mq_lg} {
+    overflow-y: initial;
+  }
+`;
+
+const ShowInfoPreviewMobile = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  z-index: 999;
+  padding-bottom: 84px;
+  background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
+
+  ${mq_lg} {
+    padding-bottom: 0;
+    display: none;
+  }
 `;
 
 const ShowInfoPreviewFrameContainer = styled.div`
@@ -102,12 +124,31 @@ const ShowPreview = styled.div`
 `;
 
 const ShowInfoPreviewFooter = styled.div`
-  height: 52px;
+  height: 84px;
   display: flex;
+  padding: 20px 16px;
+  gap: 8px;
+  background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  ${mq_lg} {
+    height: 52px;
+    padding: 0;
+    gap: 0;
+    background-color: none;
+
+    position: initial;
+    bottom: initial;
+    left: initial;
+    width: initial;
+  }
 `;
 
 const ShowInfoPreviewCloseButton = styled.button`
-  width: 220px;
+  flex: 1;
   height: 100%;
   background-color: ${({ theme }) => theme.palette.grey.g90};
   color: ${({ theme }) => theme.palette.grey.w};
@@ -116,6 +157,13 @@ const ShowInfoPreviewCloseButton = styled.button`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  border-radius: 4px;
+
+  ${mq_lg} {
+    width: 220px;
+    flex: initial;
+    border-radius: none;
+  }
 `;
 
 const ShowInfoPreviewSubmitButton = styled.button`
@@ -128,6 +176,11 @@ const ShowInfoPreviewSubmitButton = styled.button`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  border-radius: 4px;
+
+  ${mq_lg} {
+    border-radius: none;
+  }
 `;
 
 export default {
@@ -140,6 +193,7 @@ export default {
   DeleteButton,
   ShowInfoPreviewContainer,
   ShowInfoPreview,
+  ShowInfoPreviewMobile,
   ShowInfoPreviewFrameContainer,
   ShowInfoPreviewFrame,
   ShowPreviewContainer,

diff --git a/apps/admin/src/pages/ShowInfoPage/ShowInfoPage.tsx b/apps/admin/src/pages/ShowInfoPage/ShowInfoPage.tsx
@@ -25,6 +25,7 @@ import Styled from './ShowInfoPage.styles';
 import { useAtom } from 'jotai';
 import { HostType } from '@boolti/api/src/types/host';
 import ShowDetailUnauthorized from '~/components/ShowDetailUnauthorized';
+import Portal from '@boolti/ui/src/components/Portal';
 
 const ShowInfoPage = () => {
   const params = useParams<{ showId: string }>();
@@ -278,6 +279,56 @@ const ShowInfoPage = () => {
                 </Styled.ShowInfoPreviewFooter>
               </Styled.ShowInfoPreviewContainer>
             </Drawer>
+            {previewDrawerOpen && (
+              <Portal>
+                <Styled.ShowInfoPreviewMobile>
+                  <Styled.ShowInfoPreview>
+                    <ShowPreview
+                      show={{
+                        images: imageFiles.map((file) => file.preview),
+                        name: showInfoForm.watch('name') ? showInfoForm.watch('name') : '',
+                        date: showInfoForm.watch('date')
+                          ? format(showInfoForm.watch('date'), 'yyyy.MM.dd (E)')
+                          : '',
+                        startTime: showInfoForm.watch('startTime'),
+                        runningTime: showInfoForm.watch('runningTime'),
+                        salesStartTime: showSalesInfo
+                          ? format(showSalesInfo.salesStartTime, 'yyyy.MM.dd (E)')
+                          : '',
+                        salesEndTime: showSalesInfo
+                          ? format(showSalesInfo.salesEndTime, 'yyyy.MM.dd (E)')
+                          : '',
+                        placeName: showInfoForm.watch('placeName'),
+                        placeStreetAddress: showInfoForm.watch('placeStreetAddress'),
+                        placeDetailAddress: showInfoForm.watch('placeDetailAddress'),
+                        notice: showInfoForm.watch('notice'),
+                        hostName: showInfoForm.watch('hostName'),
+                        hostPhoneNumber: showInfoForm.watch('hostPhoneNumber'),
+                      }}
+                      hasNoticePage
+                    />
+                  </Styled.ShowInfoPreview>
+                  <Styled.ShowInfoPreviewFooter>
+                    <Styled.ShowInfoPreviewCloseButton
+                      type="button"
+                      onClick={() => {
+                        setPreviewDrawerOpen(false);
+                      }}
+                    >
+                      닫기
+                    </Styled.ShowInfoPreviewCloseButton>
+                    <Styled.ShowInfoPreviewSubmitButton
+                      type="button"
+                      onClick={() => {
+                        showInfoForm.handleSubmit(onSubmit)();
+                      }}
+                    >
+                      저장하기
+                    </Styled.ShowInfoPreviewSubmitButton>
+                  </Styled.ShowInfoPreviewFooter>
+                </Styled.ShowInfoPreviewMobile>
+              </Portal>
+            )}
           </Styled.ShowInfoForm>
         </Styled.ShowInfoPage>
       )}

diff --git a/packages/ui/src/components/Drawer/Drawer.styles.ts b/packages/ui/src/components/Drawer/Drawer.styles.ts
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { animated } from '@react-spring/web';
+import { mq_lg } from '../../systems';
 
 interface DrawerProps {
   width?: string;
@@ -9,13 +10,17 @@ const DimmedArea = styled(animated.div)`
   position: fixed;
   inset: 0;
   background-color: ${({ theme }) => theme.palette.dim.dialog};
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   z-index: 999;
+
+  ${mq_lg} {
+    display: flex;
+  }
 `;
 
-const Drawer = styled(animated.div)<DrawerProps>`
+const Drawer = styled(animated.div) <DrawerProps>`
   position: fixed;
   top: 0;
   right: 0;
@@ -24,6 +29,11 @@ const Drawer = styled(animated.div)<DrawerProps>`
   background-color: ${({ theme }) => theme.palette.grey.w};
   box-shadow: -12px 0px 20px 0px ${({ theme }) => theme.palette.shadow};
   z-index: 1000;
+  display: none;
+
+  ${mq_lg} {
+    display: block;
+  }
 `;
 
 const DrawerHeader = styled.div`