Describe Task
모듈화를 잘 했으니 테스트코드도 작성해본다

• 서버 테스트코드
• 프론트 테스트코드

Relative Issue
서버 테스트코드 작성후 프론트도 작성할 예정
서버는 테스트 코드 먼저 작성 후 기능 만들기 (야매 TDD)

Is your feature request related to a problem? Please describe.
처음 큐브가 보일때 살짝 위에서 떨어지는 모션이 있었으면 좋겠다

Describe the solution you'd like
통통 살짝 튀다가 가만히 있는 그런 모션

재현 과정

1. 큐브의 윗면( 파란색으로 칠한 면) 을 클릭
2. 마우스를 화살표 방향(양옆)으로 드래그한다
   

예상된 결과

큐브가 통째로 움직이거나, 아예 움직이지 않는다

실제 결과

다음처럼 움직인다.

Is your feature request related to a problem? Please describe.
사진을 추가하여 큐브 색상 인식하는 기능

Describe the solution you'd like
빈 큐브에 버튼을 눌러 사진을 입력한다 (카메라 찍기, 사진 업로드)
사진대로 색깔을 인식하여 큐브 텍스쳐 생성

아래 부분은 고민이 필요함

• 한 면마다 그때그때 인식할까? => 색깔 인식이 불편함
• 모두 올리고 인식할까? => 사용자가 불편함

Describe alternatives you've considered
오류 처리

• 색깔 파레트가 있어 오류난 색상은 수정 가능 (6가지 색상)
• 큐브조각을 터치하여 색상 파레트에서 색상 선택 가능 (텍스쳐 색 수정 기능)

Additional context

• 웹앱????
• 바닐라로 웹앱을 만들 수 있나?

Describe Task

webpack에 모든 파일을 다 넣어서 번들링하는중
=> 크기가 너무 크다!

• three.js
• tween.js
  외부로 번들링하지 않고 사용할것

웹팩 적용하여 깃허브 서버로 돌리기

• 서버는 추후 증설
• Node.js로 서버 구현

• 이슈 템플릿 만들기
• notion에 있는 프로젝트 관리 => 깃헙 프로젝트로 옮기기

• Cube.core.center -> Cube.core 로 변경
• getPlain(x,y,z) => getWorldPlane으로 변경

이슈 재현 과정

1. 큐빅 몸통을 반시계로 회전
2. 큐빅 앞면을 반시계로 회전
3. 큐빅 오른쪽면을 앞방향(반시계)로 회전시 버그 발생

결과적으로는 동일한 면을 회전시키나 방법이 다른 경우는 버그가 발생하지 않음.

1. 큐빅 오른쪽면을 뒷방향 (시계)로 회전
2. 큐빅 몸통을 반시계로 회전
3. 큐빅 오른쪽면을 앞방향(반시계)로 회전시 버그 발생하지 않음

원인 추론

큐빅이 포함된 layer를 선택할때 발생하는 것으로 생각됨

이슈 #11 과 연관됨

Describe Task
웹팩 데브서버를 이용하여 개발할 예정
사진 파일 (텍스쳐 등) & 모듈들 import 경로 수정이 필요하다
왜? 서버에서 모든 파일을 서브할수없기 때문이다.

Relative Issue
related issue #6

Is your feature request related to a problem? Please describe.
자유롭게 회전하기에 폭발 버튼 추가

Describe the solution you'd like
폭발 버튼 누르면 큐브 내부에서 폭발이 일어나서 큐빅이 후두둑 떨어지고 큐브는 산산조각난다
(물리엔진 필요)
복구 버튼을 누르면 다시 큐브가 휘리리릭 하고 코어에 돌아가서 붙는다

Describe Task
현재 빌드 과정

1. index.html 에서 <script>~ <script> 주석 처리
2. npm run build
3. /dist/ 폴더의 내용을 public으로 복사 (서버에서 이용할 용도)
4. index.html의 <script>~<script> 주석 처리 해제

위 과정을 gulp를 이용하여 자동화할수 있을 것 같다.

Is your feature request related to a problem? Please describe.
큐브가 작아서 잘 안눌린다는 의견이 있다
모바일에서 두 손가락으로 확대 / 축소되는 기능을 만들면 좋겠다

Describe the solution you'd like
줌인 / 줌아웃 기능
화면에 꽉 찰 정도로만 줌인/ 원래 크기까지만 줌아웃

큐브 상태에 따라 회전방향이 동일하지 않음
같은 위치에서 같은 방향으로 마우스를 이동하더라도 큐브의 기존 회전상태에 따라 결과가 달라짐
회전 알고리즘을 수정할것

버그가 정확히 어떤 과정으로 발생하는지는 파악되지 않았으나,
버그를 재현하는 방법 중 한 가지를 영상으로 첨부함

