[Feature] 이미지 대체텍스트 렌더링 기능 추가 #57
Conversation
ShipFriend0516
commented
Aug 29, 2025
ShipFriend0516
commented
- 이미지 Alt 태그를 이미지 밑에 띄워서 설명을 할 수 있는 기능 추가
- 본문 내 이미지의 너비를 부모 요소의 기존 100%에서 90%로 제한
- 글 작성시 div 태그로 이미지를 감싸는 경우 최대 너비를 50%로 제한 할 수 있는 기능 추가
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds image alternative text rendering functionality to display alt text below images, along with responsive image sizing improvements. The changes enhance accessibility and provide better visual control over image display in post content.
- Image alt text is now displayed as a description below images when available
- Image width reduced from 100% to 90% of parent container for better layout
- Added special handling for nested div images with 50% max-width and override for zoomBox images
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| app/globals.css | Adds CSS rules for image width restrictions and alt text description styling |
| app/entities/post/detail/PostBody.tsx | Implements alt text extraction and rendering functionality |
| app/entities/common/Overlay/Overlay.tsx | Adds configurable maxWidth prop for overlay sizing |
| app/entities/common/Overlay/Image/ImageZoomOverlayContainer.tsx | Updates image zoom container styling for better responsiveness |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| } | ||
| } | ||
|
|
||
| return null; |
There was a problem hiding this comment.
This function always returns null but is used in a visitor pattern where it should return the node or undefined. The return value should be 'node' or the function should return void.
| return null; |
| > | ||
| <div className="animate-popUp container bg-opacity-90 text-overlay rounded-lg mx-auto max-w-2xl"> | ||
| <div | ||
| className={`animate-popUp container bg-opacity-90 text-overlay rounded-lg mx-auto ${isMaxWidthTypeNumber ? `max-w-[${maxWidth}px]` : `max-w-${maxWidth}`}`} |
There was a problem hiding this comment.
Dynamic class name construction with template literals can lead to CSS injection vulnerabilities. Consider using a predefined map of allowed maxWidth values or sanitizing the input.
| article.post .post-body div > div.zoomBox img { | ||
| max-width: 100%; | ||
| } |
There was a problem hiding this comment.
The CSS selector 'div > div.zoomBox img' is overly specific and tightly coupled to the HTML structure. Consider using a single class selector like '.zoomBox img' for better maintainability.
| article.post .post-body div > div.zoomBox img { | |
| max-width: 100%; | |
| } |
