Skip to content

[REFACTOR] MediaUpload, ImageGallery 컴포넌트 사용성개선 #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yougyung merged 5 commits into from
Oct 19, 2025
Merged

[REFACTOR] MediaUpload, ImageGallery 컴포넌트 사용성개선 #82

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e371ca8
fix: overflow 넘침 현상 수정
yougyung Oct 14, 2025
7da803b
style: cursor-pointer 적용
yougyung Oct 14, 2025
f2cbe6f
style: dot 크기 및 간격 수정
yougyung Oct 14, 2025
fdcbad2
fix: controlled 방식으로 변경
yougyung Oct 18, 2025
b9d343f
fix: build
yougyung Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions src/shared/ui/ImageGallery/ImageGallery.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function ImageGalleryContent({ className }: { className?: string }) {
</>
)}
</Flex>
<Flex justifyContent="center" className="mt-2">
<Flex justifyContent="center" className="mt-3">
<ImageGalleryDots />
</Flex>
</Flex>
Expand All @@ -62,7 +62,7 @@ function ImageGalleryContent({ className }: { className?: string }) {
function ImageGalleryDots() {
const { images, current, goToIndex } = useImageGallery();
return (
<Flex alignItems="center" className="gap-2">
<Flex alignItems="center" className="gap-2 md:gap-2.5">
{images.map((_, index) => {
const isActive = index === current;
return (
Expand All @@ -71,7 +71,10 @@ function ImageGalleryDots() {
type="button"
aria-label={`Image ${index + 1}`}
onClick={() => goToIndex(index)}
className={cn('h-2 w-2 rounded-full', isActive ? 'bg-primary-300' : 'bg-gray-200')}
className={cn(
'h-2 w-2 cursor-pointer rounded-full md:h-2.5 md:w-2.5',
isActive ? 'bg-primary-300' : 'bg-gray-200'
)}
/>
);
})}
Expand All @@ -93,7 +96,7 @@ function ImageGalleryArrow({ direction }: ImageGalleryArrowProps) {
type="button"
onClick={onClick}
className={cn(
'absolute top-1/2 z-10 -translate-y-1/2 rounded-full bg-white/75 p-1 shadow-sm transition-opacity hover:bg-white md:p-1.5',
'absolute top-1/2 z-10 -translate-y-1/2 cursor-pointer rounded-full bg-white/75 p-1 shadow-sm transition-opacity hover:bg-white md:p-1.5',
isPrev ? 'left-4' : 'right-4',
isHidden && 'hidden'
)}
Expand Down
2 changes: 1 addition & 1 deletion src/shared/ui/MediaUpload/MediaUpload.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export function MediaUpload({
};

return (
<div className="max-h-[500px] w-full">
<div className="max-h-[500px] w-full overflow-auto">
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Oct 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick | 🔵 Trivial

세로 스크롤만 필요하다면 overflow-y-auto 사용을 권장합니다.

overflow-auto는 가로/세로 양방향 스크롤을 활성화합니다. 의도한 것이 세로 스크롤만이라면 overflow-y-auto가 더 정확한 선택입니다.

다음 diff를 적용하여 세로 스크롤만 활성화하세요:

-    <div className="max-h-[500px] w-full overflow-auto">
+    <div className="max-h-[500px] w-full overflow-y-auto">
📝 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
<div className="max-h-[500px] w-full overflow-auto">
<div className="max-h-[500px] w-full overflow-y-auto">
🤖 Prompt for AI Agents 
In src/shared/ui/MediaUpload/MediaUpload.tsx around line 120, the div currently
uses overflow-auto which enables both horizontal and vertical scrolling; replace
it with overflow-y-auto to allow only vertical scrolling (keep the existing
max-h-[500px] and w-full intact) so horizontal scroll is prevented while
preserving vertical overflow behavior.

<Flex justifyContent="between">
<Body1 className="text-gray-400">{topAffix}</Body1>
<RefreshButton handleReset={handleReset} isSelected={isSelected} />
Expand Down