Merge pull request #308 from mash-up-kr/feature/schedule-notice

플랫폼 스케줄인 경우 공지 추가 작업
mash-up-kr · Aug 14, 2024 · 29ae79a · 29ae79a
2 parents 756a9a8 + 5fdd57f
commit 29ae79a
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 41 deletions.
diff --git a/src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx b/src/components/Schedule/ScheduleTemplate/ScheduleTemplate.component.tsx
@@ -1,7 +1,14 @@
 import React, { useMemo } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useRecoilValue } from 'recoil';
-import { Button, DatePickerField, InputField, RadioButtonField, SelectField } from '@/components';
+import {
+  Button,
+  DatePickerField,
+  InputField,
+  RadioButtonField,
+  SelectField,
+  Textarea,
+} from '@/components';
 import { InputSize } from '@/components/common/Input/Input.component';
 import * as Styled from './ScheduleTemplate.styled';
 import { $generations, $profile, $teams } from '@/store';
@@ -197,6 +204,9 @@ const ScheduleTemplate = () => {
             </Styled.LocationWrapper>
           )}
         </div>
+        {scheduleType === ScheduleType.PLATFORM && (
+          <Textarea label="공지" {...register('notice')} />
+        )}
       </Styled.ScheduleContent>
       <Styled.SessionContent>
         <Styled.Title>세션 정보</Styled.Title>

diff --git a/src/components/ScheduleDetail/ScheduleInfoList/ScheduleInfoList.component.tsx b/src/components/ScheduleDetail/ScheduleInfoList/ScheduleInfoList.component.tsx
@@ -16,6 +16,7 @@ interface ScheduleInfoListProps {
     roadAddress?: string | null;
     detailAddress: string;
   };
