diff --git a/apps/admin/src/pages/ShowInfoPage/index.tsx b/apps/admin/src/pages/ShowInfoPage/index.tsx index 400997e4..e833fe65 100644 --- 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(null); const [imageFiles, setImageFiles] = useState([]); const [showImages, setShowImages] = useState([]); @@ -323,7 +324,7 @@ const ShowInfoPage = () => { - + file.preview), @@ -348,6 +349,7 @@ const ShowInfoPage = () => { }} showCastTeams={castTeamList} hasNoticePage + containerRef={showPreviewRef} /> diff --git a/packages/ui/src/components/ShowPreview/ShowPreviewNotice.styles.ts b/packages/ui/src/components/ShowPreview/ShowPreviewNotice.styles.ts index d6464069..d1571229 100644 --- 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 index aaac4936..6dd48ac4 100644 --- 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; onClickLink?: () => void; onClickLinkMobile?: () => void; } const ShowPreview = ({ show, + showCastTeams, hasNoticePage, + containerRef, onClickLink, onClickLinkMobile, - showCastTeams, }: ShowPreviewProps) => { const { images, name, salesStartTime, salesEndTime } = show; const [noticeOpen, setNoticeOpen] = useState(false); + const containerScrollTop = useRef(null); if (noticeOpen) { return ( { + 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); }} />