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 (
- +