미션 기간 설정

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,13 +22,15 @@ interface CreateMissionRequest {
   content: string;
   category: MissionCategory;
   visibility: MissionVisibility;
+  missionDuration: MissionPeriod;
 }
 
 interface ModifyMissionRequest {
   missionId: number;
   name: string;
   content: string;
   visibility: MissionVisibility;
+  // missionDuration: MissionPeriod;
 }
 
 const MISSION_APIS = {

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',
+}

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 (
+    <div>
+      <h3 className={headingCss}>기간 설정</h3>
+      <p className={descCss}>미션의 수행 기간을 선택해 주세요.</p>
+      <div className={chipCss}>
+        {PERIOD.map((period) => (
+          <Chip
+            key={period.value}
+            onClick={() => props.setMissionPeriod(period.value)}
+            selected={props.missionPeriod === period.value}
+          >
+            {period.label}
+          </Chip>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+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' });

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>(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)}
       />
 
-      {/* 공개설정 */}
-      <Input
-        variant="drop-down"
-        title="공개설정"
-        list={PUBLIC_SETTING_LIST}
-        selected={missionPublicSetting}
-        onSelect={(item) => setMissionPublicSetting(item)}
-      />
+      <div className={settingWrapperCss}>
+        <MissionPeriodSelect missionPeriod={missionPeriod} setMissionPeriod={setMissionPeriod} />
+
+        {/* 공개설정 */}
+        <Input
+          variant="drop-down"
+          title="공개설정"
+          list={PUBLIC_SETTING_LIST}
+          selected={missionPublicSetting}
+          onSelect={(item) => setMissionPublicSetting(item)}
+        />
+      </div>
 
       <Button variant={'cta'} size={'medium'} onClick={handleSubmit} disabled={isSubmitButtonDisabled}>
         등록
@@ -117,3 +127,11 @@ const useCreateMissionMutation = () => {
     },
   });
 };
+
+const settingWrapperCss = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '36px',
+  marginTop: '48px',
+  paddingBottom: '60px',
+});