diff --git a/packages/service/src/apis/lottery/apiGetLotteryStatus.ts b/packages/service/src/apis/lottery/apiGetLotteryStatus.ts index f1ec9eca..c5347a5f 100644 --- a/packages/service/src/apis/lottery/apiGetLotteryStatus.ts +++ b/packages/service/src/apis/lottery/apiGetLotteryStatus.ts @@ -11,6 +11,4 @@ export const apiGetLotteryStatus = (): Promise => headers: { Authorization: `Bearer ${getAccessToken()}`, }, - }).then((res) => { - return res.json(); - }); + }).then((res) => res.json()); diff --git a/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx b/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx index aeef5bb0..772b1c10 100644 --- a/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx +++ b/packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/GlobalNavs.tsx @@ -7,6 +7,7 @@ import { PICK_EVENT_PAGE_ROUTE, N_QUIZ_EVENT_PAGE_ROUTE, PARTS_COLLECTION_PAGE_ROUTE, + LOTTER_APPLY_INFO_PAGE_ROUTE, } from "@service/constants/routes"; const GlobalNavs = ({ isOpen }: { isOpen: boolean }) => { @@ -44,7 +45,10 @@ const GlobalNavs = ({ isOpen }: { isOpen: boolean }) => { > 내 컬렉션 -
handleNavigation("#")}> +
handleNavigation(LOTTER_APPLY_INFO_PAGE_ROUTE)} + > 응모 내역 확인
diff --git a/packages/service/src/constants/routes.ts b/packages/service/src/constants/routes.ts index c6efaac7..15cdca6a 100644 --- a/packages/service/src/constants/routes.ts +++ b/packages/service/src/constants/routes.ts @@ -17,3 +17,4 @@ export const SHARE_PAGE_ROUTE = "/share/:linkKey" as const; export const N_QUIZ_EVENT_PAGE_WINNER_APLLY_PAGE_ROUTE = "/quiz-event-apply" as const; export const LOTTER_APPLY_FINISH_PAGE_ROUTE = "/lottery/apply-finish" as const; +export const LOTTER_APPLY_INFO_PAGE_ROUTE = "/lottery/apply-info" as const; diff --git a/packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts b/packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts index 6e6c26ac..efbd7514 100644 --- a/packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts +++ b/packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts @@ -67,7 +67,7 @@ export const btn = css` export const shareLinkBox = css` background-color: ${theme.color.gray100}; - color: ${theme.color.gray300}; + color: ${theme.color.gray500}; ${theme.font.preM14} border-radius: 10px; white-space: nowrap; diff --git a/packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.css.ts b/packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.css.ts new file mode 100644 index 00000000..98f123bb --- /dev/null +++ b/packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.css.ts @@ -0,0 +1,73 @@ +import { css } from "@emotion/react"; +import { mobile } from "@service/common/responsive/responsive"; +import { theme } from "@watermelon-clap/core/src/theme"; + +export const mainBg = css` + background-image: url("/images/common/main-bg.webp"); + background-size: cover; + padding-bottom: 200px; + + color: white; + + ${mobile(css` + padding-bottom: 100px; + `)} +`; + +export const pageTitle = css` + text-align: center; + ${theme.font.pcpB} + font-size : calc(50px + 2vw); + padding-top: 120px; + color: ${theme.color.white}; + + ${mobile(css` + font-size: calc(20px + 2vw); + padding: 100px 0 20px 0; + `)} +`; + +export const subtitle = css` + ${theme.font.preB} + font-size : calc(16px + 0.5vw); + text-align: center; + + ${mobile(css` + font-size: calc(14px); + `)} +`; + +export const sectionTitle = css` + ${theme.font.pcB28}; + ${mobile(css` + font-size: 24px; + `)} +`; + +export const btn = css` + margin: 0 auto; + ${theme.font.preB} + font-size : 24px; + + ${mobile(css` + padding: 10px 20px; + width: 200px; + `)} +`; + +export const shareLinkBox = css` + background-color: ${theme.color.gray100}; + color: ${theme.color.gray500}; + ${theme.font.preM14} + border-radius: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding: 16px 18px; + width: 500px; + + ${mobile(css` + width: 100%; + padding: 10px; + `)} +`; diff --git a/packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.tsx b/packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.tsx new file mode 100644 index 00000000..889f5930 --- /dev/null +++ b/packages/service/src/pages/LotteryApplyInfo/LotteryApplyInfo.tsx @@ -0,0 +1,137 @@ +import { useNavigate } from "react-router-dom"; +import * as style from "./LotteryApplyInfo.css"; +import { Button, ButtonVariant } from "@service/common/components/Button"; +import { ClipBoardButton } from "@service/common/components/ClipBoardButton"; +import { theme } from "@watermelon-clap/core/src/theme"; +import { Space } from "@service/common/styles/Space"; +import { css } from "@emotion/react"; +import { + PARTS_COLLECTION_PAGE_ROUTE, + PICK_EVENT_PAGE_ROUTE, +} from "@service/constants/routes"; +import { useEffect, useRef, useState } from "react"; +import { mobile } from "@service/common/responsive/responsive"; +import { useMobile } from "@service/common/hooks/useMobile"; +import { apiGetPartsRemain } from "@service/apis/partsEvent"; +import { useAuth } from "@watermelon-clap/core/src/hooks"; +import { apiGetMyShareLink } from "@service/apis/link/apiGetMyShareLink"; +import { apiGetLotteryStatus } from "@service/apis/lottery/apiGetLotteryStatus"; + +export const LotteryApplyInfo = () => { + const navigate = useNavigate(); + const shareLinkRef = useRef(null); + const [shareLink, setShareLink] = useState(); + const [remainChance, setRemainChance] = useState(); + const [isApplied, setIsApplied] = useState(); + + const { handleTokenError } = useAuth(); + + useEffect(() => { + apiGetLotteryStatus() + .then(({ applied }) => setIsApplied(applied)) + .catch((error: Error) => handleTokenError(error)); + + apiGetMyShareLink().then(({ link }) => setShareLink(link)); + + apiGetPartsRemain().then(({ remainChance }) => + setRemainChance(remainChance), + ); + }, []); + + const isMobile = useMobile(); + + return ( +
+

응모 내역 확인

+

내 아반떼 N 뽑기 이벤트 응모 내역 입니다.

+ + + {isApplied ? ( +
+
+ 내 컬렉션 URL + 친구 링크 클릭 수 만큼 당첨 확률도 같이 올라가요! + +
+
+ {shareLink} +
+ +
+ +
+ 남은 뽑기권 + + {remainChance} + +
+
+
+ ) : ( +
+ 내 아반떼 N 뽑기 이벤트에 참여한 이력이 없습니다. +
+ )} + + + + {isApplied ? ( + + ) : ( + + )} +
+ ); +}; diff --git a/packages/service/src/pages/LotteryApplyInfo/index.ts b/packages/service/src/pages/LotteryApplyInfo/index.ts new file mode 100644 index 00000000..127b4173 --- /dev/null +++ b/packages/service/src/pages/LotteryApplyInfo/index.ts @@ -0,0 +1 @@ +export { LotteryApplyInfo } from "./LotteryApplyInfo"; diff --git a/packages/service/src/router.tsx b/packages/service/src/router.tsx index 0411eb79..b2885b1c 100644 --- a/packages/service/src/router.tsx +++ b/packages/service/src/router.tsx @@ -17,6 +17,7 @@ import { SHARE_PAGE_ROUTE, N_QUIZ_EVENT_PAGE_WINNER_APLLY_PAGE_ROUTE, LOTTER_APPLY_FINISH_PAGE_ROUTE, + LOTTER_APPLY_INFO_PAGE_ROUTE, } from "./constants/routes"; import { RotateDemoPage } from "./Demo/pages/RotateDemoPage"; import { AuthDemoPage } from "./Demo/pages/AuthDemoPage"; @@ -38,6 +39,7 @@ import { NQuizEventWinnerApply, } from "./pages"; import { LotteryApplyFinish } from "./pages/LotteryApplyFinish"; +import { LotteryApplyInfo } from "./pages/LotteryApplyInfo"; export const router = createBrowserRouter([ { @@ -59,6 +61,10 @@ export const router = createBrowserRouter([ path: LOTTER_APPLY_FINISH_PAGE_ROUTE, element: , }, + { + path: LOTTER_APPLY_INFO_PAGE_ROUTE, + element: , + }, ], }, {