[Tars] 회고록 9일차 - reduxjs/toolkit, 채팅페이지버튼, 닉네임필터

reduxjs/toolkit

어제 react-redux를 배우고 오늘은 reduxjs/toolkit을 배워서 블로깅을 하였다.

내일 프로젝트에 직접 적용할 예정이다. 무언가를 배워서 실제로 적용한다는게 참 기분이 좋다.

스택블리츠를 사용해서 블로깅을 하기 시작하였는데 예시를 보여주기 편하고 내가 배운 것을 적용하기가 너무 편해서 공부의 즐거움이 배가 되었다.

 

채팅 페이지 버튼 변경

 

 

기존에는 채팅메시지 밑에 버튼이 있었는데 좌측에 버튼이 있다가 우측에 버튼이 있다가 버튼이 여러개가 되었다가 너무 복잡해져서 PM과 디자이너를 불러서 하단에 버튼을 고정하자고 제안을 하였다.

 

 

그래서 하단에 버튼이 생기게 되었다.

다시 버튼을 변경해야되지만 이게 맞다고 생각된다.

공통버튼이랑 통일되는 색이 없고 위에 옵션들도 있으니깐. 공통 컴포넌트는 만들지 않을 예정이다.

 

닉네임 설정

유저가 닉네임을 설정할 때 잘못된 닉네임을 설정하면 경고문을 보여줘야하는데 피그마상에서 안 보여서 PM과 디자이너와 상의를 하였다.

 

• 한글, 영어, 특수 문자 허용
• 외자(귤, ㅎ) 허용
• 닉네임 중복 허용
• 띄어쓰기 불가
• 이모지 불가능 - information에 “이모지는 사용할 수 없어요“ 빨간색으로 변경, 이모지 지우면 기존으돌아감
• 8자 제한 - 8자초과해서 입력 안되도록
• 공란 - 확인 버튼 비활성화

•  

 

이러한 닉네임 필터들이 있었는데 잘 못 된 닉네임을 적을 때마다 다른 경고문을 보여주자고 해서 갈!!!! 바로 거절하고 아래의 그림과 같이 설정하였다.

 

infomation에서 잘 못 된게 있으면 info가 빨간색으로 변하고 이모지를 넣을 때만 "이모지를 넣을 수 없어요"라고 문구를 추가하였다.