♻️ [Refactor] Card 리팩토링

[cloud0406]

#️⃣연관된 이슈

ex) #140 , #이슈번호

📝작업 내용

카드 리팩토링

변경된 코드가 많아서 세세하게 보시기보다 카드 폴더 위주로 봐주시면 될 것 같습니다.

Card.tsx의 경우 코드가 상당히 긴데 파일 내부에 atoms들과 variant에 따른 4가지 코드들이 전부 들어가있습니다.

따라서 카드 파일을 확인하실 때 위쪽부터 atom들이 전부 나열되어있고

// Box 컴포넌트
function CardBox({ children, className = '', ...props }: CardBoxProps) {
  return (
    <div
      className={twMerge(
        'relative flex min-h-[180px] w-[336px] flex-1 flex-col rounded-[20px] border-2 border-gray-normal-01 p-6 md:w-full',
        props.onClick && 'cursor-pointer',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  );
}

아래쪽 카드 부분에 스위치문으로 variant에 따라 렌더해주고 있습니다.

function Card(props: CardProps) {
  const renderCardContent = () => {
    switch (props.variant) {
      case 'defaultClub':
      default: {
        const {
          imageUrl,
....

추후에 수정이 필요하시다면 카드 파일내에서 atom들과, variant부분을 찾아서 건드리시면 될 것 같습니다!
-> 이 부분은 스토리북에 분리해두었으니 한 번 확인하시면 더 도움이 될 것 같아요.

인터페이스 폴더는 card와 clubCard로 분리되어있는데 card의 경우 공통으로 활용되는 atom들에 관한 타입, clubCard의 경우 각 variant에 따라 렌더되는 부분의 인터페이스를 담고 있습니다.

추후에 api 작업하실 때 clubCard 부분에서 사용하시는 카드들의 인터페이스를 변경하시면 될 것 같습니다.
해당 파일 맨위에 기본적으로 전부 사용되는 공통 interface가 존재합니다.

interface ClubCard {
  // 이미지 정보
  imageUrl: string;
  imageAlt?: string;

  // 모임 정보
  title: string;
  location: string;
  datetime: string;
  meetingType: 'FREE' | 'FIXED';
  isPast: boolean; // 지난 모임인지 아닌지
  status: 'completed' | 'scheduled' | 'pending' | 'confirmed' | 'closed'; // 개설 현황

  // 액션 (카드 클릭시 라우터 처리 등)
  onClick: () => void;
}

그 밑부분에 해당 공통 interface를 확장하여 4가지 variant마다 추가로 필요한 타입들을 명시하고 있습니다.

interface DefaultClubCard extends ClubCard {
  // 찜 정보
  isLiked: boolean;
  onLikeClick: () => void;

  // 취소 정보 (블러)
  isCanceled: boolean;
  onDelete: () => void;

  // 참가자 현황
  current: number;
  max: number;
}
...

미리보기, 사용방법 및 결과물

varint는 총 4가지 입니다. defaultClub | participatedClub | hostedClub | detailedClub

defaultClub : 책 모임, 찜 목록

participatedClub : 나의 모임 (내가 참여한 모임)

hostedClub: 내가 만든 모임

detailedClub: 상세 모임 카드

전체적으로 사용하실 때는 아마 다음 흐름일 것 같습니다.

1. api 받기
2. api 받은 데이터로 사용하려는 카드의 interface참고해서 props 객체 만들기 (clubCard.ts 에서 variant별 타입 참고) -> 제가 임의로 적어두긴했는데 추후에 개발하시면서 필요한 부분 수정하시면 될 것 같습니다.
3. 카드에 넣기

// 사용하는 컴포넌트에서
const defaultCardProps = {
  **variant: 'defaultClub'**    // variant 부분 적어주세요!
  imageUrl: 'https://example.com/image.jpg',
  imageAlt: '모임 이미지',
  title: '독서 모임',
  location: '서울 강남구',
  datetime: '2024-01-20 14:00',
  isLiked: false,
  current: 3,
  max: 8,
  isPast: false,
  isCanceled: false,
  meetingType: 'FIXED',
  status: 'pending',
  onLikeClick: () => {
    console.log('좋아요 클릭');
  },
  onClick: () => {
    console.log('카드 클릭');
  },
  onDelete: () => {
    console.log('삭제 클릭');
  }
};

<Card {...defaultCardProps} />

기타 참고사항

prop의 경우 공통으로 사용되는 부분을 객체화해서 간결하게 적용했었는데 적용하고나니 오히려 처음 코드를 이해하실 때는 더 복잡해질 것 같아서 전부 풀어헤쳐서 적었습니다.
이 때문에 코드가 더 난잡해지긴했는데, 추후에 interface가 작업하시면서 수정될 수도 있고 이해하기는 다 풀어서 쓰는게 좋을 것 같아서 다시 변경해두었습니다.

이 부분은 어느정도 안정화되면 리팩토링이 필요하긴 할 것 같아요

내용이 너무 복잡해서 이해가 안되시는 부분은 언제든 말씀해주세요!

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
bookco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 13, 2024 8:14am

[wynter24]

필요한 데이터가 많다 보니 prop이 많아질 수 밖에 없네요ㅠ
코드가 길어졌지만... 그래도 덕분에 빠르게 적용할 수 있을 것 같습니다!
중간발표 끝나고 말씀하신대로 객체화해서 리팩토링 하면 좋을 것 같습니다!
수고하셨습니다!

[sunnwave]

수고하셨습니다...!!😂😂😂

[yunsung-hodoopapa]

조금 더 타입의 가독성을 확보할 수 있으면 좋을 것 같아요!
유니온 | 유니온2 | 유니온 3

[yunsung-hodoopapa]

todo 주석을 추가해서, 키의 컨벤션을 통일하면 더 좋을 것 같습니다!

[yunsung-hodoopapa]

좋아요 0 (하트)
api 좋아요 카운트랑 하트 불리언 // 숫자에 대한 정보는 오차가 생길 수 밖에 없엇,
ui는 낙관적업데이트를 적용하더라도, 반드시 에러 상황(ex)방이 닫히는등) 엣지케이스를 고려해줘야 합니다.

[yunsung-hodoopapa]

status, CLUB_STATUS

[yunsung-hodoopapa]

MDX 가이드를 만들어주면 더 좋고, 스토리 북 & 넥스트라를 활용해서 가이드를 제시해주면 더 좋습니다.