이 앱은 "Help Me"라고 하며 누군가가 정신 건강 위기를 겪고 있을 때 주로 신뢰할 수 있는 사람들로 구성된 선별된 서클에 보내는 "SOS"(조난 신호)로 설계되었습니다. 목표는 사적인 대화와 사용자의 감정 범위를 보여주는 시스템으로 사용자 주위에 신뢰할 수 있는 커뮤니티를 구축하는 것입니다.

개발 8일차

7일차에 "피드"콘텐츠 페이지가 있는 커뮤니케이션 페이지의 기본 레이아웃을 만듭니다. 8일차 목표는 마지막 두 개의 통신 페이지를 구축하고 서비스의 실제 데이터를 모든 페이지에 통합하고 풀 요청을 제출하는 것입니다. 나는 너무 흥분된다. 프로젝트 파트너인 Miguel Hernandez가 만든 모든 초기 와이어 프레임이 거의 완성되었습니다.

이것이 제가 오늘 만들고자 하는 것의 와이어프레임입니다.

메시지 콘텐츠 화면에서 첫 번째 UI 시도

메시지 통신 페이지에는 피드 페이지와 유사한 한 행에 모든 프로필 섹션이 있습니다. 이를 구축하면서 재미있는 점은 다양한 메시지 타임스탬프를 포함하도록 프로필 데이터 배열을 업데이트하는 것이었습니다.

메시지 페이지의 첫 번째 UI 시도

연결 콘텐츠 화면에서 첫 번째 UI 시도

연결 커뮤니케이션 페이지에는 모바일 보기를 위한 두 줄의 프로필 섹션이 있습니다. 나를 위한 새로운 도전은 TailwindCSS의 디스플레이 그리드 유틸리티를 사용하여 프로필 섹션의 표시를 구성하는 것이었습니다.

중앙에 있는 요소의 두 열을 만드는 코드

class="grid grid-cols-2 place-items-center mt-4"

연결 페이지의 첫 번째 UI 시도입니다.


"진행 중인 작업"에서 페이지 구조를 가져온 후 구성 요소에 스타일을 추가했습니다.

애플리케이션을 통해 라우팅을 추가하도록 리팩터링

저는 Angular가 모든 요소에 라우팅을 정말 간단하게 추가할 수 있게 해준다는 점을 좋아합니다.
라우팅 공식을 보여주는 코드

[routerLink]="['/setup-screen']"

몇 분 안에 전체 애플리케이션을 클릭하는 이 GIF를 만들 수 있었습니다.

무엇 향후 계획

현재 진행 상황에 대한 풀 리퀘스트를 제출했으며 상황을 개선하는 방법에 대한 권장 사항을 기다릴 수 없습니다. 저는 항상 코드 리뷰를 배울 수 있는 기회로 봅니다. 내일은 그러한 변화를 만드는 일이 될 것입니다. 시간이 있다면 a11y, aria 태그 사용, Angular로 테스트 등 연습이 필요한 영역에 집중하겠습니다.

9일차 분석 블로그 게시물을 기대해 주세요!!!