[ATSAY] 홈 화면

작품을 통해 사람을 만나다, ATSAY입니다.

 

ATSAY에 로그인하게 되면 가장 처음 만나는 화면은 홈 화면입니다.

 

홈 화면 예시

홈 화면은 검색, 마이 페이지, 알림 목록 스크린 등 다른 스크린으로 이동할 수 있는 교차로 역할과 다른 유저들이 작성한 게시글을 최신 순으로 보여주는 종합 게시판의 역할을 하고 있습니다.

 

1.0.23 버전 기준으로 홈 화면에는 아래의 기능들이 있습니다.

 

교차로 역할

 

홈 화면 버튼 설명

홈 화면은 탭 네비게이터 안에서 구현되어 있습니다. 파란색 박스 안 아이콘 터치를 통해 다른 탭 화면으로 이동이 가능합니다.

홈 화면 안에서는 각 버튼을 터치 시 게시글 작성(녹색 박스), 알림 목록 화면(빨간색 박스)으로 이동할 수 있는 기능이 구현됐습니다.

 

*파란색 박스 안 아이콘은 왼쪽부터 홈 화면, 검색 화면, 살롱 목록 화면, 마이페이지 화면을 의미합니다😊 

 

종합 게시판의 역할

 

홈 화면에서는 유저가 작성한 게시글이 피드 형식으로 보입니다.

피드 데이터는 리스트 형태로 렌더링이 되며 Pagination 방식을 이용하고 있습니다.

이외에도 유저의 편의성을 위해 피드 리스트 새로 고침하는 기능과 피드 리스트를 맨 위로 스크롤하는 기능을 구현했습니다.

 

1) Pagination 방식으로 피드 데이터 렌더링

ATSAY에서는 page size를 10으로 고정하고 한 번의 요청마다 10개의 피드 데이터를 서버로부터 제공받습니다.

추가 데이터 로드 요청은 유저가 피드 리스트의 마지막 부분으로 스크롤할 시 발생됩니다.

 

Pagination 예시

 

2) 피드 데이터 새로 고침

피드 리스트를 최신화하고 싶을 때 새로 고침 기능을 이용할 수 있습니다.

새로 고침은 피드 리스트를 맨 위를 포커스 한 상태로 위에서 아래로 당기면 발생됩니다.

 

새로 고침 예시

 

3) 피드 리스트 맨 위로 스크롤

많은 피드들을 확인하고 다시 처음 페이지로 돌아가고 싶을 때 해당 기능을 이용할 수 있습니다.

맨 위로 스크롤되는 기능은 홈 화면이 포커스 된 상태에서 하단 홈 버튼을 다시 터치를 하면 발생합니다.

 

맨 위로 스크롤 예시

 

---

읽어주셔서 감사합니다 :)

작품을 통해 사람을 만나다, ATSAY