diff --git a/src/apis/mission.ts b/src/apis/mission.ts index 88fd32ac..8b5782d5 100644 --- a/src/apis/mission.ts +++ b/src/apis/mission.ts @@ -3,6 +3,7 @@ import { type FinishedMissionItemType, type MissionCategory, type MissionItemTypeWithRecordId, + type MissionPeriod, type MissionVisibility, } from '@/apis/schema/mission'; import { @@ -21,6 +22,7 @@ interface CreateMissionRequest { content: string; category: MissionCategory; visibility: MissionVisibility; + missionDuration: MissionPeriod; } interface ModifyMissionRequest { @@ -28,6 +30,7 @@ interface ModifyMissionRequest { name: string; content: string; visibility: MissionVisibility; + // missionDuration: MissionPeriod; } const MISSION_APIS = { diff --git a/src/apis/schema/mission.ts b/src/apis/schema/mission.ts index 695e3868..0f173fc1 100644 --- a/src/apis/schema/mission.ts +++ b/src/apis/schema/mission.ts @@ -76,3 +76,11 @@ export enum MissionStatus { REQUIRED = 'REQUIRED', PROGRESSING = 'PROGRESSING', // 진행중, 프론트에서만 존재 } + +export enum MissionPeriod { + TWO_WEEKS = 'TWO_WEEKS', + ONE_MONTH = 'ONE_MONTH', + TWO_MONTHS = 'TWO_MONTHS', + THREE_MONTHS = 'THREE_MONTHS', + FOUR_MONTHS = 'FOUR_MONTHS', +} diff --git a/src/pages/mission/new/MissionPeriod.tsx b/src/pages/mission/new/MissionPeriod.tsx new file mode 100644 index 00000000..c7120383 --- /dev/null +++ b/src/pages/mission/new/MissionPeriod.tsx @@ -0,0 +1,67 @@ +import { MissionPeriod } from '@/apis/schema/mission'; +import Chip from '@/components/Chip/Chip'; +import { css } from '@/styled-system/css'; +import { flex } from '@/styled-system/patterns'; + +const PERIOD: { value: MissionPeriod; label: string }[] = [ + { + value: MissionPeriod.TWO_WEEKS, + label: '2주', + }, + { + value: MissionPeriod.ONE_MONTH, + label: '1개월', + }, + { + value: MissionPeriod.TWO_MONTHS, + label: '2개월', + }, + { + value: MissionPeriod.THREE_MONTHS, + label: '3개월', + }, + { + value: MissionPeriod.FOUR_MONTHS, + label: '4개월', + }, +]; + +interface Props { + missionPeriod: MissionPeriod; + setMissionPeriod: (value: MissionPeriod) => void; +} + +function MissionPeriodSelect(props: Props) { + return ( +
+

기간 설정

+

미션의 수행 기간을 선택해 주세요.

+
+ {PERIOD.map((period) => ( + props.setMissionPeriod(period.value)} + selected={props.missionPeriod === period.value} + > + {period.label} + + ))} +
+
+ ); +} + +export default MissionPeriodSelect; + +const headingCss = css({ + textStyle: 'body2', + color: 'text.primary', +}); + +const descCss = css({ + textStyle: 'body3', + color: 'gray.gray600', + marginTop: '2px', +}); + +const chipCss = flex({ gap: '6px', marginTop: '16px' }); diff --git a/src/pages/mission/new/MissionRegistration.tsx b/src/pages/mission/new/MissionRegistration.tsx index c9f6ede2..7d43f9f9 100644 --- a/src/pages/mission/new/MissionRegistration.tsx +++ b/src/pages/mission/new/MissionRegistration.tsx @@ -2,15 +2,18 @@ import { useState } from 'react'; import { useRouter } from 'next/router'; import APIS from '@/apis'; import { isSeverError } from '@/apis/instance.api'; -import { type MissionCategory, type MissionVisibility } from '@/apis/schema/mission'; +import { type MissionCategory, MissionPeriod, type MissionVisibility } from '@/apis/schema/mission'; import Button from '@/components/Button/Button'; import Input from '@/components/Input/Input'; import { type DropdownValueType } from '@/components/Input/Input.types'; import { useSnackBar } from '@/components/SnackBar/SnackBarProvider'; import { MISSION_CATEGORY_LIST, PUBLIC_SETTING_LIST } from '@/constants/mission'; import { ROUTER } from '@/constants/router'; +import { css } from '@/styled-system/css'; import { useMutation } from '@tanstack/react-query'; +import MissionPeriodSelect from './MissionPeriod'; + export default function MissionRegistration() { const { triggerSnackBar } = useSnackBar(); @@ -21,6 +24,8 @@ export default function MissionRegistration() { PUBLIC_SETTING_LIST[1], ); + const [missionPeriod, setMissionPeriod] = useState(MissionPeriod.TWO_WEEKS); + const isSubmitButtonDisabled = !missionTitleInput || !missionCategory; const { mutate } = useCreateMissionMutation(); @@ -46,6 +51,7 @@ export default function MissionRegistration() { content: missionContentInput, category: missionCategory.value, visibility: missionPublicSetting.value, + missionDuration: missionPeriod, }); }; @@ -80,14 +86,18 @@ export default function MissionRegistration() { onSelect={(item) => setMissionCategory(item)} /> - {/* 공개설정 */} - setMissionPublicSetting(item)} - /> +
+ + + {/* 공개설정 */} + setMissionPublicSetting(item)} + /> +