Merge pull request #82 from softeerbootcamp4th/feat/CLAP-142

feat(CLAP-142): 응모 내역 확인 페이지
softeerbootcamp4th · Aug 15, 2024 · d4da057 · d4da057
2 parents 59db53b + 9823959
commit d4da057
Show file tree

Hide file tree

Showing 8 changed files with 225 additions and 5 deletions.
diff --git a/packages/service/src/apis/lottery/apiGetLotteryStatus.ts b/packages/service/src/apis/lottery/apiGetLotteryStatus.ts
@@ -11,6 +11,4 @@ export const apiGetLotteryStatus = (): Promise<IApiGetLotteryStatus> =>
     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
@@ -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 }) => {
       >
         내 컬렉션
       </div>
-      <div css={linkStyles} onClick={() => handleNavigation("#")}>
+      <div
+        css={linkStyles}
+        onClick={() => handleNavigation(LOTTER_APPLY_INFO_PAGE_ROUTE)}
+      >
         응모 내역 확인
       </div>
     </div>

diff --git 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
@@ -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
@@ -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
@@ -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<string>();
+  const [remainChance, setRemainChance] = useState<number>();
+  const [isApplied, setIsApplied] = useState<boolean>();
+
+  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 (
+    <div css={style.mainBg}>
+      <h1 css={style.pageTitle}>응모 내역 확인</h1>
+      <h2 css={style.subtitle}>내 아반떼 N 뽑기 이벤트 응모 내역 입니다.</h2>
+
+      <Space size={isMobile ? 100 : 130} />
+      {isApplied ? (
+        <section css={[theme.flex.center]}>
+          <div
+            css={[
+              theme.flex.column,
+              css`
+                align-items: start;
+                gap: 20px;
+              `,
+              mobile(css`
+                width: 80%;
+              `),
+            ]}
+          >
+            <span css={style.sectionTitle}>내 컬렉션 URL</span>
+            <span>친구 링크 클릭 수 만큼 당첨 확률도 같이 올라가요! </span>
+
+            <div
+              css={[
+                theme.flex.center,
+                theme.gap.gap12,
+                mobile(css`
+                  flex-direction: column;
+                  width: 100%;
+                  align-items: start;
+                `),
+              ]}
+            >
+              <div css={style.shareLinkBox} ref={shareLinkRef}>
+                {shareLink}
+              </div>
+              <ClipBoardButton copyRef={shareLinkRef} />
+            </div>
+
+            <div css={[theme.flex.center, theme.gap.gap24]}>
+              <span css={[theme.font.pcB28]}>남은 뽑기권</span>
+              <span
+                css={[
+                  theme.font.pcB40,
+                  mobile(css`
+                    font-size: 30px;
+                  `),
+                ]}
+              >
+                {remainChance}
+              </span>
+            </div>
+          </div>
+        </section>
+      ) : (
+        <div
+          css={[
+            theme.font.pcB28,
+            css`
+              text-align: center;
+            `,
+            mobile(css`
+              font-size: 16px;
+              width: 90%;
+              margin: 0 auto;
+            `),
+          ]}
+        >
+          내 아반떼 N 뽑기 이벤트에 참여한 이력이 없습니다.
+        </div>
+      )}
+
+      <Space size={120} />
+
+      {isApplied ? (
+        <Button
+          variant={ButtonVariant.LONG}
+          css={style.btn}
+          onClick={() => navigate(PARTS_COLLECTION_PAGE_ROUTE)}
+        >
+          내 컬렉션 바로가기
+        </Button>
+      ) : (
+        <Button
+          variant={ButtonVariant.LONG}
+          css={style.btn}
+          onClick={() => navigate(PICK_EVENT_PAGE_ROUTE)}
+        >
+          내 아반떼 N 뽑으러 가기
+        </Button>
+      )}
+    </div>
+  );
+};
diff --git a/packages/service/src/pages/LotteryApplyInfo/index.ts 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
@@ -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: <LotteryApplyFinish />,
       },
+      {
+        path: LOTTER_APPLY_INFO_PAGE_ROUTE,
+        element: <LotteryApplyInfo />,
+      },
     ],
   },
   {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { LotteryApplyInfo } from "./LotteryApplyInfo";