refactor : Card 컴포넌트 리팩토링

[yunchaeney]

✏️ 작업 내용

• Card 컴포넌트를 컴파운드 패턴으로 리팩토링
• Card 컴포넌트 테스트코드 작성

📷 스크린샷

컴포넌트 외관상 기존과 변경된 바 없습니다

✍️ 사용법

기본 : 이미지와 모임 정보만 출력, handleSaveDiscard 이벤트 핸들러 전달 필수

<Card handleSaveDiscard={handleSaveDiscard} data={DATA_LIST[0]}>
  <Card.Info />
</Card>

chip 출력 시 Card.Info 위에 Card.Chips 컴포넌트 추가

<Card handleSaveDiscard={handleSaveDiscard} data={DATA_LIST[0]}>
  <Card.Chips />
  <Card.Info />
</Card>

버튼 출력 시 Card.Info 밑에 Card.Button 컴포넌트 추가 및 버튼 클릭 이벤트 핸들러 전달

<Card handleSaveDiscard={handleSaveDiscard} data={DATA_LIST[0]}>
  <Card.Chips />
  <Card.Info />
  <Card.Button
    handleButtonClick={
      DATA_LIST[0].isCompleted
        ? handleWriteReview
        : handleCancelGatherings
    }
  />
</Card>

🎸 기타

• Card 컴포넌트에서 받은 data 를 Context 를 통해 하위 Chips, Info, Button 컴포넌트에 전달하고 있습니다.
• Button은 데이터 조건에 따라 1개만 렌더링 되기 때문에, 데이터 조건에 맞추어 Click Handler를 내려주면 될 것 같습니다.
• 컴파운드 패턴을 처음 써봐서 제대로 작성한 건지 잘 모르겠어요!
• 더 좋은 방법이 있다면 코멘트 부탁드려요!

Test

• [x] 렌더링 시 <Card.Info /> 가 데이터 내용을 출력하는지 확인
• [x] <Card.Chips /> <Card.Button /> 미포함 시 렌더링 하지 않는 것 확인
• [x] <Card.Chips /> 포함 시 데이터 상태에 따라 chip 렌더링 확인
• [x] <Card.Button /> 포함 시 데이터 상태에 따라 button 렌더링 확인
• [x] <Card.Button /> 포함 시 Button 클릭 이벤트 작동 확인
• [x] 취소된 모임일 경우 오버레이 렌더링 및 버튼 클릭 이벤트 작동 확인

close #78

[yunchaeney]

현재 CI / Build 과정에서 발생한 에러 해결 중에 있습니당

[yunsung-hodoopapa]

컨텍스트를 사용해주신 것을 잘 보았습니다 :-) 만일 클라이언트 전역 상태관리 라이브러리를 고려하고 있다면 zustand를 사용해보아도 좋습니다 :-)