학원 관리 솔루션 Tims FE 개발

• 2019.05 ~ 2019.11 재직
• React.Js, lodash, scss, Javascript(es6), react router, webpack, babel, eslint(standard js), stylelint, reset css, material-ui 활용하여 개발
• 컴포넌트 개발 시, Container-Presenter 패턴을 활용하여 개발

1. 고객 관리용 사내 admin FE 개발

• B2B 고객 및 영업 관리를 위한 admin FE 개발
• 개발 기간: 3주

1.1. 고객 가입하기 (학원 지점, 학원 브랜드, 직원)

• 고객 가입 및 고객 조회 가능
• 가입 분류에 따라 다른 가입 화면

1.2. 지점 현황

• 각 지점(고객)의 포인트 입금 내역, 포인트 차감 내역, 지점 이슈 조회 가능
• 지점명 검색 가능

1.3. 영업 현황

• 영업 사원 및 영업 에이전시의 영업 활동 조회 가능

1.4. 입금 현황 (포인트 관리)

• 입금에 따른 포인트 추가
• 포인트 입금 및 차감, 사용 내역 조회 가능
• 세금 계산서 발행 가능

2. 고객용 admin 개발

• B2B 고객용 admin FE 개발
• React.Js, lodash, scss, Javascript(es6), mobx, react router, webpack, babel, eslint(standard js), stylelint, rechart(차트 라이브러리), reset css, material-ui 활용하여 개발
• 개발기간 : 4개월

2.1. 회원가입 및 로그인

• input component 개발 - 회원 가입 시, 입력 값에 따른 변화 컴포넌트 개발 (미입력, 적합, 부적합 등)
• 로그인 및 회원가입 프로세스 구현

2.2. 대쉬보드 개발

• 로그인 후, 첫 화면인 대쉬보드 개발
• React chart인 ReChart 라이브러리를 활용하여 차트 컴포넌트 개발
• state 관리를 위해 mobx 라이브러리 활용
• 기간 별 조회 가능

2.3. 기타 운영 화면 개발

• 재학생, 직원, 학부모, 행사, 수납, 상담, 강좌 등 총 15개 메뉴에 대한 화면 개발
• 전체적인 플로우 목록(리스트) -> 입력/수정 -> 상세로 구성
• 다른 메뉴와 컴포넌트 디자인 동일
• 상담 관리 기능을 예로 설명

1. 상담 리스트

• 기간 조회, 소팅(필터), 리스트 개수 선택(10, 30, 50개), 이름 검색 가능
• table, pagination, 검색, 필터 컴포넌트 개발

2. 상담 상세

• 리스트 item 클릭 시, 상세 화면으로 이동
• 상담 내용에 대한 댓글 및 대댓글 작성 가능

3. 상담 등록/수정

• 상담 관련 정보 입력 및 수정