feat: month-score-modal (#148)

AboutClan · May 29, 2024 · cd0030d · cd0030d
1 parent a113d0f
commit cd0030d
Show file tree

Hide file tree

Showing 18 changed files with 344 additions and 1,276 deletions.
diff --git a/assets/MainLogo.tsx b/assets/MainLogo.tsx
diff --git a/components/molecules/ProgressMark.tsx b/components/molecules/ProgressMark.tsx
@@ -0,0 +1,45 @@
+import { Box, Flex, Progress } from "@chakra-ui/react";
+
+interface ProgressMarkProps {
+  value: number;
+}
+
+function ProgressMark({ value }: ProgressMarkProps) {
+  const isMax = value >= 30;
+
+  return (
+    <Box fontSize="12px">
+      {!isMax ? (
+        <Flex w="100%" color="var(--gray-500)">
+          <Box w="22px" ml="calc(33% - 22px)" h="100%">
+            경고
+          </Box>
+          <Box ml="auto">추가 점수</Box>
+        </Flex>
+      ) : (
+        <Box textAlign="end" color="var(--color-mint)">
+          <i className="fa-light fa-hundred-points fa-xl" />
+        </Box>
+      )}
+
+      <Flex w="100%" h="12px">
+        <Box
+          ml="calc(33% - 0.75px)"
+          h="100%"
+          borderLeft="1.5px solid var(--gray-200)"
+          w="1px"
+        ></Box>
+        <Box ml="auto" h="100%" borderRight="1.5px solid var(--gray-200)" w="1px"></Box>
+      </Flex>
+      <Progress value={(value * 100) / 30} hasStripe={true} colorScheme="mintTheme" />
+
+      <Flex mt="4px" color="var(--gray-500)">
+        <Box>0</Box>
+        <Box ml="calc(33% - 22px)">10</Box>
+        <Box ml="auto">30</Box>
+      </Flex>
+    </Box>
+  );
+}
+
+export default ProgressMark;
diff --git a/components/molecules/navs/IconButtonNav.tsx b/components/molecules/navs/IconButtonNav.tsx
@@ -17,7 +17,7 @@ export default function IconButtonNav({ iconList }: IIconButtonNav) {
   return (
     <Flex h="100%" alignItems="center" as="nav">
       {iconList.map((icon, idx) => (
-        <Flex w="28px" h="28px" justify="center" align="center" ml="8px" key={idx}>
+        <Flex w="28px" h="28px" justify="center" align="center" ml="12px" key={idx}>
           {icon?.link ? (
             <Link
               style={{ position: "relative", padding: "16px" }}

diff --git a/constants/serviceConstants/pointSystemConstants.ts b/constants/serviceConstants/pointSystemConstants.ts
@@ -16,9 +16,10 @@ export const POINT_SYSTEM_PLUS = {
   },
   STUDY_VOTE_DAILY: { value: 2, message: "당일 스터디 참여" },
   STUDY_INVITE: { value: 2, message: "친구 초대 보너스" },
-  DAILY_ATTEND: { value: 3, message: "일일 출석" },
+  DAILY_ATTEND: { value: 2, message: "일일 출석" },
   PROMOTION: { value: 100, message: "홍보 리워드" },
   LIKE: { value: 2, message: "좋아요" },
+  GATHER_ATTEND: { value: 5, message: "모임 참여" },
 };
 
 export const POINT_SYSTEM_DEPOSIT = {

diff --git a/modals/Modals.tsx b/modals/Modals.tsx
@@ -105,8 +105,10 @@ export function ModalLayout({
           </>
         )}
         <ChakraModalBody
-          pt={paddingOptions?.body?.top ? `${paddingOptions.body.top}px` : "16px"}
-          pb={paddingOptions?.body?.bottom ? `${paddingOptions.body.bottom}px` : "4px"}
+          pt={paddingOptions?.body?.top !== undefined ? `${paddingOptions.body.top}px` : "16px"}
+          pb={
+            paddingOptions?.body?.bottom !== undefined ? `${paddingOptions.body.bottom}px` : "4px"
+          }
           px="20px"
         >
           {children}

diff --git a/modals/aboutHeader/dailyCheckModal/DailyCheckModal.tsx b/modals/aboutHeader/dailyCheckModal/DailyCheckModal.tsx
@@ -57,6 +57,7 @@ function DailyCheckModal({ setIsModal }: IModal) {
     },
   });
   const { mutate: getPoint } = usePointSystemMutation("point");
+  const { mutate: getScore } = usePointSystemMutation("score");
   const { mutate: sendRequest } = useUserRequestMutation();
 
   const winDistribution = getDistributionArr(DAILY_CHECK_WIN_LIST, DISTRIBUTION_SIZE);
@@ -92,7 +93,7 @@ function DailyCheckModal({ setIsModal }: IModal) {
       };
       sendRequest(data);
     }
-    getPoint(POINT_SYSTEM_PLUS.DAILY_ATTEND);
+    getScore(POINT_SYSTEM_PLUS.DAILY_ATTEND);
     toast("success", "출석체크 완료 !");
   };
 
@@ -107,7 +108,7 @@ function DailyCheckModal({ setIsModal }: IModal) {
   return (
     <ModalLayout title="매일매일 출석체크!" footerOptions={footerOptions} setIsModal={setIsModal}>
       <PresentMessage>
-        매일 출석체크로 <b>5 point</b>를 얻을 수 있고, 운이 좋으면
+        매일 출석체크로 <b>2 SCORE</b>을 얻을 수 있고, 확률적으로
         <b> 랜덤 이벤트 선물</b>도 받을 수 있어요!
       </PresentMessage>
       <Container>

diff --git a/modals/aboutHeader/pointSystemsModal/PointSystemsModal.tsx b/modals/aboutHeader/pointSystemsModal/PointSystemsModal.tsx
@@ -1,10 +1,11 @@
+import { Box } from "@chakra-ui/react";
 import { useState } from "react";
 import styled from "styled-components";
 
+import CheckList from "../../../components/atoms/CheckList";
 import TabNav, { ITabNavOptions } from "../../../components/molecules/navs/TabNav";
 import { IModal } from "../../../types/components/modalTypes";
 import { IFooterOptions, ModalLayout } from "../../Modals";
-import PointSystemsModalFee from "./PointSystemsModalFee";
 import PointSystemsModalPoint from "./PointSystemsModalPoint";
 
 function PointSystemsModal({ setIsModal }: IModal) {
@@ -16,34 +17,50 @@ function PointSystemsModal({ setIsModal }: IModal) {
 
   const tabNavOptions: ITabNavOptions[] = [
     {
-      text: "ABOUT 포인트",
+      text: "포인트 가이드",
       func: () => setIsFirst(true),
       flex: 1,
     },
     {
-      text: "스터디 벌금",
+      text: "서비스 소개",
       func: () => setIsFirst(false),
       flex: 1,
     },
   ];
 
+  const ACTIVE_CONTENTS = [
+    "오후 11시에 스터디 결과가 발표됩니다. 투표 순서대로 몇배의 추가 포인트를 획득하니 먼저 투표해주세요!",
+    "친구 초대 또는 단톡방에 스터디 공유를 통해 더 빠른 인원 모집을 할 수 있습니다.",
+    "스터디 매칭에 실패한 경우 자유 스터디로 오픈 또는 개인 스터디로 전환이 가능합니다.",
+    "관심있는 모임이나 소그룹에 참여해 보세요! 또는 직접 개설하고 지원금을 받을 수도 있습니다!",
+    "더 자세한 설명은 마이페이지의 '자주 묻는 질문'에 가 보시면 종류별 많은 정보가 있습니다!",
+  ];
+
   return (
     <ModalLayout
-      title="포인트 가이드"
+      title="동아리 가이드"
       footerOptions={footerOptions}
       headerOptions={{
         subTitle: "대학색들의 카공 및 친목 동아리 ABOUT",
       }}
       setIsModal={setIsModal}
     >
-      <TabNav tabOptionsArr={tabNavOptions} selected={isFirst ? "ABOUT 포인트" : "스터디 벌금"} />
-      <Wrapper>{isFirst ? <PointSystemsModalPoint /> : <PointSystemsModalFee />}</Wrapper>
+      <TabNav tabOptionsArr={tabNavOptions} selected={isFirst ? "포인트 가이드" : "서비스 소개"} />
+      <Wrapper>
+        {isFirst ? (
+          <PointSystemsModalPoint />
+        ) : (
+          <Box pt="16px">
+            <CheckList contents={ACTIVE_CONTENTS} />
+          </Box>
+        )}
+      </Wrapper>
     </ModalLayout>
   );
 }
 
 const Wrapper = styled.div`
-  height: 100%;
+  height: 288px;
   margin-top: var(--gap-2);
 `;
 

diff --git a/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx b/modals/aboutHeader/pointSystemsModal/PointSystemsModalPoint.tsx
@@ -1,4 +1,4 @@
-import { ListItem, UnorderedList } from "@chakra-ui/react";
+import { Box, ListItem, UnorderedList } from "@chakra-ui/react";
 import styled from "styled-components";
 
 import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants";
@@ -7,43 +7,45 @@ function PointSystemsModalPoint() {
   return (
     <>
       <Layout>
-        <Item>
-          <Name>스터디 투표</Name>
-
-          <i className="fa-light fa-2x fa-check-to-slot" />
-          <Point>0~20 POINT</Point>
-        </Item>
         <Item>
           <Name>스터디 출석</Name>
-
           <i className="fa-light fa-2x fa-check-circle" />
-          <Point>5 POINT</Point>
-        </Item>
-        <Item>
-          <Name>에타 홍보</Name>
-          <i className="fa-light fa-2x fa-gift" />
-          <Point>{POINT_SYSTEM_PLUS.PROMOTION.value} POINT</Point>
+          <Point isDoublePoint={true}>5 포인트</Point>
         </Item>
         <Item>
           <Name>일일 출석</Name>
-
           <i className="fa-light fa-2x fa-badge-check" />
-          <Point>{POINT_SYSTEM_PLUS.DAILY_ATTEND.value} POINT</Point>
+          <Point isDoublePoint={true}>{POINT_SYSTEM_PLUS.DAILY_ATTEND.value} 포인트</Point>
+        </Item>
+        <Item>
+          <Name>모임 참여</Name> <i className="fa-light fa-2x fa-party-horn" />
+          <Point isDoublePoint={true}>10 포인트</Point>
+        </Item>
+        <Item>
+          <Name>스터디 투표</Name>
+          <i className="fa-light fa-2x fa-check-to-slot" />
+          <Point>2~20 포인트</Point>
         </Item>
         <Item>
           <Name>좋아요</Name>
-
           <i className="fa-light fa-2x fa-heart-circle" />
-          <Point>{POINT_SYSTEM_PLUS.LIKE.value} POINT</Point>
+          <Point>{POINT_SYSTEM_PLUS.LIKE.value} 포인트</Point>
         </Item>
         <Item>
-          <Name>이벤트</Name> <i className="fa-light fa-2x fa-party-horn" />
-          <Point>10 POINT</Point>
+          <Name>에타 홍보</Name>
+          <i className="fa-light fa-2x fa-gift" />
+          <Point>{POINT_SYSTEM_PLUS.PROMOTION.value} 포인트</Point>
         </Item>
       </Layout>
       <UnorderedList mt="12px">
-        <ListItem>이외에도 다양한 방식으로 획득이 가능합니다.</ListItem>
+        <ListItem>
+          <Box as="span" color="var(--color-orange)">
+            출석과 모임
+          </Box>
+          은 포인트와 동아리 점수 모두 획득 !!
+        </ListItem>
         <ListItem>포인트는 스토어에서 사용이 가능합니다.</ListItem>
+        <ListItem>그 외에도 다양한 곳에서 포인트 획득이 가능합니다.</ListItem>
       </UnorderedList>
     </>
   );
@@ -75,9 +77,9 @@ const Name = styled.span`
   margin-bottom: var(--gap-3);
 `;
 
-const Point = styled.span`
+const Point = styled.span<{ isDoublePoint?: boolean }>`
   margin-top: var(--gap-2);
-  color: var(--color-mint);
+  color: ${(props) => (!props.isDoublePoint ? "var(--color-mint)" : "var(--color-orange)")};
 `;
 
 export default PointSystemsModalPoint;
diff --git a/modals/gather/gatherParticipateModal/GatherParticipateModalParticipate.tsx b/modals/gather/gatherParticipateModal/GatherParticipateModalParticipate.tsx
@@ -1,9 +1,11 @@
 import { useRouter } from "next/router";
 
 import { GATHER_CONTENT } from "../../../constants/keys/queryKeys";
+import { POINT_SYSTEM_PLUS } from "../../../constants/serviceConstants/pointSystemConstants";
 import { useResetQueryData } from "../../../hooks/custom/CustomHooks";
 import { useCompleteToast, useErrorToast } from "../../../hooks/custom/CustomToast";
 import { useGatherParticipationMutation } from "../../../hooks/gather/mutations";
+import { usePointSystemMutation } from "../../../hooks/user/mutations";
 import { IModal } from "../../../types/components/modalTypes";
 import { ModalBodyNavTwo } from "../../Modals";
 
@@ -15,11 +17,14 @@ function GatherParticipateModalParticipate({ setIsModal }: IModal) {
   const gatherId = +router.query.id;
 
   const resetQueryData = useResetQueryData();
+
+  const { mutate: getScore } = usePointSystemMutation("score");
+
   const { mutate: participate } = useGatherParticipationMutation("post", gatherId, {
     onSuccess() {
       resetQueryData([GATHER_CONTENT]);
-
-      completeToast("free", "참여 완료!");
+      getScore(POINT_SYSTEM_PLUS.GATHER_ATTEND);
+      completeToast("free", "참여가 완료되었습니다. 5 SCORE 획득 !");
     },
     onError: errorToast,
   });