jeeseongmin/chart-management-system

📗 Custom Chart System

Chart System

Outline

내가 원하는 차트 모양을 만들어보고, 해당 차트의 옵션들을 복사하여 사용할 수 있는 기능.

Needs

echart는 원하는대로 커스텀하기에 좋지만, 자유도가 높다보니 사용하기에 좀 어려울 수 있다.

그렇기 때문에 사용자가 실제로 UI를 클릭해서 만들어보고 원하는 모양이 나왔을 경우에 그 옵션을 가져다가 사용할 수 있도록 한다면, 편리하게 echart를 응용할 수 있게 된다.

Work Flow

1. 워크 스페이스를 생성한다.
2. 차트를 생성한다.
3. 차트 생성 시 모달 창 내에서 여러가지 설정이 가능하다.
   1. 차트 타입
   2. 차트 명
   3. 데이터 선택 (Excel로 직접 입력, 예시 데이터 선택 가능)
   4. 각종 옵션 (추후 정리)

Data Modeling

워크스페이스

Definition

개인이 여러 차트를 만들어 사용할 수 있는 작업 공간

Schema

const workspaceSchema = mongoose.Schema({
  name: {
    type: String,
    maxlength: 30,
  },
  ...
})

차트

Definition

개인이 UI 설정값들을 사용하여 보여지는 차트

Schema

const chartSchema = mongoose.Schema({
  name: {
    type: String,
    maxlength: 20,
  },
  description: {
    type: String,
    maxlength: 30,
  },
  ...
});

유저

Definition

본인의 워크스페이스를 만들고 차트를 테스트해볼 수 있는 권한을 가진 개인

Schema

const userSchema = mongoose.Schema({
  name: {
    type: String,
    maxlength: 30,
  },
  email: {
    type: String,
    trim: true,
    unique: 1,
  },
  password: {
    type: String,
    maxlength: 10,
  },
  role: {
    type: Number,
    default: 0,
  },
  token: {
    type: String,
  },
  ...
});

TASK

FRONTEND

• 차트 관리 페이지
• 차트 생성 페이지
• echart 라이브러리 검토
• ...

BACKEND

• 데이터 모델링 및 스키마 정의
• 예시 데이터 구축 (워크스페이스, 차트)
• 카카오톡 로그인
• ...

chart-management-system's Issues

[FRONT] UI 테스트 환경 구축

목적
react-testing-library를 활용한 UI 테스트 환경 구축

환경 세팅

목적

• sass 환경 구축
• storybook 세팅
• UI 테스트 환경 세팅 (reat-testing-library)
• Redux 환경 세팅

[BACK] node.js 서버 구축

목적
nodejs 웹 서버 구축

체크 리스트

• Front 폴더 분리
• 관련 패키지 설치 (express, nodemon, cors, http-proxy-middleware)
• Routing 처리

[FRONT] 워크스페이스 헤더 UI 개발

목적

워크스페이스 관련된 헤더 UI를 추가로 개발한다.
최상단 헤더처럼 고정되어 스크롤되지 않도록 한다.

storybook 세팅

목적
storybook 환경 세팅

[BACK] model 및 schema 구성

목적
Backend에서 사용할 model과 schema를 작성한다.

목록

• Workspace
• Chart
• User

[FRONT] 메뉴바 UI 및 함수 구성

목적
메뉴바 토글 시 사이드바가 나타나도록 UI 및 함수를 구성한다.

할 일

• redux 수정
• 사이드바 UI 구성
• 메뉴바 토글 함수 적용
• 사이드바 컨텐츠 개발

[BACK] mongo DB 설정

목적
mongo DB를 설치해서 연결한다.

체크 리스트

• mongo DB 설치
• mongo DB 연결

[FRONT] 기본 레이아웃 구성

목적
차트 관리 레이아웃을 구성한다.

• 헤더 구성
• 메뉴 바 구성
• 컨텐츠 구성

예시 이미지

[BACK] 서버 디렉토리 구성

구성

백엔드 쪽의 디렉토리 구성을 변경한다.

• routes
• models
• controllers
• db

프로젝트 개요 정리

목적

프로젝트를 진행하는 데에 필요한 내용들을 README에 정리한다.