[GGFE-144] 상점 아이템 보관함 페이지

[yoouyeon]

📌 개요

• 상점 보관함 아이템 페이지의 기본적인 기능과 디자인을 추가했습니다.

💻 작업사항

• 상점 보관함 데이터 api를 이용해서 유저가 가지고 있는 아이템 목록을 보여주게 했습니다.
  아래 주석 수정해서 빈 경우, 페이지가 1개인 경우, 페이지가 2개인 경우 테스트 해 볼수 있어요,

  // NOTE: 테스트 케이스에 맞춰서 다른 데이터를 보내주면 됩니다.
  // const InventoryData: InventoryData = InventoryDataEmpty;
  // const InventoryData: InventoryData = InventoryDataSingle;
  const InventoryData: InventoryData = InventoryDataDouble;

• 무한 스크롤 기능을 추가해서 가장 아래로 스크롤이 내려가면 새로 api를 불러오게 했습니다.
• ❗️ 상점 아이템 디자인 피드백 부탁드립니다!!! ❗️ (피그마에 정의해놨던 디자인으로는 아이템 설명이 없을 때 허전해져서 구조를 바꾸었어요)
  • 선물받은 아이템은 상단에 선물상자 아이콘이 뜨고, hover하면 선물한 사람의 intra id가 뜹니다.
  • 사용중인 아이템은 상단에 사용중 표시가 뜹니다.
  • 아이템 컴포넌트에 hover했을 때 사용전인 아이템에는 사용하기, 사용중인 아이템에는 편집하기 버튼이 뜹니다. (버튼 기능은 아직 구현 전)
  • ❗️ 아이템 이미지 css 속성을 object-fit: cover; 로 할지 object-fit: contain; 로 할지 고민중인데 의견 부탁드립니다❗️

✅ 변경로직

[hyobb109]

지금 상태로는 cotain이 좀 더 깔끔하게 보이는 것 같아요! 그런데 미리보기 이미지에 따라 다를 수도 있을 것 같습니다

[PHJoon]

무한스크롤 잘 작동하고 상점 목록들도 페이지 없는 경우, 페이지 한 개인 경우, 두 개인 경우 다 잘 되네요! 무한 스크롤 엄청 어려워보이는데 고생하셨습니다!!

[PHJoon]

이런식으로 테스트데이터 보내는 건 생각도 못했네요 배워갑니다!

[PHJoon]

저는 contain이 더 나은거 같습니다

[parksangmin1543]

저도 contain이 좋은것 같습니다

[yoouyeon]

일단 피드백에 맞춰서 contain으로 수정했습니닷

[hyobb109]

저는 디자인 개인적으로 마음에 듭니다! 깔끔한 것 같아요. hover시 버튼 나타나는 것도 좋네용 tooltip도 배워갑니다! 저도 mui좀 찾아봐야겠네요. 고생하셨습니다!!

[parksangmin1543]

무한스크롤이 굉장히 빠르게 동작하네요. 디자인도 저는 이쁜것 같아요 스마트폰, 터치스크린일때 호버를 사용하면 두번클릭을 해야하거나 동작이 안되는 경우가 있어서
@media (hover: none) and (pointer: coarse) { ... } 스마트폰일때 동작이 달라야할 것같습니다.

[parksangmin1543]

저도 contain이 좋은것 같습니다

[yoouyeon]

@parksangmin1543 모바일인 경우에 터치를 해서 hover된 효과를 내게 하려고 일부러 hover를 쓴거긴 한데, 모바일에서 hover가 안될 수 있다는건 전혀 생각을 못했네요.. 터치 디바이스인 경우에는 따로 클릭 이벤트를 받을 수 있게 하는 방법을 찾아볼게요!