feat: 공연 내용 더 보기 / 접기 기능 구현

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

@@ -355,7 +355,6 @@ const ShowInfoPage = () => {
                         })),
                       })) ?? []
                     }
-                    hasNoticePage
                     containerRef={showPreviewRef}
                   />
                 </Styled.ShowPreview>
@@ -411,9 +410,7 @@ const ShowInfoPage = () => {
                       userNickname: member.userNickname ?? '',
                       userImgPath: member.userImgPath ?? '',
                     })),
-                  })) ?? []
-                }
-                hasNoticePage
+                  })) ?? []}
                 containerRef={showPreviewMobileRef}
               />
             </Styled.ShowInfoPreview>

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

@@ -1,7 +1,8 @@
 import styled from '@emotion/styled'
 
 const MarkdownContent = styled.div<{ colorMode?: 'dark' | 'light' }>`
-  color: ${({ colorMode, theme }) => colorMode === 'dark' ? theme.palette.mobile.grey.g30: 'inherit'};  
+  width: 100%;
+  color: ${({ colorMode, theme }) => colorMode === 'dark' ? theme.palette.mobile.grey.g30 : 'inherit'};  
 
   p, ul, ol, li, blockquote {
     font-size: 16px;

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

@@ -1,9 +1,11 @@
-import Styled from './ShowPreview.styles';
-import { CallIcon, MessageIcon, TicketIcon } from '@boolti/icon';
+import { useRef, useState, useEffect } from 'react';
+import { useSwiper } from 'swiper/react';
 import { showToast, checkIsWebView, TOAST_DURATIONS } from '@boolti/bridge';
+import { CallIcon, ChevronDownIcon, ChevronUpIcon, MessageIcon, TicketIcon } from '@boolti/icon';
 
-import ShowInfoDescription from '../ShowContentMarkdown';
+import Styled from './ShowPreview.styles';
 import PreviewMap from '../PreviewMap';
+import ShowInfoDescription from '../ShowContentMarkdown';
 
 interface Props {
   show: {
@@ -19,7 +21,6 @@ interface Props {
     longitude?: number;
   };
   soldTicketCount?: number;
-  hasNoticePage?: boolean;
   onClickCallLink?: () => void;
   onClickMessageLink?: () => void;
   onClickCallLinkMobile?: () => void;
@@ -41,17 +42,36 @@ const ShowInfoDetail = ({
     detailAddress,
   },
   soldTicketCount,
-  hasNoticePage,
   onClickCallLink,
   onClickMessageLink,
   onClickCallLinkMobile,
   onClickMessageLinkMobile,
   onClickViewNotice,
 }: Props) => {
+  const showNoticeRef = useRef<HTMLDivElement>(null);
+  const swiper = useSwiper();
+
   const nextDay = new Date(date);
   nextDay.setDate(nextDay.getDate() + 1);
   const isEnded = nextDay < new Date();
 
+  const [collapse, setCollapse] = useState(true);
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  useEffect(() => {
+    if (showNoticeRef.current) {
+      setIsOverflow(showNoticeRef.current.scrollHeight > 400);
+    }
+  }, [notice]);
+
+  useEffect(() => {
+    swiper?.update();
+  }, [collapse, swiper]);
+
+  const viewMoreClickHandler = () => {
+    setCollapse((prev) => !prev);
+  };
+
   return (
     <Styled.ShowInfo>
       <Styled.ShowInfoGroup>
@@ -95,18 +115,21 @@ const ShowInfoDetail = ({
           </Styled.ShowTicketInfoDescription>
         )}
       </Styled.ShowInfoGroup>
-      <Styled.ShowInfoGroup>
+      <Styled.ShowInfoGroup style={{ paddingBottom: 0 }}>
         <Styled.ShowInfoTitleContainer>
           <Styled.ShowInfoTitle>내용</Styled.ShowInfoTitle>
-          {hasNoticePage && (
-            <Styled.ShowInfoTitleTextButton type="button" onClick={onClickViewNotice}>
-              전체보기
-            </Styled.ShowInfoTitleTextButton>
-          )}
         </Styled.ShowInfoTitleContainer>
-        <Styled.ShowInfoDescription isFullContent={hasNoticePage}>
+        <Styled.ShowInfoDescription collapse={collapse} ref={showNoticeRef}>
           <ShowInfoDescription content={notice} />
         </Styled.ShowInfoDescription>
+        {isOverflow && (
+          <Styled.ShowInfoMoreButton type="button" onClick={() => {
+            onClickViewNotice?.();
+            viewMoreClickHandler();
+          }}>
+            {collapse ? <>내용 더 보기 <ChevronDownIcon /></> : <>내용 접기 <ChevronUpIcon /></>}
+          </Styled.ShowInfoMoreButton>
+        )}
       </Styled.ShowInfoGroup>
       <Styled.ShowInfoGroup>
         <Styled.ShowInfoTitleContainer>

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

@@ -2,7 +2,8 @@ import styled from '@emotion/styled';
 import { mq_lg } from '../../systems';
 
 interface ShowInfoDescriptionProps {
-  isFullContent?: boolean;
+  collapse?: boolean;
+  isOverflow?: boolean;
 }
 
 const ShowPreview = styled.div`
