✨ feat: 프로필(/profile) 페이지 구현

[junyeokk]

🔨 태스크

프로필 페이지 UI 개발

• 기존 서비스에서 사용자의 활동과 정보를 한눈에 볼 수 있는 프로필 페이지가 필요했습니다.
• GitHub의 프로필처럼 개발자의 활동을 시각적으로 보여주는 방식이 효과적이라 판단해 유사한 디자인을 채택했습니다.
• RSS 피드 연동 여부에 따른 다른 UI를 보여줌으로써 사용자의 피드 등록을 유도하고자 했습니다.

활동 그래프 구현

• 사용자의 1년간 블로그 활동을 한눈에 볼 수 있는 시각화가 필요했습니다.
• 데이터 처리 로직이 복잡해질 수 있어 함수형 프로그래밍 방식으로 접근했습니다.
• 성능을 고려해 날짜 계산과 데이터 매핑을 최적화했습니다.
• 접근성을 위해 툴팁으로 상세 정보를 제공하고 컬러 스케일을 신중하게 선택했습니다.

📋 작업 내용

• 반응형 레이아웃 구현 (사이드바 + 메인 컨텐츠)
• 프로필 헤더 섹션 구현
  • 사용자 기본 정보 표시
  • RSS 인증 배지
  • 통계 정보 (포스팅, 조회수, 토픽)
• GitHub 스타일 활동 그래프 구현
  • 365일 활동 히트맵
  • 월/요일 라벨 자동 생성
  • 활동량 기반 5단계 색상 구분
• 스크롤 기반 네비게이션 구현
• RSS 피드 미등록 시 등록 유도 UI 구현
• TypeScript 타입 시스템 구축
• 날짜 처리 및 데이터 변환 유틸리티 구현

📷 스크린 샷

🔍 테스트 방법

1. /profile 페이지 접속
2. 사이드바 네비게이션으로 각 섹션 이동 확인
3. 활동 그래프 호버 시 툴팁 확인
4. RSS 피드 등록/미등록 상태에 따른 UI 변화 확인

[jungmyunggi]

수고 많으셨습니다! 👍

[jungmyunggi]

p5) 지금 데스크톱만 디자인을 하신것 같은데 반응형으로는 나중에 따로 작성하시는건가요?

[jungmyunggi]

p5) FSD구조를 사용한다고 하면 ui에 스타일도 따로 구분을 한다고 알고있는데 테일윈드를 쓰면 따로 분리하지 않고 그냥 className에 적는게 일반적인가요? 잘 몰라서..

[junyeokk]

p5) 지금 데스크톱만 디자인을 하신것 같은데 반응형으로는 나중에 따로 작성하시는건가요?

반응형도 추후 반영해놓겠습니다 !

p5) FSD구조를 사용한다고 하면 ui에 스타일도 따로 구분을 한다고 알고있는데 테일윈드를 쓰면 따로 분리하지 않고 그냥 className에 적는게 일반적인가요? 잘 몰라서..

음 tailwind도 스타일만 따로 분리할 수 있을거에요 근데 FSD에서 이것들을 어떤 식으로 분리하는지는 감이 잘 안 잡히네요 이것도 예제 한 번 보면서 해봐야할 것 같아요

++ FSD 사이트 들어가서 tailwind + shadcn 조합으로 사용하신 분 코드 봤는데 일단 shadcn은 shared 폴더 밑에 ui 폴더로 빼놓으셨네요

https://github.com/falkomerr/falkchat/tree/master/src/shared

다른 컴포넌트에서도 사용될 만한 컴포넌트는 shared/ui 폴더로 분리하는 것 같네요 !

https://github.com/falkomerr/falkchat/blob/master/src/shared/ui/file-upload.tsx