Conversation
|
Warning
|
| 파일/경로 요약 | 변경 내용 요약 |
|---|---|
| frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx | 동아리 SNS 링크 입력 필드 및 관련 UI/이벤트 핸들러 전체 활성화 |
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts |
SNS 링크 아이콘 렌더링 기능 복원 InfoBox 높이 197px로 조정 |
Sequence Diagram(s)
sequenceDiagram
participant 관리자 as AdminUser
participant ClubInfoEditTab
participant InfoBox
participant SnsLinkIcons
관리자->>ClubInfoEditTab: SNS 링크 입력/수정
ClubInfoEditTab->>ClubInfoEditTab: 입력값 검증 및 상태 업데이트
관리자->>ClubInfoEditTab: 저장 요청
ClubInfoEditTab->>서버: SNS 링크 포함 정보 저장 요청
서버-->>ClubInfoEditTab: 저장 결과 응답
사용자->>InfoBox: 동아리 상세 페이지 접근
InfoBox->>SnsLinkIcons: SNS 링크 렌더링 요청
SnsLinkIcons-->>InfoBox: SNS 아이콘 및 링크 렌더링
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| SNS 링크 입력 필드 다시 활성화, SNS 링크 렌더링 기능 복원, 저장 시 유효성 검사 재확인, 관리자 페이지에서 전체 기능 정상 동작 확인 (MOA-39) | ✅ |
Possibly related issues
- [fix] MOA-39 동아리 SNS 링크 관련 전체 기능 재활성화 #501: 이 PR은 동아리 SNS 링크 기능 전체 재활성화와 직접적으로 일치합니다.
Possibly related PRs
- [release] v1.0.5 #429: 이전에 SNS 입력 필드와 표시 기능을 비활성화했던 변경을 되돌리는 PR로 직접적인 연관이 있습니다.
- [feature] 관리자 페이지 동아리 SNS 링크 등록 기능 추가 #400: SNS 링크 입력 필드와 표시 컴포넌트의 초기 도입 및 구조화와 연관되어 있습니다.
- [fix] FE-119 SNS 링크 입력 기능 임시 비활성화 #428: SNS 링크 입력 및 표시 기능의 임시 비활성화 조치를 되돌리는 작업으로, 본 PR과 직접 연결됩니다.
Suggested reviewers
- seongwon030
✨ 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.
🪧 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.Explain this complex logic.Open a follow-up GitHub issue for this discussion.
- Files and specific lines of code (under the "Files changed" tab): Tag
@coderabbitaiin a new review comment at the desired location with your query. Examples:@coderabbitai explain this code block.@coderabbitai modularize this function.
- PR comments: Tag
@coderabbitaiin 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 explain its main purpose.@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 pauseto pause the reviews on a PR.@coderabbitai resumeto resume the paused reviews.@coderabbitai reviewto trigger an incremental review. This is useful when automatic reviews are disabled for the repository.@coderabbitai full reviewto do a full review from scratch and review all the files again.@coderabbitai summaryto regenerate the summary of the PR.@coderabbitai generate docstringsto generate docstrings for this PR.@coderabbitai generate sequence diagramto generate a sequence diagram of the changes in this PR.@coderabbitai resolveresolve all the CodeRabbit review comments.@coderabbitai configurationto show the current CodeRabbit configuration for the repository.@coderabbitai helpto get help.
Other keywords and placeholders
- Add
@coderabbitai ignoreanywhere in the PR description to prevent this PR from being reviewed. - Add
@coderabbitai summaryto generate the high-level summary at a specific location in the PR description. - Add
@coderabbitaianywhere in the PR title to generate the title automatically.
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.
✅ Deploy Preview for moadong ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull Request Overview
This PR reactivates the club SNS link display in the detail page, restores SNS link editing in the admin page, and adjusts the InfoBox layout height.
- Uncomments and renders
SnsLinkIconsin the club detail InfoBox - Updates InfoBox height from 164px to 197px and removes the old TODO
- Replaces the “coming soon” placeholder in the admin tab with live, validated SNS link inputs
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx | Uncommented SnsLinkIcons import and rendering |
| frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts | Updated wrapper height to 197px and removed TODO |
| frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx | Replaced placeholder UI with live InputFields for SNS links |
Comments suppressed due to low confidence (2)
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx:41
- No existing tests cover the SNS icon rendering in the InfoBox. Consider adding a unit or snapshot test to verify that social links render correctly when provided.
{ label: 'SNS', render: <SnsLinkIcons apiSocialLinks={clubDetail.socialLinks} />, }
frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx:186
- The new SNS link input fields are not covered by existing form tests. Add tests to verify validation, onChange behavior, and error message display for each platform.
<Styled.InfoTitle>동아리 SNS 링크</Styled.InfoTitle>
![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/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx (1)
186-208: SNS 입력 기능 복원이 완전하게 구현되었습니다.SNS 링크 입력 섹션이 포괄적으로 복원되었습니다:
- 유효성 검사 및 오류 처리가 적절히 구현됨
- 개별 필드 클리어 기능 포함
- 업데이트 플로우와 올바르게 통합됨
코드가 기존 패턴과 일관성을 유지하고 있습니다.
다음 개선사항을 고려해보세요:
+ {Object.entries(SNS_CONFIG).map(([rawKey, { label, placeholder }]) => { + const key = rawKey as SNSPlatform; + const hasValue = socialLinks[key].trim() !== ''; + return ( <Styled.SNSRow key={key}> - <Styled.SNSCheckboxLabel>{label}</Styled.SNSCheckboxLabel> + <Styled.SNSCheckboxLabel> + {label} {hasValue && '✓'} + </Styled.SNSCheckboxLabel> <InputField이렇게 하면 사용자가 어떤 SNS 링크가 설정되어 있는지 시각적으로 확인할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
frontend/src/pages/AdminPage/tabs/ClubInfoEditTab/ClubInfoEditTab.tsx(1 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts(1 hunks)frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules - moadong
- GitHub Check: Header rules - moadong
- GitHub Check: Pages changed - moadong
🔇 Additional comments (3)
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.styles.ts (1)
19-19: 높이 조정이 적절합니다.SNS 링크 섹션 복원에 맞춰 InfoBox 높이를 33px 증가시킨 것은 적절합니다.
frontend/src/pages/ClubDetailPage/components/InfoBox/InfoBox.tsx (2)
4-4: SNS 링크 컴포넌트 import 복원이 적절합니다.SnsLinkIcons 컴포넌트의 import가 올바르게 복원되었습니다.
41-44:Details
✅ Verification successful
SNS 링크 렌더링 로직 복원 확인 필요.
SNS 링크 섹션이 올바르게 복원되었습니다. clubDetail.socialLinks가 SnsLinkIcons 컴포넌트의 apiSocialLinks prop과 타입이 일치하는지 확인해주세요.
다음 스크립트로 타입 일치성을 확인해보겠습니다:
🏁 Script executed:
#!/bin/bash # SnsLinkIcons 컴포넌트의 props 타입과 clubDetail.socialLinks 타입 확인 ast-grep --pattern 'interface $_ { $$$ apiSocialLinks: $_ $$$ }' ast-grep --pattern 'type ClubDetail = { $$$ socialLinks: $_ $$$ }'Length of output: 466
ClubDetail 타입 선언 위치와 socialLinks 필드 타입을 확인하기 위해 아래 스크립트를 실행하겠습니다:
🏁 Script executed:
#!/bin/bash # ClubDetail 타입 선언 위치 확인 rg -n 'type ClubDetail' -t ts -t tsx || true rg -n 'interface ClubDetail' -t ts -t tsx || true # socialLinks 필드 타입 확인 rg -C3 -n 'socialLinks:' -t ts -t tsx || trueLength of output: 225
clubDetail.socialLinks 타입 정의 추가 검색 필요
아래 스크립트로
socialLinks및ClubDetail타입 선언 위치를 찾아주세요:
🏁 Script executed:
#!/bin/bash # socialLinks 타입 선언 검색 rg -n "socialLinks" -g '*.ts' -g '*.tsx' -g '*.d.ts' || true # ClubDetail 타입 선언 검색 rg -n "type ClubDetail" -g '*.ts' -g '*.tsx' -g '*.d.ts' || true rg -n "interface ClubDetail" -g '*.ts' -g '*.tsx' -g '*.d.ts' || trueLength of output: 1568
apiSocialLinks 타입 호환 확인 완료
ClubDetail.socialLinks가Record<SNSPlatform, string>로 선언되어 있고,SnsLinkIconsProps.apiSocialLinks는Partial<Record<SNSPlatform, string>>이므로, 필수 키가 모두 존재하고 값의 타입도 일치하여 문제없이 할당 가능합니다. 🎉
2 participants
#️⃣연관된 이슈
📝작업 내용
🚀 동아리 SNS 링크 기능 구현
재활성화된 기능:
1. 클럽 상세 페이지 SNS 링크 표시 재활성화
2. 관리자 페이지 SNS 링크 입력 기능 재활성화
3. 레이아웃 최적화
🫡 참고사항
SNSPlatformSummary by CodeRabbit