@@ -200,10 +201,15 @@ const ShowInfoTitleButton = styled.button`
   cursor: pointer;
 `;
 
-const ShowInfoTitleTextButton = styled.button`
-  height: 22px;
-  ${({ theme }) => theme.typo.b1};
-  color: ${({ theme }) => theme.palette.mobile.grey.g50};
+const ShowInfoMoreButton = styled.button`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 10px 0 32px;
+  text-align: center;
+  ${({ theme }) => theme.typo.sh1};
+  color: ${({ theme }) => theme.palette.mobile.grey.g10};
   cursor: pointer;
 `;
 
@@ -220,20 +226,29 @@ const ShowInfoDescription = styled.div<ShowInfoDescriptionProps>`
   word-break: break-word;
   display: flex;
   align-items: center;
+  position: relative;
 
   &:not(:last-child) {
     margin-bottom: 12px;
   }
 
-  ${({ isFullContent }) =>
-    isFullContent &&
-    `
-      display: -webkit-box;
+  ${({ collapse }) =>
+    collapse && `
+      display: block;
       overflow: hidden;
-      text-overflow: ellipsis;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 10;
-    `}
+      height: 300px;
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 40px;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(180deg, rgba(9, 10, 11, 0) 0%, #090A0B 100%);
+      }
+    `
+  }
 `;
 
 const ShowTicketInfoDescription = styled.div`
@@ -410,7 +425,7 @@ export default {
   ShowInfoTitleContainer,
   ShowInfoTitle,
   ShowInfoTitleButton,
-  ShowInfoTitleTextButton,
+  ShowInfoMoreButton,
   ShowInfoSubtitle,
   ShowInfoDescription,
   ShowTicketInfoDescription,

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

@@ -38,7 +38,6 @@ interface ShowPreviewProps {
       userImgPath: string;
     }[];
   }>;
-  hasNoticePage?: boolean;
   logoLinkHref?: string;
   containerRef?: React.RefObject<HTMLDivElement>;
   onClickLink?: () => void;
@@ -49,7 +48,6 @@ interface ShowPreviewProps {
 const ShowPreview = ({
   show,
   showCastTeams,
-  hasNoticePage,
   logoLinkHref,
   containerRef,
   onClickLink,
@@ -129,16 +127,10 @@ const ShowPreview = ({
               content: (
                 <ShowInfoDetail
                   show={show}
-                  hasNoticePage={hasNoticePage}
                   onClickCallLink={onClickLink}
                   onClickMessageLink={onClickLink}
                   onClickCallLinkMobile={onClickLinkMobile}
                   onClickMessageLinkMobile={onClickLinkMobile}
-                  onClickViewNotice={() => {
-                    containerScrollTop.current = containerRef?.current?.scrollTop ?? null;
-                    containerRef?.current?.scrollTo(0, 0);
-                    setNoticeOpen(true);
-                  }}
                 />
               ),
             },