해당 프로젝트는 단순 공부, 기록용입니다. 버블을 배우고있는 강좌에서 피그마 파일을 제공했으며, 앱의 기능에서 몇 가지만을 추가하여 진행합니다.
카카오 로그인
플러그인 & 워크 플로우 설정
• 카카오 로그인 기능을 위한 플러그인을 설치합니다. 설치 후 key 값 등을 입력해 줘야 하는데 정리해 둔 글을 참고하도록 합니다. https://cigroio.notion.site/cfa3e4fcb6634d4f9e8353b4617e5b48
• 로그인 화면에서 카카오로 시작 버튼에 워크플로우를 추가해줍니다. Account > Signup/Login with a social network > OAuth provider 을 Kakao로 설정하면 됩니다. 그리고 해당 유저의 상태에서 social login 을 kakao로, 닉네임과 프로필 이미지를 카카오에서 불러옵니다.
토스 페이먼츠
TossPayments-Widget-Basic 플러그인
• 토스 페이먼츠 플러그인 입니다. 버블에 Widget 말고 TossPayements-Basic 플러그인 또한 존재하는데 일단 Widget 플러그인을 사용합니다. Username 의 경우 일단 테스트 키 값을 입력합니다. 실제로 앱을 출시할 경우 심사를 받고 발급을 받아야합니다.
• 토스에서 작성한 공식 문서를 참고해주세요. https://tosspublic.notion.site/309f87f887384cdc9ac43558cf04fa16
워크플로우 설정
• payment 페이지에 설치한 플러그인 엘리먼트를 추가해줍니다. payment 페이지의 type of content 는 상품이고, item 페이지에서 결제하기 버튼 클릭 시 payment 페이지로 이동과 함께 해당 페이지의 상품의 정보를 넘겨받습니다. payment 페이지의 type of content 가 상품으로 설정되어 있기 때문에 paymentwidget 에서 체크 표시를 해주고, 다른 인풋 값들도 채워주면 됩니다.
• 주의 사항으로, payment widget 엘리먼트의 레이아웃에서 make this element fixed-width 항목은 체크를 하지 않아야 합니다. 또한, payment 페이지의 container layout 이 column 이여야 합니다.
• 결제하기 버튼 클릭 시 워크플로우를 추가해줘야합니다. Elment Actions > set value of payment widget과 request payments a payment widgetd을 순서대로 설정해주고 인풋 값을 채워주면 됩니다.
widget-success 페이지
• 페이지 명은 widget-success 로 설정해야 합니다.
• 페이지가 로드 됐을 때 워크플로우를 추가해줍니다. Plugins > Tosspayments Widget APIs – confirm payments 에서 각 인풋들을 다이내믹 밸류로 get data from page URL 을 선택, Parameter name 을 paymentKey, orderid, amount 라고 적어주면 됩니다.
• 이 후 Element Actions > Set state 에서 사진과 같이 설정해 주면 됩니다. custom state 는 state type 을 text 로 하여 새로이 만들어주면 됩니다.
관련 게시물
버블로 중고거래 앱 구현하기 1편 – 기본 설정과 데이터 추가하기
버블로 중고거래 앱 구현하기 2편 – 회원가입/로그인 페이지 구성하기
버블로 중고거래 앱 구현하기 3편 – Reusable element 만들기 & 홈 페이지 구성하기
버블로 중고거래 앱 구현하기 4편 – 동네 설정 기능 추가하기 & 상품 등록 페이지 만들기
버블로 중고거래 앱 구현하기 5편 – 상품 상세 페이지 & 상품 검색 페이지 구성하기
버블로 중고거래 앱 구현하기 6편 – 마이페이지 & 관심목록 & 프로필 페이지 구성하기