feat : add Recruit Page UI

src/components/Header/Desktop/DesktopHeader.tsx

@@ -243,6 +243,11 @@ const menuTitleUnderline = css`
     width: 100%;
     border-bottom: 2px solid white;
   }
+  &:last-child {
+    &::after {
+      width: calc(100% + 40px);
+    }
+  }
 `;
 
 export const MenuTitle = styled.div<MenuTitleProps>`

src/components/Header/menuTapList.ts

@@ -33,8 +33,8 @@ export const menuTapList: MenuTapList = [
     href: '/sponsor',
   },
   {
-    type: MenuTapType.Anchor,
-    title: '지원하기',
-    href: 'https://sopt-recruiting.web.app/recruiting/apply/ob',
+    type: MenuTapType.Router,
+    title: '리크루팅',
+    href: '/recruit',
   },
 ];

src/pages/recruit.tsx

@@ -1,57 +1 @@
-import styled from '@emotion/styled';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import Sopt404 from '@src/assets/images/sopt_404.png';
-import { Header } from '@src/components';
-import RoundButton from '@src/components/common/RoundButton';
-import theme from '@src/styles/theme';
-
-function Recruit() {
-  const router = useRouter();
-  const handleClick = () => {
-    router.push('/');
-  };
-
-  return (
-    <>
-      <Header />
-      <Styled.Root>
-        <Image
-          src={Sopt404.src}
-          width={296}
-          height={78}
-          alt="SOPT"
-          blurDataURL={Sopt404.src}
-          placeholder="blur"
-        />
-        <span>아직 지원 기간이 아니에요!</span>
-        <RoundButton isReverse={true} onClick={handleClick}>
-          홈으로 가기
-        </RoundButton>
-      </Styled.Root>
-    </>
-  );
-}
-
-export default Recruit;
-
-const Styled = {
-  Root: styled.section`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100vh;
-
-    & span {
-      margin-top: 99px;
-      margin-bottom: 99px;
-      line-height: 56px;
-      color: ${theme.colors.soptWhite};
-      font-size: 45px;
-      font-weight: 400;
-      font-style: normal;
-    }
-  `,
-};
+export { default } from '@src/views/RecruitPage';

src/views/FAQPage/components/faq/QuestionBox.tsx

@@ -74,6 +74,7 @@ const Styled = {
   `,
   QuestionWrapper: styled.div<{ isOpened: boolean }>`
     display: flex;
+    align-items: center;
     justify-content: space-between;
     /* align-items: center; */
     margin-bottom: ${({ isOpened }) => (isOpened ? '37px' : '0')};

src/views/RecruitPage/RecruitPage.tsx

@@ -0,0 +1,69 @@
+import styled from '@emotion/styled';
+import { Footer, Header, Layout, ScrollToTopButton } from '@src/components';
+import { ActivityReview } from './components/ActivityReview/ActivityReview';
+import ChapterInfo from './components/ChapterInfo';
+import Contact from './components/Contact';
+import FaqInfo from './components/FAQ';
+import NotificationSection from './components/NotificationSection';
+import RecruiteeInfo from './components/RecruteeInfo';
+import Schedule from './components/Schedule';
+
+function Recruit() {
+  return (
+    <Layout>
+      <Header />
+      <ScrollToTopButton />
+      <Root>
+        <NotificationSection />
+        <ContentWrapper>
+          <RecruiteeInfo />
+          <ChapterInfo />
+          <Schedule />
+          <FaqInfo />
+          <Contact />
+          <ActivityReview />
+        </ContentWrapper>
+      </Root>
+      <Footer />
+    </Layout>
+  );
+}
+
+const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-height: 100vh;
+  margin: 0 auto;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 1199px) and (min-width: 766px) {
+    margin-top: 90px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 765.9px) {
+    margin-top: 90px;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 180px;
+
+  width: 1200px;
+  padding: 100px 0;
+
+  /* 태블릿 뷰 */
+  @media (max-width: 1199px) and (min-width: 766px) {
+    width: 700px;
+    gap: 120px;
+  }
+  /* 모바일 뷰 */
+  @media (max-width: 765.9px) {
+    width: 360px;
+    gap: 80px;
+  }
+`;
+
+export default Recruit;

src/views/RecruitPage/components/ActivityReview/ActivityReview.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+import { ReactComponent as ArrowLeft } from '@src/views/MainPage/assets/arrow-left-28x28.svg';
+import { ReactComponent as ArrowRight } from '@src/views/MainPage/assets/arrow-right-28x28.svg';
+import ArrowRightWhite from '@src/views/MainPage/assets/arrow_right_white.svg';
+import { useHorizontalScroll } from '@src/views/MainPage/lib';
+import { SectionTitle } from '../common/styles';
+import useFetch from './hooks/useFetch';
+import {
+  Arrow,
+  ArrowWrapper,
+  CardTitle,
+  CardWrapper,
+  ContainerWrapper,
+  Content,
+  ContentWrapper,
+  Desc,
+  DescName,
+  DescWrapper,
+  MoreLinkWrapper,
+  TitleWrapper,
+} from './styles';
+import { parsePartToKorean } from './utils/parsePartToKorean';
+
+export function ActivityReview() {
+  const reviews = useFetch();
+  const {
+    scrollableRef,
+    onClickLeftButton,
+    onClickRightButton,
+    isLeftScrollable,
+    isRightScrollable,
+  } = useHorizontalScroll(1032, 1);
+
+  if (reviews._TAG !== 'OK') return null;
+
+  return (
+    <ContainerWrapper>
+      <TitleWrapper>
+        <SectionTitle>{'회원들의 후기로 SOPT\n 활동을 미리 만나보세요.'}</SectionTitle>
+        <Link href="/review">
+          <MoreLinkWrapper>활동후기 더보기</MoreLinkWrapper>
+        </Link>
+      </TitleWrapper>
+      <ContentWrapper>
+        <ArrowWrapper onClick={() => onClickLeftButton(scrollableRef.current)}>
+          <ArrowLeft stroke={isLeftScrollable ? 'white' : 'grey'} />
+        </ArrowWrapper>
+        <Content ref={scrollableRef}>
+          {reviews.data.map((review) => (
+            <Link key={review.id} href={review.link}>
+              <CardWrapper role="presentation">
+                <CardTitle>{review.title}</CardTitle>
+                <DescWrapper>
+                  <Desc>
+                    {parsePartToKorean(review.part)}파트 {review.semester}기{'\n'}
+                    <DescName>{review.reviewer}</DescName>
+                  </Desc>
+                  <Arrow src={ArrowRightWhite} alt="" />
+                </DescWrapper>
+              </CardWrapper>
+            </Link>
+          ))}
+        </Content>
+        <ArrowWrapper onClick={() => onClickRightButton(scrollableRef.current)}>
+          <ArrowRight stroke={isRightScrollable ? 'white' : 'grey'} />
+        </ArrowWrapper>
+      </ContentWrapper>
+    </ContainerWrapper>
+  );
+}

src/views/RecruitPage/components/ActivityReview/hooks/useFetch.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import useFetchBase from '@src/hooks/useFetchBase';
+import { api } from '@src/lib/api';
+
+const useFetch = () => {
+  const willFetch = useCallback(async () => {
+    const data = await api.reviewAPI.getSampleReviews();
+    return data.reviews;
+  }, []);
+  const state = useFetchBase(willFetch);
+  return state;
+};
+
+export default useFetch;