feat(TS-31): 날짜 설정 모드 추가

src/components/CourseRegister/InfoContent.tsx

@@ -0,0 +1,152 @@
+import {styled} from 'styled-components';
+import {WarningWrap} from '../LectureList/Filters';
+
+function InfoContent() {
+  return (
+    <>
+      <Container>
+        <SubTitle>2025-1학기 수강신청 연습 안내</SubTitle> <br />
+        <p>
+          <span>1. 시간표 업데이트 일정:</span> 1.24.(금)
+        </p>
+        <p>
+          <span>2. 수강신청 주요일정</span>
+        </p>
+        <Table>
+          <thead>
+            <tr>
+              <th>구분</th>
+              <th>대상</th>
+              <th>일정</th>
+              <th>비고</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td rowSpan={5}>수강신청</td>
+              <td>
+                4학년(7~8학기 등록 예정자), <br /> 건축학 5학년, 수업연한초과자
+              </td>
+              <td>2.17.(월) 10:00 ~ 17:00</td>
+              <td rowSpan={4}>
+                소속학부(과)의 주·복수·부
+                <br />
+                전공과목과 교양과목만 수강신청 <br />
+                가능
+              </td>
+            </tr>
+            <tr>
+              <td>3학년(5~6학기 등록 예정자)</td>
+              <td>2.18.(화) 10:00 ~ 17:00</td>
+            </tr>
+            <tr>
+              <td>2학년(3~4학기 등록 예정자)</td>
+              <td>2.19.(수) 10:00 ~ 17:00</td>
+            </tr>
+            <tr>
+              <td>1학년(1~2학기 등록 예정자)</td>
+              <td>2.20.(목) 10:00 ~ 17:00</td>
+            </tr>
+            <tr>
+              <td>전학년</td>
+              <td>2.21.(금) 10:00 ~ 17:00</td>
+              <td>
+                다른 학과 전공과목도 수강신청
+                <br /> 가능
+              </td>
+            </tr>
+            <tr>
+              <td>
+                수강신청과목 <br /> 확인 및 변경
+              </td>
+              <td>전학년</td>
+              <td>2. 25.(화) ~ 2.28.(금) 10:00 ~ 17:00</td>
+              <td>
+                다른 학과 전공과목도 수강신청
+                <br /> 가능
+              </td>
+            </tr>
+          </tbody>
+        </Table>
+        <br />
+        <p>
+          <span>3. 수강신청 연습 방법 &nbsp; ※날짜 설정 모드※</span>
+        </p>
+        <p>본인의 학과를 선택하고, 수강신청 날짜를 지정합니다.</p>
+        <p>
+          - 본인 학년 선택 -&gt; 본인 소속학부(과)의 주·복수·부전공과목과
+          교양과목만 수강신청 가능
+        </p>
+        <p>- 전학년 선택 -&gt; 다른 학과 전공과목도 수강신청가능</p>
+        <p>
+          학과를 선택하지 않을 경우, 학과 제한이 없는 전학년 수강신청 날짜로
+          자동 설정됩니다.
+        </p>
+        <br />
+        <WarningWrap>
+          <p>
+            ※ 본 수강신청 연습 사이트는 학사정보시스템의 실제 수강신청과 다를 수
+            있습니다. 수강 대상 및 유의사항을 반드시 확인하시고, 수강편람을
+            숙지하여 주시기 바랍니다.
+          </p>
+        </WarningWrap>
+      </Container>
+    </>
+  );
+}
+
+const Container = styled.div`
+  border: 0.1rem solid #714656;
+  border-radius: 2px;
+  padding: 1.5rem 1.5rem;
+  margin-bottom: 2rem;
+
+  > p {
+    font-weight: normal;
+    font-size: 1.4rem;
+    margin-bottom: 8px;
+    line-height: 1.6;
+    letter-spacing: 0.01em;
+
+    > span {
+      font-weight: bold;
+      font-size: 1.4rem;
+      color: #333;
+    }
+  }
+`;
+
+const SubTitle = styled.div`
+  ${props => props.theme.texts.subtitle};
+  font-size: 1.6rem;
+  margin-bottom: 15px;
+`;
+
+const Table = styled.table`
+  width: 90%;
+  height: auto;
+  max-width: 70rem;
+  border-collapse: collapse;
+  border: 1.6px solid #000;
+
+  th {
+    ${props => props.theme.texts.tableTitle};
+    background-color: #e5e5e5;
+    border: 1px solid #c3c3c3;
+    padding: 0.8rem;
+    text-align: center;
+  }
+
+  td {
+    ${props => props.theme.texts.content};
+    border: 1px solid #c3c3c3;
+    padding: 0.8rem;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 1.4;
+    letter-spacing: 0.01em;
+    word-break: break-all;
+  }
+`;
+
+export default InfoContent;

