From 18601a3507060324ebce250546c74e03f8eb3478 Mon Sep 17 00:00:00 2001 From: Inhyuk Oh <49269218+ohinhyuk@users.noreply.github.com> Date: Fri, 6 Oct 2023 05:03:37 +0900 Subject: [PATCH] =?UTF-8?q?FEATURE:=20=EA=B8=B0=EC=A1=B4=EC=9D=98=20?= =?UTF-8?q?=ED=95=99=EA=B8=B0=EB=B3=84=20=ED=95=AD=EB=AA=A9=20=EB=8B=A4?= =?UTF-8?q?=EC=A4=91=20=EC=B6=94=EA=B0=80=EB=A5=BC=20=EC=A7=80=EC=9B=90=20?= =?UTF-8?q?=ED=95=9C=EB=8B=A4.=20(#59)=20(#62)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Refactor: milleageHeader를 컴포넌트로 꺼내면서 로직을 포함하고 있는 함수들과 UI를 리펙터링함 * Feat: 마일리지 카테고리 리스트에 필요한 리스트들을 enum을 이용하여 정리 * Refactor: 마일리지 카테고리 게시판 리펙터링 완료 (#4) * Feat: 마일리지 항목 게시판 enum 설정 (#4) * Feat: 마일리지 항목 데이터 인터페이스 설정(#4) * Feat: 마일리지 항목 관련 데이터 생성 함수(#4) * Feat: 마일리지 항목 관련 테이블 헤더(#4) * Feat: 마일리지 항목 row값 설정 * Feat: 마일리지 조회 게시판 enum 설정(#4) * Feat: 마일리지 조회 데이터 인터페이스 설정(#4) * Feat: 마일리지 조회 데이터 생성 함수(#4) * Feat: 마일리지 조회 데이터 생성 함수(#4) * Feat: 마일리지 조회 데이터 추가(#4) * Feat: 마일리지 등록 enum 설계(#4) * Feat: 마일리지 조회 데이터 인터페이스 + 데이터 생성 함수(#4) * Feat: 마일리지 등록 테이블 헤더(#4) * Feat: 마일리지 등록 더미데이터 입력(#4) * Fix: semester을 number -\> string으로 타입 수정 , 테이블 데이터들이 모두 select 되지 않는 버그 수정(#4) * Style: mediaQuery와 styled-component를 이용하여 테이블의 반응형 구축(#4) * Feat: 신청자 관리 데이터 인터페이스(4) * Feat: 신청자 관리 enum (#4) * Feat: 신청자 관리 데이터 생성함수 (#4) * Fix: 신청자 관리 카테고리를 제외 시킴(#4) * Feat: 신청자 관리 헤더 내용 정리(#4) * Feat: 신청자 관리 더미데이터(#4) * Feat: 학생 관리 테이블 완성(#4) * Feat: 사용자 관리 테이블 enum 설정(#4) * Feat: 사용자 관리 데이터 인터페이스 설정(#4) * Feat: 사용자 관리 데이터 생성함수(#4) * Feat: 사용자 관리 테이블 studentName -\> name으로 필드 이름 변경 * Feat: 사용자관리 테이블 데이터생성함수(#4) * Feat: 사용자 관리 테이블 완료(#4) * Feat: 마일리지 선정 결과 enum 설정(#4) * Feat: 마일리지 선정결과 인터페이스 + 데이터 생성함수(#4) * Fix: 마일리지 선정 결과에서 register num을 삭제하였음(#4) * Feat: 마일리지 선정결과 테이블 헤더 설정(#4) * Feat: 마일리지 선정결과 완료(#4) * Chore: 빌드 시 esLint를 무시할 수 있도록 next.config.js를 수정해주었음 * Feat: 마일리지 카테고리 모달관련 reducers를 만듬 (open , close) (#7) * Feat: 마일리지 카테고리 관련 모달을 열고 닫는 액션 export(#7) * Fix: 문법에 맞게 reducers return 값 수정(#7) * Feat: mUI 모달 컴포넌트 생성(#7) * Feat: root Reducer에 modal Reducer를 연결하고 모달의 useState를 selector와 dispatch로 대체함으로 써 모달을 컴포넌트에 연결 시킴 * Feat: 카테고리 관련 모달 이름 data파일에 정의(#7) * Fix: 모달 관련 state를 재사용 하기로 결정하여 state의 갯수를 줄임(#7) * Feat: icon Converter를 통해 어떤 타입의 모달이냐에 따라 다른 아이콘을 부여(#7) * Feat: title Converter를 두어 모달의 제목을 모달의 타입에 따라 융통성있게 가져감(#7) * Fix: 모달이 type을 인식하지 못하는 이슈로 인해 modalType을 reducer에서 관리(#7) * Feat: formik , yup 설치 및 활용을 통한 모달 속 폼 제작(#7) * Feat: 마일리지 카테고리 추가 기능 폼 구현 완료(#7) * Style: mui템플릿 Theme기본 설정을 변경 시켜서 텍스트 필드의 스타일을 변경시킴(#7) * Feat: 관리를 눌렀을 때 초기값을 전달하여 세팅하는 것 까지 연결 (#7) * Feat: 마일리지 카테고리 모달 완성 + 컴포넌트 분리(#7) * Refactor: 모달 제목 , 모달 열기 버튼 리펙터링(#7) * Feat: 테이블에 타입 지정하고 타입을 활용해서 제목 변경(#7) * Feat: 타입 컨버터를 통해 각 모달의 기능에 맞춰줌(#7) * Feat: 카테고리 항목 모달 폼 제작(#7) * Feat: 카테고리 항목 모달에 토글 추가(#7) * Feat: 영어를 한글로 UI를 보여주는 함수 구현(#7) * Feat: 마일리지 항목 모달 리펙터링(#7) * Feat: 마일리지 카테고리, 마일리지 항목 모달 연결(#7) * Feat: 게시판 데이터에 마일리지 글로벌 항목 추가(#12) * Feat: 각각의 컴포넌트에 type을 지정해주어 각 컴포넌트에 맞는 테이블의 제목을 나타나게 한다.(#12) * Feat: 마일리지 글로벌 항목 관련 테이블 생성(#12) * Fix: 마일리지 항목 -\> 마일리지 학기별 항목으로 수정(#12) * Feat: 자동완성 state연결(#15) * Feat: 카테고리 filter 관련 Reducer 생성 (#15) * Feat: 카테고리 필터링 완료(#15) * Feat: 마일리지 글로벌 항목 리스트 상태를 리덕스로 관리(#15) * Feat: 마일리지 학기별 항목 리스트도 리덕스로 관리 (#15) * Feat: 학기 필터링 상태 Reducer에 추가(#15) * Feat: 학기 필터링 드롭다운 컴포넌트(#15) * Feat: 학기 필터링 적용 완료(#15) * Feat: 보이기 필터링 드롭다운 컴포넌트 생성 , reducer 생성(#15) * Feat: 보이기 필터링 연결(#15) * Feat: 항목명 필터링 컴포넌트, 상태 생성(#15) * Fix: 마일리지 학기별 항목의 보이기 값이 boolean임에 맞춰 데이터를 true/false로 변경(#15) * Feat: 카테고리 CRUD API apitest 페이지에서 연결테스트(#16) * Refactor: pages 폴더 내에서만 서버사이드 렌더링이 작동하기 때문에 header와 drawer를 main layout으로 리펙터링 한다(#15)) * Fix: 테이블 리스트 컴포넌트들을 페이지로 이동 시키기 이전에 현재 페이지 상태에 대한 상태를 reducer로 관리(#15) * Fix: 컴포넌트 리턴 함수를 drawer컴포넌트에서 메인 페이지로 꺼내옴 * Refactor: 서버 사이드 렌더링을 위하여 board 컴포넌트를 페이지로 리펙터링(#15) * Feat: 마일리지 카테고리 서버사이드 fetching API 연결(#15) * Feat: 카테고리 추가 API 연결 완료(#15) * Feat: 카테고리 수정 API 연결 (#15) * Feat: 삭제 API를 여러개 동시에 하기 위해 선택 된 것을 삭제할 수 있도록 선택된 id들전역상태로 관리(#16) * Feat: 선택된 번호들을 다른 페이지로 갔을 시 초기화 되도록 설정(#16) * Feat: 카테고리 다중 삭제 API 연결 완료(#16) * Feat: 글로벌 세부항목 가져오기 API 연결(#18) * Refactor: 글로벌 카테고리 모달 버튼 리펙터링(#18) * Feat: 메뉴바 state가redux persist로 유지되도록 함(#18) * Feat: 학기별 세부항목 조회를 위한 interface 생성(#20) * Feat: 마일리지 학기별 항목 READ 연결(#20) * Feat: 세부항목 모달+ CREATE API 연결(#20) * Feature: 글로벌 세부항목 API을 연결 함으로써 데이터베이스에 글로벌 세부항목 CRUD을 할 수 있다. (#19) * style : 헤더 컴포넌트 완성 * style : sidebar(drawer) 완성 * feat : Drawer와 상태를 연결 * feat : 커스텀 테이블 생성 * refactor : 커스텀 테이블의 pagination을 refactoring함 * Refactor(custom): 테이블 관련 데이터 파일 분리 * 커밋 컨밴션을 위한 cz-commitizen 설정 * Docs: pR 문서 템플릿 작성 * Refactor: 테이블 컴포넌트를 다양한 데이터를 넣을 수 있도록 Row 부분을 리펙토링 하여 정의한이터에 따라 값이 유연하게 들어갈 수 있게 함(#4) * Feat: 테이블 관련 필드를 field 파일에 모아둠 (#4) * Refactor: boardList정의 + 사이드바 블럭 리펙터링 * Refactor: milleageHeader를 컴포넌트로 꺼내면서 로직을 포함하고 있는 함수들과 UI를 리펙터링함 * Feat: 마일리지 카테고리 리스트에 필요한 리스트들을 enum을 이용하여 정리 * Refactor: 마일리지 카테고리 게시판 리펙터링 완료 (#4) * Feat: 마일리지 항목 게시판 enum 설정 (#4) * Feat: 마일리지 항목 데이터 인터페이스 설정(#4) * Feat: 마일리지 항목 관련 데이터 생성 함수(#4) * Feat: 마일리지 항목 관련 테이블 헤더(#4) * Feat: 마일리지 항목 row값 설정 * Feat: 마일리지 조회 게시판 enum 설정(#4) * Feat: 마일리지 조회 데이터 인터페이스 설정(#4) * Feat: 마일리지 조회 데이터 생성 함수(#4) * Feat: 마일리지 조회 데이터 생성 함수(#4) * Feat: 마일리지 조회 데이터 추가(#4) * Feat: 마일리지 등록 enum 설계(#4) * Feat: 마일리지 조회 데이터 인터페이스 + 데이터 생성 함수(#4) * Feat: 마일리지 등록 테이블 헤더(#4) * Feat: 마일리지 등록 더미데이터 입력(#4) * Fix: semester을 number -\> string으로 타입 수정 , 테이블 데이터들이 모두 select 되지 않는 버그 수정(#4) * Style: mediaQuery와 styled-component를 이용하여 테이블의 반응형 구축(#4) * Feat: 신청자 관리 데이터 인터페이스(4) * Feat: 신청자 관리 enum (#4) * Feat: 신청자 관리 데이터 생성함수 (#4) * Fix: 신청자 관리 카테고리를 제외 시킴(#4) * Feat: 신청자 관리 헤더 내용 정리(#4) * Feat: 신청자 관리 더미데이터(#4) * Feat: 학생 관리 테이블 완성(#4) * Feat: 사용자 관리 테이블 enum 설정(#4) * Feat: 사용자 관리 데이터 인터페이스 설정(#4) * Feat: 사용자 관리 데이터 생성함수(#4) * Feat: 사용자 관리 테이블 studentName -\> name으로 필드 이름 변경 * Feat: 사용자관리 테이블 데이터생성함수(#4) * Feat: 사용자 관리 테이블 완료(#4) * Feat: 마일리지 선정 결과 enum 설정(#4) * Feat: 마일리지 선정결과 인터페이스 + 데이터 생성함수(#4) * Fix: 마일리지 선정 결과에서 register num을 삭제하였음(#4) * Feat: 마일리지 선정결과 테이블 헤더 설정(#4) * Feat: 마일리지 선정결과 완료(#4) * Chore: 빌드 시 esLint를 무시할 수 있도록 next.config.js를 수정해주었음 * Feat: 마일리지 카테고리 모달관련 reducers를 만듬 (open , close) (#7) * Feat: 마일리지 카테고리 관련 모달을 열고 닫는 액션 export(#7) * Fix: 문법에 맞게 reducers return 값 수정(#7) * Feat: mUI 모달 컴포넌트 생성(#7) * Feat: root Reducer에 modal Reducer를 연결하고 모달의 useState를 selector와 dispatch로 대체함으로 써 모달을 컴포넌트에 연결 시킴 * Feat: 카테고리 관련 모달 이름 data파일에 정의(#7) * Fix: 모달 관련 state를 재사용 하기로 결정하여 state의 갯수를 줄임(#7) * Feat: icon Converter를 통해 어떤 타입의 모달이냐에 따라 다른 아이콘을 부여(#7) * Feat: title Converter를 두어 모달의 제목을 모달의 타입에 따라 융통성있게 가져감(#7) * Fix: 모달이 type을 인식하지 못하는 이슈로 인해 modalType을 reducer에서 관리(#7) * Feat: formik , yup 설치 및 활용을 통한 모달 속 폼 제작(#7) * Feat: 마일리지 카테고리 추가 기능 폼 구현 완료(#7) * Style: mui템플릿 Theme기본 설정을 변경 시켜서 텍스트 필드의 스타일을 변경시킴(#7) * Feat: 관리를 눌렀을 때 초기값을 전달하여 세팅하는 것 까지 연결 (#7) * Feat: 마일리지 카테고리 모달 완성 + 컴포넌트 분리(#7) * Refactor: 모달 제목 , 모달 열기 버튼 리펙터링(#7) * Feat: 테이블에 타입 지정하고 타입을 활용해서 제목 변경(#7) * Feat: 타입 컨버터를 통해 각 모달의 기능에 맞춰줌(#7) * Feat: 카테고리 항목 모달 폼 제작(#7) * Feat: 카테고리 항목 모달에 토글 추가(#7) * Feat: 영어를 한글로 UI를 보여주는 함수 구현(#7) * Feat: 마일리지 항목 모달 리펙터링(#7) * Feat: 마일리지 카테고리, 마일리지 항목 모달 연결(#7) * Feat: 게시판 데이터에 마일리지 글로벌 항목 추가(#12) * Feat: 각각의 컴포넌트에 type을 지정해주어 각 컴포넌트에 맞는 테이블의 제목을 나타나게 한다.(#12) * Feat: 마일리지 글로벌 항목 관련 테이블 생성(#12) * Fix: 마일리지 항목 -\> 마일리지 학기별 항목으로 수정(#12) * Feat: 자동완성 state연결(#15) * Feat: 카테고리 filter 관련 Reducer 생성 (#15) * Feat: 카테고리 필터링 완료(#15) * Feat: 마일리지 글로벌 항목 리스트 상태를 리덕스로 관리(#15) * Feat: 마일리지 학기별 항목 리스트도 리덕스로 관리 (#15) * Feat: 학기 필터링 상태 Reducer에 추가(#15) * Feat: 학기 필터링 드롭다운 컴포넌트(#15) * Feat: 학기 필터링 적용 완료(#15) * Feat: 보이기 필터링 드롭다운 컴포넌트 생성 , reducer 생성(#15) * Feat: 보이기 필터링 연결(#15) * Feat: 항목명 필터링 컴포넌트, 상태 생성(#15) * Fix: 마일리지 학기별 항목의 보이기 값이 boolean임에 맞춰 데이터를 true/false로 변경(#15) * Feat: 카테고리 CRUD API apitest 페이지에서 연결테스트(#16) * Refactor: pages 폴더 내에서만 서버사이드 렌더링이 작동하기 때문에 header와 drawer를 main layout으로 리펙터링 한다(#15)) * Fix: 테이블 리스트 컴포넌트들을 페이지로 이동 시키기 이전에 현재 페이지 상태에 대한 상태를 reducer로 관리(#15) * Fix: 컴포넌트 리턴 함수를 drawer컴포넌트에서 메인 페이지로 꺼내옴 * Refactor: 서버 사이드 렌더링을 위하여 board 컴포넌트를 페이지로 리펙터링(#15) * Feat: 마일리지 카테고리 서버사이드 fetching API 연결(#15) * Feat: 카테고리 추가 API 연결 완료(#15) * Feat: 카테고리 수정 API 연결 (#15) * Feat: 삭제 API를 여러개 동시에 하기 위해 선택 된 것을 삭제할 수 있도록 선택된 id들전역상태로 관리(#16) * Feat: 선택된 번호들을 다른 페이지로 갔을 시 초기화 되도록 설정(#16) * Feat: 카테고리 다중 삭제 API 연결 완료(#16) * Feat: 글로벌 세부항목 가져오기 API 연결(#18) * Refactor: 글로벌 카테고리 모달 버튼 리펙터링(#18) * Feat: 메뉴바 state가redux persist로 유지되도록 함(#18) * Feat: 학생 관리 조회 데이터 관련 인터페이스 생성(#22) * Feat: 학생 데이터를 grade -\> year + semesterCount 로 두개로 분할 시킴(#22) * Feat: 학생 관리 조회 API 연결(#22) * Refactor: 학생관리의 beforeData 상수 사용하도록 리펙터링(#22) * Refactor: 학생 관리의 IStudent를 미리 정의해둔 상수를 사용하도록 리펙터링(#22) * Refactor: 학생 관리 관련 데이터 리펙터링(#22) * Feat: 학생 항목 추가 모달에서 handleSubmit 구현(#22) * Feat: 학생 생성 API 연결(#22) * Feat: 마일리지 등록 READ 연결(#24) * Feat: collapsibleTable 연결(#24) * Feat: 받아온 데이터와 연결(#24) * Feat: 데이터 연결 완료(#24) * Feat: 마일리지 등록 리펙터링 (#24) * Style: 반응형 구축 scroll (#24) * Feat: 마일리지 등록 모달 완성(#24) * Style: 팀원 피드백에 따라 반응형 스크롤로 수정(#24) * Feat: 버튼을 통해 엑셀 다운로드 연결(#26) * Feat: 학생 이름 , 학생 학년 , 학생이 속한 학부 필터링을 위한 state를 reducer에 생성(#15) * Feat: 학생명 필터링 드롭다운 메뉴 생성(#15) * Fix: 필드가 studentName이 더 적절한 것 같아서 name을 studentName으로 수정(#15) * Feat: 학생 이름 드롭다운 메뉴 연결(#15) * Feat: 학년 드롭다운 컴포넌트 생성(#15) * Feat: 학년 필터링 연결(#15) * Fix: grade가 number이었어서 slice가 먹히지 않았다. string으로 변환 후 slice를 사용(#15) * Style: 학부 드롭다운 UI생성 (#15) * Feat: 학부 필터링 연결 완료(#15) * Refactor: 학년 필터링 MenuItem를 map을 사용하여 줄임(#15) * Feat: 학기 필터링 menuItem을 map으로 변환(#15) * Refactor: 보이기 여부 menuItem을 map을 사용하여 변환(#15) * Style: 학기의 필터링의 높이와 넓이 조정(#15) * Style: 카테고리 필터링의 스타일 변경(#15) * Style: 보이기 여부 필터링 스타일조정(#15) * Style: 항목명 필터링 너비와 높이 스타일지정(#15) * Style: 학년 필터링 너비와 높이 지정(#15) * Style: select는 width자동 지정 되므로 width 없애고 autocomplete만 width 지정(#15) * Style: 필터링과 테이블 반응형 구축(#15) * Style: 커스텀 테이블의 반응형 스타일을 스타일드 컴포넌트로 뺴냄(#15) * Style: 2중 테이블 - 마일리지 등록 리스트 반응형 구축(#15) * Feat: 필터링 카테고리에 디비에 존재하는 카테고리를 데이터 연결(#15) * Fix: 마일리지 글로벌 항목 학기 , 마일리지 , 최대 마일리지 삭제(#15) * Fix: 글로벌 항목 리스트 항목명 안보이는 버그 itemName -\> name으로 변경하여 해결(#15) * Fix: 마일리지 학기별 항목 리스트 넘겨주는 값들 수정(#15) * Fix: 마일리지 등록 리스트 카테고리명 추가(#15) * Feat: 필요한 때만 보이도록 현재 테이블의 위치(componentNum)를 통해 설정함(#15) * Refactor: 필터링 전체로 묶고 컴포넌트로 따로 뺌(#15) * Feat: 맨 처음에 필터링을 위해 전역 변수로 카테고리, 학생 , 글로벌항목명들을 가져온다. 그리고 이걸 persist로저장(#15) * Fix: filter와 filterList 구분을 통해서 영속성을 List에만 부여(#15) * Fix: 버그 수정 * Feat: 메인에서 필터링 데이터를 전달 받고 mileage/category페이지로 라우팅(#28) * Style : Drawer mouseHover하면 열리고 mouseOut하면 닫히도록 수정 * Style : 정렬 할때 화살표가 나타나도록 설정(#28) * Fix: 교수님의 요구 사항에 따라 마일리지 등록 부분을 2단 테이블 -\> 단일 테이블로 변경(#28) * Feat: 마일리지 등록 등록된 학생 crud 테이블(#28) * Style : 테이블 수정 * Fix: 카테고리 GET API의 DTO수정에 따라 인터페이스와 보여주는 값 변경(#29) * Fix: 카테고리 수정 / 삭제 폼과 API 연결 수정(#29) * Fix: edit때 사용되는 기존 데이터를 전달하는 beforeData를 전역적으로 관리하여 기존의 전달되지 않던 오류 수정(#29) * Fix: 항목 선택을 위해 id -\> num으로 필드 설정(#29) * Fix: BREAKING CHANGE: 학기별 세부 항목 수정된 결과값에 맞게 수정(#29) * Fix: 학생관리 리스트 수정 된 API 정책에 맞게 연결 및 모달 수정(#29) * Fix : 브랜치 변경을 위한 커밋 * Feat : 차트 인덱스 state redux로 관리(#29) * Style : Tabs 컴포넌트 제작(#30) * Refactor : ReportTabs를 컴포넌트로 이동(#30) * Style: 파이 그래프 , 선 그래프 예시 만들기(#30) * Style: 더 많은 그래프 예시 연결(#30) * Fix : 리포트 텝스 라우트 연결(#30) * Fix : 카테고리 우선 순위 나타나도록 설정 * Feat: 마일리지 학기별 항목 리스트 모달에서 학기를 Select로 변경(#32) * Feat: 마일리지 학기별 항목 리스트 모달에 글로벌 항목 Select 실제 데이터 연결(#32) * Feat: 학부 Select 제작(#32) * Feat: 전공 Select 제작(#32) * Feat: 학년 Select 생성(#32) * Feat: 학기수 Select 생성(#32) * Feat: 학생 등록 모달 폼에 Select (학년 , 학기 수) 추가(#32) * Feat : 학생 목록 가져오기 * Fix : CategoryAutoCompletet undefinded 에러(#28) * Fix: 마일리지 등록 학생 추가 테이블 각 필드 픽셀 수정(#28) * Feat: 학생 추가 리스트와 실제 데이터 연결을 위한 생성함수(#28) * Feat: 마일리지 등록 학생 테이블 실제 데이터 연결(#28) * Fix: 모달을 누르면 모든 모달이 활성화되는 버그 수정 : 모달 상태 redux -\> useState로 관리(#28) * Feat: 클릭한 마일리지 항목에 등록된 학생들만 불러오도록 API 쿼리파라미터 연결(#28) * Feat: 마일리지 등록 학생 Edit , Delete 연결(#28) * Feat: drawer를 pinned 할 수 있도록 pinned를 리덕스로 전역 상태 관리(#32) * Fix: drawer 전역 상태 설정 소문자 setopen 선언 오류 수정(#34) * Feat: drawer pinned가 참일 때는 drawer가 닫히지 않도록 설정(#34) * Fix: 마일리지 등록 학생 추가/수정 구분 안되는 버그 수정(#34) * Feat : 학생 추가 팝업 밖에서도 가능 하도록 만듬(#35) * Fix : 마일리지 등록 페이지 모달 수정(#35) * Chore: 리액트 드래그앤 드랍 + 타입스크립트 라이브러리 설치(#37) * Chore : next Config 설정을 통해 strictMode에서도 드래그 앤드랍 사용할 수 있도록 설정(#37) * Feat: 드래그 앤 드랍 테이블에 적용(#37) * Feat(드래그 앤 드랍 픽셀 깨짐 현상 , 레이아웃 변형 수정(#37)): * Fix: 드래그 앤 드랍 orderIdx 잘 수정되지 않는 버그 수정(#38 * Fix: 드래그 앤 드랍 우선 순위 변경 로직 수정(#38) * Feat : orderIdx로 정렬(#38) * Feat: 마일리지 카테고리에 최근 수정일 추가(#38) * Fix: 데이터 orderIdx 정렬 전에 데이터 타입과 데이터 입력이 잘 되어있는 지 확인하여에러 수정(#42) * Fix: 글로벌 항목 생성 / 수정 시 선택한 카테고리를 실제 id와 연결(#42) * Feat: 글로벌 항목 테이블에서 최근 수정일 추가(#42) * Feat: 마일리지 학기별 항목 테이블에 최근 수정일 추가(#42) * Fix : 학생 관리 , 마일리지 등록 테이블에 최근 수정일 추가(#42) * Fix: 마일리지 등록 학생 리스트에서 반환 리스트가 달라짐에 따라 데이터 파싱 수정(#42) * Fix : 레코드 patch API 연결 안되는 버그 수정(#42) * Feat : 학생의 고유 번호가 아닌 sid와 name을 통해 마일리지 등록을 처리하도록 수정(#42) * Feat : axios Instance에 에러 메세지 출력 로직 추가하여 에러 메세지 보여주기(#45) * Fix: 서버사이드가 아닐때만 에러를 alert로 보이도록 수정(#42) * Feat : 관리자 GET API 연결(#44) * Feat : 관리자 삭제 API 연결(#44) * Feat : 관리자 CRUD 연결(#44) * Fix: 수정 폼에서 beforeData를 가져오지 못하는 버그 수정(#44) * Fix : 권한 수정되지 않는 버그 Select로 UI를 수정하면서 버그 해결(#44) * Feat : 테이블에서 권한이 숫자가 아닌 권한 이름으로 보이도록 설정(#44) * Fix : 마일리지 등록 생성/수정에서 Points 삭제(#49) * Feat : 마일리지 등록 등록수 란 생성(#49) * Feat : 학생 관리 delete API 연결(#49) * Feat : 하위 항목으로 인해 삭제되지 않는 에러 메세지 출력(#49) * Feat : 글로벌 항목 중 하위 항목을 지니고 있다면 삭제 시 에러메세지 출력(#49) * Fix : 모달 redux 대신 useState로 공용 state를 제거(#50) * Feat : 공용 state를 제거함에 따라 모달을 닫는 함수를 redux가 아닌 props로 전달(#50) * Fix : 글로벌 항목 isVisibleDropdown key warning 삭제(#50) * Feat: 툴팁 관련 warning 삭제(#50) * Fix : 드래그앤 드랍 이후 다른 필드들이 저장되지 않고 null이되는 버그 수정(#50) * Fix : 사용자 관리 페이지 명칭 관리자로 수정(#50) * Feat: MultiTap UI 구현 * Fix: 등록된 마일리지 리스트에서 등록된 학생 수를 읽어온다(#56) * Feat: 마일리지 카테고리 리스트에서 카테고리의 타입을 화면에 표시(#57) * Feat: 카테고리 추가/수정 폼에 타입 Select를 만들어 추가시킴(#57) * Style: 학기별 항목 다중 선택 마법사 UI 제작 (전 학기 , 이번 학기 , 다중 선택 리스트 , 제출 취소 버튼)(#59) * Feat: 이전 학기 데이터를 불러와 학기별 항목 마법사에 실제 데이터 연결(#59) * Feat: 다중 입력 API 연결(#59) * Refactor: 학기별 항목 마법사 TransferList 리펙터링(#59) * Style: 마일리지 학기별 항목 다중 이전 마법사 픽셀 및 스타일 조정(#59) --- src/assets/data/modal/modals.ts | 2 + src/components/common/CustomTable.tsx | 6 + .../common/Select/SemesterMagicianSelect.tsx | 41 ++++ .../TransferList/SemesterItemTransferList.tsx | 202 ++++++++++++++++++ .../common/modal/ModalIconButton.tsx | 4 +- src/components/common/modal/SWModal.tsx | 4 + .../modalForm/SemesterMagicianForm.tsx | 83 +++++++ 7 files changed, 341 insertions(+), 1 deletion(-) create mode 100644 src/components/common/Select/SemesterMagicianSelect.tsx create mode 100644 src/components/common/TransferList/SemesterItemTransferList.tsx create mode 100644 src/components/modalForm/SemesterMagicianForm.tsx diff --git a/src/assets/data/modal/modals.ts b/src/assets/data/modal/modals.ts index 1a39d6e..4ea9222 100644 --- a/src/assets/data/modal/modals.ts +++ b/src/assets/data/modal/modals.ts @@ -19,3 +19,5 @@ export const EDITMANAGER = 'editManager'; export const ADDMILEAGEREGISTER = 'addMileageRegister'; export const EDITMILEAGEREGISTER = 'editMileageRegister'; export const REGISTEREDSTUDENTS = 'registeredStudents'; + +export const MAGICIANSEMESTERITEM = 'magicianSemesterItem'; diff --git a/src/components/common/CustomTable.tsx b/src/components/common/CustomTable.tsx index 49396c1..d832616 100644 --- a/src/components/common/CustomTable.tsx +++ b/src/components/common/CustomTable.tsx @@ -45,6 +45,7 @@ import { ADDMANAGER, ADDSTUDENT, EDITCATEGORY, + MAGICIANSEMESTERITEM, } from 'src/assets/data/modal/modals'; import { useDispatch, useSelector } from 'react-redux'; import { dispatch } from 'src/redux/store'; @@ -281,6 +282,9 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { )} + {type === '마일리지 학기별 항목' && ( + + )} @@ -302,6 +306,8 @@ const typeConverter = (type) => { return ADDSTUDENT; case '관리자': return ADDMANAGER; + case '마일리지 학기별 항목 마법사': + return MAGICIANSEMESTERITEM; } }; diff --git a/src/components/common/Select/SemesterMagicianSelect.tsx b/src/components/common/Select/SemesterMagicianSelect.tsx new file mode 100644 index 0000000..5379032 --- /dev/null +++ b/src/components/common/Select/SemesterMagicianSelect.tsx @@ -0,0 +1,41 @@ +import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'; +import { ErrorMessage, Field } from 'formik'; +import { useSelector } from 'react-redux'; +import { CATEGORYID, SEMESTER } from 'src/assets/data/fields'; + +export default function SemesterMagicianSelect({ semester, setSemester }) { + const semesters = [ + '2020-01', + '2020-02', + '2021-01', + '2021-02', + '2022-01', + '2022-02', + '2023-01', + '2023-02', + '2024-01', + '2024-02', + '2025-01', + '2025-02', + '2026-01', + '2026-02', + '2027-01', + '2027-02', + ]; + + return ( + + ); +} diff --git a/src/components/common/TransferList/SemesterItemTransferList.tsx b/src/components/common/TransferList/SemesterItemTransferList.tsx new file mode 100644 index 0000000..278b356 --- /dev/null +++ b/src/components/common/TransferList/SemesterItemTransferList.tsx @@ -0,0 +1,202 @@ +import * as React from 'react'; +import Grid from '@mui/material/Grid'; +import List from '@mui/material/List'; +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Checkbox from '@mui/material/Checkbox'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import { last } from 'lodash'; +import SemesterMagicianSelect from '../Select/SemesterMagicianSelect'; +import axiosInstance from 'src/utils/axios'; +import { Box, Chip, Typography } from '@mui/material'; + +function not(a: readonly number[], b: readonly number[]) { + return a.filter((value) => b.indexOf(value) === -1); +} + +function intersection(a: readonly number[], b: readonly number[]) { + return a.filter((value) => b.indexOf(value) !== -1); +} + +function union(a: readonly number[], b: readonly number[]) { + return [...a, ...not(b, a)]; +} +interface ILastSemesterItem { + id: number; + category: { + id: number; + name: string; + }; + item: { + id: number; + name: string; + }; + itemMaxPoints: number; + points: number; +} + +export default function SemesterItemTransferList({ + left, + setLeft, + right, + setRight, + lastSemester, + thisSemester, + setLastSemester, + setThisSemester, +}) { + const [checked, setChecked] = React.useState([]); + + const leftChecked = intersection(checked, left); + const rightChecked = intersection(checked, right); + + const handleToggle = (value: number) => () => { + const currentIndex = checked.indexOf(value); + const newChecked = [...checked]; + + if (currentIndex === -1) { + newChecked.push(value); + } else { + newChecked.splice(currentIndex, 1); + } + + setChecked(newChecked); + }; + + const numberOfChecked = (items: ILastSemesterItem[]) => intersection(checked, items).length; + + const handleToggleAll = (items: ILastSemesterItem[]) => () => { + if (numberOfChecked(items) === items.length) { + setChecked(not(checked, items)); + } else { + setChecked(union(checked, items)); + } + }; + + const handleCheckedRight = () => { + setRight(right.concat(leftChecked)); + setLeft(not(left, leftChecked)); + setChecked(not(checked, leftChecked)); + }; + + const handleCheckedLeft = () => { + setLeft(left.concat(rightChecked)); + setRight(not(right, rightChecked)); + setChecked(not(checked, rightChecked)); + }; + + const customList = (title: React.ReactNode, items: ILastSemesterItem[]) => ( + + + } + title={title} + subheader={`${numberOfChecked(items)}/${items?.length} selected`} + /> + + + {items?.map((item: ILastSemesterItem) => { + const labelId = `transfer-list-all-item-${item.item.name}-label`; + + return ( + + + + + + + ); + })} + + + ); + + React.useEffect(() => { + axiosInstance.get(`/api/mileage/semesters/${lastSemester}/items`).then((res) => { + setLeft(res.data.list); + }); + }, [lastSemester]); + + return ( + + + + + + + + 복사할 학기 선택 + + + {customList(`복사할 학기별 항목 (${lastSemester})`, left)} + + + + + + + + + + 붙여넣을 학기 선택 + + + {customList(`붙여 넣을 학기별 항목 (${thisSemester})`, right)} + + + + ); +} diff --git a/src/components/common/modal/ModalIconButton.tsx b/src/components/common/modal/ModalIconButton.tsx index 7ce69d2..d2957f7 100644 --- a/src/components/common/modal/ModalIconButton.tsx +++ b/src/components/common/modal/ModalIconButton.tsx @@ -2,6 +2,7 @@ import { IconButton } from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; import EditIcon from '@mui/icons-material/Edit'; import DeleteIcon from '@mui/icons-material/Delete'; +import AutoFixNormalIcon from '@mui/icons-material/AutoFixNormal'; import { closeModal, openModal, @@ -24,7 +25,6 @@ export default function ModalIconButton({ setOpen, type, beforeData }) { type === REGISTEREDSTUDENTS && dispatch(setClickedItemId(beforeData?.id)); // type === ADDMILEAGEREGISTER && dispatch(setClickedRecordId(beforeData?.id)); console.log('ddd', beforeData?.id); - }; const IconConverter = (type) => { @@ -38,6 +38,8 @@ export default function ModalIconButton({ setOpen, type, beforeData }) { return ; case 'reg': return ; + case 'mag': + return ; } }; diff --git a/src/components/common/modal/SWModal.tsx b/src/components/common/modal/SWModal.tsx index 98840cc..1b375b6 100644 --- a/src/components/common/modal/SWModal.tsx +++ b/src/components/common/modal/SWModal.tsx @@ -39,6 +39,7 @@ import { EDITMANAGER, EDITMILEAGEREGISTER, EDITSTUDENT, + MAGICIANSEMESTERITEM, REGISTEREDSTUDENTS, } from 'src/assets/data/modal/modals'; import { ErrorMessage, Field, Form, Formik } from 'formik'; @@ -90,6 +91,7 @@ import MileageRegisterForm from 'src/components/modalForm/MileageRegisterForm'; import { STUDENT_ID } from 'src/assets/data/fields'; import StudentsModal from 'src/components/modalForm/StudentsModal'; import ManagerForm from 'src/components/modalForm/ManagerForm'; +import SemesterMagicianForm from 'src/components/modalForm/SemesterMagicianForm'; export const ButtonFlexBox = styled(Box)({ display: 'flex', @@ -126,6 +128,8 @@ const modalForm = (modalType, handleClose) => { return ; case EDITMANAGER: return ; + case MAGICIANSEMESTERITEM: + return ; default: return
default
; } diff --git a/src/components/modalForm/SemesterMagicianForm.tsx b/src/components/modalForm/SemesterMagicianForm.tsx new file mode 100644 index 0000000..acd3f0d --- /dev/null +++ b/src/components/modalForm/SemesterMagicianForm.tsx @@ -0,0 +1,83 @@ +import { ErrorMessage, Field, Form, Formik } from 'formik'; +import { ButtonFlexBox } from '../common/modal/SWModal'; +import { + TITLE, + CATEGORY, + DESCRIPTION, + MAX_MILEAGE, + MAX_POINTS, + NUM, + POINT, + SEMESTER, + MILEAGE, +} from 'src/assets/data/fields'; +import * as Yup from 'yup'; +import { ADDCATEGORY, ADDITEM, EDITCATEGORY, EDITITEM } from 'src/assets/data/modal/modals'; +import { TextField, styled } from '@mui/material'; +import { useDispatch, useSelector } from 'react-redux'; +import { dispatch } from 'src/redux/store'; +import { closeModal } from 'src/redux/slices/modal'; +import CancelButton from '../common/modal/CancelButton'; +import SubmitButton from '../common/modal/SubmitButton'; +import axiosInstance from 'src/utils/axios'; +import { useRouter } from 'next/router'; +import SemesterSelect from '../common/Select/SemesterSelect'; +import GlobalItemSelect from '../common/Select/GlobalItemSelect'; + +import * as React from 'react'; +import Grid from '@mui/material/Grid'; +import List from '@mui/material/List'; +import Card from '@mui/material/Card'; +import CardHeader from '@mui/material/CardHeader'; +import ListItem from '@mui/material/ListItem'; +import ListItemText from '@mui/material/ListItemText'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import Checkbox from '@mui/material/Checkbox'; +import Button from '@mui/material/Button'; +import Divider from '@mui/material/Divider'; +import SemesterMagicianSelect from '../common/Select/SemesterMagicianSelect'; +import { last } from 'lodash'; +import SemesterItemTransferList from '../common/TransferList/SemesterItemTransferList'; + +export default function SemesterMagicianForm({ handleClose }) { + const modalType = useSelector((state) => state.modal.modalType); + + const [left, setLeft] = React.useState(); + const [right, setRight] = React.useState([]); + + const [lastSemester, setLastSemester] = React.useState('2023-02'); + const [thisSemester, setThisSemester] = React.useState('2023-02'); + + const handleSubmit = (e) => { + e.preventDefault(); + + const bodyData = { + copyFrom: right.map((item) => item.id), + copyTo: thisSemester, + }; + + axiosInstance.post(`/api/mileage/semesters/multiple`, bodyData).then((res) => { + alert(res.data); + handleClose(); + }); + }; + return ( +
+ + + + + + + + ); +}