진행: 승록 → 다슬 → 승희
개발
스토리북 시연 (승록)
페이지 시연 (다슬, 승희)
회고 (승희)
협업 시 겪었던 이슈, 해결 방법
이슈1: 개발환경 이슈 - 노드버전 충돌
현상: 병합 충돌
원인: Node.js 의 M1 실리콘 지원 버전
해결방법: nvm을 통해 node 버전 통일(v16.10.0)
이슈2: 기획 - 화면 구성
현상: 웹 화면을 기본으로 와이어프레임을 작성. 모바일과 웹 화면을 분리해서 생각했다. 모바일 화면은 단순하게 화면을 줄이면 된다고 생각을 했다. 하지만 생각보다 고려해야 할 요소들이 많았다. 결국 디자인 기획을 수정하게 되었다.
원인: '화면'구성에 대해 안일하게 생각하였음. 웹과 모바일 화면 구성에 대한 충분한 기획이 이루어지지 않았음.
수정사항:
NavSocial
- NavSocial 삭제
- Friend를 메뉴로 헤더에 넣고, Social 모달로 드러나도록. Social 모달 안에서 친구 접속상태와 검색 둘 다 실행
NavChannel
- NavChannel: 기존 버튼 사용 → a 태그 사용
- Question1 → 1. ContextAPI 와 같이, '번호 + 키워드' 의 형식으로 내용에 대한 힌트를 주기
- 모바일 환경에서는 햄버거 버튼을 통해 등장하도록 설정
효과: 컴포넌트 재사용성을 높이게 되었다. → 공수가 줄었다!
MyTreePage 전반적인 UI 변경
- 우측에 존재했던 현재 나무 상태표시 section 을 제거
- 대신, unitContainer 헤더를 여러 개를 생성. 해당 헤더에는 현재 상태 이미지, lv 이 기입되어 있음
- 헤더는 크게 3개 정도로 상정함
- 해당 헤더 클릭 시, 해당 단계에 해당하는 나뭇잎(Node)들을 렌더링.
- 현 진행 단계에 해당하는 헤더는 배경 색상이 밝은 노랑(임시)으로 변경됨. 이전 헤더는 흰색으로 배경 색상 변경
- 나뭇잎에는 Question 번호와 동일한 숫자가 적혀 있음
- 나뭇잎(Node) 를 클릭하면 기존 기획과 동일하게 TreeModal이 화면에 출력됨 → static하게 모든 나뭇잎을 렌더링 할 필요가 없어짐.
효과: 개발자의 시각이 아닌, 사용자의 시각에서 UI를 고민하는 계기가 되었음.
이슈3: 스타일드 컴포넌트 이슈
현상: 컴포넌트를 import 해서 재사용하려고 해도, 부가적으로 수행해야 하는 스타일링 공수에 대한 문제의식 공유
원인: 기획에서 구체적인 컴포넌트 디자인 작업이 미흡 → BaseComponent가 너무 많은 확장성을 갖게 되었다. → 일관적이지 않은 컴포넌트 재사용
해결: 일단 페이지까지 개발을 해서 화면을 구성해보고 → 역으로 refactoring을 해야 할 지 고민 중
스크럼:
로그인 페이지 이전에 우리의 서비스를 소개하는 Intro 페이지가 선행되었으면 좋겠다