해당 프로젝트는 단순 공부, 기록용입니다. 버블을 배우고있는 강좌에서 피그마 파일을 제공했으며, 앱의 기능에서 몇 가지만을 추가하여 진행합니다.
동네 설정 기능
Daum postcode 플러그인
• 플러그인에서 Daum Postcode Service 플러그인을 설치합니다.
• 팝업을 하나 만들어 준 뒤, 팝업 안에 DaumPostcode 엘리먼트를 추가해줍니다. 따로 설정해야 할 것은 없습니다.
동네목록에 추가 & 설정동네 지정
• 그룹의 Data source에 현재 유저의 동네목록 중 첫 번째, 옆의 그룹에는 두번째 아이템을 넣어줍니다. 텍스트에는 해당 동네의 동/면/리를 다이내믹 밸류로 넣어줍니다.
• 그룹 모두에 min width를 48%로 설정해줍니다. 50%로 하면 다음 줄로 넘어가니 48%가 적당합니다. 세 개의 그룹을 다시 Row 그룹으로 묶어 가로 정렬해주고, 위의 동네 그룹 중 하나가 사라지면 추가 그룹이 윗 줄로 올라가게 해줍니다.
• 동네 추가 그룹에 워크플로우를 넣어줍니다. 클릭 시 우편 검색하는 팝업을 띄워줍니다.
• 그룹에 따로 넣는 것이 아닌 워크플로우 자체에서 Elements > A Daum Postcode Postcode Selected 를 선택합니다. 그리고 현재 유저의 동네목록에 우편검색에서 선택한 동네와 같은 동네를 데이터에서 찾아(Do a Search for) 추가해줍니다. 동네의 데이터 필드에는 대분류와 시군 까지 포함했었는데 버블에서 찾지 못하여 구와 동/면/리만 찾아서 넣어줍니다.
• 주의해야 할 점은 동네들을 직접 데이터 추가해줘야 한다는 점입니다. 우편 검색으로 동네를 직접적으로 추가해주는 것이 아닙니다.
• 데이터에 업로드 기능이 있어 CSV파일을 추가해주면 됩니다. 하지만 유료 버전에서만 작동하기 때문에 저는 3개의 동네만 New entry 를 통해 추가해줬습니다.
• 동네 그룹을 처음에 invisible, collapse when hidden 으로 설정합니다. 그리고 눌렀을 때 현재 유저의 설정 동네로 지정합니다. 그룹의 동네가 설정동네라면 그룹의 백그라운드 색을 진하게 바꿔줍니다. 그룹 속의 X 아이콘을 누르면 해당 그룹의 동네를 유저의 동네목록에서 삭제해줍니다.
• 동네 추가 그룹은 현재 유저의 동네목록이 2개라면 보이지 않게 설정합니다. collapse when hidden 역시 설정합니다. 보이지 않는 기능을 넣는다면 거의 collapse when hidden 을 설정해줍니다. 작동하지 하지 않고 자리도 아예 없애버리는 기능입니다.
• 밑에 작동 영상을 짧게 추가하겠습니다.
상품 등록 페이지
파일 업로더 플러그인
• File & MultiFile Uploader 플러그인을 설치후 add_item 페이지에 엘리먼트를 추가해줍니다. 최대 5장까지만등록가능하도록 설정해줍니다.
• 등록하려는 상품의 상품명, 가격, 설명 등을 input으로 받습니다.
• 리피팅 그룹으로 사진들을 데이터 소스에 넣습니다. 왜 텍스트로 받는지는 명확히 모르겠으나 프리뷰로 받으면 종류가 텍스트가 됩니다. 각 셀에도 이미지 파일로 프리뷰를 넣어줍니다.
• 대표사진은 셀의 첫 번째 인덱스에만 적용을 시키고 다른 셀에는 안보이도록 컨디셔널을 적용해줍니다.
• 업로드한 사진의 개수를 다이내믹 밸류를 넣어 나타내줍니다.
파일 업로드 워크플로우
• 사진 추가하는 그룹 클릭 시 플러그인을 작동시키는 워크플로우를 설정해줍니다. png, jpg, jpeg 형식의 파일을 허용합니다.
• 작은 x버튼 클릭 시 해당 셀의 업로드된 사진을 삭제시켜주는 워크플로우도 설정해줍니다.
• 작성 완료 버튼 클릭시 상품에 대한 정보를 input 값들에서 불러와 새로운 상품을 만듭니다.
• 다음 과정으로 input을 삭제하고 현재 유저의 판매상품에 첫 단계에서 만들어진 상품을 추가해줍니다.
• Only when 을 적용하여 첫 등록 시 뱃지를 현재 유저에게 추가해줍니다.
관련 게시물
버블로 중고거래 앱 구현하기 1편 – 기본 설정과 데이터 추가하기