Skip to content

[Feat] WTH-481: 멤버 페이지 UI 구현 - #175

Open
woneeeee wants to merge 9 commits into
developfrom
feat/WTH-481-멤버-페이지-UI-구현

Hidden character warning

The head ref may contain hidden characters: "feat/WTH-481-\uba64\ubc84-\ud398\uc774\uc9c0-UI-\uad6c\ud604"
Open

[Feat] WTH-481: 멤버 페이지 UI 구현#175
woneeeee wants to merge 9 commits into
developfrom
feat/WTH-481-멤버-페이지-UI-구현

Conversation

@woneeeee

Copy link
Copy Markdown
Member

✅ PR 유형

어떤 변경 사항이 있었나요?

  • 새로운 기능 추가
  • 버그 수정
  • 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
  • 코드 리팩토링
  • 주석 추가 및 수정
  • 문서 수정
  • 빌드 부분 혹은 패키지 매니저 수정
  • 파일 혹은 폴더명 수정
  • 파일 혹은 폴더 삭제

📌 관련 이슈번호

  • Closed #481

✅ Key Changes

  • 헤더(데스크톱/모바일)에 "멤버" 내비게이션 메뉴 추가
  • 멤버 목록 페이지(/[clubId]/member) 및 카드 UI 구현 - 이름, 프로필 이미지, 역할 플래그(리더/운영진), 포지션·기수 태그, 소개 표시
  • 기수가 2개 이상이면 최신 기수 + +N 뱃지로 표시, 나머지 기수는 태블릿 이상에서는 hover 툴팁으로, 모바일에서는 탭하면 뜨는 팝오버로 확인
  • 포지션/역할 드롭다운 필터 및 이름 검색 기능 추가 - 데스크톱은 팝오버, 모바일은 바텀시트로 다르게 노출
  • 스크롤 시 필터 영역이 전역 헤더 아래에 고정되도록 처리 (헤더가 스크롤로 사라지면 그 자리를 메우도록 위치 동기화)
  • 멤버 클릭 시 상세 정보 확인 가능 - 태블릿 이상은 모달, 모바일은 전용 페이지(/[clubId]/member/[memberId])로 분기
  • 멤버가 작성한 글 목록 페이지(/[clubId]/member/[memberId]/posts) 추가
  • formatPhone 유틸로 전화번호 하이픈 포맷 적용
  • 멤버 프로필/게시글 타입 및 목업 데이터 정의

📸 스크린샷 or 실행영상


🎸 기타 사항 or 추가 코멘트

@woneeeee woneeeee self-assigned this Sep 11, 2026
@woneeeee woneeeee added the ✨ Feature 기능 개발 label Sep 11, 2026
@coderabbitai

coderabbitai Bot commented Sep 11, 2026

Copy link
Copy Markdown

Important

  • 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 99ee7167-f2de-4809-ba00-5f632fdf56fd


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

Comment @coderabbitai help to get the list of available commands.

@github-actions

Copy link
Copy Markdown

PR 테스트 결과

Jest: 통과

🎉 모든 테스트를 통과했습니다!

@github-actions

Copy link
Copy Markdown

구현한 기능 Preview: https://weeth-qko59cwnl-weethsite-4975s-projects.vercel.app

@github-actions

Copy link
Copy Markdown

PR 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다!

@github-actions

Copy link
Copy Markdown

PR 테스트 결과

Jest: 통과

🎉 모든 테스트를 통과했습니다!

@github-actions

Copy link
Copy Markdown

구현한 기능 Preview: https://weeth-bjan5gbuy-weethsite-4975s-projects.vercel.app

@github-actions

Copy link
Copy Markdown

PR 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다!

@nabbang6 nabbang6 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2026-09-12.023238.mp4

멤버 상세 탭 열렸을 때 모바일-데스크톱 뷰 변경이 안 되고 잇어서 요 부분만 한번 확인해주심 좋을 것 같아요!! 고생하셧습니다~ 👍👍 !!!

return (
<button
className={cn(
'typo-button2 rounded-[10px] border-none px-400 py-200 transition-colors',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기 cursor-pointer 추가해주면 조금 더 직관적일 것 같습니다!!
혹시 해당 칩에 호버 효과는 들어가지 않은 게 의도된 부분일까용...? 아니라면 같이 추가해줘도 좋을 것 같습니닷

<Button variant="secondary" size="lg" className="w-[86px]" onClick={handleReset}>
초기화
</Button>
<Button variant="primary" size="lg" className="flex-1" onClick={handleApply}>

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

피그마 확인해보니까, 여기 포지션/역할이 select 되지 않은 상태에서는 요 버튼이 disabled로 처리되게 해줘야 할 것 같아요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

✨ Feature 기능 개발

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants