Merge pull request #225 from Nexters/bugfix/preview-header

�[운영배포] 공연 내용 전체보기 시 스크롤 동작 및 스타일링 문제 수정
Nexters · Oct 19, 2024 · 9387972 · 9387972
2 parents 3718656 + ae87da4
commit 9387972
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/apps/admin/src/pages/ShowInfoPage/index.tsx b/apps/admin/src/pages/ShowInfoPage/index.tsx
@@ -16,7 +16,7 @@ import {
 } from '@boolti/api';
 import { Button, Drawer, ShowPreview, useConfirm, useDialog, useToast } from '@boolti/ui';
 import { compareAsc, format } from 'date-fns';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 
@@ -43,6 +43,7 @@ const ShowInfoPage = () => {
   const params = useParams<{ showId: string }>();
   const navigate = useNavigate();
   const [myHostInfo] = useAtom(myHostInfoAtom);
+  const showPreviewRef = useRef<HTMLDivElement>(null);
 
   const [imageFiles, setImageFiles] = useState<ImageFile[]>([]);
   const [showImages, setShowImages] = useState<ShowImage[]>([]);
@@ -323,7 +324,7 @@ const ShowInfoPage = () => {
                       <PreviewFrame />
                     </Styled.ShowInfoPreviewFrame>
                     <Styled.ShowPreviewContainer>
-                      <Styled.ShowPreview>
+                      <Styled.ShowPreview ref={showPreviewRef}>
                         <ShowPreview
                           show={{
                             images: imageFiles.map((file) => file.preview),
@@ -348,6 +349,7 @@ const ShowInfoPage = () => {
                           }}
                           showCastTeams={castTeamList}
                           hasNoticePage
+                          containerRef={showPreviewRef}
                         />
                       </Styled.ShowPreview>
                     </Styled.ShowPreviewContainer>

diff --git a/packages/ui/src/components/ShowPreview/ShowPreviewNotice.styles.ts b/packages/ui/src/components/ShowPreview/ShowPreviewNotice.styles.ts
@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 const ShowPreviewNotice = styled.div`
   width: 100%;
-  height: 100%;
   background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
 `;
 
@@ -13,9 +12,18 @@ const ShowPreviewNoticeHeader = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 84px;
   padding: 0 20px;
   background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -30px;
+    left: 0;
+    width: 100%;
+    height: 30px;
+    background-color: ${({ theme }) => theme.palette.mobile.grey.g95};
+  }
 `;
 
 const ShowPreviewNoticeTitle = styled.h3`

diff --git a/packages/ui/src/components/ShowPreview/index.tsx b/packages/ui/src/components/ShowPreview/index.tsx
@@ -10,7 +10,7 @@ import Tab from '../Tab';
 import ShowCastInfo from './ShowCastInfo';
 import ShowInfoDetail from './ShowInfoDetail';
 import ShowTicketPeriod from './ShowTicketPeriod';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import ShowPreviewNotice from './ShowPreviewNotice';
 
 interface ShowPreviewProps {
@@ -38,26 +38,34 @@ interface ShowPreviewProps {
     }[];
   }>;
   hasNoticePage?: boolean;
+  containerRef?: React.RefObject<HTMLDivElement>;
   onClickLink?: () => void;
   onClickLinkMobile?: () => void;
 }
 
 const ShowPreview = ({
   show,
+  showCastTeams,
   hasNoticePage,
+  containerRef,
   onClickLink,
   onClickLinkMobile,
-  showCastTeams,
 }: ShowPreviewProps) => {
   const { images, name, salesStartTime, salesEndTime } = show;
 
   const [noticeOpen, setNoticeOpen] = useState<boolean>(false);
+  const containerScrollTop = useRef<number | null>(null);
 
   if (noticeOpen) {
     return (
       <ShowPreviewNotice
         notice={show.notice}
         onClickBackButton={() => {
+          if (containerScrollTop.current !== null) {
+            containerRef?.current?.scrollTo(0, containerScrollTop.current);
+            containerScrollTop.current = null;
+          }
+
           setNoticeOpen(false);
         }}
       />
@@ -100,6 +108,8 @@ const ShowPreview = ({
                   onClickLink={onClickLink}
                   onClickLinkMobile={onClickLinkMobile}
                   onClickViewNotice={() => {
+                    containerScrollTop.current = containerRef?.current?.scrollTop ?? null
+                    containerRef?.current?.scrollTo(0, 0);
                     setNoticeOpen(true);
                   }}
                 />