화면 구성하기 - 0. 화면 설계

화면 구조는 기본적으로 상단 메뉴, 좌측 메인 메뉴 중앙 컨텐츠로 구성

 

탑메뉴

• 좌측에는 프로그램 아이콘
• 중앙에는 작업 타이틀
• 우측에는 홈버튼, 유저 프로필 버튼, 설정 버튼 같은거 추가. 필요하면 검색창도 추가

메인 메뉴

• 익스팬더
  • 맨 위에는 열고 닫을 수 있는 익스팬더 버튼이 있어야 된다.
  • 열고 닫을때 아이콘이 열리고 닫히고 바껴야 된다.
  • 열고 닫을때 컨텐츠 영역도 그에 맞게 바껴야 된다.
• 메뉴
  • 왼쪽에 아이콘, 그 옆에 메뉴 이름이 나온다.
  • 클릭하면 화면이 열린다.
  • 화면이 열리면 해당 메뉴에 하이라이트 적용
  • 열려있는 화면을 다시 누르면 해당 화면이 있는 위치로 스크롤 한다.
• 메뉴 그룹
  • 메뉴를 담는 메뉴 그룹도 존재
  • 메뉴 그룹이 메뉴 그룹을 담는건 안된다.
  • 위아래로 열리는 익스팬더가 달린다.
  • 메뉴가 접힌 상태에서 메뉴 그룹을 누르면 플로팅 형태로 상세 메뉴 목록이 나온다.
• 메뉴 타입
  • 화면이 열리는 OpenView 타입의 메뉴가 있고
  • 기능이 수행되는 Action 타입의 메뉴가 있다
• 권한 처리
  • 로그인 이후에 사용자 그룹에 따라서... 등 메뉴 접근 권한 처리
• Enable 처리
  • 특정 데이터가 불러와지기 전에 열리면 안되는 화면들이 있다.
  • 로그인 하기 전에 메뉴 아이템 상태 관리
  • 데이터가 불러와지면 열리도록 메뉴 아이템 상태 관리

컨텐츠

• 기존에 저부분 문제가 탭 하나만 있어서 동시에 여러 화면을 볼 수 없다는게 컸다.
• 한번에 여러 화면을 표시할 수 있어야 한다.
• 기존에 golden-layout을 쓰려고 했는데 잘 안돼서 현재는 react-grid-layout을 사용중

1. 탑 메뉴
2. 메인 메뉴
3. 컨텐츠 영역
4. 로그인
5. 인증 라우팅