ZinnaChoi / Study-Management

온라인 스터디 관리 시스템: 부재 일정 캘린더, 토론 게시판 및 알림 기능 제공
8 stars 0 forks source link

Task study manage UI #91

Closed MeMyself-And-I closed 8 months ago

MeMyself-And-I commented 8 months ago

@ZinnaChoi 안녕하세요 관리자 스터디 관리 화면 개발 완료했습니다. 상세 내용은 하기 참고 부탁드립니다.

  1. 관리자 계정의 경우만 스터디 관리 메뉴 활성화
  2. 스터디 정보가 등록되지 않은경우(어플리케이션 최초 설치 상태) 로그인 시 계정 권한 별로 다른 알람창 표출하여 스터디 등록하도록 유도 USER: 로그인 시 스터디가 등록되지 않았으니 관리자에게 스터디 등록 문의 알람창 표출(확인 시 로그인 화면으로 리다이렉팅) image

ADMIN: 로그인 시 스터디가 등록되지 않았으니 스터디 등록 화면 이동 알람창 표출(취소 시 로그인화면으로 리다이렉팅)

image
  1. 관리자 스터디 등록 화면(추가한 스케줄 호버 시 운영 시간 툴팁 표출)

    image image
  2. 스터디 관리 화면(스터디 등록 시 스터디 관리화면으로 자동 리다이렉팅, 스케줄 호버 시 운영 시간 툴팁 표출)

    image
  3. 스터디 정보 변경 화면(정보 변경 버튼 클릭 시 표출, 스터디 등록 화면과 동일) 스터디 정보 변경화면은 스터디 등록 화면과 동일하나, 팝업을 닫을 수 있는 닫기버튼이 존재하고 기존 등록되어있는 스케줄 자동 불러오기 *스터디 이름 입력란 또한 기존 등록되어있는 스터디 이름을 불러오게 해봤지만 입력란이 수정이 되지 않는 이슈가 있었습니다. CommonDialog 컴포넌트에서 해결 가능할 것으로 보이나 다른 인원들이 사용하고 있는 컴포넌트라서 수정 시 다양한 사이드 이펙트가 발생할 수 있어 이번 버전에서는 빈칸에서부터 입력하도록 적용하였습니다.

    image
  4. 스터디 삭제(스터디 삭제 버튼 클릭) 스터디 삭제 버튼 클릭 시 확인 창을 통해 정말 삭제할 것인지 한번 더 확인

    image
  5. 관리자가 아닌 일반 사용자가 직접 url에 /management(스터디 관리 메뉴) 입력 시 에러 화면으로 리다이렉팅 하도록 적용

    image

지난번 말씀 드린 것처럼 React.StrictMode 태그로 인해 alert창이 두 번 발생할 수 있습니다! ddl.auto=create로 한 번 어플리케이션 실행시켜주시고, 회원가입 후 사용자 로그인, 관리자 로그인 하시면 빠른 테스트가 가능할 것 같습니다!