[feat] 메인화면 동아리 카드 디자인 수정 반영

[ff1451]

✨ 요약

- 동아리 카드 크기 변경
- 하단바 아이콘 수정

😎 해결한 이슈

• close [feat] 메인화면 동아리 카드 디자인 수정 반영 #241

Summary by CodeRabbit

• 스타일
  • 하단 네비게이션에서 채팅 아이콘을 SMS 스타일 아이콘으로 교체하여 내비게이션 시각이 업데이트됨.
  • 추천 클럽 카드에 고정 크기 기준을 도입해 카드 표시, 로딩 스켈레톤 및 내부 여백이 더 일관되게 정렬됨.
  • 클럽 캐러셀의 카드 중심 정렬 및 좌우 패딩 계산 방식을 개선해 스크롤 시 카드 배치가 안정적으로 보이도록 조정됨.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 5b6a024a-f8c2-48cf-a1ee-27420e2a52ac

📥 Commits

Reviewing files that changed from the base of the PR and between 93935f2 and 6c388ca.

📒 Files selected for processing (1)

• src/pages/Home/components/InfiniteClubCarousel.tsx

---

Walkthrough

BottomNav의 채팅 아이콘 import를 @/assets/svg/bottom-nav-chat.svg에서 @/assets/svg/bottom-nav-sms.svg로 교체하여 /chats 네비게이션 항목에 렌더되는 SVG를 변경했습니다. RecommendedClubCard에 RECOMMENDED_CLUB_CARD_WIDTH = 191 및 RECOMMENDED_CLUB_CARD_HEIGHT = 97 상수를 추가하고, HomeClubSection의 스켈레톤 및 InfiniteClubCarousel에서 하드코딩된 카드 너비/높이와 중앙 패딩 계산을 해당 상수 기반 inline style로 대체했습니다. RecommendedClubCard와 스켈레톤의 일부 클래스 및 레이아웃이 맞춰져 변경되었습니다.

Possibly related PRs

• BCSDLab/KONECT_FRONT_END PR 213: 동일한 BottomNav 파일에서 채팅 아이콘 자산(import)과 렌더링을 변경하는 커밋으로 아이콘 대체와 직접적인 코드 충돌 가능성 있음.
• BCSDLab/KONECT_FRONT_END PR 177: BottomNav의 아이콘 사용 및 BOTTOM_NAV_ITEMS 구조 관련 리팩터링을 다루어 아이콘 참조와 항목 구조 변경 사항과 코드 레벨 연관성 있음.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	하단바 아이콘 변경은 PR 설명에 명시되었지만 이슈 #241에는 포함되지 않은 범위 밖의 변경사항입니다.	하단바 아이콘 변경(bottom-nav-chat.svg → bottom-nav-sms.svg)은 별도 이슈로 분리하거나 이슈 #241에 명시적으로 포함시켜야 합니다.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용인 메인화면 동아리 카드 디자인 수정을 명확하게 반영하고 있습니다.
Linked Issues check	✅ Passed	PR의 모든 코드 변경사항이 이슈 #241의 요구사항인 동아리 카드 크기 수정과 스타일 적용을 충족합니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 241-feat-메인화면-동아리-카드-디자인-수정-반영

---

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.}

[coderabbitai]

🧹 Nitpick comments (3)

src/pages/Home/components/RecommendedClubCard.tsx (2)

31-33: 카드 치수 하드코딩을 상수 단일 소스로 맞춰주세요.

RECOMMENDED_CLUB_CARD_WIDTH/HEIGHT를 export 했는데 루트 클래스에 h-[97px] max-w-[191px]가 남아 있어 추후 값이 어긋날 수 있습니다.

변경 제안

     <Link
       to={`/clubs/${club.id}`}
       tabIndex={tabIndex}
       aria-hidden={ariaHidden}
