Skip to content

refactor: 내 투자종목이름에 링크 걸기 및 디자인 수정 #99

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Han-wo merged 1 commit into from
Feb 18, 2025
Merged

refactor: 내 투자종목이름에 링크 걸기 및 디자인 수정 #99

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions src/app/my-account/_components/stock-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import clsx from "clsx";
import Link from "next/link";
import { useMemo } from "react";

import { Stock } from "../types";
Expand All @@ -18,7 +19,6 @@ export default function StockTable({ stocks }: StockTableProps) {
}));
}, [stocks]);

// 수익률의 부호에 따라 평가손익의 부호를 보정
const getEvaluationProfitWithSign = (profit: number, rate: number) => {
const absProfit = Math.abs(profit);
return rate < 0 ? -absProfit : absProfit;
Expand All @@ -31,51 +31,56 @@ export default function StockTable({ stocks }: StockTableProps) {
<tr>
<th
rowSpan={2}
className="w-[16%] border-r border-gray-200 bg-green-50 p-8 text-left text-16-600"
className="w-[16%] border-r border-gray-200 bg-green-50 p-8 text-left text-16-500"
>
종목명
</th>
<th
colSpan={2}
className="w-[42%] border-b border-r border-gray-200 bg-green-50 p-8 text-center text-16-600"
className="w-[42%] border-b border-r border-gray-200 bg-green-50 p-8 text-center text-16-500"
>
평가손익
</th>
<th
rowSpan={2}
className="w-[16%] border-r border-gray-200 bg-green-50 p-8 text-center text-16-600"
className="w-[16%] border-r border-gray-200 bg-green-50 p-8 text-center text-16-500"
>
보유수량
</th>
<th
colSpan={2}
className="w-[26%] border-b border-gray-200 bg-green-50 p-8 text-center text-16-600"
className="w-[26%] border-b border-gray-200 bg-green-50 p-8 text-center text-16-500"
>
평가금액
</th>
</tr>
<tr className="bg-green-50">
<th className="border-r border-gray-200 p-8 text-center text-16-600">
<th className="border-r border-gray-200 p-8 text-center text-16-500">
금액
</th>
<th className="border-r border-gray-200 p-8 text-center text-16-600">
<th className="border-r border-gray-200 p-8 text-center text-16-500">
수익률
</th>
<th className="border-r border-gray-200 p-8 text-center text-16-600">
<th className="border-r border-gray-200 p-8 text-center text-16-500">
매입가
</th>
<th className="p-8 text-center text-16-600">현재가</th>
<th className="p-8 text-center text-16-500">현재가</th>
</tr>
</thead>
<tbody>
{stockRows.map((stock) => (
<tr key={stock.id} className="border-b border-gray-200">
<td className="border-r border-gray-200 p-4 text-18-600">
{stock.stockName}
<td className="border-r border-gray-200 p-4">
<Link
href={`/search/${encodeURIComponent(stock.stockName)}`}
className="cursor-pointer text-16-500 hover:text-blue-600 hover:underline"
>
{stock.stockName}
</Link>
</td>
<td
className={clsx(
"border-r border-gray-200 p-8 text-right text-16-600",
"border-r border-gray-200 p-8 text-right text-16-500",
{
"text-red-500": stock.ProfitRate > 0,
"text-blue-500": stock.ProfitRate < 0,
Expand All @@ -93,7 +98,7 @@ export default function StockTable({ stocks }: StockTableProps) {
</td>
<td
className={clsx(
"border-r border-gray-200 p-8 text-right text-16-600",
"border-r border-gray-200 p-8 text-right text-16-500",
{
"text-red-500": stock.ProfitRate > 0,
"text-blue-500": stock.ProfitRate < 0,
Expand All @@ -103,18 +108,18 @@ export default function StockTable({ stocks }: StockTableProps) {
{stock.ProfitRate > 0 && "+"}
{stock.ProfitRate?.toFixed(2) ?? 0} %
</td>
<td className="border-r border-gray-200 p-8 text-center text-16-600">
<td className="border-r border-gray-200 p-8 text-center text-16-500">
{stock.stockCount ?? 0}
</td>
<td className="border-r border-gray-200 p-8 text-right text-16-600">
<td className="border-r border-gray-200 p-8 text-right text-16-500">
{stock.purchaseAmount?.toLocaleString() ?? 0}
</td>
<td className="p-4">
<div className="mb-5 text-right text-16-600">
<div className="mb-5 text-right text-16-500">
{stock.currentPrice?.toLocaleString() ?? 0}
</div>
<div
className={clsx("text-right text-14-600", {
className={clsx("text-right text-14-500", {
"text-red-500": stock.prevChangeRate > 0,
"text-blue-500": stock.prevChangeRate < 0,
})}
Expand Down