diff --git a/src/assets/IconRightChevron.svg b/src/assets/IconRightChevron.svg new file mode 100644 index 0000000..c0cb12a --- /dev/null +++ b/src/assets/IconRightChevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/app/home/floating/AIChartAnalyze.tsx b/src/components/app/home/floating/AIChartAnalyze.tsx index 9003ff6..0ca74fe 100644 --- a/src/components/app/home/floating/AIChartAnalyze.tsx +++ b/src/components/app/home/floating/AIChartAnalyze.tsx @@ -1,3 +1,70 @@ +import IconRightChevron from "@/assets/IconRightChevron.svg?react"; +import { useBitCoinAnalysisQuery } from "@/hooks/api/floating/useBitCoinAnalysisQuery"; +import { css } from "@emotion/react"; + export default function AIChartAnalyze() { - return
AIChartAnalyze
; + const { data } = useBitCoinAnalysisQuery(); + + return ( +
+

+ '비트코인' 가격 추세 예측과 뉴스 동향을 종합해서 최적의 투자 판단을 + 추천해드릴게요. +

+
+
비트코인 예측 해석
+
{data?.response}
+
+ +
+

+ 지금 주요뉴스 동향을 분석해서 추천할 만한 투자 판단을 도와드릴까요? +

+
+ AI 추천판단 +
+
+
+ ); } + +const titleStyle = css` + font-size: 18px; + font-weight: 600; + line-height: 1.4; +`; + +const analysisContainerStyle = css` + background-color: var(--blue-5); + padding: 16px; + border-radius: 8px; + margin-bottom: 24px; +`; + +const analysisHeaderStyle = css` + font-weight: 600; + font-size: 16px; + margin-bottom: 8px; +`; + +const analysisContentStyle = css` + font-size: 14px; + line-height: 1.5; + color: var(--gray-80); +`; + +const buttonStyle = css` + width: 100%; + height: 40px; + margin-top: 12px; + background-color: #0056ca; + color: white; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 16px; + font-weight: 400; + margin: 8.5px 0px; +`; diff --git a/src/components/app/home/floating/AIChartRecommendation.tsx b/src/components/app/home/floating/AIChartRecommendation.tsx index 9654096..a1a3f9b 100644 --- a/src/components/app/home/floating/AIChartRecommendation.tsx +++ b/src/components/app/home/floating/AIChartRecommendation.tsx @@ -1,3 +1,78 @@ +import { css } from "@emotion/react"; + export default function AIChartRecommendation() { - return
AIChartRecommendation
; + return ( +
+

+ '비트코인' 가격 추세 예측과 뉴스 동향을 종합해서 최적의 투자 판단을 + 추천해드릴게요. +

+
+
비트코인 예측 해석
+
+ 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 +
+
+
+
비트코인 예측 해석
+
+ 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 +
+
+
+
매수 추천
+

+ 지금 주요뉴스 동향을 분석해서 추천할 만한 투자 판단을 도와드릴까요? +

+
+
+ ); } + +const titleStyle = css` + font-size: 18px; + font-weight: 600; + line-height: 1.4; +`; + +const analysisContainerStyle = css` + background-color: #f2f6fc; + padding: 16px; + border-radius: 8px; + margin-bottom: 12px; +`; + +const analysisContainerSecondStyle = css` + background-color: #f2f6fc; + padding: 16px; + border-radius: 8px; + margin-bottom: 24px; +`; + +const analysisHeaderStyle = css` + font-weight: 600; + font-size: 16px; + margin-bottom: 8px; +`; + +const analysisContentStyle = css` + font-size: 14px; + line-height: 1.5; + color: #424242; +`; + +const recommendButtonStyle = css` + width: 69px; + height: 29px; + margin-top: 12px; + background-color: #0056ca; + color: white; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + font-size: 13px; + font-weight: 400; + margin: 8.5px 0px; +`; diff --git a/src/components/app/home/floating/FloatingPanelLayout.tsx b/src/components/app/home/floating/FloatingPanelLayout.tsx index 865e872..5fdbbdc 100644 --- a/src/components/app/home/floating/FloatingPanelLayout.tsx +++ b/src/components/app/home/floating/FloatingPanelLayout.tsx @@ -22,7 +22,7 @@ const panelStyle = css` width: 390px; height: calc(100dvh - 450px); background-color: white; - padding: 1.5rem; + padding: 24px; border-radius: 24px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; diff --git a/src/components/app/home/floating/FunctionHelp.tsx b/src/components/app/home/floating/FunctionHelp.tsx index 7f15828..9aa57fd 100644 --- a/src/components/app/home/floating/FunctionHelp.tsx +++ b/src/components/app/home/floating/FunctionHelp.tsx @@ -1,3 +1,57 @@ +import { css } from "@emotion/react"; + export default function FunctionHelp() { - return
FunctionHelp
; + return ( +
+

현재 페이지에 있는 기능들을 알려드릴게요.

+
+
시세차트
+
+ AI가 예측한 코인 가격과 실제 가격을 알려주는 시세 추이 차트로, + 상단에서 종목을 바꿀 수 있어요. 마우스 휠(또는 터치)로 확대 및 + 축소하거나 상단의 태그를 눌러 날짜 영역을 바꿔보세요 :) +
+
+
+
모델 적합도
+
+ Flowbit AI 학습모델의 예측값이 실제 데이터 패턴을 얼마나 잘 + 설명하는지를 검증된 통계적 기법으로 평가한 지표에요. 지표가 높을수록 + 예측 정확도가 높아지기 때문에, 현재 지표 상으로는 예측가격이 + 실제가격과 매우 유사할 거에요 :) +
+
+
+
뉴스룸
+
+ 매일 가상화폐 종목 별 주요뉴스를 선별해 제공하고 있어요. +
+
+
+ ); } + +const titleStyle = css` + font-size: 18px; + font-weight: 600; + line-height: 1.4; +`; + +const helpContainerStyle = css` + background-color: var(--blue-5); + padding: 16px; + border-radius: 8px; + margin-bottom: 12px; +`; + +const helpHeaderStyle = css` + font-weight: 600; + font-size: 16px; + margin-bottom: 8px; +`; + +const helpContentStyle = css` + font-size: 14px; + line-height: 1.5; + color: var(--gray-80); +`; diff --git a/src/hooks/api/floating/useBitCoinAnalysisQuery.ts b/src/hooks/api/floating/useBitCoinAnalysisQuery.ts new file mode 100644 index 0000000..d9bbf9d --- /dev/null +++ b/src/hooks/api/floating/useBitCoinAnalysisQuery.ts @@ -0,0 +1,17 @@ +import { api } from "@/api"; +import { useQuery } from "@tanstack/react-query"; + +export const useBitCoinAnalysisQuery = () => { + const getBitCoinAnalysis = async () => { + const response = await api.get( + "/bitcoin-service/get_chart_analysis?currency=BTC", + ); + return response.data; + }; + + return useQuery({ + queryKey: ["bitCoinAnalysis"], + queryFn: () => getBitCoinAnalysis(), + gcTime: 60000 * 60 * 2, // 2시간 + }); +};