[GGFE-154] 이름 색상 변경 모달 프리뷰 기능

[yoouyeon]

📌 개요

• 이름 색상 변경 모달에 프리뷰를 넣기 위한 작업을 했습니다.

💻 작업사항

IdPreviewComponent

• 이름 색상 변경 모달에서 사용하는 컴포넌트입니다.
• 해당 유저의 실제 랭킹 정보를 그대로 가져오는 것은 불필요하다는 생각이 들어서 더미 데이터를 사용하여 보여줍니다.
• ❗️ 현재는 티어 이미지를 스톰트루퍼 이미지로 보여주고 있는데 어떤 식으로 처리해야 할지 고민중입니다... 🤯
  • 그대로 스톰트루퍼 이미지로 할지
  • user 정보에 tierImageUri 데이터가 들어온다면 실제 티어에 해당하는 이미지를 보여줄지 (근데 이렇게 하면 티어를 제외한 데이터가 더미데이터라 좀 어색할수도 있을 것 같습니다.)
  • 기본 티어 이미지 (손? 혹은 뭐든)를 보여줄지
• statusMessage가 있으니까 모달 너비가 너무 길어지는 것 같아서 (적당히 넣을 상태 메시지도 생각나지 않아서) 빼는 쪽으로 했는데 괜찮은지 모르겠습니다... 🤯

RankListItem, NormalListItem

• 기존에 RankUser와 NormalUser를 함께 쓰던 RankListItem을 각각 RankUser는 RankListItem, NormalUser는 NormalListItem를 쓰도록 분리했습니다.
• 이 과정에서 불필요해 보이는 타입 변환은 뺐습니다.
• 기존 코드가 너무 복잡했어서 함수를 추가해거나 빼서 가독성을 높여보려 했습니다...

그 외

• 랭크 페이지 조회와 일반 랭크 페이지 조회 mock api 추가했습니다.
• 스토리북도 업데이트했습니다.

✅ 변경로직

[PHJoon]

색상 값에 따라 미리보기 잘보이고 기존 랭크페이지도 잘 작동하네요. status message는 굳이 안보여줘도 될거 같습니다. rankLIstItem도 분리되니 더 이해하기 쉬운거 같아요. 모달 위아래 크기만 조금 조절하면 될 듯 하네요.(제 화면에서는 pc일 때 모달 위아래가 벗어나네요, 개발자 - 모바일화면에선 잘 됩니다!) 고생하셨습니다!! 👍👍

[PHJoon]

확장 사용하니 더 좋은거 같네요! 👍

[parksangmin1543]

와 엄청 가독성이 올라갔네요. myranking과 myvip같은 경우 확인해보니 자기 랭킹을 찾아갈때 사용되는 부분이였습니다. 그래서 지금 ranklist_division과 ranklistitem이 같은 색깔로 적용이 됩니다. myranking과 myvip주석처리할때 정상적으로 돌아오는걸 확인했습니다. 색깔을 적용하니 훨씬 이쁘네요. 👍

[yoouyeon]

• colorPicker 부분 높이 수정하고 전체 모달들에서 모달 본문 margin을 아래에만 있던걸 위아래로 나눠서 설정해두었습니다.
• 상민님께서 말씀해주셨던 부분은 테스트 데이터의 이름들이 모두 동일했어서 생긴 문제라 테스트 데이터를 수정해서 본인 랭킹만 다른 스타일이 적용된것을 확인할 수 있게 했습니다!

[hyobb109]

코드가 많이 깔끔해졌네요!! 너무 고생하셨습니다👍👍 각 미리보기 이미지에서 my ranking, my vip 이렇게 제목 달아줘도 좋을 것 같아요! 고생하셨습니다!!