From 7443da45f8ae5a285747adc9cdfc136bb5c58534 Mon Sep 17 00:00:00 2001 From: Shim MunSeong Date: Thu, 3 Apr 2025 14:29:10 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EA=B3=B5=EC=97=B0=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=9B=B9=EB=B7=B0=20=ED=99=94=EB=A9=B4=20=EA=B5=AC?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/preview/src/App.tsx | 6 +-- .../ShowInfoDetailPage.styles.ts | 10 +++++ .../src/pages/ShowInfoDetailPage/index.tsx | 43 +++++++++++++++++++ .../src/pages/ShowPreviewNoticePage/index.tsx | 25 ----------- packages/icon/src/components/Tickets.tsx | 0 .../components/ShowPreview/ShowInfoDetail.tsx | 42 ++++++++---------- .../ShowPreview/ShowPreview.styles.ts | 21 +++++++++ .../ui/src/components/ShowPreview/index.tsx | 6 ++- packages/ui/src/components/index.ts | 4 +- 9 files changed, 102 insertions(+), 55 deletions(-) create mode 100644 apps/preview/src/pages/ShowInfoDetailPage/ShowInfoDetailPage.styles.ts create mode 100644 apps/preview/src/pages/ShowInfoDetailPage/index.tsx delete mode 100644 apps/preview/src/pages/ShowPreviewNoticePage/index.tsx create mode 100644 packages/icon/src/components/Tickets.tsx diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx index 5460e230..fb43c215 100644 --- a/apps/preview/src/App.tsx +++ b/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,8 +28,8 @@ const router = createBrowserRouter([ errorElement: , }, { - path: '/show/:showId/notice', - element: , + path: '/show/:showId/info', + element: , loader: async ({ params }) => { const showId = params.showId; if (showId) { diff --git a/apps/preview/src/pages/ShowInfoDetailPage/ShowInfoDetailPage.styles.ts b/apps/preview/src/pages/ShowInfoDetailPage/ShowInfoDetailPage.styles.ts new file mode 100644 index 00000000..5d3635ca --- /dev/null +++ b/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, +} diff --git a/apps/preview/src/pages/ShowInfoDetailPage/index.tsx b/apps/preview/src/pages/ShowInfoDetailPage/index.tsx new file mode 100644 index 00000000..9b0188f4 --- /dev/null +++ b/apps/preview/src/pages/ShowInfoDetailPage/index.tsx @@ -0,0 +1,43 @@ +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 = useLoaderData() as ShowPreviewResponse; + + const { + notice, + salesEndTime, + salesStartTime, + hostName, + } = show; + + const callLinkClickHandler = () => { + location.href = `tel:${show.hostPhoneNumber}`; + } + + const messageLinkClickHandler = () => { + location.href = `sms:${show.hostPhoneNumber}`; + } + + return ( + + + + ); +} + +export default ShowInfoDetailPage; diff --git a/apps/preview/src/pages/ShowPreviewNoticePage/index.tsx b/apps/preview/src/pages/ShowPreviewNoticePage/index.tsx deleted file mode 100644 index 092ce917..00000000 --- a/apps/preview/src/pages/ShowPreviewNoticePage/index.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { ShowPreviewResponse } from "@boolti/api"; -import { ShowContentMarkdown } from "@boolti/ui"; -import { Helmet } from "react-helmet-async"; -import { useLoaderData } from "react-router-dom"; - -const ShowPreviewNoticePage: React.FC = () => { - const { notice } = useLoaderData() as ShowPreviewResponse; - - return ( - <> - - - - - - ); -} - -export default ShowPreviewNoticePage; diff --git a/packages/icon/src/components/Tickets.tsx b/packages/icon/src/components/Tickets.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx b/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx index e4bd4e08..bed55bbf 100644 --- a/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx +++ b/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx @@ -1,46 +1,35 @@ 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; }; 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, }, hasNoticePage, - onClickLink, - onClickLinkMobile, + onClickCallLink, + onClickMessageLink, + onClickCallLinkMobile, + onClickMessageLinkMobile, onClickViewNotice, }: Props) => { return ( @@ -52,6 +41,11 @@ const ShowInfoDetail = ({ {salesStartTime} - {salesEndTime} + + + + 50매 판매 완료 + @@ -73,18 +67,18 @@ const ShowInfoDetail = ({ {hostName} - + - + - + - + diff --git a/packages/ui/src/components/ShowPreview/ShowPreview.styles.ts b/packages/ui/src/components/ShowPreview/ShowPreview.styles.ts index 6546b800..ddc6344e 100644 --- a/packages/ui/src/components/ShowPreview/ShowPreview.styles.ts +++ b/packages/ui/src/components/ShowPreview/ShowPreview.styles.ts @@ -226,6 +226,8 @@ const ShowInfoDescription = styled.div` 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` `} `; +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, diff --git a/packages/ui/src/components/ShowPreview/index.tsx b/packages/ui/src/components/ShowPreview/index.tsx index dbe56166..32f2c307 100644 --- a/packages/ui/src/components/ShowPreview/index.tsx +++ b/packages/ui/src/components/ShowPreview/index.tsx @@ -130,8 +130,10 @@ const ShowPreview = ({ { containerScrollTop.current = containerRef?.current?.scrollTop ?? null; containerRef?.current?.scrollTo(0, 0); diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index 42427289..8042f103 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.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, }; From 993d55ebe5775e91690066666d7f1541bedcc234 Mon Sep 17 00:00:00 2001 From: Shim MunSeong Date: Sat, 5 Apr 2025 22:48:37 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EA=B3=B5=EC=97=B0=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=9B=B9=EB=B7=B0=EC=97=90=EC=84=9C=20=EA=B3=B5?= =?UTF-8?q?=EC=97=B0=20=EC=A2=85=EB=A3=8C=20=ED=9B=84=20=ED=8B=B0=EC=BC=93?= =?UTF-8?q?=20=ED=8C=90=EB=A7=A4=20=EA=B0=9C=EC=88=98=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/preview/src/App.tsx | 6 +++++- .../src/pages/ShowInfoDetailPage/index.tsx | 5 ++++- .../components/ShowPreview/ShowInfoDetail.tsx | 16 +++++++++++----- 3 files changed, 20 insertions(+), 7 deletions(-) diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx index fb43c215..016d769c 100644 --- a/apps/preview/src/App.tsx +++ b/apps/preview/src/App.tsx @@ -33,7 +33,11 @@ const router = createBrowserRouter([ loader: async ({ params }) => { const showId = params.showId; if (showId) { - return await fetcher.get(`web/papi/v1/shows/${showId}`); + const response = await Promise.all([ + fetcher.get(`web/papi/v1/shows/${showId}`), + fetcher.get<{ count: number }>(`web/papi/v1/shows/${showId}/sold-ticket-counts`), + ]) + return response; } }, errorElement: , diff --git a/apps/preview/src/pages/ShowInfoDetailPage/index.tsx b/apps/preview/src/pages/ShowInfoDetailPage/index.tsx index 9b0188f4..71daf510 100644 --- a/apps/preview/src/pages/ShowInfoDetailPage/index.tsx +++ b/apps/preview/src/pages/ShowInfoDetailPage/index.tsx @@ -5,13 +5,14 @@ import { useLoaderData } from "react-router-dom"; import Styled from './ShowInfoDetailPage.styles'; const ShowInfoDetailPage: React.FC = () => { - const show = useLoaderData() as ShowPreviewResponse; + const [show, { count: soldTicketCount }] = useLoaderData() as ShowPreviewResponse; const { notice, salesEndTime, salesStartTime, hostName, + isEnded } = show; const callLinkClickHandler = () => { @@ -30,7 +31,9 @@ const ShowInfoDetailPage: React.FC = () => { salesEndTime: format(new Date(salesEndTime), 'yyyy.MM.dd (E)'), notice, hostName, + isEnded, }} + soldTicketCount={soldTicketCount} onClickCallLink={callLinkClickHandler} onClickMessageLink={messageLinkClickHandler} onClickCallLinkMobile={callLinkClickHandler} diff --git a/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx b/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx index bed55bbf..5c452a48 100644 --- a/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx +++ b/packages/ui/src/components/ShowPreview/ShowInfoDetail.tsx @@ -9,7 +9,9 @@ interface Props { salesEndTime: string; notice: string; hostName: string; + isEnded: boolean; }; + soldTicketCount?: number; hasNoticePage?: boolean; onClickCallLink?: () => void; onClickMessageLink?: () => void; @@ -24,7 +26,9 @@ const ShowInfoDetail = ({ salesEndTime, notice, hostName, + isEnded, }, + soldTicketCount, hasNoticePage, onClickCallLink, onClickMessageLink, @@ -41,11 +45,13 @@ const ShowInfoDetail = ({ {salesStartTime} - {salesEndTime} - - - - 50매 판매 완료 - + {isEnded && soldTicketCount !== undefined && ( + + + + {soldTicketCount}매 판매 완료 + + )}