[Design] Mobile ver. - MyPage 구현

[lydiacho]

Related Issue : Closes #372

---

🧑‍🎤 Summary

반응형 마이페이지를 구현했습니다

🧑‍🎤 Screenshot

반응형

2024-08-10.9.41.13.mov

모바일, 작은창 접속 막기

RPReplay_Final1723294522.MP4

2024-08-10.9.56.37.mov

🧑‍🎤 Comment

🚀 마이페이지 반응형 작업
다 styleVary만 쳐주면 되는거라 무리없이 작업했습니다
(반응형 요소들 정리한 노션)

🚀 ReviewPage 접속 제한
전에 이야기했던 대로 ReviewPage는 우선 반응형 작업 미루고, 따라서 지원서 확인 클릭 시 사용자 상태를 체크해서 접속 제한 처리를 해줬는데요,
두가지 케이스가 있어요

• 모바일로 접속 : userAgent를 통해 사용자 디바이스 환경을 체크
• 작은 창으로 접속 : useDevice 훅 사용해서 창 크기가 768이하인지 체크

이때 모바일로 접속하면 무조건 'PC로 접속하라'는 alert 띄우고 이동을 막으면 되는데,
PC에서 작은 창으로 접속할 경우에도 PC로 접속하라는 alert을 띄우는게 부적절하다고 생각해서 '전체화면 이용을 권장드려요' 라고 alert 문구를 바꿔줬는데요,
이와 동시에 이렇게 권장드린다는 말을 하고나서 이동까지 아예 막아버리는 것보다, 그냥 사용자가 알아서 창 크기 키우겠거니 하고 페이지 이동은 정상적으로 진행시키는게 낫다는 생각이 들었어요.

그래서 정리하자면

• 모바일로 접속 : 'PC로 이용해주세요' alert + navigate 막기
• 작은 창으로 접속 : '전체화면 이용을 권장드려요' alert + navigate 진행

이렇게 일단 구현해주었습니다.
제가 임의로 정한거라, 이견 있으시면 반영할게요!!

🚀 Button padding left, right 0 처리
깨지고 있는 letterSpacing까지 제대로 다시 넣어줬는데도 모바일 화면에서 줄바꿈이 발생하길래 왜지 했는데
피그마 상에서 padding 영역이 이렇더라고요?

영역을 제대로 안보고 padding을 15, 25로 주니까 깨졌던 거였고,
이메일 버튼 깨짐 이슈 때처럼 padding left, right 0으로 줘서 해결했어요

[height]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[eonseok-jeon]

모바일로 접속 : 'PC로 이용해주세요' alert + navigate 막기
작은 창으로 접속 : '전체화면 이용을 권장드려요' alert + navigate 진행

차피 나중에 수정될 거라 이견 없습니다~

고생하셨습니다 :)