1. 맨앞면 반시계 회전
2. 큐브 몸통 반시계 회전
3. 맨앞면 반시계 회전
4. 큐브 몸통 반시계 회전
5. 맨앞면 반시계 회전 (버그발생!)

Describe the bug
큐브의 한 레이어만 움직일때는 역치값이 적용되지 않는다.
큐브 몸통은 역치값대로 회전이 동작함
그러나 레이어만 움직일때는 역치값과 상관없이 45도 이상 회전하여야 회전한다

To Reproduce
Steps to reproduce the behavior:

1. 몸통을 회전
2. 조금만 움직여도 회전하는것을 확인
3. 한 레이어만 회전
4. 45도를 움직여야 회전하는 것을 확인

Expected behavior
몸통과 레이어의 역치값이 같다

Additional context
레이어 역치값을 30도로 줄이는 것이 좋을 것 같다.

Describe the bug
마우스를 한 방향으로 이동 후 다른 방향으로 움직이면 큐빅 레이어가 대각선으로 꺾인채로 돌아간다.
컴퓨터와 모바일에서 둘 다 발생한다.

To Reproduce
Steps to reproduce the behavior:

1. 마우스를 좌우 (혹은 위아래)로 많이 움직인다.
2. 마우스를 위아래 (혹은 좌우)로 많이 움직인다.
3. 마우스를 놓는다
4. 큐브가 꺾인다

Expected behavior
처음 움직였던 방향대로(step 1에서 움직인 방향) 큐브가 돌아간다

Screenshots
https://user-images.githubusercontent.com/26290571/108352602-6eeab300-722a-11eb-963f-26fe89ce5c11.mp4

Desktop (please complete the following information):

• OS: Window 10
• Browser : Microsoft Edge
• Version 88.0.705.68

Smartphone (please complete the following information):

• Device: Galaxy S10+
• Browser 삼성 기본 브라우저

고민 1.

리액트를 도입해야 할까?
이유는?

고민 2.
컴포넌트와 상태관리를 도입해야 할까?
이유는?

고민 3.
바닐라 js로 상태관리 및 컴포넌트를 만들어 재사용할 순 없을까?

mouseleave, mouseout 발생시 큐브가 멈춤

• 원위치로 돌아가거나 다음 위치로 넘겨가도록 수정하기
• 모바일도 적용할것

• 큐브 조각을 일반 직육면체 평면에서 입체적인 모양으로 변경 ( ExtrudeGeometry 이용)
• Mesh를 만화형태로 변경 ( MeshToonMaterial)
• 큐브조각에 붙이는 스티커를 plane 대신 Texture로 변경 가능?

Describe the solution you'd like
사용법을 알려주는 팝업 오버레이가 있으면 좋겠다.

Describe Task
버전 1.0.0 브랜치 생성
터치 에러 고친것도 머지하여 브랜치 생성할 것

참고
https://gmlwjd9405.github.io/2018/05/11/types-of-git-branch.html

1. develop 작업
2. release 1.0.0 branch
3. 1.0.0 branch & develop 에 둘다 커밋
4. 완료 후 master에 1.0.0 merge
5. 커밋에 1.0.0 tag 부여
6. 1.0.0 branch 삭제

2.0.0는 서버작업과 병행

Describe the bug
애니메이션이 동작하는 도중에 다시 마우스를 조작하면 큐브가 꼬인다

To Reproduce
Steps to reproduce the behavior:
모바일 기준으로 확인함

1. 큐브를 빨리빨리 휘적휘적한다
2. slerp 애니메이션이 끝나기 전에 터치한다
3. 꼬인다

Expected behavior
애니메이션이 수행되는 도중에는 이벤트 리스너가 동작하지 않아야 한다

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: 갤럭시 S10
• Browser: 카카오톡 브라우저

Additional context
Add any other context about the problem here.

깃허브 페이지로 샘플 페이지 구현
큐브 이동 페이지의 경우 서버의 역할이 없어서 가능할듯하다

코드에 클린 아키텍쳐를 적용한다

• 비즈니스 로직과 UI 로직을 분리
• 클린 아키텍쳐 책 보고 개념 잡기

Is your feature request related to a problem? Please describe.
이벤트 리스너 삭제 없이 객체만 삭제하는 경우 메모리 누수가 발생함

Describe the solution you'd like
객체를 삭제할때 (큐빅 삭제 등) 이벤트 리스너도 삭제해주어야 한다.
나중에 리액트 쓸때도 컴포넌트 삭제 전에 리스너 삭제해야 할듯.

+)
큐빅 하나하나에 이벤트 달면 또 메모리 누수 일어나지 않나?
매번 이벤트 추가 삭제해야하지 않나?
이벤트 위임도 살펴볼 것

참고
https://ui.toast.com/weekly-pick/ko_20160826