PostPredictionBadge.tsx 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. 'use client';
  2. // 글 상세용 예측 배지 — /api/posts/{id}/prediction 을 클라이언트에서 조회해 렌더.
  3. // 예측이 없는 글(비종목글 포함)은 404 → 아무것도 렌더하지 않음(모든 게시판에서 안전).
  4. import '@/app/styles/community.scss';
  5. import { useEffect, useState } from 'react';
  6. import { fetchApi } from '@/lib/utils/client';
  7. import { PostPredictionResponse } from '@/types/community';
  8. import PredictionBadge from './PredictionBadge';
  9. interface Props {
  10. postID: number;
  11. }
  12. export default function PostPredictionBadge({ postID }: Props)
  13. {
  14. const [prediction, setPrediction] = useState<PostPredictionResponse|null>(null);
  15. useEffect(() => {
  16. let active = true;
  17. (async () => {
  18. try {
  19. const res = await fetchApi<PostPredictionResponse>(`/api/posts/${postID}/prediction`, { silent: true });
  20. if (active && res.success && res.data) {
  21. setPrediction(res.data);
  22. }
  23. } catch {
  24. // 예측 없음/조회 실패는 무시 (배지 미표시)
  25. }
  26. })();
  27. return () => {
  28. active = false;
  29. };
  30. }, [postID]);
  31. if (!prediction) {
  32. return null;
  33. }
  34. return (
  35. <div className='post-prediction'>
  36. <PredictionBadge prediction={prediction} variant='detail' />
  37. </div>
  38. );
  39. }