refactor: UI 리팩토링

src/app/portfolio/_components/portfoilo-card.tsx

@@ -19,104 +19,113 @@ 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 (
     <div className="mx-auto max-w-1200 px-6 py-20">
-      <div className="mb-30 flex items-start justify-between">
+      <div className="mb-30 flex items-center justify-between">
         <div className="max-w-1200">
-          <h1 className="mb-10 text-24-700">가장 포트폴리오</h1>
-          <p className="text-gray-600">
-            가장 포트폴리오 기능은 사용자가 실제 돈을 투자하지 않고도 다양한
-            투자 전략과 자산을 시뮬레이션시켜볼 목적을 수 있는 기능입니다.
+          <h1 className="mb-10 text-24-700">가상 포트폴리오</h1>
+          <p className="text-16-500 text-gray-800">
+            가상 포트폴리오 기능은 사용자가 실제 돈을 투자하지 않고도 다양한
+            투자 전략과 자산을 시뮬레이션하며 학습할 수 있는 기능입니다.
             사용자는 가상 자금을 바탕으로 주식, 채권, ETF 등 다양한 금융 상품에
             투자하고, 적극, 보통, 소극적 투자 방향을 설정해 자신의 리스크 성향에
             맞는 포트폴리오를 구성할 수 있습니다.
           </p>
         </div>
       </div>
 
-      <div className="mb-16 text-center">
+      <div className="mb-30 rounded-lg p-8 text-center">
         <h2 className="mb-5 text-24-400">연봉</h2>
-        <p className="text-20-600">
-          {annualIncome?.toLocaleString() ?? 0} 만원
-        </p>
-        <div className="mx-auto mt-4 h-px w-32 bg-gray-200" />
+        <p className="text-24-600">{annualIncome?.toLocaleString() ?? 0}원</p>
       </div>
 
-      <div className="grid grid-cols-1 gap-8 p-4 md:grid-cols-3">
-        {portfolios.map((portfolio) => (
-          <div
-            key={`portfolio-${portfolio.type}`}
-            className="shadow-sm rounded-lg bg-white p-15"
-          >
-            <div className="mb-8 text-center">
-              <h3 className="text-24-600">
-                <span className={getPortfolioTypeText(portfolio.type).color}>
-                  {getPortfolioTypeText(portfolio.type).text}
-                </span>{" "}
-                투자방향
-              </h3>
-            </div>
-            <div className="h-300">
-              <ResponsiveContainer width="100%" height="100%">
-                <PieChart>
-                  <Pie
-                    data={createChartData(portfolio)}
-                    cx="50%"
-                    cy="50%"
-                    innerRadius={50}
-                    outerRadius={80}
-                    fill="#8884d8"
-                    dataKey="value"
-                    label={({ name, value }: ChartDataItem) =>
-                      `${name} ${value}%`
-                    }
-                  >
-                    {createChartData(portfolio).map((entry) => (
-                      <Cell
-                        key={`cell-${portfolio.type}-${entry.name}`}
-                        fill={COLORS[CHART_ITEMS.indexOf(entry.name)]}
-                      />
-                    ))}
-                  </Pie>
-                </PieChart>
-              </ResponsiveContainer>
-            </div>
+      <div className="grid grid-cols-1 gap-10 md:grid-cols-3">
+        {portfolios.map((portfolio) => {
+          const typeStyle = getPortfolioTypeText(portfolio.type);
+          return (
+            <div
+              key={`portfolio-${portfolio.type}`}
+              className="shadow-sm hover:shadow-md overflow-hidden rounded-lg bg-white p-10 transition-all "
+            >
+              <div className="mb-8 text-center">
+                <span
+                  className={`inline-block rounded-full px-15 py-10 text-18-600 ${typeStyle.bgColor} ${typeStyle.color}`}
+                >
+                  {typeStyle.text} 투자방향
+                </span>
+              </div>
+              <div className="h-300">
+                <ResponsiveContainer width="100%" height="100%">
+                  <PieChart>
+                    <Pie
+                      data={createChartData(portfolio)}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={50}
+                      outerRadius={90}
+                      fill="#8884d8"
+                      dataKey="value"
+                      paddingAngle={2}
+                      label={({ name, value }) => `${name} ${value}%`}
+                    >
+                      {createChartData(portfolio).map((entry) => (
+                        <Cell
+                          key={`cell-${portfolio.type}-${entry.name}`}
+                          fill={COLORS[CHART_ITEMS.indexOf(entry.name)]}
+                        />
+                      ))}
+                    </Pie>
+                  </PieChart>
+                </ResponsiveContainer>
+              </div>
 
-            <div className="flex min-h-130 flex-col justify-between">
-              <p className="text-16-400 text-gray-600">
-                {portfolio.description}
-              </p>
-              <div className="grid grid-cols-2 gap-x-10 gap-y-5 text-16-600">
-                {CHART_ITEMS.map((item, index) => (
-                  <div key={item} className="flex items-center">
+              <div className="flex min-h-160 flex-col justify-between py-10">
+                <p className="mb-15 text-center text-16-600 text-gray-600">
+                  {portfolio.description}
+                </p>
+                <div className="grid grid-cols-2 gap-10">
+                  {CHART_ITEMS.map((item, index) => (
                     <div
-                      className="mr-2 size-15 rounded-sm"
-                      style={{ backgroundColor: COLORS[index] }}
-                    />
-                    {item}
-                  </div>
-                ))}
+                      key={item}
+                      className="flex items-center rounded-md bg-gray-50 p-8"
+                    >
+                      <div
+                        className="mr-10 size-15 rounded-full"
+                        style={{ backgroundColor: COLORS[index] }}
+                      />
+                      <span className="text-14-600">{item}</span>
+                    </div>
+                  ))}
+                </div>
               </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </div>
     </div>
   );

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;

src/app/portfolio/types/index.ts

@@ -1,4 +1,4 @@
-export type ChartItemType = "소비" | "금융" | "부동산" | "투자";
+export type ChartItemType = "주식" | "저축" | "부동산" | "채권";
 
 export interface PortfolioData {
   type: "AGGRESSIVE" | "PASSIVE" | "NORMAL";

src/app/search/_components/stock-table.tsx

@@ -91,7 +91,7 @@ export default function StockTable({ initialData }: Props) {
 
   return (
     <div>
-      <table className="w-full">
+      <table className="w-full min-w-1024">
         <TableHeader
           columns={columns}
           className="h-12"

src/components/common/dropdown/index.tsx

@@ -129,7 +129,7 @@ function Wrapper({
       {isOpen && (
         <motion.div
           className={cn(
-            "rounded-2 w-full shadow-custom absolute z-50 border-[#B6B6B6] border border-solid bg-white py-10 px-12",
+            "rounded-2 w-full shadow-custom absolute z-50 border-[#B6B6B6] border border-solid bg-white py-10 px-10",
             className,
           )}
           initial={{ opacity: 0, y: -10 }}