[Feat] agenda 상세정보 공지사항 추가 UI, API 연결 및 useFetchRequest #1470

[irenee-14]

📌 개요

• agenda 상세정보 공지사항 추가 UI, API 연결 및 useFetchRequest

  💻 작업사항

  1. agenda 공지사항 추가 UI

     • 주최자인 경우 공지사항 탭의 공지사항 추가 버튼을 클릭하면 공지사항 추가 페이지로 이동
     • 제목과 내용을 입력한 후 제출하기 버튼을 누르면 POST 요청
     • 항목이 모두 들어오지 않았을 경우 에러처리 필요 (모달 provider 완성 후 추가 예정)
     • 공지사항 추가가 성공했을 경우 agenda상세 페이지로 이동
     

2. useFetchRequest

   • axios로 POST, PATCH request

   • 인자로 method(POST, PATCH), url, body, params(쿼리파라미터), onSuccess(성공 시 실행), onError(에러 시 실행) 전달하여 실행

   • 정의

     const useFetchRequest = <T>() => {
       const [data, setData] = useState<T | null>(null);
       const [status, setStatus] = useState<number>(0);
       const [error, setError] = useState<string | null>(null);
     
       const sendRequest = async (
         method: 'POST' | 'PATCH',
         url: string,
         body: Record<string, any>,
         params?: Record<string, any>,
         onSuccess?: (data: T) => void,
         onError?: (error: string) => void
       ) => {
           ... 
       };
     
          return { data, status, error, sendRequest };
     };

   • 사용 방법

     const { data, status, error, sendRequest } = useFetchRequest();
     sendRequest(
         'POST',
         `announcement`,
         {
           title: announcementTitle,
           content: announcementDescription,
         },
         { agenda_key: agendaKey },
          (data) => {
           router.push(`/agenda/${agendaKey}`);
         },
         (error: string) => {
           console.error(error);
         }
      );

   💡 관련 이슈

   • 1470