Merge pull request #567 from sparcs-kaist/dev

Main branch update from Dev branch

package.json

@@ -11,6 +11,7 @@
     "@mui/icons-material": "^5.3.1",
     "@mui/material": "^5.4.1",
     "@types/qs": "^6.9.7",
+    "antd": "^5.4.6",
     "axios": "^0.21.1",
     "browser-image-compression": "^2.0.0",
     "craco-alias": "^3.0.1",

src/components/Title.jsx

@@ -13,6 +13,7 @@ import HailRoundedIcon from "@mui/icons-material/HailRounded";
 import HistoryRoundedIcon from "@mui/icons-material/HistoryRounded";
 import LocalTaxiRoundedIcon from "@mui/icons-material/LocalTaxiRounded";
 import ManageSearchRoundedIcon from "@mui/icons-material/ManageSearchRounded";
+import NotificationsActiveRoundedIcon from "@mui/icons-material/NotificationsActiveRounded";
 import PersonOutlineRoundedIcon from "@mui/icons-material/PersonOutlineRounded";
 import QuestionAnswerRoundedIcon from "@mui/icons-material/QuestionAnswerRounded";
 import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
@@ -50,6 +51,8 @@ const getIcon = (icon) => {
       return <FeedRounedIcon style={iconStyle} />;
     case "favorite":
       return <FavoriteRoundedIocn style={iconStyle} />;
+    case "notice":
+      return <NotificationsActiveRoundedIcon style={iconStyle} />;
     default:
       return <></>;
   }

src/pages/Event/Event2023Spring.tsx

@@ -1,3 +1,5 @@
+import { Carousel } from "antd";
+
 import Button from "components/Button";
 import Footer from "components/Footer";
 import RLayout from "components/RLayout";
@@ -6,105 +8,163 @@ import WhiteContainer from "components/WhiteContainer";
 
 import theme from "tools/theme";
 
