✨ add search-groups-with-name api connection #383
Conversation
📝 Walkthrough""" Walkthrough이 풀 리퀘스트는 그룹 검색 기능을 추가하고 관련된 환경 설정을 업데이트합니다. Changes
Sequence DiagramsequenceDiagram
participant User
participant SearchPage
participant GroupAPI
participant NoticeAPI
User->>SearchPage: 검색어 입력
SearchPage->>GroupAPI: 그룹 검색 요청
GroupAPI-->>SearchPage: 그룹 검색 결과
SearchPage->>NoticeAPI: 공지 검색 요청
NoticeAPI-->>SearchPage: 공지 검색 결과
SearchPage->>User: 그룹 및 공지 결과 표시
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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: 2
🧹 Nitpick comments (2)
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx (1)
70-73: 접근성 개선이 필요합니다.툴팁 구현 시 aria-label을 추가하여 스크린 리더 사용자의 접근성을 개선해야 합니다.
다음과 같이 수정하는 것을 제안합니다:
-<VerifiedBadge className="peer aspect-square h-6 w-6" /> +<VerifiedBadge + className="peer aspect-square h-6 w-6" + aria-label={t('zabo.group.verifiedDescription')} +/>src/app/i18next/locales/en/translation.json (1)
149-149: 인증 계정 설명의 표현을 개선하면 좋겠습니다."Official account verified by ziggle team"이라는 표현은 다소 직접적입니다. 더 자연스러운 표현을 제안드립니다.
- "verifiedDescription": "Official account verified by ziggle team" + "verifiedDescription": "This account has been verified by the Ziggle team"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/assets/icons/badge-check.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
.env(1 hunks)src/api/group/search-groups-with-name.ts(1 hunks)src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx(2 hunks)src/app/i18next/locales/en/translation.json(1 hunks)src/app/i18next/locales/ko/translation.json(1 hunks)
🔇 Additional comments (4)
.env (1)
6-6: 환경 설정이 적절히 구성되었습니다.그룹 API URL이 스테이징 환경에 맞게 올바르게 설정되었습니다.
src/app/i18next/locales/ko/translation.json (1)
139-142: 번역이 명확하고 일관성 있게 추가되었습니다.그룹 관련 번역이 한국어 사용자에게 적절한 표현으로 구현되었습니다.
src/app/i18next/locales/en/translation.json (2)
147-149: 번역 키가 적절하게 구성되어 있습니다.그룹 관련 번역이 "zabo" 섹션 내에 잘 구성되어 있으며, 키 이름과 구조가 일관성 있게 작성되었습니다.
148-148: "group" 번역이 간단명료합니다.단순한 "Group" 번역은 적절하며, 다른 언어 버전과의 일관성도 유지될 것으로 보입니다.
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx (1)
27-35: 에러 처리를 개선하면 좋을 것 같습니다.현재 에러 처리가 구현되어 있지만, 더 구체적인 에러 처리가 필요해 보입니다.
다음과 같이 개선하는 것을 제안합니다:
const notices = await getAllNotices({ ...props, lang: lng, offset: pageAsNumber * props.limit, - }).catch(() => ({ list: [], total: 0 })); + }).catch((error) => { + console.error('공지사항 조회 중 오류 발생:', error); + return { list: [], total: 0 }; + }); const groups = props.search ? await searchGroupWithName(props.search, lng) - .catch(() => []) + .catch((error) => { + console.error('그룹 검색 중 오류 발생:', error); + return []; + }) : [];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx(2 hunks)src/app/i18next/locales/en/translation.json(1 hunks)src/app/i18next/locales/ko/translation.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/i18next/locales/en/translation.json
- src/app/i18next/locales/ko/translation.json
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: preview-deploy
🔇 Additional comments (3)
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx (3)
1-16: LGTM - 잘 구성된 imports 섹션입니다!필요한 컴포넌트들이 잘 정리되어 있고 Next.js 컨벤션을 잘 따르고 있습니다.
52-56: Image 컴포넌트 속성이 여전히 누락되었습니다.이전 리뷰에서 지적된 Image 컴포넌트 이슈가 아직 해결되지 않았습니다.
84-96: 분석 및 사용자 피드백이 잘 구현되어 있습니다!공지사항 결과 표시 부분이 다음과 같은 점에서 잘 구현되었습니다:
- 클릭 분석을 위한 Analytics 컴포넌트 통합
- 검색 결과가 없을 때의 사용자 피드백 처리
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Analytics 컴포넌트가 conflict되어 확인해보니, 주명님이 11/13에 event="search_result_click" 부분을, 도현님이 11/16에 event={LogEvents.noticeClick}라고 업데이트하셨어요!
일단 후자가 최신이라 이를 따르도록 resolve conflict했는데, 두 분의 확인이 필요합니다.
(src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx 파일 참고)
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
저는 이거 잘 resolve 하신 것 같아요 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx (1)
71-74: 인증 배지의 접근성을 개선해야 합니다.현재 인증 설명은 마우스 호버 시에만 표시되어 키보드 사용자나 스크린 리더 사용자가 접근하기 어렵습니다.
다음과 같은 개선을 제안합니다:
aria-label속성 추가- 키보드 포커스 시에도 설명이 표시되도록 수정
- <VerifiedBadge className="peer aspect-square h-6 w-6" /> + <VerifiedBadge + className="peer aspect-square h-6 w-6" + aria-label={t('zabo.group.verifiedDescription')} + /> <div className="hidden text-sm font-normal text-greyDark opacity-0 transition-opacity - peer-hover:opacity-100 + peer-hover:opacity-100 peer-focus:opacity-100 dark:text-dark_greyDark md:flex">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/api/group/search-groups-with-name.ts(1 hunks)src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/api/group/search-groups-with-name.ts
🔇 Additional comments (4)
src/app/[lng]/(with-page-layout)/(without-sidebar-layout)/search/SearchResults.tsx (4)
1-16: 가져오기 구문이 잘 구성되어 있습니다! 👍컴포넌트와 API 가져오기가 적절하게 구성되어 있으며, 각 import가 명확한 목적을 가지고 있습니다.
33-35: 그룹 검색 구현이 안전하게 처리되었습니다! 👍에러 처리와 옵셔널 체이닝을 적절히 사용하여 안전하게 구현되었습니다.
46-46: 환경 변수 사용 시 안전성 검증이 필요합니다.
process.env.NEXT_PUBLIC_GROUPS_API_URL값이 정의되지 않은 경우 런타임 오류가 발생할 수 있습니다.다음과 같이 수정을 제안합니다:
- href={`${process.env.NEXT_PUBLIC_GROUPS_API_URL}detail/${uuid}?tab=notice`} + href={`${process.env.NEXT_PUBLIC_GROUPS_API_URL ?? ''}/detail/${uuid}?tab=notice`}
52-56: Image 컴포넌트의 필수 속성이 누락되었습니다.Next.js의 Image 컴포넌트는 width와 height 속성이 필요하며, 이미지 최적화를 위해 sizes 속성도 추가하는 것이 좋습니다.
다음과 같이 수정을 제안합니다:
<Image src={profileImageUrl} alt={`group ${name} profile image`} - className="aspect-square md:h-24 md:w-24" + width={96} + height={96} + sizes="(max-width: 768px) 56px, 96px" + className="aspect-square w-14 md:w-24 h-14 md:h-24" />
Summary by CodeRabbit
새로운 기능
환경 설정
현지화
사용자 경험 개선