From 2c1d2ab6a776bf1db122d39cf7839f2719ac9dad Mon Sep 17 00:00:00 2001 From: baegyeong Date: Wed, 4 Dec 2024 22:45:48 +0900 Subject: [PATCH 01/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20alarm=20api=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=8A=A4=ED=82=A4=EB=A7=88=20=EA=B5=AC?= =?UTF-8?q?=EC=A1=B0=20=EB=B0=8F=20useQuery=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/queries/alarm/schema.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/apis/queries/alarm/schema.ts b/packages/frontend/src/apis/queries/alarm/schema.ts index 1b99af75..11a07347 100644 --- a/packages/frontend/src/apis/queries/alarm/schema.ts +++ b/packages/frontend/src/apis/queries/alarm/schema.ts @@ -33,7 +33,7 @@ export const AlarmInfoSchema = z.object({ alarmId: z.number(), stockId: z.string(), targetPrice: z.number().nullable(), - targetVolume: z.string().nullable(), + targetVolume: z.number().nullable(), alarmDate: z.string().datetime(), }); From a6d5e219993d9b96d970abf5bf8d8e05aef17f54 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Wed, 4 Dec 2024 22:47:12 +0900 Subject: [PATCH 02/21] =?UTF-8?q?=E2=9C=A8=20feat:=20staleTime,=20invalida?= =?UTF-8?q?teQueries=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/queries/stock-detail/useDeleteStockUser.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts b/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts index 6e18fb45..52405d51 100644 --- a/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts +++ b/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts @@ -1,4 +1,4 @@ -import { useMutation, UseMutationOptions } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { DeleteStockUserSchema, type DeleteStockUserRequest, @@ -13,13 +13,12 @@ const deleteStockUser = ({ stockId }: DeleteStockUserRequest) => data: { stockId }, }); -export const useDeleteStockUser = ( - options?: UseMutationOptions, -) => { +export const useDeleteStockUser = () => { + const queryClient = useQueryClient(); return useMutation({ mutationKey: ['deleteStockUser'], mutationFn: ({ stockId }: DeleteStockUserRequest) => deleteStockUser({ stockId }), - ...options, + onSuccess: () => queryClient.invalidateQueries({ queryKey: ['userStock'] }), }); }; From f64c9936a631378d32bb1ced54b7bf54852895fa Mon Sep 17 00:00:00 2001 From: baegyeong Date: Wed, 4 Dec 2024 22:47:42 +0900 Subject: [PATCH 03/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=20?= =?UTF-8?q?=EC=95=8C=EB=A6=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/pages/stock-detail/StockDetail.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx index 9c183021..2dbd15c7 100644 --- a/packages/frontend/src/pages/stock-detail/StockDetail.tsx +++ b/packages/frontend/src/pages/stock-detail/StockDetail.tsx @@ -48,7 +48,7 @@ export const StockDetail = () => {
- +
From f15b9c7012df4ca179628b185dbe64de6974c523 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Wed, 4 Dec 2024 23:23:28 +0900 Subject: [PATCH 04/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=83=81=ED=83=9C=20=ED=99=95=EC=9D=B8=20api=20?= =?UTF-8?q?=ED=98=B8=EC=B6=9C,=20props=20drilling=EC=9D=84=20=EB=AA=A8?= =?UTF-8?q?=EB=91=90=20context=EB=A1=9C=20=EB=8C=80=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/queries/stock-detail/useDeleteStockUser.ts | 9 +++++---- packages/frontend/src/pages/stock-detail/StockDetail.tsx | 2 +- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts b/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts index 52405d51..6e18fb45 100644 --- a/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts +++ b/packages/frontend/src/apis/queries/stock-detail/useDeleteStockUser.ts @@ -1,4 +1,4 @@ -import { useMutation, useQueryClient } from '@tanstack/react-query'; +import { useMutation, UseMutationOptions } from '@tanstack/react-query'; import { DeleteStockUserSchema, type DeleteStockUserRequest, @@ -13,12 +13,13 @@ const deleteStockUser = ({ stockId }: DeleteStockUserRequest) => data: { stockId }, }); -export const useDeleteStockUser = () => { - const queryClient = useQueryClient(); +export const useDeleteStockUser = ( + options?: UseMutationOptions, +) => { return useMutation({ mutationKey: ['deleteStockUser'], mutationFn: ({ stockId }: DeleteStockUserRequest) => deleteStockUser({ stockId }), - onSuccess: () => queryClient.invalidateQueries({ queryKey: ['userStock'] }), + ...options, }); }; diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx index 2dbd15c7..9c183021 100644 --- a/packages/frontend/src/pages/stock-detail/StockDetail.tsx +++ b/packages/frontend/src/pages/stock-detail/StockDetail.tsx @@ -48,7 +48,7 @@ export const StockDetail = () => {
- +
From 2f81b140a53981887af67423ec05819c725c90a2 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Wed, 4 Dec 2024 23:46:33 +0900 Subject: [PATCH 05/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20tradingVolume=20str?= =?UTF-8?q?ing=20=ED=83=80=EC=9E=85=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/queries/alarm/schema.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/apis/queries/alarm/schema.ts b/packages/frontend/src/apis/queries/alarm/schema.ts index 11a07347..1b99af75 100644 --- a/packages/frontend/src/apis/queries/alarm/schema.ts +++ b/packages/frontend/src/apis/queries/alarm/schema.ts @@ -33,7 +33,7 @@ export const AlarmInfoSchema = z.object({ alarmId: z.number(), stockId: z.string(), targetPrice: z.number().nullable(), - targetVolume: z.number().nullable(), + targetVolume: z.string().nullable(), alarmDate: z.string().datetime(), }); From fb840c7481a68f7b7fd1df84053ed293776c9c27 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 03:48:38 +0900 Subject: [PATCH 06/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20api=20=EB=AA=85?= =?UTF-8?q?=EC=84=B8=EC=97=90=20=EB=A7=9E=EC=B6=B0=EC=84=9C=20alarmDate?= =?UTF-8?q?=EB=A5=BC=20alarmExpiredDate=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/queries/alarm/schema.ts | 6 +++--- .../frontend/src/apis/queries/alarm/usePostCreateAlarm.ts | 8 ++++---- .../frontend/src/pages/stock-detail/NotificationPanel.tsx | 2 +- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/apis/queries/alarm/schema.ts b/packages/frontend/src/apis/queries/alarm/schema.ts index 1b99af75..57de2c16 100644 --- a/packages/frontend/src/apis/queries/alarm/schema.ts +++ b/packages/frontend/src/apis/queries/alarm/schema.ts @@ -22,7 +22,7 @@ export const PostCreateAlarmRequestSchema = z.object({ stockId: z.string(), targetPrice: z.number().optional(), targetVolume: z.number().optional(), - alarmDate: z.string().datetime(), + alarmExpiredDate: z.string().datetime().nullish(), }); export type PostCreateAlarmRequest = z.infer< @@ -33,8 +33,8 @@ export const AlarmInfoSchema = z.object({ alarmId: z.number(), stockId: z.string(), targetPrice: z.number().nullable(), - targetVolume: z.string().nullable(), - alarmDate: z.string().datetime(), + targetVolume: z.number().nullable(), + alarmExpiredDate: z.string().datetime().nullable(), }); export const AlarmResponseSchema = z.array(AlarmInfoSchema); diff --git a/packages/frontend/src/apis/queries/alarm/usePostCreateAlarm.ts b/packages/frontend/src/apis/queries/alarm/usePostCreateAlarm.ts index aab745f9..7e1fa8e3 100644 --- a/packages/frontend/src/apis/queries/alarm/usePostCreateAlarm.ts +++ b/packages/frontend/src/apis/queries/alarm/usePostCreateAlarm.ts @@ -10,10 +10,10 @@ const postCreateAlarm = ({ stockId, targetPrice, targetVolume, - alarmDate, + alarmExpiredDate, }: PostCreateAlarmRequest) => post({ - params: { stockId, targetPrice, targetVolume, alarmDate }, + params: { stockId, targetPrice, targetVolume, alarmExpiredDate }, schema: AlarmInfoSchema, url: '/api/alarm', }); @@ -26,9 +26,9 @@ export const usePostCreateAlarm = () => { stockId, targetPrice, targetVolume, - alarmDate, + alarmExpiredDate, }: PostCreateAlarmRequest) => - postCreateAlarm({ stockId, targetPrice, targetVolume, alarmDate }), + postCreateAlarm({ stockId, targetPrice, targetVolume, alarmExpiredDate }), onSuccess: () => queryClient.invalidateQueries({ queryKey: ['getStockAlarm'] }), }); diff --git a/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx b/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx index e839cb22..4a374142 100644 --- a/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx +++ b/packages/frontend/src/pages/stock-detail/NotificationPanel.tsx @@ -44,7 +44,7 @@ const NotificationContents = () => { key={alarm.alarmId} option={alarm.targetPrice ? '목표가' : '거래가'} goalPrice={alarm.targetPrice ?? alarm.targetVolume!} - alarmDate={alarm.alarmDate} + alarmDate={alarm.alarmExpiredDate} /> )); }; From a1975054362f63620d86229898bb05322e5b3c33 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 03:49:34 +0900 Subject: [PATCH 07/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20alarmExpiredDate?= =?UTF-8?q?=EA=B0=80=20null=20=EA=B0=92=EC=9D=84=20=ED=97=88=EC=9A=A9?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ui/alarm/Alarm.tsx | 4 +- .../src/pages/stock-detail/AddAlarmForm.tsx | 39 ++++++++++++------- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/packages/frontend/src/components/ui/alarm/Alarm.tsx b/packages/frontend/src/components/ui/alarm/Alarm.tsx index 12d6d403..339c009e 100644 --- a/packages/frontend/src/components/ui/alarm/Alarm.tsx +++ b/packages/frontend/src/components/ui/alarm/Alarm.tsx @@ -4,7 +4,7 @@ import Flag from '@/assets/flag.svg?react'; export interface AlarmProps { option: string; goalPrice: number | string; - alarmDate: string; + alarmDate: string | null; } export const Alarm = ({ option, goalPrice, alarmDate }: AlarmProps) => { @@ -16,7 +16,7 @@ export const Alarm = ({ option, goalPrice, alarmDate }: AlarmProps) => { - {alarmDate.slice(0, 10)} + 기한: {alarmDate ? alarmDate.slice(0, 10) : '무기한'} ); diff --git a/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx b/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx index 3712eb94..403b8607 100644 --- a/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx +++ b/packages/frontend/src/pages/stock-detail/AddAlarmForm.tsx @@ -18,7 +18,7 @@ interface AddAlarmFormProps { interface AlarmInfo { option: AlarmOptionName; value: number; - endDate: string; + endDate: string | null; } export const AddAlarmForm = ({ className }: AddAlarmFormProps) => { @@ -30,7 +30,7 @@ export const AddAlarmForm = ({ className }: AddAlarmFormProps) => { const [alarmInfo, setAlarmInfo] = useState({ option: ALARM_OPTIONS[0].name, value: 0, - endDate: '', + endDate: null, }); const handleSubmit = (event: FormEvent) => { @@ -41,26 +41,24 @@ export const AddAlarmForm = ({ className }: AddAlarmFormProps) => { return; } - if (!alarmInfo.endDate) { - alert('알림을 받을 기한을 선택해주세요.'); - return; - } - subscribeAlarm(); const { option, value, endDate } = alarmInfo; const requestData: PostCreateAlarmRequest = { stockId, [option]: value, - alarmDate: endDate, + alarmExpiredDate: endDate, }; mutate(requestData, { onSuccess: () => { alert('알림이 등록되었어요!'); - setAlarmInfo({ option: ALARM_OPTIONS[0].name, value: 0, endDate: '' }); + setAlarmInfo({ + option: ALARM_OPTIONS[0].name, + value: 0, + endDate: null, + }); }, - onError: () => alert('예기치 못한 문제가 발생했어요. 다시 시도해주세요.'), }); }; @@ -77,8 +75,13 @@ export const AddAlarmForm = ({ className }: AddAlarmFormProps) => { className="text-dark-gray flex h-full flex-col items-center justify-between gap-16" >
-
-

언제 알림을 보낼까요?

+
+
+

언제 알림을 보낼까요?

+

+ 알림을 받고 싶은 도달 가격을 설정하세요. +

+
setAlarmInfo((prev) => ({ ...prev, endDate: e.target.value })) } From db8fd563af046f1d1ed52ecc53bd1866374d7f88 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 03:50:06 +0900 Subject: [PATCH 08/21] =?UTF-8?q?=E2=9C=A8=20feat:=20400=EC=97=90=EB=9F=AC?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=EC=97=90=EB=9F=AC=EB=A9=94=EC=8B=9C?= =?UTF-8?q?=EC=A7=80=EB=A5=BC=20alert=EC=9C=BC=EB=A1=9C=20=EB=9D=84?= =?UTF-8?q?=EC=9A=B0=EB=8F=84=EB=A1=9D=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/config/index.ts | 4 +++- .../frontend/src/apis/queries/errorSchema.ts | 20 +++++++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 packages/frontend/src/apis/queries/errorSchema.ts diff --git a/packages/frontend/src/apis/config/index.ts b/packages/frontend/src/apis/config/index.ts index a828a8b9..dd73147e 100644 --- a/packages/frontend/src/apis/config/index.ts +++ b/packages/frontend/src/apis/config/index.ts @@ -1,4 +1,5 @@ import axios, { AxiosError } from 'axios'; +import { ErrorResponse } from '@/apis/queries/errorSchema'; export const instance = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, @@ -10,9 +11,10 @@ instance.interceptors.response.use( (response) => response, async (error: AxiosError) => { const status = error.response?.status; + const { message } = error.response?.data as ErrorResponse; if (status === 400) { - alert('잘못된 요청이에요.'); + alert(message); } if (status === 403) { diff --git a/packages/frontend/src/apis/queries/errorSchema.ts b/packages/frontend/src/apis/queries/errorSchema.ts new file mode 100644 index 00000000..fcac6a03 --- /dev/null +++ b/packages/frontend/src/apis/queries/errorSchema.ts @@ -0,0 +1,20 @@ +import { z } from 'zod'; + +export const ErrorResponseSchema = z.object({ + message: z.string(), + error: z.string(), + statusCode: z.number(), +}); + +export const AxiosErrorSchema = z.object({ + response: z.object({ + data: ErrorResponseSchema, + status: z.number(), + statusText: z.string(), + }), + request: z.any().optional(), + message: z.string(), +}); + +export type ErrorResponse = z.infer; +export type AxiosError = z.infer; From d5ba2244b58504cf09a6a035d0d6df539fc845a8 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 04:03:23 +0900 Subject: [PATCH 09/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=A7=88=EC=9D=B4?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=95=8C?= =?UTF-8?q?=EB=A6=BC=20=EC=A0=95=EB=B3=B4=EA=B0=80=20=EB=A7=8E=EC=9D=84=20?= =?UTF-8?q?=EB=95=8C=20=EB=86=92=EC=9D=B4=EA=B0=80=20=EA=B3=A0=EC=A0=95?= =?UTF-8?q?=EB=90=98=EC=96=B4=20=EC=9E=88=EC=A7=80=20=EC=95=8A=EC=9D=80=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/pages/my-page/AlarmInfo.tsx | 8 +++++--- packages/frontend/src/pages/my-page/StockInfo.tsx | 4 ++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/frontend/src/pages/my-page/AlarmInfo.tsx b/packages/frontend/src/pages/my-page/AlarmInfo.tsx index 2ffec478..0f50975a 100644 --- a/packages/frontend/src/pages/my-page/AlarmInfo.tsx +++ b/packages/frontend/src/pages/my-page/AlarmInfo.tsx @@ -5,9 +5,11 @@ import { LoginContext } from '@/contexts/login'; export const AlarmInfo = () => { return ( -
+

알림

- +
+ +
); }; @@ -39,7 +41,7 @@ const AlarmInfoContents = () => { key={alarm.alarmId} option={alarm.targetPrice ? '목표가' : '거래가'} goalPrice={alarm.targetPrice ?? alarm.targetVolume!} - alarmDate={alarm.alarmDate} + alarmDate={alarm.alarmExpiredDate} /> )); }; diff --git a/packages/frontend/src/pages/my-page/StockInfo.tsx b/packages/frontend/src/pages/my-page/StockInfo.tsx index 86ebd1de..8303fed6 100644 --- a/packages/frontend/src/pages/my-page/StockInfo.tsx +++ b/packages/frontend/src/pages/my-page/StockInfo.tsx @@ -8,7 +8,7 @@ import { LoginContext } from '@/contexts/login'; export const StockInfo = () => { return ( -
+

주식 정보

@@ -44,7 +44,7 @@ const StockInfoContents = () => { } return ( -
+
{data?.userStocks.map((stock) => (
Date: Thu, 5 Dec 2024 04:05:33 +0900 Subject: [PATCH 10/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EC=95=8C=EB=A6=BC?= =?UTF-8?q?=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=EC=B0=BD=20=EC=A3=BC?= =?UTF-8?q?=EC=84=9D=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/components/layouts/Sidebar.tsx | 4 ++-- packages/frontend/src/constants/menuItems.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/frontend/src/components/layouts/Sidebar.tsx b/packages/frontend/src/components/layouts/Sidebar.tsx index fcabf362..2589cc47 100644 --- a/packages/frontend/src/components/layouts/Sidebar.tsx +++ b/packages/frontend/src/components/layouts/Sidebar.tsx @@ -2,7 +2,7 @@ import { useContext, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import logoCharacter from '/logoCharacter.png'; import logoTitle from '/logoTitle.png'; -import { Alarm } from './alarm'; +// import { Alarm } from './alarm'; import { MenuList } from './MenuList'; import { Search } from './search'; import { BOTTOM_MENU_ITEMS, TOP_MENU_ITEMS } from '@/constants/menuItems'; @@ -101,7 +101,7 @@ export const Sidebar = () => { )} > {showTabs.search && } - {showTabs.alarm && } + {/* {showTabs.alarm && } */}
); diff --git a/packages/frontend/src/constants/menuItems.tsx b/packages/frontend/src/constants/menuItems.tsx index 33e07767..60793beb 100644 --- a/packages/frontend/src/constants/menuItems.tsx +++ b/packages/frontend/src/constants/menuItems.tsx @@ -1,4 +1,3 @@ -import Bell from '@/assets/bell.svg?react'; import Home from '@/assets/home.svg?react'; import Search from '@/assets/search.svg?react'; import Stock from '@/assets/stock.svg?react'; @@ -15,7 +14,7 @@ export const TOP_MENU_ITEMS: MenuSection[] = [ text: '주식', path: '/stocks/005930', }, - { id: 4, icon: , text: '알림' }, + // { id: 4, icon: , text: '알림' }, ]; export const BOTTOM_MENU_ITEMS: MenuSection[] = [ From c950da0fd4cc86cab4ec8531eba558e6b9191fd7 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 04:06:00 +0900 Subject: [PATCH 11/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=9D=98=20retry=EB=A5=BC=200=EB=B2=88=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/queries/stocks/useGetSearchStocks.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/frontend/src/apis/queries/stocks/useGetSearchStocks.ts b/packages/frontend/src/apis/queries/stocks/useGetSearchStocks.ts index d654c018..d1fa5bb4 100644 --- a/packages/frontend/src/apis/queries/stocks/useGetSearchStocks.ts +++ b/packages/frontend/src/apis/queries/stocks/useGetSearchStocks.ts @@ -19,6 +19,7 @@ export const useGetSearchStocks = (name: string) => { await new Promise((resolve) => setTimeout(resolve, 500)); return getSearchStocks(name); }, + retry: 0, enabled: false, }); }; From ede9c8a7cc488ce4f6b35b55f8c10891b8ca058b Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 04:06:22 +0900 Subject: [PATCH 12/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A2=8B=EC=95=84?= =?UTF-8?q?=EC=9A=94=20=ED=81=B4=EB=A6=AD=20=ED=9B=84=20=EB=8B=A4=EC=8B=9C?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=EB=A5=BC=20=EB=B0=9B=EC=95=84?= =?UTF-8?q?=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=BF=BC=EB=A6=AC=20=EB=AC=B4?= =?UTF-8?q?=ED=9A=A8=ED=99=94=20=EC=A7=84=ED=96=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/queries/chat/usePostChatLike.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/apis/queries/chat/usePostChatLike.ts b/packages/frontend/src/apis/queries/chat/usePostChatLike.ts index 7cf53563..d2ce80c6 100644 --- a/packages/frontend/src/apis/queries/chat/usePostChatLike.ts +++ b/packages/frontend/src/apis/queries/chat/usePostChatLike.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; import { GetChatLikeResponseSchema, type GetChatLikeRequest, @@ -14,8 +14,10 @@ const postChatLike = ({ chatId }: GetChatLikeRequest) => }); export const usePostChatLike = () => { + const queryClient = useQueryClient(); return useMutation({ mutationKey: ['chatLike'], mutationFn: ({ chatId }: GetChatLikeRequest) => postChatLike({ chatId }), + onSuccess: () => queryClient.invalidateQueries({ queryKey: ['chatList'] }), }); }; From bfdad132992886926c6db44dca0b0d022d5ff9d4 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 04:06:44 +0900 Subject: [PATCH 13/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=A1=9C=EA=B7=B8?= =?UTF-8?q?=EC=9D=B8=20=EC=83=81=ED=83=9C=20api=20staleTime=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts b/packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts index b7323f2f..7ec5b5d4 100644 --- a/packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts +++ b/packages/frontend/src/apis/queries/auth/useGetLoginStatus.ts @@ -12,6 +12,6 @@ export const useGetLoginStatus = () => { return useQuery({ queryKey: ['loginStatus'], queryFn: getLoginStatus, - staleTime: 1000 * 60 * 5, + staleTime: 1000 * 60 * 3, }); }; From 3d69ebbbf8af00b02bd45c8487e5cb492a26665b Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 04:07:05 +0900 Subject: [PATCH 14/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=95=8C=EB=A6=BC=20?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EC=97=AD=EC=88=9C?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/App.tsx | 4 ++-- packages/frontend/src/apis/queries/alarm/useGetStockAlarm.ts | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 161ab1ba..09a9c4f9 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -3,9 +3,9 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { RouterProvider } from 'react-router-dom'; import { router } from './routes'; -const App = () => { - const queryClient = new QueryClient(); +const queryClient = new QueryClient(); +const App = () => { return ( diff --git a/packages/frontend/src/apis/queries/alarm/useGetStockAlarm.ts b/packages/frontend/src/apis/queries/alarm/useGetStockAlarm.ts index 8cf3d059..3bfd91fa 100644 --- a/packages/frontend/src/apis/queries/alarm/useGetStockAlarm.ts +++ b/packages/frontend/src/apis/queries/alarm/useGetStockAlarm.ts @@ -20,5 +20,7 @@ export const useGetStockAlarm = ({ queryKey: ['getStockAlarm', stockId], queryFn: () => getStockAlarm({ stockId }), enabled: isLoggedIn, + staleTime: 1000 * 60 * 5, + select: (data) => data.reverse(), }); }; From a116c10852161fe91cc83d792b494ff884bedd32 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 06:20:25 +0900 Subject: [PATCH 15/21] =?UTF-8?q?=F0=9F=9A=9A=20chore:=20react-error-bound?= =?UTF-8?q?ary=20=EC=84=A4=EC=B9=98=20=EB=B0=8F=20=EC=84=B8=ED=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/package.json | 1 + packages/frontend/src/App.tsx | 12 ++++++++++-- yarn.lock | 7 +++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 863d005c..cd8ba15f 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -20,6 +20,7 @@ "lightweight-charts": "^4.2.1", "react": "^18.3.1", "react-dom": "^18.3.1", + "react-error-boundary": "^4.1.2", "react-lottie-player": "^2.1.0", "react-router-dom": "^6.28.0", "socket.io-client": "^4.8.1", diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 09a9c4f9..560f8b15 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -1,6 +1,10 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { Suspense } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { RouterProvider } from 'react-router-dom'; +import { Error } from './components/errors/error'; +import { Loader } from './components/ui/loader'; import { router } from './routes'; const queryClient = new QueryClient(); @@ -8,8 +12,12 @@ const queryClient = new QueryClient(); const App = () => { return ( - - + }> + }> + + + + ); }; diff --git a/yarn.lock b/yarn.lock index c0bc1f39..099e8c9e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7444,6 +7444,13 @@ react-docgen@^7.0.0: loose-envify "^1.1.0" scheduler "^0.23.2" +react-error-boundary@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-4.1.2.tgz#bc750ad962edb8b135d6ae922c046051eb58f289" + integrity sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag== + dependencies: + "@babel/runtime" "^7.12.5" + react-is@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" From c5b2d30370a1ba57ed2e4d4dd8b86c66bc76d75f Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 06:21:15 +0900 Subject: [PATCH 16/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=97=90=EB=9F=AC=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84,=20?= =?UTF-8?q?=EB=A1=9C=EB=8D=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/components/errors/error.tsx | 30 +++++++++++++++++++ .../src/components/lottie/error-loading.json | 1 + .../src/components/ui/loader/Loader.tsx | 4 +-- 3 files changed, 33 insertions(+), 2 deletions(-) create mode 100644 packages/frontend/src/components/errors/error.tsx create mode 100644 packages/frontend/src/components/lottie/error-loading.json diff --git a/packages/frontend/src/components/errors/error.tsx b/packages/frontend/src/components/errors/error.tsx new file mode 100644 index 00000000..18e20dae --- /dev/null +++ b/packages/frontend/src/components/errors/error.tsx @@ -0,0 +1,30 @@ +import Lottie from 'react-lottie-player'; +import { useNavigate } from 'react-router-dom'; +import { Button } from '../ui/button'; +import error from '@/components/lottie/error-loading.json'; +import { cn } from '@/utils/cn'; + +interface ErrorProps { + className?: string; +} + +export const Error = ({ className }: ErrorProps) => { + const navigate = useNavigate(); + + return ( +
+
+ +

에러가 발생했어요. 주춤주춤 팀을 찾아주세요.

+
+ + +
+
+
+ ); +}; diff --git a/packages/frontend/src/components/lottie/error-loading.json b/packages/frontend/src/components/lottie/error-loading.json new file mode 100644 index 00000000..33c5df00 --- /dev/null +++ b/packages/frontend/src/components/lottie/error-loading.json @@ -0,0 +1 @@ +{"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":30,"ip":0,"op":80,"w":500,"h":500,"nm":"exclamação animation","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"exclamation","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":7,"s":[258.4,231.36,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":10,"s":[258.4,225,0],"to":null,"ti":null},{"i":{"x":0.833,"y":1},"o":{"x":0.167,"y":0},"t":13,"s":[258.4,231.36,0],"to":[0,1.06,0],"ti":[0,1.06,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":41,"s":[258.4,231.36,0],"to":null,"ti":null},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":44,"s":[258.4,225,0],"to":null,"ti":null},{"t":47,"s":[258.4,231.36,0]}],"ix":2},"a":{"a":0,"k":[16.613,83.692,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":7,"s":[90,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":10,"s":[93,93,100]},{"i":{"x":[0.833,0.833,0.833],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":13,"s":[90,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":41,"s":[90,90,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":44,"s":[93,93,100]},{"t":47,"s":[90,90,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[9.037,16.363],[0,16.363],[-16.363,9.038],[-9.037,-16.363],[16.363,-9.037]],"o":[[0,16.363],[-9.037,16.363],[-16.363,-9.037],[9.037,-16.363],[16.363,9.038]],"v":[[0,16.363],[0,16.363],[-16.363,0],[0,-16.363],[16.363,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.9961,0.9608,0.7412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[16.613,150.771],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.134,59.999],[0,59.999],[-14.727,53.405],[-14.727,-45.271],[-8.133,-59.999],[14.727,-53.405],[14.727,45.271]],"o":[[0,59.999],[-8.133,59.999],[-14.727,45.271],[-14.727,-53.405],[8.134,-59.999],[14.727,-45.271],[14.727,53.405]],"v":[[0,59.999],[0,59.999],[-14.727,45.271],[-14.727,-45.271],[0,-59.999],[14.727,-45.271],[14.727,45.271]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[0.9961,0.9608,0.7412,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[16.613,60.249],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":80,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":2,"ty":4,"nm":"stroke circle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[258.4,231.36,0],"ix":2},"a":{"a":0,"k":[146,146,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-77.872,-141],[141,-77.872],[77.872,141],[-141,77.872]],"o":[[77.872,-141],[141,77.872],[-77.872,141],[-141,-77.872]],"v":[[0,-141],[141,0],[0,141],[-141,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[146,146],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":30,"s":[90,90]},{"t":78,"s":[120,120]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[90]},{"t":79,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":90,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":3,"ty":4,"nm":"stroke circle 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[258.4,231.36,0],"ix":2},"a":{"a":0,"k":[146,146,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-77.872,-141],[141,-77.872],[77.872,141],[-141,77.872]],"o":[[77.872,-141],[141,77.872],[-77.872,141],[-141,-77.872]],"v":[[0,-141],[141,0],[0,141],[-141,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"st","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[146,146],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"t":0,"s":[90,90]},{"t":48,"s":[120,120]}],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[90]},{"t":49,"s":[0]}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":90,"st":0,"bm":0,"completed":true},{"ddd":0,"ind":4,"ty":4,"nm":"circle","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[258.4,231.36,0],"ix":2},"a":{"a":0,"k":[130.82,130.82,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-72.112,-130.57],[130.57,-72.112],[72.111,130.57],[-130.57,72.111]],"o":[[72.111,-130.57],[130.57,72.111],[-72.112,130.57],[-130.57,-72.112]],"v":[[0,-130.57],[130.57,0],[0,130.57],[-130.57,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false,"_render":true},{"ty":"fl","c":{"a":0,"k":[1,0.5569,0.2275,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false,"_render":true},{"ty":"tr","p":{"a":0,"k":[130.82,130.82],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform","_render":true}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false,"_render":true}],"ip":0,"op":90,"st":0,"bm":0,"completed":true}],"markers":[],"__complete":true} \ No newline at end of file diff --git a/packages/frontend/src/components/ui/loader/Loader.tsx b/packages/frontend/src/components/ui/loader/Loader.tsx index 2ed870df..848880b7 100644 --- a/packages/frontend/src/components/ui/loader/Loader.tsx +++ b/packages/frontend/src/components/ui/loader/Loader.tsx @@ -2,12 +2,12 @@ import Lottie from 'react-lottie-player'; import loading from '@/components/lottie/loading-animation.json'; interface LoaderProps { - className: string; + className?: string; } export const Loader = ({ className }: LoaderProps) => { return ( -
+
); From 2ce232691bc4948c0a2b0c236cbc7b603af2059c Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 06:22:25 +0900 Subject: [PATCH 17/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EC=A3=BC=EC=8B=9D=20?= =?UTF-8?q?=EC=A7=80=ED=91=9C=20=EC=A0=95=EB=B3=B4,=20=EC=A1=B0=ED=9A=8C?= =?UTF-8?q?=EC=88=98=EC=88=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=EB=A5=BC=20?= =?UTF-8?q?=EB=B3=91=EB=A0=AC=EB=A1=9C=20=EB=B0=9B=EB=8F=84=EB=A1=9D=20use?= =?UTF-8?q?SuspenseQueries=EB=A1=9C=20=ED=86=B5=ED=95=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/src/apis/queries/stocks/index.ts | 2 +- .../apis/queries/stocks/useGetStockIndex.ts | 17 ---- .../src/apis/queries/stocks/useGetTopViews.ts | 22 ----- .../apis/queries/stocks/useStockQueries.ts | 42 +++++++++ packages/frontend/src/pages/stocks/Stocks.tsx | 90 ++++++++++--------- 5 files changed, 92 insertions(+), 81 deletions(-) delete mode 100644 packages/frontend/src/apis/queries/stocks/useGetStockIndex.ts delete mode 100644 packages/frontend/src/apis/queries/stocks/useGetTopViews.ts create mode 100644 packages/frontend/src/apis/queries/stocks/useStockQueries.ts diff --git a/packages/frontend/src/apis/queries/stocks/index.ts b/packages/frontend/src/apis/queries/stocks/index.ts index b462ee5f..8af03948 100644 --- a/packages/frontend/src/apis/queries/stocks/index.ts +++ b/packages/frontend/src/apis/queries/stocks/index.ts @@ -1,5 +1,5 @@ export * from './schema'; -export * from './useGetTopViews'; export * from './useGetStocksByPrice'; export * from './useGetSearchStocks'; export * from './useGetStocksPriceSeries'; +export * from './useStockQueries'; diff --git a/packages/frontend/src/apis/queries/stocks/useGetStockIndex.ts b/packages/frontend/src/apis/queries/stocks/useGetStockIndex.ts deleted file mode 100644 index de88bd1b..00000000 --- a/packages/frontend/src/apis/queries/stocks/useGetStockIndex.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import { z } from 'zod'; -import { StockIndexSchema, type StockIndexResponse } from './schema'; -import { get } from '@/apis/utils/get'; - -const getStockIndex = () => - get({ - schema: z.array(StockIndexSchema), - url: `/api/stock/index`, - }); - -export const useGetStockIndex = () => { - return useQuery({ - queryKey: ['stockIndex'], - queryFn: getStockIndex, - }); -}; diff --git a/packages/frontend/src/apis/queries/stocks/useGetTopViews.ts b/packages/frontend/src/apis/queries/stocks/useGetTopViews.ts deleted file mode 100644 index a61e4c96..00000000 --- a/packages/frontend/src/apis/queries/stocks/useGetTopViews.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { useQuery } from '@tanstack/react-query'; -import { z } from 'zod'; -import { - GetStockListResponseSchema, - GetStockTopViewsResponse, - type GetStockListRequest, -} from './schema'; -import { get } from '@/apis/utils/get'; - -const getTopViews = ({ limit }: Partial) => - get[]>({ - schema: z.array(GetStockListResponseSchema.partial()), - url: `/api/stock/topViews`, - params: { limit }, - }); - -export const useGetTopViews = ({ limit }: Partial) => { - return useQuery({ - queryKey: ['stocks', 'topViews'], - queryFn: () => getTopViews({ limit }), - }); -}; diff --git a/packages/frontend/src/apis/queries/stocks/useStockQueries.ts b/packages/frontend/src/apis/queries/stocks/useStockQueries.ts new file mode 100644 index 00000000..c4d62ef1 --- /dev/null +++ b/packages/frontend/src/apis/queries/stocks/useStockQueries.ts @@ -0,0 +1,42 @@ +import { useSuspenseQueries } from '@tanstack/react-query'; +import { z } from 'zod'; +import { + GetStockListRequest, + GetStockListResponseSchema, + GetStockTopViewsResponse, + StockIndexResponse, + StockIndexSchema, +} from './schema'; +import { get } from '@/apis/utils/get'; + +interface StockQueriesProps { + viewsLimit: GetStockListRequest['limit']; +} + +const getStockIndex = () => + get({ + schema: z.array(StockIndexSchema), + url: `/api/stock/index`, + }); + +const getTopViews = ({ limit }: Partial) => + get[]>({ + schema: z.array(GetStockListResponseSchema.partial()), + url: `/api/stock/topViews`, + params: { limit }, + }); + +export const useStockQueries = ({ viewsLimit }: StockQueriesProps) => { + return useSuspenseQueries({ + queries: [ + { + queryKey: ['stockIndex'], + queryFn: getStockIndex, + }, + { + queryKey: ['topViews'], + queryFn: () => getTopViews({ limit: viewsLimit }), + }, + ], + }); +}; diff --git a/packages/frontend/src/pages/stocks/Stocks.tsx b/packages/frontend/src/pages/stocks/Stocks.tsx index 064b5889..5b9a9885 100644 --- a/packages/frontend/src/pages/stocks/Stocks.tsx +++ b/packages/frontend/src/pages/stocks/Stocks.tsx @@ -1,18 +1,20 @@ +import { lazy, Suspense } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { useNavigate } from 'react-router-dom'; import { StockIndexCard } from './components/StockIndexCard'; import { StockInfoCard } from './components/StockInfoCard'; -import { StockRankingTable } from './StockRankingTable'; import { usePostStockView } from '@/apis/queries/stock-detail'; -import { useGetTopViews } from '@/apis/queries/stocks'; -import { useGetStockIndex } from '@/apis/queries/stocks/useGetStockIndex'; +import { useStockQueries } from '@/apis/queries/stocks'; +import { Loader } from '@/components/ui/loader'; + +const StockRankingTable = lazy(() => import('./StockRankingTable')); const LIMIT = 5; export const Stocks = () => { const navigate = useNavigate(); - const { data: stockIndex } = useGetStockIndex(); - const { data: topViews } = useGetTopViews({ limit: LIMIT }); + const [stockIndex, topViews] = useStockQueries({ viewsLimit: LIMIT }); const { mutate } = usePostStockView(); return ( @@ -22,48 +24,54 @@ export const Stocks = () => {

지금 시장, 이렇게 움직이고 있어요.

- {stockIndex ? ( -
- {stockIndex?.map((info) => ( - - ))} -
- ) : ( -

지수 정보를 불러오는 데 실패했어요.

- )} + 지수 정보를 불러오는데 실패했어요.

} + > + }> +
+ {stockIndex.data.map((info) => ( + + ))} +
+ + +

이 종목은 어떠신가요?

-
- {topViews ? ( - topViews.map((stock, index) => ( - { - mutate({ stockId: stock.id ?? '' }); - navigate(`/stocks/${stock.id}`); - }} - /> - )) - ) : ( -

종목 정보를 불러오는데 실패했어요.

- )} -
+ 종목 정보를 불러오는데 실패했어요.

} + > + }> +
+ {topViews.data.map((stock, index) => ( + { + mutate({ stockId: stock.id ?? '' }); + navigate(`/stocks/${stock.id}`); + }} + /> + ))} +
+ +
+

지금 가장 활발한 종목이에요. From a5f549e403fb08916c4c2a3389e9c56bdc3722f4 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 06:28:46 +0900 Subject: [PATCH 18/21] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=B6=80=EB=B6=84?= =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20useQuery=EB=A5=BC=20useSusepnseQu?= =?UTF-8?q?ery,=20useInfiniteQuery=EB=A5=BC=20useSuspenseInfiniteQuery?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/queries/chat/useGetChatList.ts | 4 +- .../queries/stock-detail/useGetStockDetail.ts | 5 +- .../queries/stocks/useGetStocksByPrice.ts | 4 +- .../queries/stocks/useGetStocksPriceSeries.ts | 12 ++- .../src/apis/queries/user/useGetUserInfo.ts | 4 +- .../src/apis/queries/user/useGetUserStock.ts | 4 +- .../frontend/src/pages/my-page/AlarmInfo.tsx | 4 +- .../src/pages/stock-detail/ChatPanel.tsx | 102 ++++++++++-------- .../src/pages/stock-detail/StockDetail.tsx | 30 ++++-- .../src/pages/stock-detail/TradingChart.tsx | 14 +-- .../src/pages/stocks/StockRankingTable.tsx | 86 ++++++++------- packages/frontend/src/routes/index.tsx | 5 + 12 files changed, 155 insertions(+), 119 deletions(-) diff --git a/packages/frontend/src/apis/queries/chat/useGetChatList.ts b/packages/frontend/src/apis/queries/chat/useGetChatList.ts index 960f228c..5c0817b4 100644 --- a/packages/frontend/src/apis/queries/chat/useGetChatList.ts +++ b/packages/frontend/src/apis/queries/chat/useGetChatList.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query'; +import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { GetChatListRequest } from './schema'; import { get } from '@/apis/utils/get'; import { ChatDataResponse, ChatDataResponseSchema } from '@/sockets/schema'; @@ -26,7 +26,7 @@ export const useGetChatList = ({ pageSize, order, }: GetChatListRequest) => { - return useInfiniteQuery({ + return useSuspenseInfiniteQuery({ queryKey: ['chatList', stockId, order], queryFn: ({ pageParam }) => getChatList({ diff --git a/packages/frontend/src/apis/queries/stock-detail/useGetStockDetail.ts b/packages/frontend/src/apis/queries/stock-detail/useGetStockDetail.ts index 66398d18..fb3ed3b9 100644 --- a/packages/frontend/src/apis/queries/stock-detail/useGetStockDetail.ts +++ b/packages/frontend/src/apis/queries/stock-detail/useGetStockDetail.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { GetStockResponseSchema, type GetStockRequest, @@ -13,9 +13,8 @@ const getStockDetail = ({ stockId }: GetStockRequest) => }); export const useGetStockDetail = ({ stockId }: GetStockRequest) => { - return useQuery({ + return useSuspenseQuery({ queryKey: ['stockDetail', stockId], queryFn: () => getStockDetail({ stockId }), - enabled: !!stockId, }); }; diff --git a/packages/frontend/src/apis/queries/stocks/useGetStocksByPrice.ts b/packages/frontend/src/apis/queries/stocks/useGetStocksByPrice.ts index 84759632..428c54fc 100644 --- a/packages/frontend/src/apis/queries/stocks/useGetStocksByPrice.ts +++ b/packages/frontend/src/apis/queries/stocks/useGetStocksByPrice.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { GetStockListResponseSchema, type GetStockListRequest, @@ -14,7 +14,7 @@ const getStockByPrice = ({ limit, type }: GetStockListRequest) => }); export const useGetStocksByPrice = ({ limit, type }: GetStockListRequest) => { - return useQuery({ + return useSuspenseQuery({ queryKey: ['stocks', limit, type], queryFn: () => getStockByPrice({ limit, type }), }); diff --git a/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts b/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts index 6321e15a..5bd4879d 100644 --- a/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts +++ b/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts @@ -1,4 +1,4 @@ -import { useInfiniteQuery } from '@tanstack/react-query'; +import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; import { StockTimeSeriesResponseSchema, type StockTimeSeriesRequest, @@ -25,7 +25,7 @@ export const useGetStocksPriceSeries = ({ lastStartTime, timeunit, }: StockTimeSeriesRequest) => { - return useInfiniteQuery({ + return useSuspenseInfiniteQuery({ queryKey: ['stocksTimeSeries', stockId, timeunit], queryFn: ({ pageParam }) => getStocksPriceSeries({ @@ -41,8 +41,12 @@ export const useGetStocksPriceSeries = ({ : undefined, initialPageParam: { lastStartTime }, select: (data) => ({ - pages: [...data.pages].reverse(), - pageParams: [...data.pageParams].reverse(), + priceDtoList: [...data.pages] + .reverse() + .flatMap((page) => page.priceDtoList), + volumeDtoList: [...data.pages] + .reverse() + .flatMap((page) => page.volumeDtoList), }), refetchOnWindowFocus: false, staleTime: 5 * 60 * 1000, diff --git a/packages/frontend/src/apis/queries/user/useGetUserInfo.ts b/packages/frontend/src/apis/queries/user/useGetUserInfo.ts index dbe88895..efc97f89 100644 --- a/packages/frontend/src/apis/queries/user/useGetUserInfo.ts +++ b/packages/frontend/src/apis/queries/user/useGetUserInfo.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { GetUserInfoSchema, type GetUserInfo } from './schema'; import { get } from '@/apis/utils/get'; @@ -9,7 +9,7 @@ const getUserInfo = () => }); export const useGetUserInfo = () => { - return useQuery({ + return useSuspenseQuery({ queryKey: ['userInfo'], queryFn: getUserInfo, }); diff --git a/packages/frontend/src/apis/queries/user/useGetUserStock.ts b/packages/frontend/src/apis/queries/user/useGetUserStock.ts index 3c7c1e9a..f81fce97 100644 --- a/packages/frontend/src/apis/queries/user/useGetUserStock.ts +++ b/packages/frontend/src/apis/queries/user/useGetUserStock.ts @@ -1,4 +1,4 @@ -import { useQuery } from '@tanstack/react-query'; +import { useSuspenseQuery } from '@tanstack/react-query'; import { GetUserStockResponseSchema, type GetUserStockResponse, @@ -12,7 +12,7 @@ const getUserStock = () => }); export const useGetUserStock = () => { - return useQuery({ + return useSuspenseQuery({ queryKey: ['userStock'], queryFn: getUserStock, }); diff --git a/packages/frontend/src/pages/my-page/AlarmInfo.tsx b/packages/frontend/src/pages/my-page/AlarmInfo.tsx index 0f50975a..ad6eec13 100644 --- a/packages/frontend/src/pages/my-page/AlarmInfo.tsx +++ b/packages/frontend/src/pages/my-page/AlarmInfo.tsx @@ -16,9 +16,7 @@ export const AlarmInfo = () => { const AlarmInfoContents = () => { const { isLoggedIn } = useContext(LoginContext); - const { data } = useGetAlarm({ - isLoggedIn, - }); + const { data } = useGetAlarm({ isLoggedIn }); if (!isLoggedIn) { return ( diff --git a/packages/frontend/src/pages/stock-detail/ChatPanel.tsx b/packages/frontend/src/pages/stock-detail/ChatPanel.tsx index 8b621514..0e0f5a2e 100644 --- a/packages/frontend/src/pages/stock-detail/ChatPanel.tsx +++ b/packages/frontend/src/pages/stock-detail/ChatPanel.tsx @@ -1,4 +1,12 @@ -import { useCallback, useContext, useEffect, useMemo, useState } from 'react'; +import { + Suspense, + useCallback, + useContext, + useEffect, + useMemo, + useState, +} from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { useParams } from 'react-router-dom'; import { TextArea } from './components'; import { ChatMessage } from './components/ChatMessage'; @@ -153,49 +161,59 @@ export const ChatPanel = ({ isOwnerStock }: ChatPanelProps) => {

- {chatData.length ? ( - <> - {chatData.slice(0, INITIAL_VISIBLE_CHATS).map((chat) => ( - handleLikeClick(chat.id)} - /> - ))} - {chatData.slice(INITIAL_VISIBLE_CHATS).map((chat, index) => ( -
- {!isOwnerStock && ( -
- {index === 0 && ( -

- 주식 소유자만
- 확인할 수 있습니다. -

+ 채팅을 불러오는데 실패했어요.

+ } + > + }> + {chatData.length ? ( + <> + {chatData.slice(0, INITIAL_VISIBLE_CHATS).map((chat) => ( + handleLikeClick(chat.id)} + /> + ))} + {chatData.slice(INITIAL_VISIBLE_CHATS).map((chat, index) => ( +
+ {!isOwnerStock && ( +
+ {index === 0 && ( +

+ 주식 소유자만
+ 확인할 수 있어요. +

+ )} +
)} + handleLikeClick(chat.id)} + />
- )} - handleLikeClick(chat.id)} - /> -
- ))} - - ) : ( -

채팅이 없어요.

- )} + ))} + + ) : ( +

채팅이 없어요.

+ )} + + {isFetching ? :
}
diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx index 9c183021..b3e96c3a 100644 --- a/packages/frontend/src/pages/stock-detail/StockDetail.tsx +++ b/packages/frontend/src/pages/stock-detail/StockDetail.tsx @@ -1,3 +1,5 @@ +import { lazy, Suspense } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { useParams } from 'react-router-dom'; import { StockDetailHeader } from './components'; import { @@ -5,23 +7,25 @@ import { ChatPanel, NotificationPanel, StockMetricsPanel, - TradingChart, } from '.'; import { useGetOwnership, useGetStockDetail, } from '@/apis/queries/stock-detail'; +import { Loader } from '@/components/ui/loader'; + +const TradingChart = lazy(() => import('./TradingChart')); export const StockDetail = () => { const { stockId = '' } = useParams(); const { data: stockDetail } = useGetStockDetail({ stockId }); - const { eps, high52w, low52w, marketCap, per, name } = stockDetail || {}; + const { eps, high52w, low52w, marketCap, per, name } = stockDetail; const { data: userOwnerStock } = useGetOwnership({ stockId }); - if (!stockDetail || !userOwnerStock) { - return
데이터가 없습니다.
; + if (!userOwnerStock) { + return
주식 소유 여부를 불러오지 못했습니다.
; } return ( @@ -34,13 +38,17 @@ export const StockDetail = () => {
- + 상세 정보를 불러오지 못했어요.

}> + }> + + +
diff --git a/packages/frontend/src/pages/stock-detail/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx index 0d94db21..e22017b0 100644 --- a/packages/frontend/src/pages/stock-detail/TradingChart.tsx +++ b/packages/frontend/src/pages/stock-detail/TradingChart.tsx @@ -10,7 +10,7 @@ import { } from '@/apis/queries/stocks'; import { TIME_UNIT } from '@/constants/timeUnit'; -export const TradingChart = () => { +const TradingChart = () => { const { stockId } = useParams(); const [timeunit, setTimeunit] = useState('day'); @@ -23,14 +23,8 @@ export const TradingChart = () => { timeunit, }); - const allPriceData = data?.pages.flatMap((page) => page.priceDtoList) ?? []; - const allVolumeData = data?.pages.flatMap((page) => page.volumeDtoList) ?? []; - - const chart = useChart({ - priceData: allPriceData, - volumeData: allVolumeData, - containerRef, - }); + const { priceDtoList: priceData, volumeDtoList: volumeData } = data; + const chart = useChart({ priceData, volumeData, containerRef }); const fetchGraphData = useCallback( async (logicalRange: LogicalRange | null) => { @@ -79,3 +73,5 @@ export const TradingChart = () => { ); }; + +export default TradingChart; diff --git a/packages/frontend/src/pages/stocks/StockRankingTable.tsx b/packages/frontend/src/pages/stocks/StockRankingTable.tsx index 2d61aa1a..92a8cb36 100644 --- a/packages/frontend/src/pages/stocks/StockRankingTable.tsx +++ b/packages/frontend/src/pages/stocks/StockRankingTable.tsx @@ -1,13 +1,15 @@ -import { useState } from 'react'; +import { Suspense, useState } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { Link } from 'react-router-dom'; import { usePostStockView } from '@/apis/queries/stock-detail'; import { useGetStocksByPrice } from '@/apis/queries/stocks'; import DownArrow from '@/assets/down-arrow.svg?react'; +import { Loader } from '@/components/ui/loader'; import { cn } from '@/utils/cn'; const LIMIT = 10; -export const StockRankingTable = () => { +const StockRankingTable = () => { const [sortType, setSortType] = useState<'increase' | 'decrease'>('increase'); const { data } = useGetStocksByPrice({ limit: LIMIT, type: sortType }); @@ -49,46 +51,52 @@ export const StockRankingTable = () => { - {data ? ( - data.result.map((stock, index) => ( - - - - {index + 1} - - mutate({ stockId: stock.id })} - className="display-bold14 hover:text-orange cursor-pointer text-ellipsis hover:underline" - aria-label={stock.name} - > - {stock.name} - - - {stock.currentPrice?.toLocaleString()}원 - = 0 ? 'text-red' : 'text-blue', - )} + 종목 정보를 불러오는데 실패했어요.

+ } + > + }> + {data.result.map((stock, index) => ( + - {stock.changeRate}% - - - {stock.volume?.toLocaleString()}원 - - - {stock.marketCap?.toLocaleString()}주 - - - )) - ) : ( -

종목 정보를 불러오는데 실패했어요.

- )} + + + {index + 1} + + mutate({ stockId: stock.id })} + className="display-bold14 hover:text-orange cursor-pointer text-ellipsis hover:underline" + aria-label={stock.name} + > + {stock.name} + + + {stock.currentPrice?.toLocaleString()}원 + = 0 ? 'text-red' : 'text-blue', + )} + > + {stock.changeRate}% + + + {stock.volume?.toLocaleString()}원 + + + {stock.marketCap?.toLocaleString()}주 + + + ))} + + ); }; + +export default StockRankingTable; diff --git a/packages/frontend/src/routes/index.tsx b/packages/frontend/src/routes/index.tsx index 5a649e29..ac6ce782 100644 --- a/packages/frontend/src/routes/index.tsx +++ b/packages/frontend/src/routes/index.tsx @@ -1,4 +1,5 @@ import { createBrowserRouter } from 'react-router-dom'; +import { Error } from '@/components/errors/error'; import { Layout } from '@/components/layouts'; import { LoginProvider } from '@/contexts/login'; import { ThemeProvider } from '@/contexts/theme'; @@ -38,6 +39,10 @@ export const router = createBrowserRouter([ path: '/login', element: , }, + { + path: '*', + element: , + }, ], }, ], From 69cda1a048b6419c307aff2fed849e32b7124a29 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 11:54:43 +0900 Subject: [PATCH 19/21] =?UTF-8?q?=E2=9C=A8=20feat:=20throwOnError=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/App.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/frontend/src/App.tsx b/packages/frontend/src/App.tsx index 560f8b15..704369ad 100644 --- a/packages/frontend/src/App.tsx +++ b/packages/frontend/src/App.tsx @@ -7,7 +7,13 @@ import { Error } from './components/errors/error'; import { Loader } from './components/ui/loader'; import { router } from './routes'; -const queryClient = new QueryClient(); +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + throwOnError: true, + }, + }, +}); const App = () => { return ( From daf0b42459509f2c63bfac27e9de84802ea1d3bc Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 11:55:37 +0900 Subject: [PATCH 20/21] =?UTF-8?q?=E2=9C=A8=20feat:=20metric=20panel?= =?UTF-8?q?=EC=97=90=20lazy=EB=A1=9C=EB=94=A9=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/frontend/src/pages/stock-detail/StockDetail.tsx | 9 ++------- .../src/pages/stock-detail/StockMetricsPanel.tsx | 4 +++- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/frontend/src/pages/stock-detail/StockDetail.tsx b/packages/frontend/src/pages/stock-detail/StockDetail.tsx index b3e96c3a..1d200127 100644 --- a/packages/frontend/src/pages/stock-detail/StockDetail.tsx +++ b/packages/frontend/src/pages/stock-detail/StockDetail.tsx @@ -2,19 +2,14 @@ import { lazy, Suspense } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; import { useParams } from 'react-router-dom'; import { StockDetailHeader } from './components'; -import { - AddAlarmForm, - ChatPanel, - NotificationPanel, - StockMetricsPanel, -} from '.'; +import { AddAlarmForm, ChatPanel, NotificationPanel, TradingChart } from '.'; import { useGetOwnership, useGetStockDetail, } from '@/apis/queries/stock-detail'; import { Loader } from '@/components/ui/loader'; -const TradingChart = lazy(() => import('./TradingChart')); +const StockMetricsPanel = lazy(() => import('./StockMetricsPanel')); export const StockDetail = () => { const { stockId = '' } = useParams(); diff --git a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx index 50b36656..6c1a6ca3 100644 --- a/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx +++ b/packages/frontend/src/pages/stock-detail/StockMetricsPanel.tsx @@ -12,7 +12,7 @@ interface RealTimeStockData { volume: number; } -export const StockMetricsPanel = ({ +const StockMetricsPanel = ({ eps, high52w, low52w, @@ -75,3 +75,5 @@ export const StockMetricsPanel = ({
); }; + +export default StockMetricsPanel; From e64a01dfdd5e677046b6e24d09b30e8dfd0e3e37 Mon Sep 17 00:00:00 2001 From: baegyeong Date: Thu, 5 Dec 2024 11:56:24 +0900 Subject: [PATCH 21/21] =?UTF-8?q?=F0=9F=90=9B=20fix:=20=EB=A1=9C=EB=94=A9?= =?UTF-8?q?=20=EC=97=90=EB=9F=AC=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20useInfini?= =?UTF-8?q?teQuery=EB=A1=9C=20=EB=8B=A4=EC=8B=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/queries/stocks/useGetStocksPriceSeries.ts | 4 ++-- packages/frontend/src/pages/stock-detail/TradingChart.tsx | 7 +++---- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts b/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts index 5bd4879d..3d9c85b4 100644 --- a/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts +++ b/packages/frontend/src/apis/queries/stocks/useGetStocksPriceSeries.ts @@ -1,4 +1,4 @@ -import { useSuspenseInfiniteQuery } from '@tanstack/react-query'; +import { useInfiniteQuery } from '@tanstack/react-query'; import { StockTimeSeriesResponseSchema, type StockTimeSeriesRequest, @@ -25,7 +25,7 @@ export const useGetStocksPriceSeries = ({ lastStartTime, timeunit, }: StockTimeSeriesRequest) => { - return useSuspenseInfiniteQuery({ + return useInfiniteQuery({ queryKey: ['stocksTimeSeries', stockId, timeunit], queryFn: ({ pageParam }) => getStocksPriceSeries({ diff --git a/packages/frontend/src/pages/stock-detail/TradingChart.tsx b/packages/frontend/src/pages/stock-detail/TradingChart.tsx index e22017b0..8b2b15d9 100644 --- a/packages/frontend/src/pages/stock-detail/TradingChart.tsx +++ b/packages/frontend/src/pages/stock-detail/TradingChart.tsx @@ -10,7 +10,7 @@ import { } from '@/apis/queries/stocks'; import { TIME_UNIT } from '@/constants/timeUnit'; -const TradingChart = () => { +export const TradingChart = () => { const { stockId } = useParams(); const [timeunit, setTimeunit] = useState('day'); @@ -23,7 +23,8 @@ const TradingChart = () => { timeunit, }); - const { priceDtoList: priceData, volumeDtoList: volumeData } = data; + const { priceDtoList: priceData = [], volumeDtoList: volumeData = [] } = + data || {}; const chart = useChart({ priceData, volumeData, containerRef }); const fetchGraphData = useCallback( @@ -73,5 +74,3 @@ const TradingChart = () => { ); }; - -export default TradingChart;