+ {errorMessage} 불러오는데 실패했습니다.
+ +이름: {idol.idol.name}
+그룹: {idol.idol.group}
+총 투표수: {idol.idol.totalVotes}
+제목: {donation.title}
+장소: {donation.subtitle}
+목표 금액: {donation.targetDonation}
+현재 금액: {donation.receivedDonations}
++ {timeLeftArray[0].value} Days + {timeLeftArray[1].value} : + {timeLeftArray[2].value} : + {timeLeftArray[3].value} +
++ 모집 기간 : {deadline.split("T")[0]} +
+ + ); +} + +const DonationDetailTimerStyle = css` + strong:first-of-type { + font-size: 24px; + color: rgba(255, 255, 255, 0.8); + } +`; diff --git a/src/pages/DonationDetail/index.jsx b/src/pages/DonationDetail/index.jsx new file mode 100644 index 0000000..797d467 --- /dev/null +++ b/src/pages/DonationDetail/index.jsx @@ -0,0 +1,212 @@ +import { css } from "@emotion/react"; +import { useCallback, useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { donationsAPI } from "../../apis/donationsAPI"; +import LoadingError from "../../components/Error"; +import DonationDetailInfo from "./components/DonationDetailInfo"; +import DonationDetailText from "./components/DonationDetailText"; +/** @jsxImportSource @emotion/react */ + +export default function DonationDetail() { + const { id } = useParams(); + const [donation, setDonation] = useState(null); + const [loading, setLoading] = useState(true); + const [randomEmoji, setRandomEmoji] = useState(""); + const [error, setError] = useState(false); + + const getDonation = useCallback(async () => { + try { + const response = await donationsAPI.getDonations(); + if (response) { + const foundDonation = response.list.find( + (item) => item.id === Number.parseInt(id) || item.id === id, + ); + setDonation(foundDonation || null); + } + } catch (error) { + // 로딩 UI 잠시 유지 + setTimeout(() => { + setError(true); + }, 600); // 600초 정도 기다렸다가 에러 표시 + } finally { + setLoading(false); + } + }, [id]); + + useEffect(() => { + getDonation(); + }, [getDonation]); + + // 랜덤 이모지 - 초기 렌더링에서만 이모지를 선택 + useEffect(() => { + const emojiKeys = Object.keys(emojis); + const selectedEmoji = + emojis[emojiKeys[Math.floor(Math.random() * emojiKeys.length)]]; + setRandomEmoji(selectedEmoji); + }, []); + + const emojis = { + heart: "💖", + star: "⭐", + sparkle: "✨", + fire: "🔥", + sparkles: "🎆", + party: "🎉", + gift: "💝", + ribbon: "🎀", + }; + + return ( ++ {donation.subtitle} - {donation.title} +
+
+ 진심을 담은 응원,
+
+ 이제는 더 쉬운 방법으로 시작해 보세요.
+
+
+ 
+ All your K-pop love, in one place
+© FandomJingyu.2025 All rights reserved.
+
+ 
+
+ 
+
+ 좋아하는 아티스트에게 직접 후원하고
+
+ 팬심을 행동으로 보여주세요.
+
+ 투명한 후원 내역과 간편한 참여로
+
+ 진짜 응원을 이어갑니다.
+
+
+ 
+
+ 팬들의 사랑을 가장 많이 받은
+
+ 이달의 아티스트를 소개합니다!
+
+ 당신의 크레딧 응원으로 아티스트를
+
+ 가장 빛난 별로 만들어주세요.
+
+
+
+
+ 
+
+ 내가 좋아하는 아티스트 소식만 골라보고
+ 새로운 콘텐츠와 스케줄도 한눈에!
+
+ 나만의 맞춤 피드로 더 똑똑하게,
+
더 깊이 있게 팬 활동을 즐기세요.
+
+ 
+ 좋아하는 만큼
+
+ 
+ 
+ + 덕질은 쉽게 +
+ +
+ 아티스트에게 내 마음을 전하고 싶을 때,
+
+ 가장 먼저 떠오르는 방법이 되어드릴게요.
+
내 크레딧
+
+ {credit.toLocaleString()}
+ + 투표하는 데 1000 크레딧이 소모됩니다. +
+
+ 
+
+ )}
+ {idol.fancam && (
+
+ 
+
+ )}
+ 
+ 
+
+ {Number(donation.targetDonation).toLocaleString()}
+
+