[Feat] 카드 컴포넌트 제작#8
Conversation
📝 WalkthroughWalkthrough공용 ChangesButton 및 카드 컴포넌트
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
CI 결과
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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/introductions/Inputfield.tsx`:
- Line 12: Fix the Tailwind class name typos in the shared UI styles:
`bg-fill-netural` should be `bg-fill-neutral`, and `text-label-assitive` should
be `text-label-assistive`. Update the affected string(s) in `Inputfield.tsx` and
also search the repeated occurrences in `IntroductionCard.tsx`,
`PartImageCard.tsx`, `Sidebar.tsx`, and `SegmentedControl.tsx` so the same typo
is corrected consistently across those components.
In `@src/components/projects/ProjectThumbnailCard.tsx`:
- Line 28: The hover overlay in ProjectThumbnailCard is using a hardcoded
Tailwind color utility instead of a design token. Update the div styling in
ProjectThumbnailCard to replace bg-black/15 with the appropriate
`@kusitms.com/tokens` color token, keeping the same opacity/overlay behavior while
aligning with the project’s color guidelines.
- Around line 28-32: 삭제 오버레이가 hover에만 반응해 키보드 포커스 시 보이지 않는 접근성 이슈입니다.
ProjectThumbnailCard의 오버레이 컨테이너와 삭제 Button이 포커스될 때도 노출되도록
`group-focus-within`(또는 버튼의 `focus-visible`) 상태를 함께 적용해 마우스 없이도 버튼이 드러나게 수정하세요.
특히 `onDelete`를 받는 삭제 버튼 영역과 오버레이 클래스 조합을 확인해 hover/focus 동작이 동일하게 보이도록 맞추면 됩니다.
🪄 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: d9858c41-4f8d-4a20-b632-50120cf0912d
📒 Files selected for processing (15)
src/components/common/Button.test.tsxsrc/components/common/Button.tsxsrc/components/common/PageHeader.tsxsrc/components/common/index.tssrc/components/index.tssrc/components/introductions/ImageBoxThumbnail.tsxsrc/components/introductions/Inputfield.tsxsrc/components/introductions/IntroductionCard.test.tsxsrc/components/introductions/IntroductionCard.tsxsrc/components/introductions/PartImageCard.test.tsxsrc/components/introductions/PartImageCard.tsxsrc/components/introductions/index.tssrc/components/projects/ProjectThumbnailCard.test.tsxsrc/components/projects/ProjectThumbnailCard.tsxsrc/components/projects/index.ts
| return ( | ||
| <div | ||
| className={cn( | ||
| 'bg-fill-netural border-line-normal flex h-10 items-center rounded-lg border px-3 py-1.5', |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n 'fill-netural|label-assitive|fill-neutral|label-assistive' --type=ts --type=tsx -g '!**/dist/**'Repository: kusitms-com/makers-admin-fe
Length of output: 193
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== matching files =="
git ls-files 'src/components/introductions/*' 'src/**/*.{ts,tsx}' | sed -n '1,120p'
echo
echo "== search typos/usages =="
rg -n --hidden --glob '!**/dist/**' --glob '!**/build/**' --glob '!**/node_modules/**' \
'fill-netural|label-assitive|fill-neutral|label-assistive' src
echo
echo "== inspect relevant files =="
for f in \
src/components/introductions/Inputfield.tsx \
src/components/introductions/IntroductionCard.tsx \
src/components/introductions/PartImageCard.tsx
do
if [ -f "$f" ]; then
echo "--- $f ---"
nl -ba "$f" | sed -n '1,120p'
fi
doneRepository: kusitms-com/makers-admin-fe
Length of output: 1552
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== locate file names =="
fd -a 'Inputfield.tsx|IntroductionCard.tsx|PartImageCard.tsx' src 2>/dev/null || true
echo
echo "== search exact strings in repo =="
rg -n --hidden --glob '!**/dist/**' --glob '!**/build/**' --glob '!**/node_modules/**' \
'fill-netural|label-assitive|fill-neutral|label-assistive|bg-fill-netural|text-label-assitive' .
echo
echo "== show line numbers around Inputfield.tsx if present =="
f='src/components/introductions/Inputfield.tsx'
if [ -f "$f" ]; then
nl -ba "$f" | sed -n '1,80p'
fiRepository: kusitms-com/makers-admin-fe
Length of output: 1413
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== files of interest =="
git ls-files 'src/components/introductions/Inputfield.tsx' 'src/components/introductions/IntroductionCard.tsx' 'src/components/introductions/PartImageCard.tsx' 'src/**/*tokens*' 'src/**/*token*' 'tailwind.config.*' 'postcss.config.*' 'src/**/*css*' | sed -n '1,200p'
echo
echo "== exact string search =="
rg -n --hidden --glob '!**/dist/**' --glob '!**/build/**' --glob '!**/node_modules/**' \
'fill-netural|label-assitive|fill-neutral|label-assistive|bg-fill-netural|text-label-assitive' src . \
|| true
echo
echo "== inspect the three introduction files =="
for f in \
src/components/introductions/Inputfield.tsx \
src/components/introductions/IntroductionCard.tsx \
src/components/introductions/PartImageCard.tsx
do
if [ -f "$f" ]; then
echo "--- $f ---"
nl -ba "$f" | sed -n '1,120p'
fi
doneRepository: kusitms-com/makers-admin-fe
Length of output: 2264
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== tailwind / design token files =="
git ls-files | rg '(^|/)(tailwind\.config\.[jt]s|postcss\.config\.[jt]s|tokens?|theme|globals\.css|index\.css|app\.css|styles\.css|tailwind).*'
echo
echo "== search token definitions / class names =="
rg -n --hidden --glob '!**/dist/**' --glob '!**/build/**' --glob '!**/node_modules/**' \
'fill-netural|label-assitive|fill-neutral|label-assistive|addUtilities|matchUtilities|theme\(|tokens|design tokens|colors:' \
src . \
|| true
echo
echo "== inspect tailwind config candidates =="
for f in $(git ls-files | rg '(^|/)tailwind\.config\.[jt]s$|(^|/)postcss\.config\.[jt]s$'); do
echo "--- $f ---"
sed -n '1,240p' "$f"
doneRepository: kusitms-com/makers-admin-fe
Length of output: 3917
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== src/index.css =="
sed -n '1,240p' src/index.css
echo
echo "== package.json =="
sed -n '1,220p' package.json
echo
echo "== src/lib/utils.ts =="
sed -n '1,120p' src/lib/utils.ts
echo
echo "== search for `@import/`@theme/@source/tokens references =="
rg -n --hidden --glob '!**/dist/**' --glob '!**/build/**' --glob '!**/node_modules/**' \
'`@import`|`@theme`|`@source`|`@utility`|`@custom-variant`|`@plugin`|tokens' src . \
|| trueRepository: kusitms-com/makers-admin-fe
Length of output: 11055
🌐 Web query:
"site:github.com fill-netural label-assitive @kusitms.com/tokens"
💡 Result:
Result summary for query: site:github.com fill-netural label-assitive @kusitms.com/tokens I could not find any GitHub pages that match the terms “fill-netural”, “label-assitive”, and “@kusitms.com/tokens” together. What I did find that is closest: 1) A KUSITMS official website repository exists at https://github.com/kusitms-com/kusitms.com [1], with active development (last push shown as 2026-06-07) [1]. However, the search results surfaced only a page component (e.g., src/app/projects/meetup/[projectNumber]/page.tsx) and did not show any “tokens” file or any “fill-netural/label-assitive” strings in the returned snippets [2]. 2) A “Netural-guidelines-assistant” repo appears to be related to “Netural” (spelling “Netural”, not “netural”), but it is not under kusitms.com and the snippets show validation of design tokens rather than kusitms token files [3]. Conclusion - There is no source-backed evidence (from the search results available) that the exact pattern “fill-netural label-assitive @kusitms.com/tokens” exists anywhere on GitHub. - If you meant a different casing/typo (e.g., “neutral” vs “netural”, “label-assist” vs “label-assitive”, or a specific filename/path under the kusitms-com/kusitms.com repo), tell me the exact intended spelling or the target file path and I can re-run a tighter search.
Citations:
- 1: https://github.com/kusitms-com/kusitms.com
- 2: https://github.com/kusitms-com/kusitms.com/blob/main/src/app/projects/meetup/%5BprojectNumber%5D/page.tsx
- 3: https://github.com/fireinureeyes/netural-guidelines-assistant
클래스명 오타 수정 bg-fill-netural, text-label-assitive는 bg-fill-neutral, text-label-assistive 오타로 보입니다. 같은 문자열이 IntroductionCard.tsx, PartImageCard.tsx, Sidebar.tsx, SegmentedControl.tsx에도 반복되니 함께 정리하세요.
🤖 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/introductions/Inputfield.tsx` at line 12, Fix the Tailwind
class name typos in the shared UI styles: `bg-fill-netural` should be
`bg-fill-neutral`, and `text-label-assitive` should be `text-label-assistive`.
Update the affected string(s) in `Inputfield.tsx` and also search the repeated
occurrences in `IntroductionCard.tsx`, `PartImageCard.tsx`, `Sidebar.tsx`, and
`SegmentedControl.tsx` so the same typo is corrected consistently across those
components.
Source: Path instructions
| export type ButtonVariant = 'primary' | 'strong' | 'error' | 'disable' | 'outlined' | ||
| export type ButtonSize = 's' | 'm' | 'l' | 'xl' | ||
|
|
||
| interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { | ||
| variant: ButtonVariant | ||
| size: ButtonSize | ||
| leftIcon?: ReactNode | ||
| rightIcon?: ReactNode | ||
| } | ||
|
|
||
| const VARIANT_STYLES: Record<ButtonVariant, string> = { | ||
| primary: 'bg-blue-5 text-brand-primary', | ||
| strong: 'bg-brand-primary text-fill-normal', | ||
| error: 'bg-red-10 text-red-70', | ||
| disable: 'bg-fill-alternative text-label-light', | ||
| outlined: 'bg-fill-normal border-line-normal text-label-netural border', | ||
| } | ||
|
|
||
| const SIZE_STYLES: Record<ButtonSize, string> = { | ||
| s: 'text-label-14sb h-9 rounded-md px-4', | ||
| m: 'text-label-14sb h-10 rounded-lg px-5', | ||
| l: 'text-body-16sb h-11 rounded-lg px-6', | ||
| xl: 'text-body-16sb h-12 rounded-lg px-6', | ||
| } | ||
|
|
||
| // outlined는 Figma에서 사이즈와 무관하게 radius 8px + 아이콘 쪽(왼쪽) 패딩이 좁은 비대칭 패딩을 쓴다. | ||
| const OUTLINED_PADDING: Record<ButtonSize, string> = { | ||
| s: 'rounded-lg py-2 pr-4 pl-3', | ||
| m: 'rounded-lg py-2 pr-4 pl-3', | ||
| l: 'rounded-lg py-2 pr-5 pl-[18px]', | ||
| xl: 'rounded-lg py-2 pr-5 pl-[18px]', | ||
| } |
There was a problem hiding this comment.
조합이 많은 경우에는 tva 사용해서 구현하면 좋을 것 같습니다!!
CI 결과
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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`:
- Line 13: Fix the outlined Button variant class name typo in Button.tsx: the
`outlined` entry currently uses `text-label-netural`, which is not a valid
Tailwind token, so the text color does not apply. Update the `variant` styling
map in `Button` to use the correct `text-label-neutral` naming, and keep it
consistent with the other existing text color tokens used in this component and
related UI code.
🪄 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: 1104779b-9941-4984-8446-596fa6bdda98
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yaml
📒 Files selected for processing (6)
package.jsonsrc/components/common/Button.tsxsrc/components/projects/ProjectThumbnailCard.test.tsxsrc/components/projects/ProjectThumbnailCard.tsxsrc/lib/tv.tssrc/lib/utils.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/projects/ProjectThumbnailCard.tsx
- src/components/projects/ProjectThumbnailCard.test.tsx
| strong: 'bg-brand-primary text-fill-normal', | ||
| error: 'bg-red-10 text-red-70', | ||
| disable: 'bg-fill-alternative text-label-light cursor-not-allowed', | ||
| outlined: 'bg-fill-normal border-line-normal text-label-netural border', |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
text-label-netural 오타 - outlined 버튼 텍스트 색상 미적용.
neutral의 오타로 보이며, 존재하지 않는 Tailwind 클래스라 outlined variant에서 텍스트 색상 토큰이 실제로 적용되지 않습니다. 다른 variant는 text-label-light(L12), ProjectThumbnailCard의 text-label-normal 등 정상적인 네이밍을 따릅니다.
🐛 제안 수정
- outlined: 'bg-fill-normal border-line-normal text-label-netural border',
+ outlined: 'bg-fill-normal border-line-normal text-label-neutral border',📝 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.
| outlined: 'bg-fill-normal border-line-normal text-label-netural border', | |
| outlined: 'bg-fill-normal border-line-normal text-label-neutral border', |
🤖 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/Button.tsx` at line 13, Fix the outlined Button variant
class name typo in Button.tsx: the `outlined` entry currently uses
`text-label-netural`, which is not a valid Tailwind token, so the text color
does not apply. Update the `variant` styling map in `Button` to use the correct
`text-label-neutral` naming, and keep it consistent with the other existing text
color tokens used in this component and related UI code.
2 participants
#️⃣연관된 이슈
🚧 Work in Progress
📌 주요 변경사항
Button/Default스펙 기반 공용 버튼 컴포넌트 추가 (size s/m/l/xl × variant primary/strong/error/disable/outlined)IntroductionCard,PartImageCard,ImageBoxThumbnail,Inputfield)ProjectThumbnailCard추가introductions/projects)으로 폴더 분리, 기존PageHeader버튼 중복 제거📝작업 내용
Button/Default컴포넌트셋 전체(size s/m/l/xl × variant primary/strong/error/disable/outlined) 반영, size=m의 strong·outlined 패딩 예외 처리IntroductionCard(default/active variant),PartImageCard(이미지 유무에 따라 삭제 버튼이 disable↔error로 전환),ImageBoxThumbnail,InputfieldProjectThumbnailCard(hover 시 삭제 버튼 오버레이), 밋업/기업 프로젝트 목록에서 공용 사용src/components/introductions, 프로젝트 목록 전용 컴포넌트는src/components/projects로 분리PageHeader액션 버튼 중복 제거: 인라인 버튼 스타일을 공용Button(variant="strong" size="m")으로 교체, 외형 변화 없음pnpm type-check/format:check/lint/exec vitest run(7파일 31개) /build/icons:check/gen:index:check전부 통과, 실제 학회 소개·밋업·기업 프로젝트 Figma 페이지 데이터와 대조해 스펙 일치 확인📸 스크린샷 (선택)
💬리뷰 요구사항(선택)
imageUrl/onReplace/onDelete같은 콜백 props만 노출하며, 실제 학회 소개 페이지를 구현할 때 API 연동이 필요합니다.Summary by CodeRabbit
Button컴포넌트가 추가되어 크기/스타일 변형과 좌·우 아이콘 배치를 지원합니다.