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

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

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

오늘은 여태까지 했던 결제 로직 수정을 마무리 하기위해 타입 지정을 하고 코드 정리하는 시간을 가졌다. Checkout, CheckoutForm, Payment, PaymentModule 컴포넌트의 타입을 namespace로 설정을 해주었다. 코드 정리를 하는 도중 url에 order_id 와 chellenge_id 을 쿼리로 붙이는 부분이 있었는데 백엔드 분과 상의한 결과 굳이 붙여줄 필요가 없는 쿼리라는 결론이 나왔고 해당 쿼리문을 제거한 다음 테스트를 진행해 봤을때 문제가 발견되지 않았지만 혹시 몰라서 일단 주석처리를 하고 진행하기로 하였다. 결제 테스트를 하면서 에러가 나는 부분들 수정 진행 - redirect URL 생성이 되지 않는 버그 해결 - db에 입력되는 uuid 와 web hook에서..

오늘은 드디어 결제 방식 수정을 완료하였다. 그동안의 과정을 정리해보려고 한다. 기존의 결제 방식은 아래의 그림 처럼 결제 폼에서 submit 을 실행 하면 페이지 이동이 발생하고 iamport 모듈이 뜨는 방식이였다. 이 방식으로는 간편 결제를 추가했을 경우 처음 결제 방식을 선택하고 만약 다른 결제 방식을 선택하는 경우 페이지를 이동을 해야하고 또 결제 폼 입력을 새로해야 한다는 불편함이 있기에 방식을 수정하기로 하였다. 아래와 같은 형태로 만들어서 submit이 실행이 되면 결제 모듈이 뜰수 있도록 수정작업을 진행하였다. 처음에는 기존의 결제 로직을 그대로 가져가려고 했기 때문에 꽤나 애를 먹었다. 하지만 기존의 결제 로직은 페이지 이동이 일어 났을 때의 로직이였고 지금은 한 페이지에서 흐름을 제어..

결제 폼에서 submit 버튼을 눌러서 폼을 제출을 하였을 경우 formik에서 isSubmitting 인자는 true로 바뀌게 되고 이 인자가 true가 되면 submit 동작이 일어나지 않도록 막아두도록 되어 있다. 하지만 현재 결제폼 에서는 결제가 완료되자 않고 모듈이 꺼졌을 경우 다시 submit 동작이 가능하도록 만들어야 했다. import { useFormikContext } from 'formik' const { setSubmitting } = useFormikContext; 위와 같이 useFormikContext 를 사용하여 setSubmitting 함수를 가져와서 결제가 실패하면 setSubmitting(false) 가 실행이 되도록 설정해 두었다. 그리고 결제가 실패를 하거나 에러가 ..