Skip to content

[modify] 툴팁 다시 수정 #146

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
jiminseon merged 1 commit into from
Jul 28, 2025
Merged

[modify] 툴팁 다시 수정 #146

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
79 changes: 42 additions & 37 deletions src/components/charts/InvestCandleChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1067,15 +1067,13 @@ export default function InvestCandleChart({
</div>
{/* 일반 candle 값 or dot 전용 candle 값 구분 */}
{(() => {
// dotData도 있는 날짜면
const dot = dotData?.find((d) =>
dayjs(d.date).isSame(tooltip.data!.date, "day")
);
// "오늘" 날짜인지 확인
const isToday = dayjs(tooltip.data!.date).isSame(dayjs(), "day");

// 오늘이고 todayPrice가 있을 때 (실시간)
if (isToday && todayPrice && dot && dot.close) {
// 실시간 시세 + 예측값만 있는 경우 (오늘)
if (isToday && todayPrice && dot?.close) {
return (
<>
<div>
Expand All @@ -1086,7 +1084,6 @@ export default function InvestCandleChart({
</div>
<div style={{ marginTop: 4 }}>
<span style={{ color: "#C9DF00", fontWeight: 600 }}>

예측값
</span>
: {dot.close.toLocaleString()}
Expand All @@ -1095,47 +1092,55 @@ export default function InvestCandleChart({
);
}

// dotData(예측값)가 있는 경우
if (dot) {
// 예측값만 있는 경우
if (
dot?.close &&
(!tooltip.data?.open || tooltip.data.volume === 0)
) {
return (
<div>
<span style={{ color: "#C9DF00", fontWeight: 600 }}>
예측값
</span>{" "}
</span>
: {dot.close.toLocaleString()}
</div>
);
}
// 일반 candle 값 표기
return (
<>
<div>시: {tooltip.data.open.toLocaleString()}</div>
<div>고: {tooltip.data.high.toLocaleString()}</div>
<div>저: {tooltip.data.low.toLocaleString()}</div>
<div>종: {tooltip.data.close.toLocaleString()}</div>
<div>거래량: {tooltip.data.volume.toLocaleString()}</div>
<div>
{/* RSI:{" "}
{typeof rsi_visible[tooltip.idx] === "number"
? rsi_visible[tooltip.idx].toFixed(2)
: "-"} */}
RSI: {rsi}
</div>
{/* dot값이 겹치는 경우 오차 등도 표시 */}
{dot && (dot as any).close !== undefined && (
<div className="text-[#e75480] font-bold">
오차: {((dot as any).close - tooltip.data.close).toFixed(2)}{" "}
(
{(
(((dot as any).close - tooltip.data.close) /
tooltip.data.close) *
100
).toFixed(2)}
%)
</div>
)}
</>

// 일반 캔들값 (or 예측값도 있는 경우 같이 표시)
const rows = [];

rows.push(
<div key="open">시: {tooltip.data.open.toLocaleString()}</div>,
<div key="high">고: {tooltip.data.high.toLocaleString()}</div>,
<div key="low">저: {tooltip.data.low.toLocaleString()}</div>,
<div key="close">종: {tooltip.data.close.toLocaleString()}</div>,
<div key="vol">
거래량: {tooltip.data.volume.toLocaleString()}
</div>,
<div key="rsi">RSI: {rsi}</div>
);

if (dot?.close) {
rows.push(
<div key="pred" style={{ marginTop: 6 }}>
<span style={{ color: "#C9DF00", fontWeight: 600 }}>
예측값
</span>
: {dot.close.toLocaleString()}
</div>,
<div key="diff" className="text-[#e75480] font-bold">
오차: {(dot.close - tooltip.data.close).toFixed(2)} (
{(
((dot.close - tooltip.data.close) / tooltip.data.close) *
100
).toFixed(2)}
%)
</div>
);
}

return rows;
})()}
{/* 뉴스 영역 그대로 */}
{tooltipNews.length > 0 && (
Expand Down