+      style={{
+        height: `${RECOMMENDED_CLUB_CARD_HEIGHT}px`,
+        maxWidth: `${RECOMMENDED_CLUB_CARD_WIDTH}px`,
+      }}
       className={cn(
-        'flex h-[97px] max-w-[191px] items-center justify-between rounded-lg border border-[`#f4f6f9`] bg-white px-4 shadow-[0_0_3px_rgba(0,0,0,0.2)]',
+        'flex items-center justify-between rounded-lg border border-[`#f4f6f9`] bg-white px-4 shadow-[0_0_3px_rgba(0,0,0,0.2)]',
         className
       )}
     >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/components/RecommendedClubCard.tsx` around lines 31 - 33, The
component currently hardcodes 'h-[97px] max-w-[191px]' in the root class string
which can drift from the exported RECOMMENDED_CLUB_CARD_WIDTH/HEIGHT constants;
update the root class in RecommendedClubCard to derive height and width from
those constants (RECOMMENDED_CLUB_CARD_WIDTH and RECOMMENDED_CLUB_CARD_HEIGHT)
instead of hardcoded values so the card size is a single source of truth, e.g.
replace the literal h-[97px] and max-w-[191px] entries with classnames/computed
classes that reference the exported constants used elsewhere in the component.

---

31-31: 직접 색상값 대신 테마 토큰 사용을 우선해주세요.

border-[#f4f6f9], shadow-[...rgba(...)] 대신 src/styles/theme.css 토큰 기반으로 맞추면 스킨 일관성과 유지보수가 좋아집니다.
As per coding guidelines, "Prioritize color tokens from src/styles/theme.css (indigo-, blue-, background, primary, etc.)".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/components/RecommendedClubCard.tsx` at line 31, The component
RecommendedClubCard currently uses hardcoded color values in the className
string ('border-[`#f4f6f9`]' and 'shadow-[0_0_3px_rgba(0,0,0,0.2)]'); replace
these with the corresponding theme tokens from src/styles/theme.css (use the
project's border/background/primary color tokens and a tokenized shadow variable
or existing tailwind shadow utility) so the card uses theme tokens instead of
literal hex/rgba; update the className in RecommendedClubCard.tsx (where the
long class string is defined) to reference the appropriate CSS variable or token
class names defined in theme.css to maintain skin consistency and easier
maintenance.

src/pages/Home/components/InfiniteClubCarousel.tsx (1)

