feat: 플로팅 버튼 api 연동 #117
feat: 플로팅 버튼 api 연동 #117
Conversation
- 시세차트, 모델 적합도, 뉴스룸에 대해 도움말을 작성하였습니다.
WalkthroughThe pull request implements full UI and data-fetching logic for several floating panel components related to Bitcoin analysis and recommendations. It introduces a new React hook for fetching Bitcoin chart analysis, replaces placeholder components with styled, content-rich UIs, and adjusts layout padding for the floating panel. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AIChartAnalyze
participant useBitCoinAnalysisQuery
participant API
User->>AIChartAnalyze: Render component
AIChartAnalyze->>useBitCoinAnalysisQuery: Call hook to fetch data
useBitCoinAnalysisQuery->>API: GET /bitcoin-service/get_chart_analysis?currency=BTC
API-->>useBitCoinAnalysisQuery: Return analysis data
useBitCoinAnalysisQuery-->>AIChartAnalyze: Provide data
AIChartAnalyze-->>User: Display Bitcoin analysis and prediction
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (7)
src/hooks/api/floating/useBitCoinAnalysisQuery.ts (2)
6-9: Consider adding error handling and response type safety.While the basic implementation is correct, consider these improvements for production readiness:
- Add response type definitions for better type safety
- Consider error handling within the query function
- The hardcoded currency parameter could be made configurable
+interface BitCoinAnalysisResponse { + // Define expected response structure + analysis?: string; + timestamp?: string; + // Add other expected fields +} + +export const useBitCoinAnalysisQuery = (currency: string = 'BTC') => { -export const useBitCoinAnalysisQuery = () => { const getBitCoinAnalysis = async () => { - const response = await api.get( - "/bitcoin-service/get_chart_analysis?currency=BTC", - ); + const response = await api.get<BitCoinAnalysisResponse>( + `/bitcoin-service/get_chart_analysis?currency=${currency}`, + ); return response.data; };
14-14: Consider more specific query key for better cache management.The current query key
["bitCoinAnalysis"]is generic. Consider including the currency parameter for more granular cache management, especially if the hook might support multiple currencies in the future.- queryKey: ["bitCoinAnalysis"], + queryKey: ["bitCoinAnalysis", "BTC"],src/components/app/home/floating/FunctionHelp.tsx (1)
15-22: Consider extracting repeated styling patterns.The three feature sections use identical styling patterns. Consider extracting this into a reusable component or styled component for better maintainability.
+const FeatureSection = ({ title, children }: { title: string; children: React.ReactNode }) => ( + <div + css={css` + background-color: var(--blue-5); + padding: 16px; + border-radius: 8px; + margin-bottom: 12px; + `} + > + <div + css={css` + font-weight: 600; + font-size: 16px; + margin-bottom: 8px; + `} + > + {title} + </div> + <div + css={css` + font-size: 14px; + line-height: 1.5; + color: var(--gray-80); + `} + > + {children} + </div> + </div> +); // Then use it in the component: + <FeatureSection title="시세차트"> + AI가 예측한 코인 가격과 실제 가격을 알려주는 시세 추이 차트로, + 상단에서 종목을 바꿀 수 있어요. 마우스 휠(또는 터치)로 확대 및 + 축소하거나 상단의 태그를 눌러 날짜 영역을 바꿔보세요 :) + </FeatureSection>Also applies to: 44-51, 74-81
src/components/app/home/floating/AIChartRecommendation.tsx (2)
16-23: Extract duplicated styling patterns.The two analysis sections use identical styling. Consider creating a reusable component similar to the suggestion for
FunctionHelp.tsx.+const AnalysisSection = ({ title, content }: { title: string; content: string }) => ( + <div + css={css` + background-color: #f2f6fc; + padding: 16px; + border-radius: 8px; + margin-bottom: 12px; + `} + > + <div + css={css` + font-weight: 600; + font-size: 16px; + margin-bottom: 8px; + `} + > + {title} + </div> + <div + css={css` + font-size: 14px; + line-height: 1.5; + color: #424242; + `} + > + {content} + </div> + </div> +);Also applies to: 43-50
31-31: Fix duplicate section titles.Both analysis sections have the same title "비트코인 예측 해석". Consider making them more specific to differentiate their purposes.
비트코인 예측 해석 </div> // ... first section content <div> - 비트코인 예측 해석 + 뉴스 동향 분석Also applies to: 58-58
src/components/app/home/floating/AIChartAnalyze.tsx (2)
7-7: Remove debug console.log statement.Debug console.log statements should not be left in production code as they can clutter the browser console and potentially expose sensitive information.
Apply this diff to remove the debug statement:
- console.log(data);
64-64: Use CSS variables consistently for colors.The hardcoded color
#0056cashould use a CSS variable for consistency with the design system.Replace the hardcoded color:
- background-color: #0056ca; + background-color: var(--blue-primary, #0056ca);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/IconRightChevron.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
src/components/app/home/floating/AIChartAnalyze.tsx(1 hunks)src/components/app/home/floating/AIChartRecommendation.tsx(1 hunks)src/components/app/home/floating/FloatingPanelLayout.tsx(1 hunks)src/components/app/home/floating/FunctionHelp.tsx(1 hunks)src/hooks/api/floating/useBitCoinAnalysisQuery.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/hooks/api/floating/useBitCoinAnalysisQuery.ts (1)
src/api/index.ts (1)
api(134-134)
src/components/app/home/floating/AIChartAnalyze.tsx (1)
src/hooks/api/floating/useBitCoinAnalysisQuery.ts (1)
useBitCoinAnalysisQuery(4-20)
🔇 Additional comments (6)
src/hooks/api/floating/useBitCoinAnalysisQuery.ts (1)
4-20: LGTM! Well-structured React Query hook with appropriate caching.The implementation follows React Query best practices with proper query key structure and reasonable cache configuration. The 2-hour stale and garbage collection times are appropriate for chart analysis data that doesn't change frequently.
src/components/app/home/floating/FloatingPanelLayout.tsx (1)
25-25: LGTM! Consistent padding change to absolute units.The change from
1.5remto24pxprovides more precise control over the padding and aligns with the design system using absolute pixel values. This is appropriate for a floating panel where consistent spacing is important regardless of font size variations.src/components/app/home/floating/FunctionHelp.tsx (1)
1-103: Well-implemented help component with clear structure.The component provides comprehensive user guidance with well-organized sections and consistent styling. The Korean content clearly explains the features available on the page.
src/components/app/home/floating/AIChartRecommendation.tsx (1)
1-102: Component structure looks good, but contains placeholder content.The component is well-structured with consistent styling patterns, but there are some areas that need attention before production.
src/components/app/home/floating/AIChartAnalyze.tsx (2)
1-4: LGTM! Clean and necessary imports.All imports are properly used within the component and follow good import practices.
45-45: Good use of optional chaining for data safety.The optional chaining operator
?.properly handles cases where the API response might be undefined, preventing runtime errors.
| color: #424242; | ||
| `} | ||
| > | ||
| 가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하가나다라마바사아자차카타파하 |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Replace placeholder text with actual content.
The component contains Korean placeholder text ("가나다라마바사...") that should be replaced with actual Bitcoin analysis content or connected to the data from useBitCoinAnalysisQuery.
Consider integrating with the useBitCoinAnalysisQuery hook to display real analysis data:
+import { useBitCoinAnalysisQuery } from "@/hooks/api/floating/useBitCoinAnalysisQuery";
export default function AIChartRecommendation() {
+ const { data: analysisData, isLoading, error } = useBitCoinAnalysisQuery();
+
+ if (isLoading) return <div>분석 중...</div>;
+ if (error) return <div>분석 데이터를 불러올 수 없습니다.</div>;
return (
<div>
// ... existing JSX
- 가나다라마바사아자차카타파하가나다라마바사아자차카타파하...
+ {analysisData?.analysis || "분석 데이터를 준비 중입니다."}Also applies to: 67-67
🤖 Prompt for AI Agents
In src/components/app/home/floating/AIChartRecommendation.tsx at lines 40 and
67, replace the Korean placeholder text with actual Bitcoin analysis content.
Use the data fetched from the useBitCoinAnalysisQuery hook to dynamically render
meaningful analysis results instead of static placeholder text.
| <div | ||
| css={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; | ||
| `} | ||
| > | ||
| 매수 추천 | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add click handler for the recommendation button.
The button is styled to look clickable but has no click handler. Consider adding functionality or making it clear that it's a display-only element.
+const handleRecommendationClick = () => {
+ // Add recommendation logic or navigation
+ console.log("Recommendation clicked");
+};
<div
css={css`
// ... existing styles
`}
+ onClick={handleRecommendationClick}
>
매수 추천
</div>📝 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.
| <div | |
| css={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; | |
| `} | |
| > | |
| 매수 추천 | |
| </div> | |
| // Add this handler inside your component, above the JSX return | |
| const handleRecommendationClick = () => { | |
| // Add recommendation logic or navigation | |
| console.log("Recommendation clicked"); | |
| }; | |
| <div | |
| css={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; | |
| `} | |
| onClick={handleRecommendationClick} | |
| > | |
| 매수 추천 | |
| </div> |
🤖 Prompt for AI Agents
In src/components/app/home/floating/AIChartRecommendation.tsx between lines 71
and 89, the styled div representing the recommendation button lacks a click
handler, making it unclear if it is interactive. Add an onClick handler to this
div to define its behavior when clicked, or alternatively, update the styling or
markup to indicate it is a non-interactive display element if no action is
intended.
| return ( | ||
| <div> | ||
| <h1 | ||
| css={css` | ||
| font-size: 18px; | ||
| font-weight: 600; | ||
| line-height: 1.4; | ||
| `} | ||
| > | ||
| '비트코인' 가격 추세 예측과 뉴스 동향을 종합해서 최적의 투자 판단을 | ||
| 추천해드릴게요. | ||
| </h1> | ||
| <div | ||
| css={css` | ||
| background-color: var(--blue-5); | ||
| padding: 16px; | ||
| border-radius: 8px; | ||
| margin-bottom: 24px; | ||
| `} | ||
| > | ||
| <div | ||
| css={css` | ||
| font-weight: 600; | ||
| font-size: 16px; | ||
| margin-bottom: 8px; | ||
| `} | ||
| > | ||
| 비트코인 예측 해석 | ||
| </div> | ||
| <div | ||
| css={css` | ||
| font-size: 14px; | ||
| line-height: 1.5; | ||
| color: var(--gray-80); | ||
| `} | ||
| > | ||
| {data?.response} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div> | ||
| <h2 | ||
| css={css` | ||
| font-size: 18px; | ||
| font-weight: 600; | ||
| line-height: 1.4; | ||
| `} | ||
| > | ||
| 지금 주요뉴스 동향을 분석해서 추천할 만한 투자 판단을 도와드릴까요? | ||
| </h2> | ||
| <div | ||
| css={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; | ||
| `} | ||
| > | ||
| AI 추천판단 <IconRightChevron /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add loading and error state handling to the JSX.
The component should display appropriate UI for loading and error states to improve user experience.
Add conditional rendering at the beginning of the return statement:
return (
<div>
{isLoading && (
<div css={css`text-align: center; padding: 20px;`}>
비트코인 분석 데이터를 불러오는 중...
</div>
)}
{isError && (
<div css={css`
text-align: center;
padding: 20px;
color: var(--red-60);
background-color: var(--red-5);
border-radius: 8px;
margin-bottom: 16px;
`}>
데이터를 불러오는 중 오류가 발생했습니다. 다시 시도해주세요.
</div>
)}
{data && !isLoading && (
// ... existing JSX content
)}
</div>
);🤖 Prompt for AI Agents
In src/components/app/home/floating/AIChartAnalyze.tsx around lines 9 to 80, the
component lacks UI handling for loading and error states. Add conditional
rendering at the start of the return statement to show a loading message when
isLoading is true, an error message with styled alert when isError is true, and
only render the existing main content when data is available and not loading.
This improves user experience by clearly indicating data fetch status.
|
|
||
| export default function AIChartAnalyze() { | ||
| return <div>AIChartAnalyze</div>; | ||
| const { data } = useBitCoinAnalysisQuery(); |
There was a problem hiding this comment.
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.
| 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.
| <div | ||
| css={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; | ||
| `} | ||
| > | ||
| AI 추천판단 <IconRightChevron /> | ||
| </div> |
There was a problem hiding this comment.
Implement missing click functionality and improve accessibility.
The styled div appears to be a clickable button but lacks both functionality and proper accessibility attributes.
Apply this diff to fix the issues:
- <div
+ <button
css={css`
width: 100%;
height: 40px;
margin-top: 12px;
- background-color: #0056ca;
+ background-color: var(--blue-primary, #0056ca);
color: white;
+ border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: 400;
margin: 8.5px 0px;
+ &:hover {
+ background-color: var(--blue-primary-hover, #004299);
+ }
+ &:disabled {
+ background-color: var(--gray-40);
+ cursor: not-allowed;
+ }
`}
+ onClick={() => {
+ // TODO: Implement AI recommendation functionality
+ console.warn('AI recommendation functionality not implemented');
+ }}
+ aria-label="AI 추천판단 받기"
>
AI 추천판단 <IconRightChevron />
- </div>
+ </button>📝 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.
| <div | |
| css={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; | |
| `} | |
| > | |
| AI 추천판단 <IconRightChevron /> | |
| </div> | |
| <button | |
| css={css` | |
| width: 100%; | |
| height: 40px; | |
| margin-top: 12px; | |
| background-color: var(--blue-primary, #0056ca); | |
| color: white; | |
| border: none; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| font-size: 16px; | |
| font-weight: 400; | |
| margin: 8.5px 0px; | |
| &:hover { | |
| background-color: var(--blue-primary-hover, #004299); | |
| } | |
| &:disabled { | |
| background-color: var(--gray-40); | |
| cursor: not-allowed; | |
| } | |
| `} | |
| onClick={() => { | |
| // TODO: Implement AI recommendation functionality | |
| console.warn('AI recommendation functionality not implemented'); | |
| }} | |
| aria-label="AI 추천판단 받기" | |
| > | |
| AI 추천판단 <IconRightChevron /> | |
| </button> |
🤖 Prompt for AI Agents
In src/components/app/home/floating/AIChartAnalyze.tsx between lines 59 and 77,
the div styled as a button lacks click functionality and accessibility features.
Replace the div with a button element or add role="button", tabIndex="0", and
onClick handler to enable interaction. Also, add keyboard event handling for
accessibility and ensure the element has appropriate aria-label or descriptive
text for screen readers.
klmhyeonwoo
left a comment
klmhyeonwoo
left a comment
There was a problem hiding this comment.
너무너무 고생하셨습니다!!
궁금한 점과 더불어 조금의 코멘트를 달아보았어요!
|
추가로 코드레빗이 불필요한 부분까지 리뷰를 해주는 것 같아, PR 요청자가 멘션으로 원할 때만 사용할 수 있도록 구조 변경 진행할게요! |
- staleTime을 0으로 수정 - 스프레드 연산자 수정
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
src/components/app/home/floating/AIChartAnalyze.tsx (3)
6-6: Add error handling and loading states.The component only destructures
datafrom the hook but ignoresisLoading,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.
8-28: Add loading and error state handling to the JSX.The component should display appropriate UI for loading and error states to improve user experience.
Add conditional rendering at the beginning of the return statement:
return ( <div> {isLoading && ( <div css={css`text-align: center; padding: 20px;`}> 비트코인 분석 데이터를 불러오는 중... </div> )} {isError && ( <div css={css` text-align: center; padding: 20px; color: var(--red-60); background-color: var(--red-5); border-radius: 8px; margin-bottom: 16px; `}> 데이터를 불러오는 중 오류가 발생했습니다. 다시 시도해주세요. </div> )} {data && !isLoading && ( // ... existing JSX content )} </div> );
23-25: Implement missing click functionality and improve accessibility.The styled div appears to be a clickable button but lacks both functionality and proper accessibility attributes.
Apply this diff to fix the issues:
- <div css={buttonStyle}> + <button css={buttonStyle}> AI 추천판단 <IconRightChevron /> - </div> + </button>And update the buttonStyle to include proper button styling:
const buttonStyle = css` width: 100%; height: 40px; margin-top: 12px; - background-color: #0056ca; + background-color: var(--blue-primary, #0056ca); color: white; + border: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; font-weight: 400; margin: 8.5px 0px; + &:hover { + background-color: var(--blue-primary-hover, #004299); + } + &:disabled { + background-color: var(--gray-40); + cursor: not-allowed; + } `;
🧹 Nitpick comments (1)
src/components/app/home/floating/AIChartAnalyze.tsx (1)
60-60: Use CSS variable for consistent color theming.The hardcoded color
#0056cashould be replaced with a CSS variable for better maintainability and consistency with the design system.- background-color: #0056ca; + background-color: var(--blue-primary, #0056ca);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/app/home/floating/AIChartAnalyze.tsx(1 hunks)src/components/app/home/floating/AIChartRecommendation.tsx(1 hunks)src/components/app/home/floating/FunctionHelp.tsx(1 hunks)src/hooks/api/floating/useBitCoinAnalysisQuery.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/hooks/api/floating/useBitCoinAnalysisQuery.ts
- src/components/app/home/floating/FunctionHelp.tsx
- src/components/app/home/floating/AIChartRecommendation.tsx
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/components/app/home/floating/AIChartAnalyze.tsx (1)
src/hooks/api/floating/useBitCoinAnalysisQuery.ts (1)
useBitCoinAnalysisQuery(4-17)
|
LGTM! |
|
머지 드가시죠! |
목적
작업 내용
필수 리뷰어
이슈 번호
Summary by CodeRabbit
New Features
Style
Bug Fixes