Merge pull request #1719 from innovationacademy-kr/fe/dev/fix-present…

…ation-register#1718 [FE] FIX: 수지회 신청 날짜 형식 수정 #1718
innovationacademy-kr · Dec 26, 2024 · c6afa15 · c6afa15
2 parents 2c580f1 + 5c949b1
commit c6afa15
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 50 deletions.
diff --git a/backend/database/cabi_local.sql b/backend/database/cabi_local.sql
@@ -809,12 +809,22 @@ LOCK TABLES `presentation` WRITE;
 /*!40000 ALTER TABLE `presentation`
     DISABLE KEYS */;
 INSERT INTO `presentation`
-VALUES (1, 'JOB', '2024-10-09 14:00:00', 'DUMMY', 'FIRST', 'EXPECTED', 'HALF', 'DUMMY', 'DUMMY', NULL),
-       (2, NULL, '2024-10-23 14:00:00', 'DUMMY', 'FIRST', 'CANCEL', 'HALF', 'DUMMY', 'DUMMY', NULL),
-       (3, NULL, '2024-11-05 14:00:00', 'DUMMY', 'FIRST', 'EXPECTED', 'HALF', 'DUMMY', 'DUMMY', NULL),
-       (4, 'JOB', '2024-11-19 14:00:00', 'DUMMY', 'FIRST', 'EXPECTED', 'HALF', 'DUMMY', 'DUMMY', NULL),
-       (5, NULL, '2024-12-11 14:00:00', 'DUMMY', 'FIRST', 'EXPECTED', 'HALF', 'DUMMY', 'DUMMY', NULL),
-       (6, 'JOB', '2024-12-25 14:00:00', 'DUMMY', 'FIRST', 'EXPECTED', 'HALF', 'DUMMY', 'DUMMY', NULL);
+VALUES (1, 'JOB', '2024-10-09 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (2, NULL, '2024-10-23 14:00:00', 'dummy', 'BASEMENT', 'CANCEL', 'HALF', 'dummy', 'dummy', NULL),
+       (3, NULL, '2024-11-05 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (4, 'JOB', '2024-11-19 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (5, NULL, '2024-12-11 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (6, 'JOB', '2024-12-25 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (7, NULL, '2025-01-08 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (8, NULL, '2025-01-22 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (9, NULL, '2025-02-12 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (10, NULL, '2025-02-26 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (11, NULL, '2025-03-12 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL),
+       (12, NULL, '2025-03-26 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL);
+       (13, NULL, '2025-04-09 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL);
+       (14, NULL, '2025-04-23 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL);
+       (15, NULL, '2025-05-07 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL);
+       (16, NULL, '2025-05-21 14:00:00', 'dummy', 'BASEMENT', 'EXPECTED', 'HALF', 'dummy', 'dummy', NULL);
 /*!40000 ALTER TABLE `presentation`
     ENABLE KEYS */;
 UNLOCK TABLES;

diff --git a/config b/config
diff --git a/frontend/src/Presentation/components/Modals/EditStatusModal/EditStatusModal.tsx b/frontend/src/Presentation/components/Modals/EditStatusModal/EditStatusModal.tsx
@@ -66,7 +66,7 @@ const EditStatusModal = ({ list, closeModal }: EditStatusModalProps) => {
   const [presentationStatus, setPresentationStatus] =
     useState<PresentationStatusType>(PresentationStatusType.EXPECTED);
   const [location, setLocation] = useState<PresentationLocation>(
-    PresentationLocation.THIRD
+    PresentationLocation.BASEMENT
   );
   const [isStatusDropdownOpen, setIsStatusDropdownOpen] = useState(false);
   const [isDatesDropdownOpen, setIsDatesDropdownOpen] = useState(false);

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(

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,
@@ -68,20 +68,23 @@ const DropdownDateMenu = ({
           rotated={dropdownState.isFocused}
         />
       </RegisterTimeInputStyled>
-      <AnimatedDropdownOptions
+      <AnimatedDropdownOptionsStyled
         isVisible={dropdownState.isVisible}
         clickCount={clickCount}
       >
-        {data.map((time) => (
-          <DropdownOption
-            key={time}
-            onClick={() => handleOptionSelect(time)}
-            invalid={invalidDates?.includes(time)}
-          >
-            {time}
-          </DropdownOption>
-        ))}
-      </AnimatedDropdownOptions>
+        {data.map((time, index) => {
+          const displayTime = time.split("/").slice(1).join("/");
+          return (
+            <DropdownOption
+              key={index}
+              onClick={() => handleOptionSelect(time, displayTime)}
+              invalid={invalidDates?.includes(time)}
+            >
+              {displayTime}
+            </DropdownOption>
+          );
+        })}
+      </AnimatedDropdownOptionsStyled>
     </DropdownContainer>
   );
 };
@@ -116,7 +119,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
-const AnimatedDropdownOptions = styled.ul<{
+const AnimatedDropdownOptionsStyled = styled.ul<{
   isVisible: boolean;
   clickCount: number;
 }>`

diff --git a/frontend/src/Presentation/components/Register/DropdownTimeMenu.tsx b/frontend/src/Presentation/components/Register/DropdownTimeMenu.tsx
@@ -60,13 +60,13 @@ const DropdownTimeMenu = ({
         hasSelectedOption={selectedOption !== ""}
       >
         {selectedOption || "시간을 선택해주세요"}
-        <DropdownIcon
+        <DropdownIconStyled
           src={chevronIcon}
           alt="Dropdown Icon"
           rotated={dropdownState.isFocused}
         />{" "}
       </RegisterTimeInputStyled>
-      <AnimatedDropdownOptions
+      <AnimatedDropdownOptionsStyled
         isVisible={dropdownState.isVisible}
         clickCount={clickCount}
       >
@@ -75,15 +75,15 @@ const DropdownTimeMenu = ({
           .map((timeKey) => {
             const time = timeKey as PresentationTimeKey;
             return (
-              <DropdownOption
+              <DropdownOptionStyled
                 key={time}
                 onClick={() => handleOptionSelect(time)}
               >
                 {time}
-              </DropdownOption>
+              </DropdownOptionStyled>
             );
           })}
-      </AnimatedDropdownOptions>
+      </AnimatedDropdownOptionsStyled>
     </DropdownContainer>
   );
 };
@@ -118,7 +118,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
-const AnimatedDropdownOptions = styled.ul<{
+const AnimatedDropdownOptionsStyled = styled.ul<{
   isVisible: boolean;
   clickCount: number;
 }>`
@@ -152,12 +152,7 @@ const AnimatedDropdownOptions = styled.ul<{
   }
 `;
 
-const DropdownOptions = styled.ul`
-  list-style-type: none;
-  padding: 0;
-`;
-
-const DropdownOption = styled.li`
+const DropdownOptionStyled = styled.li`
   font-size: 0.875rem;
   padding: 10px;
   cursor: pointer;
@@ -194,7 +189,7 @@ const RegisterTimeInputStyled = styled.div<{
       : "var(--normal-text-color)"};
 `;
 
-const DropdownIcon = styled.img<{ rotated: boolean }>`
+const DropdownIconStyled = styled.img<{ rotated: boolean }>`
   width: 14px;
   height: 8px;
   transform: ${(props) => (props.rotated ? "rotate(180deg)" : "rotate(0deg)")};

diff --git a/frontend/src/Presentation/pages/DropdownMenu.tsx b/frontend/src/Presentation/pages/DropdownMenu.tsx
@@ -48,13 +48,16 @@ const DropdownMenu = () => {
         {selectedOption || "시간을 선택해주세요"}
       </RegisterTimeInputStyled>
       {isVisible && (
-        <DropdownOptions>
+        <DropdownOptionsStyled>
           {Object.values(PresentationTime).map((time) => (
-            <DropdownOption key={time} onClick={() => handleOptionSelect(time)}>
+            <DropdownOptionStyled
+              key={time}
+              onClick={() => handleOptionSelect(time)}
+            >
               {time}
-            </DropdownOption>
+            </DropdownOptionStyled>
           ))}
-        </DropdownOptions>
+        </DropdownOptionsStyled>
       )}
     </DropdownContainer>
   );
@@ -64,7 +67,7 @@ const DropdownContainer = styled.div`
   position: relative;
 `;
 
-const DropdownOptions = styled.ul`
+const DropdownOptionsStyled = styled.ul`
   position: absolute;
   top: 52px;
   left: 0;
@@ -82,7 +85,7 @@ const DropdownOptions = styled.ul`
   }
 `;
 
-const DropdownOption = styled.li`
+const DropdownOptionStyled = styled.li`
   font-size: 0.875rem;
   color: var(--gray-line-btn-color);
   padding: 10px;

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) => {
@@ -147,7 +147,7 @@ const RegisterPage = () => {
         availableDates.sort();
         const formattedAvailableDates = availableDates.map(
           (dateTime: string) => {
-            return format(new Date(dateTime), "M/d");
+            return format(new Date(dateTime), "y/M/d");
           }
         );
         setAvailableDates(formattedAvailableDates);