[feature] 상세페이지 동아리 SNS 링크 노출 기능 추가#409
Conversation
SnsLinkIcons 제작
UI 스타일 컴포넌트 추가
- SnsLinkIcons 컴포넌트를 render 필드로 전달하여 렌더링 - socialLinks를 기반으로 SNS 정보 노출
- 반복 렌더링 구조로 중복 코드 제거 - props의 출처를 명확히 하기 위해 네이밍 수정 - API 응답 구조에 맞춰 props 타입을 일반화
Walkthrough동아리 상세 페이지에서 SNS(YouTube, Instagram, X) 링크를 아이콘 형태로 보여주는 기능이 추가되었습니다. SNS별 아이콘 이미지가 SNS 설정에 포함되고, 새로운 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ClubDetailPage
participant InfoBox
participant SnsLinkIcons
User->>ClubDetailPage: 상세 페이지 접근
ClubDetailPage->>InfoBox: 동아리 정보 전달
InfoBox->>SnsLinkIcons: SNS 링크 정보 전달
SnsLinkIcons->>User: SNS 아이콘(링크) 렌더링
User->>SnsLinkIcons: SNS 아이콘 클릭
SnsLinkIcons->>User: 새 탭에서 SNS 링크 오픈
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed 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)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR extends the club detail view by introducing a generalized SNS link icon component and updating the InfoBox to optionally accept React components.
- Added a new SnsLinkIcons component to render clickable SNS icons based on configuration.
- Updated InfoBox to support a ReactNode render prop, allowing flexible content such as SNS icons.
- Adjusted styles and updated the SNS_CONFIG to include icon paths.
Reviewed Changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx | New component for rendering SNS icons from provided social links. |
| frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.styles.ts | Styles for the SNS icon and link layout. |
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx | Extended InfoBox to accept either string or ReactNode for descriptions. |
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts | Adjusted layout dimensions and spacing for responsive design. |
| frontend/src/constants/snsConfig.ts | Updated configuration to include icon paths for SNS platforms. |
Comments suppressed due to low confidence (1)
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx:65
- [nitpick] Since Styled.RightText is now used to render both text and arbitrary ReactNodes, consider renaming it to a more generic name (e.g., RightContent) to better reflect its purpose.
<Styled.RightText>{desc.render ?? desc.value}</Styled.RightText>
oesnuj
changed the title
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx (1)
13-17: 타입 단언 개선 고려현재
platform as SNSPlatform타입 단언을 사용하고 있습니다. 이는 TypeScript에서Object.entries()의 타입 제한 때문에 필요한 부분이지만, 타입 안전성을 높이기 위한 대안을 고려해 볼 수 있습니다.다음과 같이 타입 가드 함수를 사용하여 타입 안전성을 개선할 수 있습니다:
- const config = SNS_CONFIG[platform as SNSPlatform]; + // 타입 가드 함수를 사용하여 platform이 유효한 SNSPlatform인지 확인 + const isPlatformValid = (key: string): key is SNSPlatform => + Object.keys(SNS_CONFIG).includes(key); + + if (!isPlatformValid(platform)) return null; + const config = SNS_CONFIG[platform];
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
frontend/src/assets/images/icons/sns/instagram_icon.pngis excluded by!**/*.pngfrontend/src/assets/images/icons/sns/x_icon.svgis excluded by!**/*.svgfrontend/src/assets/images/icons/sns/youtube_icon.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
frontend/src/constants/snsConfig.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts(2 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx(3 hunks)frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.styles.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx (2)
frontend/src/types/club.ts (1)
SNSPlatform(14-14)frontend/src/constants/snsConfig.ts (1)
SNS_CONFIG(5-24)
🔇 Additional comments (19)
frontend/src/constants/snsConfig.ts (2)
1-3: 적절한 소셜 미디어 아이콘 가져오기YouTube와 X는 SVG 형식으로, Instagram은 PNG 형식으로 적절하게 가져왔습니다. PR 설명대로 Instagram의 그라데이션 효과 때문에 PNG를 사용한 것이 이해됩니다.
10-22: SNS 구성에 아이콘 속성 추가 완료각 SNS 플랫폼 설정에 아이콘 속성을 일관되게 추가했습니다. 이는 SnsLinkIcons 컴포넌트에서 아이콘을 동적으로 표시하기 위한 좋은 접근 방식입니다.
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts (4)
12-12: 사소한 스타일 개선
gap: 0px에서gap: 0으로 변경하여 불필요한 단위를 제거했습니다. 작은 변경이지만 코드 일관성 측면에서 좋은 개선입니다.
19-19: InfoBox 높이 증가SNS 아이콘을 수용하기 위해 InfoBox 높이를 197px로 증가시켰습니다. 추가된 콘텐츠에 맞게 적절하게 조정되었습니다.
55-57: 모바일 뷰를 위한 반응형 간격 조정500px 이하 화면에서 간격을 50px에서 40px로 줄여 모바일 화면에서 더 나은 레이아웃을 제공합니다. 이는 PR 목표에 명시된 모바일 UI 문제를 해결하는 데 도움이 됩니다.
63-63: LeftText 너비 고정
LeftText에 30px의 고정 너비를 설정했습니다. 이는 일관된 레이아웃을 제공하지만, 향후 다국어 지원을 계획한다면 일부 언어에서 텍스트가 더 길어질 수 있다는 점을 고려해 보세요.다른 언어로 번역 시 "SNS"와 같은 라벨이 현재 30px 제한을 초과할 가능성이 있는지 확인해 보세요.
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx (4)
5-5: 새로운 SnsLinkIcons 컴포넌트 가져오기새로 생성된 SnsLinkIcons 컴포넌트를 올바르게 가져왔습니다.
7-11: ReactNode를 지원하도록 인터페이스 확장ClubInfoItem 인터페이스를 확장하여 단순한 문자열 값뿐만 아니라 React 컴포넌트도 렌더링할 수 있도록 했습니다. 이는 PR 목표에서 질문한 접근 방식으로, 기존 인터페이스를 유지하면서 컴포넌트 렌더링 유연성을 추가했기 때문에 좋은 선택입니다.
42-45: SNS 링크를 위한 새로운 설명 항목 추가동아리 정보 섹션에 'SNS' 라벨을 가진 새 항목을 추가하고, 커스텀 렌더링을 위해 SnsLinkIcons 컴포넌트를 사용했습니다. 이 컴포넌트는 clubDetail.socialLinks를 통해 API에서 받은 소셜 링크 데이터를 전달받습니다.
65-65: 조건부 렌더링 로직 개선nullish 병합 연산자(
??)를 사용하여 render 속성이 있으면 이를 사용하고, 그렇지 않으면 value로 대체하는 방식은 간결하고 효율적입니다.frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.styles.ts (4)
3-7: 적절한 아이콘 그룹 스타일링SnsIconGroup 컴포넌트는 Flexbox를 사용하여 아이콘을 수평으로 정렬하고 적절한 간격(8px)을 제공합니다. 이는 소셜 미디어 아이콘 그룹을 표시하는 데 좋은 접근 방식입니다.
9-20: 인터랙티브 아이콘 스타일링아이콘에 대한 스타일링이 잘 구현되어 있습니다:
- 모든 아이콘에 대해 일관된 크기(24x24px)를 설정했습니다
- 호버 상태에서 불투명도를 증가시켜 시각적 피드백을 제공합니다
- 클릭(active) 상태에서 약간 축소되는 효과를 추가하여 인터랙티브한 느낌을 줍니다
이러한 인터랙션은 사용자 경험을 향상시킵니다.
22-25: 앵커 요소의 레이아웃 조정
line-height: 0을 사용하여 불필요한 여백을 제거하고display: inline-block으로 설정하여 아이콘이 올바르게 배치되도록 했습니다. 이는 스타일링 목적에 맞는 적절한 접근 방식입니다.
1-25: 누락된 SnsLinkIcons.tsx 컴포넌트InfoBox.tsx에서 SnsLinkIcons 컴포넌트를 사용하고 있지만, 제공된 파일 목록에는 실제 SnsLinkIcons.tsx 구현이 없습니다. PR 목표에 명시된 것처럼 이 컴포넌트는 SNS_CONFIG를 사용하여 동적으로 소셜 미디어 아이콘을 렌더링해야 합니다.
SnsLinkIcons.tsx 파일이 구현되어 있는지, apiSocialLinks 속성을 올바르게 사용하여 플랫폼별 아이콘을 표시하는지 확인해 주세요.
frontend/src/pages/ClubDetailPage/components/SnsLinkIcons/SnsLinkIcons.tsx (5)
1-5: 깔끔한 가져오기 구문.필요한 모듈과 타입들이 명확하게 정의되어 있습니다.
6-8: 인터페이스 정의가 잘 구현되었습니다.TypeScript의 Partial과 Record 유틸리티 타입을 사용하여 소셜 링크 데이터에 대한 유연한 구조를 만들었습니다. 이는 일부 SNS 링크만 제공될 수 있는 상황을 잘 처리할 수 있게 합니다.
10-30: 컴포넌트 구현이 잘 되었습니다.React 함수형 컴포넌트 패턴을 잘 따르고 있으며, 빈 URL 값을 적절히 처리하고 있습니다.
18-26: 링크 보안 및 접근성이 잘 고려되었습니다.
target='_blank'와 함께rel='noreferrer'를 사용하여 보안 취약점을 방지하는 좋은 사례를 따르고 있습니다. 또한 아이콘에alt속성을 제공하여 접근성을 보장하고 있습니다.
32-32: 컴포넌트 내보내기가 잘 구현되었습니다.표준 React 컴포넌트 내보내기 패턴을 따르고 있습니다.
#️⃣연관된 이슈
📝작업 내용
1. 각 플랫폼별 아이콘 추가 및 SNS_CONFIG에 속성으로 추가
→ 무지개 그라데이션 특성상 벡터(svg)보다 png가 용량이 더 작음
2. InfoBox 내 구조 확장 (label : 컴포넌트 허용)
3. SnsLinkIcons 컴포넌트 제작 및 일반화
플랫폼이 추가되더라도 SNS_CONFIG만 수정하면 되도록 일반화된 구조로 구현
Object.entries 반복 렌더링 구조로 중복 제거
(참고)
Object.entries()는 키를 string으로 추론해서SNS_CONFIG[platform]접근 시 에러가 발생합니다.→
platform as SNSPlatform단언으로 해결했습니다.https://www.notion.so/SnsLinkIcons-SNS_CONFIG-1f4aad2320968051982cdb56e8e23eac?pvs=4
4. 모바일에서 모집 기간 UI가 벗어나는 문제 해결
commit: e380a5f
중점적으로 리뷰받고 싶은 부분(선택)
InfoBox에 컴포넌트를 넣을 수 있게 확장한 게 괜찮은 방향일지, 더 나은 표현 방식이 있을지 궁금합니다.
💬 논의 하고싶은 부분(선택)
해당 UI 컴포넌트에 대해 어떤 테스트를 진행하는 게 좋을까요
(렌더링 조건, 링크 유효성, 속성 테스트 등 ?? )
Summary by CodeRabbit
New Features
Style