Merge pull request #283 from Nexters/feature/preview-webview

공연 내용 웹뷰 제공

Author: Puterism

apps/preview/src/App.tsx

@@ -9,7 +9,7 @@ import { HelmetProvider } from 'react-helmet-async';
 import ShowPreviewPage from './pages/ShowPreviewPage';
 import { fetcher } from '@boolti/api/src/fetcher';
 import NotFound from './components/NotFound';
-import ShowPreviewNoticePage from './pages/ShowPreviewNoticePage';
+import ShowInfoDetailPage from './pages/ShowInfoDetailPage';
 
 const router = createBrowserRouter([
   {
@@ -28,12 +28,16 @@ const router = createBrowserRouter([
     errorElement: <NotFound />,
   },
   {
-    path: '/show/:showId/notice',
-    element: <ShowPreviewNoticePage />,
+    path: '/show/:showId/info',
+    element: <ShowInfoDetailPage />,
     loader: async ({ params }) => {
       const showId = params.showId;
       if (showId) {
-        return await fetcher.get<ShowPreviewResponse>(`web/papi/v1/shows/${showId}`);
+        const response = await Promise.all([
+          fetcher.get<ShowPreviewResponse>(`web/papi/v1/shows/${showId}`),
+          fetcher.get<{ count: number }>(`web/papi/v1/shows/${showId}/sold-ticket-counts`),
+        ])
+        return response;
       }
     },
     errorElement: <NotFound />,

apps/preview/src/pages/ShowInfoDetailPage/ShowInfoDetailPage.styles.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled'
+
+const Container = styled.div`
+  background-color : ${({ theme }) => theme.palette.mobile.grey.g95};
+  padding: 0 20px;
+`
+
+export default {
+  Container,
+}

apps/preview/src/pages/ShowInfoDetailPage/index.tsx

@@ -0,0 +1,46 @@
+import { ShowPreviewResponse } from "@boolti/api";
+import { ShowInfoDetail } from "@boolti/ui";
+import { format } from "date-fns";
+import { useLoaderData } from "react-router-dom";
+import Styled from './ShowInfoDetailPage.styles';
+
+const ShowInfoDetailPage: React.FC = () => {
+  const [show, { count: soldTicketCount }] = useLoaderData() as ShowPreviewResponse;
+
+  const {
+    notice,
+    salesEndTime,
+    salesStartTime,
+    hostName,
+    isEnded
+  } = show;
+
+  const callLinkClickHandler = () => {
+    location.href = `tel:${show.hostPhoneNumber}`;
+  }
+
+  const messageLinkClickHandler = () => {
+    location.href = `sms:${show.hostPhoneNumber}`;
+  }
+
+  return (
+    <Styled.Container>
+      <ShowInfoDetail
+        show={{
+          salesStartTime: format(new Date(salesStartTime), 'yyyy.MM.dd (E)'),
+          salesEndTime: format(new Date(salesEndTime), 'yyyy.MM.dd (E)'),
+          notice,
+          hostName,
+          isEnded,
+        }}
+        soldTicketCount={soldTicketCount}
+        onClickCallLink={callLinkClickHandler}
+        onClickMessageLink={messageLinkClickHandler}
+        onClickCallLinkMobile={callLinkClickHandler}
+        onClickMessageLinkMobile={messageLinkClickHandler}
+      />
+    </Styled.Container>
+  );
+}
+
+export default ShowInfoDetailPage;

apps/preview/src/pages/ShowPreviewNoticePage/index.tsx

@@ -1,46 +1,39 @@
 import Styled from './ShowPreview.styles';
-import { CallIcon, MessageIcon } from '@boolti/icon';
+import { CallIcon, MessageIcon, TicketIcon } from '@boolti/icon';
 
 import ShowInfoDescription from '../ShowContentMarkdown';
 
 interface Props {
   show: {
-    images: string[];
-    name: string;
-    date: string;
-    startTime: string;
-    runningTime: string;
     salesStartTime: string;
     salesEndTime: string;
-    placeName: string;
-    placeStreetAddress: string;
-    placeDetailAddress: string;
     notice: string;
     hostName: string;
-    hostPhoneNumber: string;
+    isEnded: boolean;
   };
+  soldTicketCount?: number;
   hasNoticePage?: boolean;
-  onClickLink?: () => void;
-  onClickLinkMobile?: () => void;
+  onClickCallLink?: () => void;
+  onClickMessageLink?: () => void;
+  onClickCallLinkMobile?: () => void;
+  onClickMessageLinkMobile?: () => void;
   onClickViewNotice?: () => void;
 }
 
 const ShowInfoDetail = ({
   show: {
-    // date,
-    // startTime,
-    // runningTime,
     salesStartTime,
     salesEndTime,
-    // placeName,
-    // placeStreetAddress,
-    // placeDetailAddress,
     notice,
     hostName,
+    isEnded,
   },
+  soldTicketCount,
   hasNoticePage,
-  onClickLink,
-  onClickLinkMobile,
+  onClickCallLink,
+  onClickMessageLink,
+  onClickCallLinkMobile,
+  onClickMessageLinkMobile,
   onClickViewNotice,
 }: Props) => {
   return (
@@ -52,6 +45,13 @@ const ShowInfoDetail = ({
         <Styled.ShowInfoDescription>
           {salesStartTime} - {salesEndTime}
         </Styled.ShowInfoDescription>
+        {isEnded && soldTicketCount !== undefined && (
+          <Styled.ShowTicketInfoDescription>
+            <Styled.TicketIcon>
+              <TicketIcon />
+            </Styled.TicketIcon> {soldTicketCount}매 판매 완료
+          </Styled.ShowTicketInfoDescription>
+        )}
       </Styled.ShowInfoGroup>
       <Styled.ShowInfoGroup>
         <Styled.ShowInfoTitleContainer>
@@ -73,18 +73,18 @@ const ShowInfoDetail = ({
         <Styled.ShowHost>
           <Styled.ShowHostName>{hostName}</Styled.ShowHostName>
           <Styled.ShowHostLink>
-            <a onClick={onClickLink}>
+            <a onClick={onClickCallLink}>
               <CallIcon />
             </a>
-            <a onClick={onClickLink}>
+            <a onClick={onClickMessageLink}>
               <MessageIcon />
             </a>
           </Styled.ShowHostLink>
           <Styled.ShowHostLinkMobile>
-            <a onClick={onClickLinkMobile}>
+            <a onClick={onClickCallLinkMobile}>
               <CallIcon />
             </a>
-            <a onClick={onClickLinkMobile}>
+            <a onClick={onClickMessageLinkMobile}>
               <MessageIcon />
             </a>
           </Styled.ShowHostLinkMobile>

packages/icon/src/components/Tickets.tsx

@@ -226,6 +226,8 @@ const ShowInfoDescription = styled.div<ShowInfoDescriptionProps>`
   color: ${({ theme }) => theme.palette.mobile.grey.g30};
   overflow-wrap: break-word;
   word-break: break-word;
+  display: flex;
+  align-items: center;
 
   ${({ isFullContent }) =>
     isFullContent &&
@@ -238,6 +240,23 @@ const ShowInfoDescription = styled.div<ShowInfoDescriptionProps>`
     `}
 `;
 
+const ShowTicketInfoDescription = styled.div`
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.mobile.grey.g30};
+  overflow-wrap: break-word;
+  word-break: break-word;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+`;
+
+const TicketIcon = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+`
+
 const ShowInfoDescriptionBadge = styled.div`
   display: inline-flex;
   align-items: center;
@@ -398,6 +417,8 @@ export default {
   ShowInfoTitleTextButton,
   ShowInfoSubtitle,
   ShowInfoDescription,
+  ShowTicketInfoDescription,
+  TicketIcon,
   ShowInfoDescriptionBadge,
   ShowInfoBox,
   ShowHost,

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

@@ -130,8 +130,10 @@ const ShowPreview = ({
                 <ShowInfoDetail
                   show={show}
                   hasNoticePage={hasNoticePage}
-                  onClickLink={onClickLink}
-                  onClickLinkMobile={onClickLinkMobile}
+                  onClickCallLink={onClickLink}
+                  onClickMessageLink={onClickLink}
+                  onClickCallLinkMobile={onClickLinkMobile}
+                  onClickMessageLinkMobile={onClickLinkMobile}
                   onClickViewNotice={() => {
                     containerScrollTop.current = containerRef?.current?.scrollTop ?? null;
                     containerRef?.current?.scrollTo(0, 0);

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

@@ -16,6 +16,7 @@ import StepProgressBar from './StepProgressBar';
 import Checkbox from './Checkbox';
 import StepDialog from './Dialog/StepDialog';
 import ShowContentMarkdown from './ShowContentMarkdown';
+import ShowInfoDetail from './ShowPreview/ShowInfoDetail';
 
 export {
   AgreeCheck,
@@ -35,5 +36,6 @@ export {
   StepProgressBar,
   Checkbox,
   StepDialog,
-  ShowContentMarkdown
+  ShowContentMarkdown,
+  ShowInfoDetail,
 };