Fix/#91 태그 UI 가로 스크롤 적용 및 SwipeableArea 세로 스크롤 이슈 해결 #92
Conversation
- placeName의 width가 flex-1 때문에 항상 requestDate와 동일한 width로 설정되어 수정
- 맛집리스트가 세로로 화면에 넘어갈 경우 스크롤되지 않음 방지
Walkthrough관리자 요청 상세 페이지에 재사용 가능한 Section 컴포넌트를 추가하고 Description에서 태그 렌더링을 제거했으며, Tags 컴포넌트를 분리했습니다. 또한 이미지 원본 패턴을 확장하고 웹/공통 UI의 레이아웃·오버플로우 관련 클래스들을 조정했습니다. Changes
Sequence Diagram(s)(해당 변경들로 인해 새로운 다중 컴포넌트 제어 흐름이 추가되거나 복잡한 상호작용이 도입되지 않아 시퀀스 다이어그램은 생략합니다.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
📜 Recent review detailsConfiguration used: Repository UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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: 3
🧹 Nitpick comments (1)
apps/web/app/_components/PlaceListItem/PlaceListItem.tsx (1)
49-49: 변경사항 승인 - 태그 영역 가로 스크롤 활성화
overflow-x-auto추가로 태그가 영역을 넘칠 때 가로 스크롤이 활성화되어 모든 태그를 자연스럽게 표시할 수 있습니다. Chip의text-nowrap과 함께 동작하여 의도한 대로 작동합니다.선택사항: 스크롤 UX 개선 제안
더 나은 사용자 경험을 위해 다음 개선사항들을 고려해볼 수 있습니다:
- <Flex className={'gap-1 overflow-x-auto'}> + <Flex className={'gap-1 overflow-x-auto scrollbar-hide snap-x snap-mandatory'}> {tags.map((tag) => ( - <Chip key={tag.id} icon={tag.iconKey} label={tag.name} /> + <Chip key={tag.id} icon={tag.iconKey} label={tag.name} className={'snap-start'} /> ))} </Flex>
scrollbar-hide: 스크롤바를 숨겨 더 깔끔한 UI 제공 (커스텀 Tailwind 유틸리티 필요)snap-x snap-mandatory+snap-start: 스크롤 시 태그가 자연스럽게 정렬되도록 개선현재 구현도 충분히 동작하므로, 이는 선택적 개선사항입니다.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
apps/admin/next.config.tsapps/admin/src/app/requests/[id]/RequestDetailPage.tsxapps/admin/src/app/requests/[id]/_components/Description/Description.tsxapps/admin/src/app/requests/[id]/_components/Location/Location.tsxapps/admin/src/app/requests/[id]/_components/Menus/Menus.tsxapps/admin/src/app/requests/[id]/_components/Section/Section.tsxapps/admin/src/app/requests/[id]/_components/Section/index.tsapps/admin/src/app/requests/[id]/_components/Tags/Tags.tsxapps/admin/src/app/requests/[id]/_components/Tags/index.tsapps/web/app/_components/PlaceListItem/PlaceListItem.tsxapps/web/app/categories/[id]/_components/SwipeableArea/SwipeableArea.tsxapps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsxpackages/ui/src/components/Chip/Chip.tsx
🧰 Additional context used
🧬 Code graph analysis (6)
apps/admin/src/app/requests/[id]/_components/Location/Location.tsx (3)
packages/ui/src/components/Icon/assets/icons/marker.tsx (1)
Marker(3-34)apps/web/app/places/[id]/_components/Location/Location.tsx (1)
location(6-21)apps/web/app/map/_components/Marker/Marker.tsx (2)
icon(36-66)position(11-28)
packages/ui/src/components/Chip/Chip.tsx (2)
packages/ui/src/components/Text/Text.tsx (1)
restProps(117-140)packages/ui/src/components/Text/Text.stories.tsx (1)
div(63-76)
apps/admin/src/app/requests/[id]/_components/Tags/index.ts (3)
apps/web/app/places/[id]/_components/Tags/Tags.tsx (2)
tag(11-13)Props(9-15)apps/web/app/places/new/_components/Step/Description/Tags.tsx (4)
Props(49-86)i(61-61)id(58-66)category(70-80)apps/web/app/requests/[id]/RequestDetailPage.tsx (1)
id(17-74)
apps/admin/src/app/requests/[id]/_components/Section/index.ts (2)
apps/web/app/_components/Section/Section.tsx (1)
Props(11-21)apps/web/app/requests/[id]/RequestDetailPage.tsx (1)
id(17-74)
apps/admin/src/app/requests/[id]/RequestDetailPage.tsx (6)
apps/admin/src/app/requests/[id]/_components/Section/Section.tsx (1)
Section(11-21)apps/admin/src/app/requests/[id]/_components/Location/Location.tsx (1)
Location(10-26)apps/admin/src/app/requests/[id]/_components/Menus/Menus.tsx (1)
Menus(11-62)apps/admin/src/app/requests/[id]/_components/Description/Description.tsx (1)
Description(8-14)apps/admin/src/app/requests/[id]/_components/Tags/Tags.tsx (1)
Tags(9-15)apps/admin/src/app/requests/[id]/_components/Tags/index.ts (1)
Tags(1-1)
apps/admin/src/app/requests/[id]/_components/Menus/Menus.tsx (2)
packages/ui/src/utils/cn.ts (1)
cn(19-21)apps/admin/src/app/requests/[id]/_components/Menus/Menu.tsx (1)
Menu(10-27)
🔇 Additional comments (12)
apps/web/app/categories/[id]/_components/SwipeableArea/SwipeableArea.tsx (1)
36-36: 변경사항이 PR 목표와 잘 일치합니다.
overflow-hidden을overflow-x-hidden으로 변경하여 가로 넘침은 방지하면서 세로 스크롤은 허용하는 것은 올바른 접근입니다. 이는drag='x'제약 조건과도 잘 맞습니다.다만, 실제로 세로 스크롤이 의도대로 동작하는지 확인해 주세요. 만약 스크롤이 작동하지 않는다면
overflow-y-auto를 명시적으로 추가해야 할 수 있습니다.🔎 세로 스크롤이 작동하지 않을 경우 적용할 수 있는 수정
- <div className='relative h-full w-full overflow-x-hidden px-8'> + <div className='relative h-full w-full overflow-x-hidden overflow-y-auto px-8'>packages/ui/src/components/Chip/Chip.tsx (1)
84-90: 변경사항 승인 - 텍스트 줄바꿈 방지 적용 완료
ui:text-nowrap클래스 추가로 Chip 라벨의 의도치 않은 줄바꿈이 방지되며, PlaceListItem의 가로 스크롤과 함께 동작하여 태그 UI가 개선됩니다. 구현이 정확하고 최소한의 변경으로 문제를 해결합니다.apps/web/app/requests/_components/PlaceListItem/PlaceListItem.tsx (1)
28-33: 아이콘 정렬 개선이 올바르게 적용되었습니다!두 가지 변경사항이 PR 목표를 정확히 달성합니다:
Line 29:
flex-1제거로placeName이 불필요하게 확장되는 문제를 해결했습니다.truncate클래스만 사용하여 긴 텍스트는 말줄임표로 처리됩니다.Line 32:
min-w-4.5추가로 아이콘이size={18}(18px)보다 작아지지 않도록 보장합니다. 이는 아이콘이 항상 의도한 크기를 유지하도록 합니다.이 변경사항들은
placeName의 width가requestDate와 동일해지던 문제를 효과적으로 수정합니다.apps/admin/src/app/requests/[id]/_components/Tags/index.ts (1)
1-1: LGTM!표준적인 배럴 export 패턴으로 적절하게 구현되었습니다.
apps/admin/src/app/requests/[id]/_components/Section/index.ts (1)
1-1: LGTM!표준적인 배럴 export 패턴으로 적절하게 구현되었습니다.
apps/admin/src/app/requests/[id]/RequestDetailPage.tsx (2)
16-20: LGTM!새로운 Section 래퍼와 리팩터링된 컴포넌트들의 import가 적절하게 추가되었습니다.
75-84: 훌륭한 리팩터링!Section 래퍼를 사용하여 UI 구조를 개선했습니다. 이제 admin과 web의 RequestDetailPage가 동일한 패턴을 따르며, 아이콘과 제목이 있는 일관된 섹션 구조를 제공합니다. Tags 컴포넌트를 별도로 분리한 것도 좋은 결정입니다.
apps/admin/src/app/requests/[id]/_components/Menus/Menus.tsx (2)
25-34: LGTM! 스크롤 영역 구현이 올바릅니다.
VerticalScrollArea를 직접 사용하고max-h-60과show-scrollbar클래스를 적용하여 메뉴 목록이 길어질 때 세로 스크롤이 정상적으로 동작하도록 개선했습니다.
51-53: 인덱스를 key로 사용하는 것이 이 경우에는 문제가 되지 않습니다.
Menu타입은name,price,isRecommended속성만 가지고 있으며 고유 식별자가 없습니다.recommendedMenu와unRecommendedMenu는 초기 데이터를isRecommended기준으로 한 번 분류한 후 변경되지 않는 정적 목록입니다. 동적 정렬이나 필터링이 없으므로 현재 코드는 문제없이 작동합니다.apps/admin/src/app/requests/[id]/_components/Section/Section.tsx (1)
1-21: LGTM! Section 컴포넌트 구조가 깔끔합니다.아이콘과 제목을 포함한 재사용 가능한 섹션 래퍼 컴포넌트가 잘 구현되었습니다. 시맨틱 HTML 요소(
section,h2)를 올바르게 사용하고 있으며, Props 타입도 명확하게 정의되어 있습니다.apps/admin/src/app/requests/[id]/_components/Tags/Tags.tsx (1)
9-15: LGTM! 태그 컴포넌트가 올바르게 구현되었습니다.태그를 매핑할 때
tag.id를 key로 사용하고 있어 안정적인 렌더링을 보장합니다.flex-wrap을 사용하여 태그가 자연스럽게 줄바꿈되도록 구현했습니다.apps/admin/src/app/requests/[id]/_components/Description/Description.tsx (1)
1-14: LGTM! 컴포넌트 리팩터링이 적절합니다.태그 관련 Props와 렌더링을 제거하고 설명 텍스트만 렌더링하도록 단순화했습니다.
whitespace-pre-wrap을 사용하여 설명 텍스트의 줄바꿈과 공백을 올바르게 보존합니다. 태그는 이제 전용Tags컴포넌트에서 처리되므로 관심사의 분리가 잘 이루어졌습니다.
| { | ||
| protocol: 'https', | ||
| hostname: process.env.NEXT_PUBLIC_API_URL_HOST || '', //테스트용 주소 | ||
| pathname: '/**', | ||
| }, |
There was a problem hiding this comment.
환경변수 미설정 시 빈 문자열 hostname 문제
process.env.NEXT_PUBLIC_API_URL_HOST가 설정되지 않은 경우 빈 문자열이 hostname으로 전달되어 Next.js 이미지 최적화가 실패하거나 예상치 못한 보안 문제가 발생할 수 있습니다.
🔎 제안하는 수정
환경변수가 설정된 경우에만 패턴 추가:
- {
- protocol: 'https',
- hostname: process.env.NEXT_PUBLIC_API_URL_HOST || '', //테스트용 주소
- pathname: '/**',
- },
+ ...(process.env.NEXT_PUBLIC_API_URL_HOST
+ ? [
+ {
+ protocol: 'https' as const,
+ hostname: process.env.NEXT_PUBLIC_API_URL_HOST,
+ pathname: '/**',
+ },
+ ]
+ : []),📝 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.
| { | |
| protocol: 'https', | |
| hostname: process.env.NEXT_PUBLIC_API_URL_HOST || '', //테스트용 주소 | |
| pathname: '/**', | |
| }, | |
| ...(process.env.NEXT_PUBLIC_API_URL_HOST | |
| ? [ | |
| { | |
| protocol: 'https' as const, | |
| hostname: process.env.NEXT_PUBLIC_API_URL_HOST, | |
| pathname: '/**', | |
| }, | |
| ] | |
| : []), |
🤖 Prompt for AI Agents
In apps/admin/next.config.ts around lines 43-47, do not pass an empty string as
hostname to Next.js image remotePatterns; instead build the remotePatterns array
dynamically and only push the { protocol: 'https', hostname:
process.env.NEXT_PUBLIC_API_URL_HOST, pathname: '/**' } entry when
process.env.NEXT_PUBLIC_API_URL_HOST is non-empty (truthy). Modify the config to
check the env var (e.g., if (process.env.NEXT_PUBLIC_API_URL_HOST)
remotePatterns.push(...)) so hostname is never an empty string and Next.js image
optimization/security issues are avoided.
#️⃣연관된 이슈
📝작업 내용
1. 태그 UI 디자인 개선
nowrap속성을 적용하여 텍스트 줄바꿈을 방지하고, 태그 영역에 가로 스크롤을 활성화하여 자연스럽게 보여지도록 개선했습니다.2. SwipeableArea 스크롤 속성 변경
overflow-hidden설정으로 인해 맛집 리스트가 화면 높이를 초과할 경우 세로 스크롤이 되지 않는 문제가 있었습니다.overflow-x-hidden으로 변경하여, 가로 방향의 넘침은 방지하면서 세로 방향(리스트) 스크롤은 정상 작동하도록 수정했습니다.스크린샷 (선택)
💬리뷰 요구사항(선택)
Summary by CodeRabbit
새로운 기능
UI/스타일
✏️ Tip: You can customize this high-level summary in your review settings.