Merge pull request #240 from mash-up-kr/develop

Release v1.1.0 배포

.github/CODEOWNERS

@@ -1 +1 @@
-*   @mango906 @Baek2back @HaJunRyu @sanoopark
+*   @Baek2back @HaJunRyu @sanoopark @kikiyeom

pages/index.tsx

@@ -6,6 +6,7 @@ import {
   RecruitingOpenHero,
   RecruitingPeriod,
   RecruitingRemainder,
+  NotRecruitmentPeriod,
 } from '@/components';
 
 import { useAOS } from '@/hooks';
@@ -16,6 +17,7 @@ import { useEffect, useState } from 'react';
 const Home = () => {
   useAOS();
 
+  const [isOpenNotRecruitMentModal, setIsOpenNotRecruitmentModal] = useState(true);
   const [recruitingProgressStatus, setRecruitingProgressStatus] = useState<
     RecruitingProgressStatus | 'NOT_INITIALIZED'
   >('NOT_INITIALIZED');
@@ -34,6 +36,9 @@ const Home = () => {
           <RecruitingPeriod />
           <RecruitingProcess />
           <RecruitingDetailNavigation />
+          {isOpenNotRecruitMentModal && (
+            <NotRecruitmentPeriod setIsOpenModal={setIsOpenNotRecruitmentModal} />
+          )}
         </HomeLayout>
       )}
     </>

src/components/applyStatus/StatusDetailBackground/StatusDetailBackground.component.tsx

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
 import cake from '@/assets/images/mashong-cake-2x-min.png';
-import coffee from '@/assets/images/mashong-coffee-2x-min.png';
 import win from '@/assets/images/mashong-win-2x-min.png';
 import basic from '@/assets/images/mashong-basic-2x-min.png';
 import working from '@/assets/images/mashong-working-2x-min.png';
 import { KeyOf } from '@/types';
 import Image from 'next/image';
