Skip to content

Commit 0336706

Browse files
eun-hakeun-hak
authored
Merge pull request #134 from Moaguide-develop/feat/productpage
Feat/productpage
2 parents 5ee95a9 + 6d6e7dd commit 0336706

16 files changed

+140
-37
lines changed

‎.env.production

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/components/product/detail/building/BuildingProfit.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,19 @@ const BuildingProfit = ({ url }: { url: string }) => {
3838
<div className="flex flex-col mb-[7px]">
3939
<div className=" flex w-[400px]">
4040
<div className="text-gray-400 w-[150px]">발행 증권수</div>
41-
<div className="">{data?.publish?.piece?.toLocaleString()}</div>
41+
<div className="">{data?.publish?.piece?.toLocaleString()}주</div>
4242
</div>
4343
</div>
4444
<div className="flex flex-col mb-[7px]">
4545
<div className=" flex w-[400px]">
4646
<div className="text-gray-400 w-[150px]">1주 당 발행 가액</div>
47-
<div className="">{data?.publish?.basePrice?.toLocaleString()}</div>
47+
<div className="">{data?.publish?.basePrice?.toLocaleString()}원</div>
4848
</div>
4949
</div>
5050
<div className="flex flex-col mb-[7px]">
5151
<div className=" flex w-[400px]">
5252
<div className="text-gray-400 w-[150px]">총 모집 액</div>
53-
<div className="">{data?.publish?.totalPrice?.toLocaleString()}</div>
53+
<div className="">{data?.publish?.totalPrice?.toLocaleString()}원</div>
5454
</div>
5555
</div>
5656
<div className="flex flex-col mb-[7px]">
@@ -280,7 +280,7 @@ const BuildingProfit = ({ url }: { url: string }) => {
280280
<div className="flex flex-col mb-[7px]">
281281
<div className=" flex w-[400px]">
282282
<div className="text-gray-400 w-[150px]">배당 수익률</div>
283-
<div className="">{data?.divide?.divideRate}</div>
283+
<div className="">{data?.divide?.divideRate}%</div>
284284
</div>
285285
</div>
286286
</div>

‎src/components/product/detail/building/chart/CommercialRentChart.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Line } from 'react-chartjs-2';
33
import { useState, useEffect } from 'react';
44
import { usePathname } from 'next/navigation';
55
import { basicAxiosInstance } from '@/service/axiosInstance';
6+
import { TooltipItem } from 'chart.js';
67

78
interface RentData {
89
year: number;
@@ -109,7 +110,14 @@ const CommercialRentChart = ({ rentType }: { rentType: boolean | undefined }) =>
109110
},
110111
tooltip: {
111112
enabled: true,
112-
intersect: false
113+
intersect: false,
114+
callbacks: {
115+
label: function (context: TooltipItem<'line'>) {
116+
const label = context.dataset.label || '';
117+
const value = context.raw as number;
118+
return `${label} : ${value?.toLocaleString()} 천원/m²\n`;
119+
}
120+
}
113121
}
114122
},
115123
scales: {

‎src/components/product/detail/building/chart/CommercialVacancyRateChart.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useQuery } from '@tanstack/react-query';
22
import { Bar } from 'react-chartjs-2';
3-
import { ChartOptions } from 'chart.js';
3+
import { ChartOptions, TooltipItem } from 'chart.js';
44

