feat: 메인 앨범 무한스크롤 및 Lazy Loading, 스켈레톤 ui 추가, 일부 코드 수정 및 리팩토링

[peacemaker474]

🔥 연관 이슈

close: #28

📝 작업 요약

• 메인 앨범 무한스크롤 및 Lazy Loading, 스켈레톤 ui 추가
• 일부 코드 수정 및 리팩토링

🔎 작업 상세 설명

• React-Query에 InfinityQuery를 이용하여 무한스크롤 구현 및 Intersection Observer API를 통한 hooks 추가
  • 메인 앨범 내 무한스크롤 관련하여 커스텀 훅으로 분리
• Image Lazy Loading을 위한 Intersection Observer API를 통한 hooks 추가
• 메인 앨범 내 Loading 전에 사용할 스켈레톤 UI 추가
• 스토리북 설정 관련 애드온 잘못된 부분 수정
• 전체적인 이미지에 대해서 object-fit를 이용하여 정중앙 위치하도록 수정
• Footer 내 current props로 인해 발생했던 Warning 문제 해결 (current -> $current로 네이밍 변경)

🌟 논의 사항

• 스켈레톤 관련 컴포넌트를 어디에 위치시켜야 할 지 모르겠어서, 일단은 components/ui 위치시켰는데 다른 곳이 나을까요?
• 그리고 common 폴더 내 폴더를 대문자로 적긴 했는데, 소문자로 하는 게 나을까요?

[leedawnn]

무한 스크롤, 스켈레톤 ui 잘 작동하는 거 확인했습니다 👍🏻
스켈레톤 관련은 components/common/skeleton/index.tsx 여기에 작성하는 건 어떨까요?!
그리고, common 폴더 내 폴더는 대문자가 더 낫겠네요! 모달 쪽은 제가 고쳐서 pr 날릴게요~!

[peacemaker474]

무한 스크롤, 스켈레톤 ui 잘 작동하는 거 확인했습니다 👍🏻 스켈레톤 관련은 components/common/skeleton/index.tsx 여기에 작성하는 건 어떨까요?! 그리고, common 폴더 내 폴더는 대문자가 더 낫겠네요! 모달 쪽은 제가 고쳐서 pr 날릴게요~!

일단은 components/skeleton이라는 폴더에 넣어놨습니다. 이미지 스켈레톤만 나왔지만, 추후에 더 많은 스켈레톤이 나올 수도 있다고 생각합니다. 그리고 common 폴더는 일반적, 공통적으로 사용할 컴포넌트라고 생각했습니다! 그리고, common 폴더 내에 skeleton 폴더를 만들게 되면 추후에 더 많이 생겨날 경우, 안에 폴더 구조가 더 복잡해질 것 같다고 생각했습니다!! 혹시 이 부분에 대해서 어떻게 생각하시나요?

[leedawnn]

일단은 components/skeleton이라는 폴더에 넣어놨습니다. 이미지 스켈레톤만 나왔지만, 추후에 더 많은 스켈레톤이 나올 수도 있다고 생각합니다. 그리고 common 폴더는 일반적, 공통적으로 사용할 컴포넌트라고 생각했습니다! 그리고, common 폴더 내에 skeleton 폴더를 만들게 되면 추후에 더 많이 생겨날 경우, 안에 폴더 구조가 더 복잡해질 것 같다고 생각했습니다!! 혹시 이 부분에 대해서 어떻게 생각하시나요?

네 좋습니다! 전 스켈레톤 ui는 공통 부분이라고 생각하는데,, 🤔 더 늘어나도 메시지, 프로필 사진... 정도? 너무 복잡해질만큼 늘어나진 않을 것 같아서요. 일단은 이런 폴더 구조로 해놓고, 추후에 더 찾아봐야겠네요!

[peacemaker474]

일단은 components/skeleton이라는 폴더에 넣어놨습니다. 이미지 스켈레톤만 나왔지만, 추후에 더 많은 스켈레톤이 나올 수도 있다고 생각합니다. 그리고 common 폴더는 일반적, 공통적으로 사용할 컴포넌트라고 생각했습니다! 그리고, common 폴더 내에 skeleton 폴더를 만들게 되면 추후에 더 많이 생겨날 경우, 안에 폴더 구조가 더 복잡해질 것 같다고 생각했습니다!! 혹시 이 부분에 대해서 어떻게 생각하시나요?

네 좋습니다! 전 스켈레톤 ui는 공통 부분이라고 생각하는데,, 🤔 더 늘어나도 메시지, 프로필 사진... 정도? 너무 복잡해질만큼 늘어나진 않을 것 같아서요. 일단은 이런 폴더 구조로 해놓고, 추후에 더 찾아봐야겠네요!

흠! 그러면 일단은 components/common/Skeleton 에 넣고, 이름 길게 가져가지 말고, Image.tsx로 가져가고, 불러올 때 import * as Skeleton from '../components/common/Skeleton' 이런 식으로 불러오도록 설계 해보겠습니다.

이 방식으로 하면, 추후에 Image.tsx라는 이름으로 파일명을 가져가려고 할 때, import 하는 부분에 있어서 고민을 해야된다는 문제가 있을 것 같아요. 혹시 이름을 일관성 있게 가져갈 방법이 있을까요..?

[leedawnn]

흠! 그러면 일단은 components/common/Skeleton 에 넣고, 이름 길게 가져가지 말고, Image.tsx로 가져가고, 불러올 때 import * as Skeleton from '../components/common/Skeleton' 이런 식으로 불러오도록 설계 해보겠습니다.

이 방식으로 하면, 추후에 Image.tsx라는 이름으로 파일명을 가져가려고 할 때, import 하는 부분에 있어서 고민을 해야된다는 문제가 있을 것 같아요. 혹시 이름을 일관성 있게 가져갈 방법이 있을까요..?

으음 어디에서 사용하는 스켈레톤 ui인지 파일명에서 명시하면 되지 않을까요? 예를 들어, 앨범 이미지에서 사용하는 거라면 AlbumImage.tsx 이런 식으로요! 태웅님이 말씀하시는 방향은 Image.tsx 안에 다 넣는 걸까요? 👀

[peacemaker474]

흠! 그러면 일단은 components/common/Skeleton 에 넣고, 이름 길게 가져가지 말고, Image.tsx로 가져가고, 불러올 때 import * as Skeleton from '../components/common/Skeleton' 이런 식으로 불러오도록 설계 해보겠습니다.
이 방식으로 하면, 추후에 Image.tsx라는 이름으로 파일명을 가져가려고 할 때, import 하는 부분에 있어서 고민을 해야된다는 문제가 있을 것 같아요. 혹시 이름을 일관성 있게 가져갈 방법이 있을까요..?

으음 어디에서 사용하는 스켈레톤 ui인지 파일명에서 명시하면 되지 않을까요? 예를 들어, 앨범 이미지에서 사용하는 거라면 AlbumImage.tsx 이런 식으로요! 태웅님이 말씀하시는 방향은 Image.tsx 안에 다 넣는 걸까요? 👀

이 방식이 더 좋은 것 같아요! 이렇게 해서 다시 PR 날릴게요! 👍