Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough설정(마이페이지)에서 테마/언어 설정 UI 블록이 삭제되었습니다. 개인 홈 페이지에서 LG 유플러스 챗봇 섹션이 제거되고 최근 상담 항목의 제목·설명·태그가 변경되었습니다. 추천 제품 관련 컴포넌트들이 레이아웃·타이포그래피를 조정했고, RecommendCard에서 Estimated code review effort🎯 3 (Moderate) | ⏱️ ~35 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 3❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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. 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: 2
🤖 Fix all issues with AI agents
In `@src/components/counseling-recommend/recommend-cardlist/index.tsx`:
- Line 16: In the recommend-cardlist index.tsx change the prop value that
currently reads best=" border-1 border-primary-500 bg-white" to remove the
leading space and replace the invalid Tailwind class border-1 with border (i.e.
best="border border-primary-500 bg-white"); locate the usage of the best prop in
this file (the string assigned to best) and update it accordingly.
In `@src/components/recommend/product-plans/index.tsx`:
- Around line 5-17: Remove the debug console.log in the ProductPlans component
and delete the commented-out JSX line (the commented div containing
product.desc) to avoid leaking runtime data and cluttering the codebase; search
within the ProductPlans function for "console.log('PLAN PRODUCT'" and the JSX
comment starting with "{/* <div" and remove those lines, keeping the component
return intact and ensuring ESLint/formatters pass after removal.
🧹 Nitpick comments (4)
src/app/(public)/oauth/callback/[provider]/page.tsx (1)
96-96: 로딩 문구에 라이브 영역(aria-live) 추가를 권장합니다.스크린리더가 상태 변화를 인지할 수 있도록
role="status"/aria-live="polite"를 붙이면 접근성이 좋아집니다.✅ 제안 수정안
- <p className="text-lg font-semibold text-gray-500">로그인 처리 중입니다...</p> + <p role="status" aria-live="polite" className="text-lg font-semibold text-gray-500"> + 로그인 처리 중입니다... + </p>As per coding guidelines: 브라우저/디바이스 호환성과 접근성(ARIA, 키보드 내비게이션 등) 문제가 없는지 확인
src/app/(private)/mypage/page.tsx (1)
176-180: 주석 처리된 UI 블록은 제거하거나 feature-flag로 관리해주세요.주석으로 남아 있으면 유지보수/가독성에 불리합니다.
🧹 제안 수정안
- {/* <SettingsGroup title="설정"> - {설정Rows.map((row) => ( - <SettingsRow key={row.label} icon={row.icon} label={row.label} onClick={noop} /> - ))} - </SettingsGroup> */}As per coding guidelines: 가독성과 안정성(에러/예외 처리)을 최우선으로 검토하고, 로직이 단순하고 직관적으로 읽히는지 확인
src/components/counseling-recommend/recommend-cardlist/index.tsx (2)
13-16: 사용하지 않는is_monthlyprops는 제거 권장합니다.
RecommendCard내부에서 미사용이면 API 표면적만 늘어나고 혼동을 유발합니다. 해당 prop을 타입과 호출부에서 제거해 주세요.
As per coding guidelines, "기존 코드와의 호환성, 재사용성뿐 아니라 확장 가능한 구조인지도 검토".♻️ 제안 변경
- <RecommendCard - product={product} - is_monthly={true} - best=" border-1 border-primary-500 bg-white" - /> + <RecommendCard + product={product} + best=" border-1 border-primary-500 bg-white" + />
9-10: 가로 스크롤 영역에 키보드 접근성 부여를 권장합니다.
스크롤 가능한 영역은tabIndex와aria-label을 추가하면 키보드 사용자 접근성이 좋아집니다.
As per coding guidelines, "브라우저/디바이스 호환성과 접근성(ARIA, 키보드 내비게이션 등) 문제가 없는지 확인".♿ 제안 변경
- <div className="no-scrollbar flex gap-4 overflow-x-auto overscroll-x-contain scroll-smooth px-1"> + <div + className="no-scrollbar flex gap-4 overflow-x-auto overscroll-x-contain scroll-smooth px-1" + role="region" + aria-label="추천 상품 목록" + tabIndex={0} + >
src/components/counseling-recommend/recommend-cardlist/index.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/chat/call-modal/index.tsx`:
- Around line 55-57: 현재 CallModal 컴포넌트의 연결 버튼 onClick 핸들러가 주석만 남아 있어 클릭 시 아무 동작이
없습니다; CallModal 컴포넌트(또는 해당 파일의 버튼 렌더링 부분)의 props에 optional onConnect: () => void
콜백을 추가하고 버튼의 onClick에서 이 onConnect를 호출하도록 하거나(기본적으로 noop으로 설정하지 말고 존재 여부를 체크),
아직 구현되지 않았다면 버튼에 disabled 속성을 주고 툴팁 또는 aria-live로 "연결 준비 중" 같은 피드백 메시지를 표시해
사용자에게 동작이 없음을 알리세요; 대상 식별자: CallModal 컴포넌트와 해당 연결 버튼의 onClick 핸들러.
🧹 Nitpick comments (6)
src/app/(private)/help/page.tsx (2)
42-44: 버튼 접근성 개선 필요: 포커스 상태 스타일 추가 권장버튼이
aria-label="닫기"를 포함하고 있어 스크린 리더 지원은 잘 되어 있습니다. 다만, 키보드 내비게이션 시 시각적 포커스 표시가 없으면 사용자가 현재 위치를 파악하기 어렵습니다.또한, 아이콘에
aria-hidden="true"를 추가하여 스크린 리더가 아이콘을 무시하도록 하는 것이 좋습니다.♻️ 포커스 상태 및 접근성 개선 제안
- <button type="button" className="w-fit" onClick={() => router.back()} aria-label="닫기"> - <X className="h-9 w-9" /> + <button + type="button" + className="w-fit rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-white" + onClick={() => router.back()} + aria-label="닫기" + > + <X className="h-9 w-9" aria-hidden="true" /> </button>
54-64: 접근성 및 안정성 개선 포인트
이미지
alt텍스트 개선: 현재alt=""로 설정되어 있는데, 이 이미지들은 단순 장식이 아니라 단계별 안내를 보조하는 의미 있는 콘텐츠입니다. 시각 장애 사용자를 위해 설명적인 alt 텍스트를 제공하는 것이 WCAG 가이드라인에 부합합니다.
key값 개선:step.title("1.", "2." 등)을 key로 사용하는 것보다 고유 식별자나 index를 사용하는 것이 더 안정적입니다. 타이틀이 변경되거나 중복될 경우 예기치 않은 렌더링 문제가 발생할 수 있습니다.♻️ 개선된 구조 제안
const HELP_STEPS = [ { + id: 1, title: '1.', - description: '상담 아이콘을 눌러 전화 상담을 시작하세요.', + description: '상담 아이콘을 눌러 전화 상담을 시작하세요.', + imageAlt: '상담 아이콘 위치를 보여주는 화면', image: Help1, }, // ... 나머지 항목들도 동일하게 id와 imageAlt 추가 ];- {HELP_STEPS.map((step) => ( - <div key={step.title} className="flex items-center gap-4"> + {HELP_STEPS.map((step) => ( + <div key={step.id} className="flex items-center gap-4"> <div className="relative h-[90px] w-[140px] flex-shrink-0 overflow-hidden rounded-2xl bg-white shadow-sm"> - <Image src={step.image} alt="" fill className="object-cover" /> + <Image src={step.image} alt={step.imageAlt} fill className="object-cover" /> </div>src/components/chat/call-modal/index.tsx (3)
27-32: 리스트 렌더링 시idx(인덱스)를 key로 사용하는 것은 피해주세요.배열 항목이 추가/삭제/재정렬될 경우 React가 DOM을 비효율적으로 업데이트하거나 예기치 않은 렌더링 버그가 발생할 수 있습니다. 또한 변수명
i는 의미가 불명확합니다.개선 방안:
ChatProps에 고유 식별자(id)가 있다면 해당 값을 key로 사용하세요.- 변수명을
chatItem등 의미 있는 이름으로 변경하세요.♻️ 가독성 및 안정성 개선 예시
- {content.map((i, idx) => ( - <li key={idx}> + {content.map((chatItem) => ( + <li key={chatItem.id ?? chatItem.text}> <span className="text-primary-500"> • </span> - {i.text} + {chatItem.text} </li> ))}
10-62: 모달 컴포넌트에 접근성(A11y) 속성이 누락되었습니다.현재 구현에는 다음과 같은 접근성 문제가 있습니다:
role="dialog"및aria-modal="true"속성 부재aria-labelledby로 모달 제목 연결 누락- 키보드(Escape)로 모달 닫기 기능 없음
- 포커스 트래핑 미구현 (모달 외부로 포커스 이동 방지)
스크린 리더 사용자나 키보드 사용자가 이 모달을 제대로 이용하기 어렵습니다.
♿ 접근성 개선 예시
+ // Escape 키로 모달 닫기 + React.useEffect(() => { + const handleKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') dispatch(closeModal()); + }; + window.addEventListener('keydown', handleKeyDown); + return () => window.removeEventListener('keydown', handleKeyDown); + }, [dispatch]); + return ( - <div className="flex flex-col items-center justify-center"> + <div + role="dialog" + aria-modal="true" + aria-labelledby="call-modal-title" + className="flex flex-col items-center justify-center" + > <div className="bg-primary-500 flex h-14.5 w-14.5 items-center justify-center rounded-[20px]"> <Phone /> </div> - <p className="mt-4 text-[20px] leading-5 font-bold">상담사 연결</p> + <p id="call-modal-title" className="mt-4 text-[20px] leading-5 font-bold">상담사 연결</p>As per coding guidelines: 브라우저/디바이스 호환성과 접근성(ARIA, 키보드 내비게이션 등) 문제가 없는지 확인해야 합니다.
24-34: 빈content배열에 대한 예외 처리가 없습니다.
content가 빈 배열일 경우 "전달될 상담 내용" 섹션이 빈 상태로 렌더링됩니다. 사용자에게 명확한 안내가 필요합니다.🛡️ 빈 상태 처리 예시
<div className="bg-gray-light mt-4 w-72 rounded-[20px] px-7 py-3.5"> <p className="text-gray-dark text-[13px] font-semibold">전달될 상담 내용</p> - <ul className="text-[13px] font-semibold text-black"> - {content.map((i, idx) => ( - <li key={idx}> - <span className="text-primary-500"> • </span> - {i.text} - </li> - ))} - </ul> + {content.length > 0 ? ( + <ul className="text-[13px] font-semibold text-black"> + {content.map((chatItem) => ( + <li key={chatItem.id ?? chatItem.text}> + <span className="text-primary-500"> • </span> + {chatItem.text} + </li> + ))} + </ul> + ) : ( + <p className="text-[13px] text-gray-500">전달할 상담 내용이 없습니다.</p> + )} </div>src/components/counseling-recommend/recommend-cardlist/index.tsx (1)
10-18: 가로 스크롤 목록의 키보드/스크린리더 접근성 보강현재 컨테이너는 스크롤 가능하지만 포커스/역할 정보가 없어 키보드 탐색 및 스크린리더 인지가 약합니다.
role,aria-label,tabIndex와listitem을 추가해 접근성을 보완하는 것을 권장합니다.♿ 개선 예시
- <div className="no-scrollbar flex gap-4 overflow-x-auto overscroll-x-contain scroll-smooth px-1"> + <div + className="no-scrollbar flex gap-4 overflow-x-auto overscroll-x-contain scroll-smooth px-1" + role="list" + aria-label="추천 상품 목록" + tabIndex={0} + > {products.map((product) => ( - <div key={product.productId} className="shrink-0"> + <div key={product.productId} className="shrink-0" role="listitem"> <RecommendCard product={product} best=" border border-primary-500 bg-white" /> </div> ))} </div>As per coding guidelines: 6. 브라우저/디바이스 호환성과 접근성(ARIA, 키보드 내비게이션 등) 문제가 없는지 확인
joonhyong
changed the title
1 participant
Key Changes
작업 내역
📸 스크린샷
💬 공유사항 to 리뷰어
비고
PR Checklist
PR이 다음 요구 사항을 충족하는지 확인하세요.
Summary by CodeRabbit
릴리스 노트
스타일
변경/제거
UI 개선
✏️ Tip: You can customize this high-level summary in your review settings.