From 35533f3234d6060cff1c6872c71a587b4a8d737a Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 14 Jul 2025 14:53:53 +0900 Subject: [PATCH 1/2] Add github start count spinner --- apps/landing/public/spinner.svg | 5 +++ apps/landing/src/app/StarButton.css | 9 ++++++ apps/landing/src/app/StarButton.tsx | 49 ++++++++++++++++++++++++----- apps/landing/src/app/markdown.css | 2 +- 4 files changed, 57 insertions(+), 8 deletions(-) create mode 100644 apps/landing/public/spinner.svg create mode 100644 apps/landing/src/app/StarButton.css diff --git a/apps/landing/public/spinner.svg b/apps/landing/public/spinner.svg new file mode 100644 index 00000000..654d4a89 --- /dev/null +++ b/apps/landing/public/spinner.svg @@ -0,0 +1,5 @@ + +
 + + + diff --git a/apps/landing/src/app/StarButton.css b/apps/landing/src/app/StarButton.css new file mode 100644 index 00000000..23331d25 --- /dev/null +++ b/apps/landing/src/app/StarButton.css @@ -0,0 +1,9 @@ +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + diff --git a/apps/landing/src/app/StarButton.tsx b/apps/landing/src/app/StarButton.tsx index f3eb6ed1..c52596fd 100644 --- a/apps/landing/src/app/StarButton.tsx +++ b/apps/landing/src/app/StarButton.tsx @@ -1,10 +1,36 @@ +'use client' + +import './StarButton.css' + import { Center, css, Flex, Image, Text } from '@devup-ui/react' import Link from 'next/link' +import { useEffect, useState } from 'react' + +export default function StarButton() { + const [starCount, setStarCount] = useState(null) -export default async function StarButton() { - const res = await fetch('https://api.github.com/repos/dev-five-git/devup-ui') - const data = await res.json() - const starCount = data.stargazers_count + useEffect(() => { + const abortController = new AbortController() + const fetchStarCount = async () => { + try { + const res = await fetch( + 'https://api.github.com/repos/dev-five-git/devup-ui', + { + signal: abortController.signal, + }, + ) + const data = await res.json() + setStarCount(data.stargazers_count) + } catch (error) { + console.error(error) + } + } + fetchStarCount() + + return () => { + abortController.abort() + } + }, []) return ( - - {starCount} - + {starCount === null ? ( + Loading + ) : ( + + {starCount} + + )} diff --git a/apps/landing/src/app/markdown.css b/apps/landing/src/app/markdown.css index 76722b3e..4cf3eb56 100644 --- a/apps/landing/src/app/markdown.css +++ b/apps/landing/src/app/markdown.css @@ -1,4 +1,4 @@ -@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); +@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css); table { border-collapse: collapse; From 5a0e47ea6c53ecf8120c681712d0557e1b6c6f67 Mon Sep 17 00:00:00 2001 From: Hanbin Cho Date: Mon, 14 Jul 2025 15:41:35 +0900 Subject: [PATCH 2/2] Fix error handling --- apps/landing/src/app/StarButton.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/landing/src/app/StarButton.tsx b/apps/landing/src/app/StarButton.tsx index c52596fd..71f6dee7 100644 --- a/apps/landing/src/app/StarButton.tsx +++ b/apps/landing/src/app/StarButton.tsx @@ -13,16 +13,17 @@ export default function StarButton() { const abortController = new AbortController() const fetchStarCount = async () => { try { - const res = await fetch( + const data = await fetch( 'https://api.github.com/repos/dev-five-git/devup-ui', { signal: abortController.signal, }, - ) - const data = await res.json() + ).then((res) => res.json()) setStarCount(data.stargazers_count) } catch (error) { console.error(error) + } finally { + setStarCount((prev) => (typeof prev === 'number' ? prev : -1)) } } fetchStarCount()