[Feat] main 페이지 디자인 구현

src/components/FAQ/FAQ.tsx

@@ -5,6 +5,7 @@ import { FAQList } from '~/components/FAQ/FAQList';
 import { SectionTitle } from '~/components/SectionTitle';
 import { FAQ_GROUP, FAQGroupType, FAQS, FAQType } from '~/constant/faq';
 import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
 
 export function FAQ() {
   const [activeTab, setActiveTab] = useState<FAQGroupType>('지원자격');
@@ -65,4 +66,8 @@ const tabCss = (theme: Theme, isActive: boolean) => css`
   color: ${isActive ? theme.colors.yellow500 : theme.colors.white};
   cursor: pointer;
   padding: 16px 24px;
+
+  ${mediaQuery('mobile')} {
+    font-size: 14px;
+  }
 `;

src/components/FAQ/FAQItem.tsx

@@ -2,6 +2,7 @@ import { css, Theme } from '@emotion/react';
 import { motion, Variants } from 'framer-motion';
 
 import { ArrowIcon } from '~/components/Icons';
+import { mediaQuery } from '~/styles/media';
 import { theme } from '~/styles/theme';
 
 interface FAQItemProps {
@@ -68,12 +69,26 @@ const headerCss = (theme: Theme, isOpen: boolean) => css`
     text-align: center;
     ${theme.typos.pretendard.subTitle2}
   }
+
+  ${mediaQuery('mobile')} {
+    padding: 8px;
+
+    > h3 {
+      font-weight: 500;
+      font-size: 14px;
+    }
+  }
 `;
 
 const arrowIconCss = (theme: Theme, isOpen: boolean) => css`
   > path {
     stroke: ${isOpen ? theme.colors.black800 : theme.colors.blue400};
   }
+
+  ${mediaQuery('mobile')} {
+    width: 24px;
+    height: 24px;
+  }
 `;
 
 const bodyCss = (theme: Theme) => css`
@@ -83,4 +98,11 @@ const bodyCss = (theme: Theme) => css`
     color: ${theme.colors.white};
     ${theme.typos.pretendard.body1};
   }
+  ${mediaQuery('mobile')} {
+    > p {
+      padding: 20px 8px;
+
+      font-size: 14px;
+    }
+  }
 `;

src/components/Main/RecruitTextSection.tsx

@@ -0,0 +1,36 @@
+import { css, Theme } from '@emotion/react';
+
+import { Button } from '~/components/Button';
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+
+export function RecruitTextSection() {
+  return (
+    <section css={[commonLayoutCss, layoutCss]}>
+      <h1>
+        서비스 런칭부터 운영까지 <br />
+        열정적인 여정에 지금 합류하세요
+      </h1>
+      <Button>14기 지원하기</Button>
+    </section>
+  );
+}
+
+const layoutCss = (theme: Theme) => css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 40px;
+
+  h1 {
+    text-align: center;
+    color: ${theme.colors.white};
+    ${theme.typos.decimal.title2};
+  }
+
+  ${mediaQuery('mobile')} {
+    h1 {
+      font-size: 20px;
+    }
+  }
+`;

src/components/Main/SignImageSection.tsx

@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import { css } from '@emotion/react';
+
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
+
+export function SignImageSection() {
+  return (
+    <section css={[commonLayoutCss, layoutCss]}>
+      <Image src="/images/sign/main.png" fill alt="DPM 14th" />
+    </section>
+  );
+}
+
+const layoutCss = css`
+  position: relative;
+  width: 100%;
+  height: 356px;
+  img {
+    width: 100%;
+    object-fit: contain;
+  }
+
+  ${mediaQuery('tablet')} {
+    height: 262px;
+  }
+  ${mediaQuery('mobile')} {
+    height: 122px;
+  }
+`;

src/components/Main/index.tsx

@@ -0,0 +1,2 @@
+export { RecruitTextSection } from './RecruitTextSection';
+export { SignImageSection } from './SignImageSection';

src/components/ScheduleSection/ScheduleSection.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { SectionTitle } from '~/components/SectionTitle';
+import { MEMBER_SCHEDULE, SESSION_SCHEDULES } from '~/constant/schedule';
 
 import { ScheduleSection } from './index';
 
@@ -18,60 +19,8 @@ export const All: Story = {
   render: () => (
     <div css={{ backgroundColor: 'black' }}>
       <SectionTitle label="14th Schedule" title={'14기 일정'} />
-      <ScheduleSection
-        label="members"
-        title="멤버모집"
-        titleBgColor={'blue400'}
-        schedule={[
-          {
-            date: '10.09',
-            content: '서류 접수 시작',
-          },
-          {
-            date: '10.18',
-            content: '서류 마감',
-          },
-          {
-            date: '10.21-22',
-            content: '온라인 면접',
-          },
-          {
-            date: '10.31',
-            content: '최종 합격 안내',
-          },
-        ]}
-      />
-      <ScheduleSection
-        label="sessions"
-        title="정기 세션"
-        titleBgColor={'yellow400'}
-        schedule={[
-          {
-            date: '11.04',
-            content: 'OT',
-          },
-          {
-            date: '11.25',
-            content: '네트워킹',
-          },
-          {
-            date: '12.09',
-            content: 'UT',
-          },
-          {
-            date: '12.23',
-            content: '중간 발표',
-          },
-          {
-            date: '01.20',
-            content: '배포데이',
-          },
-          {
-            date: '02.17',
-            content: '최종 발표',
-          },
-        ]}
-      />
+      <ScheduleSection {...MEMBER_SCHEDULE} />
+      <ScheduleSection {...SESSION_SCHEDULES} />
     </div>
   ),
 };

src/components/ScheduleSection/ScheduleSection.tsx

@@ -1,5 +1,7 @@
 import { css, Theme } from '@emotion/react';
 
+import { commonLayoutCss } from '~/styles/layout';
+import { mediaQuery } from '~/styles/media';
 import { theme } from '~/styles/theme';
 
 interface ScheduleSectionProps {
@@ -15,7 +17,7 @@ interface ScheduleSectionProps {
 
 export function ScheduleSection({ label, title, schedule, titleBgColor }: ScheduleSectionProps) {
   return (
-    <section css={layoutCss}>
+    <section css={[commonLayoutCss, layoutCss]}>
       <div css={topLabelContainerCss}>
         {label.split('').map((char, index) => (
           <span key={index}>{char}</span>
@@ -24,9 +26,9 @@ export function ScheduleSection({ label, title, schedule, titleBgColor }: Schedu
       <div css={theme => titleContainerCss(theme, titleBgColor)}>
         <h2>{title}</h2>
       </div>
-      <div css={scheduleContainerCss}>
+      <div css={theme => scheduleContainerCss(theme, schedule.length)}>
         {schedule.map(item => (
-          <div key={item.content}>
+          <div key={item.content} css={scheduleItemCss}>
             <p>{item.date}</p>
             <span>{item.content}</span>
           </div>
@@ -37,7 +39,6 @@ export function ScheduleSection({ label, title, schedule, titleBgColor }: Schedu
 }
 
 const layoutCss = (theme: Theme) => css`
-  max-width: 960px;
   color: ${theme.colors.white};
   margin: 0 auto;
 
@@ -62,6 +63,13 @@ const topLabelContainerCss = (theme: Theme) => css`
     padding: 6px 0;
     color: ${theme.colors.gray200};
   }
+
+  ${mediaQuery('mobile')} {
+    & > span {
+      font-size: 12px;
+      padding: 2px 0px;
+    }
+  }
 `;
 
 const titleContainerCss = (theme: Theme, titleBgColor: keyof typeof theme.colors) => css`
@@ -70,25 +78,57 @@ const titleContainerCss = (theme: Theme, titleBgColor: keyof typeof theme.colors
   color: ${theme.colors.black800};
   text-align: center;
   padding: 40px 0;
+
+  ${mediaQuery('mobile')} {
+    padding: 16px 0;
+    font-size: 16px;
+  }
 `;
 
-const scheduleContainerCss = (theme: Theme) => css`
+const scheduleItemCss = (theme: Theme) => css`
   display: flex;
-  padding: 50px 90px;
-  background-color: ${theme.colors.black400};
+  flex-direction: column;
+  gap: 20px;
+  text-align: center;
+
+  p {
+    ${theme.typos.decimal.body1};
+  }
+  span {
+    ${theme.typos.pretendard.body1};
+    color: ${theme.colors.gray20};
+  }
+  flex: 1;
 
-  & > div {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
+  ${mediaQuery('mobile')} {
+    gap: 8px;
     p {
-      ${theme.typos.decimal.body1};
+      font-size: 14px;
     }
     span {
-      ${theme.typos.pretendard.body1};
-    }
-    &:not(:last-child) {
-      flex: 1;
+      font-size: 14px;
+      font-weight: 400;
     }
   }
 `;
+
+const scheduleContainerCss = (theme: Theme, scheduleCount: number) => css`
+  display: flex;
+  padding: 50px 90px;
+  background-color: ${theme.colors.black400};
+  flex-wrap: wrap;
+
+  ${mediaQuery('tablet')} {
+    padding: 50px 48px;
+  }
+
+  ${mediaQuery('mobile')} {
+    display: grid;
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(${scheduleCount / 2}, 1fr);
+    padding: 16px 8px;
+    row-gap: 32px;
+    column-gap: 0;
+    text-align: center;
+  }
+`;