✨Feat: 로딩 스피너 컴포넌트, 로딩화면 구현 #99
Conversation
Summary of ChangesHello @le2yunji, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 사용자 경험을 향상시키기 위해 새로운 로딩 스피너 컴포넌트를 도입하고, 이를 여러 핵심 페이지에 적용합니다. 이를 통해 사용자는 페이지 콘텐츠가 로드되는 동안 명확한 시각적 피드백을 받게 되며, 기존의 단순한 텍스트 기반 로딩 메시지를 대체하여 애플리케이션의 전반적인 반응성과 전문성을 높입니다. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 Pull Request는 로딩 스피너 컴포넌트를 추가하고 여러 페이지에 적용하여 사용자 경험을 개선하는 것을 목표로 합니다. 로딩 상태를 시각적으로 보여주는 것은 좋은 접근입니다. 하지만, 로딩 상태를 처리하는 로직에서 몇 가지 심각한 버그가 발견되었습니다. 특정 페이지에서는 무한 로딩에 빠질 수 있는 문제가 있고, 다른 페이지에서는 useEffect 내에서 JSX를 잘못 반환하여 오류를 발생시키는 코드가 있습니다. 이러한 문제들을 수정해야 안정적인 기능을 제공할 수 있습니다.
| useEffect(() => { | ||
| const checkAuth = () => { | ||
| const initializePage = async () => { | ||
| // 1. 로그인 체크 | ||
| const userId = localStorage.getItem('userId'); | ||
| if (!userId) { | ||
| router.push('/login'); | ||
| return; | ||
| } | ||
| }; | ||
| checkAuth(); | ||
| }, [router]); | ||
|
|
||
| // 가게 정보 불러오기 (originalHourlyPay 가져오기) | ||
| useEffect(() => { | ||
| const fetchShopData = async () => { | ||
| if (!shopId || typeof shopId !== 'string') return; | ||
| // 2. shopId 확인 | ||
| if (!shopId || typeof shopId !== 'string') { | ||
| return; | ||
| } | ||
|
|
||
| // 3. 가게 정보 불러오기 | ||
| try { | ||
| const shopRes = await shops.getShop(shopId); | ||
| if (shopRes?.item?.originalHourlyPay) { | ||
| setOriginalPay(shopRes.item.originalHourlyPay); | ||
| } | ||
| } catch (error) { | ||
| console.error('가게 정보 불러오기 실패:', error); | ||
| setErrorMessage('가게 정보를 불러오는데 실패했습니다.'); | ||
| setErrorModalOpen(true); | ||
| } finally { | ||
| setLoading(false); | ||
| } | ||
| }; | ||
|
|
||
| fetchShopData(); | ||
| }, [shopId]); | ||
| initializePage(); | ||
| }, [router, shopId]); |
There was a problem hiding this comment.
useEffect 내의 로직에 문제가 있어 페이지가 무한 로딩 상태에 빠질 수 있습니다. shopId가 router.query로부터 아직 제공되지 않았을 때 initializePage 함수가 return되면서 setLoading(false)가 호출되지 않기 때문입니다. 이로 인해 사용자는 계속 로딩 스피너만 보게 됩니다. router.isReady를 사용하여 라우터가 준비되었는지 확인하고, 준비되었음에도 shopId가 없는 경우에만 로딩을 중단하도록 로직을 수정해야 합니다.
useEffect(() => {
const initializePage = async () => {
// 1. 로그인 체크
const userId = localStorage.getItem('userId');
if (!userId) {
router.push('/login');
return;
}
// 2. shopId가 준비될 때까지 기다리거나, 없으면 로딩 종료
if (!shopId || typeof shopId !== 'string') {
// 라우터가 준비되었지만 shopId가 없는 경우, 로딩을 중단합니다.
if (router.isReady) {
setLoading(false);
}
return;
}
// 3. 가게 정보 불러오기
try {
const shopRes = await shops.getShop(shopId);
if (shopRes?.item?.originalHourlyPay) {
setOriginalPay(shopRes.item.originalHourlyPay);
}
} catch (error) {
console.error('가게 정보 불러오기 실패:', error);
setErrorMessage('가게 정보를 불러오는데 실패했습니다.');
setErrorModalOpen(true);
} finally {
setLoading(false);
}
};
initializePage();
}, [router, shopId]);
| const fetchNotice = async () => { | ||
| try { | ||
| setLoading(true); | ||
| if (loading) return <LoadingSpinner />; |
There was a problem hiding this comment.
useEffect 내부의 비동기 함수 fetchNotice에서 JSX 컴포넌트(LoadingSpinner)를 반환하고 있습니다. useEffect 내부에서 호출되는 함수는 렌더링을 위한 함수가 아니므로 JSX를 반환할 수 없으며, 이는 타입 에러를 발생시킵니다. 또한, 바로 앞 줄에서 setLoading(true)를 호출하고 있어 이 조건문은 항상 참이 됩니다. 로딩 상태에 따른 UI 분기는 컴포넌트의 최상위 return 문에서 처리해야 합니다. 이미 173번째 줄에서 올바르게 처리하고 있으므로, 이 줄은 삭제해야 합니다.
🎯 작업 내용
✅ 체크리스트
📸 스크린샷 (선택사항)
2025-12-02.8.52.40.mov
💬 추가 설명