+import Card01 from "static/events/2023springCard01.png";
+import Card02 from "static/events/2023springCard02.png";
+import Card03 from "static/events/2023springCard03.png";
+import Card04 from "static/events/2023springCard04.png";
+import Card05 from "static/events/2023springCard05.png";
+import Card06 from "static/events/2023springCard06.png";
+import Card07 from "static/events/2023springCard07.png";
+import Card08 from "static/events/2023springCard08.png";
+import Card09 from "static/events/2023springCard09.png";
+import Card10 from "static/events/2023springCard10.png";
+
+type EventLinkProps = {
+  href: string;
+  text?: string;
+};
+type WhiteContainerCardProps = {
+  src: string;
+};
+
+const EventLink = ({ href, text }: EventLinkProps) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noreferrer"
+    css={{ color: theme.purple, textDecoration: "none" }}
+  >
+    {text || href}
+  </a>
+);
+
+const WhiteContainerCard = ({ src }: WhiteContainerCardProps) => (
+  <div>
+    <img
+      src={src}
+      css={{
+        margin: 0,
+        width: "100%",
+      }}
+      alt="card1"
+    />
+  </div>
+);
+
 const Event2023Spring = () => {
   const styleText = {
     ...theme.font14,
+    lineHeight: "1.5rem",
     color: theme.black,
     margin: "0px 4px 15px",
   };
+
   return (
     <RLayout.R1>
+      <Title icon="notice" header>
+        이벤트 요약
+      </Title>
+      <WhiteContainer padding="0px">
+        <Carousel autoplay autoplaySpeed={2000}>
+          {[
+            Card01,
+            Card02,
+            Card03,
+            Card04,
+            Card05,
+            Card06,
+            Card07,
+            Card08,
+            Card09,
+            Card10,
+          ].map((item, index) => (
+            <WhiteContainerCard src={item} key={index} />
+          ))}
+        </Carousel>
+      </WhiteContainer>
       <Title icon="taxi" header>
-        탑승 인증 이벤트
+        택시 탑승 인증 이벤트
       </Title>
       <WhiteContainer>
         <div css={styleText}>
-          이벤트 설명 어쩌구 저쩌구
+          <b>🎁 경품 : </b>
+          에어팟 3세대 (1명), 갤럭시 워치5 (1명), 택시비 카카오페이 상품권
+          5000원 (40명)
           <br />
+          <b>📌 이벤트 기간 : </b>
+          5월 3일(수) ~ 5월 15일(월)
           <br />
-          🎁 경품 : 스타벅스 아이스 카페 아메리카노 T (15명)
+          <b>🌟 인증방법</b>
+          <br />둘 중 한가지 방법을 선택해 버튼을 눌러 올려주시면 참여 완료!
           <br />
-          📌 이벤트 기간 : 11월 28일 ~ 12월 12일
-        </div>
-        <a href="/" target="_blank">
-          <Button
-            type="purple"
-            padding="14px 0 13px"
-            radius={12}
-            font={theme.font16_bold}
-          >
-            탑승 인증하기
-          </Button>
-        </a>
-      </WhiteContainer>
-
-      <Title icon="favorite" header>
-        인스타 공유 이벤트
-      </Title>
-      <WhiteContainer>
-        <div css={styleText}>
-          <a
-            href="https://www.instagram.com/sparcs.kaist"
-            target="_blank"
-            rel="noreferrer"
-            css={{ color: theme.purple, textDecoration: "none" }}
-          >
-            @sparcs.kaist
-          </a>{" "}
-          팔로우 후 본 게시물을 인스타그램 스토리에 공유해주세요. 그리고
-          <a
-            href="https://www.instagram.com/sparcs.kaist"
-            target="_blank"
-            rel="noreferrer"
-            css={{ color: theme.purple, textDecoration: "none" }}
-          >
-            @sparcs.kaist
-          </a>{" "}
-          를 태그 후 {'"'}공유이벤트 참여{'"'}라는 문구를 남겨주세요. 추첨을
-          통해 15명에게 경품을 드립니다.
+          1. Taxi 서비스의 채팅 페이지 스크린샷과 카드 결제 메시지
           <br />
+          2. Taxi 서비스의 채팅 페이지 스크린샷과 택시를 탑승한 후 미터기 사진
           <br />
-          🎁 경품 : 스타벅스 아이스 카페 아메리카노 T (15명)
+          <b>🎈 당첨 확률 UP</b>
           <br />
-          📌 이벤트 기간 : 11월 28일 ~ 12월 12일
+          1. 참여 횟수 비례 당첨확률 UP!
+          <br /> 2. 인스타 스토리에{" "}
+          <EventLink
+            href="https://www.instagram.com/sparcs.kaist"
+            text="@sparcs.kaist"
+          />
+          를 태그 후 스크린샷으로 인증해 추가로 업로드 하면 당첨확률이 2배!
         </div>
-        <a href="/" target="_blank" rel="noreferrer">
+        <a href="https://bit.ly/2023taxi" target="_blank" rel="noreferrer">
           <Button
             type="purple"
             padding="14px 0 13px"
             radius={12}
             font={theme.font16_bold}
           >
-            인스타그램에서 확인하기
+            탑승 인증하기
           </Button>
         </a>
       </WhiteContainer>
 
-      <Title icon="feed" header>
-        설문조사 참여 이벤트
+      <Title icon="favorite" header>
+        인스타 스토리 공유 이벤트
       </Title>
       <WhiteContainer>
         <div css={styleText}>
-          서비스 개선을 위한 설문조사에 참여해 주세요. 설문조사는 약 2분의
-          시간이 소요됩니다. 추첨을 통해 5명에게 경품을 드립니다.
+          <b>🎁 경품 : </b>
+          스타벅스 아이스 카페 아메리카노 T (30명)
           <br />
+          <b>📌 이벤트 기간 : </b>
+          5월 3일(수) ~ 5월 15일(월)
           <br />
-          🎁 경품 : 배달의 민족 2만원 상품권 (5명)
+          <b>🌟 인증방법</b>
           <br />
-          📌 이벤트 기간 : 11월 28일 ~ 12월 12일
+          1.{" "}
+          <EventLink
+            href="https://www.instagram.com/sparcs.kaist"
+            text="@sparcs.kaist"
+          />{" "}
+          팔로우 후 본 게시물을 인스타그램 스토리에 공유하기
+          <br />
+          2.{" "}
+          <EventLink
+            href="https://www.instagram.com/sparcs.kaist"
+            text="@sparcs.kaist"
+          />{" "}
+          를 태그 후 {'"'}공유이벤트 참여{'"'}라는 문구를 남겨주시면 참여 완료!
         </div>
-        <a href="/" target="_blank">
+        <a
+          href="https://www.instagram.com/sparcs.kaist"
+          target="_blank"
+          rel="noreferrer"
+        >
           <Button
             type="purple"
             padding="14px 0 13px"
             radius={12}
             font={theme.font16_bold}
           >
-            설문조사 참여하기
+            게시물 확인하기
           </Button>
         </a>
       </WhiteContainer>
-
       <Footer />
     </RLayout.R1>
   );

src/pages/Home/EventSection.tsx

@@ -10,8 +10,8 @@ import theme from "tools/theme";
 const EventSection = () => {
   return (
     <RLayout.R1>
-      <Title icon="taxi" header>
-        이벤트
+      <Title icon="notice" header>
+        공지
       </Title>
       <WhiteContainer>
         <div
@@ -21,7 +21,29 @@ const EventSection = () => {
             margin: "0px 4px 15px",
           }}
         >
-          이벤트 설명 어쩌구 저쩌구
+          <div
+            css={{
+              ...theme.font14,
+              marginBottom: "10px",
+            }}
+          >
+            <b css={{ color: theme.purple }}>택시 탑승 인증 이벤트</b> 및{" "}
+            <b css={{ color: theme.purple }}>인스타그램 공유 이벤트</b> 절찬리
+            진행 중!
+          </div>
+          <div
+            css={{
+              ...theme.font14,
+              gap: "10px",
+              alignItems: "center",
+              lineHeight: "1.2rem",
+            }}
+          >
+            <b>📌 이벤트 기간 : </b>5/3(수) ~ 5/15(월) <br />
+            <b>🎁 경품 : </b>에어팟 3세대 (1명), 갤럭시 워치5 (1명), 스타벅스
+            아이스 카페 아메리카노 T (30명), 택시비 카카오페이 상품권 5000원
+            (40명)
+          </div>
         </div>
         <Link to="/event/2023spring" style={{ textDecoration: "none" }}>
           <Button

src/pages/Home/index.tsx

@@ -4,7 +4,7 @@ import { useHistory, useLocation, useParams } from "react-router-dom";
 import Footer from "components/Footer";
 import { ModalPrivacyPolicy } from "components/ModalPopup";
 
-// import EventSection from "./EventSection";
+import EventSection from "./EventSection";
 import InfoSection from "./InfoSection";
 import RoomSection from "./RoomSection";
 
@@ -29,7 +29,7 @@ const Home = () => {
     <>
       <InfoSection />
       <div css={{ marginTop: "-10px" }} />
-      {/* <EventSection /> */}
+      <EventSection />
       <RoomSection roomId={roomId} />
       <Footer />
       <ModalPrivacyPolicy

src/tools/regExpTest.js

@@ -8,9 +8,9 @@ const nickname = (x) => {
 };
 
 const roomName = (x) => {
-  return RegExp("^[A-Za-z0-9가-힣ㄱ-ㅎㅏ-ㅣ,.?! _-~/@#^()+*<>{}]{1,50}$").test(
-    x
-  );
+  return RegExp(
+    "^[A-Za-z0-9가-힣ㄱ-ㅎㅏ-ㅣ,.?! _~/#'\\\\@=\"\\-\\^()+*<>{}[\\]]{1,50}$" // ,.?/#'\@="-^()+*<>{}[]
+  ).test(x);
 };
 
 const fromTo = (x) => {