[refactor] 총동아리연합회 소개페이지 구성원 변경 반영

[oesnuj]

#️⃣연관된 이슈

#1137

📝작업 내용

• 제16대 '온' → 제17대 'we:sh' 총동연 구성원 정보 전체 교체 (12명 → 13명, 기획국장 신설)
• 소개 문구 변경: "As we wish, 우리가 바라는 대로."
• 인스타그램(@17th_wesh), 카카오톡 채널 링크 버튼 추가
• SNS URL 상수화 (CLUB_UNION_SNS)
• 인원 변경(13명)에 따라 grid → flexbox 레이아웃 전환 및 반응형 카드 크기 조정
• description 필드는 추후 추가 예정으로 빈 값 처리

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

• 13명 배치 레이아웃이 각 뷰포트에서 자연스러운지 확인 부탁드립니다 (데스크톱 5개/줄, 랩탑~태블릿 유동적)

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

• 총동연 소개 페이지에 인스타그램/카카오톡 링크 버튼을 추가했는데, 이 방향이 괜찮을지
• 카카오톡 아이콘이 별도 에셋 없이 💬 이모지를 사용 중인데, SVG 아이콘으로 교체가 필요할지
• SNS 링크 클릭에 대한 Mixpanel 이벤트 트래킹 등록이 필요할지

🫡 참고사항

• description은 추후 총동연에서 전달받으면 업데이트 예정

Summary by CodeRabbit

• 새로운 기능

  • 동아리 연합 페이지에 Instagram 및 KakaoTalk 소셜 링크 추가
  • SNS 링크 클릭 시 이벤트 기록(분석) 기능 추가
  • 동아리 회원 목록 및 일부 프로필(역할·이미지) 업데이트

• 스타일

  • 회원 프로필 그리드 레이아웃을 플렉스 기반으로 개선
  • 소개 문구 및 프로필 카드 크기·간격 등 반응형 디자인 조정

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
moadong	Ready	Preview, Comment	Feb 4, 2026 2:34pm

