코드스테이츠 Immersive 6기 데모데이 발표자료입니다. https://codestates.com/

1. Customizable
SpreadSheet
for Smart Users
by gal. Sergei
collabo with Jober

2. Context
• Collaboration
• Features
• Tech Stack
• Project Demo
• Reference
• Libraries
• Technical Issues
Context

3. iDESIGN
by HiSlide.io
3
협업 기업 퇴사자 급여 계산하기
급여대장 제공
직원별 급여명세서
자동발급
급여 관리
1:1 인사노무상담
인사업무서식 제공

4. iDESIGN
by HiSlide.io
4
급여 대장 - HandsonTable
경제적 부담 및 부족한 기능

5. iDESIGN
by HiSlide.io
Features
셀 선택 기능
#1 드래그 선택
#2 Shift & Cmd / Ctrl 키를 통한 선택
Shift 클릭 - 시작 지점 ( 바로전에 선택된 셀) 부터 끝
지점 까지의 모든 셀 선택
#3 헤더 클릭을 통한 전체 선택
Cmd/Ctrl 클릭 - 추가적으로 셀 선택 및 선택 해제

6. iDESIGN
by HiSlide.io
Features
- 방향키로 셀이동
- 우클릭 메뉴
TextAlign#2KeyBoardNav#1

7. iDESIGN
by HiSlide.io
Features
- 각 컬럼의 합산된
(reduced) 값 표시
( 함수 설정 가능 )

8. iDESIGN
by HiSlide.io
8
Features
계층적 헤더 - Nested Headers

9. iDESIGN
by HiSlide.io
9
Features - Nested Headers
Tree형 자료구조로 구현
.01
부모자식 관계
부모노드 ∋ 자식노드
.02
BFS, DFS (pre-order)
를 통한 효율적인 서치
Breadth / Depth
First-Search

10. iDESIGN
by HiSlide.io
10
Features - Nested Headers
헤더 접기 - 첫째 자식만 보이기

11. 헤더가 접혔을 때
값이 변할 때
=> Return / Enter Key가 눌렸을 때
Features
전 / 후 처리 함수 (pre / post processor)
1.전처리 함수 실행
- 값의 변경 or NOT
- IF 값을 변경한다면 어떤값으로
변경할지 설정
2.전처리 함수에 따른 변경
3.후처리 함수 실행
1.DB에 저장 or NOT
2. IF 저장한다면 저장 값 설정
Life Cycle

12. iDESIGN
by HiSlide.io
Tech stack
- React.js
: 한 셀씩 컴포넌트화
- Redux
: 헤더에서 전체상태 제어

13. iDESIGN
by HiSlide.io
Tech stack
- Sass
: 가독성과 변수 활용
- Styled-components
: 컴포넌트별 변수 대입

14. iDESIGN
by HiSlide.io
14
References
Заголовок
공식 문서
20%
Stack-Overflow
15%
Github
25%
w3schools
25%
MDN
15%

15. iDESIGN
by HiSlide.io
15
Libraries
- classnames : React + Sass
s
- semantic - ui - react :
Dropdown + Menu

16. iDESIGN
by HiSlide.io
16
Technical Issues
• Nested Headers :
상위 헤더에서 하위 헤더의 정보를 필요

17. iDESIGN
by HiSlide.io
17
Technical Issues
기존의 방식 : [1,[1,3],2], [1,1,[1,1,1],[1,1]]
현재 방식 : label colspan collapsible
isCollapsed hidden
children

18. iDESIGN
by HiSlide.io
18
Technical Issues
• semantic-ui-react :
스프레드 시트에 맞게 스타일링

19. iDESIGN
by HiSlide.io
19
Technical Issues
• event-handling :
keydown
up, down, move, click, dbclick, contextmenu
start, end, move
onChange, onFocus, onBlur

20. iDESIGN
by HiSlide.io
20
Technical Issues
• event-handling :
이벤트 겹침 : mousedown, click, touchdown
element 접근 : 공통 부모를 이용한 재귀
keyboard navigating: 공통 자식를 이용한 재귀

21. iDESIGN
by HiSlide.io
21
Technical Issues
• Selection : 경우의 수
• 열 헤더: click, drag, shift &ctrl/cmd
• 행 헤더: click, shift &ctrl/cmd
• 각 셀: drag, shift &ctrl/cmd

22. Questions &
Answers
sergei@codestates.com
Contact