 |
 |
 |
 |
 |
|---|---|---|---|---|
| [팀장] 김다윤 | 김채정 | 박재현 | 오영재 | 정덕우 |
- 투자 관리 서비스의 관리자 기능 구현
- 작업기간: 2022.09.20 ~ 2022.09.25
git clone
> git clone https://github.com/wanted-9team/pre-onboarding-assignment-week-4-1-team-9
> cd pre-onboarding-assignment-week-4-1-team-9서버 및 데이터
# data_generate directory
> cd data_generate
# 관련 패키지 설치
> npm install
# 더미 데이터 생성
> npm run gen
# 로컬 서버 실행
> npm start클라이언트
# preface directory
> cd preface
# 관련 패키지 설치
> npm install
# 프로젝트 실행
> npm run start- 로그인 및 리다이렉팅 처리 및 사용자 이메일 표기
-
사용자 페이지
2022-09-25.8.06.54.mov
-
사용자 편집
-
사용자 삭제
-
계좌 수정 및 삭제, 페이지네이션
- 목록에서는 활성화 여부, 임직원 계좌 여부를 필터링 할 수 있어야 합니다.
- 리스트 페이지에서는 검색이 가능해야 합니다.
- 페이지네이션이 되어야 합니다.
- 임의로 신규 사용자를 추가할 수 있어야 합니다.
- 잘못 생성한 사용자를 삭제할 수 있어야 합니다.
- 개명을 한 사용자를 위해 사용자명을 변경할 수 있어야 합니다.
- 목록에서는 브로커명, 계좌 활성화 여부, 계좌 상태를 필터링 할 수 있어야 합니다.
- 리스트 페이지에서는 검색이 가능해야 합니다.
- 페이지네이션이 되어야 합니다.
- 각 사용자, 계좌의 상세 페이지는 획득 가능한 대부분의 정보를 표시해주시면 됩니다.
- Sider 메뉴에서는 현재 보고 있는 화면에 해당하는 메뉴가 하이라이트 되어야 합니다.
- 새로고침을 해도 로그인 상태가 유지되어야 하며, 상태에 따라 기존에 머무르던 화면이 그대로 보여야 합니다.
- 계좌 리스트에서 계좌번호를 누르면 계좌상세 화면으로 이동합니다.
- 사용자 상세에서 사용자의 계좌목록이 보여야 합니다.
- 계좌 목록에서 각 계좌 상태별로 필터링이 가능해야 합니다.
- 수익률이 플러스인 계좌의 총자산 금액은 빨간색, 원금과 동일한 경우 검정색, 마이너스일 경우 파란색으로 보여줘야 합니다.
- 계좌 목록에서 broker_id 에 해당하는 실제 브로커명 (OO투자증권) 이 보여야 합니다.
├─ data_generate
└─ preface
├─ public
└─ src
├─ api
├─ components
│ ├─ blankPage
│ ├─ footer
│ ├─ header
│ └─ sider
├─ data
├─ pages
│ ├─ accounts
│ │ ├─ accountDetails
│ │ ├─ accountFilter
│ │ │ └─ components
│ │ └─ accountList
│ │ └─ components
│ ├─ login
│ │ └─ components
│ ├─ main
│ └─ user
│ ├─ userDetails
│ │ └─ components
│ └─ userList
│ └─ components
│ ├─ daumPost
│ └─ userFormDialog
├─ redux
│ ├─ middleware
│ ├─ saga
│ └─ slice
├─ store
├─ utils
├─ App.js
└─ index.js
- Material-Ui에는 자주 사용되는 기능들을 Component/Api로 제공이 되어 쉽게 디자인을 만들 수 있습니다.
- styledcomponents 나 emotion 등의 스타일 라이브러리를 같이 사용 할 수 있다는 점이 장점입니다.
- Rdux의 단점으로 꼽히는 보일러플레이트 코드가 줄어듦
- 보이럴플레이트 코드가 많으면 코드의 예측가능성 측면에서 떨어지고 코드해석이 어려워져 실수를 유발함
- 패키지 의존성을 줄여준다 (redux devtool, reselect 등 많은 라이브러리들이 내장되어 있다)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent