작업 상세 화면 구현

초기 Router 설정

• 
• 위와 같이 절대 경로로 설정해서, TaskDetail의 URL을 http://my-domain/task/:taskId로 변경해주려고 했다.
• 이 경우 문제점은 다음과 같다.
  • 프로젝트 화면을 거치지 않고 http://my-domain/task/:taskId로 직접 들어오는 경우, params에 projectId가 없어서 프로젝트 화면이 렌더링되지 않는다.
  • 따라서 project 화면 하위에 있는 dialog가 생성될 수 없다.

독립 Router 설정

• 위와 같은 문제로, task의 Router를 project의 children이 아닌, 동등한 depth의 Router로 변경해주었다.
• 이에 따라, dialog를 작업 상세 컴포넌트에 넣어주었다.
• 
• 직접 URL로 들어오는 경우, 프로젝트에서 작업 클릭을 통해 들어오는 경우 모달을 모두 지원한다.
• 이 경우 문제점은 다음과 같다.
  • background에 project의 작업 list를 그려줄 수 없다.

마지막 Router 설정

• project의 task list를 그려주기 위해, 자식 컴포넌트로 다시 변경하면서, children으로 Router를 이전했다.
• 
• dialog 또한, 부모 컴포넌트인 projectContainer에서 띄워주도록 수정했다.
• 이 과정에서, 각 task에 대해서 작업 상세 요청 화면이 생성되도록, projectContainer에 custom event를 만들어서 작업 리스트 컴포넌트인 taskItem에서 click을 감지하여 호출하면, 해당 taskId를 가진채, dialog를 true로 설정하고 작업 상세 화면으로 넘기도록 했다.
• dialog가 여러 번 그려지는 경우는 해결했지만, 여전히 작업 상세화면으로 URL을 직접 입력해서 들어가는 경우 dialog를 띄워주지 못했다.

dialog 값 변경

• 프로젝트 컴포넌트의 data에 dialog를 false로 설정해주었는데, url이 변경되는 것을 감안하여 taskId가 있는지 없는지에 따른 true/false로 설정해주었다.
• 프로젝트의 작업 리스트 화면에서는 taskId에 대한 정보가 없기 떄문에, dialog가 false가 될 것이고 작업 상세화면의 경우 taskId가 있기 때문에 작업 상세화면으로 들어온 어떤 상황에서도 dialog를 그려준다.