Prompt 컴포넌트 리팩토링 및 배경 이미지 오류, Storybook 이미지 오류 수정#59
Conversation
nijesmik
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the Prompt component by converting it from a class-based React component to a functional component, fixes background image sizing issues, and corrects Storybook image paths. The changes move the fullscreen prompt to a centralized location and improve the ImageBox component's implementation by using native <img> elements instead of CSS background images.
Key Changes:
- Refactored FullscreenPrompt from class component with portal to functional component with CSS media queries
- Fixed background image sizing by adding
backgroundSize: 'cover'to body styles - Updated Storybook image paths from absolute (
/images/...) to relative (./images/...)
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/prompt/index.tsx | New functional component implementation of FullscreenPrompt |
| src/components/prompt/index.css.ts | New styles with media query-based responsive behavior |
| src/pages/landing/FullScreenPrompt.tsx | Removed old class-based component file |
| src/pages/landing/index.css.ts | Removed prompt-related styles (moved to component) |
| src/pages/landing/layout.tsx | Removed local FullscreenPrompt usage |
| src/app/index.tsx | Added centralized FullscreenPrompt at app level |
| src/components/frame/with-buttons/index.tsx | Removed duplicate FullscreenPrompt usage |
| src/components/image-box/index.tsx | Refactored to use <img> element instead of CSS background |
| src/components/image-box/index.css.ts | Updated styles to support new img-based implementation |
| src/styles/main.css.ts | Added backgroundSize: 'cover' to fix background image display |
| src/styles/sprinkles.css.ts | Added aspectRatio: 'square' utility |
| src/constants/screen.ts | New file defining device dimension constants |
| src/components/frame/constants.ts | Refactored to use screen dimension constants |
| index.html | Removed unused #prompt portal div |
| *.stories.tsx | Updated image paths from /images/ to ./images/ for Storybook compatibility |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| })} | ||
| > | ||
| {children} | ||
| <img className={styles.image} src={imgSrc} alt={alt} /> |
There was a problem hiding this comment.
The alt prop is optional but no default value is provided. When alt is undefined, screen readers will announce the image filename, which may not be meaningful. Consider providing a default empty string for decorative images: alt={alt ?? ''}.
| <img className={styles.image} src={imgSrc} alt={alt} /> | |
| <img className={styles.image} src={imgSrc} alt={alt ?? ''} /> |
2 participants
작업 내용