55
import { useState, useEffect } from 'react';
66
import { usePathname } from 'next/navigation';
@@ -109,7 +109,14 @@ const CommercialVacancyRateChart = ({ rentType }: { rentType: boolean | undefine
109109
},
110110
tooltip: {
111111
enabled: true,
112-
intersect: false
112+
intersect: false,
113+
callbacks: {
114+
label: function (context: TooltipItem<'bar'>) {
115+
const label = context.dataset.label || '';
116+
const value = context.raw as number;
117+
return `${label} : ${value?.toLocaleString()}%\n`;
118+
}
119+
}
113120
},
114121
datalabels: {
115122
anchor: 'end',

‎src/components/product/detail/building/chart/CopyrightFeeChart.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
44
import { IMusicCopyRightFeeChart } from '@/types/MusicProductType';
55
import { useQuery } from '@tanstack/react-query';
66
import { basicAxiosInstance } from '@/service/axiosInstance';
7+
import { TooltipItem } from 'chart.js';
78

89
const BuildingCopyRightFeeChart = () => {
910
const pathname = usePathname();
@@ -164,7 +165,14 @@ const BuildingCopyRightFeeChart = () => {
164165
position: 'top' as const
165166
},
166167
tooltip: {
167-
enabled: true
168+
enabled: true,
169+
callbacks: {
170+
label: function (context: TooltipItem<'line'>) {
171+
const label = context.dataset.label || '';
172+
const value = context.raw as number;
173+
return `${label} : ${value?.toLocaleString()}원\n`;
174+
}
175+
}
168176
},
169177
datalabels: {
170178
display: true

‎src/components/product/detail/building/chart/FloatingPopulationChart.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
44
import { usePathname } from 'next/navigation';
55
import { ISubwayData } from '@/types/BuildingProductType';
66
import { basicAxiosInstance } from '@/service/axiosInstance';
7+
import { TooltipItem } from 'chart.js';
78

89
const FloatingPopulationChart = () => {
910
const pathname = usePathname();
@@ -79,7 +80,14 @@ const FloatingPopulationChart = () => {
7980
},
8081
tooltip: {
8182
enabled: true,
82-
intersect: false
83+
intersect: false,
84+
callbacks: {
85+
label: function (context: TooltipItem<'bar'>) {
86+
const label = context.dataset.label || '';
87+
const value = context.raw as number;
88+
return `${label} : ${value?.toLocaleString()}명\n`;
89+
}
90+
}
8391
},
8492
datalabels: {
8593
display: false // 데이터 레이블 숨기기
@@ -113,7 +121,14 @@ const FloatingPopulationChart = () => {
113121
},
114122
tooltip: {
115123
enabled: true,
116-
intersect: false
124+
intersect: false,
125+
callbacks: {
126+
label: function (context: TooltipItem<'bar'>) {
127+
const label = context.dataset.label || '';
128+
const value = context.raw as number;
129+
return `${label} : ${value?.toLocaleString()}명\n`;
130+
}
131+
}
117132
},
118133
datalabels: {
119134
display: false // 데이터 레이블 숨기기

‎src/components/product/detail/building/chart/OfficialPriceChart.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
22
import { useQuery } from '@tanstack/react-query';
33
import { Line } from 'react-chartjs-2';
44
import { usePathname } from 'next/navigation';
5-
import { ChartOptions } from 'chart.js';
5+
import { ChartOptions, TooltipItem } from 'chart.js';
66
import { basicAxiosInstance } from '@/service/axiosInstance';
77

88
// API 데이터 타입 정의
@@ -143,7 +143,14 @@ const OfficialPriceChart = () => {
143143
},
144144
tooltip: {
145145
enabled: true,
146-
intersect: false
146+
intersect: false,
147+
callbacks: {
148+
label: function (context: TooltipItem<'line'>) {
149+
const label = context.dataset.label || '';
150+
const value = context.raw as number;
151+
return `${label} : ${value?.toLocaleString()} 원/m²\n`;
152+
}
153+
}
147154
},
148155
datalabels: {
149156
display: false,

‎src/components/product/detail/building/chart/PopulationInformationChart.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,9 @@ const PopulationInformationChart = () => {
6767
},
6868
formatter: function (value: number) {
6969
return value.toLocaleString(); // 차트 바 데이터 위에 표시되는 숫자를 포맷팅
70+
},
71+
display: function () {
72+
return window.innerWidth > 768; // 모바일에서는 데이터 레이블을 숨김
7073
}
7174
}
7275
},

‎src/components/product/detail/building/chart/StockPriceChart.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
44
import { usePathname } from 'next/navigation';
55
import { IMusicBulidingStockPriceChart } from '@/types/MusicProductType';
66
import { basicAxiosInstance } from '@/service/axiosInstance';
7+
import { TooltipItem } from 'chart.js';
78

89
const BuildingStockPriceChart = () => {
910
const chartRef = useRef(null);
@@ -78,7 +79,14 @@ const BuildingStockPriceChart = () => {
7879
},
7980
tooltip: {
8081
enabled: true,
81-
intersect: false
82+
intersect: false,
83+
callbacks: {
84+
label: function (context: TooltipItem<'line'>) {
85+
const label = context.dataset.label || '';
86+
const value = context.raw as number;
87+
return `${label} : ${value?.toLocaleString()}원\n`;
88+
}
89+
}
8290
}
8391
},
8492
scales: {

‎src/components/product/detail/content/ContentProfit.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ const ContentProfit = ({
5959
<div className=" flex ">
6060
<div className="text-gray-400 w-[150px]">최소모집목표금액</div>
6161
<div className="flex-1">
62-
{data?.base.publish.minAmount.toLocaleString()}주
62+
{data?.base.publish.minAmount.toLocaleString()}원
6363
</div>
6464
</div>
6565
</div>
@@ -74,7 +74,7 @@ const ContentProfit = ({
7474
<div className="flex flex-col mb-[7px]">
7575
<div className=" flex ">
7676
<div className="text-gray-400 w-[150px]">최소 모집수량</div>
77-
<div className="flex-1">{data?.base.publish.piece.toLocaleString()}계좌</div>
77+
<div className="flex-1">{data?.base.publish.piece.toLocaleString()}주</div>
7878
</div>
7979
</div>
8080
<div className="flex flex-col mb-[7px]">
@@ -89,7 +89,7 @@ const ContentProfit = ({
8989
<div className=" flex ">
9090
<div className="text-gray-400 w-[150px]">최소투자금액</div>
9191
<div className="flex-1">
92-
{data?.base.publish.minInvestment.toLocaleString()}
92+
{data?.base.publish.minInvestment.toLocaleString()}원
9393
</div>
9494
</div>
9595
</div>
@@ -352,11 +352,11 @@ const MoviePeopleLayout = (data: MoviePeopleLayoutProps) => {
352352

353353
<div className="text-sm ">{item.side}</div>
354354
<div className="text-sm ">
355-
[공식 통계]{item.officialMoney.toLocaleString()}원
355+
[공식 통계]💸{item.officialMoney.toLocaleString()}원 👪{' '}
356356
{item.officialPeople.toLocaleString()}명
357357
</div>
358358
<div className="text-sm ">
359-
[kobis 통계]{item.money.toLocaleString()}원
359+
[kobis 통계]💸{item.money.toLocaleString()}원 👪{' '}
360360
{item.people.toLocaleString()}명
361361
</div>
362362
</div>

‎src/components/product/detail/music/MusicProfit.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -115,20 +115,22 @@ const MusicProfit = ({ url }: { url: string }) => {
115115
<div className="flex flex-col mb-[7px]">
116116
<div className=" flex w-[400px]">
117117
<div className="text-gray-400 w-[150px]">발행수량</div>
118-
<div className="flex-1">{data?.musicPublish?.piece.toLocaleString()}</div>
118+
<div className="flex-1">{data?.musicPublish?.piece.toLocaleString()}주</div>
119119
</div>
120120
</div>
121121
<div className="flex flex-col mb-[7px]">
122122
<div className=" flex w-[400px]">
123123
<div className="text-gray-400 w-[150px]">발행가액</div>
124-
<div className="flex-1">{data?.musicPublish?.basePrice.toLocaleString()}</div>
124+
<div className="flex-1">
125+
{data?.musicPublish?.basePrice.toLocaleString()}원
126+
</div>
125127
</div>
126128
</div>
127129
<div className="flex flex-col mb-[7px]">
128130
<div className=" flex w-[400px]">
129131
<div className="text-gray-400 w-[150px]">총 모집액</div>
130132
<div className="flex-1">
131-
{data?.musicPublish?.totalPrice.toLocaleString()}
133+
{data?.musicPublish?.totalPrice.toLocaleString()}원
132134
</div>
133135
</div>
134136
</div>
@@ -185,13 +187,15 @@ const MusicProfit = ({ url }: { url: string }) => {
185187
<div className="flex flex-col mb-[7px]">
186188
<div className=" flex">
187189
<div className="text-gray-400 w-[150px] ">최근 1주당 저작권료</div>
188-
<div className="flex-1 ">{data?.musicDivide?.lastDividend}</div>
190+
<div className="flex-1 ">
191+
{data?.musicDivide?.lastDividend.toLocaleString()}원
192+
</div>
189193
</div>
190194
</div>
191195
<div className="flex flex-col mb-[7px]">
192196
<div className=" flex">
193197
<div className="text-gray-400 w-[150px]">최근 저작권료 수익률</div>
194-
<div className="flex-1 ">{data?.musicDivide?.lastDividendRate}</div>
198+
<div className="flex-1 ">{data?.musicDivide?.lastDividendRate}%</div>
195199
</div>
196200
</div>
197201
<div className="flex flex-col mb-[7px]">

‎src/components/product/detail/music/chart/MusicCopyrightFee.tsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { usePathname } from 'next/navigation';
44
import { IMusicCopyRightFeeChart } from '@/types/MusicProductType';
55
import { useQuery } from '@tanstack/react-query';
66
import { basicAxiosInstance } from '@/service/axiosInstance';
7+
import { TooltipItem } from 'chart.js';
78

89
const MusicCopyRightFeeChart = () => {
910
const pathname = usePathname();
@@ -186,7 +187,19 @@ const MusicCopyRightFeeChart = () => {
186187
position: 'top' as const
187188
},
188189
tooltip: {
189-
enabled: true
190+
enabled: true,
191+
callbacks: {
192+
label: function (context: TooltipItem<'line' | 'bar'>) {
193+
const label = context.dataset.label || '';
194+
const value = context.raw as number;
195+
if (context.dataset.type === 'line') {
196+
return `${label} : ${value?.toLocaleString()}%\n`;
197+
} else if (context.dataset.type === 'bar') {
198+
return `${label} : ${value?.toLocaleString()}원\n`;
199+
}
200+
return `${label} : ${value?.toLocaleString()}\n`;
201+
}
202+
}
190203
},
191204
datalabels: {
192205
display: false

‎src/components/product/detail/music/chart/MusicStockPriceChart.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
55
import { usePathname } from 'next/navigation';
66
import { IMusicBulidingStockPriceChart } from '@/types/MusicProductType';
77
import { basicAxiosInstance } from '@/service/axiosInstance';
8+
import { TooltipItem } from 'chart.js';
89

910
const MusicStockPriceChart = () => {
1011
const chartRef = useRef(null);
@@ -76,7 +77,14 @@ const MusicStockPriceChart = () => {
7677
tooltip: {
7778
// enabled: StockPriceCount.length > 0,
7879
enabled: true,
79-
intersect: false
80+
intersect: false,
81+
callbacks: {
82+
label: function (context: TooltipItem<'line'>) {
83+
const label = context.dataset.label || '';
84+
const value = context.raw as number;
85+
return `${label} : ${value?.toLocaleString()}원\n`;
86+
}
87+
}
8088
}
8189
},
8290
scales: {

‎src/components/product/detail/music/chart/YoutubeSearchChart.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Line } from 'react-chartjs-2';
44
import { useRef, useState } from 'react';
55
import { IContentYoutubeSearchCharts } from '@/types/MusicProductType';
66
import { basicAxiosInstance } from '@/service/axiosInstance';
7+
import { TooltipItem } from 'chart.js';
78

89
const YoutubeSearchChart = () => {
910
const pathname = usePathname();
@@ -82,7 +83,14 @@ const YoutubeSearchChart = () => {
8283
},
8384
tooltip: {
8485
enabled: true,
85-
intersect: false
86+
intersect: false,
87+
callbacks: {
88+
label: function (context: TooltipItem<'line'>) {
89+
const label = context.dataset.label || '';
90+
const value = context.raw as number;
91+
return `${label} : ${value?.toLocaleString()}회\n`;
92+
}
93+
}
8694
}
8795
},
8896
scales: {

0 commit comments

Comments
 (0)