[fix] 카드 목록에 기본 이미지가 안불러 와지는 문제 수정

[lepitaaar]

vite 환경으로 바꾸면서
기존 background-image: url(base:64); 문자에 %24로 인코딩되던 작은 따옴표가 인코딩되지 않고 들어가서 invalid property로 인식됨
따라서 url 밖에 쌍따옴표를 감싸주면 해결됩니다

Summary by CodeRabbit

릴리스 노트

• Style
  • 클럽 카드 컴포넌트의 마이너 포맷팅 개선
  • 클럽 로고 컴포넌트의 CSS 스타일 조정

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
moadong	Ready	Preview	Comment	Nov 22, 2025 4:16pm

[coderabbitai]

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid regex pattern for base branch. Received: "**" at "reviews.auto_review.base_branches[0]"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• 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

Walkthrough

두 프론트엔드 컴포넌트에서 포맷팅 및 스타일 조정: ClubCard.tsx의 onClick prop closing tag를 별도 줄로 이동, ClubLogo.tsx의 CSS background-image URL을 큰따옴표로 감싸도록 변경. 기능적 변화는 없음.

Changes

응집군 / 파일(들)	변경 요약
ClubCard 컴포넌트 포맷팅 frontend/src/pages/ClubDetailPage/components/ClubCard/ClubCard.tsx	onClick prop의 closing tag가 별도 줄로 이동. 이벤트 핸들러 기능 및 네비게이션 흐름에 변화 없음.
ClubLogo 컴포넌트 CSS 업데이트 frontend/src/components/ClubLogo/ClubLogo.tsx	CSS background-image 규칙에서 URL을 큰따옴표로 감싸도록 변경 (url($imageSrc) → url("$imageSrc")). $imageSrc가 없을 때는 'none' 그대로 유지.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• [feature] 메인페이지 새로운 카드 디자인을 적용한다 #773: ClubLogo.tsx의 로고 크기 프리셋 및 breakpoint 업데이트와 관련된 PR로, 동일 파일에서 스타일 관련 수정이 있음.

Suggested reviewers

• seongwon030
• seongje973

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경 사항의 주요 내용을 명확하게 요약하고 있습니다. 제목은 카드 목록에서 기본 이미지가 로드되지 않는 문제를 수정한다는 실제 변경 사항과 정확히 일치합니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/default-profile-image-missing

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between f70a47c and 416a90f.

📒 Files selected for processing (2)

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

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

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

🧰 Additional context used

🧠 Learnings (1)

📓 Common learnings

Learnt from: seongwon030
Repo: Moadong/moadong PR: 195
File: frontend/src/pages/AdminPage/AdminPage.tsx:7-7
Timestamp: 2025-03-19T05:18:07.818Z
Learning: AdminPage.tsx에서 현재 하드코딩된 클럽 ID('67d2e3b9b15c136c6acbf20b')는 로그인 기능 구현 후 동적으로 가져오는 방식으로 수정될 예정입니다.

Learnt from: seongwon030
Repo: Moadong/moadong PR: 548
File: frontend/src/pages/ClubDetailPage/ClubDetailPage.tsx:17-57
Timestamp: 2025-07-19T05:05:10.196Z
Learning: ClubDetailPage.tsx에서 notJoinedClubNames 배열의 하드코딩은 의도적인 설계 결정입니다. 개발자가 명시적으로 하드코딩을 선택했으므로 이에 대한 리팩토링 제안을 하지 않아야 합니다.

🔇 Additional comments (1)

frontend/src/components/ClubLogo/ClubLogo.tsx (1)

32-32: ClubLogo.tsx의 수정은 올바르게 적용되었으나, 유사한 패턴이 다른 파일에서도 발견되었습니다.

스크립트 결과에 따르면 frontend/src/pages/AdminPage/tabs/ApplicantsTab/ApplicantDetailPage/ApplicantDetailPage.styles.ts의 41번 줄과 68번 줄에서 유사한 패턴이 발견되었습니다:

background-image: url(${DropdownArrow});  // 인용부호 없음

ClubLogo.tsx는 이미 인용부호로 감싸진 상태이지만(url("${$imageSrc}")), ApplicantDetailPage의 패턴은 여전히 인용부호가 없습니다. 이 파일의 DropdownArrow가 base64 데이터 URL이거나 특수문자를 포함하는 경우 동일한 Vite 마이그레이션 이슈가 발생할 수 있습니다.

권장사항:

• ApplicantDetailPage.styles.ts 41번 줄과 68번 줄도 동일하게 double quote로 감싸는 수정 필요
• 일관성 있는 접근: 모든 동적 URL은 인용부호로 감싸기

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[seongwon030]

ClubLogo 컴포넌트에

   background-image: ${$imageSrc ? `url(${$imageSrc})` : 'none'};

부분을 이런식으로 바꿔서 스타일 내부에서 처리해도 괜찮지 않을까요?

/* 수정된 부분: url("...") 큰따옴표 추가 */
    background-image: ${$imageSrc ? `url("${$imageSrc}")` : 'none'};

[seongwon030]

고생하셨습니당