[TIL] 09.23 tab 읽지않음 표시 기능

어제 작성을 해두고 올리지 않아서 오늘 올려본다. 

 

오늘 아래 사진과 같이 각 tab 마다 읽지 않은 내용이 있다는 것을 알리는 기능을 추가 가능한지 물어 보아서 생각해 보았다.

내용을 읽지 않았다면 주황색 점이 붙게된다. 

처음 내용을 들었을 땐 간단하게 생각했지만 구현을 하기위해 작업을 하다보니 생각보다 고민해야할 부분이 많았다. 

일단 원래 기획에 없던 사항이라서 반응형 레이아웃에서 문제가 생긴다 370px 아래로 내려가게 되면 tap 부분의 자리가 부족하여 점이 tab 밖으로 밀려나가게 된다.

기능적인 문제로는 프론트만 구현을 한다고 하면 반쪽 짜리 알림이 되는 것이였다. 왜냐하면 페이지를 새로고침 하거나 다른 페이지로 갔다가 다시 들어올 경우 한번 읽었다고 하더라도 저 점이 계속 붙어 있게 된다.  

백엔드와 함께 구현하면 이 문제가 해결 될 수 있지만 해당 페이지는 사용자의 상담 결과 페이지로 다른 사람에게 공유가 가능하기에 만약 공유받은 사람이 들어올 경우엔 어떻게 처리할 것인지에 대해서도 고민해 보아야 했다. 

 

또한 만약 해당 탭에 내용이 없을 경우 저 알림을 안 보이도록 처리해주는 기능도 추가해야 했다. 

내가 생각하기에는 tab 자체가 눌러보라는 의미이기도 하고 사용자가 궁금하지 않으면 눌러보지 않을거라 생각하기에 읽지않은 내용이 있다는 알림은 굳이 필요하지 않다라는 생각이 들었다.