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

package.json

@@ -1,77 +1,77 @@
 {
-  "name": "my-app",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "format": "prettier --write .",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@tanstack/react-query": "^5.62.7",
-    "@tanstack/react-query-devtools": "^5.62.8",
-    "@tanstack/react-table": "^8.20.5",
-    "animate": "^1.0.0",
-    "autoprefixer": "^10.4.20",
-    "axios": "^1.7.9",
-    "bcrypt": "^5.1.0",
-    "class-variance-authority": "^0.7.1",
-    "dlv": "^1.1.3",
-    "glob": "^11.0.0",
-    "jsonwebtoken": "^9.0.2",
-    "lodash": "^4.17.21",
-    "lru-cache": "^11.0.2",
-    "lucide-react": "^0.468.0",
-    "mongodb": "^6.12.0",
-    "next": "15.0.3",
-    "next-auth": "^4.24.11",
-    "react": "^18.3.1",
-    "react-chartjs-2": "^5.2.0",
-    "react-dom": "^18.3.1",
-    "react-modal": "^3.16.1",
-    "recharts": "^2.15.0",
-    "rimraf": "^6.0.1",
-    "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
-    "@storybook/addon-essentials": "^8.6.0-alpha.0",
-    "@storybook/addon-interactions": "^8.6.0-alpha.0",
-    "@storybook/addon-onboarding": "^8.6.0-alpha.0",
-    "@storybook/blocks": "^8.6.0-alpha.0",
-    "@storybook/nextjs": "^8.6.0-alpha.0",
-    "@storybook/react": "^8.6.0-alpha.0",
-    "@storybook/test": "^8.6.0-alpha.0",
-    "@types/bcrypt": "^5.0.2",
-    "@types/jsonwebtoken": "^9.0.7",
-    "@types/mongodb": "^4.0.7",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
-    "@typescript-eslint/parser": "^6.21.0",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "^15.0.3",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.11.1",
-    "eslint-plugin-tailwindcss": "^3.17.5",
-    "postcss": "^8.4.49",
-    "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
-    "storybook": "^8.6.0-alpha.0",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.2"
-  },
-  "overrides": {
-    "react-is": "^19.0.0-rc-66855b96-20241106"
-  }
+	"name": "my-app",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint",
+		"format": "prettier --write .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"dependencies": {
+		"@tanstack/react-query": "^5.62.7",
+		"@tanstack/react-query-devtools": "^5.62.8",
+		"@tanstack/react-table": "^8.20.5",
+		"animate": "^1.0.0",
+		"autoprefixer": "^10.4.20",
+		"axios": "^1.7.9",
+		"bcrypt": "^5.1.0",
+		"class-variance-authority": "^0.7.1",
+		"dlv": "^1.1.3",
+		"glob": "^11.0.0",
+		"jsonwebtoken": "^9.0.2",
+		"lodash": "^4.17.21",
+		"lru-cache": "^11.0.2",
+		"lucide-react": "^0.468.0",
+		"mongodb": "^6.12.0",
+		"next": "15.0.3",
+		"next-auth": "^4.24.11",
+		"react": "^18.3.1",
+		"react-chartjs-2": "^5.2.0",
+		"react-dom": "^18.3.1",
+		"react-modal": "^3.16.1",
+		"recharts": "^2.15.0",
+		"rimraf": "^6.0.1",
+		"tailwind-merge": "^2.5.5",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^3.2.3",
+		"@storybook/addon-essentials": "^8.6.0-alpha.0",
+		"@storybook/addon-interactions": "^8.6.0-alpha.0",
+		"@storybook/addon-onboarding": "^8.6.0-alpha.0",
+		"@storybook/blocks": "^8.6.0-alpha.0",
+		"@storybook/nextjs": "^8.6.0-alpha.0",
+		"@storybook/react": "^8.6.0-alpha.0",
+		"@storybook/test": "^8.6.0-alpha.0",
+		"@types/bcrypt": "^5.0.2",
+		"@types/jsonwebtoken": "^9.0.7",
+		"@types/mongodb": "^4.0.7",
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"@typescript-eslint/eslint-plugin": "^6.21.0",
+		"@typescript-eslint/parser": "^6.21.0",
+		"eslint": "^8.57.1",
+		"eslint-config-next": "^15.0.3",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-prettier": "^5.2.1",
+		"eslint-plugin-react": "^7.37.2",
+		"eslint-plugin-react-hooks": "^5.0.0",
+		"eslint-plugin-storybook": "^0.11.1",
+		"eslint-plugin-tailwindcss": "^3.17.5",
+		"postcss": "^8.4.49",
+		"prettier": "^3.4.2",
+		"prettier-plugin-tailwindcss": "^0.6.9",
+		"storybook": "^8.6.0-alpha.0",
+		"tailwindcss": "^3.4.17",
+		"typescript": "^5.7.2"
+	},
+	"overrides": {
+		"react-is": "^19.0.0-rc-66855b96-20241106"
+	}
 }

src/app/(main)/trading/page.tsx

