[토이프로젝트] JUSTCODE 6기 수료식 오프라인 참여 여부 설문조사 2

저번에 만들었던 토이 프로젝트에 페이지를 더 추가하고 버그를 고쳤다!

• 반응형 깨지는 부분 수정
• message 페이지 추가
• HashRouter로 라우터 변경

 

 

저번에는 빨리 배포하느라고 반응형을 추가했음에도 특정 디스플레이에서 깨짐이 있었다. (내 폰... 아이폰 mini 12.. 🥲)

그래서 반응형을 수정했다. 링크를 공유했을 때 썸네일도 뜨도록 index.html에 meta태그도 추가했다.

 

 

작성한 메세지를 볼 수 있도록 하는 message 페이지를 추가했다.

 

메세지 페이지

 

파이어베이스에 추가했던 데이터들을 받아와서 작성자의 이름과 메세지들을 보여주는 페이지이다. 메세지가 있는데 작성자의 이름이 빈 문자열이라면 익명이라는 이름으로 변경하여 출력했고, 메세지가 없는 사람들은 보이지 않도록 했다.

지금은 내 친구들의 메세지는 뜨지 않도록 해뒀는데 수료식 이후에는 변경해서 모두 다 뜨도록 수정해둘 것이다.😀

 

 

메세지 페이지가 추가되면서 메세지 페이지로 이동할 수 있도록 기존에 있던 제출 완료 페이지도 수정했다.

 

설문 제출 완료 페이지1

설문 제출 완료 페이지2

처음에는 메세지 페이지로 이동하는 아이콘만 추가했는데 그럼 눌러보지 않을 것 같아서 애니메이션을 추가했다. 지난번과 같이 setInterval을 사용해 움직임을 줘 아이콘을 누르도록 유도하고 어떤 행동을 하는지 메세지도 함께 보여줬다.

 

 

message 페이지로 바로 가고 싶을 때 url을 입력하면 자꾸 404가 뜨고 이동이 되지 않았다. 그래서 이 문제를 해결하기 위해 BrowseRouter에서 HashRouter로 라우터도 변경했다. #가 붙는건 싫지만 404가 뜨는 건 더 싫기 때문이다...👎

 

 

이제 수료식날에 함께 보는 일만 남았다!!!! 😀😀😀😀

 

 

새로 추가된 message 페이지

 

 

+ 새롭게 알게된 점

React icons를 사용해서 아이콘을 넣고 size속성을 줬는데도 크기가 변하지 않는다면 부모 태그에 문제가 없는지 확인해볼 것!

 

 

지난 회고록

[토이프로젝트] JUSTCODE 6기 수료식 오프라인 참여 여부 설문조사

 

 

+ 사용량 221117