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)}
+ />
+