From 6f311ba9a0b64313ed7566cbd347a913cfc61e04 Mon Sep 17 00:00:00 2001
From: Eonseok Jeon <121864459+eonseok-jeon@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:53:48 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EC=A0=9C=EC=B6=9C=20=EA=B8=B0=ED=95=9C?=
 =?UTF-8?q?=20=EC=A7=80=EB=82=98=EB=A9=B4=20=EC=A0=9C=EC=B6=9C=20=EB=AA=BB?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=A7=89=EA=B8=B0=20(#387)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: 지원 시간 종료 시 지원서 제출 막는 모달창 생성

* fix: 지원 기간 지나면 지원서 버튼 눌러도 제출 안 되도록 수정

* fix: 모달 버튼 디자인 수정
---
 src/views/ApplyPage/index.tsx                 |  9 +++++++
 .../dialogs/PreventApplyDialog/index.tsx      | 24 +++++++++++++++++++
 2 files changed, 33 insertions(+)
 create mode 100644 src/views/dialogs/PreventApplyDialog/index.tsx

diff --git a/src/views/ApplyPage/index.tsx b/src/views/ApplyPage/index.tsx
index 44589005..f51d3bab 100644
--- a/src/views/ApplyPage/index.tsx
+++ b/src/views/ApplyPage/index.tsx
@@ -8,6 +8,7 @@ import useCheckBrowser from '@hooks/useCheckBrowser';
 import useDate from '@hooks/useDate';
 import useScrollToHash from '@hooks/useScrollToHash';
 import { DraftDialog, SubmitDialog } from 'views/dialogs';
+import PreventApplyDialog from 'views/dialogs/PreventApplyDialog';
 import NoMore from 'views/ErrorPage/components/NoMore';
 import BigLoading from 'views/loadings/BigLoding';
 
@@ -35,6 +36,7 @@ const ApplyPage = ({ onSetComplete }: ApplyPageProps) => {
   useCheckBrowser(); // 크롬 브라우저 권장 알럿
 
   const draftDialog = useRef<HTMLDialogElement>(null);
+  const preventApplyDialog = useRef<HTMLDialogElement>(null);
   const submitDialog = useRef<HTMLDialogElement>(null);
   const sectionsRef = useRef<HTMLSelectElement[]>([]);
 
@@ -187,6 +189,12 @@ const ApplyPage = ({ onSetComplete }: ApplyPageProps) => {
   const commonQuestionIds = commonQuestions?.questions.map((question) => question.id);
 
   const handleSendData = (type: 'draft' | 'submit') => {
+    if (NoMoreApply) {
+      preventApplyDialog.current?.showModal();
+
+      return;
+    }
+
     const mostRecentSeason = mostRecentSeasonValue === '해당사항 없음' ? 0 : mostRecentSeasonValue;
     const leaveAbsence =
       getValues('leaveAbsence') == undefined ? undefined : getValues('leaveAbsence') === '재학' ? false : true;
@@ -269,6 +277,7 @@ const ApplyPage = ({ onSetComplete }: ApplyPageProps) => {
   return (
     <FormProvider {...methods}>
       <DraftDialog ref={draftDialog} />
+      <PreventApplyDialog ref={preventApplyDialog} />
       <SubmitDialog
         userInfo={{
           name,
diff --git a/src/views/dialogs/PreventApplyDialog/index.tsx b/src/views/dialogs/PreventApplyDialog/index.tsx
new file mode 100644
index 00000000..93c482b4
--- /dev/null
+++ b/src/views/dialogs/PreventApplyDialog/index.tsx
@@ -0,0 +1,24 @@
+import { forwardRef, type KeyboardEvent } from 'react';
+
+import Dialog from '@components/Dialog';
+
+import { buttonInside, buttonOutside, buttonWrapper, mainText } from '../style.css';
+
+const PreventApplyDialog = forwardRef<HTMLDialogElement>((_, ref) => {
+  const handlePreventESCKeyPress = (e: KeyboardEvent<HTMLDialogElement>) => {
+    if (e.key === 'Escape') e.preventDefault();
+  };
+
+  return (
+    <Dialog ref={ref} onKeyDown={handlePreventESCKeyPress}>
+      <p className={mainText}>지원서 제출 기한이 지났어요.</p>
+      <form method="dialog" className={`${buttonWrapper} ${buttonOutside.solid}`}>
+        <button className={buttonInside.solid}>확인</button>
+      </form>
+    </Dialog>
+  );
+});
+
+PreventApplyDialog.displayName = 'PreventApplyDialog';
+
+export default PreventApplyDialog;