[Feat] Modal 컴포넌트 제작#16
Merged
Merged
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough공통 입력·선택·업로드 컴포넌트와 제어형 Modal, 네 가지 등록 모달을 추가했습니다. 각 모달의 Storybook 시나리오와 상호작용 테스트를 구성하고 barrel export를 확장했으며, SVG 생성 시 내부 ID prefix 처리를 적용했습니다. Changes공통 UI 및 등록 모달
SVG 아이콘 생성
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
CI 결과
|
1 similar 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: 14
🤖 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/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsx`:
- Around line 34-90: BlogReviewModal 테스트에 활동 선택과 이미지 업로드 상호작용 검증이 누락되어 있습니다. 기존
파트 드롭다운 테스트 패턴을 참고해 활동 combobox에서 값을 선택한 뒤 onActivityChange 호출 인자를 검증하는 테스트를
추가하세요. 또한 ImageUploadBox를 통해 이미지 선택 시 onThumbnailChange, 삭제 시 onThumbnailDelete가
호출되는 테스트를 추가하고, 기존 renderModal 및 사용자 상호작용 방식을 재사용하세요.
In `@src/components/common/FormField/FormField.tsx`:
- Around line 12-14: FormField의 시각적 span을 실제 label 요소로 변경하고, 고유한 id를 생성하거나 전달받아
htmlFor로 연결하세요. FormField 호출부의 input 및 select 컨트롤에도 동일한 id를 지정하고, 커스텀 선택 컴포넌트는
필요 시 aria-labelledby로 라벨과 연결되도록 관련 props와 구현을 업데이트하세요.
In `@src/components/common/Inputfield/Inputfield.tsx`:
- Around line 16-18: Inputfield의 input에 outline-none만 적용되어 키보드 포커스 표시가 없습니다.
Inputfield 컴포넌트의 input className에 프로젝트 포커스 토큰을 사용하는 focus-visible 스타일을 추가하거나,
래퍼에 focus-within 스타일을 적용해 키보드 사용 시 명확한 포커스 링이 표시되도록 수정하세요.
In `@src/components/common/Modal/Modal.test.tsx`:
- Around line 6-56: Modal 테스트에 Dialog.Backdrop 클릭 동작을 검증하는 테스트를 추가하세요. 기존 Modal
테스트 구조에서 열려 있는 모달과 mock onOpenChange를 렌더링한 뒤, backdrop 요소를 식별해 클릭하고
onOpenChange가 false와 이벤트 인자로 호출되는지 확인하세요.
In `@src/components/common/Modal/Modal.tsx`:
- Around line 19-23: Dialog.Popup의 고정 너비 설정에 좁은 뷰포트 대응을 추가하세요. className 구성에서
w-[460px]와 함께 max-w-[calc(100vw-2rem)] 같은 viewport 기반 max-width 클래스를 지정해 모바일
화면에서 모달이 가로로 넘치지 않도록 수정하세요.
In `@src/components/common/TextareaField/TextareaField.tsx`:
- Around line 16-18: The TextareaField textarea removes the default focus
indicator without providing a keyboard focus replacement. Update the textarea
class list in TextareaField to add the project’s focus-token-based focus-visible
styling while retaining the existing appearance and behavior.
In `@src/components/projects/CompanyProjectModal/CompanyProjectModal.test.tsx`:
- Around line 23-68: CompanyProjectModal tests are missing coverage for banner
upload and deletion callbacks. Add tests alongside the existing input and button
interaction tests that locate the ImageUploadBox interaction controls, trigger
banner selection and deletion, and assert onBannerChange and onBannerDelete are
called with the expected values.
In `@src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx`:
- Around line 66-68: Replace the options-empty SelectField used for the “기수”
display in CompanyProjectModal with the shared read-only/static-value approach,
and apply the same common fix to the corresponding field in BlogReviewModal.
Ensure the rendered cardinal value remains unchanged without treating it as a
selectable field.
- Around line 79-87: Replace the `Inputfield` used in the `프로젝트 소개` `FormField`
within `CompanyProjectModal` with `TextareaField`, preserving the existing
`value`, `onChange`, and `placeholder` props so multiline project descriptions
are supported.
In `@src/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsx`:
- Around line 46-105: MeetupProjectModal 테스트에 주요 controlled callback 상호작용 검증이
부족하다. 기존 describe('MeetupProjectModal')에 프로젝트명·URL 입력 변경 후 onTypeChange 호출, 취소
버튼 클릭 후 onCancel 호출, 저장하기 버튼 클릭 후 onSave 호출, 포스터 파일 선택 및 삭제 후 각각
onFileChange·onDelete 호출을 확인하는 최소 테스트를 추가하라. 기존 renderModal 헬퍼와 실제 접근 가능한 역할·라벨을
사용해 각 콜백의 인자까지 검증하라.
In `@src/components/projects/MeetupProjectModal/MeetupProjectModal.tsx`:
- Around line 115-118: MeetupProjectModal의 기수 필드가 빈 options를 가진 SelectField로
렌더링되고 변경 처리도 없습니다. 해당 필드를 고정 표시로 사용할 경우 SelectField 대신 readOnly 입력으로 변경하고, 변경
가능해야 한다면 유효한 기수 옵션과 onValueChange 콜백을 연결하세요.
- Around line 146-154: 프로젝트 소개 입력이 한 줄 전용 Inputfield로 구현되어 있습니다.
MeetupProjectModal의 프로젝트 소개 FormField에서 Inputfield를 공통 TextareaField로 교체하고, 기존
intro 값·onIntroChange 핸들러·placeholder가 그대로 동작하도록 연결하세요.
- Around line 155-203: 팀원 관리의 반복되는 SelectField와 이름 Inputfield, 그리고 URL 입력 컨트롤에
고유하고 명확한 접근성 이름을 추가하세요. draft 필드와 각 member 행의 컨트롤이 서로 다른 id와 label로 연결되도록 하거나,
최소한 member 이름/파트를 식별하는 aria-label을 설정하며, 관련 URL 입력에도 동일한 방식으로 적용하세요.
In `@src/components/reviews/ReviewModal/ReviewModal.test.tsx`:
- Around line 11-18: ReviewModal 테스트에 실제 팀 선택 변경 시나리오를 추가하세요. renderModal의
onTeamChange mock을 사용해 팀 선택 UI를 조작한 뒤, 선택한 값이 인자로 전달되어 onTeamChange가 호출되는지
검증하세요. 기본 렌더링 테스트와 별도로 부모 상태 갱신 연결을 확인할 수 있도록 구성하세요.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: cc6018e2-a6b9-48b0-aa4d-5707eedd1091
⛔ Files ignored due to path filters (11)
src/assets/icons/generated/AddIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/AttachFileIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ChevronDownIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/DashboardIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/DeleteIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ErrorIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/IntroductionIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/LogoutIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/MentoringIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/UploadIcon.tsxis excluded by!**/generated/**src/assets/icons/svg/add.svgis excluded by!**/*.svg,!**/*.svg
📒 Files selected for processing (48)
scripts/build-icons.tssrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.stories.tsxsrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsxsrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.tsxsrc/components/blog-reviews/BlogReviewModal/index.tssrc/components/blog-reviews/index.tssrc/components/common/FormField/FormField.tsxsrc/components/common/FormField/index.tssrc/components/common/ImageUploadBox/ImageUploadBox.stories.tsxsrc/components/common/ImageUploadBox/ImageUploadBox.test.tsxsrc/components/common/ImageUploadBox/ImageUploadBox.tsxsrc/components/common/ImageUploadBox/index.tssrc/components/common/Inputfield/Inputfield.stories.tsxsrc/components/common/Inputfield/Inputfield.tsxsrc/components/common/Inputfield/index.tssrc/components/common/Modal/Modal.stories.tsxsrc/components/common/Modal/Modal.test.tsxsrc/components/common/Modal/Modal.tsxsrc/components/common/Modal/index.tssrc/components/common/SelectField/SelectField.stories.tsxsrc/components/common/SelectField/SelectField.test.tsxsrc/components/common/SelectField/SelectField.tsxsrc/components/common/SelectField/index.tssrc/components/common/TextareaField/TextareaField.stories.tsxsrc/components/common/TextareaField/TextareaField.tsxsrc/components/common/TextareaField/index.tssrc/components/common/index.tssrc/components/index.tssrc/components/introductions/IntroductionCard/IntroductionCard.tsxsrc/components/introductions/PartnerImageBox/PartnerImageBox.tsxsrc/components/introductions/index.tssrc/components/projects/CompanyProjectModal/CompanyProjectModal.stories.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.test.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.tsxsrc/components/projects/CompanyProjectModal/index.tssrc/components/projects/MeetupProjectModal/MeetupProjectModal.stories.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.tsxsrc/components/projects/MeetupProjectModal/index.tssrc/components/projects/index.tssrc/components/reviews/ReviewModal/ReviewModal.stories.tsxsrc/components/reviews/ReviewModal/ReviewModal.test.tsxsrc/components/reviews/ReviewModal/ReviewModal.tsxsrc/components/reviews/ReviewModal/index.tssrc/components/reviews/index.tssrc/hooks/common/index.tssrc/hooks/common/useImageFileInput.tssrc/hooks/index.ts
💤 Files with no reviewable changes (1)
- src/components/introductions/index.ts
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 14
🤖 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/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsx`:
- Around line 34-90: BlogReviewModal 테스트에 활동 선택과 이미지 업로드 상호작용 검증이 누락되어 있습니다. 기존
파트 드롭다운 테스트 패턴을 참고해 활동 combobox에서 값을 선택한 뒤 onActivityChange 호출 인자를 검증하는 테스트를
추가하세요. 또한 ImageUploadBox를 통해 이미지 선택 시 onThumbnailChange, 삭제 시 onThumbnailDelete가
호출되는 테스트를 추가하고, 기존 renderModal 및 사용자 상호작용 방식을 재사용하세요.
In `@src/components/common/FormField/FormField.tsx`:
- Around line 12-14: FormField의 시각적 span을 실제 label 요소로 변경하고, 고유한 id를 생성하거나 전달받아
htmlFor로 연결하세요. FormField 호출부의 input 및 select 컨트롤에도 동일한 id를 지정하고, 커스텀 선택 컴포넌트는
필요 시 aria-labelledby로 라벨과 연결되도록 관련 props와 구현을 업데이트하세요.
In `@src/components/common/Inputfield/Inputfield.tsx`:
- Around line 16-18: Inputfield의 input에 outline-none만 적용되어 키보드 포커스 표시가 없습니다.
Inputfield 컴포넌트의 input className에 프로젝트 포커스 토큰을 사용하는 focus-visible 스타일을 추가하거나,
래퍼에 focus-within 스타일을 적용해 키보드 사용 시 명확한 포커스 링이 표시되도록 수정하세요.
In `@src/components/common/Modal/Modal.test.tsx`:
- Around line 6-56: Modal 테스트에 Dialog.Backdrop 클릭 동작을 검증하는 테스트를 추가하세요. 기존 Modal
테스트 구조에서 열려 있는 모달과 mock onOpenChange를 렌더링한 뒤, backdrop 요소를 식별해 클릭하고
onOpenChange가 false와 이벤트 인자로 호출되는지 확인하세요.
In `@src/components/common/Modal/Modal.tsx`:
- Around line 19-23: Dialog.Popup의 고정 너비 설정에 좁은 뷰포트 대응을 추가하세요. className 구성에서
w-[460px]와 함께 max-w-[calc(100vw-2rem)] 같은 viewport 기반 max-width 클래스를 지정해 모바일
화면에서 모달이 가로로 넘치지 않도록 수정하세요.
In `@src/components/common/TextareaField/TextareaField.tsx`:
- Around line 16-18: The TextareaField textarea removes the default focus
indicator without providing a keyboard focus replacement. Update the textarea
class list in TextareaField to add the project’s focus-token-based focus-visible
styling while retaining the existing appearance and behavior.
In `@src/components/projects/CompanyProjectModal/CompanyProjectModal.test.tsx`:
- Around line 23-68: CompanyProjectModal tests are missing coverage for banner
upload and deletion callbacks. Add tests alongside the existing input and button
interaction tests that locate the ImageUploadBox interaction controls, trigger
banner selection and deletion, and assert onBannerChange and onBannerDelete are
called with the expected values.
In `@src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx`:
- Around line 66-68: Replace the options-empty SelectField used for the “기수”
display in CompanyProjectModal with the shared read-only/static-value approach,
and apply the same common fix to the corresponding field in BlogReviewModal.
Ensure the rendered cardinal value remains unchanged without treating it as a
selectable field.
- Around line 79-87: Replace the `Inputfield` used in the `프로젝트 소개` `FormField`
within `CompanyProjectModal` with `TextareaField`, preserving the existing
`value`, `onChange`, and `placeholder` props so multiline project descriptions
are supported.
In `@src/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsx`:
- Around line 46-105: MeetupProjectModal 테스트에 주요 controlled callback 상호작용 검증이
부족하다. 기존 describe('MeetupProjectModal')에 프로젝트명·URL 입력 변경 후 onTypeChange 호출, 취소
버튼 클릭 후 onCancel 호출, 저장하기 버튼 클릭 후 onSave 호출, 포스터 파일 선택 및 삭제 후 각각
onFileChange·onDelete 호출을 확인하는 최소 테스트를 추가하라. 기존 renderModal 헬퍼와 실제 접근 가능한 역할·라벨을
사용해 각 콜백의 인자까지 검증하라.
In `@src/components/projects/MeetupProjectModal/MeetupProjectModal.tsx`:
- Around line 115-118: MeetupProjectModal의 기수 필드가 빈 options를 가진 SelectField로
렌더링되고 변경 처리도 없습니다. 해당 필드를 고정 표시로 사용할 경우 SelectField 대신 readOnly 입력으로 변경하고, 변경
가능해야 한다면 유효한 기수 옵션과 onValueChange 콜백을 연결하세요.
- Around line 146-154: 프로젝트 소개 입력이 한 줄 전용 Inputfield로 구현되어 있습니다.
MeetupProjectModal의 프로젝트 소개 FormField에서 Inputfield를 공통 TextareaField로 교체하고, 기존
intro 값·onIntroChange 핸들러·placeholder가 그대로 동작하도록 연결하세요.
- Around line 155-203: 팀원 관리의 반복되는 SelectField와 이름 Inputfield, 그리고 URL 입력 컨트롤에
고유하고 명확한 접근성 이름을 추가하세요. draft 필드와 각 member 행의 컨트롤이 서로 다른 id와 label로 연결되도록 하거나,
최소한 member 이름/파트를 식별하는 aria-label을 설정하며, 관련 URL 입력에도 동일한 방식으로 적용하세요.
In `@src/components/reviews/ReviewModal/ReviewModal.test.tsx`:
- Around line 11-18: ReviewModal 테스트에 실제 팀 선택 변경 시나리오를 추가하세요. renderModal의
onTeamChange mock을 사용해 팀 선택 UI를 조작한 뒤, 선택한 값이 인자로 전달되어 onTeamChange가 호출되는지
검증하세요. 기본 렌더링 테스트와 별도로 부모 상태 갱신 연결을 확인할 수 있도록 구성하세요.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: cc6018e2-a6b9-48b0-aa4d-5707eedd1091
⛔ Files ignored due to path filters (11)
src/assets/icons/generated/AddIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/AttachFileIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ChevronDownIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/DashboardIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/DeleteIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/ErrorIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/IntroductionIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/LogoutIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/MentoringIcon.tsxis excluded by!**/generated/**src/assets/icons/generated/UploadIcon.tsxis excluded by!**/generated/**src/assets/icons/svg/add.svgis excluded by!**/*.svg,!**/*.svg
📒 Files selected for processing (48)
scripts/build-icons.tssrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.stories.tsxsrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsxsrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.tsxsrc/components/blog-reviews/BlogReviewModal/index.tssrc/components/blog-reviews/index.tssrc/components/common/FormField/FormField.tsxsrc/components/common/FormField/index.tssrc/components/common/ImageUploadBox/ImageUploadBox.stories.tsxsrc/components/common/ImageUploadBox/ImageUploadBox.test.tsxsrc/components/common/ImageUploadBox/ImageUploadBox.tsxsrc/components/common/ImageUploadBox/index.tssrc/components/common/Inputfield/Inputfield.stories.tsxsrc/components/common/Inputfield/Inputfield.tsxsrc/components/common/Inputfield/index.tssrc/components/common/Modal/Modal.stories.tsxsrc/components/common/Modal/Modal.test.tsxsrc/components/common/Modal/Modal.tsxsrc/components/common/Modal/index.tssrc/components/common/SelectField/SelectField.stories.tsxsrc/components/common/SelectField/SelectField.test.tsxsrc/components/common/SelectField/SelectField.tsxsrc/components/common/SelectField/index.tssrc/components/common/TextareaField/TextareaField.stories.tsxsrc/components/common/TextareaField/TextareaField.tsxsrc/components/common/TextareaField/index.tssrc/components/common/index.tssrc/components/index.tssrc/components/introductions/IntroductionCard/IntroductionCard.tsxsrc/components/introductions/PartnerImageBox/PartnerImageBox.tsxsrc/components/introductions/index.tssrc/components/projects/CompanyProjectModal/CompanyProjectModal.stories.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.test.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.tsxsrc/components/projects/CompanyProjectModal/index.tssrc/components/projects/MeetupProjectModal/MeetupProjectModal.stories.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.tsxsrc/components/projects/MeetupProjectModal/index.tssrc/components/projects/index.tssrc/components/reviews/ReviewModal/ReviewModal.stories.tsxsrc/components/reviews/ReviewModal/ReviewModal.test.tsxsrc/components/reviews/ReviewModal/ReviewModal.tsxsrc/components/reviews/ReviewModal/index.tssrc/components/reviews/index.tssrc/hooks/common/index.tssrc/hooks/common/useImageFileInput.tssrc/hooks/index.ts
💤 Files with no reviewable changes (1)
- src/components/introductions/index.ts
🛑 Comments failed to post (14)
src/components/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsx (1)
34-90: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
활동 선택 및 이미지 업로드 상호작용 테스트 누락
파트드롭다운 선택 테스트는 있지만활동드롭다운 선택 시onActivityChange호출 여부,ImageUploadBox를 통한onThumbnailChange/onThumbnailDelete호출 여부에 대한 테스트가 없습니다.파트테스트 패턴을 그대로 재사용할 수 있어 추가 비용이 낮습니다.🤖 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/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsx` around lines 34 - 90, BlogReviewModal 테스트에 활동 선택과 이미지 업로드 상호작용 검증이 누락되어 있습니다. 기존 파트 드롭다운 테스트 패턴을 참고해 활동 combobox에서 값을 선택한 뒤 onActivityChange 호출 인자를 검증하는 테스트를 추가하세요. 또한 ImageUploadBox를 통해 이미지 선택 시 onThumbnailChange, 삭제 시 onThumbnailDelete가 호출되는 테스트를 추가하고, 기존 renderModal 및 사용자 상호작용 방식을 재사용하세요.Source: Path instructions
src/components/common/FormField/FormField.tsx (1)
12-14: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
라벨을 실제 폼 컨트롤과 연결해 주세요.
span은 시각적 텍스트만 제공하므로 입력/선택 필드와의 관계가 전달되지 않습니다.htmlFor와 고유id계약을 추가해<label>로 렌더링하고, 호출부에서도 연결해야 합니다. 커스텀 선택 컴포넌트는 필요에 따라aria-labelledby를 사용하세요.🤖 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/FormField/FormField.tsx` around lines 12 - 14, FormField의 시각적 span을 실제 label 요소로 변경하고, 고유한 id를 생성하거나 전달받아 htmlFor로 연결하세요. FormField 호출부의 input 및 select 컨트롤에도 동일한 id를 지정하고, 커스텀 선택 컴포넌트는 필요 시 aria-labelledby로 라벨과 연결되도록 관련 props와 구현을 업데이트하세요.Source: Path instructions
src/components/common/Inputfield/Inputfield.tsx (1)
16-18: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash set -euo pipefail echo "[1] file list" git ls-files 'src/components/common/Inputfield/Inputfield.tsx' 'src/components/common/**' | sed -n '1,120p' echo echo "[2] outline" ast-grep outline src/components/common/Inputfield/Inputfield.tsx --view expanded echo echo "[3] file content" cat -n src/components/common/Inputfield/Inputfield.tsx echo echo "[4] search for focus-visible/focus-within patterns in common components" rg -n --hidden --glob 'src/components/common/**' 'focus-visible|focus-within|outline-none|ring-|focus:' .Repository: kusitms-com/makers-admin-fe
Length of output: 5118
🏁 Script executed:
#!/bin/bash set -euo pipefail echo "[1] focus-related patterns across src" rg -n --hidden --glob 'src/**' 'focus-visible|focus-within|ring-|outline-none|focus:' src echo echo "[2] inspect TextareaField" cat -n src/components/common/TextareaField/TextareaField.tsx echo echo "[3] inspect SelectField around focus styles" sed -n '1,140p' src/components/common/SelectField/SelectField.tsx echo echo "[4] inspect Button for shared interaction styling" sed -n '1,140p' src/components/common/Button/Button.tsxRepository: kusitms-com/makers-admin-fe
Length of output: 6961
키보드 포커스 표시를 추가해 주세요.
outline-none으로 기본 포커스 링을 제거했지만 대체focus-visible또는 래퍼의focus-within상태가 없습니다. 키보드 사용자가 현재 입력 위치를 확인할 수 있도록 프로젝트 포커스 토큰을 적용해 주세요.🤖 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/Inputfield/Inputfield.tsx` around lines 16 - 18, Inputfield의 input에 outline-none만 적용되어 키보드 포커스 표시가 없습니다. Inputfield 컴포넌트의 input className에 프로젝트 포커스 토큰을 사용하는 focus-visible 스타일을 추가하거나, 래퍼에 focus-within 스타일을 적용해 키보드 사용 시 명확한 포커스 링이 표시되도록 수정하세요.Source: Path instructions
src/components/common/Modal/Modal.test.tsx (1)
6-56: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
backdrop 클릭으로 닫히는 동작에 대한 테스트 누락
open/close, Escape, footer 렌더링은 잘 커버되지만
Dialog.Backdrop클릭 시onOpenChange(false, ...)가 호출되는지 검증하는 테스트가 없습니다. 모달의 핵심 UX 동작 중 하나이므로 추가하면 회귀 방지에 도움이 됩니다.🤖 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/Modal/Modal.test.tsx` around lines 6 - 56, Modal 테스트에 Dialog.Backdrop 클릭 동작을 검증하는 테스트를 추가하세요. 기존 Modal 테스트 구조에서 열려 있는 모달과 mock onOpenChange를 렌더링한 뒤, backdrop 요소를 식별해 클릭하고 onOpenChange가 false와 이벤트 인자로 호출되는지 확인하세요.src/components/common/Modal/Modal.tsx (1)
19-23: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
좁은 뷰포트에서 모달 폭을 제한해야 합니다.
w-[460px]만 지정되어 모바일이나 좁은 브라우저에서는 모달이 화면을 가로로 넘칠 수 있습니다. 저장·취소 버튼과 입력 필드가 화면 밖으로 밀리지 않도록max-w-[calc(100vw-2rem)]같은 viewport 기반 제한을 추가해 주세요.권장 수정
- 'border-line-neutral bg-fill-normal fixed top-1/2 left-1/2 z-50 flex max-h-[90vh] w-[460px] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-[0px_16px_24px_-6px_rgba(23,23,23,0.08),0px_6px_10px_-4px_rgba(23,23,23,0.08)]', + 'border-line-neutral bg-fill-normal fixed top-1/2 left-1/2 z-50 flex max-h-[90vh] w-[460px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-[0px_16px_24px_-6px_rgba(23,23,23,0.08),0px_6px_10px_-4px_rgba(23,23,23,0.08)]',📝 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.<Dialog.Popup className={cn( 'border-line-neutral bg-fill-normal fixed top-1/2 left-1/2 z-50 flex max-h-[90vh] w-[460px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 flex-col rounded-xl border shadow-[0px_16px_24px_-6px_rgba(23,23,23,0.08),0px_6px_10px_-4px_rgba(23,23,23,0.08)]', className, )}🤖 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/Modal/Modal.tsx` around lines 19 - 23, Dialog.Popup의 고정 너비 설정에 좁은 뷰포트 대응을 추가하세요. className 구성에서 w-[460px]와 함께 max-w-[calc(100vw-2rem)] 같은 viewport 기반 max-width 클래스를 지정해 모바일 화면에서 모달이 가로로 넘치지 않도록 수정하세요.src/components/common/TextareaField/TextareaField.tsx (1)
16-18: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
키보드 포커스 표시를 복구해야 합니다.
outline-none으로 기본 포커스 표시를 제거했지만focus-visible대체 스타일이 없습니다. 키보드 사용자가 현재 입력 필드를 확인할 수 있도록 프로젝트 포커스 토큰을 사용한 visible focus style을 추가해 주세요.🤖 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/TextareaField/TextareaField.tsx` around lines 16 - 18, The TextareaField textarea removes the default focus indicator without providing a keyboard focus replacement. Update the textarea class list in TextareaField to add the project’s focus-token-based focus-visible styling while retaining the existing appearance and behavior.Source: Path instructions
src/components/projects/CompanyProjectModal/CompanyProjectModal.test.tsx (1)
23-68: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
배너 업로드 상호작용 테스트 누락
onBannerChange/onBannerDelete콜백에 대한 테스트가 없습니다. "기업 이름" 입력 테스트 패턴을 재사용해ImageUploadBox상호작용도 검증하는 것을 권장합니다.🤖 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/projects/CompanyProjectModal/CompanyProjectModal.test.tsx` around lines 23 - 68, CompanyProjectModal tests are missing coverage for banner upload and deletion callbacks. Add tests alongside the existing input and button interaction tests that locate the ImageUploadBox interaction controls, trigger banner selection and deletion, and assert onBannerChange and onBannerDelete are called with the expected values.Source: Path instructions
src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx (2)
66-68: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
"기수" 필드 SelectField 재사용 - 동일 문제 반복
BlogReviewModal.tsxLine 74-76과 동일하게 정적 값 표시에 옵션 없는 SelectField를 사용하고 있습니다. 같은 근본 원인이므로 공통 수정이 필요합니다.🤖 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/projects/CompanyProjectModal/CompanyProjectModal.tsx` around lines 66 - 68, Replace the options-empty SelectField used for the “기수” display in CompanyProjectModal with the shared read-only/static-value approach, and apply the same common fix to the corresponding field in BlogReviewModal. Ensure the rendered cardinal value remains unchanged without treating it as a selectable field.
79-87: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash set -euo pipefail printf '--- CompanyProjectModal.tsx outline ---\n' ast-grep outline src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx --view expanded || true printf '\n--- TextareaField files ---\n' fd -a 'TextareaField.*' src || true printf '\n--- Inputfield files ---\n' fd -a 'Inputfield.*' src || trueRepository: kusitms-com/makers-admin-fe
Length of output: 256
🏁 Script executed:
#!/bin/bash set -euo pipefail # Read the relevant component and the common textarea field in small slices. for f in \ src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx \ src/components/common/TextareaField/TextareaField.tsx \ src/components/common/Inputfield/Inputfield.tsx do if [ -f "$f" ]; then echo "===== $f =====" wc -l "$f" fi done echo "===== CompanyProjectModal.tsx (lines 1-180) =====" sed -n '1,180p' src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx echo "===== TextareaField.tsx =====" sed -n '1,220p' src/components/common/TextareaField/TextareaField.tsx echo "===== Inputfield.tsx =====" sed -n '1,220p' src/components/common/Inputfield/Inputfield.tsxRepository: kusitms-com/makers-admin-fe
Length of output: 4512
프로젝트 소개는TextareaField로 교체하세요.
지금Inputfield라서 여러 줄 입력이 막히고, 소개 영역 의도와도 맞지 않습니다.TextareaField를 쓰면onChange타입도 그대로 맞습니다.🤖 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/projects/CompanyProjectModal/CompanyProjectModal.tsx` around lines 79 - 87, Replace the `Inputfield` used in the `프로젝트 소개` `FormField` within `CompanyProjectModal` with `TextareaField`, preserving the existing `value`, `onChange`, and `placeholder` props so multiline project descriptions are supported.src/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsx (1)
46-105: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
주요 controlled callback 테스트를 보강하세요.
현재 테스트는 팀원 흐름과 저장 버튼 비활성화만 검증합니다.
onTypeChange, 프로젝트/URL 입력 변경,onCancel,onSave, 포스터onFileChange·onDelete가 올바르게 호출되는지 최소한의 상호작용 테스트를 추가해야 wiring 회귀를 잡을 수 있습니다.🤖 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/projects/MeetupProjectModal/MeetupProjectModal.test.tsx` around lines 46 - 105, MeetupProjectModal 테스트에 주요 controlled callback 상호작용 검증이 부족하다. 기존 describe('MeetupProjectModal')에 프로젝트명·URL 입력 변경 후 onTypeChange 호출, 취소 버튼 클릭 후 onCancel 호출, 저장하기 버튼 클릭 후 onSave 호출, 포스터 파일 선택 및 삭제 후 각각 onFileChange·onDelete 호출을 확인하는 최소 테스트를 추가하라. 기존 renderModal 헬퍼와 실제 접근 가능한 역할·라벨을 사용해 각 콜백의 인자까지 검증하라.Source: Path instructions
src/components/projects/MeetupProjectModal/MeetupProjectModal.tsx (3)
115-118: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
기수 필드에 빈 선택지를 넘기지 마세요.
SelectField에options={[]}을 전달하고 변경 콜백도 연결하지 않아, 선택 컨트롤이지만 사용자가 선택할 항목이 없습니다. 고정 표시라면readOnly입력으로 렌더링하고, 변경 가능해야 한다면 실제 옵션과onValueChange를 전달하세요.🤖 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/projects/MeetupProjectModal/MeetupProjectModal.tsx` around lines 115 - 118, MeetupProjectModal의 기수 필드가 빈 options를 가진 SelectField로 렌더링되고 변경 처리도 없습니다. 해당 필드를 고정 표시로 사용할 경우 SelectField 대신 readOnly 입력으로 변경하고, 변경 가능해야 한다면 유효한 기수 옵션과 onValueChange 콜백을 연결하세요.
146-154: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
프로젝트 소개를
TextareaField로 변경하세요.현재
Inputfield라서 한 줄만 입력할 수 있습니다. PR 요구사항의 프로젝트 소개는 긴 여러 줄 텍스트를 입력하는 영역이므로, 공통TextareaField를 사용해야 합니다.🤖 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/projects/MeetupProjectModal/MeetupProjectModal.tsx` around lines 146 - 154, 프로젝트 소개 입력이 한 줄 전용 Inputfield로 구현되어 있습니다. MeetupProjectModal의 프로젝트 소개 FormField에서 Inputfield를 공통 TextareaField로 교체하고, 기존 intro 값·onIntroChange 핸들러·placeholder가 그대로 동작하도록 연결하세요.
155-203: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
반복 필드에 개별 접근 가능한 이름을 연결하세요.
팀원 관리의 각 선택/이름 필드와 URL 입력은 외부 그룹 라벨 또는 일반span에만 의존합니다. 특히 저장된 팀원 이름 입력에는 라벨이나 placeholder도 없어 여러 행을 스크린 리더로 구분할 수 없습니다. 각 컨트롤에label-id연결 또는 명확한aria-label을 추가하세요.Also applies to: 213-244
🤖 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/projects/MeetupProjectModal/MeetupProjectModal.tsx` around lines 155 - 203, 팀원 관리의 반복되는 SelectField와 이름 Inputfield, 그리고 URL 입력 컨트롤에 고유하고 명확한 접근성 이름을 추가하세요. draft 필드와 각 member 행의 컨트롤이 서로 다른 id와 label로 연결되도록 하거나, 최소한 member 이름/파트를 식별하는 aria-label을 설정하며, 관련 URL 입력에도 동일한 방식으로 적용하세요.Source: Path instructions
src/components/reviews/ReviewModal/ReviewModal.test.tsx (1)
11-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
파트 선택 콜백을 테스트해 주세요.
onTeamChange를 mock으로 주입하지만 실제 선택 변경은 검증하지 않습니다. 선택 후 부모 상태 갱신이 끊기는 회귀를 방지하도록 선택값과 함께onTeamChange호출을 확인하는 테스트를 추가하세요.Also applies to: 41-57
🤖 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/reviews/ReviewModal/ReviewModal.test.tsx` around lines 11 - 18, ReviewModal 테스트에 실제 팀 선택 변경 시나리오를 추가하세요. renderModal의 onTeamChange mock을 사용해 팀 선택 UI를 조작한 뒤, 선택한 값이 인자로 전달되어 onTeamChange가 호출되는지 검증하세요. 기본 렌더링 테스트와 별도로 부모 상태 갱신 연결을 확인할 수 있도록 구성하세요.Source: Path instructions
KyeongJooni
reviewed
Jul 11, 2026
| export function FormField({ label, children, className }: FormFieldProps) { | ||
| return ( | ||
| <div className={cn('flex flex-col gap-2', className)}> | ||
| <span className="text-label-13b text-label-normal">{label}</span> |
Member
There was a problem hiding this comment.
단순 span으로 렌더링 하지 말고 접근성 챙겨서 label 태그로 연결하는건 어떨까요?
KyeongJooni
reviewed
Jul 11, 2026
Member
There was a problem hiding this comment.
Base UI로 접근성 챙겨서 사용한 거 좋은 것 같아요!! 다만 공용 Modal 구조가 고정적이라 예외 처리마다 prop이 늘어날 수 있을 수도 있을 것 같은데, header/footer 같은 slot 구조로 열어두면 더 유연할 것 같습니다!!
CI 결과
|
There was a problem hiding this comment.
Actionable comments posted: 12
🤖 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/blog-reviews/BlogReviewModal/BlogReviewModal.tsx`:
- Around line 87-100: Extract the duplicated cancel/save button block from the
BlogReviewModal footer into the shared footer component identified by the
consolidate guidance, then reuse that component here with the existing onCancel,
onSave, saveDisabled, variants, sizes, and labels preserved.
- Around line 55-57: Extract the repeated 기수 FormField and SelectField markup
from BlogReviewModal into a shared component, then reuse it in BlogReviewModal,
CompanyProjectModal, and MeetupProjectModal. Preserve the current
`${String(cardinal)}기` value and existing field styling and behavior across all
three modals.
In `@src/components/common/FormField/FormField.tsx`:
- Around line 11-20: Update the FormField ID handling so the child’s existing id
is preferred, otherwise use the generated fieldId; use this same resolved ID for
both the cloned child’s id and the label’s htmlFor, preserving the label-field
accessibility connection.
In `@src/components/common/Modal/Modal.tsx`:
- Around line 79-83: Resolve the Fast Refresh warning around the compound
`Modal` export by moving the `Object.assign` composition into a separate barrel
module, or by adding a narrowly scoped exception for this compound-component
pattern. Keep `ModalRoot`, `ModalTitle`, `ModalBody`, and `ModalFooter` exports
and the public `Modal` API unchanged.
In `@src/components/common/SelectField/SelectField.tsx`:
- Around line 36-40: Update the read-only fallback in SelectField so the element
rendered when onValueChange is absent is labelable and supports FormField’s
htmlFor connection; replace the generic div while preserving its id, aria-label,
classes, and selectedLabel content. Add a test covering the FormField +
SelectField read-only combination and verify getByLabelText('기수') resolves the
field.
In `@src/components/projects/CompanyProjectModal/CompanyProjectModal.tsx`:
- Around line 47-49: Remove the duplicated 기수 field block from
CompanyProjectModal and reuse the shared component or existing abstraction used
by BlogReviewModal and MeetupProjectModal. Preserve the current cardinal value
formatting and layout while consolidating the common implementation.
- Around line 77-90: CompanyProjectModal의 Modal.Footer 버튼 블록이 BlogReviewModal 및
MeetupProjectModal과 중복됩니다. 공통 Footer 버튼 UI를 재사용 가능한 컴포넌트 또는 기존 공통 구현으로 통합하고,
CompanyProjectModal의 취소·저장 동작과 saveDisabled 상태 전달은 그대로 유지하세요.
In `@src/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsx`:
- Around line 128-136: Update the saveDisabled=false test to query the single
저장하기 button with a singular role query instead of getAllByRole and selecting the
last element, then click that button and preserve the existing onSave assertion.
In `@src/components/projects/MeetupProjectModal/MeetupProjectModal.tsx`:
- Around line 97-99: Remove the duplicated 기수 FormField block from
MeetupProjectModal and reuse the shared implementation or component already used
by CompanyProjectModal and BlogReviewModal, preserving the existing cardinal
value and layout behavior.
- Around line 240-253: MeetupProjectModal의 Modal.Footer 버튼 블록이
CompanyProjectModal 및 BlogReviewModal과 중복됩니다. 해당 공통 Footer 버튼 UI를 재사용 가능한 기존
컴포넌트 또는 공통 패턴으로 통합하고, MeetupProjectModal에서는 saveDisabled, onCancel, onSave 등 필요한
동작과 상태만 전달해 중복 마크업을 제거하세요.
- Around line 164-192: Update the member removal Button in the members.map block
to use a unique accessible name that includes the associated member.name, while
preserving its visible “삭제하기” label. Ensure it is distinguishable from other
member removal buttons and the poster image deletion button rendered by
ImageUploadBox.
- Around line 155-162: Update the “추가하기” Button in MeetupProjectModal so it sets
the disabled prop when draftName.trim() is empty, matching the existing save
button behavior; keep the current variant styling and handleAddMember callback
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: ASSERTIVE
Plan: Pro
Run ID: 0d0ba2a3-e68a-44be-9565-f55c7dd86675
📒 Files selected for processing (14)
src/components/blog-reviews/BlogReviewModal/BlogReviewModal.test.tsxsrc/components/blog-reviews/BlogReviewModal/BlogReviewModal.tsxsrc/components/common/FormField/FormField.tsxsrc/components/common/Inputfield/Inputfield.tsxsrc/components/common/Modal/Modal.stories.tsxsrc/components/common/Modal/Modal.test.tsxsrc/components/common/Modal/Modal.tsxsrc/components/common/SelectField/SelectField.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.test.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.test.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.tsxsrc/components/reviews/ReviewModal/ReviewModal.test.tsxsrc/components/reviews/ReviewModal/ReviewModal.tsx
Comment on lines
+55
to
+57
| <FormField label="기수" className="flex-1"> | ||
| <SelectField value={`${String(cardinal)}기`} options={[]} /> | ||
| </FormField> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
기수 필드 블록 중복.
CompanyProjectModal.tsx, MeetupProjectModal.tsx와 동일한 기수 FormField+SelectField 블록이 반복됩니다. 공유 컴포넌트로 추출 권장(상세는 컨솔리데이트 코멘트 참고).
🤖 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/blog-reviews/BlogReviewModal/BlogReviewModal.tsx` around lines
55 - 57, Extract the repeated 기수 FormField and SelectField markup from
BlogReviewModal into a shared component, then reuse it in BlogReviewModal,
CompanyProjectModal, and MeetupProjectModal. Preserve the current
`${String(cardinal)}기` value and existing field styling and behavior across all
three modals.
Source: Path instructions
CI 결과
|
KyeongJooni
reviewed
Jul 11, 2026
Member
There was a problem hiding this comment.
compound 전환보다는 slot 구조가 더 디자인과 맞을 것 같습니다. header/footer prop처럼 필요한 영역만 주입하면 될 것 같습니다!
interface ModalProps {
title?: string
header?: ReactNode
footer?: ReactNode
children: ReactNode
}이런식으로요! 😄
| const fieldId = useId() | ||
| const isElementChild = isValidElement<{ id?: string }>(children) | ||
| const resolvedId = isElementChild ? (children.props.id ?? fieldId) : fieldId | ||
| const field = isElementChild ? cloneElement(children, { id: resolvedId }) : children |
Member
There was a problem hiding this comment.
커스텀 입력 컴포넌트가 들어올 때도 실제 입력 요소와 잘 연결되는지 확인해보시면 좋을 것 같습니다!!
ex) ImageUploadBox
Modal.Title/Body/Footer 대신 title/header/footer props로 필요한 영역만 주입하도록 바꿔 사용 측 구조를 단순화
Modal.Title/Body/Footer 조합 대신 title/header/footer props를 사용하도록 사용처를 갱신
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/Modal/Modal.tsx`:
- Around line 5-13: header만 제공되는 경우에도 접근 가능한 모달 이름이 유지되도록 Modal의 다이얼로그 렌더링을
수정하세요. header를 표시할 때 숨김 Dialog.Title을 유지하거나 aria-label/aria-labelledby를
ModalProps로 받아 Dialog에 전달하고, 기존 title 경로의 동작은 보존하세요.
🪄 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: ASSERTIVE
Plan: Pro
Run ID: d927a9f3-d363-4150-a41e-7d7c95cbc269
📒 Files selected for processing (8)
src/components/blog-reviews/BlogReviewModal/BlogReviewModal.tsxsrc/components/common/Modal/Modal.stories.tsxsrc/components/common/Modal/Modal.test.tsxsrc/components/common/Modal/Modal.tsxsrc/components/common/ModalActions/ModalActions.tsxsrc/components/projects/CompanyProjectModal/CompanyProjectModal.tsxsrc/components/projects/MeetupProjectModal/MeetupProjectModal.tsxsrc/components/reviews/ReviewModal/ReviewModal.tsx
ImageUploadBox가 id prop을 받지 않고 내부에서 독자적으로 id를 생성해, FormField의 label과 실제 파일 input이 연결되지 않던 문제를 수정
CI 결과
|
CI 결과
|
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.
#️⃣ 연관된 이슈
🚧 Work in Progress
📌 주요 변경사항
📝 작업 내용
📸 스크린샷 (선택)
💬 리뷰 요구사항(선택)
Summary by CodeRabbit