src/components/CourseRegister/RegisterInfo.tsx

@@ -0,0 +1,122 @@
+import {TableTitle, TableTitleWrap} from '../LectureList';
+import styled from 'styled-components';
+import SelectBox from '../common/SelectBox';
+import {major} from '@/assets/data/filter';
+import {useAppSelector} from '@/store/hooks';
+import {useDispatch} from 'react-redux';
+import {setSelectedDate, setUserMajor} from '@/store/modules/dateModeSlice';
+import InfoContent from './InfoContent';
+
+interface RegisterInfoProps {
+  onClickNext: () => void;
+}
+
+function RegisterInfo({onClickNext}: RegisterInfoProps) {
+  const userMajor = useAppSelector(state => state.dateMode.userMajor);
+  const dispatch = useDispatch();
+
+  const handleSelectMajor = (value: string | undefined) => {
+    dispatch(setUserMajor(value!.split('【')[0]));
+    if (value === '-전체-') {
+      dispatch(setSelectedDate('전학년 (학과 제한 없음)'));
+    }
+  };
+
+  const handleSelectDate = (value: string | undefined) => {
+    dispatch(setSelectedDate(value!));
+  };
+
+  return (
+    <>
+      <TableTitleWrap>
+        <TableTitle>안내문</TableTitle>
+      </TableTitleWrap>
+      <InfoContent />
+      <Container>
+        <SelectArea>
+          <SelectBoxWrap>
+            <SelectWrap>
+              <span>학과전공</span>
+              <SelectBox
+                options={major}
+                sizes='xl'
+                onSelect={value => handleSelectMajor(value)}
+              />
+            </SelectWrap>
+            <SelectWrap>
+              <span>수강신청 날짜</span>
+              <SelectBox
+                options={[
+                  {id: 0, value: '전학년 (학과 제한 없음)'},
+                  {id: 1, value: '본인학년 (학과 제한 있음)'},
+                ]}
+                disabled={userMajor === '-전체-' ? true : false}
+                sizes='m'
+                onSelect={value => handleSelectDate(value)}
+                restricted={userMajor === '-전체-'}
+              />
+            </SelectWrap>
+          </SelectBoxWrap>
+          <ButtonWrap onClick={onClickNext}>저장/NEXT</ButtonWrap>
+        </SelectArea>
+      </Container>
+    </>
+  );
+}
+
+const Container = styled.div`
+  border: 0.1rem solid #714656;
+  border-radius: 2px;
+  padding: 1.5rem 1.5rem;
+  margin-bottom: 2rem;
+`;
+
+export const SelectArea = styled.div`
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.7rem 3rem;
+
+  @media ${props => props.theme.device.mobile} {
+    flex-wrap: wrap;
+  }
+`;
+
+export const SelectBoxWrap = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem 3rem;
+`;
+
+export const SelectWrap = styled.div`
+  ${props => props.theme.texts.tableTitle};
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem 0;
+  align-items: center;
+
+  > span {
+    margin-right: 1rem;
+    text-align: right;
+    min-width: 7rem;
+    flex-basis: 7rem;
+  }
+`;
+
+const ButtonWrap = styled.button`
+  ${props => props.theme.texts.content};
+  background-color: ${props => props.theme.colors.primary};
+  color: ${props => props.theme.colors.white};
+  min-width: 8rem;
+  height: 2.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.8rem;
+
+  &:hover {
+    filter: grayscale(15%);
+  }
+`;
+
+export default RegisterInfo;

src/components/CourseRegister/index.tsx

@@ -7,14 +7,18 @@ import RegisteredList from './RegisteredList';
 import {useDispatch} from 'react-redux';
 import {
   setCourseName,
+  setCuriTypeCdNm,
   setModalName,
+  setSchDeptAlias,
   setScheduleId,
 } from '@/store/modules/modalSlice';
 import StartButton from '@components/CourseRegister/StartButton.tsx';
 import {getCourseList, getRegisterdList, getWishlist} from '@/apis/api/course';
 import {useAppSelector} from '@/store/hooks';
 import {openModalHandler} from '../common/Modal/handlers/handler';
 import {setEndCount} from '@/store/modules/courseRegisteredSlice';
+import RegisterInfo from './RegisterInfo';
+import {setIsConfirm} from '@/store/modules/dateModeSlice';
 
 const colData = [
   {name: 'action', value: '신청', initialWidth: 50, enableFilters: false},
@@ -44,6 +48,7 @@ function CourseRegister() {
 
   const dispatch = useDispatch();
   const studentId = useAppSelector(state => state.userInfo.username);
+  const isConfirm = useAppSelector(state => state.dateMode.isConfirm);
 
   useEffect(() => {
     dispatch(setEndCount(false));
@@ -95,32 +100,42 @@ function CourseRegister() {
     _action: string,
     scheduleId: number | undefined,
     curiNm: string | undefined,
+    schDeptAlias: string | undefined,
+    curiTypeCdNm: string | undefined,
   ) => {
-    if (scheduleId && curiNm) {
+    if (scheduleId && curiNm && schDeptAlias && curiTypeCdNm) {
       dispatch(setScheduleId(scheduleId));
       dispatch(setCourseName(curiNm));
       dispatch(setModalName('macro'));
+      dispatch(setSchDeptAlias(schDeptAlias));
+      dispatch(setCuriTypeCdNm(curiTypeCdNm));
     }
   };
 
   return (
     <>
-      <StartButton onClick={handleStartButtonClick} />
-      <RegisterFilters
-        onSearch={handleSearch}
-        isRegistrationStarted={isRegistrationStarted}
-      />
-      <TableTitleWrap>
-        <TableTitle>수강대상교과목</TableTitle>
-      </TableTitleWrap>
-      <Table
-        colData={colData}
-        data={list}
-        width='100%'
-        height='35rem'
-        onAction={handleAction}
-      />
-      <RegisteredList list={registeredList} refreshAll={refreshAll} />
+      {!isConfirm ? (
+        <RegisterInfo onClickNext={() => dispatch(setIsConfirm())} />
+      ) : (
+        <>
+          <StartButton onClick={handleStartButtonClick} />
+          <RegisterFilters
+            onSearch={handleSearch}
+            isRegistrationStarted={isRegistrationStarted}
+          />
+          <TableTitleWrap>
+            <TableTitle>수강대상교과목</TableTitle>
+          </TableTitleWrap>
+          <Table
+            colData={colData}
+            data={list}
+            width='100%'
+            height='35rem'
+            onAction={handleAction}
+          />
+          <RegisteredList list={registeredList} refreshAll={refreshAll} />
+        </>
+      )}
     </>
   );
 }

src/components/LectureList/Filters.tsx

@@ -119,7 +119,7 @@ function Filters({onSearch}: FiltersProps) {
   );
 }
 
-const WarningWrap = styled.div`
+export const WarningWrap = styled.div`
   ${props => props.theme.texts.warning};
   color: #c30e2e;
   margin-bottom: -1.5rem;

src/components/LoginForm/FormInput.tsx

@@ -24,7 +24,6 @@ const InputWrap = styled.input`
   height: 4rem;
   width: 38rem;
   font-size: 1.9rem;
-  padding: 0 1rem;
 `;
 
 export default FormInput;

src/components/TabMenu/Tab.tsx

@@ -2,6 +2,7 @@ import styled, {css} from 'styled-components';
 import close from '@assets/img/close-line-red.png';
 import {useAppDispatch, useAppSelector} from '@/store/hooks';
 import {delTab, setFocused} from '@/store/modules/tabSlice';
+import {resetDateMode} from '@/store/modules/dateModeSlice';
 
 interface TabProps {
   id: number;
@@ -23,6 +24,9 @@ function Tab({id, label, isActive, onClick}: TabProps) {
       dispatch(setFocused(tabs[idx - 1].id));
     }
     dispatch(delTab(id));
+    if (label === '수강신청') {
+      dispatch(resetDateMode());
+    }
   };
 
   return (