랜딩 페이지 중 지원 모집 섹션 개발

src/features/Main/sections/MainBlogSection.tsx

@@ -2,5 +2,5 @@
  * * Main 페이지 블로그 section
  */
 export const MainBlogSection = () => {
-  return <section>Blog</section>;
+  return <section style={{ background: 'white' }}>Blog</section>;
 };

src/features/Main/sections/MainIntroSection.tsx

@@ -18,9 +18,10 @@ export const MainIntroSection = () => {
         <Image
           width={!isMobileSize ? 1920 : 438}
           height={!isMobileSize ? 1080 : 445}
-          src={'/images/16th/lottie/depromeet.gif'}
+          src={'/images/16th/intro/depromeet.gif'}
           id="depromeet"
           alt="디퍼 모집 이미지"
+          priority
         />
         <Image
           src={!isMobileSize ? '/images/16th/intro/title.svg' : '/images/16th/intro/title_m.svg'}

src/features/Main/sections/MainRecruitSection.tsx

@@ -1,6 +1,96 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { useCheckWindowSize } from '~/hooks/useCheckWindowSize';
+import { mediaQuery } from '~/styles/media';
+import { theme } from '~/styles/theme';
+
 /**
  * * Main 페이지 지원하기 section
+ * TODO: 링크 이벤트 연결하기
  */
 export const MainRecruitSection = () => {
-  return <section>Recruit</section>;
+  const { isTargetSize: isMobileSize } = useCheckWindowSize('mobile');
+
+  return (
+    <section css={containerCss}>
+      <div css={text.wrapperCss}>
+        <p css={text.subCss}>생각을 현실로, 열정을 성취로.</p>
+        <h1 css={text.titleCss}>
+          디프만과 함께 성장 할 <br /> 16기 디퍼를 모집합니다
+        </h1>
+        <button css={buttonCss}>16기 모집 알림 신청</button>
+        <Image
+          width={!isMobileSize ? 1051 : 440}
+          height={!isMobileSize ? 326 : 136}
+          src={'/images/16th/intro/recruit/objet.svg'}
+          alt={'16기 디퍼 모집을 위한 오브제'}
+          css={objetCss}
+        />
+      </div>
+    </section>
+  );
 };
+
+const containerCss = css`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 100px 0 414px 0;
+  background: black;
+  overflow: hidden;
+
+  ${mediaQuery('mobile')} {
+    padding: 80px 0 248px 0;
+  }
+`;
+
+const text = {
+  wrapperCss: css`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 12px;
+    color: white;
+  `,
+  subCss: css`
+    ${theme.typosV2.pretendard.semibold24};
+    color: ${theme.colors.pink};
+    line-height: 150%;
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.semibold18};
+      line-height: 150%;
+    }
+  `,
+
+  titleCss: css`
+    ${theme.typosV2.pretendard.bold44};
+    line-height: 150%;
+    margin: 16px 0 48px 0;
+
+    ${mediaQuery('mobile')} {
+      ${theme.typosV2.pretendard.bold28};
+      line-height: 150%;
+    }
+  `,
+};
+
+const buttonCss = () => css`
+  ${theme.typosV2.pretendard.semibold20};
+  color: ${theme.colors.grey['900']};
+  padding: 12px 36px;
+  border-radius: 300px;
+  background: white;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const objetCss = () => css`
+  position: absolute;
+  bottom: -20px;
+`;

src/pages/index.tsx

@@ -36,7 +36,7 @@ export default function Root() {
         {/* NOTE: 기존 웹 구조 */}
         {/* <div>
           <Intro
-            imageUrl="/images/main/intro-img.svg"
+            imageUrl="/images/main/recruit-img.svg"
             title="15기 모집 인트로"
             width={1024}
             height={780}