자료필터링 UI 기능 수정 : feat : 필터링 UI개선 및 라벨 리네임 https://github.com/Sejong-B…#645
자료필터링 UI 기능 수정 : feat : 필터링 UI개선 및 라벨 리네임 https://github.com/Sejong-B…#645
Conversation
|
Caution Review failedThe pull request is closed. Walkthrough문서·질문 필터링 UI 컴포넌트들의 스타일·레이아웃이 조정되고, 버튼 관련 props/표현이 정리되었습니다. 문서 타입 및 정렬 라벨의 한글 표기도 수정되었으며, DocumentFilteringBottomSheet 사용처에서 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (4)
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: 7
🧹 Nitpick comments (1)
src/components/common/buttons/FilteringButton.tsx (1)
37-46: activeColor prop 사용 시 색상 유효성 검증을 고려하세요.activeColor를 직접 backgroundColor로 사용하고 있지만, 유효한 CSS 색상 값인지 검증하지 않습니다. 잘못된 값이 전달될 경우 스타일이 적용되지 않을 수 있습니다.
색상 형식 검증을 추가하는 것을 고려하세요:
if (activeColor) { // CSS 색상 형식 검증 (선택적) const isValidColor = /^#([0-9A-F]{3}){1,2}$/i.test(activeColor) || /^rgb\(/.test(activeColor) || /^hsl\(/.test(activeColor); if (!isValidColor) { console.warn(`Invalid activeColor provided: ${activeColor}`); } return { backgroundClass: "", textClass: "text-white font-suit-bold text-lg", text: "적용", style: { backgroundColor: activeColor, }, }; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/app/board/document/sub/my-faculty/page.tsx(0 hunks)src/components/common/DocumentFilteringBottomSheet.tsx(1 hunks)src/components/common/QuestionFilteringBottomSheet.tsx(1 hunks)src/components/common/buttons/FilteringButton.tsx(3 hunks)src/components/common/tags/DocumentFilteringTag.tsx(1 hunks)src/components/common/tags/QuestionFilteringTag.tsx(1 hunks)src/types/api/constants/documentType.ts(1 hunks)src/types/api/constants/sortType.ts(1 hunks)
💤 Files with no reviewable changes (1)
- src/app/board/document/sub/my-faculty/page.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{ts,tsx}: 모든 코드에 TypeScript 엄격 타입을 사용합니다.
인터페이스를 타입 별칭보다 선호합니다.
Boolean 변수는 반드시is접두사를 사용합니다.
명확한 Command/Dto 패턴 사용
에러는 명시적으로 처리하고 로깅합니다.
변수/함수: camelCase
상수: UPPER_SNAKE_CASE
컴포넌트/클래스: PascalCase
축약어 및 모호한 이름 금지
오류는 항상 명시적으로 발생시킵니다.
특정 오류 타입 사용 (ValueError, TypeError 등)
오류 메시지는 명확하고 조치 가능해야 합니다.
any 타입 사용 금지
불변성 유지
**/*.{ts,tsx}: Boolean variables must use the 'is' prefix (e.g., isLoading, isModalOpen, isDocumentValid, isUserAuthenticated). Do not use 'has', 'can', or 'should' prefixes.
Do not use abbreviations for variable names (e.g., doc, q, QNA). Use full, descriptive names.
Do not use meaningless variable names such as 'data', 'item', or 'temp'.
Do not use the 'any' type or ambiguous names like 'result' or 'value'.
Constants must be named in UPPER_SNAKE_CASE.
Do not use the 'any' type anywhere in the codebase.
All code must be written in TypeScript (.ts or .tsx files).
Do not use generic interface names like 'Props' or prefix interfaces with 'I'.
Files:
src/types/api/constants/documentType.tssrc/components/common/tags/QuestionFilteringTag.tsxsrc/components/common/DocumentFilteringBottomSheet.tsxsrc/components/common/QuestionFilteringBottomSheet.tsxsrc/types/api/constants/sortType.tssrc/components/common/tags/DocumentFilteringTag.tsxsrc/components/common/buttons/FilteringButton.tsx
**/*.ts
📄 CodeRabbit inference engine (.cursorrules)
FormData 기반 API 통신
Files:
src/types/api/constants/documentType.tssrc/types/api/constants/sortType.ts
src/types/**/*.ts
📄 CodeRabbit inference engine (GEMINI.md)
src/types/**/*.ts: TypeScript interfaces should be used for type definitions (not types or classes), especially for objects that may be extended.
All files in src/types/ must only contain type/interface definitions and related constants.
Files:
src/types/api/constants/documentType.tssrc/types/api/constants/sortType.ts
**/*.tsx
📄 CodeRabbit inference engine (.cursorrules)
**/*.tsx: 함수형 컴포넌트와 TypeScript 인터페이스를 사용합니다.
컴포넌트명은 PascalCase를 사용합니다.
Tailwind CSS 유틸리티 클래스 사용
하드코딩된 색상/크기 대신 디자인 시스템 토큰 활용
반응형 디자인은 모바일 우선 접근 방식
React.memo, useMemo, useCallback 적절히 사용
불필요한 렌더링 방지
서버 컴포넌트 및 정적 생성 최대한 활용
Shadcn UI 및 Radix UI 컴포넌트 우선 사용
Files:
src/components/common/tags/QuestionFilteringTag.tsxsrc/components/common/DocumentFilteringBottomSheet.tsxsrc/components/common/QuestionFilteringBottomSheet.tsxsrc/components/common/tags/DocumentFilteringTag.tsxsrc/components/common/buttons/FilteringButton.tsx
src/components/**/*.tsx
📄 CodeRabbit inference engine (GEMINI.md)
src/components/**/*.tsx: Component files must be named in PascalCase (e.g., DocumentUploadCard.tsx, QuestionAnswerForm.tsx, UserProfileHeader.tsx).
Props interface must be named as ComponentNameProps (e.g., DocBoardCardProps). Do not use generic names like 'Props' or prefix with 'I'.
Component names must use PascalCase and clearly indicate their role (e.g., DocumentUploadCard, QuestionAnswerForm, UserProfileHeader).
In CSS/JSX, always use Tailwind CSS classes for colors. Do not use hardcoded color values or inline styles for color.
Do not use inline styles for font or color (e.g., style={{ fontFamily: 'SUIT', fontSize: '18px' }}). Use Tailwind classes instead.
Do not use hardcoded pixel values for width, height, or position (e.g., className="w-[393px]", style={{ width: '271px' }}). Use dynamic, responsive units (rem, %, flex, grid) and Tailwind classes.
Do not use inline styles for layout or spacing. Use Tailwind CSS classes for all spacing, sizing, and layout.
Use conditional rendering for loading, error, and empty states in components (e.g., show skeleton, error message, or empty state as appropriate).
Optimize components using React.memo, useMemo, and useCallback where appropriate.
Do not use inline styles for any layout, spacing, font, or color. Use Tailwind CSS classes exclusively.
All new components must have a defined props interface, use PascalCase for the component name, and follow the project's naming and structure conventions.
Do not use hardcoded pixel values for spacing, sizing, or layout. Use Tailwind's spacing and sizing utilities (e.g., p-4, gap-3, w-full, h-16).
All Tailwind spacing and sizing should use the project's standard scale (multiples of 4px, e.g., gap-1, p-2, m-3, etc.).
Do not use inline styles for text overflow or line clamping. Use Tailwind's 'truncate' or 'line-clamp-N' classes.
All component files must use the default export for the main component.
Files:
src/components/common/tags/QuestionFilteringTag.tsxsrc/components/common/DocumentFilteringBottomSheet.tsxsrc/components/common/QuestionFilteringBottomSheet.tsxsrc/components/common/tags/DocumentFilteringTag.tsxsrc/components/common/buttons/FilteringButton.tsx
🔇 Additional comments (5)
src/types/api/constants/documentType.ts (1)
13-15: 라벨 업데이트 확인 완료한글 라벨이 간결하고 명확하게 수정되었습니다. 타입 정의와 상수 구조는 코딩 가이드라인을 준수하고 있습니다.
src/types/api/constants/sortType.ts (1)
19-27: 라벨 업데이트 확인 완료정렬 옵션의 한글 라벨에 공백이 추가되어 가독성이 개선되었습니다. 타입 정의와 상수 구조는 코딩 가이드라인을 준수하고 있습니다.
src/components/common/DocumentFilteringBottomSheet.tsx (1)
145-151: 하단 액션 영역 레이아웃 개선 확인새로운 flex 비율(
flex-[1],flex-[2.5])을 사용한 레이아웃 구조가 적절하며, 초기화 버튼보다 확인 버튼에 더 많은 공간을 할당하여 사용성을 개선했습니다.src/components/common/QuestionFilteringBottomSheet.tsx (1)
185-191: 하단 액션 영역 레이아웃 일관성 확인
DocumentFilteringBottomSheet와 동일한 flex 비율(flex-[1],flex-[2.5])을 사용하여 두 컴포넌트 간 레이아웃 일관성이 유지되고 있습니다.src/components/common/buttons/FilteringButton.tsx (1)
30-30: 라벨 변경이 적절합니다.버튼 텍스트를 "확인"에서 "초기화"(refresh) 및 "적용"(submit)으로 변경한 것은 사용자 경험을 개선하고 버튼의 의도를 더 명확하게 전달합니다.
Also applies to: 41-41, 51-51
| return { | ||
| backgroundClass: "bg-white border border-ui-divider", | ||
| textClass: "text-ui-muted font-suit-medium text-[16px]", | ||
| textClass: "text-ui-muted font-suit-bold text-[18px]", |
There was a problem hiding this comment.
하드코딩된 폰트 크기를 Tailwind 표준 클래스로 변경하세요.
text-[18px]는 하드코딩된 픽셀 값으로 프로젝트 코딩 가이드라인을 위반합니다. Tailwind의 표준 텍스트 크기 클래스를 사용해야 합니다.
다음 diff를 적용하여 수정하세요:
- textClass: "text-ui-muted font-suit-bold text-[18px]",
+ textClass: "text-ui-muted font-suit-bold text-lg",- textClass: "text-white font-suit-bold text-[18px]",
+ textClass: "text-white font-suit-bold text-lg",- textClass: "text-white font-suit-bold text-[18px]",
+ textClass: "text-white font-suit-bold text-lg",Also applies to: 40-40, 50-50
🤖 Prompt for AI Agents
In src/components/common/buttons/FilteringButton.tsx around lines 29, 40 and 50,
replace the hardcoded Tailwind arbitrary class "text-[18px]" with the standard
Tailwind size class "text-lg"; update the textClass entries on those lines to
use "text-lg" instead of "text-[18px]" so the component follows the project's
Tailwind sizing conventions.
| return ( | ||
| <div | ||
| className={`h-11 flex-1 rounded-lg ${buttonStyles.backgroundClass} flex cursor-pointer items-center justify-center transition-all duration-200 hover:opacity-90`} | ||
| className={`h-11 w-full rounded-lg ${buttonStyles.backgroundClass} flex cursor-pointer items-center justify-center transition-all duration-200 hover:opacity-90`} |
There was a problem hiding this comment.
🧩 Analysis chain
컨테이너 클래스 변경의 영향을 확인하세요.
flex-1에서 w-full로 변경되어 버튼이 flex 컨테이너에서 grow하는 대신 전체 너비를 차지하게 되었습니다. 이 변경이 부모 컴포넌트의 레이아웃에 영향을 주지 않는지 확인이 필요합니다.
다음 스크립트를 실행하여 이 버튼을 사용하는 부모 컴포넌트들을 확인하세요:
🏁 Script executed:
#!/bin/bash
# Description: Find all components using FilteringButton and check their layout context
echo "=== Files importing FilteringButton ==="
rg -l "FilteringButton" --type=tsx --type=ts -g '!FilteringButton.tsx'
echo -e "\n=== Usage patterns of FilteringButton ==="
rg "FilteringButton" --type=tsx --type=ts -g '!FilteringButton.tsx' -B2 -A2
echo -e "\n=== Parent container context (flex layouts) ==="
rg -n "FilteringButton" --type=tsx -B10 -A2 | rg -C3 "flex|grid"Length of output: 215
스크립트를 다시 실행하여 FilteringButton을 사용하는 부모 컴포넌트를 확인하세요.
🏁 Script executed:
#!/bin/bash
echo "=== Files importing FilteringButton ==="
rg -l "FilteringButton" -g '*.tsx' -g '!src/components/common/buttons/FilteringButton.tsx'
echo -e "\n=== Usage patterns of FilteringButton ==="
rg "FilteringButton" -g '*.tsx' -g '!src/components/common/buttons/FilteringButton.tsx' -B2 -A2
echo -e "\n=== Parent container context ==="
rg -n "FilteringButton" -g '*.tsx' -B10 -A2 | rg -C3 "flex|grid"Length of output: 8531
BottomSheet.tsx 하단 버튼 레이아웃 수정 필요
w-full로 변경되면서 BottomSheet.tsx의 flex 컨테이너 내 두 버튼이 각각 부모 너비를 100% 차지해 겹치거나 오버플로우가 발생합니다.
src/components/common/BottomSheet.tsx (63–66)에서 각 <FilteringButton>을 <div className="flex-1">…</div>로 감싸거나 버튼에 flex-1 클래스를 적용해 균등 분할되도록 수정하세요.
🤖 Prompt for AI Agents
In src/components/common/buttons/FilteringButton.tsx around line 67 and
referencing src/components/common/BottomSheet.tsx lines 63–66, the button uses
w-full which causes both buttons in BottomSheet's flex container to each take
100% width and overlap/overflow; fix by making the buttons flex items that share
space: either remove w-full and add flex-1 to the button's className (e.g.,
replace w-full with flex-1) or, alternatively, wrap each <FilteringButton> in
BottomSheet.tsx with <div className="flex-1">…</div> so the two buttons are
evenly split.
| {type === "refresh" && ( | ||
| <Image | ||
| src="/icons/reset.svg" | ||
| alt="초기화" | ||
| width={14} | ||
| height={14} | ||
| className="mr-1" | ||
| style={{ | ||
| filter: | ||
| "invert(1) brightness(0) saturate(100%) invert(78%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(89%) contrast(89%)", | ||
| }} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
🧩 Analysis chain
아이콘 렌더링에서 하드코딩된 값과 인라인 스타일을 제거하세요.
이 코드는 여러 코딩 가이드라인을 위반합니다:
- 하드코딩된 픽셀 값 (lines 78-79):
width={14},height={14}대신 Tailwind의 크기 유틸리티를 사용해야 합니다. - 인라인 스타일 (lines 81-84): CSS filter를 인라인 스타일로 적용하는 것은 금지되어 있습니다. Tailwind 클래스나 CSS 모듈을 사용해야 합니다.
- 아이콘 파일 존재 확인 필요:
/icons/reset.svg경로의 파일이 존재하는지 확인이 필요합니다.
다음과 같이 리팩토링하세요:
{type === "refresh" && (
<Image
src="/icons/reset.svg"
alt="초기화"
- width={14}
- height={14}
- className="mr-1"
- style={{
- filter:
- "invert(1) brightness(0) saturate(100%) invert(78%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(89%) contrast(89%)",
- }}
+ width={14}
+ height={14}
+ className="mr-1 brightness-[.89] contrast-[.89] grayscale"
/>
)}아이콘 파일의 존재를 확인하기 위해 다음 스크립트를 실행하세요:
🏁 Script executed:
#!/bin/bash
# Description: Verify that the reset icon file exists in the public directory
# Check if the reset icon exists
if [ -f "public/icons/reset.svg" ]; then
echo "✓ Reset icon found at public/icons/reset.svg"
cat public/icons/reset.svg | head -5
else
echo "✗ Reset icon NOT found at public/icons/reset.svg"
echo "Searching for similar icon files..."
fd -e svg -t f . public/icons 2>/dev/null || find public/icons -name "*.svg" -type f 2>/dev/null || echo "No SVG files found or public/icons directory does not exist"
fiLength of output: 775
인라인 CSS 필터 제거 및 Tailwind 또는 CSS 모듈로 대체
style={{ filter: … }}을 제거하고, Tailwind의 arbitrary filter 유틸(filter-[invert(1)_brightness(0)_…]) 또는 CSS 모듈을 사용해 동일한 효과를 적용하세요. Next.js Image의 width/height는 필수 prop이므로 그대로 두시면 됩니다.
public/icons/reset.svg 파일이 존재함을 확인했습니다.
🤖 Prompt for AI Agents
In src/components/common/buttons/FilteringButton.tsx around lines 74 to 86,
remove the inline style prop on the Image component and replace it with a
class-based solution: either add a Tailwind arbitrary-filter class (e.g.
filter-[invert(1)_brightness(0)_saturate(100%)_invert(78%)_sepia(0%)_saturate(0%)_hue-rotate(0deg)_brightness(89%)_contrast(89%)]
along with existing classes) or create/import a CSS module (e.g. .resetIcon {
filter: … }) and add that classname to the Image; keep the width and height
props unchanged and ensure the new classname is applied to reproduce the exact
filter effect.
| <FilteringButton type="refresh" onClick={handleReset} /> | ||
| </div> | ||
| <div className="flex-[2.5]"> | ||
| <FilteringButton type="submit" onClick={handleConfirm} activeColor="#00D1F2" /> |
There was a problem hiding this comment.
하드코딩된 색상값을 상수 또는 Tailwind 클래스로 변경 필요
코딩 가이드라인에 따라 하드코딩된 색상값(#00D1F2) 사용을 지양해야 합니다. 이 색상은 다른 곳에서도 재사용될 가능성이 있으므로, 파일 상단에 상수로 정의하거나 디자인 시스템 토큰을 활용하는 것이 좋습니다.
다음과 같이 상수로 정의하여 사용하세요:
+const DOCUMENT_FILTER_ACTIVE_COLOR = "#00D1F2";
+
export default function DocumentFilteringBottomSheet({
onReset,
onConfirm, <div className="flex-[2.5]">
- <FilteringButton type="submit" onClick={handleConfirm} activeColor="#00D1F2" />
+ <FilteringButton type="submit" onClick={handleConfirm} activeColor={DOCUMENT_FILTER_ACTIVE_COLOR} />
</div>📝 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.
| <FilteringButton type="submit" onClick={handleConfirm} activeColor="#00D1F2" /> | |
| // add at the top of the file, after imports | |
| const DOCUMENT_FILTER_ACTIVE_COLOR = "#00D1F2"; | |
| export default function DocumentFilteringBottomSheet({ | |
| onReset, | |
| onConfirm, | |
| // ... other props | |
| }) { | |
| // ... other JSX | |
| return ( | |
| <div className="flex-[2.5]"> | |
| <FilteringButton | |
| type="submit" | |
| onClick={handleConfirm} | |
| activeColor={DOCUMENT_FILTER_ACTIVE_COLOR} | |
| /> | |
| </div> | |
| // ... rest of JSX | |
| ); | |
| } |
🤖 Prompt for AI Agents
In src/components/common/DocumentFilteringBottomSheet.tsx around line 150, the
FilteringButton is using a hardcoded color value "#00D1F2"; replace this with a
reusable token instead. Define a color constant at the top of the file (or
import it from your design tokens/theme) and pass that constant into the
FilteringButton's activeColor prop, or switch to an appropriate Tailwind class
and remove the prop if the component supports class-based styling; update any
imports/exports as needed so the color is reused rather than hardcoded.
| <FilteringButton type="refresh" onClick={handleReset} /> | ||
| </div> | ||
| <div className="flex-[2.5]"> | ||
| <FilteringButton type="submit" onClick={handleConfirm} activeColor="#00E271" /> |
There was a problem hiding this comment.
하드코딩된 색상값을 상수로 정의 필요
코딩 가이드라인에 따라 하드코딩된 색상값(#00E271) 사용을 지양해야 합니다. 이 색상은 질문 필터링 테마 색상으로 보이며, 파일 상단에 명확한 이름의 상수로 정의하여 재사용성과 유지보수성을 개선해야 합니다.
다음과 같이 상수로 정의하여 사용하세요:
+const QUESTION_FILTER_ACTIVE_COLOR = "#00E271";
+
export default function QuestionFilteringBottomSheet({
onReset,
onConfirm, <div className="flex-[2.5]">
- <FilteringButton type="submit" onClick={handleConfirm} activeColor="#00E271" />
+ <FilteringButton type="submit" onClick={handleConfirm} activeColor={QUESTION_FILTER_ACTIVE_COLOR} />
</div>📝 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.
| <FilteringButton type="submit" onClick={handleConfirm} activeColor="#00E271" /> | |
| // Define the theme color as a constant for reuse and maintainability | |
| const QUESTION_FILTER_ACTIVE_COLOR = "#00E271"; | |
| export default function QuestionFilteringBottomSheet({ | |
| onReset, | |
| onConfirm, | |
| }: QuestionFilteringBottomSheetProps) { | |
| // … | |
| return ( | |
| <div className="flex-[2.5]"> | |
| <FilteringButton | |
| type="submit" | |
| onClick={handleConfirm} | |
| activeColor={QUESTION_FILTER_ACTIVE_COLOR} | |
| /> | |
| </div> | |
| // … | |
| ); | |
| } |
🤖 Prompt for AI Agents
In src/components/common/QuestionFilteringBottomSheet.tsx around line 190, the
button uses a hardcoded color "#00E271"; define a descriptive constant (e.g.,
QUESTION_FILTER_THEME_COLOR or FILTER_BUTTON_ACTIVE_COLOR) at the top of the
file (or in a shared colors/constants module if reused across files), use that
constant in place of the literal string for the FilteringButton activeColor
prop, and update any imports/usages accordingly to improve reusability and
maintainability.
| className={`font-suit-bold flex items-center justify-center rounded-[20px] border px-3 py-2 hover:bg-gray-50 text-[16px]${ | ||
| isSelected ? "border-1 border-[#00E271] text-[#00E271]" : "border-[#C5C5C5] text-[#898989]" | ||
| } `} |
There was a problem hiding this comment.
Tailwind CSS 클래스를 사용하고 하드코딩된 값을 제거하세요.
다음과 같은 코딩 가이드라인 위반 사항이 있습니다:
- 하드코딩된 색상 값:
#00E271,#C5C5C5,#898989대신 Tailwind 색상 클래스를 사용해야 합니다. - 하드코딩된 폰트 크기:
text-[16px]대신 Tailwind 텍스트 크기 클래스(예:text-base)를 사용해야 합니다. - 하드코딩된 border-radius:
rounded-[20px]대신 표준 Tailwind 클래스(예:rounded-full또는rounded-2xl)를 사용해야 합니다. - 잘못된 Tailwind 클래스:
border-1은 유효하지 않습니다.border또는border-[1px]를 사용하세요. - 템플릿 리터럴 공백 누락:
text-[16px]${사이에 공백이 필요합니다.
다음 diff를 적용하여 수정하세요:
- className={`font-suit-bold flex items-center justify-center rounded-[20px] border px-3 py-2 hover:bg-gray-50 text-[16px]${
- isSelected ? "border-1 border-[#00E271] text-[#00E271]" : "border-[#C5C5C5] text-[#898989]"
+ className={`font-suit-bold flex items-center justify-center rounded-full border px-3 py-2 text-base hover:bg-gray-50 ${
+ isSelected ? "border-green-500 text-green-500" : "border-gray-400 text-gray-500"
} `}참고: #00E271에 정확히 일치하는 Tailwind 색상이 없다면, tailwind.config 파일에서 커스텀 색상을 정의하거나 가장 가까운 표준 색상(예: green-500)을 사용하세요.
As per coding guidelines
📝 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.
| className={`font-suit-bold flex items-center justify-center rounded-[20px] border px-3 py-2 hover:bg-gray-50 text-[16px]${ | |
| isSelected ? "border-1 border-[#00E271] text-[#00E271]" : "border-[#C5C5C5] text-[#898989]" | |
| } `} | |
| className={`font-suit-bold flex items-center justify-center rounded-full border px-3 py-2 text-base hover:bg-gray-50 ${ | |
| isSelected | |
| ? "border-green-500 text-green-500" | |
| : "border-gray-400 text-gray-500" | |
| } `} |
🤖 Prompt for AI Agents
In src/components/common/tags/QuestionFilteringTag.tsx around lines 12–14,
replace hardcoded style tokens and fix the malformed template literal: remove
the hex colors and use Tailwind color classes (or add a custom color in
tailwind.config and reference it, e.g., bg-[--custom-green] or green-500),
change text-[16px] to a standard class like text-base, replace rounded-[20px]
with a standard class such as rounded-2xl (or rounded-full if appropriate),
replace invalid border-1 with border (or border-[1px] if you prefer
explicitness), and ensure there is a space before the template expression so the
class string concatenates correctly (e.g., "... text-base " + (isSelected ? "
border text-green-500 ..." : " border border-gray-300 text-gray-500 ...")).
1 participant
Summary by CodeRabbit
스타일
카피 업데이트