일정 만들기 업그레이드
사용배경
어느 정도 개발을 완료했다고 생각했고 아는 분께 테스트를 맡겼다. 피드백으로 다음과 같았다.
1. 일정을 만들 때 바로 생성해서 그 이후로 수정하는 거 말고 일정을 만들자 마자 바로 수정할 수 있는 폼이 나왔으면 좋겠다.(구글처럼)
(before)
(예시 구글)
차이점은 전에 기능은 클릭하는 순간 먼저 만들고 그 이후로 수정하거나 삭제해야한다.
하지만 구글에서는 클릭하는 순간 일정 수정폼이 바로 나온다.
사용자가 실수로 클릭할 수도 있고 한 번에 작업하는 것이 사용성 측면에서 더 좋은 것 같다는 피드백을 받았다.
2. 수정폼이 나왔을 때 바로 제목 input태그에 포커스가 가도록 하기
(before)
(예시 구글)
차이점은 구글에는 바로 제목추가 input태그에 포커스가 가 있다. 이러한 사소한 것이 사용하기 더 좋다는 피드백을 받았다.
3. 글 저장할 때 제목 부분, 내용 부분이 비어있을 때 alert창 띄우는 것 대신 포커스를 옮기도록하기
(before)
경고창이 뜨는 것이 아니라 포커스가 옮겨지도록 하는 것이 더 좋을 것 같다는 피드백을 받았다.
구글 분석
구현하기 전에 구글을 분석해 보았다.
두 가지 이미지의 차이점은 첫 번째 이미지에서 일정 오른쪽에 폼이 생겼다는 것
두 번째 이미지에서 일정 왼쪽에 폼이 생겼다는 것이다.
즉 스케쥴 표 밖으로 일정 폼이 나간다면 위치를 바꿔주어야 한다는 것이다.
그리고 폼은 무조건 화면 중앙에 온다는 것이다.
이것 처럼 기존의 어떠한 요소들보다 항상 위에 와 있어야 한다는 것이다.
타임바, 일정요소 들 보다 위에 와 있는 것을 볼 수 있다.
일정 폼 이외에 화면을 클릭하면 저절로 취소가 된다.
저장버튼을 눌러야지 실제로 저장이 된다.
구현
1. 사용자가 화면을 클릭했을 때 발생하는 이벤트 만들기
사용자가 일정표 div에 클릭했을 때 발생하는 onMouseDown 이벤트이다. 새로 생성할 div값의 좌표, 높이, 넓이, 시작시간, 종료시간, 제목, 내용등을 하위 컴포넌트 함수 인자로 전달한다.
즉 부모 컴포넌트에서 이벤트가 발생하면 부모 컴포넌트에서 계산한 정보를 가진 div를 하위 컴포넌트에 전달하는 것이다.
2. 하위 컴포넌트 함수 구현하기
해당 컴포넌트에서 실행할 함수를 정의한다. setShow를 true로 바꿔주면 해당 폼을 출력하도록 렌더링하고 setDivcontent하게 되면 해당 컴포넌트에서 전달받은 div정보를 관리하도록 하였다.
보게 되면 show가 true면 해당 컴포넌트를 렌더링하고
삼항 연산자 중 그렇지 않다면 아무것도 출력을 하지 않는다.
정리하자면 부모컴포넌트에서 클릭을 하면 ClickForm이라는 하위 컴포넌트 함수를 인자와 함께 전달하여 실행시킨다. 하위 컴포넌트 함수를 실행하면 해당 컴포넌트를 전달받은 인자값을 바탕으로 렌더링 한다.
결과
2. 스케쥴 표 밖으로 일정 폼이 나간다면 위치를 바꿔주기
우리는 부모 컴포넌트로 부터 좌표값을 전달받았다. top, left값을 안다.
위에 이미지를 통해 알아보자
전달받은 좌표값이 top, left = 200, 100이라고 가정하자
만약 폼의 width가 100이라면 left-width = 0이므로 그리기가 가능할 것이다.
만약 폼의 width가 150이라면 left-width = -50이므로 그리기가 불가능 할 것이다. 이때 오른쪽으로 그려주면 된다.
이것을 코드로 나타내보자
폼의 너비 left, top을 구할 수가 있다. 부모 컴포넌트로 전달받은 left, top을 사용하면
폼 left => 부모 left - 350(폼의 너비) - 10(여백)
만약 음수가 나오면 범위를 넘어 간 것이기에
폼 left => 부모 left + 200(일정 너비) + 10(여백)을 해준다.
결과
3. 기존의 어떠한 요소들보다 항상 위에 와 있게 하기
zIndex를 사용해야 한다. zIndex의 중요한 점은 범위는 div내부에서 이다.
divlist 영역 안에 ClickForm컴포넌트, 타임바, 수평선, 일정 영역이 포함되어 있다. 즉 이 범위내에서 zIndex가 적용된다는 것이다.
ClickForm 컴포넌트를 항상 위에 오고 싶다면 ClickForm의 zIndex를 높히면 된다.
ClickForm의 최상단 div이다. ZIndex를 9999로 하여 가장 높게 오도록 하였다.
결과
4. 일정 폼 이외에 화면을 클릭하면 저절로 취소
이것은 되게 쉽게 해결 하였다.
ClickForm을 보자
최상단 div에는 일정표 영역만큼의 높이와 넓이를 가진다.
따라서 onMouseDown이벤트가 모든 일정표 영역에서 통한다는 것이다. 하지만 ClickForm의 부모 컴포넌트에도 onMouseDown 이벤트가 있으므로 버블링을 막는다.
하지만 이렇게 한다면 폼도 클릭했을 때 취소가 될 것이다. 폼에서도 onMouseDown이벤트를 추가하여 버블링을 막으면 폼 div의 부모 div onMouseDown 이벤트가 실행이 안될 것이다.
5. 제목 input에 포커스 주기
발생한 오류
기존에 input에 포커스를 주기 위해서 다음과 같은 코드로 하였다. 하지만 포커스가 잡히지 않았다. 처음에는 비동기처리때문에 titleForm태그가 렌더링 되기전에 focus를 호출해서 안되나? 해서 콘솔로 찍어보았다. 하지만 해당 태그가 잘 찍혔다. 도무지 이해가 되지 않아서구글링을 해보았는데 setTimeout을 하면 된다고 했다. setTimeout으로 해결을 했지만 원인을 파악하지는 못했다.
CSS
구글처럼 div 아래에서 위로 fade in해주기
구글링해서 찾아서 복붙했지만 제대로 이해하지는 않았다. 나중에 CSS대해서 공부해야 겠다.
