[FE] FIX: 수지회 신청 시, 신청하고자 하는 날짜 그대로 api 보내도록 수정

가지고 다니는 데이터를 M/d에서 y/M/d로 수정 및 display 경우만 M/d로 변경
innovationacademy-kr · Dec 23, 2024 · 769f7e7 · 769f7e7
1 parent 831cd83
commit 769f7e7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/frontend/src/Presentation/components/Modals/RegisterModal/RegisterModal.tsx b/frontend/src/Presentation/components/Modals/RegisterModal/RegisterModal.tsx
@@ -32,25 +32,21 @@ const RegisterModal = ({
   const [hasErrorOnResponse, setHasErrorOnResponse] = useState<boolean>(false);
   const [modalTitle, setModalTitle] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [year, month, day] = date.split("/");
   const navigate = useNavigate();
 
   const registerDetail = `발표를 신청한 후에는 내용 수정이 <strong>불가능</strong>합니다.
 발표 날짜와 시간을 수정하고 싶으시다면
 Cabi 슬랙 채널로 문의해주세요.
-<strong>${date}</strong> 에 수요지식회 발표를 신청하시겠습니까?`;
+<strong>${month}/${day}</strong> 에 수요지식회 발표를 신청하시겠습니까?`;
 
   const closeResponseModal = (e: React.MouseEvent) => {
     closeModal(e);
   };
 
   const tryRegister = async () => {
     try {
-      const [month, day] = date.split("/");
-      const data = new Date(
-        Number(new Date().getFullYear()),
-        Number(month) - 1,
-        Number(day)
-      );
+      const data = new Date(Number(year), Number(month) - 1, Number(day));
       // NOTE: Date 객체의 시간은 UTC 기준이므로 한국 시간 (GMT + 9) 으로 변환, 이후 발표 시작 시간인 14시를 더해줌
       data.setHours(9 + 14);
       await axiosPostPresentationForm(
@@ -68,7 +64,7 @@ Cabi 슬랙 채널로 문의해주세요.
       }, 1500);
       setIsFinished(true);
     } catch (error: any) {
-      setModalTitle(error.response.data.message);
+      setModalTitle(error.response);
       setHasErrorOnResponse(true);
     } finally {
       setShowResponseModal(true);

diff --git a/frontend/src/Presentation/components/Register/DropdownDateMenu.tsx b/frontend/src/Presentation/components/Register/DropdownDateMenu.tsx
@@ -31,8 +31,8 @@ const DropdownDateMenu = ({
   });
 
   const handleOptionSelect = useCallback(
-    (option: string) => {
-      setSelectedOption(option);
+    (option: string, displayOption: string) => {
+      setSelectedOption(displayOption);
       setDropdownState((prev) => ({
         ...prev,
         isVisible: false,
@@ -72,15 +72,18 @@ const DropdownDateMenu = ({
         isVisible={dropdownState.isVisible}
         clickCount={clickCount}
       >
-        {data.map((time) => (
-          <DropdownOption
-            key={time}
-            onClick={() => handleOptionSelect(time)}
-            invalid={invalidDates?.includes(time)}
-          >
-            {time}
-          </DropdownOption>
-        ))}
+        {data.map((time) => {
+          const displayTime = time.split("/").slice(1).join("/");
+          return (
+            <DropdownOption
+              key={time}
+              onClick={() => handleOptionSelect(time, displayTime)}
+              invalid={invalidDates?.includes(time)}
+            >
+              {displayTime}
+            </DropdownOption>
+          );
+        })}
       </AnimatedDropdownOptions>
     </DropdownContainer>
   );

diff --git a/frontend/src/Presentation/pages/RegisterPage.tsx b/frontend/src/Presentation/pages/RegisterPage.tsx
@@ -94,7 +94,7 @@ const RegisterPage = () => {
   );
 
   const invalidDates: string[] = useInvalidDates()?.map((date) =>
-    format(date, "M/d")
+    format(date, "y/M/d")
   );
 
   const handleFocus = (sectionName: string) => {
@@ -145,9 +145,10 @@ const RegisterPage = () => {
         const response = await axiosGetPresentationAbleDates();
         const availableDates = response.data.results;
         availableDates.sort();
+        console.log(availableDates);
         const formattedAvailableDates = availableDates.map(
           (dateTime: string) => {
-            return format(new Date(dateTime), "M/d");
+            return format(new Date(dateTime), "y/M/d");
           }
         );
         setAvailableDates(formattedAvailableDates);