release: 23기 모집 전 공식 웹 수정 사항 반영 (#146)

components/common/FloatingArrow/index.tsx

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import media from 'styles/media';
+
+function FloatingArrow() {
+  const [isHideArrow, setisHideArrow] = useState(false);
+
+  const checkScroll = useCallback((e) => {
+    const scrollTop = e.target.scrollTop || 0;
+    if (scrollTop > 100) {
+      setisHideArrow(true);
+    } else {
+      setisHideArrow(false);
+    }
+  }, []);
+  useEffect(() => {
+    window.addEventListener('scroll', checkScroll, { capture: true });
+    return () => window.removeEventListener('scroll', checkScroll);
+  }, []);
+
+  return (
+    <>
+      {!isHideArrow && (
+        <ArrowDownConatiner>
+          <svg
+            width="48"
+            height="48"
+            viewBox="0 0 48 48"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M24 3V45M24 45L42 28.3266M24 45L6 28.3266"
+              stroke="white"
+              strokeWidth="3.75"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </ArrowDownConatiner>
+      )}
+    </>
+  );
+}
+export default FloatingArrow;
+
+const ArrowDownConatiner = styled.div`
+  position: fixed;
+  bottom: 100px;
+  left: 0px;
+  transform: translateX(calc(50vw - 50%));
+  z-index: 10000;
+  svg {
+    width: 64px;
+    height: 64px;
+  }
+
+  ${media.custom(743)} {
+    & > svg {
+      width: 48px;
+      height: 48px;
+    }
+  }
+`;

components/common/LayoutWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useEffect, useRef } from 'react';
+import React, { ReactNode, useEffect, useRef, useState } from 'react';
 import { Header, Footer, FloatingButton } from 'components/common';
 import { useRouter } from 'next/router';
 import { IntroSection } from 'components/home';

components/common/index.ts

@@ -6,6 +6,7 @@ export { default as LayoutWrapper } from './LayoutWrapper';
 export { default as SEO } from './SEO';
 export { default as Carousel } from './Carousel';
 export { default as FloatingButton } from './FloatingButton';
+export { default as FloatingArrow } from './FloatingArrow';
 export { default as AnimatedBox } from './AnimatedBox';
 export { default as NewsCard } from './NewsCard';
 export { default as TabMenu } from './TabMenu';

components/common/videoPlayer/index.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import media from 'styles/media';
+
+interface VideoPlayerProps {
+  src: string;
+}
+
+function VideoPlayer({ src }: VideoPlayerProps) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [lowPowerMode, setLowPowerMode] = useState(false);
+
+  useEffect(() => {
+    const video = videoRef.current! as HTMLVideoElement;
+    // 아이폰 저전력모드의 경우 play 시 NotAllowedError가 발생, 이 경우 <img>로 대체
+    video.play().catch((error) => {
+      if (error.name === 'NotAllowedError') {
+        setLowPowerMode(true);
+      }
+    });
+  }, [videoRef]);
+
+  return (
+    <>
+      <Container>
+        <VideoPlayerContainer>
+          {!lowPowerMode ? (
+            <video
+              height={'100%'}
+              src={src}
+              ref={videoRef}
+              playsInline
+              autoPlay
+              muted
+              loop
+            />
+          ) : (
+            // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+            <img height={'100%'} src={src}></img>
+          )}
+        </VideoPlayerContainer>
+      </Container>
+    </>
+  );
+}
+
+export default VideoPlayer;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const VideoPlayerContainer = styled.div`
+  height: 1100px;
+  ${media.custom(1280)} {
+    height: 906px;
+  }
+  ${media.custom(743)} {
+    height: 394px;
+  }
+`;

components/home/AnimatedTextSection/index.tsx

@@ -4,10 +4,24 @@ import lottie from 'lottie-web';
 import styled from 'styled-components';
 import media from 'styles/media';
 import { SectionTemplate } from 'components/home';
