10월 23일 (토) 특별 스크럼 - UI 기획 수정

1. 모바일 화면 고려 시 UI 변화

1.1. Nav bar

NavSocial

• NavSocial 삭제

• Friend를 메뉴로 헤더에 넣고, Social 모달로 드러나도록. Social 모달 안에서 친구 접속상태와 검색 둘 다 실행

NavChannel

• NavChannel: 기존 버튼 사용 → a 태그 사용

• Question1 → 1. ContextAPI 와 같이, '번호 + 키워드' 의 형식으로 내용에 대한 힌트를 주기

• 모바일 환경에서는 햄버거 버튼을 통해 등장하도록 설정

1.2. MyTreePage 전반적인 UI 변경

• 우측에 존재했던 현재 나무 상태표시 section 을 제거

• 대신, unitContainer 헤더를 여러 개를 생성. 해당 헤더에는 현재 상태 이미지, lv 이 기입되어 있음

• 헤더는 크게 3개 정도로 상정함

• 해당 헤더 클릭 시, 해당 단계에 해당하는 나뭇잎(Node)들을 렌더링.

• 현 진행 단계에 해당하는 헤더는 배경 색상이 밝은 노랑(임시)으로 변경됨. 이전 헤더는 흰색으로 배경 색상 변경

• 나뭇잎에는 Question 번호와 동일한 숫자가 적혀 있음

• 나뭇잎(Node) 를 클릭하면 기존 기획과 동일하게 TreeModal이 화면에 출력됨 → static하게 모든 나뭇잎을 렌더링 할 필요가 없어짐.

2. 색상 상수화와 media breakPoint

2.1. 별도 파일로 스타일 관리 이슈

• src/components/base 에 위치한 컴포넌트들의 스타일은 별도 파일로 관리하지 않고, 기존 코드대로 스타일 유지

• src/components/domain 에 위치한 컴포넌트들의 스타일은 별도 파일로 관리 (*.scss)

Prologue by HTML5 UP

This is Prologue, a simple, single page responsive site template. It features a clean, minimalistic design and a sticky sidebar with navigation-linked scrolling.

https://html5up.net/prologue

3. 비고

확장성에 대한 리아님의 조언

CSS 관련 참조 링크