백중원30 210810(화) - 전반적인 수정 1. 전반적인 수정 1. 전반적인 수정 애니메이션이나 페이지가 처음에 로드될 때 로딩 애니메이션이 보이도록 설정했고, 사용자가 어떤 메뉴를 선택했을 때 콘텐츠가 없는 경우 없음을 나타내는 애니메이션을 추가했다. 추가적으로 홈 페이지나 접종 후기 목록 등의 카드에서 보였던 접종 인증 글씨를 컴포넌트로 분리했다. 웹과 모바일에서 자주 사용되는데 글씨로 사용하는 것보다 컴포넌트로 분리해서 사용하는 것이 더 낫다는 판단 때문이다. 2021. 8. 10. 210809(월) - ocr 적용 1. ocr 적용 1. ocr 적용 우리 앱에서 가장 중요한 부분 중 하나는 인증 부분이다. 그럼에도 불구하고 이 부분을 우리 팀이 해결하기 쉽지 않은 이유는 우리가 접근해야 하는 데이터가 의료 데이터이기 때문이다. 의료 데이터에 개인이 접근하는 것은 사실상 불가능하기 때문에 우리 팀이 선택한 방법은 ocr이다. ocr은 Tesseract OCR을 이용한 Tesseract.js 라이브러리를 이용했다. 인증은 예시 사진을 제공해서 사용자가 어떤 사진으로 인증해야 하는지 파악할 수 있도록 했다. 예시 사진은 백신을 맞게 되면 카카오톡으로 자동으로 수신되는 메시지와 백신 인증 공식 앱인 COOV(쿠브) 캡처 사진을 기준으로 했다. 아직은 간단히 텍스트만 뽑고 있고, 1차 2차 구분은 따로 처리하지 않았다. 2021. 8. 9. 210808(일) - 지도 완성 1. 지도 완성 1. 지도 완성 svg를 단순하게 이용하려 했는데, 이런 방법으로는 데이터의 값에 따라 유동적으로 svg를 구성할 수 없었다. 결국 svg를 컴포넌트화 했다. 어쩌면 이렇게 되는 게 당연한 수순인데, 내가 몰랐던 것 같기도 했다. 데이터는 map으로 순회하여 표현했는데, 지도 부분과 지역 위에 나타나는 네모 박스를 한 번에 해결하고 싶었다. 이 부분은 svg를 표현할 때 가장 바깥을 svg 태그로 감싸야 했기 때문에 결국 다음과 같이 분리해서 코드를 구현할 수 밖에 없었다. 지도 설명 박스 부분은 각 지역에 따라서 직접 위치를 설정했고, 마우스를 올리거나 뗄 경우 색이 변해서 사용자가 쉽게 인지할 수 있도록 했다. 이와 같은 기능은 지도svg에도 같이 적용하여, 지도 상에서 지역이나 설명.. 2021. 8. 8. 210807(토) - 지도 만드는 방법 서치 1. 지도 만드는 방법 서치 1. 지도 만드는 방법 서치 지도 만드는 방법에 대해서 찾아봤다. svg를 활용해야 하는 정도만 알아서, 처음엔 우리나라 지도 svg를 구해서 어찌어찌해보려고 했다. svg 자체 속성으로 onMouseOver와 onMouseLeave가 있다는 것을 알아서 아래 gif와 같은 정도까지 만드는 것까지만 하니 하루가 지나갔다ㅠ 2021. 8. 8. 이전 1 ··· 3 4 5 6 7 8 다음
