버블로 중고거래 앱 구현하기 6편 – 마이페이지 & 관심목록 & 프로필 페이지 구성하기

해당 프로젝트는 단순 공부, 기록용입니다. 버블을 배우고있는 강좌에서 피그마 파일을 제공했으며, 앱의 기능에서 몇 가지만을 추가하여 진행합니다.

마이페이지
관심목록
프로필 페이지

마이페이지

• 각 페이지로 이동 가능한 그룹들을 만들어 줍니다. 로그아웃 버튼 클릭 시 팝업을 띄워 확인 받습니다.

• 팝업 안의 ‘네’ 클릭 시 유저를 로그아웃 시키고 index 페이지로 보냅니다. ‘아니오’ 클릭 시 팝업을 숨깁니다.

• 각각의 그룹들에 워크플로우를 넣어 해당 페이지로 이동시킵니다. 프로필 페이지의 type of content가 User 이기 때문에 Data send 에는 현재 유저로 설정해줍니다. my_item 페이지 역시 Data send 에 현재 유저로 설정해줍니다.

관심목록

• resuable element의 item_list 를 추가해줍니다. 다이내믹 밸류에 현재 유저의 관심목록을 설정해줍니다. 아이템 페이지에서 하트 표시를 누른 상품은 관심목록 페이지에서 볼 수 있습니다.

프로필 페이지

페이지 설정

• 프로필 페이지의 type of content 를 유저로 설정합니다. 아이템의 판매자 그룹 클릭 시 판매자의 프로필 페이지로 이동 시켜줍니다. 아이템 페이지의 type of content 는 상품이기 때문에 아이템 페이지의 creator 를 데이터로 보내주면 됩니다.

• my_page 는 프로필 페이지와 다르게 본인만 볼 수 있습니다. my_page 에서 프로필 페이지로 이동 시에 현재 유저를 데이터로 보내주면 됩니다.

SPA 구성

• 프로필 수정 버튼 클릭 시 go to page 를 current page 로 설정합니다. Send more parameters to the page 를 체크 해주고 원하는 이름으로 설정해줍니다.

• 프로필 수정 그룹을 처음에 보이지 않게 설정해두고, get data from page URL 에서 parameter 을 설정해줍니다. 위의 과정에서 edit 파라미터로 보내주고, 보내준 상태일 때 그룹을 보여주는 방식입니다.

• 같은 방식으로 뱃지 그룹도 설정해줍니다. 뱃지 그룹은 리피팅 그룹으로 설정하고 데이터 소스는 all 뱃지 입니다.

• 셀 클릭 시 뱃지 이름과 설명을 볼 수 있는 팝업을 설정해줍니다. 컨디셔널을 넣어 프로필 페이지의 유저가 해당 뱃지를 가지고 있지 않을 때 자물쇠 이미지를 보여줍니다.

• 페이지의 상단의 텍스트를 파라미터 값이 바뀔 때마다 다르게 설정해줍니다.

• 파라미터를 설정한다 해도 기존의 엘리먼트들이 자동으로 사라지진 않기 때문에 페이지 이동을 표현하기 위해서 필요 없는 엘리먼트들은 보이지 않게 설정합니다.

프로필 변경

• 프로필 페이지의 유저가 본인일 경우에만 프로필 수정 버튼이 보이게끔 만들어줍니다. Current page’s User (프로필 페이지의 유저)는 해당 페이지의 데이터를 가지고 있는 유저이고 Current User 는 앱을 실행중인 유저 입니다.

• 상단 바의 완료 텍스트는 파라미터 menu의 값이 edit 일 때만 보이게 설정해줍니다.

• 프로필 수정 그룹에는 사진을 올릴 수 있도록 picture uploader 를 이용하고 input 을 추가합니다. 완료 텍스트 클릭 시 현재 유저의 정보를 수정해주는 워크플로우를 설정합니다.

Open Toast 플러그인

• 프로필 수정을 완료한 뒤에 알림을 보내주기 위해 플러그인을 활용합니다. 위의 프로필 변경 과정에서 유저의 정보를 수정하고 다음 과정에 워크플로우를 추가해주면 됩니다.

• 메세지, 색상, 위치, 애니메이션 설정 등이 가능합니다.