refactor : card 공용 카드컴포넌트 리팩토링

[nrkcode]

🔥 Issues

• issue: KAN-36
• sub-issues:
  • KAN-83

🎯 작업 내용

+) clsx로 만들었다가 버튼에서 cva 사용하였기 때문에 버튼과 같은 cva로 바꿨습니다 추가 코멘트 참고해주세요

⚡️ : 공용 카드컴포넌트 리팩토링

줄바꿈 적용

폭이 좁아지면 다음 줄로 넘어가게 수정

수정 전 커밋

공용 카드 리팩토링 ⚡️ : 공용 카드컴포넌트 리팩토링

카드컴포넌트 리팩토링 해봤습니다
카드, 카드헤더, 카드 컨텐츠로 구분되어 있고 미니카드는 영록님이 분리해주신거 거의 그대로입니다

Options

• 카드 TbCard

  • isColored 배경색유무지정

• 카드헤더 TbCardHeader

  • title 카드제목 string
  • rightArea 제목 오른쪽 공간
  • lowerTitle 소제목

• 카드 컨텐츠 TbCardContent

  • p-3 pt-0 text-left text-sm md:p-5 md:pt-0
  • pt가 0px이므로 헤더없이 사용할 경우 padding 다시 지정해야함

• 미니카드 MiniCard
  • title 카드제목 string
  • variant: number | string // "default" | "light" | "deep" | 0 | 1 | 2
• 미니카드 컨텐츠 MiniCardContent
  • value: 값 string | number,
  • unit: 단위 (예시에서 원) string,
  • amount: 증가, 감소량 number
  • isIncreased: boolean , null 허용 (증.감량 0일 경우를 구분하기 위한)

줄바꿈 적용

폭이 좁아지면 다음 줄로 넘어가게 수정

clsx 적용 ➕ : clsx 라이브러리 설치

npm install --save clsx

	const cardClasses = clsx(
		"w-full flex-col gap-2 rounded-xl p-6 shadow-md",
		{
			"bg-[#FAFAFA]": variant === "default",
			"bg-[#F6FCF3]": variant === "light" || variant === 0,
			"bg-[#EFF6F1]": variant === "deep" || variant === 1,
		},
		className,
	)

mini card 부분에 clsx 적용해서 배경색 적용하기 편하게 했습니다
아래 코드처럼 map으로 데이터 출력할 때 인덱스 값 줘서 배경 색 편하게 지정할 수 있도록 숫자로도 이름 붙였습니다

export function PriceCard({ setActiveChart }: PriceCardPT) {
	return (
		<>
			{priceCardDatas.map((items: MiniCardPT, idx) => (
				<button
					key={idx}
					onClick={() => {
						setActiveChart(idx)
					}}
					className="text-left"
				>
					<MiniCard title={items.title} variant={idx}>
						<MiniCardContent
							value={items.value}
							unit={items.unit}
							isIncreased={items.isIncreased}
							amount={items.amount}
							className={`h-full ${items.className}`}
						/>
					</MiniCard>
				</button>
			))}
		</>
	)
}

✅ 체크 리스트

• Main 브랜치 Pull 받기
• Issue 번호 설정 확인
• Label 확인
• Assignees 설정 확인
• Reviewers 설정 확인

---

🙏 꼭 리뷰 남겨주세요.!!

• 아래 양식에 맞게 리뷰 부탁드립니다..!!
• 수정을 요구하는 게 아니라면, "Description" 을 꼭 남기지 않아도 좋습니다. 👍

# Request Level

<!--
  - [x] "🚨 꼭 수정해주세요.!"
-->

<!--
  - [x] "🚧 재고해주시길.."
-->

<!--
  - [x] "✅ LGTM"
-->

# Description

[seongyun4359]

• "✅ LGTM"
  고생하셨습니다

[keeprok]

보완할점하고 수정부분 수요일에 알려드릴게요

[Giradon]

• "✅ LGTM"

[nrkcode]

🔥 Issues

• issue: KAN-121

• sub-issues:

  • KAN-130

• issue: KAN-122

• sub-issues:

  • KAN-123

🎯 작업 내용

⚡️: Trading 반응형 css 수정

화면 크기에 따라 레이아웃 달라지도록 적용

⚡️: 공용 카드 컴포넌트 cva 형식으로 수정

Options

• 카드 TbCard
  • variant 카드 형식 지정
    • default
    • mini
  • color 배경색지정
    • default: "bg-[#FAFAFA]",
    • light: "bg-[#F6FCF3]",
    • deep: "bg-[#EFF6F1]",
    • pastelGreen: "bg-tbPastelGreen",

• 카드 헤더 TbCardHeader
  • title 카드제목 string
  • rightArea 제목 오른쪽 공간
  • sideTitle 소제목
• 카드 컨텐츠 TbCardContent
  • p-3 pt-0 text-left text-sm md:p-5 md:pt-0
  • pt가 0px이므로 헤더없이 사용할 경우 padding 다시 지정해야함
• 미니카드 헤더 MiniCardHeader
  • title 카드제목 string
  • variant: number | string // "default" | "light" | "deep" | 0 | 1 | 2
• 미니카드 컨텐츠 MiniCardContent
  • value: 값 string | number,
  • unit: 단위 (예시에서 원) string,
  • amount: 증가, 감소량 number
  • isIncreased: boolean , null 허용 (증.감량 필요없을 경우를 구분)
    • 증가는 true, 감소는 false, 증감량 0인 경우 "noChange"로 녹색 글씨 출력하도록