[Setting/#143] 공통 UI 컴포넌트 생성#144
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughPR ChangesCommon UI Component Library
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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: 6
🧹 Nitpick comments (2)
src/components/common/Card.tsx (1)
1-3: ⚡ Quick winlint 경고(임포트 정렬) 한 번 정리해두면 좋아요.
정적 분석 경고대로 import 정렬 autofix를 적용해 두면 이후 CI 노이즈를 줄일 수 있습니다.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/Card.tsx` around lines 1 - 3, Import sorting in src/components/common/Card.tsx is triggering a lint warning; reorder the imports (external packages first, then type imports, then local modules) and run the project's autofix to remove CI noise. Specifically, update the import block that references React/forwardRef and clsx/ClassValue and twMerge so they follow the project's import-order rule (or run eslint --fix / npm run lint:fix) to automatically sort and group these imports. Ensure you save the file and commit the autofixed changes.src/components/common/SearchInput.tsx (1)
14-47: ⚡ Quick winReact 19에서 ref를 prop으로 직접 받을 수 있어요 (선택사항)
프로젝트가 React 19.2를 사용하고 있는데, 이제 ref가 일반 prop이 되어서
forwardRef를 꼭 써야 하지는 않습니다. 현재 코드는 완벽하게 동작하지만, 더 간단하게 리팩토링할 수 있어요.✨ forwardRef 제거 예시
export const SearchInput = ({ className, wrapperClassName, iconClassName, ref, ...props }: SearchInputProps & { ref?: React.Ref<HTMLInputElement> }) => { return ( <div className={cn("group relative w-full", wrapperClassName)}> <input ref={ref} type="search" className={cn( "w-full bg-white-1/5 border-b-2 border-white-1/20 text-white-1 px-4 py-4 pl-12 focus:outline-none focus:border-gold-1 focus:bg-white-1/10 transition-all duration-300 font-light placeholder:text-white-1/40", className, )} {...props} /> <svg className={cn( "absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-white-1/50 transition-colors duration-300 group-focus-within:text-gold-1", iconClassName, )} fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg> </div> ); }; SearchInput.displayName = "SearchInput";현재 구현도 잘 동작하지만, 원하면 이렇게 간단히 개선할 수 있습니다. 접근성도 이미 잘 처리되어 있네요! (aria-hidden 👍)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/SearchInput.tsx` around lines 14 - 47, The component currently uses forwardRef (export const SearchInput = forwardRef...) but with React 19 you can accept ref as a normal prop; refactor SearchInput to be a plain functional component that takes ref?: React.Ref<HTMLInputElement> on its props (SearchInputProps & { ref?: React.Ref<HTMLInputElement> }), remove forwardRef usage, keep assigning ref to the <input> element, set SearchInput.displayName = "SearchInput", and optionally change the input type to "search" if desired; ensure the prop names (className, wrapperClassName, iconClassName) and the SVG markup remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/common/Button.tsx`:
- Around line 37-40: BaseButton currently renders a <button> without a default
type which makes it default to "submit" inside forms; update the BaseButton
render to use a safe default type="button" while still allowing consumers to
override via props (ensure ButtonProps/types include the native button type if
not already). Locate the forwardRef component named BaseButton and modify the
props handling so the rendered button receives a default type of "button" unless
an explicit type prop is provided (keeping existing usage of cn and
buttonVariants intact).
In `@src/components/common/Card.tsx`:
- Around line 29-33: The decorative SVG in Card.tsx (the <svg> element used for
the star icon) should be hidden from assistive tech: update the SVG in the
rating block (and the similar SVG at the other occurrence between lines 49-61)
to include aria-hidden="true" and focusable="false" and ensure no meaningful
content is duplicated only in the decorative element; keep visible/readable
content (e.g., the rating value rendered by the span with className
"text-white-1 text-xs font-light tracking-wider" / the prop rating) as the
accessible representation.
- Line 20: Card.tsx currently renders an interactive container as a plain div
(the element with "ref={ref} className={cn(\"group cursor-pointer\", className)}
{...props}") which breaks keyboard accessibility; update this root element to
either a semantic interactive element (preferably a <button> or <a> if it
navigates) keeping the existing ref and props, or if you must keep a div add
role="button", tabIndex={0} and implement an onKeyDown handler that invokes the
same activation logic as onClick for Enter and Space, and ensure ARIA attributes
(aria-pressed/aria-label etc.) are forwarded from props so keyboard and
screen-reader users can operate the Card component.
In `@src/components/common/Input.tsx`:
- Around line 19-31: The <label> lacks an htmlFor/id connection to the <input>,
breaking screen-reader and click-to-focus behavior; update the Input component
to accept an optional id prop (or generate a stable one using React's useId
inside the component) and ensure the <label> uses htmlFor={id} while the <input>
receives id={id}; reference the label element that currently uses
labelClassName, the input element using ref and props.type, and update the
component props/type declarations to include id so callers can override it.
In `@src/components/common/SearchInput.tsx`:
- Around line 18-26: The SearchInput component is missing accessibility
attributes and should use a semantic search input: update the props interface
(SearchInputProps) to include an optional "aria-label"?: string and ensure the
rendered <input> (the element using ref and {...props}) uses type="search"
instead of "text" and passes through the aria-label from props (or supply a
sensible default like "Search" only if no label is provided). Make sure the
input still spreads {...props} so any consumer-provided aria attributes are
preserved and adjust any consuming code/tests if they relied on type="text".
- Around line 5-7: Remove the locally defined cn function in SearchInput.tsx
(the function named cn that wraps twMerge and clsx) and replace it with an
import of the shared cn utility from the common utils module (use the existing
cn exported from the shared utils file), then update any references in
SearchInput.tsx to use the imported cn; ensure the import uses the same named
export (cn) so no other code changes are required.
---
Nitpick comments:
In `@src/components/common/Card.tsx`:
- Around line 1-3: Import sorting in src/components/common/Card.tsx is
triggering a lint warning; reorder the imports (external packages first, then
type imports, then local modules) and run the project's autofix to remove CI
noise. Specifically, update the import block that references React/forwardRef
and clsx/ClassValue and twMerge so they follow the project's import-order rule
(or run eslint --fix / npm run lint:fix) to automatically sort and group these
imports. Ensure you save the file and commit the autofixed changes.
In `@src/components/common/SearchInput.tsx`:
- Around line 14-47: The component currently uses forwardRef (export const
SearchInput = forwardRef...) but with React 19 you can accept ref as a normal
prop; refactor SearchInput to be a plain functional component that takes ref?:
React.Ref<HTMLInputElement> on its props (SearchInputProps & { ref?:
React.Ref<HTMLInputElement> }), remove forwardRef usage, keep assigning ref to
the <input> element, set SearchInput.displayName = "SearchInput", and optionally
change the input type to "search" if desired; ensure the prop names (className,
wrapperClassName, iconClassName) and the SVG markup remain unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 91e6a7aa-d787-4b75-b620-59549867e618
📒 Files selected for processing (6)
src/components/common/Button.tsxsrc/components/common/Card.tsxsrc/components/common/Input.tsxsrc/components/common/SearchInput.tsxsrc/main.tsxsrc/styles/theme.css
Contributor
|
디자인 엄청 고급스럽게 잘 나왔네요!! 좋습니다!! 확인했어요~~ |
Contributor
|
import 문 정렬문제만 해결해주시면 될것같습니다! |
jjjsun
approved these changes
May 16, 2026
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/common/Card.tsx (1)
25-28: ⚡ Quick win이미지에
loading="lazy"를 추가하면 성능이 개선돼요.페이지에 여러 개의 레스토랑 카드가 있을 때, 화면에 보이지 않는 이미지까지 한꺼번에 로드하면 초기 로딩이 느려질 수 있어요.
loading="lazy"를 추가하면 스크롤할 때만 이미지를 불러와서 성능이 좋아집니다.♻️ 수정 제안
<img src={image} alt={name} + loading="lazy" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/common/Card.tsx` around lines 25 - 28, The img in Card.tsx (the <img> element rendering src={image} alt={name} with className="w-full h-full object-cover...") should use native lazy loading to improve performance for lists of cards; add the attribute loading="lazy" to that <img> element so offscreen images are deferred until scrolled into view.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/common/Card.tsx`:
- Around line 16-23: The button in the Card component is missing an explicit
type which can cause accidental form submissions when this component is used
inside a form; update the button element in src/components/common/Card.tsx (the
JSX element that uses ref, className, and {...props}) to include type="button"
so it never acts as a submit button by default.
---
Nitpick comments:
In `@src/components/common/Card.tsx`:
- Around line 25-28: The img in Card.tsx (the <img> element rendering
src={image} alt={name} with className="w-full h-full object-cover...") should
use native lazy loading to improve performance for lists of cards; add the
attribute loading="lazy" to that <img> element so offscreen images are deferred
until scrolled into view.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 40795854-d1f8-431c-8128-fbec3500a3e4
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by none
📒 Files selected for processing (5)
src/components/common/Button.tsxsrc/components/common/Card.tsxsrc/components/common/Input.tsxsrc/components/common/SearchInput.tsxsrc/main.tsx
✅ Files skipped from review due to trivial changes (1)
- src/main.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/common/Button.tsx
- src/components/common/Input.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔢 관련 이슈 링크
📌 변경사항PR
💻 작업내용
glass(투명배경), solid(검정배경) 두 가지 스타일로 나눠 variant로 관리하도록 구현
라벨 포함
🪧 미완성 작업
N/A
🤔 논의 사항 및 참고 사항
프로토타입 디자인을 참고하여 색상 팔레트(gold-1, black-1 등)으로 임의 매칭하여 구현했습니다.
ui 확인은 아래 영상을 통해 확인해주세요
default.mp4
✅ 체크리스트
Summary by CodeRabbit