[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

총동아리연합회 소개페이지에 회원 목록 대규모 갱신, SNS 링크(CLUB_UNION_SNS) 추가 및 클릭 트래킹 도입, 소개 문구(16세대 → 17세대 "we:sh") 및 스타일(프로필 레이아웃·SNS 링크 스타일) 조정이 적용되었습니다.

Changes

Cohort / File(s)	Summary
상수 및 데이터 정의 frontend/src/constants/clubUnionInfo.ts	CLUB_UNION_SNS 상수(인스타그램·카카오톡) 추가, MEMBER_AVATARS에 PLANNING 항목 추가, CLUB_UNION_MEMBERS 배열 내용 대폭 재구성(아이디/이름/역할 변경, 설명 초기화, 이미지 참조 조정).
이벤트 상수 frontend/src/constants/eventName.ts	USER_EVENT에 CLUB_UNION_SNS_CLICKED 이벤트 키 추가.
페이지 스타일 frontend/src/pages/ClubUnionPage/ClubUnionPage.styles.ts	SnsLinkContainer, SnsLink styled-components 추가, IntroductionText 여백 조정, ProfileGrid를 그리드→플렉스 레이아웃으로 변경, ProfileCardContainer 크기 지정 방식 변경(정사각 고정 크기).
페이지 컴포넌트 frontend/src/pages/ClubUnionPage/ClubUnionPage.tsx	인스타 아이콘 및 CLUB_UNION_SNS 임포트, 소개 텍스트 업데이트(17세대/브랜딩), SNS 링크 UI 추가 및 클릭 시 useMixpanelTrack로 USER_EVENT.CLUB_UNION_SNS_CLICKED 전송; 기존 멤버 렌더링 유지.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant Page as ClubUnionPage
    participant Mixpanel as useMixpanelTrack
    participant SNS as External SNS

    User->>Page: 클릭 (Instagram / KakaoTalk)
    Page->>Mixpanel: trackEvent(USER_EVENT.CLUB_UNION_SNS_CLICKED, { platform })
    Mixpanel-->>Page: ack
    Page->>SNS: 새 탭으로 URL 오픈 (CLUB_UNION_SNS.instagram / kakaotalk)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related issues

• MOA-599 — PR은 총동연 구성원 정보 갱신 요구사항(구성원 이름/정보 업데이트)을 직접 구현합니다.
• [refactor] MOA-599 총동아리연합회 소개페이지 구성원 변경 반영 #1137 — clubUnionInfo.ts의 멤버 교체/이름 변경이 이 이슈의 목적(구성원 정보 업데이트)과 일치합니다.

Possibly related PRs

• [feature] 총동아리연합회 소개 페이지 구현 #663 — 동일 페이지(ClubUnionPage) 관련 초기 구현으로, 본 PR은 해당 구현을 기반으로 멤버 데이터·스타일·추적을 확장합니다.
• [feature] 총동연 페이지 방문 및 체류시간을 로깅한다 #682 — ClubUnionPage에 분석(analytics)/트래킹을 추가한 PR로, 본 PR의 Mixpanel 클릭 트래킹과 유사한 변경이 포함되어 있습니다.
• [feature] 상세페이지 소개 내용 및 FAQ 컴포넌트 구현 #959 — USER_EVENT 확장 관련 PR로, 이벤트 상수 추가 방식이 본 PR과 코드 레벨에서 연관됩니다.

Suggested reviewers

• lepitaaar
• seongwon030
• suhyun113

업데이트된 섹션

개요

동아리연합회 소개페이지의 구성원 정보를 최신 내용으로 업데이트하고, 소셜 미디어 링크 섹션을 추가하며, 세대 정보를 16세대에서 17세대("we:sh")로 변경하고 관련 스타일을 조정합니다.

변경사항

집단 / 파일	요약
상수 및 데이터 정의 frontend/src/constants/clubUnionInfo.ts	새로운 CLUB_UNION_SNS 상수(인스타그램, 카카오톡 링크) 추가, MEMBER_AVATARS에 PLANNING 항목 추가, CLUB_UNION_MEMBERS 배열의 회원 정보 대폭 재구성 (ID, 이름, 역할, 설명 초기화)
스타일링 업데이트 frontend/src/pages/ClubUnionPage/ClubUnionPage.styles.ts	새로운 SnsLinkContainer 및 SnsLink 스타일 컴포넌트 추가, IntroductionText 여백 조정(60px → 20px), ProfileGrid를 CSS 그리드에서 플렉스 기반 레이아웃으로 변경, ProfileCardContainer 크기 설정 방식 수정(aspect-ratio → 고정 정사각형 크기)
페이지 컴포넌트 업데이트 frontend/src/pages/ClubUnionPage/ClubUnionPage.tsx	Instagram 아이콘 및 CLUB_UNION_SNS 임포트 추가, 소개 텍스트 업데이트(16세대 "온" → 17세대 "we:sh"), 새로운 SNS 링크 섹션 렌더링 추가 및 클릭 시 Mixpanel 이벤트 전송

코드 검토 난이도

🎯 3 (Moderate) | ⏱️ ~20분

관련 이슈

• MOA-599: 총동아리연합회 소개페이지 구성원 변경 반영 — 현재 PR이 이 이슈의 핵심 요구사항인 구성원 정보 업데이트, 세대 변경, 소셜 링크 추가를 직접 구현합니다.

관련 PR

• [feature] 총동아리연합회 소개 페이지 구현 #663: 동아리연합회 페이지의 초기 구현 작업과 관련이 있으며, 현재 PR은 이를 기반으로 회원 데이터를 업데이트하고 SNS 링크 기능을 추가합니다.

추천 검토자

• lepitaaar
• seongwon030
• suhyun113

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목은 제16대에서 제17대 구성원으로의 변경을 반영하는 핵심 목적을 명확하게 나타내며, 변경사항의 주요 내용과 일치합니다.
Linked Issues check	✅ Passed	PR은 MOA-599의 모든 주요 요구사항을 충족합니다: 제17대 구성원 정보로 교체, SNS 링크 추가, 반응형 레이아웃 조정, Mixpanel 추적 구현.
Out of Scope Changes check	✅ Passed	모든 변경사항이 MOA-599의 범위 내에 있습니다: 구성원 정보 업데이트, SNS 링크, 레이아웃 조정, 이벤트 추적이 모두 명시된 요구사항과 관련됩니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ 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 refactor/#1137-update-club-union-members-MOA-599

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist.

---

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]

바뀐 소개글 좋아요~ 이벤트 추가까지 수고하셨습니다

[suhyun113]

빠른 반영 좋네요!!
SNS 클릭 이동 시, 뒤로가기 가능하도록 추가하면 어떨까요?

[oesnuj]

빠른 반영 좋네요!! SNS 클릭 이동 시, 뒤로가기 가능하도록 추가하면 어떨까요?

SNS 링크가 새 창으로 열리도록 되어 있어 뒤로가기가 필요 없는 구조인데, 혹시 같은 탭에서 이동하도록 변경하자는 의미일까요?!

[suhyun113]

빠른 반영 좋네요!! SNS 클릭 이동 시, 뒤로가기 가능하도록 추가하면 어떨까요?

SNS 링크가 새 창으로 열리도록 되어 있어 뒤로가기가 필요 없는 구조인데, 혹시 같은 탭에서 이동하도록 변경하자는 의미일까요?!

맞아여 데스크탑 기준으로는 같은 탭 이동이 더 편할 것 같아서 여쭤봤어요!
다만 말씀해주신 것처럼 외부 SNS 링크는 새 창으로 여는 게 일반적인 것 같아서 유지하는 것도 좋아보이네요!