From 0fe18dca07ab3f92b7db2d6e3a4cb5abe651a9c8 Mon Sep 17 00:00:00 2001
From: narim <0018823nmn@naver.com>
Date: Fri, 24 Jan 2025 22:20:51 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F:=20size->variant=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/components/card/new-card/index.tsx  | 16 +++++-----------
 src/common/components/card/new-card/types.ts   | 18 +++++++++---------
 .../components/price-card/index.tsx            |  8 ++++++--
 .../components/slide-card/index.tsx            | 14 ++++++++++----
 4 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/common/components/card/new-card/index.tsx b/src/common/components/card/new-card/index.tsx
index 43120eb..9f5393b 100644
--- a/src/common/components/card/new-card/index.tsx
+++ b/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">
diff --git a/src/common/components/card/new-card/types.ts b/src/common/components/card/new-card/types.ts
index 7074349..48e3e76 100644
--- a/src/common/components/card/new-card/types.ts
+++ b/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
diff --git a/src/features/trading-dashboard/components/price-card/index.tsx b/src/features/trading-dashboard/components/price-card/index.tsx
index 139b460..daa9df8 100644
--- a/src/features/trading-dashboard/components/price-card/index.tsx
+++ b/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}
diff --git a/src/features/trading-dashboard/components/slide-card/index.tsx b/src/features/trading-dashboard/components/slide-card/index.tsx
index ae92b68..e6ff97c 100644
--- a/src/features/trading-dashboard/components/slide-card/index.tsx
+++ b/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>