Skip to content

[FEAT] 챌린지 페이지 퍼블리싱#26

Open
Head-ddy wants to merge 8 commits into
developfrom
feat/24-challenge
Open

[FEAT] 챌린지 페이지 퍼블리싱#26
Head-ddy wants to merge 8 commits into
developfrom
feat/24-challenge

Conversation

@Head-ddy

Copy link
Copy Markdown
Contributor

🔑 이슈 번호

closes #24

✒ 진행한 작업

  • 챌린지 페이지 및 상세/인증 라우트 추가
  • 챌린지 공통 UI 컴포넌트 분리
  • 챌린지 UI용 스토리북 코드 추가

💡 생겼던 문제 및 해결법

1️⃣ 요약

  • 문제:
  • 해결:

📢 아쉬운 부분 및 개선점

  • ...

📚 개발에 참고한 자료 및 포인트

  • ...

📸 스크린샷

  • ...

@Head-ddy Head-ddy self-assigned this Apr 23, 2026
@Head-ddy Head-ddy linked an issue Apr 23, 2026 that may be closed by this pull request
1 task
@vercel

vercel Bot commented Apr 23, 2026

Copy link
Copy Markdown
Contributor

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
frontend-next Ready Ready Preview, Comment Apr 23, 2026 4:24pm

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment on lines 20 to 25
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' },
];

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

navItems 배열은 컴포넌트의 상태나 props에 의존하지 않는 정적인 데이터입니다. 컴포넌트 내부에서 정의하면 매 렌더링마다 새로운 배열 객체가 생성되므로, 컴포넌트 외부로 이동하여 정의하는 것이 성능 최적화에 도움이 됩니다.

Comment on lines +38 to +42
<img
src={previewUrl}
alt="업로드한 인증 사진"
className="h-full w-full object-cover"
/>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Next.js 환경에서는 이미지 최적화를 위해 img 태그 대신 next/imageImage 컴포넌트 사용을 권장합니다. Blob URL의 경우 unoptimized 속성을 사용하여 표시할 수 있습니다.

            <Image
              src={previewUrl}
              alt="업로드한 인증 사진"
              fill
              className="object-cover"
              unoptimized
            />

}

return Array.from(
container.querySelectorAll<HTMLElement>('[data-carousel-slide="true"]'),

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

React에서 querySelectorAll을 사용하여 DOM 요소에 직접 접근하는 방식은 선언적 프로그래밍 모델에 어긋나며 유지보수가 어렵습니다. useRef를 배열 형태로 관리하거나 슬라이드 너비를 기반으로 계산하는 로직으로 대체하는 것을 권장합니다.

Comment thread src/features/challenges/components/ChallengeClientPage.tsx Outdated
@github-actions

Copy link
Copy Markdown

Head-ddy and others added 2 commits April 24, 2026 00:19
…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>
@github-actions

Copy link
Copy Markdown

@github-actions

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] 챌린지 페이지 퍼블리싱

2 participants