+import { AnimatedButton } from 'components/common';
+import {
+  IS_RECRUITING,
+  RECRUIT_BANNER,
+  RECRUIT_BANNER_ACTIVE,
+} from 'database/recruit';
+import { useRouter } from 'next/router';
+import Path from 'constants/path';
 
 function AnimatedTextSection(): ReactElement {
   const animatedTextRef = useRef<HTMLDivElement>(null);
+  const BannerInfo = IS_RECRUITING ? RECRUIT_BANNER_ACTIVE : RECRUIT_BANNER;
+  const { buttonName } = BannerInfo;
+  const buttonParams = IS_RECRUITING
+    ? { width: 168 }
+    : { disabled: true, width: 190 };
 
+  const router = useRouter();
   useEffect(() => {
     lottie.loadAnimation({
       container: animatedTextRef.current as HTMLDivElement,
@@ -21,13 +35,24 @@ function AnimatedTextSection(): ReactElement {
   return (
     <AnimatedTextSectionContainer>
       <div ref={animatedTextRef} />
+      <AnimatedButton
+        height={65}
+        style={{ marginTop: 120 }}
+        fontColor="white"
+        buttonColor="orange_400"
+        className="recruitButton"
+        buttonText={buttonName}
+        onClick={() => {
+          router.push(Path.Recruit);
+        }}
+        {...buttonParams}
+      />
     </AnimatedTextSectionContainer>
   );
 }
 
 const AnimatedTextSectionContainer = styled(SectionTemplate)`
   height: 100vh;
-
   ${({ theme }) => theme.textStyle.web.Body_Point}
   ${media.mobile} {
     .intro-text {

components/home/IntroSection/index.tsx

@@ -1,26 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { ReactElement, MouseEvent } from 'react';
 import styled from 'styled-components';
 import media from 'styles/media';
-import {
-  IS_RECRUITING,
-  RECRUIT_BANNER,
-  RECRUIT_BANNER_ACTIVE,
-} from 'database/recruit';
-import { AnimatedButton } from 'components/common';
-import Spline from '@splinetool/react-spline';
-import Path from 'constants/path';
-import { useRouter } from 'next/router';
+import VideoPlayer from 'components/common/videoPlayer';
+import { FloatingArrow } from 'components/common';
 
 function IntroSection(): ReactElement {
-  const router = useRouter();
   const [isHover, setIsHover] = useState(false);
   const [move, setMove] = useState({ ix: 0, iy: 0 });
-  const BannerInfo = IS_RECRUITING ? RECRUIT_BANNER_ACTIVE : RECRUIT_BANNER;
-  const { buttonName } = BannerInfo;
-  const buttonParams = IS_RECRUITING
-    ? { width: 168 }
-    : { disabled: true, width: 190 };
 
   const handleEnter = () => setIsHover(!isHover);
 
@@ -37,31 +24,10 @@ function IntroSection(): ReactElement {
       onMouseLeave={handleEnter}
       onMouseMove={handleMove}
     >
-      <Dimension />
       <MainBanner>
-        <Spline scene="https://prod.spline.design/oefJFTsP9MuFSYvY/scene.splinecode" />
+        <VideoPlayer src="/assets/video/index.mp4" />
       </MainBanner>
-      <ContentWrapper>
-        <TitleContainer>
-          <span className="main-text">
-            Together We Gather,
-            <br />
-            Together We Grow
-          </span>
-        </TitleContainer>
-
-        <AnimatedButton
-          height={65}
-          fontColor="white"
-          buttonColor="orange_400"
-          className="recruitButton"
-          buttonText={buttonName}
-          onClick={() => {
-            router.push(Path.Recruit);
-          }}
-          {...buttonParams}
-        />
-      </ContentWrapper>
+      <FloatingArrow />
     </IntroSectionContainer>
   );
 }
@@ -96,19 +62,40 @@ const IntroSectionContainer = styled.div`
   }
 `;
 
-const Dimension = styled.span`
+const ArrowDownConatiner = styled.div`
+  position: fixed;
+  bottom: 70px;
+  left: 0px;
+  transform: translateX(calc(50vw - 50%));
+
+  svg {
+    width: 64px;
+    height: 64px;
+    transform: translateY(-30px);
+  }
+
+  ${media.mobile} {
+    & > svg {
+      width: 48px;
+      height: 48px;
+      transform: translateY(-36px);
+    }
+  }
+`;
+
+const MainBanner = styled.div`
   position: absolute;
   width: 100%;
   height: 100%;
-  opacity: 0.5;
-  z-index: 2;
   background-color: ${({ theme }) => theme.palette.black};
 `;
 
-const MainBanner = styled.div`
+const Dimension = styled.span`
   position: absolute;
   width: 100%;
   height: 100%;
+  opacity: 0.5;
+  z-index: 2;
   background-color: ${({ theme }) => theme.palette.black};
 `;
 

components/recruit/Enquiry/index.tsx

@@ -82,6 +82,10 @@ const EnquiryContent = styled.div`
       display: block;
     }
   }
+  .ps {
+    font-size: 14px;
+    font-weight: 200;
+  }
 `;
 
 const ButtonLinked = styled.a``;

components/recruit/RecruitField/RecruitDeveloper.tsx

@@ -5,7 +5,12 @@ import media from 'styles/media';
 import getDeveloperFieldExplain from 'utils/getDeveloperFieldExplain';
 import RecruitFieldExplain from './RecruitFieldExplain';
 
-export type DeveloperFieldName = 'iOS' | 'Android' | 'Front-End' | 'Back-End';
+export type DeveloperFieldName =
+  | 'iOS'
+  | 'Android'
+  | 'Front-End'
+  | 'Back-End'
+  | 'Cross-Flatform';
 
 function RecruitDeveloper(): ReactElement {
   const [developField, setDevelopField] = useState<DeveloperFieldName>(

components/recruit/RecruitField/RecruitFieldExplain.tsx

@@ -71,7 +71,7 @@ function RecruitFieldExplain({
         rel="noreferrer"
       >
         <ApplyButton
-          width={185}
+          width={220}
           height={65}
           fontColor="white"
           buttonColor="grey_850"

components/recruit/RecruitField/index.tsx

@@ -14,7 +14,8 @@ export type FieldNameTypes =
   | 'iOS'
   | 'Android'
   | 'Front-End'
-  | 'Back-End';
+  | 'Back-End'
+  | 'Cross-Flatform';
 
 function RecruitField(): ReactElement {
   const [field, setField] = useState<FieldNameTypes>(RECRUIT_FIELD_NAMES[0]);

constants/yapp.ts

@@ -1,6 +1,6 @@
 const Yapp = {
   YAPP_NAME: 'YAPP',
-  YAPP_GENERATION: 22, // 기수
+  YAPP_GENERATION: 23, // 기수
   YAPP_OFFICIAL_EMAIL: '[email protected]',
   YAPP_OFFICIAL_KAKAO: '@YAPP',
   YAPP_OFFICIAL_FACEBOOK: '@YAPP',
@@ -11,12 +11,14 @@ const Yapp = {
   YAPP_GITHUB: 'https://github.com/YAPP-Github',
   YAPP_RECRUIT: 'https://linktr.ee/yappian',
   YAPP_RECRUIT_PROJECT_MANAGER:
-    'https://yapp22nd.career.greetinghr.com/o/72724',
-  YAPP_RECRUIT_DESIGNER: 'https://yapp22nd.career.greetinghr.com/o/72722',
-  YAPP_RECRUIT_IOS: 'https://yapp22nd.career.greetinghr.com/o/72723',
-  YAPP_RECRUIT_ANDROID: 'https://yapp22nd.career.greetinghr.com/o/72725',
-  YAPP_RECRUIT_FRONT_END: 'https://yapp22nd.career.greetinghr.com/o/72726',
-  YAPP_RECRUIT_BACK_END: 'https://yapp22nd.career.greetinghr.com/o/72727',
+    'https://yapp.ninehire.site/job_posting/r1tK8QQZ',
+  YAPP_RECRUIT_DESIGNER: 'https://yapp.ninehire.site/job_posting/3psY4QwR',
+  YAPP_RECRUIT_IOS: 'https://yapp.ninehire.site/job_posting/NJNKVkbK',
+  YAPP_RECRUIT_ANDROID: ' https://yapp.ninehire.site/job_posting/uJuqIHKb',
+  YAPP_RECRUIT_FRONT_END: 'https://yapp.ninehire.site/job_posting/mc1CRqVS',
+  YAPP_RECRUIT_BACK_END: 'https://yapp.ninehire.site/job_posting/cWPQAIHH',
+  YAPP_RECRUIT_CROSS_PLATFORM:
+    'https://yapp.ninehire.site/job_posting/pmo9YJQ1',
 } as const;
 
 export default Yapp;

database/metaData.ts

@@ -10,7 +10,7 @@ const metaData = {
     'YAPP, yapp, 동아리, 연합 동아리, IT 동아리, 개발 동아리, 대학교 동아리, 대학생 연합 동아리, 대외활동, 외부활동, 사이드 프로젝트, 개발, 개발자, 프론트엔드, 백엔드, 디자이너, PM',
   type: 'website',
   siteUrl: 'https://yapp.co.kr',
-  image: '/assets/images/og.png',
+  image: '/assets/images/og_23th.png',
   locale: 'ko_KR',
   analytics: {
     google: 'G-MPQ55K4DB3',