Skip to content

Commit

Permalink
fix/feat: response structural revision
Browse files Browse the repository at this point in the history
  • Loading branch information
@jun-brro
jun-brro committed May 21, 2024
1 parent e7c3322 commit 5def91b
Showing 1 changed file with 83 additions and 62 deletions.
145 changes: 83 additions & 62 deletions src/Pages/ResultPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ const ResultPage: React.FC = () => {
const { taskId, fileName } = location.state || {};
const [searchResult, setSearchResult] = useState<any[]>([]);
const [recommendation, setRecommendation] = useState<string | null>(null);
const [overlayDescription, setOverlayDescription] = useState<string | null>(
null
);
const [error, setError] = useState<string | null>(null);
const navigate = useNavigate();
const isMobile = useMediaQuery({ query: "(max-width: 768px)" });
Expand Down Expand Up @@ -52,7 +55,6 @@ const ResultPage: React.FC = () => {
`https://ajtksbackend.p-e.kr/task/${taskId}`
);
const data = response.data;
console.log(data);

if (!data || !data.searchResult) {
setError("๊ฒฐ๊ณผ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.");
Expand All @@ -69,7 +71,7 @@ const ResultPage: React.FC = () => {
}));

setSearchResult(decodedResult);
setRecommendation(data.recommendation);
setRecommendation(decodeUnicode(data.recommendation));
} catch (error) {
console.error("Error fetching task status:", error);
setError("๊ฒฐ๊ณผ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ์ค‘ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.");
Expand All @@ -79,6 +81,14 @@ const ResultPage: React.FC = () => {
fetchResult();
}, [taskId]);

const handleAlbumClick = (description: string) => {
setOverlayDescription(description);
};

const handleOverlayClose = () => {
setOverlayDescription(null);
};

if (error) {
return (
<div className="flex items-center justify-center min-h-screen bg-red-100">
Expand Down Expand Up @@ -125,82 +135,93 @@ const ResultPage: React.FC = () => {
}`}
style={{ WebkitOverflowScrolling: "touch" }}
>
{searchResult.map((result, index) => (
<motion.div
key={index}
className="relative w-[220px] h-[320px] rounded-tl-[38px] overflow-hidden bg-white bg-opacity-60 shadow-md border border-white backdrop-blur-md flex-shrink-0"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
>
<div className="w-full h-[200px] bg-gray-300">
{result.albumArt ? (
<img
className="w-full h-full object-cover"
src={result.albumArt}
alt={`Album art for ${result.musicName}`}
/>
) : (
<div className="flex items-center justify-center h-full text-gray-500">
No Image
</div>
)}
</div>
<div className="p-2 flex flex-col justify-between h-[120px]">
<div
ref={(el) => (nameRefs.current[index] = el as HTMLDivElement)}
className={`relative ${
overflowStates.name[index] ? "flex overflow-x-hidden" : ""
}`}
>
{result.musicName.length >= 10 ? (
<Marquee>
<span className="text-black text-lg font-bold mx-4">
{result.musicName}
</span>
</Marquee>
{searchResult.map((result, index) =>
index === 0 ? null : (
<motion.div
key={index}
className="relative w-[220px] h-[320px] rounded-tl-[38px] overflow-hidden bg-white bg-opacity-60 shadow-md border border-white backdrop-blur-md flex-shrink-0 cursor-pointer"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
onClick={() => handleAlbumClick(result.description)}
>
<div className="w-full h-[200px] bg-gray-300">
{result.albumArt ? (
<img
className="w-full h-full object-cover"
src={result.albumArt}
alt={`Album art for ${result.musicName}`}
/>
) : (
<span className="text-black text-lg font-bold mx-4">
{result.musicName}
</span>
<div className="flex items-center justify-center h-full text-gray-500">
No Image
</div>
)}
</div>
<div
ref={(el) => (singerRefs.current[index] = el as HTMLDivElement)}
className={`relative ${
overflowStates.singer[index] ? "flex overflow-x-hidden" : ""
}`}
>
<div className="p-2 flex flex-col justify-between h-[120px]">
<div
className={`${
overflowStates.singer[index]
? "animate-marquee whitespace-nowrap"
: "truncate"
ref={(el) => (nameRefs.current[index] = el as HTMLDivElement)}
className={`relative ${
overflowStates.name[index] ? "flex overflow-x-hidden" : ""
}`}
>
<span className="text-gray-700 text-sm mx-4">
{result.singer}
</span>
{result.musicName.length >= 10 ? (
<Marquee>
<span className="text-black text-lg font-bold mx-4">
{result.musicName}
</span>
</Marquee>
) : (
<span className="text-black text-lg font-bold mx-4">
{result.musicName}
</span>
)}
</div>
<div
ref={(el) =>
(singerRefs.current[index] = el as HTMLDivElement)
}
className={`relative ${
overflowStates.singer[index] ? "flex overflow-x-hidden" : ""
}`}
>
<div
className={`${
overflowStates.singer[index]
? "animate-marquee whitespace-nowrap"
: "truncate"
}`}
>
<span className="text-gray-700 text-sm mx-4">
{result.singer}
</span>
</div>
</div>
</div>
</div>
</motion.div>
))}
</motion.div>
)
)}
</div>
<div className="relative z-10 mt-10 w-full max-w-4xl px-4">
<div
className="bg-black bg-opacity-80 text-white text-sm font-bold px-4 py-2 rounded-full"
style={{ fontFamily: "Inter" }}
>
์Œ์•… ์„ค๋ช… by MU-LLaMA
Music Description by MU-LLaMA
</div>
{recommendation && (
<div
className="mt-4 bg-gray-800 bg-opacity-80 text-white text-base font-normal px-6 py-4 rounded-lg"
style={{ fontFamily: "Inter" }}
<div
className="mt-4 bg-gray-800 bg-opacity-80 text-white text-base font-normal px-6 py-4 rounded-lg"
style={{ fontFamily: "Inter", whiteSpace: "pre-line" }}
>
<p>{overlayDescription || recommendation}</p>
</div>
{overlayDescription && (
<button
className="absolute top-0 right-0 m-4 text-white text-sm bg-red-600 rounded-full px-2 py-1"
onClick={handleOverlayClose}
>
<p>{recommendation}</p>
</div>
๋‹ซ๊ธฐ
</button>
)}
</div>
</div>
Expand Down

0 comments on commit 5def91b

Please sign in to comment.