diff --git a/src/components/ScheduleSection/ScheduleSection.stories.tsx b/src/components/ScheduleSection/ScheduleSection.stories.tsx index 7b6a4100..29b53cde 100644 --- a/src/components/ScheduleSection/ScheduleSection.stories.tsx +++ b/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: () => (
- - + +
), }; diff --git a/src/components/ScheduleSection/ScheduleSection.tsx b/src/components/ScheduleSection/ScheduleSection.tsx index 6ca5ad27..0403368c 100644 --- a/src/components/ScheduleSection/ScheduleSection.tsx +++ b/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 ( -
+
{label.split('').map((char, index) => ( {char} @@ -24,9 +26,9 @@ export function ScheduleSection({ label, title, schedule, titleBgColor }: Schedu
titleContainerCss(theme, titleBgColor)}>

{title}

-
+
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() {
+
+ + + +