[CREATE] card component

[nakyoung98]

이 PR은 어떤 유형인가요?

• [ ] 리팩터링
• [X] 기능
• [ ] 버그 수정
• [ ] 최적화
• [ ] 문서 업데이트

설명

Card Component 구현 Card Component에 포함되는 하위 Component들 구현

CardContent

• Card의 본문 부분

  CardFooter

• Card의 footer
• Date 표시

  CardProfile

• sender, relationship, profile 이미지 표시

  CardProfileName

• CardProfile에 포함되는 컴포넌트
• sender를 표시함

  CardProvider

• Card에 전달되는 데이터를 하위 컴포넌트에 쉽게 공유하기 위한 Context
• useCardContextValue 커스텀 훅으로 공유데이터 사용 가능

  export function CardProvider({ defaultValue = defaultCardValue, children }) {
  const [contextValue, setContextValue] = useState(defaultValue);
  return (
  <CardContext.Provider
    value={{
      contextValue,
  //        setContextValue,
    }}
  >
    {children}
  </CardContext.Provider>
  );
  }

  여담: Card는 Editable 하지 않은 것 같아서, setContextValue 부분을 구현하긴 했는데, 적용이나 export는 하지 않았어요. 여러분은 어떻게 생각하시나요?

CardRelationBadge

• RelationBadge를 Wrap하여 Context를 활용
• CardProvider에서 data를 받음

관련 티켓 및 문서

• Related Issue #2
• Closes #2

스크린샷, 녹화

변경사항을 테스트하는 방법, 테스트에 사용된 기기 및 브라우저, UI 변경에 대한 관련 이미지 등에 대한 지침을 이곳에 기재해 주세요.

UI 접근성 체크리스트

UI 변경 사항이 있는 경우, 이 체크리스트를 활용하세요:

• [X] Semantic HTML 구현?
• [ ] 키보드 조작이 지원?
• [X] axe DevTools를 사용하여 Critical 및 Serious 문제를 확인하고 해결했나요?

  
  Element has insufficient color contrast of 4.38 (foreground color: #9935ff, background color: #f8f0ff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Related Node 동료

<img width="42" alt="image" src="https://github.com/RollingPaperTeam/rolling-papaer-web/assets/66313756/4cbcd996-4a3d-470f-adfa-6c379af5acf8">
_이 부분에서 배경과,폰트간 대비가 부족하다는 문구가 뜨네요. 이 부분은 정해진 값이라서 제가 바꿀 순 없을 것 같아 참고만 해주세요!_

## [선택사항] 이 PR을 가장 잘 설명하는 GIF는 무엇인가요?
![giphy](https://github.com/RollingPaperTeam/rolling-papaer-web/assets/66313756/44327b59-e0e8-4426-9f9e-0efff96ac688)

[LeeJuyoung-design]

좋아요. 멋집니다. 이미지 너무 웃겨요.