refactor: 수강신청 시작 버튼 로직 리팩토링 (#59)

* refactor: 수강신청 시작 과정 리팩토링 - 시작 버튼을 누르면 바로 관심과목 검색이 되고 대기 모달이 뜨는 게 아니라 - 시작 버튼을 누르고 첫 검색 버튼을 누를 때만 대기 모달이 뜨도록 변경했습니다. * chore: 시작버튼 안내 문구 수정
tutorial-sejong · Aug 4, 2024 · bcf4f34 · bcf4f34
1 parent e1735a1
commit bcf4f34
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 47 deletions.
diff --git a/src/components/CourseRegister/StartButton.tsx b/src/components/CourseRegister/StartButton.tsx
@@ -1,39 +1,21 @@
 import styled from 'styled-components';
-import {openModalHandler} from '@components/common/Modal/handlers/handler.tsx';
-import {deleteAllRegistrations, getWishlist} from '@apis/api/course.ts';
-import {useAppSelector} from '@store/hooks';
-import {useDispatch} from 'react-redux';
-import {CourseTypes} from '@/assets/types/tableType';
+import {deleteAllRegistrations} from '@apis/api/course.ts';
 
 interface StartBtnProps {
-  setList: React.Dispatch<React.SetStateAction<CourseTypes[]>>;
-  setStartVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  refreshAll: () => Promise<void>;
+  onClick: () => void;
 }
 
-function StartButton({setList, setStartVisible, refreshAll}: StartBtnProps) {
-  const studentId = useAppSelector(state => state.userInfo.username);
-
-  const dispatch = useDispatch();
-
-  const searchLecture = async () => {
-    const res = await getWishlist(studentId);
-    setList(res);
-  };
-
+function StartButton({onClick}: StartBtnProps) {
   const handleClick = async () => {
     if (!confirm('수강신청 연습 시작하시겠습니까?')) return;
 
     await deleteAllRegistrations();
-    openModalHandler(dispatch, 'waiting');
-    setStartVisible(false);
-    await searchLecture();
-    await refreshAll();
+    onClick();
   };
 
   return (
     <Container>
-      <p>시작 버튼을 누르면, 수강 신청이 시작됩니다.</p>
+      <p>시작 버튼을 누르면, 수강 신청이 시작됩니다. 연습이 끝나면 탭을 변경하고 다시 접속해주세요.</p>
       <ButtonWrap onClick={handleClick}>시작</ButtonWrap>
     </Container>
   );

diff --git a/src/components/CourseRegister/index.tsx b/src/components/CourseRegister/index.tsx
@@ -1,29 +1,30 @@
-import {useCallback, useState} from 'react';
-import {CourseTypes} from '@/assets/types/tableType';
+import { useCallback, useState } from 'react';
+import { CourseTypes } from '@/assets/types/tableType';
 import RegisterFilters from './RegisterFilters';
 import Table from '../common/Table';
-import {TableTitle, TableTitleWrap} from '../LectureList';
+import { TableTitle, TableTitleWrap } from '../LectureList';
 import RegisteredList from './RegisteredList';
-import {useDispatch} from 'react-redux';
-import {setCourseName, setModalName, setScheduleId} from '@store/modalSlice.ts';
+import { useDispatch } from 'react-redux';
+import { setCourseName, setModalName, setScheduleId } from '@store/modalSlice.ts';
 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';
 
 const colData = [
-  {name: 'action', value: '신청', initialWidth: 30, enableFilters: false},
-  {name: 'curiNo', value: '학수번호', initialWidth: 92},
-  {name: 'classNo', value: '분반', initialWidth: 58},
-  {name: 'schDeptAlias', value: '개설학과', initialWidth: 167},
-  {name: 'curiNm', value: '교과목명', initialWidth: 232},
-  {name: 'curiLangNm', value: '강의언어', initialWidth: 73},
-  {name: 'tmNum', value: '학점/이론/실습', initialWidth: 134},
-  {name: 'curiTypeCdNm', value: '이수구분'},
-  {name: 'studentYear', value: '학년 (학기)'},
-  {name: 'lesnTime', value: '요일 및 강의시간', initialWidth: 130},
-  {name: 'lesnEmp', value: '교수명'},
-  {name: 'lesnRoom', value: '강의실', initialWidth: 114},
-  {name: 'remark', value: '수강대상및유의사항', initialWidth: 230},
+  { name: 'action', value: '신청', initialWidth: 30, enableFilters: false },
+  { name: 'curiNo', value: '학수번호', initialWidth: 92 },
+  { name: 'classNo', value: '분반', initialWidth: 58 },
+  { name: 'schDeptAlias', value: '개설학과', initialWidth: 167 },
+  { name: 'curiNm', value: '교과목명', initialWidth: 232 },
+  { name: 'curiLangNm', value: '강의언어', initialWidth: 73 },
+  { name: 'tmNum', value: '학점/이론/실습', initialWidth: 134 },
+  { name: 'curiTypeCdNm', value: '이수구분' },
+  { name: 'studentYear', value: '학년 (학기)' },
+  { name: 'lesnTime', value: '요일 및 강의시간', initialWidth: 130 },
+  { name: 'lesnEmp', value: '교수명' },
+  { name: 'lesnRoom', value: '강의실', initialWidth: 114 },
+  { name: 'remark', value: '수강대상및유의사항', initialWidth: 230 },
 ];
 
 function CourseRegister() {
@@ -32,6 +33,8 @@ function CourseRegister() {
   const [startVisible, setStartVisible] = useState<boolean>(true);
   const [currentFilter, setCurrentFilter] = useState<CourseTypes>({});
   const [currentSearchOption, setCurrentSearchOption] = useState<string>('관심과목');
+  const [isRegistrationStarted, setIsRegistrationStarted] = useState<boolean>(false);
+  const [isFirstSearch, setIsFirstSearch] = useState<boolean>(true);
 
   const dispatch = useDispatch();
   const studentId = useAppSelector(state => state.userInfo.username);
@@ -50,13 +53,25 @@ function CourseRegister() {
   }, [currentFilter, currentSearchOption, studentId]);
 
   const handleSearch = async (newList: CourseTypes[], filter: CourseTypes, searchOption: string) => {
+    if (isRegistrationStarted && isFirstSearch) {
+      openModalHandler(dispatch, 'waiting');
+      setIsFirstSearch(false);
+    }
     setList(newList);
     setCurrentFilter(filter);
     setCurrentSearchOption(searchOption);
     const registeredCourses = await getRegisterdList();
     setRegisteredList(registeredCourses || []);
   };
 
+  const handleStartButtonClick = () => {
+    setList([]);
+    setRegisteredList([]);
+    setStartVisible(false);
+    setIsRegistrationStarted(true);
+    setIsFirstSearch(true);
+  };
+
   const handleAction = async (
     _action: string,
     scheduleId: number | undefined,
@@ -73,9 +88,7 @@ function CourseRegister() {
     <>
       {startVisible && (
         <StartButton
-          setList={setList}
-          setStartVisible={setStartVisible}
-          refreshAll={refreshAll}
+          onClick={handleStartButtonClick}
         />
       )}
       <RegisterFilters onSearch={handleSearch} />
@@ -89,9 +102,9 @@ function CourseRegister() {
         height='35rem'
         onAction={handleAction}
       />
-      <RegisteredList 
-        list={registeredList} 
-        refreshAll={refreshAll} 
+      <RegisteredList
+        list={registeredList}
+        refreshAll={refreshAll}
       />
     </>
   );