+  notice: string | null;
 }
 
 const ScheduleInfoList = ({
@@ -27,48 +28,56 @@ const ScheduleInfoList = ({
   publishedAt,
   status,
   location,
+  notice,
 }: ScheduleInfoListProps) => {
+  const baseScheduleInfoListItem = [
+    {
+      label: '스케줄 명',
+      value: name,
+    },
+    {
+      label: '기수',
+      value: `${generationNumber}기`,
+    },
+    {
+      label: '구분',
+      value: getScheduleType(scheduleType),
+    },
+    {
+      label: '스케줄 일시',
+      value: formatDate(startedAt, 'YYYY년 M월 D일 A hh시 mm분'),
+    },
+    {
+      label: '등록 일시',
+      value: formatDate(createdAt, 'YYYY년 M월 D일 A hh시 mm분'),
+    },
+    {
+      label: '장소',
+      value:
+        location.roadAddress === null
+          ? location.detailAddress // ZOOM
+          : `${location.roadAddress}${location.detailAddress ? `, ${location.detailAddress}` : ''}`,
+    },
+    {
+      label: '공지',
+      value: notice ?? '-',
+    },
+    {
+      label: '배포 일시',
+      value: formatDate(publishedAt, 'YYYY년 M월 D일 A hh시 mm분'),
+    },
+    {
+      label: '배포 상태',
+      value: getScheduleStatusText(status),
+    },
+  ];
+
   const scheduleInfoListItem = useMemo(() => {
-    return [
-      {
-        label: '스케줄 명',
-        value: name,
-      },
-      {
-        label: '기수',
-        value: `${generationNumber}기`,
-      },
-      {
-        label: '구분',
-        value: getScheduleType(scheduleType),
-      },
-      {
-        label: '스케줄 일시',
-        value: formatDate(startedAt, 'YYYY년 M월 D일 A hh시 mm분'),
-      },
-      {
-        label: '등록 일시',
-        value: formatDate(createdAt, 'YYYY년 M월 D일 A hh시 mm분'),
-      },
-      {
-        label: '장소',
-        value:
-          location.roadAddress === null
-            ? location.detailAddress // ZOOM
-            : `${location.roadAddress}${
-                location.detailAddress ? `, ${location.detailAddress}` : ''
-              }`,
-      },
-      {
-        label: '배포 일시',
-        value: formatDate(publishedAt, 'YYYY년 M월 D일 A hh시 mm분'),
-      },
-      {
-        label: '배포 상태',
-        value: getScheduleStatusText(status),
-      },
-    ];
-  }, [createdAt, generationNumber, name, publishedAt, startedAt, status, location, scheduleType]);
+    if (getScheduleType(scheduleType) === '전체') {
+      return baseScheduleInfoListItem.filter((i) => i.label !== '공지');
+    }
+    return baseScheduleInfoListItem;
+  }, [baseScheduleInfoListItem, scheduleType]);
 
   return (
     <Styled.ScheduleInfoList>

diff --git a/src/pages/ScheduleDetail/ScheduleDetail.page.tsx b/src/pages/ScheduleDetail/ScheduleDetail.page.tsx
@@ -31,6 +31,7 @@ const ScheduleDetail = () => {
     status,
     eventList: sessionList,
     location,
+    notice,
   } = useRecoilValue($scheduleDetail({ scheduleId: scheduleId ?? '' }));
 
   const isPublished = status === ScheduleStatus.PUBLIC;
@@ -151,6 +152,7 @@ const ScheduleDetail = () => {
           publishedAt={publishedAt}
           status={status}
           location={location}
+          notice={notice}
         />
       </Styled.Content>
       <Styled.Content>

diff --git a/src/types/dto/schedule.ts b/src/types/dto/schedule.ts
@@ -41,6 +41,7 @@ export interface ScheduleCreateRequest extends Location {
   name: string;
   startedAt: string;
   eventsCreateRequests: EventCreateRequest[];
+  notice?: string;
 }
 
 export interface ScheduleUpdateRequest extends Location {
@@ -50,6 +51,7 @@ export interface ScheduleUpdateRequest extends Location {
   name: string;
   startedAt: string;
   eventsCreateRequests: EventCreateRequest[];
+  notice?: string;
 }
 
 export interface ScheduleResponse {
@@ -64,6 +66,7 @@ export interface ScheduleResponse {
   eventList: Session[];
   status: ValueOf<typeof ScheduleStatus>;
   location: { detailAddress: string } & Omit<Location, 'detailAddress'>;
+  notice: string;
 }
 
 export interface QRCodeRequest {

diff --git a/src/utils/schedule.ts b/src/utils/schedule.ts
@@ -43,6 +43,7 @@ export interface ScheduleFormValues {
     longitude: string;
     detailAddress: string;
   };
+  notice?: string;
 }
 
 export const getScheduleType = (type: ValueOf<typeof SchedulePlatformType>) => {
@@ -87,6 +88,7 @@ export const parseScheduleResponseToFormValues = (
     startedAt,
     eventList,
     location: { roadAddress, detailAddress, latitude, longitude },
+    notice,
   } = response;
 
   const date: Dayjs = dayjs(startedAt, 'YYYY-MM-DD').startOf('day');
@@ -121,6 +123,7 @@ export const parseScheduleResponseToFormValues = (
         longitude: String(longitude),
         detailAddress: detailAddress ?? '',
       },
+      notice,
     };
   }
 
@@ -132,6 +135,7 @@ export const parseScheduleResponseToFormValues = (
     date,
     sessions,
     locationType: LocationType.ONLINE,
+    notice,
   };
 };
 
@@ -147,6 +151,7 @@ export const parseFormValuesToScheduleRequest = (
     name,
     locationType,
     locationInfo,
+    notice,
   } = formValues;
 
   const formattedDate = date.format('YYYY-MM-DD');
@@ -171,6 +176,7 @@ export const parseFormValuesToScheduleRequest = (
     startedAt,
     endedAt,
     eventsCreateRequests,
+    notice: formScheduleType === ScheduleType.ALL ? '' : notice,
   };
 
   if (locationType === LocationType.OFFLINE && locationInfo) {