한동안 iamport 를 통해서 naverpay 연동을 위한 작업을 진행하였다. 결제 로직상 에서 naverpay를 paymethod로 받을 수 있는 작업은 완료가 되어 있었기에 관련 서류를 준비해 요청을 보내고 iamport에 naverpay 검수 요청을 보냈다. naverpay를 적용 하기 위해서는 통과해야 하는 요건들이 있는데 그 중 아래 3가지 문제에 대해서 통과하지 못했다. 1. naverpay 객체를 보내야 한다. 2. 에러 메시지는 가공 되어서는 안된다. ex) 결재실패: 결재 오류가 발생했습니다. (X) 결재 오류가 발생했습니다.(o) 3. 위변조된 결제 건에 대하여 자동으로 취소 요청을 하고 이용자에게 해당 결제가 위변조 되었다는 사항을 전달해야함 1,2 번 문제는 쉽게 해결을 하였는데 ..

react-slick 을 사용하여 배너컴포넌트를 만드는 작업을 진행 하였다. react-slick을 사용할 때 공식문서를 보면 css를 import 해서 사용하는데 지금 우리 프로젝트에서는 css 파일을 만들어서 react-click의 className 값을 지정해주어서 필요한 부분은 커스텀하여 사용하고 있다. 위와 같이 dot 이 있고 이미지 크기가 고정이 되는 슬라이드를 만들어야 했다. dot을 생성하려면 setting 값에 dots: true 를 넘겨주면 되는데 이렇게만 넘겨주면 크기와 색상이 기본 값으로 넘어가서 내가 원하는 dot을 만들 수 가 없었다. 그래서 css 파일에서 dot 의 css 속성을 직접 수정을 하여 구현을 하였다. 구현을 하고 나서 보니 appendDots과 dotsClass..

오늘은 서비스 업데이트를 진행 하였다. - 비타민 검사 결과 페이지 챌린지 section 부분 작업 완료 - 슬라이드 버튼과 readmore 버튼 정렬 수정 - slider 내 이미지 크기와 숫자가 반응형에 맞춰서 자연스럽게 줄어들도록 수정 - Paragraph 컴포넌트 수정한 값이 지금 현재 작업 하고 있는 부분과 이 컴포넌트를 사용하고 있는 페이지에서 영향을 미치고 있어서 해당되는 페이지 전부 수정 - 제품이 없을 경우 챌린지 페이지로 이동 시키는 버튼을 추가하려고 하다가 백엔드와 논의 하여 default 제품 목록 값을 받아 올 수 있도록 해보기로 함 확정은 아님

어제 페이스북을 새로 연결 하고 해결이 된듯 하였으나 이전 페이스북 회원가입을 한 회원정보가 연동이 되지가 않았다. 이전에 페이스북으로 가입을 했더라고 지금 연동되는 페이스북 앱은 새로운 앱으로 인식이 되어서 새로운 회원이 생기게 된다. 이걸 해결하기 위해서는 결국 기존의 페이스북 아이디가 필요한데 찾을 수 없는 상황이기 때문에 다른 방법으로 처리할 수 있는 방법을 생각해야만 했다. 두가지 해결 방법을 생각 했는데 1. 우리가 회원정보에서 필수로 받는 값은 이메일 값이다. 그래서 페이스북 회원 가입을 할 때 기존 회원인 것으로 판단이 되면 기존 회원 정보에서 페이스북 토큰값을 수정해 주는 방법 2. 페이스북으로 가입되어 있는 회원의 수도 적고 소셜로그인을 대부분 카카오를 이용하기 때문에 페이스북 회원가입..

페이스북 로그인에 대해서 문제가 생겨서 확인을 해보았다. "사용할 수 없는 기능: 현재 이 앱에서 Facebook 로그인을 사용할 수 없습니다. " 라는 에러 메시지를 보여 주었다. 우리 프로젝트에서 페이스북 로그인을 사용하는 방식은 로그인 플로 직접 빌드 방법이고 로직 상에서 문제는 발견하지 못하였다. 에러 메시지와 백엔드에서 찍히는 에러메시지를 확인해본 결과 페이스북 인증 서비스의 기간 만료가 원인인 것으로 파악이되었다. 하지만 현재 사용하고 있는 페이스북 인증 키 를 가지고 있는 아이디가 개인 계정이였고 그 계정의 주인이신 분은 현재 회사에 계시지 않아 이 참에 회사용 계정을 파서 해당 계정의 인증 키를 적용하기로 하였다. 그래서 새로 계정을 만들어 적용을 하려고 하였는데 여기서 또 문제가 발생 하..

지금 진행 중인 프로젝트에서 결제 폼 디자인도 바뀌기 때문에 디자이너와 논의 하면서 수정작업을 진행했다. 디자인 시스템을 차츰 만들고 있는 중이기에 앞으로 쭉 사용이 될건지 통합이 될건지 인자를 어떻게 넘겨 줄건지 등에 대해서 계속 생각을 하면서 작업을 진행을 하였다. 지금 디자인에서 Input 이 기존 Input과 다르기 때문에 디자이너와 논의 하여 공통된 부분가 차이가 나는 부분을 정리하여 분기처리를 통하여 두가지 Input이 나올 수 있도록 수정함 헤더 컴포넌트가 기본적으로 shadow를 가지고 있는데 현재 디자인에서는 shadow가 없기 때문에 디자이너와 논의 하여 기본적으로 shadow를 가지고 있지 않고 shadow 인자를 넘겨주면 shadow가 생기도록 수정을 진행 이미 적용되어 있는 헤더 ..