[feature] 모집기간 달력 UX 개선: 시간 선택 추가, 날짜 로직 변경 및 시간대 오류 수정

frontend/src/pages/AdminPage/tabs/RecruitEditTab/RecruitEditTab.tsx

@@ -21,15 +21,16 @@ const RecruitEditTab = () => {
   const [description, setDescription] = useState('');
 
   const queryClient = useQueryClient();
-
   useEffect(() => {
     if (!clubDetail) return;
 
     const { recruitmentStart: initialStart, recruitmentEnd: initialEnd } =
       parseRecruitmentPeriod(clubDetail.recruitmentPeriod ?? '');
 
-    setRecruitmentStart((prev) => prev ?? initialStart);
-    setRecruitmentEnd((prev) => prev ?? initialEnd);
+    const now = new Date();
+
+    setRecruitmentStart((prev) => prev ?? initialStart ?? now);
+    setRecruitmentEnd((prev) => prev ?? initialEnd ?? now);
     setRecruitmentTarget((prev) => prev || clubDetail.recruitmentTarget || '');
     setDescription((prev) => prev || clubDetail.description || '');
   }, [clubDetail]);
@@ -43,7 +44,7 @@ const RecruitEditTab = () => {
       recruitmentEnd: recruitmentEnd?.toISOString(),
       recruitmentTarget: recruitmentTarget,
       description: description,
-      externalApplicationUrl: clubDetail.externalApplicationUrl ?? ''
+      externalApplicationUrl: clubDetail.externalApplicationUrl ?? '',
     };
     updateClubDescription(updatedData, {
       onSuccess: () => {

frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.styles.ts

@@ -1,10 +1,27 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import 'react-datepicker/dist/react-datepicker.css';
 
-const primaryColor = 'rgba(255, 84, 20, 0.8)';
-const whiteColor = '#FFFFFF';
-const grayColor = 'rgba(0, 0, 0, 0.5)';
-const inputBgColor = 'rgba(0, 0, 0, 0.05)';
+const primary = 'rgba(255, 84, 20, 0.8)';
+const primaryHover = 'rgba(255, 84, 20, 0.95)';
+const white = '#fff';
+const gray = 'rgba(0,0,0,0.5)';
+const inputBg = 'rgba(0,0,0,0.05)';
+
+/* 재사용 블록 */
+const selected = css`
+  background-color: ${primary} !important;
+  color: ${white} !important;
+`;
+const selectedHover = css`
+  background-color: ${primaryHover};
+  color: ${white};
+`;
+const cellBase = css`
+  border-radius: 6px;
+  transition:
+    background-color 0.08s ease,
+    color 0.08s ease;
+`;
 
 export const Tidle = styled.p`
   font-size: 1.375rem;
@@ -15,58 +32,48 @@ export const DatepickerContainer = styled.div`
   gap: 8px;
   align-items: center;
 
-  /* 📌 공통 스타일 */
+  /* 달력 루트 */
   .react-datepicker {
     border: none;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    display: inline-flex;
+    align-items: stretch;
+    width: auto;
   }
 
-  /* 📌 선택된 날짜 스타일 */
-  .react-datepicker__day--in-selecting-range,
-  .react-datepicker__day--in-range,
-  .react-datepicker__month-text--selected,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__month-text--in-range,
-  .react-datepicker__quarter-text--selected,
-  .react-datepicker__quarter-text--in-selecting-range,
-  .react-datepicker__quarter-text--in-range,
-  .react-datepicker__year-text--selected,
-  .react-datepicker__year-text--in-selecting-range,
-  .react-datepicker__year-text--in-range {
-    background-color: ${primaryColor};
-    color: ${whiteColor};
+  /* 달력/시간 레이아웃 */
+  .react-datepicker__month-container {
+    flex: 1 1 auto;
   }
-
-  /* 📌 달력 내부 스타일 */
-  .react-datepicker__month {
-    padding: 0 20px;
+  .react-datepicker__time-container {
+    flex: 0 0 120px;
+    border-left: 1px solid rgba(0, 0, 0, 0.08);
+    background: ${white};
   }
 
+  /* 헤더 영역 */
   .react-datepicker__header {
-    padding: 0 0 10px 0;
+    padding: 0 0 10px;
     border: none;
-    background-color: ${whiteColor};
+    background: ${white};
   }
-
-  /* 📌 커스텀 헤더 스타일 */
   .react-datepicker__header-custom {
-    background-color: ${primaryColor};
+    background: ${primary};
     padding: 10px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
   }
-
   .react-datepicker__current-month {
-    color: ${whiteColor};
+    color: ${white};
     font-weight: 600;
     font-size: 18px;
   }
 
-  /* 📌 이전/다음 버튼 스타일 */
+  /* 네비게이션 */
   .react-datepicker__navigation--custom {
     position: absolute;
     top: 50%;
@@ -75,64 +82,138 @@ export const DatepickerContainer = styled.div`
     border: none;
     cursor: pointer;
     font-size: 25px;
-    color: ${whiteColor};
+    color: ${white};
   }
-
   .react-datepicker__navigation--previous--custom {
     left: 10px;
   }
-
   .react-datepicker__navigation--next--custom {
     right: 10px;
   }
 
-  /* 📌 불필요한 요소 숨김 */
+  /* 잡다한 것 */
   .react-datepicker__triangle {
     display: none;
   }
-
   .react-datepicker__tab-loop {
     position: absolute;
   }
 
-  /* 📌 날짜 및 요일 스타일 */
+  /* 요일/날짜 정렬 */
+  .react-datepicker__month {
+    padding: 0 20px;
+  }
   .react-datepicker__week {
     display: flex;
     gap: 12px;
-    padding: 0 0 12px 0;
+    padding-bottom: 12px;
   }
-
   .react-datepicker__day-names {
     display: flex;
     justify-content: center;
-    padding: 10px 0 0 0;
+    padding-top: 10px;
     gap: 12px;
   }
-
   .react-datepicker__day-name {
     font-weight: 600;
     font-size: 14px;
   }
 
-  /* 📌 인풋 필드 스타일 */
+  /* 입력 필드 */
   .react-datepicker__input-container input {
-    width: 130px;
+    width: 270px;
     height: 45px;
     border: none;
     border-radius: 6px;
-    color: ${grayColor};
-    background-color: ${inputBgColor};
+    color: ${gray};
+    background: ${inputBg};
     font-size: 1.125rem;
     padding: 12px 20px;
     cursor: pointer;
     transition:
-      background-color 0.1s ease-in-out,
-      color 0.1s ease-in-out;
-
+      background-color 0.1s ease,
+      color 0.1s ease;
     &:focus {
       outline: none;
-      color: ${whiteColor};
-      background-color: ${primaryColor};
+      ${selected};
+    }
+  }
+
+  /*  날짜 셀 스타일  */
+  .react-datepicker__day {
+    ${cellBase};
+  }
+
+  /* 기본 hover */
+  .react-datepicker__day:hover {
+    background: rgba(255, 84, 20, 0.12);
+  }
+
+  /* 선택된 날짜만 */
+  .react-datepicker__day--selected {
+    ${selected};
+  }
+
+  /* 선택된 날짜 hover */
+  .react-datepicker__day--selected:hover {
+    ${selectedHover};
+  }
+
+  .react-datepicker__day--keyboard-selected {
+    background: transparent;
+    color: inherit;
+  }
+
+  /* 비활성 날짜 */
+  .react-datepicker__day--disabled,
+  .react-datepicker__day--outside-month {
+    opacity: 0.45;
+    cursor: default;
+  }
+  .react-datepicker__day--disabled:hover,
+  .react-datepicker__day--outside-month:hover {
+    background: transparent;
+  }
+
+  /* 시간 패널 */
+  .react-datepicker__time-container .react-datepicker__header {
+    background: ${white};
+    padding: 10px 0;
+  }
+  .react-datepicker-time__header {
+    font-weight: 700;
+    font-size: 16px;
+    color: #111;
+  }
+
+  .react-datepicker__time {
+    background: ${white};
+  }
+  .react-datepicker__time-box {
+    width: 100%;
+  }
+  .react-datepicker__time-list {
+    padding: 4px 0;
+  }
+
+  .react-datepicker__time-list-item {
+    ${cellBase};
+    height: 40px;
+    line-height: 24px;
+    margin: 0;
+    padding: 8px 12px;
+    cursor: pointer;
+
+    &:hover {
+      background: rgba(255, 84, 20, 0.12);
+    }
+
+    &--selected {
+      ${selected};
+
+      &:hover {
+        ${selectedHover};
+      }
     }
   }
 `;

frontend/src/pages/AdminPage/tabs/RecruitEditTab/components/Calendar/Calendar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { ko } from 'date-fns/locale';
 import 'react-datepicker/dist/react-datepicker.css';
 import DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';
@@ -23,7 +23,8 @@ const CustomHeader = ({
       onClick={decreaseMonth}
       disabled={prevMonthButtonDisabled}
       className='react-datepicker__navigation--custom react-datepicker__navigation--previous--custom'
-      onMouseDown={(e) => e.preventDefault()}>
+      onMouseDown={(e) => e.preventDefault()}
+    >
       {'<'}
     </button>
     <span className='react-datepicker__current-month'>
@@ -33,7 +34,8 @@ const CustomHeader = ({
       onClick={increaseMonth}
       disabled={nextMonthButtonDisabled}
       className='react-datepicker__navigation--custom react-datepicker__navigation--next--custom'
-      onMouseDown={(e) => e.preventDefault()}>
+      onMouseDown={(e) => e.preventDefault()}
+    >
       {'>'}
     </button>
   </div>
@@ -45,49 +47,54 @@ const Calendar = ({
   onChangeStart,
   onChangeEnd,
 }: CalendarProps) => {
-  const selectedStart = useMemo(() => recruitmentStart, [recruitmentStart]);
-  const selectedEnd = useMemo(() => recruitmentEnd, [recruitmentEnd]);
-
   const handleStartChange = useCallback(
     (date: Date | null) => {
       onChangeStart(date);
+      if (recruitmentEnd && date && date > recruitmentEnd) {
+        onChangeEnd(date);
+      }
     },
-    [onChangeStart],
+    [onChangeStart, onChangeEnd, recruitmentEnd],
   );
 
   const handleEndChange = useCallback(
     (date: Date | null) => {
       onChangeEnd(date);
+      if (recruitmentStart && date && date < recruitmentStart) {
+        onChangeStart(date);
+      }
     },
-    [onChangeEnd],
+    [onChangeStart, onChangeEnd, recruitmentStart],
   );
 
   return (
     <Styled.DatepickerContainer>
       <DatePicker
         locale={ko}
-        selected={selectedStart}
+        selected={recruitmentStart}
         onChange={handleStartChange}
-        selectsStart
-        startDate={selectedStart}
-        endDate={selectedEnd}
-        dateFormat='yyyy.MM.dd'
-        maxDate={selectedEnd ?? undefined}
+        showTimeSelect
+        timeIntervals={30}
+        timeCaption='시간'
+        dateFormat='yyyy년 MM월 dd일 (eee) HH:mm'
+        shouldCloseOnSelect={false}
         popperPlacement='bottom-start'
         renderCustomHeader={(props) => <CustomHeader {...props} />}
+        onChangeRaw={(e: any) => e.preventDefault()}
       />
       <Styled.Tidle>~</Styled.Tidle>
       <DatePicker
         locale={ko}
-        selected={selectedEnd}
+        selected={recruitmentEnd}
         onChange={handleEndChange}
-        selectsEnd
-        startDate={selectedStart}
-        endDate={selectedEnd}
-        minDate={selectedStart ?? undefined}
-        dateFormat='yyyy.MM.dd'
+        showTimeSelect
+        timeIntervals={30}
+        timeCaption='시간'
+        dateFormat='yyyy년 MM월 dd일 (eee) HH:mm'
+        shouldCloseOnSelect={false}
         popperPlacement='bottom-start'
         renderCustomHeader={(props) => <CustomHeader {...props} />}
+        onChangeRaw={(e: any) => e.preventDefault()}
       />
     </Styled.DatepickerContainer>
   );