[fix] styled-components unknown prop warning 제거

[seongwon030]

#️⃣연관된 이슈

ex) #376

📝작업 내용

warning 화면

1번

2번

3번

4번

5번

6번

7번

8번

9번

문제 원인

• styled-components는 사용자 정의 props를 자동 필터링하지 않기 때문에, isFocused가 실제 DOM (<form>, <button>)에 전달되어 React 콘솔 경고가 발생했습니다.
• isAnimating, isActive, state, isClicked, imageSrc, varient, bgColor, textColor도 같은 이유입니다.

해결

• SearchBox 컴포넌트 내에서 사용하던 isFocused props를 $isFocused로 변경하여 styled-components의 transient prop 기능을 적용했습니다.
• Banner 컴포넌트 내 isAnimating props를 $isAnimating로 변경했습니다.
• transient prop은 styled component에서는 사용이 되지만, 실제 DOM 요소에 직접적으로 부여되지 않게 합니다.
• 이를 통해 isFocused가 DOM에 전달되어 발생하던 경고 메시지를 제거했습니다.

중점적으로 리뷰받고 싶은 부분(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

논의하고 싶은 부분(선택)

논의하고 싶은 부분이 있다면 작성해주세요.

🫡 참고사항

Summary by CodeRabbit

Summary by CodeRabbit

• Style
  • 스타일링 관련 속성명이 $ 접두어가 붙는 형태로 일관되게 변경되어 UI 구성 요소의 내부 코드 품질이 향상되었습니다. 사용자에게 보이는 기능이나 동작에는 변화가 없습니다.

[coderabbitai]

"""

Walkthrough

이 변경사항은 SearchBox, Banner, ClubCard, StatusRadioButton 컴포넌트의 스타일드 컴포넌트에서 사용되는 boolean 및 기타 prop 이름을 isFocused, isAnimating, state, isClicked, isActive 등에서 각각 $isFocused, $isAnimating, $state, $isClicked, $isActive로 변경하여, 불필요한 prop이 DOM에 전달되는 것을 방지하는 스타일드 컴포넌트의 권장 네이밍 컨벤션을 적용한 것입니다. 기능적 변경은 없습니다.

Changes

파일 경로	변경 요약
frontend/src/components/common/SearchBox/SearchBox.styles.ts, frontend/src/components/common/SearchBox/SearchBox.tsx	스타일드 컴포넌트의 prop 명칭을 isFocused → $isFocused로 일괄 변경, 관련 타입 선언 및 참조도 함께 수정
frontend/src/pages/MainPage/components/Banner/Banner.styles.ts, frontend/src/pages/MainPage/components/Banner/Banner.tsx	스타일드 컴포넌트의 prop 명칭을 isAnimating → $isAnimating로 변경, 관련 타입 선언 및 참조도 함께 수정
frontend/src/pages/MainPage/components/ClubCard/ClubCard.styles.ts, frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx	스타일드 컴포넌트의 prop 명칭을 state, isClicked → $state, $isClicked로 변경, 관련 타입 선언 및 참조도 함께 수정
frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.styles.ts, frontend/src/pages/MainPage/components/StatusRadioButton/StatusRadioButton.tsx	스타일드 컴포넌트의 prop 명칭을 isActive → $isActive로 변경, 관련 타입 선언 및 참조도 함께 수정
frontend/src/components/ClubLogo/ClubLogo.tsx, frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx	imageSrc, variant 등의 prop 명칭을 $imageSrc, $variant로 변경, 관련 타입 선언 및 참조도 함께 수정
frontend/src/components/ClubStateBox/ClubStateBox.tsx	스타일드 컴포넌트의 bgColor, textColor prop 명칭을 각각 $bgColor, $textColor로 변경, 관련 참조도 함께 수정

Assessment against linked issues

Objective	Addressed	Explanation
isFocused를 $isFocused로 변경 (FE-104)	✅

Suggested labels

🎨 Design

Suggested reviewers

• oesnuj
  """

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 66d2943 and a33e262.

📒 Files selected for processing (4)

• frontend/src/components/ClubLogo/ClubLogo.tsx (2 hunks)
• frontend/src/components/ClubStateBox/ClubStateBox.tsx (3 hunks)
• frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx (1 hunks)
• frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (2)

• frontend/src/components/ClubStateBox/ClubStateBox.tsx
• frontend/src/components/ClubLogo/ClubLogo.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/pages/MainPage/components/ClubCard/ClubCard.tsx

🔇 Additional comments (1)

frontend/src/pages/ClubDetailPage/components/ClubProfile/ClubProfile.tsx (1)

24-24: 스타일 컴포넌트 transient props 적용이 잘 되었습니다!

styled-components의 transient props 패턴을 사용하여 variant와 imageSrc를 $variant와 $imageSrc로 변경한 것이 좋습니다. 이 변경으로 스타일링에만 사용되는 props가 실제 DOM 요소로 전달되어 발생하는 React의 unknown prop 경고를 방지할 수 있습니다.

원래 목표였던 "unknown prop warning 제거"에 부합하는 변경사항입니다.

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify]

✅ Deploy Preview for moadong ready!

Name	Link
🔨 Latest commit	a33e262
🔍 Latest deploy log	https://app.netlify.com/sites/moadong/deploys/681ab97418822f00082a42bf
😎 Deploy Preview	https://deploy-preview-377--moadong.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 39 Accessibility: 87 Best Practices: 92 SEO: 92 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[oesnuj]

콘솔 경고 제거해주신 부분 좋습니다 ㅎㅎ

한 가지 궁금한 점이 사용자 정의 props임을 알리기 위해 $를 붙이는 건 이해됐는데,
실제로 이걸 붙이면 어떻게 DOM에는 전달되지 않게 되는 건지 styled-components가 내부적으로 따로 필터링을 해주는 걸까요?

제가 놓친 걸 수도 있지만, 공식 문서에서는 이 부분에 대한 직접적인 설명은 찾기 어렵네요ㅠ

[seongwon030]

콘솔 경고 제거해주신 부분 좋습니다 ㅎㅎ

한 가지 궁금한 점이 사용자 정의 props임을 알리기 위해 $를 붙이는 건 이해됐는데, 실제로 이걸 붙이면 어떻게 DOM에는 전달되지 않게 되는 건지 styled-components가 내부적으로 따로 필터링을 해주는 걸까요?

제가 놓친 걸 수도 있지만, 공식 문서에서는 이 부분에 대한 직접적인 설명은 찾기 어렵네요ㅠ

일단 먼저 transient props는 스타일 적용에 사용되지만 DOM에는 전달되지 않는 prop입니다.
이걸 사용하면 얻는 이점은 몇 가지 있습니다.

1. DOM 정리

• ReactDom으로 전달되지 않아서 필요없는 DOM 생성을 막을 수 있습니다.
• 이는 나중에 DOM 개수가 많아졌을 때 필요없는 DOM을 다시 정리할 필요가 없어집니다.

2. 명시적인 의도

• transient props으로 스타일링만을 위해 사용되었다는 것을 알 수 있습니다.

복잡한 어플리케이션에서는 성능이 개선된다고 합니다. 아직 저희 서비스는 복잡하지 않아 큰 이점을 가질 수는 없겠지만, 명확성 향상 측면에서 도움이 될 것 같습니다.

참고