Merge pull request #79 from softeerbootcamp4th/feat/CLAP-67

feat(CLAP-67): 당첨자 정보 입력 폼 만들기

packages/core/src/types/orderEvent/index.ts

@@ -30,5 +30,5 @@ export interface IPostOrderEventRequest {
 
 export interface IPostOrderEventResponse {
   result: OrderEventResultType;
-  ApplyTicket?: string;
+  applyTicket?: string;
 }

packages/service/src/apis/orderEvent/apiPostOrderEventApply.ts

@@ -0,0 +1,27 @@
+import { customFetch } from "@watermelon-clap/core/src/utils";
+import { IPostOrderEventApplyRequest } from "./type";
+
+export const apiPostOrderEventApply = async ({
+  eventId,
+  quizId,
+  phoneNumber,
+  appplyTicket,
+}: IPostOrderEventApplyRequest): Promise<Response> => {
+  return customFetch(
+    `${import.meta.env.VITE_BACK_BASE_URL}/event/order/${eventId}/${quizId}/apply`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ApplyTicket: appplyTicket,
+      },
+      body: JSON.stringify({ phoneNumber: phoneNumber }),
+    },
+  )
+    .then((response) => {
+      return response;
+    })
+    .catch((error) => {
+      throw error;
+    });
+};

packages/service/src/apis/orderEvent/type.ts

@@ -0,0 +1,6 @@
+export interface IPostOrderEventApplyRequest {
+  eventId: string;
+  quizId: string;
+  phoneNumber: string;
+  appplyTicket: string;
+}

packages/service/src/common/components/ModalContainer/content/modalContent.tsx

@@ -40,3 +40,10 @@ export const MODAL_CONTENT_QUIZ_WRONG = (
     <p>아반떼 N 페이지에서 정답을 확인해 주세요.</p>
   </div>
 );
+
+export const MODAL_CONTENT_ORDER_EVENT_APPLY_SUCCESS = (
+  <div css={[theme.flex.center, theme.flex.column]}>
+    <p>신청되었습니다.</p>
+    <p>경품은 추후 문자를 통해 발송됩니다.</p>
+  </div>
+);

packages/service/src/common/utils/formatter.ts

