feat: 리쿠르트 페이지 (#204)

* feat: add recruit constants * feat: recurit page sections * feat: recruit page * feat: add icon * fix: qna icon flex-shrink * fix: dropdown wrappder div line-heigh 0 * fix: typo to uppercase * feat: recruit faq content change * A to Z 페이지 (#206) * feat: arrow icon 수정 및 header 섹션 초안 개발 * feat: job group 섹션 데스크탑 * feat: job group 섹션 모바일 대응 * feat: session 섹션 데스크탑 * feat: session 섹션 모바일 * feat: more experience 섹션 * feat: more experience 섹션 모바일 * feat: sponsor 섹션 초안 * feat: sponsor 섹션 모바일 * feat: 스폰서 추가 * fix: job group 애니메이션 오버플로우 방지 * fix: arrow icon 크기 조절 및 more experience 모바일 대응 * fix: more experience 모바일 대응 * 모바일 커스텀커서 비활성화 및 아이패드 사파리 userAgent 대응 (#219) * refactor: mouse leave 이벤트로 변경 * feat: ipad user agent 대응 * feat: mobile 환경 커스텀 커서 비활성화 * 홈 타이포 변경 (#217) * fix: 멤버 수 변경 * fix: 론칭 성공률 변경 * GNB 업데이트 (#218) * feat: recruting 배너 clickable 적용 * feat: �gnb 로고 및 clickable 적용 * feat: recruting 배너 문구 변경 * Contact 페이지 (#210) * feat: 채널 섹션 * feat: 채널 섹션 모바일 * feat: arrow icon 배치 * feat: 운영진 상수 설정 * feat: organizer 섹션 * feat: organizer 섹션 모바일 * feat: channel 설정 * chore: 타이포 변경 * a to z 페이지 보강 및 오픈그래프 이미지 변경 (#222) * feat: open graph 이미지 수정 * chore: log 삭제 * feat: about job group 애니메이션 변경 * feat: a to z 헤더 적용 * chore: seo title 변경 * 모바일 클릭 로직 보강 (#223) * fix: organizer card 모바일 클릭 대응 * feat: about more experience 애니메이션 적용 * Revert "feat: about more experience 애니메이션 적용" This reverts commit 19ebcc8. * 지원 링크 추가 및 전체적인 보강 (#224) * feat: 디프만 로고 변경 * feat: 전역 커서 비활성화 * feat: apply section clickable 대응 * feat: desktop 현재 route 아이콘 적용 * feat: footer clickable 적용 * feat: favicon, og 이미지 변경 * feat: 지원 링크 적용 * Project Page (#211) * feat: 기수 필터, 정렬, 페이지네이션 로직 구현 * feat: 헤더 1차 완성 * feat: pc버전 1차 완성 * feat: add typo(subtitle1, subtitle2, body1, body2) * feat: add projects' images * feat: add typo(caption2) * feat: 12기 프로젝트 데이터 추가 * feat: 정렬 바텀시트 구현 * feat: 페이지네이션 pc/모바일 분리해서 구현 * style: mobile css * fix: 빌드 에러 해결 * fix: add overflow:hidden to header container * feat: 썸네일 고화질로 변경 * style: 프로젝트 설명 위치 수정 * feat: 버튼 클릭시 프로젝트 상세 페이지로 이동 * fix: qa 반영 --------- Co-authored-by: eundippojjack@gmail.com <ddodi@Pro-ddodi.local> * not found page (#225) feat: not found page * fix: recruit page clickable * fix: 공통자격요건 문장 개행 처리 * fix: 멤버모집기간 띄어쓰기 추가 * fix: faq 문장 정렬 변경 * fix: jobgroups -> positions 로 변경 * fix: 카카오톡 문구 개행 추가 * fix: 홈 이미지 변경 --------- Co-authored-by: dongkyuuuu <desktop@kakao.com> Co-authored-by: hyesung oh <haesungoh414@gmail.com> Co-authored-by: eunddodi <87167786+eunddodi@users.noreply.github.com> Co-authored-by: eundippojjack@gmail.com <ddodi@Pro-ddodi.local>
depromeet · Mar 5, 2023 · 533cf3c · 533cf3c
1 parent ba9a3f9
commit 533cf3c
Show file tree

Hide file tree

Showing 13 changed files with 951 additions and 1 deletion.
diff --git a/public/images/recruit/home.webp b/public/images/recruit/home.webp
diff --git a/src/components/common/icons/AnswerIcon.tsx b/src/components/common/icons/AnswerIcon.tsx
@@ -0,0 +1,18 @@
+import Svg, { Props } from './Svg';
+
+export function AnswerIcon(props: Props) {
+  return (
+    <Svg
+      {...props}
+      viewBox={props.viewBox || '0 0 24 24'}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="11" fill="#71727A" />
+      <path
+        d="M8.77344 17.5L9.80469 14.5156H14.2109L15.2422 17.5H17.0703L12.9922 6.1875H11.0078L6.94531 17.5H8.77344ZM10.2969 13.0781L11.9609 8.25H12.0391L13.7109 13.0781H10.2969Z"
+        fill="#F7F7F7"
+      />
+    </Svg>
+  );
+}
diff --git a/src/components/common/icons/DropdownIcon.tsx b/src/components/common/icons/DropdownIcon.tsx
@@ -0,0 +1,9 @@
+import Svg, { Props } from './Svg';
+
+export function DropdownIcon(props: Props) {
+  return (
+    <Svg {...props} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M20 8L12 16L4 8" stroke="#121212" strokeWidth="1.5" />
+    </Svg>
+  );
+}
diff --git a/src/components/common/icons/QuestionIcon.tsx b/src/components/common/icons/QuestionIcon.tsx
@@ -0,0 +1,18 @@
+import Svg, { Props } from './Svg';
+
+export function QuestionIcon(props: Props) {
+  return (
+    <Svg
+      {...props}
+      viewBox={props.viewBox || '0 0 24 24'}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="10.5" stroke="#121212" />
+      <path
+        d="M12.9844 13.8281L14.0781 15.2422C14.4583 14.8776 14.7526 14.4089 14.9609 13.8359C15.1693 13.263 15.276 12.599 15.2812 11.8438C15.2812 10.9479 15.1354 10.1823 14.8438 9.54688C14.5521 8.90625 14.1484 8.42188 13.6328 8.09375C13.1224 7.76562 12.5417 7.60417 11.8906 7.60938C11.2344 7.60417 10.6484 7.76562 10.1328 8.09375C9.6224 8.42188 9.21875 8.90625 8.92188 9.54688C8.63021 10.1823 8.48438 10.9479 8.48438 11.8438C8.48438 12.7344 8.63021 13.5 8.92188 14.1406C9.21354 14.776 9.61458 15.2578 10.125 15.5859C10.6354 15.9141 11.2188 16.0781 11.875 16.0781C12.2448 16.0781 12.5885 16.0286 12.9062 15.9297L11.2969 13.8281H12.9844ZM6.78125 11.8438C6.78125 10.6615 7 9.63281 7.4375 8.75781C7.875 7.8776 8.47917 7.20312 9.25 6.73438C10.026 6.26562 10.9062 6.03125 11.8906 6.03125C12.8646 6.03125 13.737 6.26562 14.5078 6.73438C15.2839 7.20312 15.8906 7.8776 16.3281 8.75781C16.7656 9.63281 16.9844 10.6615 16.9844 11.8438C16.9844 12.8646 16.8177 13.776 16.4844 14.5781C16.1562 15.375 15.6927 16.026 15.0938 16.5312L16.625 18.5156H14.8594L13.9062 17.2656C13.2917 17.526 12.6198 17.6562 11.8906 17.6562C10.9062 17.6562 10.026 17.4219 9.25 16.9531C8.47917 16.4792 7.875 15.8047 7.4375 14.9297C7 14.0495 6.78125 13.0208 6.78125 11.8438Z"
+        fill="#121212"
+      />
+    </Svg>
+  );
+}
diff --git a/src/components/common/icons/index.tsx b/src/components/common/icons/index.tsx
@@ -1,9 +1,12 @@
+export { AnswerIcon } from './AnswerIcon';
 export { ArrowIcon } from './ArrowIcon';
 export { BehanceIcon } from './BehanceIcon';
+export { DropdownIcon } from './DropdownIcon';
 export { FacebookIcon } from './FacebookIcon';
 export { GithubIcon } from './GithubIcon';
 export { InstagramIcon } from './InstagramIcon';
 export { LinkedinIcon } from './LinkedinIcon';
 export { MailIcon } from './MailIcon';
 export { MediumIcon } from './MediumIcon';
+export { QuestionIcon } from './QuestionIcon';
 export { WebIcon } from './WebIcon';
diff --git a/src/components/recruit/FAQSection.tsx b/src/components/recruit/FAQSection.tsx
@@ -0,0 +1,229 @@
+import { useState } from 'react';
+import Link from 'next/link';
+import { css } from '@emotion/react';
+
+import { colors, mediaQuery } from '~/styles/constants';
+import { section40HeadingCss, sectionSmallCss } from '~/styles/css';
+
+import { FAQ, FAQ_TYPE, FAQ_TYPE_LABEL, FaqType } from './contstants';
+import { sectionCss, sectionHeadingCss } from './Recurit.style';
+import { ClickableButton } from '../common/Clickable';
+import { AnswerIcon, DropdownIcon, QuestionIcon } from '../common/icons';
+
+const faqTypes = Object.keys(FAQ_TYPE) as FaqType[];
+
+export default function FAQSection() {
+  const [faqType, setFaqType] = useState<FaqType>(FAQ_TYPE.REQUIREMENT);
+  const [selectedFaqItem, setSelectedFaqItem] = useState(0);
+
+  return (
+    <section css={sectionCss}>
+      <div css={sectionHeadingCss}>
+        <p css={sectionSmallCss}>FAQ</p>
+        <h2 css={section40HeadingCss}>자주 묻는 질문</h2>
+      </div>
+      <div css={faqLayoutBox}>
+        <ul css={faqLayoutAside}>
+          {faqTypes.map(key => (
+            <li key={`faq-type-category-${key}`}>
+              <ClickableButton
+                css={faqCategoryButtonCss(faqType === FAQ_TYPE[key])}
+                onClick={() => {
+                  setFaqType(FAQ_TYPE[key]);
+                  setSelectedFaqItem(0);
+                }}
+              >
+                {FAQ_TYPE_LABEL[key]}
+              </ClickableButton>
+            </li>
+          ))}
+        </ul>
+        <ul css={faqLayoutContent}>
+          {FAQ[faqType].map((item, index) => (
+            <li
+              key={`recruitment-list-${faqType}-${index}`}
+              css={faqItem(selectedFaqItem === index)}
+              onClick={() => {
+                setSelectedFaqItem(index);
+              }}
+            >
+              <ClickableButton>
+                <dt>
+                  <QuestionIcon width={24} height={24} />
+                  {item.title}
+                  <div css={faqItemDrowpdownIcon(selectedFaqItem === index)}>
+                    <DropdownIcon width={24} height={24} />
+                  </div>
+                </dt>
+                <dd>
+                  <AnswerIcon width={24} height={24} /> {item.description}
+                </dd>
+              </ClickableButton>
+            </li>
+          ))}
+        </ul>
+        <div css={faqDescription}>
+          <div css={faqDescriptionIcon}>*</div>
+          <p>
+            찾으시는 내용이 없으신가요?
+            <br />
+            카카오톡 채널
+            <Link target="_blank" rel="noopener noreferrer" href="https://pf.kakao.com/_xoxmcxed">
+              &nbsp;@depromeet&nbsp;
+            </Link>
+            으로 <br /> 궁금한 점을 전달해 주세요.
+          </p>
+          <small>(18시 이후 답변)</small>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const faqLayoutBox = css`
+  position: relative;
+  display: flex;
+  width: 100%;
+
+  ${mediaQuery('xs')} {
+    flex-direction: column;
+  }
+`;
+
+const faqLayoutAside = css`
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+  width: calc((1200 - 876) / 1200 * 100%);
+
+  ${mediaQuery('xs')} {
+    justify-content: center;
+    flex-direction: row;
+    column-gap: 40px;
+    width: 100%;
+
+    margin-bottom: 30px;
+  }
+`;
+
+const faqDescription = css`
+  position: absolute;
+  left: 0;
+  top: 247px;
+  width: calc((1200 - 876) / 1200 * 100%);
+  padding-right: 30px;
+
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 140%;
+  letter-spacing: -0.3px;
+  color: ${colors.gray900};
+
+  a {
+    color: ${colors.point};
+    text-decoration: underline;
+  }
+
+  small {
+    color: ${colors.gray500};
+  }
+
+  ${mediaQuery('xs')} {
+    width: 100%;
+    margin-top: 30px;
+    padding-right: 0;
+    position: unset;
+    text-align: center;
+  }
+`;
+
+const faqDescriptionIcon = css`
+  font-weight: 500;
+  font-size: 26px;
+  line-height: 31px;
+  letter-spacing: -0.3px;
+  color: ${colors.point};
+`;
+
+const faqLayoutContent = css`
+  border-top: solid 1px ${colors.black};
+  width: calc(876 / 1200 * 100%);
+
+  ${mediaQuery('xs')} {
+    width: 100%;
+  }
+`;
+
+const faqItem = (selected = false) => css`
+  position: relative;
+  padding: 20px 10px;
+  border-bottom: solid 1px ${colors.black};
+  height: fit-content;
+  min-height: 65px;
+
+  dt {
+    display: flex;
+    align-items: flex-start;
+    text-align: left;
+
+    padding-right: 38px;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 140%;
+    letter-spacing: -0.3px;
+    color: ${colors.black};
+  }
+
+  dd {
+    display: ${selected ? 'flex' : 'none'};
+    align-items: flex-start;
+    text-align: left;
+
+    margin-top: 11px;
+
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 140%;
+    letter-spacing: -0.3px;
+    color: #71727a;
+  }
+
+  svg {
+    margin-right: 12px;
+    flex-shrink: 0;
+  }
+
+  ${mediaQuery('xs')} {
+    dd {
+      margin-top: 22px;
+    }
+  }
+`;
+
+const faqItemDrowpdownIcon = (selected = false) => css`
+  position: absolute;
+  top: 20px;
+  right: 10px;
+  transform: rotate(${selected ? '180deg' : '0deg'});
+  line-height: 0;
+
+  svg {
+    margin: 0;
+  }
+`;
+
+const faqCategoryButtonCss = (selected = false) => css`
+  font-weight: 600;
+  font-size: ${selected ? '24px' : '20px'};
+  line-height: 28px;
+  letter-spacing: -0.3px;
+  color: ${colors.black};
+  text-decoration: ${selected ? 'underline' : 'none'};
+
+  ${mediaQuery('xs')} {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 22px;
+    color: ${selected ? colors.point : '${colors.black}'};
+  }
+`;
diff --git a/src/components/recruit/HeaderSection.tsx b/src/components/recruit/HeaderSection.tsx
@@ -0,0 +1,81 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { colors, mediaQuery } from '~/styles/constants';
+
+import { BigArrowIcon } from '../home/BigArrowIcon';
+
+export default function HeaderSection() {
+  return (
+    <section css={headerCss}>
+      <div css={headImageWrapperCss}>
+        <div css={headingCss}>
+          <h1>서류 접수 마감까지</h1>
+          <em>
+            <h1>D-7</h1>
+          </em>
+        </div>
+        <Image
+          fill
+          src="/images/recruit/home.webp"
+          alt={'리쿠르트 홈 아이콘 이미지'}
+          placeholder="blur"
+          blurDataURL="/images/recruit/home.webp"
+          priority
+          quality={100}
+        />
+      </div>
+      <BigArrowIcon css={iconCss} width={36} height={36} />
+    </section>
+  );
+}
+
+const headerCss = css`
+  display: flex;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 780px;
+
+  ${mediaQuery('xs')} {
+    height: 650px;
+  }
+`;
+
+const headingCss = css`
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  text-align: center;
+
+  font-weight: 600;
+  font-size: 40px;
+  color: ${colors.black};
+  line-height: 48px;
+  letter-spacing: -1px;
+`;
+
+const headImageWrapperCss = css`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+
+  /* width: calc(770.79 / 1440 * 100%); */
+  height: calc(488.97 / 720 * 100%);
+
+  width: 770.79px;
+  /* max-width: 1920px; */
+  min-height: 488.97px;
+`;
+
+const iconCss = css`
+  position: absolute;
+  bottom: 120px;
+
+  ${mediaQuery('xs')} {
+    bottom: 107px;
+  }
+`;