From 5f214bd944d11c064b8a76cbd59d9b853a43d196 Mon Sep 17 00:00:00 2001 From: Minsu Kim Date: Tue, 24 Sep 2024 20:43:38 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=EA=B0=92=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=ED=95=98=EA=B3=A0=20=EB=A1=9C=EB=8D=94=20=EC=9D=B4?= =?UTF-8?q?=EC=9A=A9=ED=95=B4=EB=8F=84=20API=20=ED=8C=A8=EC=B9=AD=20?= =?UTF-8?q?=ED=83=80=EC=9D=B4=EB=B0=8D=20=EC=95=9E=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=8B=B9=EA=B2=A8=EC=98=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/preview/index.html | 19 ++++++ apps/preview/src/App.tsx | 11 +++- .../src/components/BooltiGrayLogo/index.tsx | 36 +++++++++++ .../pages/ShowPreviewPage/ShowPreviewPage.tsx | 60 ++++--------------- 4 files changed, 75 insertions(+), 51 deletions(-) create mode 100644 apps/preview/src/components/BooltiGrayLogo/index.tsx diff --git a/apps/preview/index.html b/apps/preview/index.html index ae63ddf3..7913f006 100644 --- a/apps/preview/index.html +++ b/apps/preview/index.html @@ -3,6 +3,25 @@ + + + 핫한 공연 예매의 시작, 불티 + + + + + + + + + + + + + + + + diff --git a/apps/preview/src/App.tsx b/apps/preview/src/App.tsx index 7b7423da..3bfddb1c 100644 --- a/apps/preview/src/App.tsx +++ b/apps/preview/src/App.tsx @@ -1,17 +1,26 @@ import './index.css'; import 'the-new-css-reset/css/reset.css'; -import { QueryClientProvider } from '@boolti/api'; +import { QueryClientProvider, ShowPreviewResponse } from '@boolti/api'; import { BooltiUIProvider } from '@boolti/ui'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { HelmetProvider } from 'react-helmet-async'; import ShowPreviewPage from './pages/ShowPreviewPage/ShowPreviewPage'; +import { fetcher } from '@boolti/api/src/fetcher'; const router = createBrowserRouter([ { path: '/show/:showId', element: , + loader: async ({ params }) => { + const showId = params.showId; + + if (showId) { + const response = await fetcher.get(`web/papi/v1/shows/${showId}`); + return response; + } + }, }, ]); diff --git a/apps/preview/src/components/BooltiGrayLogo/index.tsx b/apps/preview/src/components/BooltiGrayLogo/index.tsx new file mode 100644 index 00000000..467e199e --- /dev/null +++ b/apps/preview/src/components/BooltiGrayLogo/index.tsx @@ -0,0 +1,36 @@ +export default () => ( + + + + + + + + +); diff --git a/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx b/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx index 12648154..64f954dc 100644 --- a/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx +++ b/apps/preview/src/pages/ShowPreviewPage/ShowPreviewPage.tsx @@ -1,70 +1,28 @@ -import { useShowPreview } from '@boolti/api'; +import { ShowPreviewResponse } from '@boolti/api'; import { BooltiDark, ShareIcon } from '@boolti/icon'; import { Footer, ShowPreview, useDialog } from '@boolti/ui'; import { format, setDefaultOptions } from 'date-fns'; import { ko } from 'date-fns/locale'; import { QRCodeSVG } from 'qrcode.react'; -import { useParams } from 'react-router-dom'; +import { useLoaderData } from 'react-router-dom'; import Styled from './ShowPreviewPage.styles'; import { Meta } from '../../components/Meta'; +import BooltiGrayLogo from '../../components/BooltiGrayLogo'; setDefaultOptions({ locale: ko }); -const BooltiGrayLogo = () => ( - - - - - - - - -); - const ShowPreviewPage = () => { - const params = useParams<{ showId: string }>(); - const { isLoading, data } = useShowPreview(Number(params.showId)); + const previewData = useLoaderData() as ShowPreviewResponse | undefined; const dialog = useDialog(); - const dynamicLink = `https://boolti.page.link/?link=https://preview.boolti.in/show/${params.showId}&apn=com.nexters.boolti&ibi=com.nexters.boolti&isi=6476589322`; - - if (isLoading) { - return null; - } - - if (params === undefined || Number.isNaN(Number(params.showId)) || !data) { + if (!previewData) { window.location.href = 'https://boolti.in'; return; } const { + id, name: title, notice: text, date, @@ -77,7 +35,9 @@ const ShowPreviewPage = () => { detailAddress, hostName, hostPhoneNumber, - } = data; + } = previewData; + + const dynamicLink = `https://boolti.page.link/?link=https://preview.boolti.in/show/${id}&apn=com.nexters.boolti&ibi=com.nexters.boolti&isi=6476589322`; const shareButtonClickHandler = async () => { try { @@ -123,7 +83,7 @@ const ShowPreviewPage = () => { return ( <> - {params.showId && } +