[Feat] 메인 14기 일정 디자인 구현

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;
+  }
+`;

src/components/SectionTitle/SectionTitle.tsx

@@ -1,5 +1,7 @@
 import { css, Theme } from '@emotion/react';
 
+import { mediaQuery } from '~/styles/media';
+
 interface SectionTitleProps {
   /**
    * 최상단 label
@@ -28,6 +30,10 @@ const layoutCss = css`
   align-items: center;
   background-color: inherit;
   padding: 88px 0;
+
+  ${mediaQuery('mobile')} {
+    padding: 24px 0;
+  }
 `;
 
 const labelCss = (theme: Theme) => css`

src/constant/schedule.ts

@@ -0,0 +1,68 @@
+import { theme } from '~/styles/theme';
+
+interface Schedule {
+  label: string;
+  title: string;
+  schedule: Array<{
+    date: string;
+    content: string;
+  }>;
+
+  titleBgColor: keyof typeof theme.colors;
+}
+
+export const MEMBER_SCHEDULE: Schedule = {
+  label: 'members',
+  title: '멤버모집',
+  titleBgColor: 'blue400',
+  schedule: [
+    {
+      date: '10.09',
+      content: '서류 접수 시작',
+    },
+    {
+      date: '10.18',
+      content: '서류 마감',
+    },
+    {
+      date: '10.21-22',
+      content: '온라인 면접',
+    },
+    {
+      date: '10.31',
+      content: '최종 합격 안내',
+    },
+  ],
+};
+
+export const SESSION_SCHEDULES: Schedule = {
+  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: '최종 발표',
+    },
+  ],
+};

src/pages/index.tsx

@@ -2,8 +2,11 @@ import { css, Theme } from '@emotion/react';
 
 import { Journey } from '~/components/Journey';
 import { RecruitEntrance } from '~/components/RecruitEntrance';
+import { ScheduleSection } from '~/components/ScheduleSection';
+import { SectionTitle } from '~/components/SectionTitle';
 import { SEO } from '~/components/SEO';
 import { TimerContainer } from '~/components/TimerContainer';
+import { MEMBER_SCHEDULE, SESSION_SCHEDULES } from '~/constant/schedule';
 import { mediaQuery } from '~/styles/media';
 
 export default function Root() {
@@ -15,6 +18,11 @@ export default function Root() {
         <div css={contentCss}>
           <Journey />
           <RecruitEntrance />
+          <section>
+            <SectionTitle label="14th Schedule" title={'14기 일정'} />
+            <ScheduleSection {...MEMBER_SCHEDULE} />
+            <ScheduleSection {...SESSION_SCHEDULES} />
+          </section>
         </div>
       </main>
     </>