Merged
Conversation
Walkthrough백엔드에서 추가된 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
🚥 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 docstrings
🧪 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
🤖 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/components/CampusInfo/index.tsx`:
- Around line 44-51: The component currently renders the <img> whenever iconUrl
is truthy so a broken URL shows a broken image; update the CampusInfo component
to track image load state (e.g., a local state like hasImageError or
imageLoaded) and render the fallback when the image fails to load: keep the
existing <img className={styles['icon-image']} src={iconUrl} ... /> but add an
onError handler that sets hasImageError true (and optionally onLoad to mark
success), and change the conditional to show the <span
className={styles['icon-fallback']}>{name.slice(0,1)}</span> when !iconUrl ||
hasImageError so the fallback appears on broken URLs. Ensure aria-hidden/alt
handling remains consistent.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: bf2dc2f8-136e-4380-947c-4247eca98cec
📒 Files selected for processing (4)
src/api/coopshop/entity.tssrc/components/CampusInfo/CampusInfo.module.scsssrc/components/CampusInfo/index.tsxsrc/pages/campusinfo/index.tsx
Comment on lines
+44
to
+51
| {iconUrl ? ( | ||
| // NOTE: 백엔드가 내려주는 소형 반복 아이콘은 호스트가 고정되지 않을 수 있어 <img>를 유지합니다. | ||
| // eslint-disable-next-line @next/next/no-img-element | ||
| <img className={styles['icon-image']} src={iconUrl} alt="" aria-hidden="true" decoding="async" /> | ||
| ) : ( | ||
| <span className={styles['icon-fallback']} aria-hidden="true"> | ||
| {name.slice(0, 1)} | ||
| </span> |
There was a problem hiding this comment.
이미지 로드 실패 시 폴백이 동작하지 않습니다.
Line 44-48은 iconUrl 존재 여부만 확인해서 렌더링하기 때문에, URL이 깨졌을 때 icon-fallback으로 전환되지 않고 깨진 이미지가 노출됩니다.
수정 예시
+import { useState } from 'react';
import { cn } from '@bcsdlab/utils';
import { useSuspenseQuery } from '@tanstack/react-query';
import { coopshopQueries } from 'api/coopshop/queries';
import styles from './CampusInfo.module.scss';
function ShopIcon({ iconUrl, name }: ShopIconProps) {
+ const [isImageError, setIsImageError] = useState(false);
+ const shouldRenderImage = Boolean(iconUrl) && !isImageError;
+
return (
<div className={styles['icon-wrapper']}>
- {iconUrl ? (
+ {shouldRenderImage ? (
// NOTE: 백엔드가 내려주는 소형 반복 아이콘은 호스트가 고정되지 않을 수 있어 <img>를 유지합니다.
// eslint-disable-next-line `@next/next/no-img-element`
- <img className={styles['icon-image']} src={iconUrl} alt="" aria-hidden="true" decoding="async" />
+ <img
+ className={styles['icon-image']}
+ src={iconUrl!}
+ alt=""
+ aria-hidden="true"
+ decoding="async"
+ onError={() => setIsImageError(true)}
+ />
) : (
<span className={styles['icon-fallback']} aria-hidden="true">
{name.slice(0, 1)}
</span>
)}
</div>
);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {iconUrl ? ( | |
| // NOTE: 백엔드가 내려주는 소형 반복 아이콘은 호스트가 고정되지 않을 수 있어 <img>를 유지합니다. | |
| // eslint-disable-next-line @next/next/no-img-element | |
| <img className={styles['icon-image']} src={iconUrl} alt="" aria-hidden="true" decoding="async" /> | |
| ) : ( | |
| <span className={styles['icon-fallback']} aria-hidden="true"> | |
| {name.slice(0, 1)} | |
| </span> | |
| import { useState } from 'react'; | |
| import { cn } from '@bcsdlab/utils'; | |
| import { useSuspenseQuery } from '@tanstack/react-query'; | |
| import { coopshopQueries } from 'api/coopshop/queries'; | |
| import styles from './CampusInfo.module.scss'; | |
| function ShopIcon({ iconUrl, name }: ShopIconProps) { | |
| const [isImageError, setIsImageError] = useState(false); | |
| const shouldRenderImage = Boolean(iconUrl) && !isImageError; | |
| return ( | |
| <div className={styles['icon-wrapper']}> | |
| {shouldRenderImage ? ( | |
| // NOTE: 백엔드가 내려주는 소형 반복 아이콘은 호스트가 고정되지 않을 수 있어 <img>를 유지합니다. | |
| // eslint-disable-next-line `@next/next/no-img-element` | |
| <img | |
| className={styles['icon-image']} | |
| src={iconUrl!} | |
| alt="" | |
| aria-hidden="true" | |
| decoding="async" | |
| onError={() => setIsImageError(true)} | |
| /> | |
| ) : ( | |
| <span className={styles['icon-fallback']} aria-hidden="true"> | |
| {name.slice(0, 1)} | |
| </span> | |
| )} | |
| </div> | |
| ); | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/CampusInfo/index.tsx` around lines 44 - 51, The component
currently renders the <img> whenever iconUrl is truthy so a broken URL shows a
broken image; update the CampusInfo component to track image load state (e.g., a
local state like hasImageError or imageLoaded) and render the fallback when the
image fails to load: keep the existing <img className={styles['icon-image']}
src={iconUrl} ... /> but add an onError handler that sets hasImageError true
(and optionally onLoad to mark success), and change the conditional to show the
<span className={styles['icon-fallback']}>{name.slice(0,1)}</span> when !iconUrl
|| hasImageError so the fallback appears on broken URLs. Ensure aria-hidden/alt
handling remains consistent.
dooohun
reviewed
Apr 28, 2026
Contributor
dooohun
left a comment
dooohun
left a comment
There was a problem hiding this comment.
수고하셨습니다. 리뷰 작성한 것만 수정하면 될 거 같습니다.
Comment on lines
+47
to
+48
| <img className={styles['icon-image']} src={iconUrl} alt="" aria-hidden="true" decoding="async" /> | ||
| ) : ( |
Contributor
There was a problem hiding this comment.
name이 있으니까 alt에 넣으면 좋을 거 같아요.
Co-authored-by: Copilot <copilot@github.com>
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/CampusInfo/index.tsx (1)
44-51:⚠️ Potential issue | 🟡 Minor이미지 로드 실패 시 폴백이 동작하지 않습니다.
Line 44-48은
iconUrl존재만 검사하므로, URL이 깨진 경우에도<img>가 유지되어 fallback이 보이지 않습니다.onError상태를 추가해!iconUrl || hasImageError일 때 fallback을 렌더링해주세요.수정 예시
+import { useState } from 'react'; import { cn } from '@bcsdlab/utils'; import { useSuspenseQuery } from '@tanstack/react-query'; import { coopshopQueries } from 'api/coopshop/queries'; import styles from './CampusInfo.module.scss'; function ShopIcon({ iconUrl, name }: ShopIconProps) { + const [hasImageError, setHasImageError] = useState(false); + const shouldRenderImage = Boolean(iconUrl) && !hasImageError; + return ( <div className={styles['icon-wrapper']}> - {iconUrl ? ( + {shouldRenderImage ? ( // NOTE: 백엔드가 내려주는 소형 반복 아이콘은 호스트가 고정되지 않을 수 있어 <img>를 유지합니다. // eslint-disable-next-line `@next/next/no-img-element` - <img className={styles['icon-image']} src={iconUrl} alt={name} decoding="async" /> + <img + className={styles['icon-image']} + src={iconUrl!} + alt={name} + decoding="async" + onError={() => setHasImageError(true)} + /> ) : ( <span className={styles['icon-fallback']} aria-hidden="true"> {name.slice(0, 1)} </span> )} </div> ); }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/CampusInfo/index.tsx` around lines 44 - 51, The CampusInfo component currently only checks iconUrl so broken image URLs still render the <img> and hide the fallback; introduce a local state (e.g., hasImageError via useState) in the CampusInfo component and add an onError handler on the <img> that sets hasImageError to true, then change the render condition to show the fallback when (!iconUrl || hasImageError). Ensure the handler and state are named clearly (e.g., hasImageError, setHasImageError, handleImageError) and that the fallback span (styles['icon-fallback']) is rendered with name.slice(0,1) when the image is absent/errored.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/CampusInfo/index.tsx`:
- Around line 44-51: The CampusInfo component currently only checks iconUrl so
broken image URLs still render the <img> and hide the fallback; introduce a
local state (e.g., hasImageError via useState) in the CampusInfo component and
add an onError handler on the <img> that sets hasImageError to true, then change
the render condition to show the fallback when (!iconUrl || hasImageError).
Ensure the handler and state are named clearly (e.g., hasImageError,
setHasImageError, handleImageError) and that the fallback span
(styles['icon-fallback']) is rendered with name.slice(0,1) when the image is
absent/errored.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: d508a8ca-b93d-4193-b8aa-1f1f5b9dfc66
📒 Files selected for processing (1)
src/components/CampusInfo/index.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
3 participants
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.
What is this PR? 🔍
Changes 📝
✔️ Please check if the PR fulfills these requirements
developbranch unconditionally?main?yarn lintSummary by CodeRabbit
New Features
Style