feat: 메인 hero 반응형 수정(#250) - #251
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedPull request was closed or merged during review WalkthroughHeroSection 컴포넌트가 Next.js Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/features/main/HeroSection.tsx (3)
68-68: Tailwind 클래스 내 불필요한 공백
right-0뒤에 불필요한 공백이 있습니다. 기능에는 영향이 없지만 일관성을 위해 정리하는 것이 좋습니다.-<div className="absolute top-12 right-0 w-80 sm:w-110 z-20"> +<div className="absolute top-12 right-0 w-80 sm:w-110 z-20">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/main/HeroSection.tsx` at line 68, In the HeroSection component update the div with className string "absolute top-12 right-0 w-80 sm:w-110 z-20" to remove the extra space after "right-0" so the classes read "absolute top-12 right-0 w-80 sm:w-110 z-20"; locate the div in HeroSection.tsx (the element with className containing right-0) and trim the redundant whitespace for consistency.
59-66: 이미지 접근성 및 SEO 개선 권장두 Image 컴포넌트의
alt텍스트가 동일하게 "대시보드 이미지"로 설정되어 있습니다. 각 이미지가 서로 다른 내용을 보여준다면, 구체적이고 구별되는 alt 텍스트를 사용하는 것이 접근성과 SEO에 더 좋습니다.<Image src={HeroImage2} - alt="대시보드 이미지" + alt="PR 분석 코드 뷰어 화면" ... /> ... <Image src={HeroImage1} - alt="대시보드 이미지" + alt="PR 분석 결과 대시보드" ... />Also applies to: 70-75
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/main/HeroSection.tsx` around lines 59 - 66, The two Image components in the HeroSection component use the same alt text "대시보드 이미지"; update each Image's alt prop to be specific and descriptive (e.g., reference the actual visual content shown by HeroImage2 and the other HeroImage) so they are distinct for accessibility and SEO; locate the Image usages inside the HeroSection component (including the Image with src={HeroImage2} and the other Image around lines 70-75) and replace the duplicate alt values with meaningful, unique strings that accurately describe each image.
9-9: padding 클래스 중복 확인 필요
py-15와pb-30이 함께 사용되고 있습니다.py-*는 상하 padding을 동시에 설정하므로,pb-30이 하단 padding을 덮어쓰는 것이 의도된 동작인지 확인해 주세요.만약 상단 15, 하단 30이 의도라면 명시적으로 작성하는 것이 더 명확합니다:
-<section className="py-15 pb-30 md:py-32 lg:py-40 px-6"> +<section className="pt-15 pb-30 md:py-32 lg:py-40 px-6">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/main/HeroSection.tsx` at line 9, HeroSection 컴포넌트의 섹션에 py-15와 pb-30이 동시에 사용되어 하단 패딩이 덮어써지는지 모호하니 의도에 맞게 정리하세요: 상단과 하단을 각각 다르게 지정하려면 py-15를 제거하고 pt-15 pb-30으로 명시하거나(섹션 요소 또는 HeroSection 컴포넌트에서), 상하 동일 패딩이 목적이라면 pb-30을 제거하고 py-15만 남겨 중복을 제거하도록 수정하세요.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/features/main/HeroSection.tsx`:
- Around line 5-6: HeroSection.tsx currently imports images from the public
folder (HeroImage1, HeroImage2) which causes the TypeScript build error; remove
those imports and update the Image usage to reference the public images by URL
(e.g., src="/hero_1.png") or alternatively move the image files into the src
tree (e.g., src/assets/images) and import them there; if you keep the URL
approach, remove placeholder="blur" or provide a blurDataURL on the Image
component to avoid using blur with external/static URLs.
---
Nitpick comments:
In `@src/features/main/HeroSection.tsx`:
- Line 68: In the HeroSection component update the div with className string
"absolute top-12 right-0 w-80 sm:w-110 z-20" to remove the extra space after
"right-0" so the classes read "absolute top-12 right-0 w-80 sm:w-110 z-20";
locate the div in HeroSection.tsx (the element with className containing
right-0) and trim the redundant whitespace for consistency.
- Around line 59-66: The two Image components in the HeroSection component use
the same alt text "대시보드 이미지"; update each Image's alt prop to be specific and
descriptive (e.g., reference the actual visual content shown by HeroImage2 and
the other HeroImage) so they are distinct for accessibility and SEO; locate the
Image usages inside the HeroSection component (including the Image with
src={HeroImage2} and the other Image around lines 70-75) and replace the
duplicate alt values with meaningful, unique strings that accurately describe
each image.
- Line 9: HeroSection 컴포넌트의 섹션에 py-15와 pb-30이 동시에 사용되어 하단 패딩이 덮어써지는지 모호하니 의도에 맞게
정리하세요: 상단과 하단을 각각 다르게 지정하려면 py-15를 제거하고 pt-15 pb-30으로 명시하거나(섹션 요소 또는 HeroSection
컴포넌트에서), 상하 동일 패딩이 목적이라면 pb-30을 제거하고 py-15만 남겨 중복을 제거하도록 수정하세요.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ce08e278-3182-4a75-9452-a4ae86a73003
⛔ Files ignored due to path filters (4)
public/hero_1.pngis excluded by!**/*.pngpublic/hero_2.pngis excluded by!**/*.pngpublic/next.svgis excluded by!**/*.svgsrc/shared/assets/images/hero_1.pngis excluded by!**/*.png
📒 Files selected for processing (1)
src/features/main/HeroSection.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
src/features/main/HeroSection.tsx (1)
5-6:⚠️ Potential issue | 🟠 Major불완전한 CSS 클래스 및 이미지 임포트 패턴 수정 필요
두 가지 문제를 확인했습니다:
라인 10: 불완전한 Tailwind CSS 클래스 -
pb-뒤에 값이 누락되었습니다.pb-4,pb-6,pb-8등의 값을 지정해야 합니다.이미지 임포트 및 사용 패턴 - PNG 파일을 ES6 모듈로 직접 임포트하여
Image컴포넌트의src에 전달하는 방식은 Next.js에서 권장되지 않습니다. 또한placeholder="blur"를 사용하면서blurDataURL을 제공하지 않으면 런타임 오류가 발생합니다.프로젝트의 다른 곳에서는 public 폴더의 이미지를 문자열 경로로 참조하고 있습니다. 다음과 같이 수정하세요:
이미지 파일 제거 및 URL 경로 사용
-import HeroImage1 from '@/shared/assets/images/hero_1.png'; -import HeroImage2 from '@/shared/assets/images/hero_2.png';그리고 Image 컴포넌트에서:
<Image src="/hero_1.png" alt="대시보드 이미지" width={440} height={300} className="w-full h-auto" />주의: URL 경로 방식 사용 시
placeholder="blur"는 제거하거나 명시적으로blurDataURL을 제공해야 합니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/main/HeroSection.tsx` around lines 5 - 6, In HeroSection.tsx fix two issues: replace the incomplete Tailwind class `pb-` with a concrete value (e.g., `pb-4` or `pb-6`) on the element using it, and stop importing PNGs as ES modules (remove imports HeroImage1 and HeroImage2) and instead reference images by public URL strings in the Next.js Image components (set src="/hero_1.png" etc.), and if you keep placeholder="blur" supply a valid blurDataURL or remove the placeholder prop to avoid runtime errors.
🧹 Nitpick comments (1)
src/features/main/HeroSection.tsx (1)
60-76: 이미지 alt 속성 개선 권장두 이미지 모두 동일한 alt 텍스트("대시보드 이미지")를 사용하고 있습니다. 접근성과 SEO를 위해 각 이미지의 내용을 구체적으로 설명하는 고유한 alt 텍스트를 사용하는 것이 좋습니다.
♿ 접근성 개선을 위한 alt 텍스트 수정 예시
<Image src={HeroImage2} - alt="대시보드 이미지" + alt="PR 분석 대시보드 미리보기" placeholder="blur" className="w-full h-auto" /> ... <Image src={HeroImage1} - alt="대시보드 이미지" + alt="코드 리뷰 분석 결과 화면" placeholder="blur" className="w-full h-auto" />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/features/main/HeroSection.tsx` around lines 60 - 76, The two Image components rendering HeroImage1 and HeroImage2 both use the same alt text "대시보드 이미지"; update the alt attributes on the Image elements (the ones referencing HeroImage1 and HeroImage2 in HeroSection.tsx) to unique, descriptive strings that reflect each image's content (e.g., "앱 대시보드 개요" vs "상세 통계 모듈" or similar), ensuring they are concise and convey the image purpose for accessibility and SEO.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/features/main/HeroSection.tsx`:
- Line 10: In the HeroSection component there's an incomplete Tailwind class in
the section element's className ("pb-") which should be removed or replaced with
the intended padding value; edit the className string in HeroSection.tsx (the
<section className="py-15 pb- md:py-32 lg:py-40 px-6"> line) to either remove
"pb-" or change it to a valid Tailwind class such as "pb-8" or "pb-16" so the
CSS is valid and behaves as expected.
---
Duplicate comments:
In `@src/features/main/HeroSection.tsx`:
- Around line 5-6: In HeroSection.tsx fix two issues: replace the incomplete
Tailwind class `pb-` with a concrete value (e.g., `pb-4` or `pb-6`) on the
element using it, and stop importing PNGs as ES modules (remove imports
HeroImage1 and HeroImage2) and instead reference images by public URL strings in
the Next.js Image components (set src="/hero_1.png" etc.), and if you keep
placeholder="blur" supply a valid blurDataURL or remove the placeholder prop to
avoid runtime errors.
---
Nitpick comments:
In `@src/features/main/HeroSection.tsx`:
- Around line 60-76: The two Image components rendering HeroImage1 and
HeroImage2 both use the same alt text "대시보드 이미지"; update the alt attributes on
the Image elements (the ones referencing HeroImage1 and HeroImage2 in
HeroSection.tsx) to unique, descriptive strings that reflect each image's
content (e.g., "앱 대시보드 개요" vs "상세 통계 모듈" or similar), ensuring they are concise
and convey the image purpose for accessibility and SEO.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 25b9c654-2dad-4c27-8b55-778e7811faf4
⛔ Files ignored due to path filters (2)
src/shared/assets/images/hero_1.pngis excluded by!**/*.pngsrc/shared/assets/images/hero_2.pngis excluded by!**/*.png
📒 Files selected for processing (1)
src/features/main/HeroSection.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 PR 개요
🔍 관련 이슈
🔧 변경 유형
해당하는 항목에 체크해주세요.
✨ 변경 사항
ex/api/login) 추가📝 PR 제목 규칙
PR 제목은 커밋 컨벤션을 따라야 합니다.
ex) feat: 롤링페이퍼 작성 기능 추가 (#15)
✅ 체크리스트
📸 스크린샷 (선택)
🤝 기타 참고 사항
Summary by CodeRabbit
스타일
Chores