✨ feat: 서류 재검토 요청 페이지, 로직 구현 #54

src/api/document.ts

@@ -105,3 +105,17 @@ export const searchSchool = async (
   );
   return response.data;
 };
+
+// 8.9 (유학생) 서류 (근로계약서, 시간제 취업허가서) 재검토 요청하기
+export const postRequest = async ({
+  id,
+  reason,
+}: {
+  id: number;
+  reason: string;
+}): Promise<{ id: number }> => {
+  const response = await api.post(`/users/documents/${id}/status/requestion`, {
+    reason: reason,
+  });
+  return response.data;
+};

src/hooks/api/useDocument.ts

@@ -1,6 +1,7 @@
 import {
   postIntegratedApplications,
   postPartTimeEmployPermit,
+  postRequest,
   postStandardLaborContracts,
   putIntegratedApplications,
   putPartTimeEmployPermit,
@@ -131,3 +132,15 @@ export const useSearchSchool = ({
   });
   return { searchSchool: mutate, ...rest };
 };
+
+// 8.14 (유학생) 통합신청서 수정 api 통신 커스텀 훅
+export const usePostRequest = () => {
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: postRequest,
+    onSuccess: () => {
+      navigate('/application-documents');
+    },
+    onError: () => navigate('/request-modify'),
+  });
+};

src/pages/WriteDocuments/RequestModifyPage.tsx

@@ -0,0 +1,54 @@
+import BottomButtonPanel from '@/components/Common/BottomButtonPanel';
+import Button from '@/components/Common/Button';
+import BaseHeader from '@/components/Common/Header/BaseHeader';
+import { usePostRequest } from '@/hooks/api/useDocument';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const RequestModifyPage = () => {
+  const navigate = useNavigate();
+  const [reasonInput, setReasonInput] = useState('');
+  const { mutate: sendRequest } = usePostRequest();
+  return (
+    <div>
+      <BaseHeader
+        hasBackButton={true}
+        hasMenuButton={true}
+        title="Reason for Request"
+        onClickBackButton={() => navigate('/application-documents')}
+      />
+      <div className="w-full relative flex flex-col items-center justify-start text-left text-[#1e1926] head-1">
+        <div className="self-stretch flex items-center justify-start p-6">
+          Reason for Request
+        </div>
+        <div className="w-full self-stretch flex flex-col items-center justify-start pb-[10rem] px-6 body-3">
+          <div className="w-full flex flex-col items-start justify-start">
+            <div className="w-full flex flex-col items-center justify-start">
+              <textarea
+                className="w-full h-[7.5rem] px-[1rem] py-[0.75rem] border border-[#E2E5EB] rounded-[0.75rem] body-2 outline-none resize-none"
+                placeholder="Write a contract review"
+                value={reasonInput}
+                maxLength={100}
+                onChange={(e) => setReasonInput(e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <BottomButtonPanel>
+        <Button
+          type="large"
+          isBorder={false}
+          bgColor="bg-[#FEF387]"
+          fontColor="text-[#1E1926]"
+          title="Request"
+          onClick={() => {
+            sendRequest({ id: 1, reason: reasonInput });
+          }}
+        />
+      </BottomButtonPanel>
+    </div>
+  );
+};
+
+export default RequestModifyPage;

src/router.tsx

@@ -20,6 +20,7 @@ import WriteDocumentsPage from '@/pages/WriteDocuments/WriteDocumentsPage';
 import ApplicationDetailPage from '@/pages/ApplicationDetail/ApplicationDetailPage';
 import ApplicationResultPage from '@/pages/ApplicationResult/ApplicationResultPage';
 import EmployerPostDetailPage from '@/pages/Employer/PostDetail/EmployerPostDetailPage';
+import RequestModifyPage from './pages/WriteDocuments/RequestModifyPage';
 
 const Layout = () => {
   const location = useLocation();
@@ -68,6 +69,7 @@ const Router = () => {
             element={<EmployerPostDetailPage />}
           />
           <Route path="/write-documents" element={<WriteDocumentsPage />} />
+          <Route path="/request-modify" element={<RequestModifyPage />} />
 
           <Route path="/application" element={<ApplicationPage />} />
         </Route>