diff --git a/components/common/AnimatedButton/index.tsx b/components/common/AnimatedButton/index.tsx index 3f53b1e..550dda3 100644 --- a/components/common/AnimatedButton/index.tsx +++ b/components/common/AnimatedButton/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled, { css } from 'styled-components'; import media from 'styles/media'; import { slideIn, slideOut } from 'styles/utils-styles'; @@ -24,7 +23,7 @@ function AnimatedButton({ }: AnimatedButtonProps) { return ( - - + */} {buttonText} {buttonText} diff --git a/components/common/BubbleMenu/index.tsx b/components/common/BubbleMenu/index.tsx index 846d532..f12e2e7 100644 --- a/components/common/BubbleMenu/index.tsx +++ b/components/common/BubbleMenu/index.tsx @@ -1,8 +1,8 @@ +import { FieldNameTypes } from 'components/recruit/RecruitField'; import type { Dispatch, ReactElement, SetStateAction } from 'react'; import styled, { css } from 'styled-components'; -import { FieldNameTypes } from 'components/recruit/RecruitField'; -import { ProjectField } from 'types/project'; import { PaletteKeyTypes } from 'styles/theme'; +import { ProjectField } from 'types/project'; interface IButtonMenuStyle { backgroundColor?: PaletteKeyTypes; diff --git a/components/home/AnimatedTextSection/index.tsx b/components/home/AnimatedTextSection/index.tsx index 84e42d8..d1832b9 100644 --- a/components/home/AnimatedTextSection/index.tsx +++ b/components/home/AnimatedTextSection/index.tsx @@ -1,17 +1,17 @@ -import { useEffect, useRef } from 'react'; -import type { ReactElement } from 'react'; -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 { SectionTemplate } from 'components/home'; +import Path from 'constants/path'; import { IS_RECRUITING, RECRUIT_BANNER, RECRUIT_BANNER_ACTIVE, } from 'database/recruit'; +import lottie from 'lottie-web'; import { useRouter } from 'next/router'; -import Path from 'constants/path'; +import type { ReactElement } from 'react'; +import { useEffect, useRef } from 'react'; +import styled from 'styled-components'; +import media from 'styles/media'; function AnimatedTextSection(): ReactElement { const animatedTextRef = useRef(null); @@ -37,7 +37,6 @@ function AnimatedTextSection(): ReactElement {
{ + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + return ( + <> +
+ + + +
+ + +

YAPP 24TH RECRUITING

+

+ 세상을 바꿀 +
+ 24기 야뿌를 찾습니다 +

+ + + + + + // + // + //

YAPP 24TH RECRUITING

+ //

+ // 세상을 바꿀 + //
+ // 24기 야뿌를 찾습니다 + //

+ // + + // + // banner-cards + // + + // + // banner-mask + // + // + ); +}; + +export default Banner24th; + +const Banner24thTextContentBox = styled.div` + position: absolute; + top: 14%; + left: 50%; + z-index: 20; + flex: 1; + display: flex; + height: fit-content; + flex-direction: column; + justify-content: center; + align-items: center; + white-space: nowrap; + gap: 2rem; + + transition: transform 2s ease, opacity 2s ease; + transform: translate3d(-50%, -2rem, 0); + opacity: 0; + + &.appear { + transform: translate3d(-50%, 0, 0); + opacity: 1; + } + + & > h2 { + padding: 1rem 2.6rem; + margin: 0; + border: 1px solid rgba(255, 155, 83, 0.77); + border-radius: 10rem; + background-color: transparent; + font-size: 3.2rem; + font-weight: 500; + line-height: 115%; + letter-spacing: -0.032rem; + color: ${({ theme }) => theme.palette.orange_450}; + } + + & > h3 { + margin: 0; + text-align: center; + font-size: 6.4rem; + font-weight: 700; + line-height: 125%; + letter-spacing: -0.07rem; + color: ${({ theme }) => theme.palette.white}; + } + + ${media.custom(720)} { + gap: 1.6rem; + + & > h2 { + font-size: 2.4rem; + letter-spacing: -0.014rem; + } + + & > h3 { + font-size: 4.8rem; + letter-spacing: -0.032rem; + } + } + + ${media.custom(430)} { + top: 15%; + gap: 1rem; + + & > h2 { + font-size: 1.4rem; + letter-spacing: -0.014rem; + } + + & > h3 { + font-size: 2.8rem; + letter-spacing: -0.032rem; + } + } +`; + +const Banner24thBackgroundInner = styled.div` + width: 100%; + height: 100%; + margin: 0 auto; + + background-image: url('/assets/images/24th/banner-pc.webp'); + background-repeat: no-repeat; + background-position: center center; + background-size: 100% 100%; + + ${media.mobile} { + background-image: url('/assets/images/24th/banner-tablet.webp'); + } + + ${media.small} { + background-image: url('/assets/images/24th/banner-mobile.webp'); + } +`; + +// const Banner24thContainer = styled.div` +// position: absolute; +// display: flex; +// flex-direction: column; +// align-items: center; +// width: 100%; +// height: 100%; +// background-color: ${({ theme }) => theme.palette.black}; +// `; + +// const Banner24thTextContentBox = styled.div` +// z-index: 20; +// flex: 1; +// display: flex; +// height: fit-content; +// flex-direction: column; +// justify-content: center; +// align-items: center; +// transform: translate3d(0, -25%, 0); +// gap: 2rem; + +// & > h2 { +// padding: 1rem 2.6rem; +// margin: 0; +// width: fit-content; +// border: 1px solid rgba(255, 155, 83, 0.77); +// border-radius: 10rem; +// background-color: transparent; +// font-size: 3.2rem; +// font-weight: 500; +// line-height: 115%; +// letter-spacing: -0.032rem; +// color: ${({ theme }) => theme.palette.orange_450}; +// } + +// & > h3 { +// margin: 0; +// text-align: center; +// font-size: 6.4rem; +// font-weight: 700; +// line-height: 125%; +// letter-spacing: -0.07rem; +// color: ${({ theme }) => theme.palette.white}; +// } + +// ${media.custom(720)} { +// gap: 1.6rem; + +// & > h2 { +// font-size: 2.4rem; +// letter-spacing: -0.014rem; +// } + +// & > h3 { +// font-size: 4.8rem; +// letter-spacing: -0.032rem; +// } +// } + +// ${media.xSmall} { +// gap: 1rem; + +// & > h2 { +// font-size: 1.4rem; +// letter-spacing: -0.014rem; +// } + +// & > h3 { +// font-size: 2.8rem; +// letter-spacing: -0.032rem; +// } +// } +// `; + +// const Banner24thMaskBox = styled.div` +// z-index: 10; +// position: absolute; +// top: 50%; +// left: 50%; + +// max-width: 156rem; +// width: 80%; +// height: auto; + +// transition: transform 2s ease; +// transform: translate3d(-50%, -50%, 0) scale(0.8); +// ${media.tablet} { +// width: 100%; +// } + +// ${media.mobile} { +// width: 120%; +// } + +// ${media.small} { +// width: 120%; +// } + +// &.appear { +// transform: translate3d(-50%, -50%, 0) scale(1); +// } +// `; + +// const Banner24thCardsBox = styled.div` +// flex: 1; +// z-index: 10; +// position: absolute; +// bottom: 50%; +// left: 50%; + +// width: 60%; +// height: auto; + +// transition: transform 2s ease, opacity 0.5s ease; +// transform: translate3d(-50%, calc(52% + 2rem), 0); +// opacity: 0; + +// ${media.tablet} { +// width: 55%; +// } + +// ${media.mobile} { +// width: 80%; +// } + +// ${media.small} { +// width: 100%; +// } + +// &.appear { +// transform: translate3d(-50%, 52%, 0); +// opacity: 1; +// } +// `; diff --git a/components/home/IntroSection/index.tsx b/components/home/IntroSection/index.tsx index d40edc6..a980db0 100644 --- a/components/home/IntroSection/index.tsx +++ b/components/home/IntroSection/index.tsx @@ -1,9 +1,9 @@ -import { useEffect, useRef, useState } from 'react'; -import type { ReactElement, MouseEvent } from 'react'; +import { FloatingArrow } from 'components/common'; +import type { MouseEvent, ReactElement } from 'react'; +import { useState } from 'react'; import styled from 'styled-components'; import media from 'styles/media'; -import VideoPlayer from 'components/common/videoPlayer'; -import { FloatingArrow } from 'components/common'; +import Banner24th from './Banner24th'; function IntroSection(): ReactElement { const [isHover, setIsHover] = useState(false); @@ -24,9 +24,7 @@ function IntroSection(): ReactElement { onMouseLeave={handleEnter} onMouseMove={handleMove} > - - - + ); diff --git a/components/home/NewsSection/index.tsx b/components/home/NewsSection/index.tsx index 7d86072..d26f369 100644 --- a/components/home/NewsSection/index.tsx +++ b/components/home/NewsSection/index.tsx @@ -1,10 +1,10 @@ -import type { ReactElement } from 'react'; -import styled from 'styled-components'; -import { SectionTitle, SectionTemplate } from 'components/home'; import { Button, NewsCard } from 'components/common'; +import { SectionTemplate, SectionTitle } from 'components/home'; +import Yapp from 'constants/yapp'; import { NEWS_DATA } from 'database/home'; +import type { ReactElement } from 'react'; +import styled from 'styled-components'; import media from 'styles/media'; -import Yapp from 'constants/yapp'; function MainContainer(): ReactElement { return ( diff --git a/components/recruit/RecruitBanner/index.tsx b/components/recruit/RecruitBanner/index.tsx index 0c2bfad..53eabf3 100644 --- a/components/recruit/RecruitBanner/index.tsx +++ b/components/recruit/RecruitBanner/index.tsx @@ -1,12 +1,12 @@ -import { AnimatedButton } from 'components/common'; -import DOMPurify from 'isomorphic-dompurify'; +import { AnimatedButton, Button } from 'components/common'; import Breakpoints from 'constants/breakpoints'; +import Yapp from 'constants/yapp'; import { IS_RECRUITING, RECRUIT_BANNER, RECRUIT_BANNER_ACTIVE, } from 'database/recruit'; -import React from 'react'; +import DOMPurify from 'isomorphic-dompurify'; import styled from 'styled-components'; import media from 'styles/media'; @@ -23,11 +23,49 @@ function RecruitBanner() { + + + {IS_RECRUITING ? '모든 공고 보기' : '지원마감'} + + ); } +const ButtonBlock = styled.a` + width: fit-content; + height: fit-content; + display: block; + + ${media.xSmall} { + margin: 0 auto; + } +`; + +const ApplyButton = styled(Button)` + transition: all 0.5s; + + &:hover { + background-color: ${({ theme }) => theme.palette.grey_700}; + } + ${media.mobile} { + width: 162px; + height: 56px; + } +`; + const RecruitBannerContainer = styled.div` width: 100%; background-color: ${({ theme }) => theme.palette.yellow_400}; diff --git a/components/recruit/RecruitField/RecruitDeveloper.tsx b/components/recruit/RecruitField/RecruitDeveloper.tsx index 72f6231..a9bc85b 100644 --- a/components/recruit/RecruitField/RecruitDeveloper.tsx +++ b/components/recruit/RecruitField/RecruitDeveloper.tsx @@ -8,9 +8,9 @@ import RecruitFieldExplain from './RecruitFieldExplain'; export type DeveloperFieldName = | 'iOS' | 'Android' - | 'Front-End' - | 'Back-End' - | 'Cross-Flatform'; + | 'Web' + | 'Server' + | 'Flutter'; function RecruitDeveloper(): ReactElement { const [developField, setDevelopField] = useState( diff --git a/components/recruit/RecruitField/RecruitFieldExplain.tsx b/components/recruit/RecruitField/RecruitFieldExplain.tsx index 8ae0d0c..d6902eb 100644 --- a/components/recruit/RecruitField/RecruitFieldExplain.tsx +++ b/components/recruit/RecruitField/RecruitFieldExplain.tsx @@ -1,13 +1,13 @@ import { Box, Button } from 'components/common'; -import React, { ReactElement } from 'react'; +import Breakpoints from 'constants/breakpoints'; +import { IS_RECRUITING } from 'database/recruit'; import DOMPurify from 'isomorphic-dompurify'; +import { ReactElement } from 'react'; import styled from 'styled-components'; -import { FieldNameTypes } from '.'; -import Breakpoints from 'constants/breakpoints'; import media from 'styles/media'; import getRecruitLink from 'utils/getRecruitLink'; +import { FieldNameTypes } from '.'; import { DeveloperFieldName } from './RecruitDeveloper'; -import { IS_RECRUITING } from 'database/recruit'; interface RecruitFieldExplainProps { fieldName: FieldNameTypes; diff --git a/components/recruit/RecruitField/RecruitProjectManager.tsx b/components/recruit/RecruitField/RecruitProjectManager.tsx index 144c7d5..f17e721 100644 --- a/components/recruit/RecruitField/RecruitProjectManager.tsx +++ b/components/recruit/RecruitField/RecruitProjectManager.tsx @@ -1,11 +1,11 @@ import { RECRUIT_EXPLAIN_PROJECT_MANAGER } from 'database/recruit'; -import React, { ReactElement } from 'react'; +import { ReactElement } from 'react'; import RecruitFieldExplain from './RecruitFieldExplain'; function RecruitProjectManager(): ReactElement { return ( ); diff --git a/components/recruit/RecruitField/index.tsx b/components/recruit/RecruitField/index.tsx index 3b0dd4d..18ec667 100644 --- a/components/recruit/RecruitField/index.tsx +++ b/components/recruit/RecruitField/index.tsx @@ -1,28 +1,28 @@ -import React, { ReactElement, useState } from 'react'; -import styled from 'styled-components'; -import { SectionTemplate, SectionTitle } from '..'; import { TabMenu } from 'components/common'; import { RECRUIT_FIELD_NAMES } from 'database/recruit'; +import { ReactElement, useState } from 'react'; +import styled from 'styled-components'; +import { SectionTemplate, SectionTitle } from '..'; import RecruitDesigner from './RecruitDesigner'; import RecruitDeveloper from './RecruitDeveloper'; import RecruitProjectManager from './RecruitProjectManager'; export type FieldNameTypes = - | '기획자' + | 'PM' | '디자이너' | '개발자' | 'iOS' | 'Android' - | 'Front-End' - | 'Back-End' - | 'Cross-Flatform'; + | 'Web' + | 'Server' + | 'Flutter'; function RecruitField(): ReactElement { const [field, setField] = useState(RECRUIT_FIELD_NAMES[0]); const printField = () => { switch (field) { - case '기획자': + case 'PM': return ; case '디자이너': return ; diff --git a/components/recruit/ApplyWay/index.tsx b/components/recruit/RecruitOverview/index.tsx similarity index 74% rename from components/recruit/ApplyWay/index.tsx rename to components/recruit/RecruitOverview/index.tsx index b79028a..c550fae 100644 --- a/components/recruit/ApplyWay/index.tsx +++ b/components/recruit/RecruitOverview/index.tsx @@ -1,14 +1,14 @@ import { Box } from 'components/common'; -import { RECRUIT_APPLY_WAY } from 'database/recruit'; +import { RECRUIT_OVERVIEW } from 'database/recruit'; import useDragScroll from 'hooks/useDragScroll'; -import React, { ReactElement } from 'react'; import DOMPurify from 'isomorphic-dompurify'; +import { ReactElement } from 'react'; import styled from 'styled-components'; import media from 'styles/media'; import { SectionTemplate, SectionTitle } from '..'; -function ApplyWay(): ReactElement { - const { title, ways } = RECRUIT_APPLY_WAY; +function RecruitOverview(): ReactElement { + const { title, overviewContents } = RECRUIT_OVERVIEW; const { handleDragEnd, handleDragMove, handleDragStart, scrollRef } = useDragScroll(); @@ -23,22 +23,20 @@ function ApplyWay(): ReactElement { onMouseLeave={handleDragEnd} ref={scrollRef} > - {ways.map(({ subTitle, description }) => ( - ( + - - {subTitle} - + {subTitle} + - - + + ))} @@ -47,12 +45,16 @@ function ApplyWay(): ReactElement { const SectionContent = styled.div` display: flex; + gap: 30px; width: 100%; justify-content: space-between; + ${media.tablet} { + gap: 0px; width: auto; overflow: auto; margin-left: 22px; + &::-webkit-scrollbar { display: none; } @@ -62,6 +64,7 @@ const SectionContent = styled.div` } ${media.mobile} { flex-direction: column; + gap: 16px; margin: 0 22px; .tablet { display: none; @@ -72,16 +75,16 @@ const SectionContent = styled.div` } `; -const WayBox = styled(Box)` +const OverviewContentBox = styled(Box)` + flex: 1; padding: 0px; - white-space: nowrap; + ${media.tablet} { - margin-right: 30px; + margin-left: 30px; min-width: 380px; } ${media.mobile} { margin: 0 auto; - margin-bottom: 16px; min-width: auto; white-space: normal; min-height: 191px; @@ -90,11 +93,11 @@ const WayBox = styled(Box)` } `; -const WayInnerBox = styled.div` +const OverviewContentInnerBox = styled.div` padding: 32px; `; -const WaySubTitle = styled.div` +const OverviewContentSubTitle = styled.div` ${({ theme }) => theme.textStyle.web.Subtitle} color: ${({ theme }) => theme.palette.grey_1000}; margin-bottom: 8px; @@ -103,7 +106,7 @@ const WaySubTitle = styled.div` } `; -const WayContent = styled.div` +const OverviewContentContent = styled.div` ${({ theme }) => theme.textStyle.web.Body_1}; color: ${({ theme }) => theme.palette.grey_850}; .smallBox { @@ -135,4 +138,4 @@ const WayContent = styled.div` } `; -export default ApplyWay; +export default RecruitOverview; diff --git a/components/recruit/RecruitSchedule/index.tsx b/components/recruit/RecruitSchedule/index.tsx index 55a7f97..2c4db3f 100644 --- a/components/recruit/RecruitSchedule/index.tsx +++ b/components/recruit/RecruitSchedule/index.tsx @@ -1,9 +1,9 @@ -import DOMPurify from 'isomorphic-dompurify'; import { Box } from 'components/common'; import Breakpoints from 'constants/breakpoints'; import { RECRUIT_SCHEDULE } from 'database/recruit'; import useDragScroll from 'hooks/useDragScroll'; -import React, { ReactElement } from 'react'; +import DOMPurify from 'isomorphic-dompurify'; +import { ReactElement } from 'react'; import styled from 'styled-components'; import media from 'styles/media'; import { SectionTemplate, SectionTitle } from '..'; @@ -25,12 +25,7 @@ function RecruitSchedule(): ReactElement { ref={scrollRef} > {schedules.map(({ subTitle, description }) => ( - + {subTitle} theme.textStyle.web.Subtitle}; + font-weight: ${({ theme }) => theme.fontWeight.bold}; color: ${({ theme }) => theme.palette.grey_1000}; margin-bottom: 12px; ${media.mobile} { diff --git a/components/recruit/index.ts b/components/recruit/index.ts index 74650e9..93150ff 100644 --- a/components/recruit/index.ts +++ b/components/recruit/index.ts @@ -1,8 +1,8 @@ -export { default as ApplyWay } from './ApplyWay'; export { default as Enquiry } from './Enquiry'; export { default as FrequentlyAskedQuestions } from './FrequentlyAskedQuestions'; export { default as RecruitBanner } from './RecruitBanner'; +export { default as RecruitField } from './RecruitField'; +export { default as RecruitOverview } from './RecruitOverview'; export { default as RecruitSchedule } from './RecruitSchedule'; -export { default as SectionTitle } from './SectionTitle'; export { default as SectionTemplate } from './SectionTemplate'; -export { default as RecruitField } from './RecruitField'; +export { default as SectionTitle } from './SectionTitle'; diff --git a/constants/yapp.ts b/constants/yapp.ts index 934e0c5..59e27a0 100644 --- a/constants/yapp.ts +++ b/constants/yapp.ts @@ -1,6 +1,6 @@ const Yapp = { YAPP_NAME: 'YAPP', - YAPP_GENERATION: 23, // 기수 + YAPP_GENERATION: 24, // 기수 YAPP_OFFICIAL_EMAIL: 'support@yapp.co.kr', YAPP_OFFICIAL_KAKAO: '@YAPP', YAPP_OFFICIAL_FACEBOOK: '@YAPP', @@ -10,15 +10,17 @@ const Yapp = { YAPP_KAKAO: 'http://pf.kakao.com/_aGxofd', YAPP_GITHUB: 'https://github.com/YAPP-Github', YAPP_RECRUIT: 'https://linktr.ee/yappian', + YAPP_RECRUIT_ALL: + 'https://yapp-recruit.career.greetinghr.com/guide#5089e105-e7df-45e0-9802-5509c0db0b0c', YAPP_RECRUIT_PROJECT_MANAGER: - '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', + 'https://yapp-recruit.career.greetinghr.com/o/106734', + YAPP_RECRUIT_DESIGNER: 'https://yapp-recruit.career.greetinghr.com/o/106735', + YAPP_RECRUIT_IOS: 'https://yapp-recruit.career.greetinghr.com/o/106736', + YAPP_RECRUIT_ANDROID: 'https://yapp-recruit.career.greetinghr.com/o/106737', + YAPP_RECRUIT_FRONT_END: 'https://yapp-recruit.career.greetinghr.com/o/106738', + YAPP_RECRUIT_BACK_END: 'https://yapp-recruit.career.greetinghr.com/o/106739', YAPP_RECRUIT_CROSS_PLATFORM: - 'https://yapp.ninehire.site/job_posting/pmo9YJQ1', + 'https://yapp-recruit.career.greetinghr.com/o/106740', } as const; export default Yapp; diff --git a/database/home.ts b/database/home.ts index 5d80295..c7b7529 100644 --- a/database/home.ts +++ b/database/home.ts @@ -2,27 +2,27 @@ export const CURRENT_INFO_DATA = [ { title: '운영 기간 🕙', - content: '13년', + content: '14년', }, { title: '운영 기수 ⛳️', - content: '23기', + content: '24기', }, { title: '현재 활동 회원 🏃🏻‍♀️', - content: '72명', + content: '65명', }, { title: '누적 활동 인원 👩🏻', - content: '400+명', + content: '450+명', }, { title: '런칭 서비스 📱', - content: '50+개', + content: '55+개', }, { title: '누적 앱 다운로드 ⬇️', - content: '377,658', + content: '378,658', }, ]; @@ -63,9 +63,17 @@ export const CAROUSEL_DATA = [ /** Social News Card */ // 태그 형식 가능합니다. export const NEWS_DATA = [ + { + image: '/assets/images/24th/social.webp', + link: 'https://www.instagram.com/about.yapp/', + content: `🧡YAPP 24기 신규 회원 모집 OPEN🧡
+ 4월 5일(금) ~ 4월 13일(토) 23시 59분까지 YAPP 24기 신규 회원을 모집해요! + 나만의 아이디어로 세상을 바꾸고 싶은 예비 야뿌들의 많은 지원 부탁드립니다! + `, + }, { image: '/assets/images/social_recruit_23.jpeg', - link: 'https://ko-kr.facebook.com/yapp.co.kr/', + link: 'https://www.instagram.com/about.yapp/', content: `📢 주목! YAPP 23기 신규 회원 모집을 시작합니다! 🌱 Gather, Together! 🌱 9월 25일(월)부터 10월 1일(일) 23시 59분 까지 @@ -74,7 +82,7 @@ export const NEWS_DATA = [ }, { image: '/assets/images/social1.png', - link: 'https://ko-kr.facebook.com/yapp.co.kr/', + link: 'https://www.instagram.com/about.yapp/', content: `🧡 IT연합동아리 YAPP 22기 신규 회원 모집 시작(~4/9) 🧡 👨‍👩‍👧‍👦 Gather, Together! 3월 31일(금)부터 4월 9일(일) 밤 11시 00분까지 @@ -82,7 +90,7 @@ export const NEWS_DATA = [ }, { image: '/assets/images/social2.png', - link: 'https://ko-kr.facebook.com/yapp.co.kr/', + link: 'https://www.instagram.com/about.yapp/', content: `🧡 IT연합동아리 YAPP 21기 신규 회원 모집 시작(~9/29) 🧡 🏃‍♂️ Sprint Time, Open to Anyone! 9월 18일(일)부터 9월 29일(목) 밤 11시 59분까지 @@ -93,7 +101,7 @@ export const NEWS_DATA = [ }, { image: '/assets/images/social3.png', - link: 'https://ko-kr.facebook.com/yapp.co.kr/', + link: 'https://www.instagram.com/about.yapp/', content: `안녕하세요! YAPP 20기 운영진입니다 🤗 드디어 3월 6일 오늘부터, 3월 17일(목) 오후 11시 59분까지 YAPP의 20기로 함께할 신규 회원을 모집합니다! @@ -109,4 +117,7 @@ export const SPONSOR_DATA = [ { image: '/assets/sponsors/sponsor_catch.png', }, + { + image: '/assets/sponsors/sponsor_greeting.png', + }, ]; diff --git a/database/metaData.ts b/database/metaData.ts index e102551..146c13d 100644 --- a/database/metaData.ts +++ b/database/metaData.ts @@ -10,7 +10,7 @@ const metaData = { 'YAPP, yapp, 동아리, 연합 동아리, IT 동아리, 개발 동아리, 대학교 동아리, 대학생 연합 동아리, 대외활동, 외부활동, 사이드 프로젝트, 개발, 개발자, 프론트엔드, 백엔드, 디자이너, PM', type: 'website', siteUrl: 'https://yapp.co.kr', - image: '/assets/images/og_23th.png', + image: '/assets/images/og_24th.png', locale: 'ko_KR', analytics: { google: 'G-MPQ55K4DB3', diff --git a/database/recruit.ts b/database/recruit.ts index 3d2d2ff..1b31cad 100644 --- a/database/recruit.ts +++ b/database/recruit.ts @@ -1,6 +1,6 @@ -import Yapp from 'constants/yapp'; import { FieldNameTypes } from 'components/recruit/RecruitField'; import { DeveloperFieldName } from 'components/recruit/RecruitField/RecruitDeveloper'; +import Yapp from 'constants/yapp'; /** * 작성 Tip @@ -9,7 +9,7 @@ import { DeveloperFieldName } from 'components/recruit/RecruitField/RecruitDevel */ /* 현재 모집중이면 true 아니면 false */ -export const IS_RECRUITING = false; +export const IS_RECRUITING = true; /** Banner */ export const RECRUIT_BANNER = { @@ -20,35 +20,33 @@ export const RECRUIT_BANNER = { export const RECRUIT_BANNER_ACTIVE = { title: `YAPP
${Yapp.YAPP_GENERATION}기 모집`, - description: `YAPP ${Yapp.YAPP_GENERATION}기에서 4개월간 활동할
기획자(PM)/디자이너/개발자 신입 회원을
모집합니다.
+ description: `YAPP ${Yapp.YAPP_GENERATION}기에서 4개월간 활동할
PM(기획자)/디자이너/개발자 신입 회원을
모집합니다.
IT 분야에 대한 열정과 의지가
넘치고, 동아리에서 다양한 사람들과 즐겁게
활동하고 싶은 분들의 많은 지원 바랍니다!`, buttonName: `${Yapp.YAPP_GENERATION}기 지원하기`, }; -/**지원 방법 */ -export const RECRUIT_APPLY_WAY = { - title: '지원 방법', - ways: [ +/** 모집 개요 */ +export const RECRUIT_OVERVIEW = { + title: '모집 개요', + overviewContents: [ { - subTitle: '모집기간', - description: `YAPP에서는 1년에 두번
- 열정을 가지고 활동에 함께할
- YAPPian을 모집합니다`, + subTitle: '인재상', + description: `프로덕트 오너십을 가지고 능동적으로 + 문제를 해결하는 열정적인 누구나`, }, { subTitle: '지원자격', - description: `4개월 동안 활동하는데
- 문제가 없고,
- 실력을 키우기 위해 배우려는
- 의지가 있는 누구나 - 대학생이 아닌 졸업생, 직장인도 가능합니다.`, + description: `
  • 매주 토요일에 진행되는 정규세션에 참여할 수 있는 분
    • +
  • PM, 디자이너, 개발와 1회 이상 협업 경험이 있는 분
    • + 대학생, 졸업생, 직장인 소속에 제한 없음 + `, }, { subTitle: '지원방법', - description: `1차 서류
    -
    지원서 작성 및 포트폴리오 제출
    - 2차 면접
    -
    온라인 인터뷰 이후 최종합격
    `, + description: `1차 서류 +
    지원서 작성 및 포트폴리오 제출
    + 2차 인터뷰 +
    온라인 인터뷰 이후 최종합격
    `, }, ], }; @@ -59,21 +57,23 @@ export const RECRUIT_SCHEDULE = { schedules: [ { subTitle: '서류 접수', - description: `2023. 09. 25 (월)
    - ~ 10. 01. (일) 23:59`, + description: `2024. 04. 05. (금) + ~ 04. 13. (토) 23:59 + ※ PM : 04. 16 (화) 23:59`, }, { subTitle: '서류 결과 발표', - description: `2023. 10. 05. (목)`, + description: `2024. 04. 17. (수) + ※ PM : 04. 21 (일) 발표 예정`, }, { subTitle: '온라인 인터뷰', - description: `2023. 10. 07. (토)
    - ~ 10. 09. (월)`, + description: `2024. 04. 26. (금) + ~ 04. 30. (화)`, }, { subTitle: '최종 발표', - description: `2023. 10. 14. (토)`, + description: `2024. 05. 03. (금)`, }, ], }; @@ -84,7 +84,7 @@ export const RECRUIT_FAQ = { faqs: [ { subTitle: 'YAPP은 어떤 동아리인가요?', - description: `YAPP은 기획자, 디자이너, 개발자로 팀을 구성하여 4개월간 하나의 IT 서비스(웹,앱,etc.)를 제작하는 기업형 IT연합 커뮤니티입니다.
    + description: `YAPP은 PM(기획자), 디자이너, 개발자로 팀을 구성하여 4개월간 하나의 IT 서비스(웹,앱,etc.)를 제작하는 기업형 IT연합 커뮤니티입니다.
    서비스 문제 정의, 출시, 제작, 운영까지 팀원들의 아이디어를 실제 IT 서비스로 구체화하며 성장할 수 있습니다.`, isOpen: false, }, @@ -126,7 +126,7 @@ export const RECRUIT_FAQ = { /* 모집 분야 */ export const RECRUIT_FIELD_NAMES: FieldNameTypes[] = [ - '기획자', + 'PM', '디자이너', '개발자', ]; @@ -134,12 +134,12 @@ export const RECRUIT_FIELD_NAMES: FieldNameTypes[] = [ export const RECRUIT_DEVELOPER_FIELD_NAMES: DeveloperFieldName[] = [ 'iOS', 'Android', - 'Front-End', - 'Back-End', - 'Cross-Flatform', + 'Web', + 'Server', + 'Flutter', ]; -/* 기획자 */ +/* PM */ export const RECRUIT_EXPLAIN_PROJECT_MANAGER = { content1: `디자이너, 개발자와 함께 4개월 간 프로젝트를 수행합니다.
    서비스의 기획에 대한 아이디어를 수집, 제시하며
    @@ -157,21 +157,21 @@ export const RECRUIT_EXPLAIN_PROJECT_MANAGER = { /* 디자이너 */ export const RECRUIT_EXPLAIN_DESIGNER = { - content1: `기획자, 개발자와 함께 4개월 간 프로젝트를 수행합니다.
    + content1: `PM, 개발자와 함께 4개월 간 프로젝트를 수행합니다.
    기획을 바탕으로 개별 팀의 아이디어에 따라
    UX/UI/GUI 디자인을 담당합니다.`, content2: `1. UX/UI 디자인에 관심이 있고, UX/UI 디자인을 경험해보신 분
    2. 서비스 아이디어를 시각적으로 표현하실 수 있는 분
    3. 열린 자세로 다른 직군과 소통하실 수 있는 분
    4. 나만의 서비스를 만들어서 운영까지 진행해 보고 싶으신 분`, - content3: `1. 기획자, 개발 직군과의 프로젝트 경험
    + content3: `1. PM, 개발 직군과의 프로젝트 경험
    2. 프리젠테이션 발표 경험
    `, }; /* iOS */ export const RECRUIT_EXPLAIN_IOS_DEVELOPER = { content1: `팀 내에서 iOS 클라이언트 개발을 담당합니다.
    -Back-End, 기획, 디자인분들과 함께 프로젝트를 진행하며,
    +Server, PM, 디자인분들과 함께 프로젝트를 진행하며,
    원할 경우 팀 내에서 세미나를 열 수도 있으며 스터디를 진행할 수도 있습니다.`, content2: `1. Swift, UIKit, SwiftUI와 아이폰 앱 개발에 대한 기본적 이해를 가지신 분
    2. 프로젝트를 완성시키고자 하는 의지와 열정을 가지신 분
    @@ -186,7 +186,7 @@ Back-End, 기획, 디자인분들과 함께 프로젝트를 진행하며,
    /* Android */ export const RECRUIT_EXPLAIN_ANDROID_DEVELOPER = { content1: `팀 내에서 Android 클라이언트 개발을 담당합니다.
    - Back-End, 기획, 디자인분들과 함께 프로젝트를 진행하며,
    + Server, PM, 디자인분들과 함께 프로젝트를 진행하며,
    원할 경우 팀 내에서 세미나를 열 수도 있으며 스터디를 진행할 수도 있습니다.`, content2: `1. java, kotlin 등 안드로이드 개발 언어를 사용하신 분
    2. 모르는 부분이 생기면 주저않고 질문이 가능하신 분
    @@ -196,10 +196,10 @@ export const RECRUIT_EXPLAIN_ANDROID_DEVELOPER = { 2. GitHub를 사용한 협업 프로젝트 경험`, }; -/* Front_End */ -export const RECRUIT_EXPLAIN_FRONTEND_DEVELOPER = { +/* Web */ +export const RECRUIT_EXPLAIN_WEB_DEVELOPER = { content1: `팀 내에서 웹 프론트엔드 개발을 담당합니다.
    - Back-End, 기획, 디자인분들과 함께 프로젝트를 진행하며,
    + Server, PM, 디자인분들과 함께 프로젝트를 진행하며,
    원할 경우 팀 내에서 세미나를 열 수도 있으며 스터디를 진행할 수도 있습니다.`, content2: `1. HTML과 CSS 기본을 이해하고 계신 분
    2. 자바스크립트로 프로젝트를 해보고 싶은 분
    @@ -207,33 +207,33 @@ export const RECRUIT_EXPLAIN_FRONTEND_DEVELOPER = { 4. 나만의 서비스를 만들어서 운영까지 진행해 보고 싶으신 분`, content3: `1. react vue angular중 하나 이상 다뤄 본 경험
    2. Git을 이용한 프로젝트 관리 경험
    - 3. 디자이너, 백엔드 개발자, 기획자와 소통 경험`, + 3. 디자이너, 백엔드 개발자, PM과 소통 경험`, }; -/* Back_End */ -export const RECRUIT_EXPLAIN_BACKEND_DEVELOPER = { - content1: `팀 내에서 Back-End 개발을 담당합니다.
    -클라이언트 개발자, 기획, 디자인분들과 함께 프로젝트를 진행하며,
    +/* Server */ +export const RECRUIT_EXPLAIN_SERVER_DEVELOPER = { + content1: `팀 내에서 Server 개발을 담당합니다.
    +클라이언트 개발자, PM, 디자인분들과 함께 프로젝트를 진행하며,
    원할 경우 팀 내에서 세미나를 열 수도 있으며 스터디를 진행할 수도 있습니다.`, content2: `1. 데이터베이스의 기초가 있으신 분
    2. 일반적으로 사용하는 RESTful에 대한 이해가 있으신 분
    3. 마지막까지 프로젝트를 완수하실분
    4. 나만의 서비스를 만들어서 운영까지 진행해 보고 싶으신 분`, content3: `1. 언어 상관 없이 RESTful API를 만들어 본 경험
    -2. 기획자와의 소통 경험
    +2. PM와의 소통 경험
    3. Git을 이용한 프로젝트 관리 경험`, }; -/*Cross Flatform */ -export const RECRUIT_EXPLAIN_CROSSFLATFORM_DEVELOPER = { - content1: `팀 내에서 Cross-Platform(React-Native, Flutter) 클라이언트 개발을 담당합니다.
    - Back-End, 기획, 디자인분들과 함께 프로젝트를 진행하며,
    +/* Flutter (24기 기준 Cross-Flatform flutter 팀만 모집 <= 최종적으로 모집 안하면 닫기) */ +export const RECRUIT_EXPLAIN_FLUTTER_DEVELOPER = { + content1: `팀 내에서 Flutter 개발을 담당합니다.
    + Server, PM, 디자인분들과 함께 프로젝트를 진행하며,
    원할 경우 팀 내에서 세미나를 열 수도 있으며 스터디를 진행할 수도 있습니다.

    해당 직군은 YAPP 내에서 프로젝트성으로 진행하는 직군으로
    지원 인원에 따라 직군 모집이 취소될 수 있습니다.    `, - content2: `1. React-Native나 Flutter를 이용한 개발 경력이 있으신 분
    - 2. React-Native나 Flutter로 하나의 서비스를 완성해본 경험이 있으신 분
    + content2: `1. Flutter 를 이용한 개발 경력이 있으신 분
    + 2. Flutter 로 하나의 서비스를 완성해본 경험이 있으신 분
    3. 나만의 서비스를 만들어서 운영까지 진행해 보고 싶으신 분
    `, content3: `1. 디자이너와의 프로젝트 경험
    2. iOS 또는 Android 앱 개발 및 운영 경험
    @@ -244,6 +244,7 @@ export const RECRUIT_EXPLAIN_CROSSFLATFORM_DEVELOPER = { export const RECRUIT_ENQUIRY = { title: '더 궁금하신 내용이 있거나
    문의 사항이 있으신가요?', description: `동아리 관련, 프로젝트, 후원 등
    언제든지 문의해 주세요.
    - 문의는 메일 혹은 카카오톡 채널로 남겨주세요. (페이스북 메시지, 인스타그램 DM은 받지 않습니다)`, + 문의는 메일 혹은 카카오톡 채널로 남겨주세요.
    + (페이스북 메시지, 인스타그램 DM은 받지 않습니다)`, buttonName: '문의 하기', }; diff --git a/next.config.js b/next.config.js index 94132d6..f108bb8 100644 --- a/next.config.js +++ b/next.config.js @@ -9,6 +9,9 @@ const nextConfig = { return config; }, + images: { + formats: ['image/webp'], + }, }; module.exports = nextConfig; diff --git a/pages/project/index.tsx b/pages/project/index.tsx index eb38b25..003e7e2 100644 --- a/pages/project/index.tsx +++ b/pages/project/index.tsx @@ -1,13 +1,13 @@ -import { useEffect, useState } from 'react'; -import { GetStaticProps } from 'next'; -import styled from 'styled-components'; -import { TabMenu, ProjectCard, Button, BubbleMenu } from 'components/common'; -import { getAllProjects } from 'utils/getAllProjects'; -import { ProjectCardType, ProjectField } from 'types/project'; +import { BubbleMenu, Button, ProjectCard, TabMenu } from 'components/common'; +import Breakpoints from 'constants/breakpoints'; import useSmoothScroll from 'hooks/useSmoothScroll'; import useWindowDimensions from 'hooks/useWindowDimensions'; +import { GetStaticProps } from 'next'; +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; import media from 'styles/media'; -import Breakpoints from 'constants/breakpoints'; +import { ProjectCardType, ProjectField } from 'types/project'; +import { getAllProjects } from 'utils/getAllProjects'; export const getStaticProps: GetStaticProps = async () => { const projects = await getAllProjects(); @@ -98,6 +98,7 @@ function Project({ projects }: ProjectProps) { /> ) : ( - + diff --git a/public/assets/images/24th/banner-bg-cards.webp b/public/assets/images/24th/banner-bg-cards.webp new file mode 100644 index 0000000..7aa4a0a Binary files /dev/null and b/public/assets/images/24th/banner-bg-cards.webp differ diff --git a/public/assets/images/24th/banner-bg-mask.webp b/public/assets/images/24th/banner-bg-mask.webp new file mode 100644 index 0000000..3f021dd Binary files /dev/null and b/public/assets/images/24th/banner-bg-mask.webp differ diff --git a/public/assets/images/24th/banner-mobile.webp b/public/assets/images/24th/banner-mobile.webp new file mode 100644 index 0000000..66e5ceb Binary files /dev/null and b/public/assets/images/24th/banner-mobile.webp differ diff --git a/public/assets/images/24th/banner-pc.webp b/public/assets/images/24th/banner-pc.webp new file mode 100644 index 0000000..6d736c4 Binary files /dev/null and b/public/assets/images/24th/banner-pc.webp differ diff --git a/public/assets/images/24th/banner-tablet.webp b/public/assets/images/24th/banner-tablet.webp new file mode 100644 index 0000000..145bbec Binary files /dev/null and b/public/assets/images/24th/banner-tablet.webp differ diff --git a/public/assets/images/24th/social.webp b/public/assets/images/24th/social.webp new file mode 100644 index 0000000..455f3a7 Binary files /dev/null and b/public/assets/images/24th/social.webp differ diff --git a/public/assets/images/og_24th.png b/public/assets/images/og_24th.png new file mode 100644 index 0000000..8949d62 Binary files /dev/null and b/public/assets/images/og_24th.png differ diff --git a/public/assets/project/23_content_yeobee.png b/public/assets/project/23_content_yeobee.png index 7d16fec..940b546 100644 Binary files a/public/assets/project/23_content_yeobee.png and b/public/assets/project/23_content_yeobee.png differ diff --git a/public/assets/sponsors/sponsor_greeting.png b/public/assets/sponsors/sponsor_greeting.png new file mode 100644 index 0000000..aeebd89 Binary files /dev/null and b/public/assets/sponsors/sponsor_greeting.png differ diff --git a/styles/global-styles.ts b/styles/global-styles.ts index 2cf4a62..16b0a23 100644 --- a/styles/global-styles.ts +++ b/styles/global-styles.ts @@ -33,9 +33,21 @@ const GlobalStyle = createGlobalStyle` list-style: none; padding: 0; } + a { text-decoration: none ; } + + + /* for. chrome, safari, opera, edge */ + .scroll-none::-webkit-scrollbar { + display: none; + } + + .scroll-none { + -ms-overflow-style: none; /* for. internet explorer */ + scrollbar-width: none; /* for. firefox */ + } `; export default GlobalStyle; diff --git a/styles/theme.ts b/styles/theme.ts index 81711f3..563c168 100644 --- a/styles/theme.ts +++ b/styles/theme.ts @@ -26,6 +26,7 @@ const palette = { orange_200: '#FFB27C', orange_300: '#FA9855', orange_400: '#F48132', + orange_450: '#FF7739', orange_500: '#F06C11', orange_600: '#DF5E15', diff --git a/utils/getDeveloperFieldExplain.ts b/utils/getDeveloperFieldExplain.ts index 147a9a3..aefc9d5 100644 --- a/utils/getDeveloperFieldExplain.ts +++ b/utils/getDeveloperFieldExplain.ts @@ -1,11 +1,11 @@ +import { DeveloperFieldName } from 'components/recruit/RecruitField/RecruitDeveloper'; import { RECRUIT_EXPLAIN_ANDROID_DEVELOPER, - RECRUIT_EXPLAIN_BACKEND_DEVELOPER, - RECRUIT_EXPLAIN_CROSSFLATFORM_DEVELOPER, - RECRUIT_EXPLAIN_FRONTEND_DEVELOPER, + RECRUIT_EXPLAIN_FLUTTER_DEVELOPER, RECRUIT_EXPLAIN_IOS_DEVELOPER, + RECRUIT_EXPLAIN_SERVER_DEVELOPER, + RECRUIT_EXPLAIN_WEB_DEVELOPER, } from 'database/recruit'; -import { DeveloperFieldName } from 'components/recruit/RecruitField/RecruitDeveloper'; const getDeveloperFieldExplain = (field: DeveloperFieldName) => { switch (field) { @@ -13,12 +13,12 @@ const getDeveloperFieldExplain = (field: DeveloperFieldName) => { return RECRUIT_EXPLAIN_IOS_DEVELOPER; case 'Android': return RECRUIT_EXPLAIN_ANDROID_DEVELOPER; - case 'Front-End': - return RECRUIT_EXPLAIN_FRONTEND_DEVELOPER; - case 'Back-End': - return RECRUIT_EXPLAIN_BACKEND_DEVELOPER; - case 'Cross-Flatform': - return RECRUIT_EXPLAIN_CROSSFLATFORM_DEVELOPER; + case 'Web': + return RECRUIT_EXPLAIN_WEB_DEVELOPER; + case 'Server': + return RECRUIT_EXPLAIN_SERVER_DEVELOPER; + case 'Flutter': + return RECRUIT_EXPLAIN_FLUTTER_DEVELOPER; } }; diff --git a/utils/getRecruitLink.ts b/utils/getRecruitLink.ts index a9e5e98..0162239 100644 --- a/utils/getRecruitLink.ts +++ b/utils/getRecruitLink.ts @@ -1,5 +1,5 @@ -import Yapp from 'constants/yapp'; import { FieldNameTypes } from 'components/recruit/RecruitField'; +import Yapp from 'constants/yapp'; const getRecruitLink = (field?: FieldNameTypes) => { const { @@ -12,7 +12,7 @@ const getRecruitLink = (field?: FieldNameTypes) => { YAPP_RECRUIT_CROSS_PLATFORM, } = Yapp; switch (field) { - case '기획자': + case 'PM': return YAPP_RECRUIT_PROJECT_MANAGER; case '디자이너': return YAPP_RECRUIT_DESIGNER; @@ -20,11 +20,11 @@ const getRecruitLink = (field?: FieldNameTypes) => { return YAPP_RECRUIT_IOS; case 'Android': return YAPP_RECRUIT_ANDROID; - case 'Front-End': + case 'Web': return YAPP_RECRUIT_FRONT_END; - case 'Back-End': + case 'Server': return YAPP_RECRUIT_BACK_END; - case 'Cross-Flatform': + case 'Flutter': return YAPP_RECRUIT_CROSS_PLATFORM; } };