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하게 모든 나뭇잎을 렌더링 할 필요가 없어짐.

질문을 명시적으로 제시해주어야 할 필요가 있음.

https://www.figma.com/embed?embed_host=notion&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FTcEJw2A9XwjZmZhj1k7LsU%2Fgidong_2%3Fnode-id%3D0%253A1