Merge pull request #80 from softeerbootcamp4th/feat/CLAP-141

Feat(CLAP-141): 응모 완료 페이지
softeerbootcamp4th · Aug 15, 2024 · d2b526c · d2b526c
2 parents 72021e5 + 984abf9
commit d2b526c
Show file tree

Hide file tree

Showing 13 changed files with 402 additions and 45 deletions.
diff --git a/packages/service/src/Demo/pages/ButtonDemoPage.tsx b/packages/service/src/Demo/pages/ButtonDemoPage.tsx
@@ -1,7 +1,6 @@
 import { Button, ButtonVariant } from "@service/common/components/Button";
 import { theme } from "@watermelon-clap/core/src/theme";
 import { css } from "@emotion/react";
-import { ClipBoardButton } from "@service/common/components/ClipBoardButton";
 import { CheckBox } from "@service/common/components/CheckBox";
 import { useState } from "react";
 import { ReactComponent as ClipBoardIcon } from "public/icons/clipboard.svg";
@@ -67,8 +66,6 @@ const ButtonDemoPage = () => {
           button
         </Button>
 
-        <ClipBoardButton />
-
         <CheckBox
           isChecked={isChecked1}
           setIsChecked={setIsChecked1}

diff --git a/packages/service/src/apis/expectation/apiPostExpectation.ts b/packages/service/src/apis/expectation/apiPostExpectation.ts
@@ -0,0 +1,18 @@
+import { customFetch, getAccessToken } from "@watermelon-clap/core/src/utils";
+
+export const apiPostExpectation = (expectation: string) =>
+  customFetch(
+    `
+    ${import.meta.env.VITE_BACK_BASE_URL}/expectations
+    `,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        expectation: expectation,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${getAccessToken()}`,
+      },
+    },
+  );
diff --git a/packages/service/src/apis/link/apiGetMyShareLink.ts b/packages/service/src/apis/link/apiGetMyShareLink.ts
@@ -0,0 +1,13 @@
+import { customFetch, getAccessToken } from "@watermelon-clap/core/src/utils";
+
+interface IApiGetMyShareLink {
+  link: string;
+}
+
+export const apiGetMyShareLink = (): Promise<IApiGetMyShareLink> => {
+  return customFetch(`${import.meta.env.VITE_BACK_BASE_URL}/link`, {
+    headers: {
+      Authorization: `Bearer ${getAccessToken()}`,
+    },
+  }).then((res) => res.json());
+};
diff --git a/packages/service/src/apis/lottery/apiGetLotteryStatus.ts b/packages/service/src/apis/lottery/apiGetLotteryStatus.ts
@@ -0,0 +1,16 @@
+import { customFetch, getAccessToken } from "@watermelon-clap/core/src/utils";
+
+interface IApiGetLotteryStatus {
+  rank: number;
+  miniature: boolean;
+  applied: boolean;
+}
+
+export const apiGetLotteryStatus = (): Promise<IApiGetLotteryStatus> =>
+  customFetch(`${import.meta.env.VITE_BACK_BASE_URL}/event/lotteries/rank`, {
+    headers: {
+      Authorization: `Bearer ${getAccessToken()}`,
+    },
+  }).then((res) => {
+    return res.json();
+  });
diff --git a/packages/service/src/common/components/ClipBoardButton/ClipBoardButton.tsx b/packages/service/src/common/components/ClipBoardButton/ClipBoardButton.tsx
@@ -8,51 +8,61 @@ import {
 } from "./ClipBoardButton.css";
 import { ReactComponent as ClipBoardIcon } from "public/icons/clipboard.svg";
 
-const ClipBoardButton = () => {
+interface IClipBoardButton {
+  copyRef: any;
+}
+const ClipBoardButton = ({ copyRef }: IClipBoardButton) => {
   const [isCliped, setIsCliped] = useState<boolean>(false);
   const initialText = "클립보드에 복사";
   const changeText = "복사되었습니다!";
 
+  const handleCopy = () => {
+    const textToCopy = copyRef?.current?.textContent;
+    navigator.clipboard.writeText(textToCopy as string);
+  };
+
   return (
-    <AnimatePresence mode="wait">
-      {isCliped ? (
-        <motion.button
-          css={clipButtonSuccessStyle}
-          onClick={() => setIsCliped(false)}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        >
-          <motion.span
-            css={clipButtonSuccessContentStyle}
-            key="action"
-            initial={{ y: -50 }}
-            animate={{ y: 0 }}
+    <div onClick={handleCopy}>
+      <AnimatePresence mode="wait">
+        {isCliped ? (
+          <motion.button
+            css={clipButtonSuccessStyle}
+            onClick={() => setIsCliped(false)}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
           >
-            <ClipBoardIcon />
-            {changeText}
-          </motion.span>
-        </motion.button>
-      ) : (
-        <motion.button
-          css={clipButtonStyle}
-          onClick={() => setIsCliped(true)}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-        >
-          <motion.span
-            css={clipButtonContentStyle}
-            key="reaction"
-            initial={{ x: 0 }}
-            exit={{ x: 50, transition: { duration: 0.1 } }}
+            <motion.span
+              css={clipButtonSuccessContentStyle}
+              key="action"
+              initial={{ y: -50 }}
+              animate={{ y: 0 }}
+            >
+              <ClipBoardIcon />
+              {changeText}
+            </motion.span>
+          </motion.button>
+        ) : (
+          <motion.button
+            css={clipButtonStyle}
+            onClick={() => setIsCliped(true)}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
           >
-            <ClipBoardIcon />
-            {initialText}
-          </motion.span>
-        </motion.button>
-      )}
-    </AnimatePresence>
+            <motion.span
+              css={clipButtonContentStyle}
+              key="reaction"
+              initial={{ x: 0 }}
+              exit={{ x: 50, transition: { duration: 0.1 } }}
+            >
+              <ClipBoardIcon />
+              {initialText}
+            </motion.span>
+          </motion.button>
+        )}
+      </AnimatePresence>
+    </div>
   );
 };
 

diff --git a/packages/service/src/components/main/EventPeriod/Timer/Timer.css.ts b/packages/service/src/components/main/EventPeriod/Timer/Timer.css.ts
@@ -15,7 +15,7 @@ export const staticCardStyles = (position: "upper" | "lower") => css`
 `;
 
 export const textStyles = (translateY?: string, title?: string) => css`
-  font-family: "PyeongChang Peace";
+  ${theme.font.pcpL}
   font-size: calc(20px + 3vw);
   -webkit-text-stroke-width: 2px;
   font-weight: normal;
@@ -96,6 +96,7 @@ export const rendererWrap2 = css`
   align-items: center;
   gap: calc(10px + 2vw);
   justify-content: center;
+
   ${mobile(css`
     gap: 0.3rem;
   `)};

diff --git a/packages/service/src/constants/routes.ts b/packages/service/src/constants/routes.ts
@@ -16,3 +16,4 @@ export const PARTS_COLLECTION_PAGE_ROUTE = "/parts-collection" as const;
 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;
diff --git a/packages/service/src/index.tsx b/packages/service/src/index.tsx
@@ -23,6 +23,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <RouterProvider router={router} />
       <ModalContainer />
     </ModalProvider>
-    <ReactQueryDevtools initialIsOpen={false} />s
+    <ReactQueryDevtools initialIsOpen={false} />
   </QueryClientProvider>,
 );
diff --git a/packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts b/packages/service/src/pages/LotteryApplyFinish/LotteryApplyFinish.css.ts
@@ -0,0 +1,97 @@
+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 50px 0;
+  `)}
+`;
+export const applyBtn = (isExpectationNull: boolean) => css`
+  padding: 50px 50px;
+  height: 100px;
+  background-color: ${isExpectationNull
+    ? theme.color.gray400
+    : theme.color.eventBlue};
+  color: ${isExpectationNull ? theme.color.gray300 : theme.color.white};
+  cursor: ${isExpectationNull ? "default" : "pointer"};
+
+  &:active {
+    background-color: ${isExpectationNull && theme.color.gray400};
+  }
+
+  width: fit-content;
+`;
+
+export const sectionTitle = css`
+  ${theme.font.pcB28};
+  ${mobile(css`
+    font-size: 24px;
+  `)}
+`;
+
+export const btn = css`
+  margin: 0 auto;
+  background-color: ${theme.color.gray100};
+  color: black;
+  ${theme.font.preB}
+  font-size : 24px;
+
+  &:hover {
+    background-color: ${theme.color.gray200};
+  }
+  ${mobile(css`
+    padding: 10px 20px;
+    width: 200px;
+  `)}
+`;
+
+export const shareLinkBox = css`
+  background-color: ${theme.color.gray100};
+  color: ${theme.color.gray300};
+  ${theme.font.preM14}
+  border-radius: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 16px 18px;
+  width: 400px;
+
+  ${mobile(css`
+    width: 100%;
+    padding: 10px;
+  `)}
+`;
+
+export const expectationInput = css`
+  padding: 18px;
+  height: 100px;
+  resize: none;
+  width: 600px;
+  border-radius: 14px;
+  background-color: ${theme.color.gray100};
+  outline: none;
+
+  ${mobile(css`
+    width: 100%;
+  `)}
+`;