feat: 수강신청 관련 modal, 연결 (#37)

* feat: .gitignore 수정, .env 제거 * chore: env ignore * feat: 관심과목 페이지 레이아웃, 강좌조회 구현 #19 * feat: 신청, 삭제 버튼 레이아웃 구현 #19 * feat: 관심과목 담기 api 연동 #19 * feat: 관심과목 등록 내역 조회 기능 구현, api 연동 #19 * feat: 강의 삭제 api 연동 #19 * feat: 등록과목수, 학점 동적 업데이트 #19 * feat: 검색 버튼 로고 추가 #19 * feat: 접속 대기시간 모달 추가 * feat: 매크로 방지 코드 modal 추가 * feat: 수강 신청 안내 모달 * Merge develop * feat: 수강 인원 정보, 데이터 처리 로딩바 추가 * feat: 백엔드 연결 완료 * fix: modal 안나오는 문제 해결 * refactor: 타입 수정 --------- Co-authored-by: zhy2on <52701529+zhy2on@users.noreply.github.com>
tutorial-sejong · Aug 3, 2024 · 39b0f3b · 39b0f3b
1 parent 3ab93e3
commit 39b0f3b
Show file tree

Hide file tree

Showing 22 changed files with 1,084 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>수강신청</title>
   </head>

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/apis/api/course.ts b/src/apis/api/course.ts
@@ -89,3 +89,13 @@ export const deleteCourse = async (id: number) => {
     console.error('delete course fail: ', error);
   }
 };
+
+export const getMacroCode = async () => {
+  try {
+    const {data} = await baseAPI.get('/api/auth/macro');
+    return data;
+  } catch (error) {
+    console.error('Get macro code fail', error);
+    throw error;
+  }
+};
diff --git a/src/assets/img/check.png b/src/assets/img/check.png
diff --git a/src/assets/img/logo.webp b/src/assets/img/logo.webp
diff --git a/src/assets/img/warning.png b/src/assets/img/warning.png
diff --git a/src/components/CourseRegister/RegisterFilters.tsx b/src/components/CourseRegister/RegisterFilters.tsx
@@ -71,7 +71,7 @@ function RegisterFilters({setList}: FiltersProps) {
         </CuriNoWrap>
       );
     } else {
-      return <FilterInput sizes='l' onChange={value => handleInput(value)} />;
+      return <FilterInput disabled={searchOption === '관심과목'} sizes='l' onChange={value => handleInput(value)} />;
     }
   };
 
@@ -121,7 +121,7 @@ function RegisterFilters({setList}: FiltersProps) {
           </SearchWrap>
         </SearchBox>
       </FilterBox>
-      <FilterButton label='검색' filter={filter} setList={setList} />
+      <FilterButton label='검색' page='수강신청' filter={filter} setList={setList} />
     </RegisterFilterContainer>
   );
 }

diff --git a/src/components/CourseRegister/RegisteredList.tsx b/src/components/CourseRegister/RegisteredList.tsx
@@ -28,7 +28,10 @@ function RegisteredList() {
     await getRegisterdList().then(res => {
       if (res) {
         setList(res);
+        return;
       }
+
+      setList([]);
     });
   };
 
@@ -37,7 +40,6 @@ function RegisteredList() {
   }, []);
 
   const handleAction = async (
-    action: string,
     scheduleId: number | undefined,
   ) => {
     if (scheduleId) {

diff --git a/src/components/CourseRegister/index.tsx b/src/components/CourseRegister/index.tsx
@@ -1,11 +1,11 @@
-import {useEffect, useState} from 'react';
-import {useAppSelector} from '@/store/hooks';
+import {useState} from 'react';
 import {CourseTypes} from '@/assets/types/tableType';
 import RegisterFilters from './RegisterFilters';
 import Table from '../common/Table';
 import {TableTitle, TableTitleWrap} from '../LectureList';
-import {getWishlist, postCourse} from '@/apis/api/course';
 import RegisteredList from './RegisteredList';
+import {useDispatch} from 'react-redux';
+import {setCourseName, setModalName, setScheduleId} from '@store/modalSlice.ts';
 
 const colData = [
   {name: 'action', value: '신청', initialWidth: 30, enableFilters: false},
@@ -24,27 +24,20 @@ const colData = [
 ];
 
 function CourseRegister() {
-  const studentId = useAppSelector(state => state.userInfo.username);
   const [list, setList] = useState<CourseTypes[]>([]);
 
-  useEffect(() => {
-    const getList = async () => {
-      await getWishlist(studentId).then(res => {
-        setList(res);
-      });
-    };
 
-    getList();
-  }, []);
+  const dispatch = useDispatch();
 
   const handleAction = async (
-    action: string,
     scheduleId: number | undefined,
+    curiNm: string | undefined,
   ) => {
     if (scheduleId) {
-      await postCourse(scheduleId).then(() => {
-        console.log('register success');
-      });
+      // 접속 대기 띄우기
+      dispatch(setScheduleId(scheduleId));
+      dispatch(setCourseName(curiNm));
+      dispatch(setModalName('macro'));
     }
   };
 

diff --git a/src/components/common/FilterButton.tsx b/src/components/common/FilterButton.tsx
@@ -3,17 +3,37 @@ import search from '@assets/img/search.png';
 import {CourseTypes} from '@/assets/types/tableType';
 import {getCourseList, getWishlist} from '@/apis/api/course';
 import {useAppSelector} from '@/store/hooks';
+import {openModalHandler} from '@components/common/Modal/handlers/handler.tsx';
+import {useDispatch} from 'react-redux';
 
 interface ButtonProps {
   label: string;
+  page?: string;
   filter?: CourseTypes;
   setList: React.Dispatch<React.SetStateAction<CourseTypes[]>>;
 }
 
-function FilterButton({label, filter = {}, setList}: ButtonProps) {
+function FilterButton({label, page, filter = {}, setList}: ButtonProps) {
   const studentId = useAppSelector(state => state.userInfo.username);
 
+  const dispatch = useDispatch();
   const handleClick = async () => {
+
+    if (page === '수강신청') {
+      if (!confirm('수강신청 연습 시작하시겠습니까?')) return;
+
+      openModalHandler(dispatch, 'waiting');
+
+      const getList = async () => {
+        await getWishlist(studentId).then(res => {
+          setList(res);
+        });
+      };
+
+      getList();
+      return;
+    }
+
     if (filter.curiNm === 'wish') {
       await getWishlist(studentId).then(res => {
         setList(res);

diff --git a/src/components/common/FilterInput.tsx b/src/components/common/FilterInput.tsx
@@ -1,14 +1,16 @@
 import styled, { css } from 'styled-components';
 
 interface InputInterface {
+  disabled?: boolean;
   sizes: string;
   onChange: (value: string) => void;
 }
 
-function FilterInput({ sizes, onChange }: InputInterface) {
+function FilterInput({ disabled, sizes, onChange }: InputInterface) {
   return (
     <>
       <InputWrap
+        disabled={disabled}
         sizes={sizes}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           onChange(e.target.value)
@@ -50,6 +52,10 @@ const InputWrap = styled.input<{ sizes: string }>`
   height: 2.4rem;
   border: 1px solid ${props => props.theme.colors.neutral5};
   padding-left: 0.8rem;
+    
+    &:disabled {
+        background: ${props => props.theme.colors.neutral5};
+    }
 `;
 
 export default FilterInput;