@@ -14,24 +14,16 @@ export default function Trading() {
 
 	return (
 		<div className="flex flex-col gap-8 p-8">
-			<div className="flex w-full flex-col gap-4">
-				<div className="grid w-full grid-cols-4 gap-4">
-					<PriceCard
-						activeChart={activeChart}
-						setActiveChart={setActiveChart}
-					/>
-					<div className="col-span-2">
-						<TradingVolumeCards />
-					</div>
-				</div>
-
-				<div className="grid grid-cols-2 gap-4">
-					{activeChart === 0 && <SmpLineChart />}
-					{activeChart === 1 && <RecLineChart />}
-					<VolumeChart />
-				</div>
+			<div className="flex w-full flex-col gap-4 md:grid md:grid-cols-2">
+				<PriceCard activeChart={activeChart} setActiveChart={setActiveChart} />
+				<TradingVolumeCards />
+			</div>
+			<div className="grid h-fit grid-rows-2 gap-4 md:grid-cols-2 md:grid-rows-1">
+				{activeChart === 0 && <SmpLineChart />}
+				{activeChart === 1 && <RecLineChart />}
+				<VolumeChart />
 			</div>
-			<div className="flex w-full justify-center">
+			<div className="flex h-fit w-full justify-center">
 				<TradingDataTable />
 			</div>
 		</div>

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

@@ -0,0 +1,98 @@
+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,
+	variant,
+	color,
+	...rest
+}: TbCardPT) {
+	return (
+		<div {...rest} className={cn(cardVariants({ variant, color }), className)}>
+			{children}
+		</div>
+	)
+}
+
+export function TbCardHeader({
+	children,
+	title,
+	rightArea,
+	sideTitle,
+}: TbCardHeaderPT) {
+	return (
+		<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">
+						<span className="text-start text-lg font-bold text-black">
+							{title}
+						</span>
+						{rightArea}
+					</div>
+				)}
+				{sideTitle && (
+					<span className="mb-1 text-start text-sm font-normal text-black/75">
+						{sideTitle}
+					</span>
+				)}
+			</div>
+			{children}
+		</div>
+	)
+}
+
+export function TbCardContent({ className, children }: TbCardPT) {
+	return (
+		<div className={cn(className, "p-3 pt-0 text-left text-sm md:p-5 md:pt-0")}>
+			{children}
+		</div>
+	)
+}
+
+export function MiniCardHeader({ title, children, className }: MiniCardPT) {
+	return (
+		<div>
+			{title && (
+				<div className={cn(className, "text-xs font-semibold")}>{title}</div>
+			)}
+			{children}
+		</div>
+	)
+}
+
+export function MiniCardContent({
+	value,
+	unit,
+	amount,
+	isIncreased,
+}: MiniCardPT) {
+	return (
+		<div className="flex flex-wrap items-center justify-between gap-1 break-words">
+			<div className="flex items-baseline gap-1 font-semibold tracking-tight">
+				<span className="text-lg md:text-2xl">{value}</span>
+				<span className="text-xs md:text-lg">{unit}</span>
+			</div>
+			{isIncreased != null &&
+				(isIncreased === true ? (
+					<div className="text-xs font-medium text-red-600">(▲{amount})</div>
+				) : isIncreased === false ? (
+					<div className="text-xs font-medium text-blue-600">(▼{amount})</div>
+				) : isIncreased === "noChange" ? (
+					<div className="text-xs font-medium text-green-600">( - )</div>
+				) : null)}
+		</div>
+	)
+}
+
+TbCard.displayName = "TbCard"
+TbCardHeader.displayName = "TbCardHeader"
+TbCardContent.displayName = "TbCardContent"
+MiniCardHeader.displayName = "MiniCardHeader"
+MiniCardContent.displayName = "MiniCardContent"

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

@@ -0,0 +1,46 @@
+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",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		color: "default",
+	},
+})
+
+export type TbCardPT = {
+	className?: string
+	children?: ReactNode
+	variant?: VariantProps<typeof cardVariants>["variant"]
+	color?: VariantProps<typeof cardVariants>["color"]
+}
+
+export type TbCardHeaderPT = {
+	children?: ReactNode
+	title?: string
+	rightArea?: ReactNode
+	sideTitle?: string
+}
+
+export type MiniCardPT = {
+	title?: string
+	children?: ReactNode
+	className?: string
+	value?: string | number
+	unit?: string
+	amount?: number | null
+	isIncreased?: boolean | "noChange" | null // true: 증가, false: 감소, noChange: 변화 없음
+}

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

@@ -1,6 +1,9 @@
-"use client"
-import type { MiniCardPT } from "@/common/components/card"
-import { MiniCard } from "@/common/components/card"
+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 = {
@@ -12,7 +15,7 @@ export function PriceCard({ setActiveChart }: PriceCardPT) {
 	const priceCardData = usePriceCardData()
 
 	return (
-		<>
+		<div className="grid w-full grid-cols-2 gap-4">
 			{priceCardData.map((items: MiniCardPT, idx: number) => (
 				<button
 					key={idx}
@@ -21,17 +24,21 @@ export function PriceCard({ setActiveChart }: PriceCardPT) {
 					}}
 					className="text-left"
 				>
-					<MiniCard
-						title={items.title}
-						value={items.value}
-						unit={items.unit}
-						isIncreased={items.isIncreased}
-						amount={items.amount}
-						color={items.color}
+					<TbCard
+						variant="mini"
+						color={idx ? "deep" : "light"}
 						className="h-full"
-					/>
+					>
+						<MiniCardHeader title={items.title} />
+						<MiniCardContent
+							value={items.value}
+							unit={items.unit}
+							isIncreased={items.isIncreased}
+							amount={items.amount}
+						/>
+					</TbCard>
 				</button>
 			))}
-		</>
+		</div>
 	)
 }

src/features/trading-dashboard/components/price-chart/rec-line-chart/index.tsx

@@ -40,7 +40,7 @@ export function RecLineChart() {
 			className="h-full"
 			rightArea={TimeRangeOptions(timeRange, setTimeRange, timeRangeOptions)}
 		>
-			<div className="pt-2">
+			<div className="pt-4">
 				<LineChartComponent
 					chartConfig={chartConfig}
 					chartData={filteredData}