scheduleContainerCss(theme, schedule.length)}>
{schedule.map(item => (
-
+
{item.date}
{item.content}
@@ -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;
+ }
+`;
diff --git a/src/components/SectionTitle/SectionTitle.tsx b/src/components/SectionTitle/SectionTitle.tsx
index 1c8ce604..cf24dc81 100644
--- a/src/components/SectionTitle/SectionTitle.tsx
+++ b/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`
diff --git a/src/constant/schedule.ts b/src/constant/schedule.ts
new file mode 100644
index 00000000..ff26bdbb
--- /dev/null
+++ b/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: '최종 발표',
+ },
+ ],
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 782a08d5..ebbeb556 100644
--- a/src/pages/index.tsx
+++ b/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() {
+
>