Repository navigation
[fix] styled 컴포넌트의 스타일용 prop이 DOM 속성으로 새지 않게 transient prop으로 바꾼다 - #2249
Conversation
styled-components v6는 DOM 대상 styled 컴포넌트에서 $ 없는 prop을 거르지 않고 그대로 DOM 속성으로 넘긴다(v5의 is-prop-valid 기본 필터가 없다). 그래서 isScrolled·active·hasError 같은 스타일 분기용 prop이 React prop 경고를 내고, Shape의 laptop처럼 객체 prop은 "[object Object]" 속성으로 박혔다. 스타일 분기에만 쓰는 prop을 $ prop으로 바꾸고 호출부를 맞춘다. 실제 HTML 속성으로 넘기는 Input readOnly, Arrow(img) width/height, th width는 그대로 둔다. 감싸는 컴포넌트의 공개 prop 이름은 바꾸지 않는다.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Claude finished @seongwon030's task in 1m 23s —— View job harry 리뷰 총평
범위를 잘 지켰어요. 스타일에만 쓰는 prop을 확인한 것
인라인 코멘트 2건 (둘 다 가벼운 제안이에요)
참고
|
![diboreview-e2e-bot[bot]](https://avatars.githubusercontent.com/in/5274969?s=60&v=4){kind=small}
|
Warning Review limit reachedYou've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. Next included review available in 56 minutes. View limit details
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
공통 컴포넌트 스타일 prop frontend/src/components/ClubTag/ClubTag.tsx, frontend/src/components/common/CustomTextArea/*, frontend/src/components/common/Header/*, frontend/src/components/common/InputField/*, frontend/src/components/promotion/PromotionCardView/DdayBadge/* |
태그 색상, 입력 너비·오류 상태, 헤더 스크롤 상태, 입력 오류·성공 상태, D-day 종료 상태 prop을 $ 접두사 형태로 변경했습니다. 스타일 조건과 색상 선택은 유지됩니다. |
관리자 화면 스타일 prop frontend/src/pages/AdminPage/components/QuestionBuilder/*, frontend/src/pages/AdminPage/tabs/ApplicantsTab/*, frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/components/desktop/SelectTags/* |
질문 빌더의 활성·열림·읽기 전용 상태, 지원자 탭의 배경색·비활성·표시 상태, 태그 선택 버튼의 선택·색상 prop을 $ 접두사 형태로 변경했습니다. |
신청 폼과 사진 모달 frontend/src/pages/ApplicationFormPage/components/QuestionContainer/QuestionContainer.tsx, frontend/src/pages/ClubDetailPage/components/PhotoModal/* |
질문 컨테이너의 오류 상태와 사진 모달의 버튼 위치·썸네일 활성 상태 prop을 $ 접두사 형태로 변경했습니다. |
소개 및 메인 화면 스타일 prop frontend/src/pages/IntroducePage/components/sections/1.IntroSection/*, frontend/src/pages/IntroducePage/components/sections/7.ContactSection/*, frontend/src/pages/MainPage/components/Banner/*, frontend/src/pages/MainPage/components/Popup/* |
소개 페이지 도형 위치와 메인 배너·팝업 상태 prop을 $ 접두사 형태로 변경했습니다. 위치값과 상태별 스타일 조건은 유지됩니다. |
Priority:
Estimated code review effort: 2 (Simple) | ~12 minutes
Change: Bug fix · Severity of issue fixed: Low
Suggested labels: 💻 FE
Suggested reviewers: oesnuj
Merge Risk: 
de7ec
-
No confirmed issue prevents merging after normal checks.
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check 제목은 styled-components의 스타일 전용 prop을 transient prop으로 변경하여 DOM 속성 누출을 방지하는 PR의 주요 변경 사항을 정확히 요약합니다. Linked Issues check [ #2247,#2248] 두 이슈의 코딩 요구사항은 같은 내용입니다. 스타일 분기용$없는 prop을 transient prop($)으로 바꾸고 호출부를 맞추는 작업입니다. 변경 요약 기준으로 대상 목록의 항목은 모두 변경되었습니다.
- Header:isScrolled→$isScrolled
- ClubTagStyledTag: `…Out of Scope Changes check 모든 변경은 #2247·#2248의 대상 목록 또는 명시된 제외 항목과 연결됩니다. 대상 목록에 없는 변경은SelectTags.styles.ts의Button(selected·color→$selected·$color)과 그 호출부SelectTags.tsx입니다. 이 변경은 DOM 대상 styled 컴포넌트에$없는 스타…Docstring Coverage No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2… Full details: Linked Issues check
-
Explanation
[
#2247,#2248] 두 이슈의 코딩 요구사항은 같은 내용입니다. 스타일 분기용$없는 prop을 transient prop($)으로 바꾸고 호출부를 맞추는 작업입니다. 변경 요약 기준으로 대상 목록의 항목은 모두 변경되었습니다.- Header:
isScrolled→$isScrolled - ClubTag
StyledTag:color→$color - CustomTextArea:
TextAreaContainerwidth→$width,TextAreahasError→$hasError - InputField:
InputContainerwidth,InputhasError·isSuccess,HelperTextisError를$접두사로 변경 - DdayBadge
DdayText:isEnded→$isEnded - QuestionBuilder:
active,open,readOnly를$active,$open,$readOnly로 변경 - ApplicantsTab:
SummaryCardbgColor,StatusSelectdisabled,DeleteButtondisabled,ApplicantTableHeaderborderLeft·isMemo,ApplicantTableColisMemo,ApplicantStatusBadgestatus를$접두사로 변경 - QuestionContainer
Container:hasError→$hasError - PhotoModal:
NavButtonposition,ThumbnailisActive를$position,$isActive로 변경 - IntroSection
Shape7개 prop, ContactSectionShape4개 prop을$접두사로 변경 - Banner:
BannerItemisClickable,Dotactive를$접두사로 변경 - Popup:
Overlay,ModalContainer의isOpen을$isOpen으로 변경
실제 HTML 속성은 요구대로 유지되었습니다:
InputreadOnly,Arrow(img)width·height,ApplicantTableHeader(th)width. 감싸는 컴포넌트(InputField,CustomTextArea,QuestionContainer)의 공개 prop 이름도 유지되었습니다.HEAD 소스 확인:
ApplicantsTab.styles.ts의 선언과ApplicantsTab.tsx의 호출부(SummaryCard $bgColor,StatusSelect $disabled,DeleteButton $disabled,Arrow width/height유지)가 일치합니다. 나머지 파일은 변경 요약과 PR 설명을 근거로 판단했습니다.테스트: 변경 요약에는 테스트 파일 변경이 없습니다. PR은 jest 102 suites / 777 tests 통과와
tsc통과를 보고합니다. 호출부 테스트의 prop 이름 갱신 요구는 충족된 것으로 봅니다.Playwright 콘솔 경고 0건 확인은 검증 절차입니다. 비코딩 항목이므로 판정 기준에서 제외했습니다.
- Header:
Full details: Out of Scope Changes check
-
Explanation
모든 변경은
#2247·#2248의 대상 목록 또는 명시된 제외 항목과 연결됩니다. 대상 목록에 없는 변경은SelectTags.styles.ts의Button(selected·color→$selected·$color)과 그 호출부SelectTags.tsx입니다. 이 변경은 DOM 대상 styled 컴포넌트에$없는 스타일 prop을 넘기는 같은 문제입니다. 이슈 제목의 일반 범위에 속하고 PR 설명에서 명시적으로 밝혔습니다. 따라서 범위를 벗어난 변경으로 보지 않습니다.나머지 변경은 다음 중 하나입니다.
- 대상 prop의 선언과 호출부 갱신(예:
IntroSection.tsx의SHAPES설정 키 변경,Banner.tsx,Popup.tsx,ApplicantsTab.tsx의$전달) - 명시된 제외 항목 유지(
InputreadOnly,Arrowwidth·height,thwidth)
관련 없는 기능 변경, 리팩터링, 문서 변경은 변경 요약에서 발견되지 않았습니다.
- 대상 prop의 선언과 호출부 갱신(예:
Full details: Docstring Coverage
-
Explanation
No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 26 files.
-
Finishing Touches
-
📝 Generate docstrings
-
- Commit to this branch
- Create a new PR
🧪 Generate unit tests (beta)
-
- Commit to this branch
- Create a new PR
-
- Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
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 help to get the list of available commands.
![reviewer-harry[bot]](https://avatars.githubusercontent.com/in/4158742?s=60&v=4){kind=small}
🎨 UI 변경사항을 확인해주세요
9개 스토리 변경 · 전체 191개 스토리 · 67개 컴포넌트 |
Close #2248
Close #2247
문제
styled-components v6는 DOM 대상 styled 컴포넌트에 들어온
$없는 prop을 거르지 않고 DOM 속성으로 넘긴다. 스타일 분기용 prop(isScrolled,active,hasError…)이 그대로 새어 개발 콘솔에 React prop 경고가 쌓이고,IntroSection의Shape처럼 객체 prop은laptop="[object Object]"로 박혔다. 사용자에게 보이는 깨짐은 없지만 진짜 경고가 묻힌다.해결
스타일 분기에만 쓰는 prop을 transient prop(
$)으로 바꾸고 호출부를 맞췄다. 이미 10개 파일이 쓰는$active방식을 따랐다. 이슈 표에 없던SelectTags의Button(selected·color)도 같은 문제라 함께 고쳤다.Input의readOnly,Arrow(img)의width·height,th의width는 그대로 둔다.InputField,CustomTextArea,QuestionContainer)의 공개 prop 이름은 바꾸지 않는다.검증
develop-fe와 이 브랜치를 Playwright로 나란히 띄워 대조했다./·/introduce·/peacetsc통과, jest 102 suites / 777 tests 통과InputField·CustomTextArea의 에러/성공 상태, 지원서 작성QuestionContainer에러,PhotoModal,DdayBadge,Popup. 이 컴포넌트들은 코드와 타입으로만 확인했다.영향 범위
학생용(헤더, 메인 배너·팝업, 소개, 상세 사진 모달, 지원서 작성)과 관리자용(지원서 편집, 지원자 목록, 동아리 정보)에 닿는다. 앱 웹뷰도 같은 화면을 쓴다. prop 이름만 바뀌고 스타일 값은 같다. 백엔드·앱 배포 순서 제약은 없다.
한계와 대안(선택)
앱 루트에
StyleSheetManager shouldForwardProp를 두는 방법은 고르지 않았다. 한 번에 막히지만 잘못 쓴 prop이 조용히 숨고,is-prop-valid가 모르는 커스텀 속성까지 걸러질 수 있다.Summary by CodeRabbit