🎉 TradeStateCard 컴포넌트 구현

[doggopawer]

- 목적

=> 물건 리스트 조회 페이지에서 사용할 거래상태를 포함하고 있는 카드 컴포넌트가 필요해 구현했습니다.
관련 티켓 번호: 60

- 주요 변경 사항

기타 사항 (선택)

- 스크린샷 (선택)

[juyeon-park]

코딩컨벤션 정한거 다시보니까 저희 폴더명은 케밥으로 하기로 했더라고요!! 저도 그래서 suggest-card로 폴더명 변경했습니다!

[oaoong]

와 그러네요? 저도 PR 따로 해서 싹 바꿔야겠어요

[doggopawer]

아 그러네요 ㅠㅠ

[juyeon-park]

서버에서 내려주는 data들에 대한 경우는 interface로 하기로 했었어요!

[doggopawer]

반대로 알고 있었네요 감사합니다

[juyeon-park]

저는 조건부렌더링할 때 삼항연산자 이용해서 렌더링하는게 익숙한데 이렇게 함수로 따로 담아두면 어떤 이점이 있나요??? 저는 익숙하지 않은 방법이라 호기심에 여쭤봅니다! 궁금 🤔

[doggopawer]

거래상태에 따라 뱃지를 다르게 렌더링하는 기능을 문장을 읽으면 바로 알수 있어서 저렇게 해놨는데
사실 어떻게 하든 상관 없는 것 같습니다. 이부분도 논의가 필요할까요?

[oaoong]

와 그러네요? 저도 PR 따로 해서 싹 바꿔야겠어요

[oaoong]

const badgeVariant = {
    possible: {
        style: 'primary',
        text: '거래가능'
    },
    booked: {
        style: 'secondary',
        text: '예약중'
    }
}

const getBadgeByType = (tradeState: 'possible' | 'booked') => (
    <Badge variant={badgeVariant[tradeState].style}>
        {badgeVariant[tradeState].text}
    </Badge>
)

이런 식은 어떨까요?

[doggopawer]

좋네요 map을 쓸까 고민을 하다가, 상태가 두개라 주저했는데 중첩된 map이면 안쓸이유가 없겠네요

[oaoong]

혹시 cardFlex는 어떤 용도일까요??

[doggopawer]

flex box를 나름 편하게 쓰려고 정의했는데, 써보니 굳이 싶은 부분이 있는 것 같네요.