@@ -5,3 +5,13 @@ export function toPx(value: number | string): string {
 export function toS(value: number | string): string {
   return typeof value === "number" ? `${value}s` : value;
 }
+
+export const phoneNumberAutoFormat = (phoneNumber: string): string => {
+  const number = phoneNumber.trim().replace(/[^0-9]/g, "");
+
+  if (number.length < 4) return number;
+  if (number.length < 7) return number.replace(/(\d{3})(\d{1})/, "$1-$2");
+  if (number.length < 11)
+    return number.replace(/(\d{3})(\d{3})(\d{1})/, "$1-$2-$3");
+  return number.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3");
+};

packages/service/src/components/nQuizEvent/NQuizSection/NQuizInput/NQuizInput.tsx

@@ -15,6 +15,8 @@ import {
   MODAL_N_QUIZ_TITLE,
 } from "@service/common/components/ModalContainer/content/modalContent";
 import { useErrorBoundary } from "react-error-boundary";
+import { useNavigate } from "react-router-dom";
+import { N_QUIZ_EVENT_PAGE_WINNER_APLLY_PAGE_ROUTE } from "@service/constants/routes";
 
 interface NQuizInputProps {
   openedQuiz: IOrderEvent;
@@ -24,6 +26,7 @@ export const NQuizInput = ({ openedQuiz }: NQuizInputProps) => {
   const [inputValue, setInputValue] = useState<string>("");
   const { showBoundary } = useErrorBoundary();
   const { closeModal, openModal } = useModal();
+  const navigate = useNavigate();
 
   const handleSubmit = () => {
     if (inputValue.trim() === "") return;
@@ -46,32 +49,14 @@ export const NQuizInput = ({ openedQuiz }: NQuizInputProps) => {
   const handleApiResponse = (response: IPostOrderEventResponse) => {
     switch (response.result) {
       case "SUCCESS":
-        craftSideCannons(2);
-        openModal({
-          type: "alert",
-          props: {
-            title: MODAL_N_QUIZ_TITLE,
-            content: "정답!! 너 재능있어~",
-          },
-        });
+        handleSuccessResponse(response.applyTicket as string);
         break;
       case "WRONG":
-        openModal({
-          type: "navigate",
-          props: {
-            title: MODAL_N_QUIZ_TITLE,
-            content: MODAL_CONTENT_QUIZ_WRONG,
-          },
-        });
+        handleWrongResponse();
         break;
       case "CLOSED":
-        openModal({
-          type: "alert",
-          props: {
-            title: MODAL_N_QUIZ_TITLE,
-            content: MODAL_CONTENT_QUIZ_CLOSED,
-          },
-        });
+        handleClosedResponse();
+        break;
     }
   };
 
@@ -90,6 +75,33 @@ export const NQuizInput = ({ openedQuiz }: NQuizInputProps) => {
     }
   };
 
+  const handleSuccessResponse = (applyTicket: string) => {
+    localStorage.setItem("ApplyTicket", applyTicket);
+    closeModal();
+    navigate(N_QUIZ_EVENT_PAGE_WINNER_APLLY_PAGE_ROUTE);
+    craftSideCannons(2);
+  };
+
+  const handleWrongResponse = () => {
+    openModal({
+      type: "navigate",
+      props: {
+        title: MODAL_N_QUIZ_TITLE,
+        content: MODAL_CONTENT_QUIZ_WRONG,
+      },
+    });
+  };
+
+  const handleClosedResponse = () => {
+    openModal({
+      type: "alert",
+      props: {
+        title: MODAL_N_QUIZ_TITLE,
+        content: MODAL_CONTENT_QUIZ_CLOSED,
+      },
+    });
+  };
+
   return (
     <div css={[theme.flex.between]}>
       <input

packages/service/src/constants/routes.ts

@@ -13,3 +13,5 @@ export const NEW_CAR_PAGE_ROUTE = "/new-car" as const;
 export const N_PARTS_PICK_PAGE_ROUTE = "/parts-pick" as const;
 export const PICK_EVENT_PAGE_ROUTE = "/pick-event" as const;
 export const PARTS_COLLECTION_PAGE_ROUTE = "/parts-collection" as const;
+export const N_QUIZ_EVENT_PAGE_WINNER_APLLY_PAGE_ROUTE =
+  "/quiz-event-apply" as const;

packages/service/src/pages/NQuizEventWinnerApply/NQuizEventWinnerApply.css.ts

@@ -0,0 +1,134 @@
+import { css } from "@emotion/react";
+import { mobile } from "@service/common/responsive/responsive";
+import { theme } from "@watermelon-clap/core/src/theme";
+
+export const backgroundStyle = css`
+  background-image: url("/images/quiz/nQuizBackground.png");
+  background-size: cover;
+  background-position: top;
+  background-repeat: no-repeat;
+  width: 100%;
+
+  ${theme.flex.center}
+  ${theme.flex.column}
+
+  padding: 100px 18vw;
+  padding-bottom: 94px;
+
+  gap: 20px;
+
+  ${mobile(css`
+    min-width: 0px;
+    padding: 20vw 6vw;
+    padding-bottom: 47px;
+  `)};
+`;
+
+export const logoContainerStyle = css`
+  ${theme.flex.center};
+  ${theme.gap.gap32};
+
+  ${mobile(css`
+    ${theme.gap.gap16};
+  `)}
+`;
+
+export const logoStyle = css`
+  width: 208px;
+  height: 87px;
+  text-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
+
+  ${mobile(css`
+    width: 104px;
+    height: 43px;
+  `)}
+`;
+
+export const titleStyle = css`
+  ${theme.font.pcpB82}
+  color: ${theme.color.white};
+  text-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
+
+  ${mobile(css`
+    font-size: 41px;
+  `)};
+`;
+
+export const contentContainerStyle = css`
+  ${theme.flex.center};
+  ${theme.flex.column};
+  ${theme.gap.gap8};
+
+  ${mobile(css`
+    ${theme.gap.gap4};
+  `)}
+`;
+
+export const cheersTextStyle = css`
+  ${theme.font.preB38}
+  color: ${theme.color.eventBlue};
+  text-align: center;
+
+  ${mobile(css`
+    font-size: 14px;
+  `)}
+`;
+
+export const contentTextStyle = css`
+  ${theme.font.preB24}
+  color: ${theme.color.white};
+  text-align: center;
+
+  ${mobile(css`
+    font-size: 14px;
+  `)}
+`;
+
+export const inputContainerStyle = css`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const inputStyle = css`
+  display: flex;
+  width: 566px;
+  height: 52px;
+  padding: 15px 18px;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: var(--Gray-100, #ececec);
+`;
+
+export const listStyle = css`
+  width: 566px;
+  display: flex;
+  flex-direction: column;
+  color: ${theme.color.gray300};
+  align-items: start;
+  gap: 10px;
+`;
+
+export const listItemStyle = css`
+  ${theme.font.preM18}
+  color: ${theme.color.gray300};
+  margin-left: 22px;
+`;
+
+export const rewardContainerStyle = css`
+  width: 200px;
+  height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const centeredContainerStyle = css`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;