📝 개요

1. 프로젝트명

Writon Admin (라이톤 관리자 서비스)

2. 소개

회의록 관리 서비스 Writon에서 참여자들을 효율적으로 관리할 수 있도록 만든 관리자 서비스

3. 페이지 링크

⭐️ www.admin.writon.co.kr ⭐️

4. 사용 방법

아래의 예시 ID, PW를 입력하면 모든 기능을 사용해볼 수 있습니다.

ID: login-test  
PW: 1234

💁‍♂️ 팀원

김승훈
Frontend

🖥️ 화면 구성

로그인 페이지	온보딩 페이지
이메일로 전달받은 아이디와 비밀번호로 로그인을 할 수 있습니다.	첫 로그인시 조직을 생성하고 유저에게 초대 메일을 보낼 수 있습니다.

챌린지 참여 현황 페이지(표)	챌린지 참여현황 페이지(달력)
유저들이 챌린지에 참여했는지의 여부를 표로 확인할 수 있습니다.	유저들의 챌린지 참여도를 달력으로 날짜별로 확인할 수 있습니다.

챌린지 정보 페이지	챌린지 질문관리 페이지
챌린지의 모든 정보를 확인하고 기본 정보를 수정할 수 있습니다.	챌린지의 질문들을 확인 및 수정할 수 있습니다.

참여자 정보 페이지	참여자 초대 페이지
유저들의 정보를 표로 확인하며 검색이 가능합니다. 유저들의 정보를 엑셀 파일로 추출하거나 유저 강퇴 기능을 제공합니다.	유저들에게 챌린지 초대 메일을 보낼 수 있습니다. 이미 발송한 메일 내역을 확인할 수 있습니다.

조직 정보관리 페이지	조직 온보딩 관리 페이지
조직의 정보를 확인 및 수정이 가능합니다.	새로운 유저의 온보딩 화면을 미리보며 수정이 가능합니다.

🛠️ 주요 기능

⭐️ 유저 인증 기능

JWT 인증 방식과 axiosInterceptors 기능을 사용해서 제작

1. 로그인

  - JWT 인증 방식을 사용해서 토큰을 전달받고 관리자의 조직 정보와 함께 localStorage에 등록
  - 아이디나 비밀번호가 일치하지 않을 경우 에러 메세지를 화면에 띄움

2. 토큰 재발급

  - accessToken이 만료될 경우 재발급이 자동적으로 이루어지고 refreshToken이 Redis에 남아있다면 새로운 accessToken을 전달받음
  - axiosInteceptors 기능을 사용해서 전역에서 일관적으로 통신 관리

3. 로그아웃

  - localStorage의 정보를 삭제하고 Redis에 refreshToken을 제거

⭐️ 엑셀 기능

xlsx 라이브러리를 사용해서 제작

1. 엑셀 파일 추출

  - 참여자 정보 페이지에서 유저와 항목을 선택한 뒤 엑셀 파일로 추출 가능

2. 엑셀 데이터 입력

  - 참여자 초대 페이지에서 파일 양식을 다운받은 뒤 이메일 목록을 입력한 후 파일을 첨부하면 메일 내역 업로드가 가능

⭐️ 표 기능

전부 직접 제작

1. 검색 기능

  - 챌린지 참여 현황 페이지와 참여자 정보 페이지에서 닉네임 등으로 원하는 유저 검색 가능

2. 정렬 기능

  - 챌린지 참여 현황 페이지에서 이름순, 참여순, 미참여순으로 정렬할 수 있음

3. 필터 기능

  - 챌린지 참여 현황 페이지에서 원하는 날짜 기간을 설정해서 데이터를 필터링할 수 있음
  - 참여자 정보 페이지에서 원하는 정보 항목을 선택해서 데이터를 필터링할 수 있음

4. 복사 기능

  - 참여자 정보 페이지에서 유저의 계좌번호와 이메일을 클립보드에 복사할 수 있음

5. 강퇴 기능

  - 참여자 정보 페이지에서 원하는 유저를 다중 선택해 강퇴할 수 있음

⭐️ 달력 기능

일자 관련 작업은 date-fns 라이브러리를 사용하고 작은 달력은 react-calendar 라이브러리를 커스텀하여 사용

1. 펼치기 기능

  - 챌린지 참여 현황 페이지에서 달력이 크기 때문에 접었다 폈다 할 수 있는 기능을 제공
  - 기본적으로는 달력이 닫혀있고, 닫혀있을 경우에는 오늘 날짜가 속해있는 주만 달력에 보여줌

2. 요일, 일자 선택 기능

  - 챌린지 정보 페이지에서 챌린지 진행 날짜를 선택할 때 개별적으로 원하는 일자를 선택할 수 있음
  - 달력 상단에 있는 요일 버튼을 누르면 챌린지 진행 기간에 속해있는 일자 중 특정 요일을 일괄적으로 선택할 수 있음
  - 선택한 모든 일자를 초기화하는 기능 제공

3. 모달 기능

  - 챌린지 정보 페이지에서 챌린지 진행 기간을 설정할 때 달력 모달을 띄워서 날짜를 선택할 수 있음
  - 챌린지 참여 현황 페이지에서 필터링하고자 하는 기간을 선택할 때 달력 모달을 띄워서 두 개의 날짜를 선택할 수 있음

⭐️ 이메일 기능

Gmail의 official 메일과 연동하여 발송

1. 전송 기능

  - 참여자 초대 페이지와 온보딩 페이지에서 입력된 이메일을 기반으로 일괄적으로 메일을 전송할 수 있음

⚙️ 기술 스택

Language / Framework

React	Typescript

Library

Axios	Zustand	Styled-Component	React-Query

Infra

Vite	Vercel

Tools

Notion	Github	Figma