⚡️: size->variant 변경

src/common/components/card/new-card/index.tsx

@@ -1,39 +1,33 @@
-import {
-	cardVariants,
+import type {
 	MiniCardPT,
 	TbCardHeaderPT,
 	TbCardPT,
 } from "@/common/components/card/new-card/types"
+import { cardVariants } from "@/common/components/card/new-card/types"
 import { cn } from "@/util/utils"
 
 export function TbCard({
 	className,
 	children,
-	size,
+	variant,
 	color,
 	...rest
 }: TbCardPT) {
 	return (
-		<div {...rest} className={cn(cardVariants({ size, color }), className)}>
+		<div {...rest} className={cn(cardVariants({ variant, color }), className)}>
 			{children}
 		</div>
 	)
 }
 
 export function TbCardHeader({
-	className,
 	children,
 	title,
 	rightArea,
 	sideTitle,
 }: TbCardHeaderPT) {
 	return (
-		<div
-			className={cn(
-				className,
-				"flex flex-col gap-3 space-y-1.5 p-3 md:gap-5 md:p-5",
-			)}
-		>
+		<div className="flex flex-col gap-3 space-y-1.5 p-3 md:gap-5 md:p-5">
 			<div className="flex flex-col">
 				{title && (
 					<div className="flex h-fit justify-between">

src/common/components/card/new-card/types.ts

@@ -1,34 +1,34 @@
-import { cva, VariantProps } from "class-variance-authority"
-import { ReactNode } from "react"
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+import type { ReactNode } from "react"
 
 export const cardVariants = cva("shadow-md", {
 	variants: {
+		variant: {
+			default: "rounded-2xl",
+			mini: "flex-col gap-2 rounded-xl p-6",
+		},
 		color: {
 			default: "bg-[#FAFAFA]",
 			light: "bg-[#F6FCF3]",
 			deep: "bg-[#EFF6F1]",
 			pastelGreen: "bg-tbPastelGreen",
 		},
-		size: {
-			default: "rounded-2xl",
-			mini: "flex-col gap-2 rounded-xl p-6",
-		},
 	},
 	defaultVariants: {
+		variant: "default",
 		color: "default",
-		size: "default",
 	},
 })
 
 export type TbCardPT = {
 	className?: string
 	children?: ReactNode
-	size?: VariantProps<typeof cardVariants>["size"]
+	variant?: VariantProps<typeof cardVariants>["variant"]
 	color?: VariantProps<typeof cardVariants>["color"]
 }
 
 export type TbCardHeaderPT = {
-	className?: string
 	children?: ReactNode
 	title?: string
 	rightArea?: ReactNode

src/features/trading-dashboard/components/price-card/index.tsx

@@ -1,9 +1,9 @@
-import type { MiniCardPT } from "@/common/components/card/new-card/types"
 import {
 	MiniCardContent,
 	MiniCardHeader,
 	TbCard,
 } from "@/common/components/card/new-card"
+import type { MiniCardPT } from "@/common/components/card/new-card/types"
 import { usePriceCardData } from "@/features/trading-dashboard/hook/usePriceCardData"
 
 type PriceCardPT = {
@@ -24,7 +24,11 @@ export function PriceCard({ setActiveChart }: PriceCardPT) {
 					}}
 					className="text-left"
 				>
-					<TbCard size="mini" color={idx ? "deep" : "light"} className="h-full">
+					<TbCard
+						variant="mini"
+						color={idx ? "deep" : "light"}
+						className="h-full"
+					>
 						<MiniCardHeader title={items.title} />
 						<MiniCardContent
 							value={items.value}

src/features/trading-dashboard/components/slide-card/index.tsx

@@ -1,17 +1,18 @@
-import type { MiniCardPT } from "@/common/components/card/new-card/types"
+import { useEffect, useState } from "react"
+
 import {
 	MiniCardContent,
 	MiniCardHeader,
 	TbCard,
 } from "@/common/components/card/new-card"
-import { useEffect, useState } from "react"
+import type { MiniCardPT } from "@/common/components/card/new-card/types"
 import { timeCardDatas } from "@/features/trading-dashboard/components/slide-card/data"
 
 export function TradingVolumeCards() {
 	const [data, setData] = useState(timeCardDatas[0])
 
 	useEffect(() => {
-		const transformCard = setInterval(() => {
+		setInterval(() => {
 			setData((prevData) =>
 				prevData === timeCardDatas[0] ? timeCardDatas[1] : timeCardDatas[0],
 			)
@@ -21,7 +22,12 @@ export function TradingVolumeCards() {
 	return (
 		<div className="grid w-full grid-cols-2 gap-4">
 			{data.map((items: MiniCardPT, idx) => (
-				<TbCard size="mini" color={idx ? "deep" : "light"} className="h-full">
+				<TbCard
+					key={idx}
+					variant="mini"
+					color={idx ? "deep" : "light"}
+					className="h-full"
+				>
 					<MiniCardHeader title={items.title} />
 					<MiniCardContent value={items.value} unit={items.unit} />
 				</TbCard>