[FEAT] 챌린지 페이지 퍼블리싱#26
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![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
This pull request implements the core challenge features, including list, detail, and verification routes, supported by a variety of new components such as a hero carousel, state modals, and an image uploader. Key feedback includes addressing a potential memory leak with Blob URLs in the uploader, optimizing performance by moving static navigation items outside the component, and adhering to React and Next.js best practices by replacing direct DOM queries with refs and using the optimized Image component. Additionally, it is recommended to decompose the large client page into smaller, more manageable files to improve maintainability.
| const navItems: NavItem[] = [ | ||
| { | ||
| label: '홈', | ||
| href: '/main', | ||
| iconType: 'home', | ||
| }, | ||
| { | ||
| label: '저장한 꿀팁', | ||
| href: '/saved-tips', | ||
| iconType: 'savedTips', | ||
| }, | ||
| { | ||
| label: '챌린지', | ||
| href: '/challenges', | ||
| iconType: 'challenge', | ||
| }, | ||
| { | ||
| label: '마이페이지', | ||
| href: '/mypage', | ||
| iconType: 'mypage', | ||
| }, | ||
| { label: '홈', href: '/main', iconType: 'home' }, | ||
| { label: '저장한 꿀팁', href: '/saved-tips', iconType: 'savedTips' }, | ||
| { label: '챌린지', href: '/challenges', iconType: 'challenge' }, | ||
| { label: '마이페이지', href: '/mypage', iconType: 'mypage' }, | ||
| ]; |
There was a problem hiding this comment.
navItems 배열은 컴포넌트의 상태나 props에 의존하지 않는 정적인 데이터입니다. 컴포넌트 내부에서 정의하면 매 렌더링마다 새로운 배열 객체가 생성되므로, 컴포넌트 외부로 이동하여 정의하는 것이 성능 최적화에 도움이 됩니다.
| <img | ||
| src={previewUrl} | ||
| alt="업로드한 인증 사진" | ||
| className="h-full w-full object-cover" | ||
| /> |
There was a problem hiding this comment.
Next.js 환경에서는 이미지 최적화를 위해 img 태그 대신 next/image의 Image 컴포넌트 사용을 권장합니다. Blob URL의 경우 unoptimized 속성을 사용하여 표시할 수 있습니다.
<Image
src={previewUrl}
alt="업로드한 인증 사진"
fill
className="object-cover"
unoptimized
/>
| } | ||
|
|
||
| return Array.from( | ||
| container.querySelectorAll<HTMLElement>('[data-carousel-slide="true"]'), |
There was a problem hiding this comment.
React에서 querySelectorAll을 사용하여 DOM 요소에 직접 접근하는 방식은 선언적 프로그래밍 모델에 어긋나며 유지보수가 어렵습니다. useRef를 배열 형태로 관리하거나 슬라이드 너비를 기반으로 계산하는 로직으로 대체하는 것을 권장합니다.
…llengeVerifyUploader.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
…llengeVerifyUploader.tsx Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2 participants
🔑 이슈 번호
closes #24
✒ 진행한 작업
💡 생겼던 문제 및 해결법
1️⃣ 요약
📢 아쉬운 부분 및 개선점
📚 개발에 참고한 자료 및 포인트
📸 스크린샷