[#439] [독서모임] 모임 목록 페이지 리팩토링

[WooDaeHyun]

구현 내용

• 모임 목록 페이지 리팩토링

스크린샷

pr 포인트

• AVARTAR 컴포넌트는 [독서 모임] Avartar, bookGroupStatus 적용 및 오타 수정 #437 에서 적용해 놓은 상태입니다. 해당 부분은 지금 PR에서 제외하고 확인해 주시면 감사하겠습니다.

• Floating Button을 적용하는 과정에서 여러 이슈들이 발생했었습니다.

  • 기존에 portal을 사용하여 body 아래에 붙였고 그 이후에 FloatingButton은 position absolute로 지정하는 방식으로 구현했으나 무한 스크롤이 동작하면서 화면에 scroll이 생기면 고정되는것이 아니라 전체영역의 최하단으로 이동하여 원하는 위치에 고정되지 않는 문제가 발생

  • position을 fixed로 고정시켜 위치를 잡으려고 했으나 viewport가 기준이 되어 정확한 위치를 잡기가 애매했고, 이러한 문제를 해결하기 위해 FloatingButton을 감싸는 wrapper를 만들어서 영역을 만들어주고 그 아래에 FloatingButton의 위치를 고정시켜 보았으나 이 경우에는 wrapper가 가장 바깥에서 전체영역을 가리고 있어 다른 요소들의 click 이벤트가 먹지 않는 문제가 발생

  • position을 fixed로 만들고 우선 viewport 기준으로 전체화면의 가운데로 위치시킨 후 translate을 통해 원하는 위치에 가져다 놓는 방법을 시도하였으나 이 경우에는 Y방향으로 scroll을 했을때 아주 조금씩만 스크롤이 되는 문제가 발생

  • 현재 해결방법을 찾지 못해 다음 태스크에 다시 한 번 시도해 보려고 합니다. 설명을 제대로 하지 못한 것 같아... 죄송합니다 😅 우선 다시 방법을 강구해 보겠으니 FloatingButton을 제외하고 확인 부탁드립니다.

Help

관련 이슈

• Close [독서 모임] 독서 모임 페이지  #439

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dadok	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 18, 2023 6:13pm

[github-actions]

🚀 Storybook: https://64aba10cd478ad51307a8997-aqdhkwpjul.chromatic.com/

[minjongbaek]

ask;
기존에 있던 search1.kakaocdn.net 호스트 외에 두 호스트 에서 받아오는 이미지가 있나요? 👀

[WooDaeHyun]

@minjongbaek
네 말씀주신 호스트 외에 독서 모임 목록 페이지에서 위의 두 호스트에서 받아오는 이미지가 존재하여 에러가 발생해 추가로 작성하게 되었습니다! 👀

[minjongbaek]

ask;
onClick이 optional로 바뀌었네요. onClick prop 을 받지 않는 경우는 어떤 경우인가요?

[WooDaeHyun]

@minjongbaek
네 현재 저희 서비스의 경우 특정 모임을 선택하면 모임 상세 페이지로 이동하게 되는데 저번에 말씀해주신 것처럼 현재 저희 서비스에서는 Link 태그를 통해서 이동하면 충분할 것으로 생각되어 Link태그를 활용하여 구현했고 그 과정에서 onClick은 현재는 사용하지 않지만 추후 기능을 추가적으로 제공하는 과정에서 사용될 여지가 있을 수 있다라는 의견이 있었던 것 같아 옵셔널로 변경을 해 놓았습니다. 사실상 현재 Link와 onClick은 양립할 수 없는 것 같은데 onClick을 지우는것이 더 맞다고 생각하시나요??

[minjongbaek]

p1;

과정에서 onClick은 현재는 사용하지 않지만 추후 기능을 추가적으로 제공하는 과정에서 사용될 여지가 있을 수 있다라는 의견이 있었던 것 같아 옵셔널로 변경을 해 놓았습니다.

@WooDaeHyun 자세한 코멘트 감사합니다. 🙇
내부적으로 어떻게 작동하는지 자세하게 알지 못하지만, <Link /> 컴포넌트에 onClick 이벤트 핸들러를 넘겨주면 페이지 이동 전 핸들러 로직을 수행하는 것으로 알고 있긴 해요.

그런데 구현해주신 코드를 보면, SimpleBookGroup 컴포넌트에서 <Link /> 컴포넌트를 사용하지 않고 있는데 onClick prop은 옵셔널하게 받고 있어서 동작을 어떤 동작을 수행하는지 유추하기 어려운 것 같아요. 명확하게 <Link /> 컴포넌트를 사용하거나 필수로 onClick prop을 넘겨주면 좋을 것 같다고 생각해요.

[WooDaeHyun]

@minjongbaek
민종님의 의견이 맞는 것 같아 우선 Simple과 DetailBookGroupCard에서는 모임 상세 페이지로 이동하는 기능으로만 현재 동작하고 있어 기존에 page단에서 사용하던 Link 태그와 컴포넌트에 onClick 이벤트를 옵션으로 전달 받는 것이 아니라 컴포넌트 내부에서 Link태그로 페이지 이동을 할 수 있도록 전환했습니다! 확인 부탁드립니다. 👀

[minjongbaek]

p1;
지난 번 정리한 컨벤션을 따라 onClick 으로 작성하는건 어떨까요?

[WooDaeHyun]

좋은 생각입니다. 다른 컴포넌트 handleClick으로 작성된 부분을 일부 수정했었는데 여기도 있었네요! 매의 눈 감사합니다 👍

[WooDaeHyun]

이 부분 수정했었으나 Link 태그로 전환하면서 onClick 이벤트는 제거했습니다. 참고 부탁드립니다~

[minjongbaek]

ask;
name 이 모임장의 이름을 나타내는 것으로 보이는데 null인 경우가 있나요? 👀

[WooDaeHyun]

@minjongbaek
해당 부분에서 type을 정의하는 과정에서 name prop만 유일하게 string | null type의 경우 string 타입을 할당할 수 없다는 에러메세지를 지속적으로 받아 답답함에 그만.. null을 넣어버렸습니다.. 이 부분은 수정이 필요해요... 도와줘..😭

[minjongbaek]

@WooDaeHyun name prop 의 타입을 string 으로 지정하게 되면 string | null 은 string 타입에 할당할 수 없다. 는 에러메시지가 출력된다는 말씀이신가요?

제가 이해한 내용이 맞다면, 7번 라인에서 선언한 DetailBookGroupCardProps 인터페이스를 보면 owner.name 의 타입을 nullable 하지 않도록 수정해야 할 것 같아요 👀

[WooDaeHyun]

@minjongbaek
네 맞아요! 말씀 주신 내용까지는 접근을 했었는데 동일한 데이터를 받아오고 있는데 owner.name만 null인 경우 있을 수 있다라는 에러가 발생해서 거기서 막혔습니다. 🥹 처음부터 자세하게 설명을 드렸어야 했는데 죄송합니다.

[WooDaeHyun]

@minjongbaek

type APIGroupOwner = {
  id: APIUser['userId'];
  profileUrl: APIUser['profileImage'];
  // FIXME nickname: APIUser['nickname'] nullable 하지 않게 수정 후 다시 반영
  nickname: string;
};

현재 APIGroupOwner에서 정의된 owner.name 값이 nullable 한 상태여서 발생한 Error임을 인지하였고 해당 부분을 명시적으로 string 타입으로 지정하여 해당 부분을 수정하기는 했습니다. 확인 부탁드려요~

[gxxrxn]

types/group.ts 파일 안에 APIGroupOwner.nickname이 APIUser['nickname'] 타입으로 정의되어있는데, 해당 타입이 nullable해요! 하지만 api 명세를 보면 nickname 프로퍼티는 nullable하지 않은 값이기 때문에 제 pr에서도 APIUser 타입을 전체적으로 수정하는 작업을 했어요! 우선은 APIGroupOwner.nickname 타입을 string 으로 수정하고, 추후 제 pr이 머지된 후에 다시 APIUser['nickname'] 타입으로 수정하면 해결할 수 있을 것 같아요!

[minjongbaek]

p5;
title prop 은 <img /> 요소에서 alt 속성을 위해 사용되는 것으로 보이네요. title은 책 이름을 화면에서 표시하기 위한 prop으로 보여질 수 있다고 생각해서 alt 로 변경해도 좋을 것 같다고 생각해요.

[WooDaeHyun]

@minjongbaek
ask;
좋은 의견 감사합니다! 궁금한 점이 있는데 민종님은 보통 prop들을 정의할때 받아오는 prop의 상태(?) 혹은 prop의 내용(?)을 기준으로 prop의 이름을 정하는것이 아니라 해당 prop을 받는 컴포넌트를 기준으로 prop을 받는 컴포넌트에서 어떻게 활용되는지를 기준으로 prop이름들을 정하시는 것을 선호하시는 것 같은데? 저 또한 좋은 관점이라는 생각이 들었는데 어떤 이유에서 그런 생각을 하시게 된 건지 여쭤봐도 될까요?? 레퍼런스나 책, 혹은 조언을 들은 건가요?? 👀

[WooDaeHyun]

@minjongbaek
아 참고로 BookCover 컴포넌트의 경우 @gxxrxn 님이 구현을 해주셨는데 같이 디스코드를 통해서 작업을 하던 중에 제가 일부 옵셔널로 변경을 한 사항이라 규란님의 의견도 함께 들어보고 결정하면 좋을 것 같습니다.

@gxxrxn @minjongbaek

[minjongbaek]

좋은 의견 감사합니다! 궁금한 점이 있는데 민종님은 보통 prop들을 정의할때 받아오는 prop의 상태(?) 혹은 prop의 내용(?)을 기준으로 prop의 이름을 정하는것이 아니라 해당 prop을 받는 컴포넌트를 기준으로 prop을 받는 컴포넌트에서 어떻게 활용되는지를 기준으로 prop이름들을 정하시는 것을 선호하시는 것 같은데? 저 또한 좋은 관점이라는 생각이 들었는데 어떤 이유에서 그런 생각을 하시게 된 건지 여쭤봐도 될까요?? 레퍼런스나 책, 혹은 조언을 들은 건가요?? 👀

@WooDaeHyun 따로 참고한 레퍼런스는 없습니다. prop이 HTML 요소에서 지원하는 속성을 위해 사용된다면 DX 측면에서 동일한 이름을 사용하는 것이 좋지 않을까? 라고 생각하는데 이런 생각이 코드에 반영되는 것 같아요. 이 부분은 주관적인 내용을 포함하고 있기에 '누구는 이런 기준으로 prop 명을 정하는구나.' 라고 봐주시면 좋을 것 같아요. 🙇

그렇기 때문에 코멘트에 p5를 적용했습니다. 만약 대현님께서 다른 생각을 가지고 있다면 공유해주시고, 제 피드백을 반영하지 않아도 좋아요!

[WooDaeHyun]

@minjongbaek
이 부분에서는 정말 코드 작성 스타일에 따라 의견이 나뉠 수 있을 것 같아서! 프로젝트에 참여하는 사람들의 의견을 모아 앞으로 작성되는 prop 명들을 어떤 부분을 기준으로 이름을 정할지 의견을 나눠보면 좋을 것 같아요 👀

[gxxrxn]

고민해봤는데 저는 이미지를 보여줄 수 없을 때 alt 값을 보여주는만큼 BookCover 컴포넌트에서는 title이라는 정확한 값을 받는 것이 더 좋은 것 같다는 생각이 들어요!

[WooDaeHyun]

받아온 데이터를 두 번 풀어서 사용해야 하는 상황에서 반복문을 두 번 돌리는 것이 어색한 것 같아 별도의 방법을 찾아보던 중
Tanstack Query 예제에서 제가 작성한 코드처럼 map을 두 번 사용하는 경우도 있기에 구조적으로 큰 어색함은 없다는 생각이 들어 다음과 같은 방식으로 코드를 구현했습니다.

[gxxrxn]

수고하셨어요! 👍🏻