Skip to content

feat: 플로팅 버튼 api 연동 #117

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
Cllaude99 merged 6 commits into from
Jun 3, 2025
Merged

feat: 플로팅 버튼 api 연동 #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
22c3ec7
feat: AI 차트 해석 api 연동
Cllaude99 May 31, 2025
96ebbea
feat: 기능 도움말 작성
Cllaude99 May 31, 2025
e80f63b
feat: AI 추천판단 화면 개발
Cllaude99 May 31, 2025
e90e2a0
chore: layout 수정
Cllaude99 May 31, 2025
c6a0055
chore: css 변수처리로 분리
Cllaude99 Jun 3, 2025
6d768db
chore: staleTime 수정
Cllaude99 Jun 3, 2025
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
3 changes: 3 additions & 0 deletions src/assets/IconRightChevron.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 68 additions & 1 deletion src/components/app/home/floating/AIChartAnalyze.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 <div>AIChartAnalyze</div>;
const { data } = useBitCoinAnalysisQuery();
Copy link
Contributor

@coderabbitai coderabbitai bot May 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Add error handling and loading states.

The component only destructures data from the hook but ignores isLoading, error, and other important states. This results in poor user experience when the API call is pending or fails.

Apply this diff to add proper state handling:

-  const { data } = useBitCoinAnalysisQuery();
+  const { data, isLoading, error, isError } = useBitCoinAnalysisQuery();

Then add conditional rendering in the JSX to handle these states appropriately.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const { data } = useBitCoinAnalysisQuery();
const { data, isLoading, error, isError } = useBitCoinAnalysisQuery();
🤖 Prompt for AI Agents 
In src/components/app/home/floating/AIChartAnalyze.tsx at line 6, the
useBitCoinAnalysisQuery hook destructures only data, missing isLoading and error
states. Update the destructuring to include isLoading and error, then add
conditional rendering in the component's JSX to show a loading indicator when
isLoading is true and an error message when error exists, ensuring better user
experience during API call delays or failures.


return (
<div>
<h1 css={titleStyle}>
'비트코인' 가격 추세 예측과 뉴스 동향을 종합해서 최적의 투자 판단을
추천해드릴게요.
</h1>
<div css={analysisContainerStyle}>
<div css={analysisHeaderStyle}>비트코인 예측 해석</div>
<div css={analysisContentStyle}>{data?.response}</div>
</div>

<div>
<h2 css={titleStyle}>
지금 주요뉴스 동향을 분석해서 추천할 만한 투자 판단을 도와드릴까요?
</h2>
<div css={buttonStyle}>
AI 추천판단 <IconRightChevron />
</div>
</div>
</div>
);
}

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;
`;
77 changes: 76 additions & 1 deletion src/components/app/home/floating/AIChartRecommendation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,78 @@
import { css } from "@emotion/react";

export default function AIChartRecommendation() {
return <div>AIChartRecommendation</div>;
return (
<div>
<h1 css={titleStyle}>
'비트코인' 가격 추세 예측과 뉴스 동향을 종합해서 최적의 투자 판단을
추천해드릴게요.
</h1>
<div css={analysisContainerStyle}>
<div css={analysisHeaderStyle}>비트코인 예측 해석</div>
<div css={analysisContentStyle}>
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
</div>
</div>
<div css={analysisContainerSecondStyle}>
<div css={analysisHeaderStyle}>비트코인 예측 해석</div>
<div css={analysisContentStyle}>
가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하
</div>
</div>
<div>
<div css={recommendButtonStyle}>매수 추천</div>
<h2 css={titleStyle}>
지금 주요뉴스 동향을 분석해서 추천할 만한 투자 판단을 도와드릴까요?
</h2>
</div>
</div>
);
}

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;
`;
2 changes: 1 addition & 1 deletion src/components/app/home/floating/FloatingPanelLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
56 changes: 55 additions & 1 deletion src/components/app/home/floating/FunctionHelp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,57 @@
import { css } from "@emotion/react";

export default function FunctionHelp() {
return <div>FunctionHelp</div>;
return (
<div>
<h1 css={titleStyle}>현재 페이지에 있는 기능들을 알려드릴게요.</h1>
<div css={helpContainerStyle}>
<div css={helpHeaderStyle}>시세차트</div>
<div css={helpContentStyle}>
AI가 예측한 코인 가격과 실제 가격을 알려주는 시세 추이 차트로,
상단에서 종목을 바꿀 수 있어요. 마우스 휠(또는 터치)로 확대 및
축소하거나 상단의 태그를 눌러 날짜 영역을 바꿔보세요 :)
</div>
</div>
<div css={helpContainerStyle}>
<div css={helpHeaderStyle}>모델 적합도</div>
<div css={helpContentStyle}>
Flowbit AI 학습모델의 예측값이 실제 데이터 패턴을 얼마나 잘
설명하는지를 검증된 통계적 기법으로 평가한 지표에요. 지표가 높을수록
예측 정확도가 높아지기 때문에, 현재 지표 상으로는 예측가격이
실제가격과 매우 유사할 거에요 :)
</div>
</div>
<div css={helpContainerStyle}>
<div css={helpHeaderStyle}>뉴스룸</div>
<div css={helpContentStyle}>
매일 가상화폐 종목 별 주요뉴스를 선별해 제공하고 있어요.
</div>
</div>
</div>
);
}

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);
`;
17 changes: 17 additions & 0 deletions src/hooks/api/floating/useBitCoinAnalysisQuery.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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시간
});
};