4-4: 상대경로 import를 @/* alias로 변경해주세요.

현재 ./RecommendedClubCard는 프로젝트 import 규칙과 다릅니다.

변경 제안

-import RecommendedClubCard, { RECOMMENDED_CLUB_CARD_WIDTH } from './RecommendedClubCard';
+import RecommendedClubCard, {
+  RECOMMENDED_CLUB_CARD_WIDTH,
+} from '@/pages/Home/components/RecommendedClubCard';

As per coding guidelines, "Use @/* alias for import paths instead of relative paths".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/components/InfiniteClubCarousel.tsx` at line 4, Replace the
relative import of RecommendedClubCard with the project alias import; update the
import statement in InfiniteClubCarousel.tsx to import RecommendedClubCard and
RECOMMENDED_CLUB_CARD_WIDTH from the alias path (e.g.,
'@/pages/Home/components/RecommendedClubCard' or the module path matching your
tsconfig paths) so the symbols RecommendedClubCard and
RECOMMENDED_CLUB_CARD_WIDTH are resolved via the `@/`* alias instead of
'./RecommendedClubCard'.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/pages/Home/components/InfiniteClubCarousel.tsx`:
- Line 4: Replace the relative import of RecommendedClubCard with the project
alias import; update the import statement in InfiniteClubCarousel.tsx to import
RecommendedClubCard and RECOMMENDED_CLUB_CARD_WIDTH from the alias path (e.g.,
'@/pages/Home/components/RecommendedClubCard' or the module path matching your
tsconfig paths) so the symbols RecommendedClubCard and
RECOMMENDED_CLUB_CARD_WIDTH are resolved via the `@/`* alias instead of
'./RecommendedClubCard'.

In `@src/pages/Home/components/RecommendedClubCard.tsx`:
- Around line 31-33: The component currently hardcodes 'h-[97px] max-w-[191px]'
in the root class string which can drift from the exported
RECOMMENDED_CLUB_CARD_WIDTH/HEIGHT constants; update the root class in
RecommendedClubCard to derive height and width from those constants
(RECOMMENDED_CLUB_CARD_WIDTH and RECOMMENDED_CLUB_CARD_HEIGHT) instead of
hardcoded values so the card size is a single source of truth, e.g. replace the
literal h-[97px] and max-w-[191px] entries with classnames/computed classes that
reference the exported constants used elsewhere in the component.
- Line 31: The component RecommendedClubCard currently uses hardcoded color
values in the className string ('border-[`#f4f6f9`]' and
'shadow-[0_0_3px_rgba(0,0,0,0.2)]'); replace these with the corresponding theme
tokens from src/styles/theme.css (use the project's border/background/primary
color tokens and a tokenized shadow variable or existing tailwind shadow
utility) so the card uses theme tokens instead of literal hex/rgba; update the
className in RecommendedClubCard.tsx (where the long class string is defined) to
reference the appropriate CSS variable or token class names defined in theme.css
to maintain skin consistency and easier maintenance.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 246c8b74-ecec-4148-adf5-763eb556f71f

📥 Commits

Reviewing files that changed from the base of the PR and between e5f31d5 and 107c5ce.

⛔ Files ignored due to path filters (1)

• src/assets/svg/bottom-nav-sms.svg is excluded by !**/*.svg, !src/assets/** and included by **

📒 Files selected for processing (4)

• src/components/layout/BottomNav/index.tsx
• src/pages/Home/components/HomeClubSection.tsx
• src/pages/Home/components/InfiniteClubCarousel.tsx
• src/pages/Home/components/RecommendedClubCard.tsx

[coderabbitai]

🧹 Nitpick comments (1)

src/pages/Home/components/InfiniteClubCarousel.tsx (1)

47-51: inline style과 Tailwind 클래스 충돌 방지 확인 필요

paddingInline inline style 적용 시 px-0으로 Tailwind padding을 초기화하는 로직은 적절합니다. 다만 shouldCenterCard가 false일 때 빈 문자열 ''을 전달하는데, 이는 cn() 처리 시 무시되므로 문제없지만 명시적으로 제거하면 더 깔끔합니다.

♻️ 선택적 개선안

        className={cn(
          'snap-x snap-mandatory overflow-x-auto pb-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
-          shouldCenterCard ? 'px-0' : ''
+          shouldCenterCard && 'px-0'
        )}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/components/InfiniteClubCarousel.tsx` around lines 47 - 51, The
className prop passes an unnecessary empty string when shouldCenterCard is false
which is harmless but untidy; update the conditional in the cn(...) call to omit
the empty string by using a conditional expression that returns undefined or a
short-circuit (e.g., shouldCenterCard ? 'px-0' : undefined or shouldCenterCard
&& 'px-0') so the cn utility and centeredPaddingStyle remain consistent and
avoid passing '' into className.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/pages/Home/components/InfiniteClubCarousel.tsx`:
- Around line 47-51: The className prop passes an unnecessary empty string when
shouldCenterCard is false which is harmless but untidy; update the conditional
in the cn(...) call to omit the empty string by using a conditional expression
that returns undefined or a short-circuit (e.g., shouldCenterCard ? 'px-0' :
undefined or shouldCenterCard && 'px-0') so the cn utility and
centeredPaddingStyle remain consistent and avoid passing '' into className.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 936ce421-7910-4643-a2ae-9f2271f1442e

📥 Commits

Reviewing files that changed from the base of the PR and between 107c5ce and 93935f2.

📒 Files selected for processing (2)

• src/pages/Home/components/InfiniteClubCarousel.tsx
• src/pages/Home/components/RecommendedClubCard.tsx

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

• src/pages/Home/components/RecommendedClubCard.tsx