[Refactor/#557]campagin image

[hamxxn]

Summary

close: #557

Tasks

priority 속성 추가

첫 화면에서 가장 크게 표시되는 요소가 캠페인 썸네일 이미지입니다.
하지만, Next.js Image 컴포넌트의 기본 동작이 loading =’lazy’ 이기 때문에, LCP 대상 이미지가 지연 로딩 되면서 첫 화면 로딩이 늦어지는 문제가 있습니다.

   //이전
    <Image
	    fill
	    className="object-cover"
	    src={campaignImageUrl || fallbackImage}
	    alt={`${campaignName}${card('campaignThumbnailImage')}`}
	    fetchPriority="high"
	    loading="eager"
    />

    //이후
    <Image
	    fill
	    priority={priority}
	    className="object-cover"
	    src={campaignImageUrl || fallbackImage}
	    alt={`${campaignName}${card('campaignThumbnailImage')}`}
    />

priority는 Next.js Image 컴포넌트의 속성으로, 페이지가 로드될 때 해당 이미지를 “우선순위가 높은 이미지”로 간주해 즉시 로드하도록 지시하는데,
모든 이미지에 priority 를 주게 되면 네트워크가 분산되어 전체 성능이 떨어질 수 있기 때문에 상단 이미지 3개에 조건부로 priority 을 주도록 하였어요

formats 추가

//next.js.config
formats: ['image/avif', 'image/webp']

정적 이미지의 경우 브러우저가 해당 포멧을 지원할 경우 webp 또는 avif 포멧으로 자동 변환되도록 설정을 추가했습니다.

결과 : LCP 10.5 s → 2.3 s 로 개선

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 주요 캠페인의 이미지 로딩 성능을 최적화했습니다.
  • AVIF 및 WebP 형식을 포함한 최신 이미지 포맷 지원이 활성화되었습니다.

• 스타일

  • 폼 섹션의 필수 표시기 색상이 업데이트되었습니다.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

LCP 개선을 위해 캠프인 그리드의 첫 3개 항목에 이미지 우선순위 로딩을 적용하고, 이미지 포맷을 AVIF/WebP로 최적화하며, 필수 표시 스타일을 업데이트했습니다.

Changes

Cohort / File(s)	변경 요약
이미지 우선순위 로딩 구현 apps/web/components/campaign/campaign-grid.tsx, apps/web/components/card/card-main.tsx	캠프인 그리드에서 map 콜백에 인덱스를 전달하고, 첫 3개 항목(index < 3)에 대해 CardMain의 priority prop을 true로 설정. CardMain 컴포넌트에서 priority 파라미터를 추가하고 Next.js Image 컴포넌트에 전달하여 LCP 최적화
이미지 포맷 최적화 apps/web/next.config.js	images 설정에 formats 배열 추가하여 AVIF 및 WebP 이미지 포맷 지원
필수 표시 스타일 업데이트 apps/web/components/forms/FormSection.tsx	필수 표시기(required indicator) 배경색을 hex 색상(bg-[#EF4351])에서 Tailwind 색상 클래스(bg-red)로 변경

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

• 주의 대상 영역:
  • card-main.tsx의 Image 컴포넌트에서 priority prop이 올바르게 전달되는지 확인
  • 캠프인 그리드의 인덱스 기반 우선순위 로직이 의도대로 작동하는지 검증
  • next.config.js의 포맷 설정이 원격 이미지에 올바르게 적용되는지 확인

Possibly related PRs

• Feat(web): 브랜드 마이페이지 - 캠페인 생성 페이지 수정 #435: FormSection 컴포넌트의 필수 표시기 기능 추가 관련 (같은 컴포넌트의 렌더링 로직 수정)
• Feat(web): 새 캠페인 생성 페이지 조건 수정 #470: FormSection 컴포넌트의 필수 표시기 동작 수정 (required prop 설정 변경)
• Feat(web): 브랜드 마이페이지 - 내 캠페인 API 연동 #385: 캠프인 그리드 컴포넌트의 캠프인 항목 렌더링 로직 변경 (카드 매핑 방식 수정)

Suggested labels

✨ Feature, ⚡ Performance

Suggested reviewers

• ljh0608
• kojesung
• heeyyeon
• Jeong-Ag

Poem

🐰 세 개의 카드는 먼저 달려가고,
이미지는 빠르게 웹픽과 에이브이에프로,
LCP는 개선되고 사용자는 웃네요!
필수 표시는 빨갛게 빛나고,
성능의 길을 함께 나아갑니다! ✨

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	FormSection.tsx의 배경색 변경(bg-[#EF4351] → bg-red)은 이슈 #557의 LCP 개선 목표와 무관한 변경입니다. 이 변경은 스코프 외의 스타일 개선으로 보입니다.	FormSection.tsx의 배경색 변경 사항을 별도의 PR로 분리하거나, 이 변경이 LCP 개선과 관련있는지 명확히 설명해주세요.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Title check	❓ Inconclusive	제목이 PR의 주요 변경 사항을 명확하게 설명하지 못하고 있습니다. '[Refactor/#557]campagin image'는 오타(campagin → campaign)를 포함하고 있으며, 구체적인 변경 내용(이미지 우선순위, 포맷 지원 추가)을 제대로 전달하지 못합니다.	제목을 더 명확하게 수정하세요. 예: 'Refactor: campaign image LCP 개선을 위한 priority 속성 추가 및 image formats 설정' 또는 'Refactor: Next.js Image priority 속성 추가 및 WebP/AVIF 포맷 지원'

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	PR 설명이 템플릿 구조를 따르고 있으며, Summary, Tasks, Screenshot을 포함하고 있습니다. 변경 사항에 대한 상세한 설명과 측정된 성과(LCP 10.5s → 2.3s)가 포함되어 있습니다.
Linked Issues check	✅ Passed	PR 변경 사항들이 연결된 이슈 #557의 'LCP 개선' 목표를 충족합니다. Image priority 속성 추가, 포맷 설정 추가, 결과 측정이 모두 목표 달성을 위한 코드 변경으로 구현되었습니다.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/#557/campagin-image

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b791b64 and 094bbb1.

📒 Files selected for processing (4)

• apps/web/components/campaign/campaign-grid.tsx (1 hunks)
• apps/web/components/card/card-main.tsx (3 hunks)
• apps/web/components/forms/FormSection.tsx (1 hunks)
• apps/web/next.config.js (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/components/campaign/campaign-grid.tsx (1)

apps/web/components/card/card-main.tsx (1)

• CardMain (27-107)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build-and-test

🔇 Additional comments (4)

apps/web/components/forms/FormSection.tsx (1)

25-25: PR 요약과 일치하지 않는 변경사항입니다.

이 색상 클래스 변경(bg-[#EF4351]에서 bg-red로)은 PR의 명시된 목표(LCP 개선)와 관련이 없습니다. 이 변경사항이 의도적인 것인지 확인해 주세요. 별도의 PR로 분리하거나 PR 설명에 추가하는 것을 권장합니다.

apps/web/components/campaign/campaign-grid.tsx (1)

26-28: 첫 3개 이미지에 대한 우선순위 로딩이 올바르게 구현되었습니다!

index < 3 조건을 사용하여 그리드의 첫 3개 캠페인 이미지에 우선순위를 부여하는 것은 LCP 개선을 위한 효과적인 접근 방식입니다. 이는 일반적으로 뷰포트에 처음 표시되는 콘텐츠(above-the-fold)에 해당하므로 사용자 경험이 개선됩니다.

apps/web/components/card/card-main.tsx (1)

24-24: 우선순위 prop이 올바르게 구현되었습니다!

priority prop이 올바르게 추가되고 Next.js Image 컴포넌트로 전달되었습니다:

• 선택적 boolean 타입으로 적절하게 정의됨
• 기본값 false로 opt-in 방식 채택
• Next.js Image의 priority 속성을 활용하여 LCP 개선

이는 Next.js의 이미지 최적화 권장사항을 따르는 정확한 구현입니다.

Also applies to: 39-39, 60-60

apps/web/next.config.js (1)

18-18: Image format configuration is correct for Next.js 15.

The formats: ['image/avif', 'image/webp'] syntax is valid and properly configured. Next.js will select the first matching format based on the browser's Accept header, falling back to WebP or the original format if needed. The AVIF format will improve LCP performance, though be aware that maintaining both formats increases encode time and storage requirements.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🛠️ 빌드 결과

빌드 성공 🎉

[ljh0608]

좋네요 서비스 들여다보면서 주도적으로 개선하는 모습이 보기 좋습니다!
좋은 접근이라고 생각하고 below the fold, Above the fold Image 에 대한 개념도 살펴보시면 좋을 것 같아요~