feat: 모임방 상세페이지#51
Conversation
This reverts commit 55859c4.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. Walkthrough이 변경사항은 그룹 상세 페이지 및 책 검색 페이지 신설, 그룹 카드 컴포넌트의 추천 스타일 추가, 전역 타이포그래피 토큰 확장, 장르별 배경 이미지 유틸리티 추가, 라우트 구조 개선, 그리고 일부 스타일을 전역 토큰 사용으로 통일하는 작업을 포함합니다. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Router
participant GroupDetailPage
participant MockData
participant GroupCard
User->>Router: "group/detail" 경로 접근
Router->>GroupDetailPage: GroupDetail 컴포넌트 렌더링
GroupDetailPage->>MockData: mockGroupDetail 데이터 로딩
GroupDetailPage->>GroupCard: 추천 그룹 리스트 렌더링 (isRecommend=true)
User->>GroupDetailPage: 뒤로가기, 참여하기 등 UI 인터랙션
sequenceDiagram
participant User
participant Router
participant SearchBookPage
participant MockData
User->>Router: "searchBook" 경로 접근
Router->>SearchBookPage: SearchBook 컴포넌트 렌더링
SearchBookPage->>MockData: 책 및 피드 mock 데이터 로딩
User->>SearchBookPage: 필터 변경, 소개 더보기, 글쓰기 등 UI 인터랙션
Estimated code review effort3 (~45분) Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (7)
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
♻️ Duplicate comments (2)
src/pages/groupDetail/GroupDetail.tsx (2)
87-87: 동일한 문제: IconButton의 alt 속성87번째 줄에서도 동일한
alt속성 사용 문제가 발생합니다.
108-108: 동일한 문제: IconButton의 alt 속성108번째 줄에서도 동일한
alt속성 사용 문제가 발생합니다.
🧹 Nitpick comments (6)
src/utils/getBackgroundImageByGenre.ts (1)
7-22: 타입 안전성과 유지보수성 개선을 고려해보세요함수 로직은 올바르지만 다음 개선사항을 고려해보시기 바랍니다:
- 장르 문자열을 상수나 enum으로 정의하여 타입 안전성 확보
- 함수 매개변수에 더 구체적인 타입 정의
다음과 같이 개선할 수 있습니다:
+export const GENRES = { + LITERATURE: '문학', + SOCIAL_SCIENCE: '사회과학', + SCIENCE_IT: '과학•IT', + ART: '예술', + HUMANITIES: '인문학' +} as const; + +export type Genre = typeof GENRES[keyof typeof GENRES]; + -export const getBackgroundImageByGenre = (genre: string): string => { +export const getBackgroundImageByGenre = (genre: Genre): string => { switch (genre) { - case '문학': + case GENRES.LITERATURE: return literatureBackground; // ... 나머지 케이스들도 동일하게 수정src/pages/index.tsx (1)
21-21: 라우팅 구조가 개선되었지만 동적 라우팅 고려가 필요합니다라우팅 구조가
group/prefix로 일관성 있게 정리되었고 새로운 GroupDetail 컴포넌트가 적절히 추가되었습니다.그룹 상세 페이지의 경우 특정 그룹 ID를 위한 동적 라우팅을 고려해보시기 바랍니다:
- <Route path="group/detail" element={<GroupDetail />} /> + <Route path="group/detail/:groupId" element={<GroupDetail />} />이렇게 하면 URL에서 그룹 ID를 추출하여 해당 그룹의 실제 데이터를 로드할 수 있습니다.
Also applies to: 34-36
src/mocks/groupDetail.mock.ts (1)
1-53: 목 데이터 구조가 잘 설계되었습니다그룹 상세 페이지에 필요한 모든 데이터가 포함된 포괄적인 목 데이터입니다. 숫자형 ID 사용이 인터페이스 변경사항과 일치합니다.
다음 개선사항을 고려해보시기 바랍니다:
- 추천 그룹 데이터 다양성: 현재 추천 그룹들이 동일한 데이터를 사용하고 있습니다
- 이미지 URL 안정성: 외부 이미지 URL 대신 로컬 에셋 사용 고려
recommendations: [ { id: 1, - title: '방제목입니다다 방 제목입...', + title: '클래식 문학 모임', participants: 22, maximumParticipants: 30, - deadLine: 3, + deadLine: 5, }, { id: 2, - title: '방제목입니다다 방 제목입...', + title: '현대 소설 읽기', participants: 18, maximumParticipants: 25, - deadLine: 3, + deadLine: 7, },src/pages/groupDetail/GroupDetail.tsx (1)
58-58: 빈 핸들러 함수 구현 필요
handleMoreButton함수가 비어있습니다. 이 함수가 의도적으로 비워둔 것인지 확인하고, 향후 구현이 필요한 경우 TODO 주석을 추가하는 것을 고려해보세요.src/pages/groupDetail/GroupDetail.styled.ts (1)
202-205: 가로 스크롤 접근성 고려
GroupCardBox에서 가로 스크롤을 사용하고 있는데, 터치 디바이스와 키보드 접근성을 고려한 추가 스타일링이 필요할 수 있습니다.export const GroupCardBox = styled.div` display: flex; overflow-x: auto; padding: 0 20px; gap: 20px; + scroll-behavior: smooth; + &::-webkit-scrollbar { + height: 4px; + } + &::-webkit-scrollbar-thumb { + background: ${colors.grey[300]}; + border-radius: 2px; + } `;src/components/group/GroupCard.tsx (1)
93-121: 사용되지 않는 isRecommend 매개변수
Participant,RecruitingDeadline,OngoingDeadline컴포넌트들이isRecommendprop을 받고 있지만 실제로는 사용하지 않고 있습니다. 이는 불필요한 prop이거나 향후 사용 예정인 것으로 보입니다.만약 향후 사용 계획이 없다면 해당 prop들을 제거하는 것을 고려해보세요:
- const Participant = styled.div<{ isRecommend: boolean }>` + const Participant = styled.div`또는 향후 사용 예정이라면 TODO 주석을 추가해주세요.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
src/assets/genre/ScienceITBackground.svgis excluded by!**/*.svgsrc/assets/genre/artBackground.svgis excluded by!**/*.svgsrc/assets/genre/humanityBackground.svgis excluded by!**/*.svgsrc/assets/genre/literatureBackground.svgis excluded by!**/*.svgsrc/assets/genre/socialScienceBackground.svgis excluded by!**/*.svgsrc/assets/group/calendar.svgis excluded by!**/*.svgsrc/assets/group/lock.svgis excluded by!**/*.svg
📒 Files selected for processing (8)
src/components/group/GroupCard.tsx(4 hunks)src/components/group/MyGroupBox.tsx(1 hunks)src/mocks/groupDetail.mock.ts(1 hunks)src/pages/groupDetail/GroupDetail.styled.ts(1 hunks)src/pages/groupDetail/GroupDetail.tsx(1 hunks)src/pages/index.tsx(2 hunks)src/styles/global/global.ts(2 hunks)src/utils/getBackgroundImageByGenre.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/pages/groupDetail/GroupDetail.styled.ts (2)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)src/utils/getBackgroundImageByGenre.ts (1)
getBackgroundImageByGenre(7-22)
src/components/group/GroupCard.tsx (1)
src/styles/global/global.ts (2)
colors(4-53)typography(56-77)
🔇 Additional comments (3)
src/styles/global/global.ts (1)
62-62: 새로운 폰트 크기 토큰 추가가 적절합니다
'2xs': '11px'폰트 크기 토큰과 해당 CSS 커스텀 속성이 기존 패턴을 따라 일관성 있게 추가되었습니다. 추천 그룹 카드의 작은 텍스트 스타일링에 유용할 것으로 보입니다.Also applies to: 187-187
src/pages/groupDetail/GroupDetail.tsx (1)
79-79: IconButton은 styled.img로 구현되어 있어altprop을 지원합니다
IconButton이 Emotion의styled.img로 정의되어 있어<img>의 모든 표준 속성(예:src,alt,width,height등)을 그대로 사용할 수 있습니다. 따라서altprop을 전달해도 문제가 없습니다.Likely an incorrect or invalid review comment.
src/components/group/GroupCard.tsx (1)
28-35: 의도된 텍스트 사용 확인됨
RecruitingDeadline컴포넌트는 모집 마감 시점을,OngoingDeadline컴포넌트는 진행 종료 시점을 나타내므로 각각모집 마감/종료라는 표현을 다르게 사용하는 것이 올바른 동작입니다. 변경이 필요 없습니다.
|
|
||
| export interface Group { | ||
| id: string; | ||
| id: number; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
인터페이스 변경사항이 일관성 있게 적용되었는지 확인이 필요합니다
Group 인터페이스의 id 속성 타입이 string에서 number로 변경되었습니다. 이는 중대한 변경사항으로 다른 컴포넌트들에서 일관성 있게 적용되었는지 확인이 필요합니다.
다음 스크립트로 Group 인터페이스 사용처를 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash
# Description: Group 인터페이스와 id 속성 사용처 확인
# Group 인터페이스를 import하거나 사용하는 파일들 검색
echo "=== Group 인터페이스 import 사용처 ==="
rg -A 3 "import.*Group.*from" --type ts --type tsx
echo -e "\n=== group.id 사용처 확인 ==="
rg -A 2 -B 2 "\.id" --type ts --type tsx | grep -A 2 -B 2 "group\|Group"
echo -e "\n=== 숫자 ID vs 문자열 ID 사용 패턴 ==="
rg -A 1 "id:\s*[0-9]" --type ts --type tsx
rg -A 1 "id:\s*['\"]" --type ts --type tsxLength of output: 540
다음 스크립트로 .ts/.tsx 파일에 대해 직접 확장자를 지정하여 Group 인터페이스 정의, import, 및 id 사용처를 재검증해보겠습니다.
🏁 Script executed:
#!/bin/bash
echo "=== Group 인터페이스 정의 ==="
rg -n "interface Group" -g "*.ts" -g "*.tsx"
echo -e "\n=== Group 인터페이스 import ==="
rg -n "import.*Group" -g "*.ts" -g "*.tsx"
echo -e "\n=== group.id 사용처 ==="
rg -n "\.id\b" -g "*.ts" -g "*.tsx"
echo -e "\n=== 객체 리터럴 id 패턴 (숫자 vs 문자열) ==="
rg -n "id:\s*[0-9]" -g "*.ts" -g "*.tsx"
rg -n "id:\s*['\"]" -g "*.ts" -g "*.tsx"Length of output: 8701
Group 인터페이스 id: number 타입과 하드코딩된 문자열 ID 불일치—숫자 리터럴로 수정 필요
아래 파일들에서 Group 인터페이스의 id를 숫자 타입으로 변경했지만, 여전히 문자열('1', '2'…)로 하드코딩된 곳이 발견되었습니다. id: number에 맞춰 각 리터럴을 숫자로 변경해주세요.
• src/pages/group/Group.tsx
• src/constants/today-constants.ts
• src/components/search/GroupSearchResult.tsx
• src/components/group/MyGroupModal.tsx
• src/components/group/CompletedGroupModal.tsx
• src/components/feed/MyFollower.tsx
| rgba(0, 0, 0, 0) 0%, | ||
| var(--color-view-viewfield_background_black, #121212) 100% | ||
| ); | ||
| backdrop-filter: blur(0px); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
backdrop-filter 사용 시 브라우저 지원 확인
backdrop-filter: blur(0px)는 비교적 새로운 CSS 속성으로 일부 브라우저에서 지원되지 않을 수 있습니다. 폴백 스타일을 고려하거나 지원 여부를 확인해주세요.
🌐 Web query:
backdrop-filter CSS property browser support and fallback options
💡 Result:
The backdrop-filter CSS property allows you to apply graphical effects like blurring or color shifting to the area behind an element, enabling effects such as the "frosted glass" look. However, browser support for this property varies, and providing fallbacks is essential for ensuring a consistent user experience across different browsers.
Browser Support:
As of July 2025, backdrop-filter is supported in the following browsers:
- Chrome: Supported since version 76.
- Safari: Supported since version 9 with the
-webkit-prefix; unprefixed support introduced in Safari 18. - Edge: Supported since version 17.
- Firefox: Supported since version 103.
- Opera: Supported since version 64.
Notably, Internet Explorer does not support backdrop-filter. (caniuse.com)
Fallback Strategies:
To ensure your design remains functional in browsers that do not support backdrop-filter, consider the following approaches:
-
Feature Queries:
Use CSS@supportsto apply styles conditionally based on browser support:.frosted { background: rgba(255, 255, 255, 0.9); /* Default background */ } @supports (backdrop-filter: none) { .frosted { background: rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); } }
In this example, browsers that support
backdrop-filterwill apply the blur effect, while others will use a solid background. (blog.logrocket.com) -
JavaScript Feature Detection:
Utilize JavaScript to detect support and adjust styles accordingly:if ('backdropFilter' in document.body.style) { // Apply styles using backdrop-filter } else { // Apply fallback styles }
This method allows for dynamic adjustments based on feature availability. (namastedev.com)
-
Graceful Degradation:
Design your elements to function without thebackdrop-filtereffect, ensuring that the content remains accessible and visually appealing even without the effect.
Performance Considerations:
Be mindful that backdrop-filter can impact performance, especially on less powerful devices. To optimize:
- Limit the use of
backdrop-filterto essential elements. - Test your design across various devices to ensure smooth performance.
- Consider using the
will-changeproperty to inform the browser of upcoming changes, allowing for optimizations.
By implementing these strategies, you can create visually engaging designs that provide a consistent experience across different browsers and devices.
Citations:
- 1: https://caniuse.com/backdrop-filter?utm_source=openai
- 2: https://blog.logrocket.com/new-in-chrome-76/?utm_source=openai
- 3: https://namastedev.com/blog/using-css-backdrop-filter-for-ui-effects/?utm_source=openai
backdrop-filter 지원 브라우저 및 폴백 처리 검토가 필요합니다
현재 src/pages/groupDetail/GroupDetail.styled.ts 파일 44라인에 설정된
backdrop-filter: blur(0px);속성은 주요 브라우저(Chrome 76+, Safari 9/18+, Edge 17+, Firefox 103+, Opera 64+)에서만 지원되며, Internet Explorer 등에서는 동작하지 않습니다. 아래 방식을 고려해 폴백(fallback)과 성능 최적화를 추가해주세요.
• 브라우저 지원 현황 요약
– 지원: Chrome 76+, Safari(–webkit–)9+, Safari 18+, Edge 17+, Firefox 103+, Opera 64+
– 미지원: Internet Explorer
• CSS Feature Query (@supports) 활용 예시
.header {
background: rgba(255,255,255,0.9);
}
@supports (backdrop-filter: none) {
.header {
background: rgba(255,255,255,0.3);
backdrop-filter: blur(8px);
}
}• JavaScript로 지원 감지 후 스타일 적용
if ('backdropFilter' in document.body.style) {
element.style.backdropFilter = 'blur(8px)';
} else {
element.style.background = 'rgba(255,255,255,0.9)';
}• 성능 최적화
– 불필요한 요소에 과도하게 사용하지 않기
– will-change: backdrop-filter;로 브라우저 렌더링 힌트 제공
– 저사양 디바이스 테스트를 통해 퍼포먼스 확인
🤖 Prompt for AI Agents
In src/pages/groupDetail/GroupDetail.styled.ts at line 44, the backdrop-filter
CSS property is used without fallback or browser support handling. To fix this,
implement a CSS feature query using @supports to apply backdrop-filter only if
supported, and provide a solid background fallback for unsupported browsers like
Internet Explorer. Additionally, consider adding will-change: backdrop-filter
for performance optimization and avoid applying the effect excessively.
Optionally, use JavaScript to detect support and apply styles dynamically if
needed.
| </Header> | ||
| <BannerSection> | ||
| <GroupTitle> | ||
| {title} {isPrivate && <img src={lockIcon} alt="자물쇠 아이콘"></img>} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
이미지 alt 속성 개선 필요
<img> 태그의 alt 속성이 누락되어 있습니다. 접근성을 위해 적절한 alt 텍스트를 추가해주세요.
- {title} {isPrivate && <img src={lockIcon} alt="자물쇠 아이콘"></img>}
+ {title} {isPrivate && <img src={lockIcon} alt="비공개 그룹"></img>}📝 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.
| {title} {isPrivate && <img src={lockIcon} alt="자물쇠 아이콘"></img>} | |
| {title} {isPrivate && <img src={lockIcon} alt="비공개 그룹"></img>} |
🤖 Prompt for AI Agents
In src/pages/groupDetail/GroupDetail.tsx at line 69, the <img> tag for the lock
icon is missing an alt attribute, which is important for accessibility. Add a
meaningful alt attribute to the <img> tag, such as alt="자물쇠 아이콘", to describe
the image content for screen readers.
| {recommendations.map(group => ( | ||
| <GroupCard | ||
| key={group.id} | ||
| group={group} | ||
| isOngoing={true} | ||
| isRecommend={true} | ||
| type={'modal'} | ||
| /> | ||
| ))} |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
하드코딩된 props 값 검토 필요
GroupCard 컴포넌트에서 isOngoing={true}와 type={'modal'}이 하드코딩되어 있습니다. 이 값들이 추천 그룹에 항상 적절한지 검토가 필요합니다.
🏁 Script executed:
#!/bin/bash
# GroupCard 컴포넌트의 props 인터페이스 확인
ast-grep --pattern 'interface Props {
$$$
isOngoing?: $_
type?: $_
$$$
}'
# mockGroupDetail에서 recommendations 데이터 구조 확인
rg -A 10 "recommendations.*:" src/mocks/groupDetail.mock.tsLength of output: 425
아래 스크립트를 통해 GroupCard 컴포넌트 파일을 찾아 Props 인터페이스와 기본값 설정을 확인해 주세요.
🏁 Script executed:
#!/bin/bash
# 1) GroupCard 컴포넌트가 정의된 파일 찾기
echo "=== GroupCard 컴포넌트가 정의된 파일 ==="
rg -l "GroupCard" -g "src/**/*.{tsx,ts}"
# 2) 각 파일에서 Props 인터페이스, isOngoing/type 사용 여부, defaultProps 확인
for f in $(rg -l "GroupCard" -g "src/**/*.{tsx,ts}"); do
echo ""
echo "===== 파일: $f ====="
rg -n "interface Props" $f || true
rg -n "isOngoing" $f || true
rg -n "type\?" $f || true
rg -n "defaultProps" $f || true
doneLength of output: 4960
recommendations 리스트에서 isOngoing/type 값을 하드코딩하지 않고 동적으로 계산하도록 수정 필요
추천 그룹이 항상 ‘진행 중’이거나 ‘modal’ 유형으로만 보여진다고 가정하기보다, 다음과 같이 실제 데이터/렌더링 컨텍스트에 따라 값을 넘겨주세요:
• src/pages/groupDetail/GroupDetail.tsx (약 128행)
- <GroupCard
- key={group.id}
- group={group}
- isOngoing={true}
- isRecommend={true}
- type={'modal'}
- />
+ <GroupCard
+ key={group.id}
+ group={group}
+ // 예: 마감일(deadLine)이 남아 있으면 진행 중으로 간주
+ isOngoing={group.deadLine > 0}
+ isRecommend={true}
+ // 실제 모달 내에 렌더링되는 경우에만 'modal' 타입으로 설정
+ type={/* isModalContext ? 'modal' : undefined */}
+ />isOngoing은group.deadLine > 0등으로 계산type은 렌더링 위치(Modal 여부)에 따라 선택적으로 지정, 기본('main') 생략 가능
위와 같이 수정해 주세요.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In src/pages/groupDetail/GroupDetail.tsx around lines 124 to 132, the isOngoing
and type props for GroupCard are hardcoded. Modify isOngoing to be dynamically
calculated based on group.deadLine > 0, and set type conditionally depending on
the rendering context (e.g., 'modal' if in a modal, otherwise omit or use 'main'
as default). This ensures the component reflects actual data and context instead
of fixed values.
|
2xs 추가 감사합니다~ 앞으로 그거 사용하게쑵니당! 고생하셨습니다! |
2 participants
#️⃣연관된 이슈
[UI] 모임방 상세 정보 페이지 #37
📝작업 내용
모임방 상세 정보 페이지를 개발했습니다.
스크린샷 (선택)
💬리뷰 요구사항(선택)
global에 11px = 2xs로 추가해두었습니다.
기존에 있던 11px은 모두 변경해두었으니 앞으로는 2xs 사용부탁드립니다!
Summary by CodeRabbit
신규 기능
버그 수정
스타일
기타