feat: 모집알림 기능 추가

Club-PARD · Aug 3, 2024 · 1ffb9bd · 1ffb9bd
1 parent d96298b
commit 1ffb9bd
Show file tree

Hide file tree

Showing 6 changed files with 152 additions and 155 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Mobile/Components/RecruitmentStatusButtonMob.js b/src/components/Mobile/Components/RecruitmentStatusButtonMob.js
@@ -1,13 +1,29 @@
 import styled from "styled-components";
-import { pardDATA } from "../../../utils/data.constant";
+import {
+  APPLY_FORM_URL,
+  EARLY_FORM_URL,
+  pardDATA,
+} from "../../../utils/data.constant";
 
 export const RecruitmentStatusButtonMob = ({ theme, backgroundColor }) => {
-  const content = pardDATA.isRecruiting
+  const content = pardDATA.recruitingReady
+    ? `${pardDATA.currentGeneration}기 모집이 곧 시작됩니다`
+    : pardDATA.isRecruiting
     ? `지금 바로 ${pardDATA.currentGeneration}기 지원하기`
     : `${pardDATA.currentGeneration}기 모집이 완료되었습니다`;
 
-  return pardDATA.isRecruiting ? (
-    <EnrollmentOpenButton theme={theme} backgroundColor={backgroundColor}>
+  const handleClick = () => {
+    pardDATA.recruitingReady
+      ? window.open(EARLY_FORM_URL, "_blank")
+      : window.open(APPLY_FORM_URL, "_blank");
+  };
+
+  return pardDATA.isRecruiting || pardDATA.recruitingReady ? (
+    <EnrollmentOpenButton
+      theme={theme}
+      backgroundColor={backgroundColor}
+      onClick={handleClick}
+    >
       {content}
     </EnrollmentOpenButton>
   ) : (

diff --git a/src/components/Web/Components/RecruitmentStatusButtonWeb.js b/src/components/Web/Components/RecruitmentStatusButtonWeb.js
@@ -1,13 +1,29 @@
 import styled from "styled-components";
-import { pardDATA } from "../../../utils/data.constant";
+import {
+  APPLY_FORM_URL,
+  EARLY_FORM_URL,
+  pardDATA,
+} from "../../../utils/data.constant";
 
 export const RecruitmentStatusButtonWeb = ({ theme, backgroundColor }) => {
-  const content = pardDATA.isRecruiting
+  const content = pardDATA.recruitingReady
+    ? `${pardDATA.currentGeneration}기 모집이 곧 시작됩니다`
+    : pardDATA.isRecruiting
     ? `지금 바로 ${pardDATA.currentGeneration}기 지원하기`
     : `${pardDATA.currentGeneration}기 모집이 완료되었습니다`;
 
-  return pardDATA.isRecruiting ? (
-    <EnrollmentOpenButton theme={theme} backgroundColor={backgroundColor}>
+  const handleClick = () => {
+    pardDATA.recruitingReady
+      ? window.open(EARLY_FORM_URL, "_blank")
+      : window.open(APPLY_FORM_URL, "_blank");
+  };
+
+  return pardDATA.isRecruiting || pardDATA.recruitingReady ? (
+    <EnrollmentOpenButton
+      theme={theme}
+      backgroundColor={backgroundColor}
+      onClick={handleClick}
+    >
       {content}
     </EnrollmentOpenButton>
   ) : (

diff --git a/src/components/Web/Web-HomePage/HomeFirst.js b/src/components/Web/Web-HomePage/HomeFirst.js
@@ -109,7 +109,7 @@ const HomeFirst = () => {
   document.documentElement.style.overflowX = "hidden";
   return (
     <>
-      <DIVVVV>
+      <Container>
         <VideoContainer isColor={backcolor} isFixed={isFixed}>
           {isSafari ? (
             <VideoBackgroundImg
@@ -243,7 +243,7 @@ const HomeFirst = () => {
             </>
           )}
         </VideoContainer>
-      </DIVVVV>
+      </Container>
     </>
   );
 };
@@ -262,7 +262,7 @@ const VideoContainer = styled.div`
 `;
 
 //inline-block으로 stickybox를 위로 올리는 역할을한다.
-const DIVVVV = styled.div`
+const Container = styled.div`
   display: inline-block;
   height: 11000px;
   width: 100%;
@@ -407,7 +407,6 @@ const Textchanged1 = styled.p`
   font-weight: 800;
   font-size: 60px;
   line-height: 140%;
-  /* identical to box height, or 84px */
 
   text-align: center;
   color: #ffffff;
@@ -463,16 +462,6 @@ const LogoDiv = styled.div`
   z-index: 0;
 `;
 
-const moveUp = keyframes`
-  from {
-    transform: translateY(50%); // adjust this value to control the distance of movement
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-`; // Y if FORWA가 올라가는 위치 조정, opacity로 보이는 거 조절
 const MovedText = styled.div`
   display: flex;
   width: 1000px;
@@ -489,9 +478,7 @@ const MovedText = styled.div`
       `}//2초만에 나타나서 고정이 된다
       // forwards
     `};
-  //추가되어 애니메이션이 시작되기 전에 첫 번째 keyframe의 스타일이 적용되고, 애니메이션이 끝나면 마지막 keyframe의 스타일이 유지됩니다.
-  // forwards 0.5s는 added 0.5s delay
-  // 위에 태그들 즉 Text1,Text2 가 끝나고 0.5s뒤에 실행
+
   font-family: "NanumSquare Neo";
   font-style: normal;
   z-index: 4;

diff --git a/src/utils/data.constant.js b/src/utils/data.constant.js
@@ -2,6 +2,12 @@ export const pardDATA = {
   currentGeneration: 4,
   displayBanner: false,
   isRecruiting: false,
+  recruitingReady: true,
 };
 
+// 사전 알림 구글 폼 URL
+export const EARLY_FORM_URL = "https://open.kakao.com/o/gHDyOT5f";
+// 신청 구글 폼 URL
+export const APPLY_FORM_URL = "";
+
 export const PROJECT_GRID = 9;