+import coffee from '@/assets/images/mashong-coffee-rotate-2x-min.png';
 import * as Styled from './StatusDetailBackground.styled';
 
 const mashongImages = {

src/components/common/Modal/Modal.component.tsx

@@ -56,7 +56,7 @@ const Modal = ({
 
     const handleFocusTrap = (e: KeyboardEvent) => {
       const focusableNodeList = dialogRef.current?.querySelectorAll<HTMLElement>(
-        'input, button, textarea, select, [href] [tabindex]',
+        'input, button, textarea, select, [href], [tabindex]',
       );
 
       if (focusableNodeList) {

src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.component.tsx

@@ -0,0 +1,40 @@
+import { Modal } from '@/components';
+import mashong from '@/assets/images/mashong-coffee-3x-min.png';
+import { Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+import * as Styled from './NotRecruitmentPeriod.styled';
+
+interface NotRecruitmentPeriodProps {
+  setIsOpenModal: Dispatch<SetStateAction<boolean>>;
+}
+
+const NotRecruitmentPeriod = ({ setIsOpenModal }: NotRecruitmentPeriodProps) => {
+  const handleCloseModal = () => {
+    setIsOpenModal(false);
+  };
+
+  return (
+    <Modal deemClose={false} setIsOpenModal={setIsOpenModal}>
+      <Styled.Dialog>
+        <Styled.Notify>지금은 모집 기간이 아니에요!</Styled.Notify>
+        <Styled.Paragraph>
+          다음 기수 모집 시작은{'\n'}23년 11월 이후로 예정되어 있습니다.
+        </Styled.Paragraph>
+        <Styled.GoToOfficialPage href="https://mash-up.kr/">
+          공식 홈페이지 바로가기
+        </Styled.GoToOfficialPage>
+        <Styled.CloseButton onClick={handleCloseModal}>지난 모집 훑어보기</Styled.CloseButton>
+        <Styled.MashongWrapper>
+          <Image src={mashong.src} alt="" layout="fill" priority />
+          <Styled.SpeechBubble>
+            <Styled.Speech>현재 13기가 활발히 활동 중이에요</Styled.Speech>
+            <Styled.SpeechDotBig />
+            <Styled.SpeechDotSmall />
+          </Styled.SpeechBubble>
+        </Styled.MashongWrapper>
+      </Styled.Dialog>
+    </Modal>
+  );
+};
+
+export default NotRecruitmentPeriod;

src/components/home/NotRecruitmentPeriod/NotRecruitmentPeriod.styled.ts

@@ -0,0 +1,116 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Dialog = styled.div`
+  position: relative;
+  width: 29rem;
+  padding: 5rem 0 3rem;
+  text-align: center;
+  background: #292a34;
+  border-radius: 3rem;
+`;
+
+export const Notify = styled.p`
+  ${({ theme }) => css`
+    ${theme.fonts.kr.bold18};
+    color: #ffffff;
+    text-align: center;
+  `}
+`;
+
+export const Paragraph = styled.p`
+  ${({ theme }) => css`
+    ${theme.fonts.kr.medium14};
+    margin: 0.8rem 0 1.6rem;
+    color: #ffffff;
+    white-space: pre-wrap;
+    text-align: center;
+  `}
+`;
+
+export const GoToOfficialPage = styled.a`
+  ${({ theme }) => css`
+    ${theme.fonts.kr.medium16};
+    display: inline-block;
+    width: 21rem;
+    padding: 1.2rem 0;
+    color: ${theme.colors.white};
+    letter-spacing: -0.05em;
+    text-align: center;
+    background: ${theme.colors.purple70};
+    border: 0;
+    border-radius: 1rem;
+    cursor: pointer;
+  `}
+`;
+
+export const CloseButton = styled.button`
+  ${({ theme }) => css`
+    ${theme.fonts.kr.medium16};
+    display: block;
+    width: 21rem;
+    margin: 1rem auto 0;
+    padding: 1.2rem 0;
+    color: ${theme.colors.white};
+    letter-spacing: -0.05em;
+    text-align: center;
+    background: #4f5273;
+    border: 0;
+    border-radius: 1rem;
+    cursor: pointer;
+  `}
+`;
+
+export const MashongWrapper = styled.div`
+  position: absolute;
+  top: -7.2rem;
+  left: 50%;
+  width: 11.1rem;
+  height: 11rem;
+  transform: translate3d(-50%, 0, 0);
+`;
+
+export const SpeechBubble = styled.div`
+  ${({ theme }) => css`
+    position: absolute;
+    top: -8.1rem;
+    left: -1.2rem;
+    width: 21.1rem;
+    background: ${theme.colors.white};
+    border-radius: 3rem;
+  `}
+`;
+
+export const Speech = styled.span`
+  ${({ theme }) => css`
+    ${theme.fonts.kr.medium13};
+    display: block;
+    padding: 1.4rem;
+  `}
+`;
+
+export const SpeechDotBig = styled.div`
+  ${({ theme }) => css`
+    position: absolute;
+    bottom: -0.9rem;
+    left: 50%;
+    width: 1.8rem;
+    height: 1.8rem;
+    background: ${theme.colors.white};
+    border-radius: 50%;
+    transform: translate3d(-50%, 0, 0);
+  `}
+`;
+
+export const SpeechDotSmall = styled.div`
+  ${({ theme }) => css`
+    position: absolute;
+    bottom: -2.3rem;
+    left: 45%;
+    width: 1rem;
+    height: 1rem;
+    background: ${theme.colors.white};
+    border-radius: 50%;
+    transform: translate3d(-50%, 0, 0);
+  `}
+`;

src/components/home/index.ts

@@ -6,3 +6,4 @@ export { default as RecruitingOpenHero } from './RecruitingOpenHero/RecruitingOp
 export { default as RecruitingPeriod } from './RecruitingPeriod/RecruitingPeriod.component';
 export { default as RecruitingPeriodDesktop } from './RecruitingPeriodDesktop/RecruitingPeriodDesktop.component';
 export { default as RecruitingRemainder } from './RecruitingRemainder/RecruitingRemainder.component';
+export { default as NotRecruitmentPeriod } from './NotRecruitmentPeriod/NotRecruitmentPeriod.component';