imageCapture 이미지 출력 UI 개선

[rktdnjs]

변경사항

https://github.com/rktdnjs/starter-kit-smartapp-react (프론트)(main 브랜치)

https://github.com/rktdnjs/starter-kit-smartapp-nodejs.git (백엔드)(backend 브랜치)

이미지 확인을 위한 과정
1. 백엔드 프로젝트를 돌린다(SmartThings Developer WorkSpace Webhook Endpoint - ngrok 사전 설정 필요)
2. 프론트 프로젝트를 돌린다(npm start를 통해 실행하기만 하면 따로 건드릴 내용은 없습니다!)
3. SmartApp의 내용에 따라 SmartThings 기기들의 이벤트 발생시 imageCapture 결과 중 imageURL에 해당하는 정보가 `http://localhost:3005/api/image` 경로에 저장되며, 프론트에서 이 URL로 request를 보내 데이터를 받아올 수 있습니다
4. 서버에서 캡쳐 결과 URL 불러오기 - URL 목록 중 원하는 URL 클릭 - 발급받은 토큰 입력 - 선택한 이미지 불러오기 순으로 진행
5. 그 결과로 서버 작동 이후로 캡쳐된 이미지들의 목록 중 원하는 이미지를 확인 & 저장할 수 있습니다.

imageCapture의 결과를 확인하기 위한 UI 및 일부 기능 개선

• 토큰을 발급받기 위해 별도로 검색하여 이동하는 번거로움을 해소하고자 버튼을 눌러 해당 페이지로 연결되도록 추가하였습니다.
• 전체적인 UI를 개선하였고, 각 기능을 한눈에 알아볼 수 있게 상단에 버튼으로 모아 배치하였습니다.

초기 화면

서버에서 캡쳐 결과 URL 불러오기

선택한 이미지 불러오기

이미지 다운로드

[kwanghoon]

@rktdnjs @YANGSEOKWOO @cosmos-1885
데모를 봅시다~

=====
이 SmartApp을 불특정 다수가 본인 환경에서 설치해서 사용할 수 있지요?
따라서 본인의 토큰을 입력해야 본인의 카메라로 찍은 사진을 내려받을 수 있겠지요.
남의 카메라로 찍은 사진을 내려받으면 큰 일나겠고.

이렇게 토큰을 별도로 입력해야 하는 이유가 재미있네요.

Q1. 매번 토큰을 입력해야하는 번거로움을 해결하면서도, 위의 프라이버시(?) 문제가 발생하지 않는 방법이 있을까요?

Q2. 홈에 있는 모든 장치에 접근하기 위해서 이 토큰이 유일하지요? 그러면 이 토큰이 노출되면 꽤 큰 피해가 있을수도 있겠네요.
토큰 입력을 한 번 정도로만 해도 위의 시나리오(카메라 찍고 사진 확인하고) 대로 동작하게 할 수 있을까요.

이런 저런 질문들을 생각해보았습니다.