diff --git a/src/app/portfolio/_components/portfoilo-card.tsx b/src/app/portfolio/_components/portfoilo-card.tsx
index 8a95720..963eeb9 100644
--- a/src/app/portfolio/_components/portfoilo-card.tsx
+++ b/src/app/portfolio/_components/portfoilo-card.tsx
@@ -19,31 +19,39 @@ export default function PortfolioRecommend({
const getPortfolioTypeText = (type: PortfolioData["type"]) => {
switch (type) {
case "AGGRESSIVE":
- return { text: "적극적", color: "text-red-500" };
+ return { text: "적극적", color: "text-red-500", bgColor: "bg-red-50" };
case "PASSIVE":
- return { text: "안정적", color: "text-blue-500" };
+ return {
+ text: "안정적",
+ color: "text-blue-500",
+ bgColor: "bg-blue-50",
+ };
case "NORMAL":
- return { text: "보통", color: "text-green-500" };
+ return {
+ text: "보통",
+ color: "text-green-500",
+ bgColor: "bg-green-50",
+ };
default:
- return { text: type, color: "text-gray-500" };
+ return { text: type, color: "text-gray-500", bgColor: "bg-gray-50" };
}
};
const createChartData = (portfolio: PortfolioData): ChartDataItem[] => [
- { name: "소비", value: portfolio.stocks },
- { name: "금융", value: portfolio.bonds },
+ { name: "주식", value: portfolio.stocks },
+ { name: "저축", value: portfolio.savings },
{ name: "부동산", value: portfolio.realEstate },
- { name: "투자", value: portfolio.savings },
+ { name: "채권", value: portfolio.bonds },
];
return (
-
+
-
가장 포트폴리오
-
- 가장 포트폴리오 기능은 사용자가 실제 돈을 투자하지 않고도 다양한
- 투자 전략과 자산을 시뮬레이션시켜볼 목적을 수 있는 기능입니다.
+
가상 포트폴리오
+
+ 가상 포트폴리오 기능은 사용자가 실제 돈을 투자하지 않고도 다양한
+ 투자 전략과 자산을 시뮬레이션하며 학습할 수 있는 기능입니다.
사용자는 가상 자금을 바탕으로 주식, 채권, ETF 등 다양한 금융 상품에
투자하고, 적극, 보통, 소극적 투자 방향을 설정해 자신의 리스크 성향에
맞는 포트폴리오를 구성할 수 있습니다.
@@ -51,72 +59,73 @@ export default function PortfolioRecommend({
-
+
연봉
-
- {annualIncome?.toLocaleString() ?? 0} 만원
-
-
+
{annualIncome?.toLocaleString() ?? 0}원
-
- {portfolios.map((portfolio) => (
-
-
-
-
- {getPortfolioTypeText(portfolio.type).text}
- {" "}
- 투자방향
-
-
-
-
-
-
- `${name} ${value}%`
- }
- >
- {createChartData(portfolio).map((entry) => (
- |
- ))}
-
-
-
-
+
+ {portfolios.map((portfolio) => {
+ const typeStyle = getPortfolioTypeText(portfolio.type);
+ return (
+
+
+
+ {typeStyle.text} 투자방향
+
+
+
+
+
+ `${name} ${value}%`}
+ >
+ {createChartData(portfolio).map((entry) => (
+ |
+ ))}
+
+
+
+
-
-
- {portfolio.description}
-
-
- {CHART_ITEMS.map((item, index) => (
-
+
+
+ {portfolio.description}
+
+
+ {CHART_ITEMS.map((item, index) => (
- {item}
-
- ))}
+ key={item}
+ className="flex items-center rounded-md bg-gray-50 p-8"
+ >
+
+
{item}
+
+ ))}
+
-
- ))}
+ );
+ })}
);
diff --git a/src/app/portfolio/constants/index.ts b/src/app/portfolio/constants/index.ts
index 47ef2d3..6d084a6 100644
--- a/src/app/portfolio/constants/index.ts
+++ b/src/app/portfolio/constants/index.ts
@@ -1,4 +1,4 @@
import { ChartItemType } from "../types";
-export const CHART_ITEMS: ChartItemType[] = ["소비", "금융", "부동산", "투자"];
+export const CHART_ITEMS: ChartItemType[] = ["주식", "저축", "부동산", "채권"];
export const COLORS = ["#40c057", "#2b7a3e", "#245530", "#868e96"] as const;
diff --git a/src/app/portfolio/types/index.ts b/src/app/portfolio/types/index.ts
index adbeeef..cb3b92f 100644
--- a/src/app/portfolio/types/index.ts
+++ b/src/app/portfolio/types/index.ts
@@ -1,4 +1,4 @@
-export type ChartItemType = "소비" | "금융" | "부동산" | "투자";
+export type ChartItemType = "주식" | "저축" | "부동산" | "채권";
export interface PortfolioData {
type: "AGGRESSIVE" | "PASSIVE" | "NORMAL";
diff --git a/src/app/search/_components/stock-table.tsx b/src/app/search/_components/stock-table.tsx
index 010393c..9ba3961 100644
--- a/src/app/search/_components/stock-table.tsx
+++ b/src/app/search/_components/stock-table.tsx
@@ -91,7 +91,7 @@ export default function StockTable({ initialData }: Props) {
return (