feat: 나의공방 대시보드 구현 (#244)

[yujinimda]

📌 PR 개요

유저 프로필 페이지에 활동 요약 대시보드를 구현합니다.
기술 스택, 주간 포스팅 활동, 좋아요 TOP 3를 한 카드에 시각화합니다.

🔍 관련 이슈

• Closes [FEAT] 유저 대시보드 구현 #244

🔧 변경 유형

• ✨ feat (새 기능 추가)

✨ 변경 사항

• DashboardOverview 컴포넌트 구현 (recharts 기반)
• 기술 스택 레이더 차트 - Supabase RPC get_tech_stack 연동
• 주간 포스팅 바 차트 - GET /api/dashboard/weekly-activity 연동
• 좋아요 TOP 3 목록 - GET /api/dashboard/top-liked 연동
• 각 항목 클릭 시 해당 포스트 상세 페이지로 이동
• useTechStack / useWeeklyActivity / useTopLiked 훅 추가
• n8n 프롬프트 태그 규칙 강화 (기술 스택 명칭만 허용)

✅ 체크리스트

• 코드가 정상 동작함
• 빌드 및 실행 확인 완료
• 리뷰어가 이해하기 쉽게 변경 이유를 설명했음

📸 스크린샷 (선택)

🤝 기타 참고 사항

• 기술 스택은 Supabase RPC로 tags 배열 집계 (상위 8개)
• 주간 활동은 서버에서 날짜별 count 계산 후 반환
• 좋아요 수는 likes 테이블 기반 실시간 count 방식 사용

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 대시보드 개요 추가: 기술 스택 시각화, 주간 활동 차트, 상위 3개 게시물 목록을 한눈에 확인할 수 있습니다.

• 스타일

  • 사이드바 헤더 테두리 색상 미세 조정.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
dev-craft	Ready	Preview, Comment	Mar 9, 2026 2:34pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e5341567-0db5-404f-bfe2-b75a1eacf6c5

📥 Commits

Reviewing files that changed from the base of the PR and between c7c717b and 4845926.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (10)

• package.json
• src/app/api/dashboard/tech-stack/route.ts
• src/app/api/dashboard/top-liked/route.ts
• src/app/api/dashboard/weekly-activity/route.ts
• src/features/posts/DashboardOverview.tsx
• src/features/posts/PostAside.tsx
• src/features/posts/PostContents.tsx
• src/features/posts/hooks/useTechStack.ts
• src/features/posts/hooks/useTopliked.ts
• src/features/posts/hooks/useWeeklyActivity.ts

---

개요

사용자 대시보드 기능을 구현하는 풀 리퀘스트로, 기술 스택 차트, 주간 활동 그래프, 상위 좋아요 포스트 표시 기능을 추가합니다. 세 개의 새로운 API 엔드포인트, 커스텀 훅, 그리고 대시보드 UI 컴포넌트를 도입합니다.

변경 사항

Cohort / File(s)	요약
의존성 package.json	recharts ^3.8.0 라이브러리 추가
API 라우트 src/app/api/dashboard/tech-stack/route.ts, src/app/api/dashboard/top-liked/route.ts, src/app/api/dashboard/weekly-activity/route.ts	인증된 사용자의 기술 스택, 상위 좋아요 포스트(상위 3개), 7일간의 일일 활동 데이터를 조회하는 세 개의 GET 엔드포인트 구현
커스텀 훅 src/features/posts/hooks/useTechStack.ts, src/features/posts/hooks/useTopliked.ts, src/features/posts/hooks/useWeeklyActivity.ts	대시보드 API 엔드포인트로부터 데이터를 페칭하는 세 개의 React Query 훅 추가
대시보드 컴포넌트 src/features/posts/DashboardOverview.tsx	기술 스택 레이더 차트, 주간 활동 바 차트, 상위 3개 포스트 목록을 표시하는 대시보드 개요 컴포넌트 신규 작성
통합 src/features/posts/PostContents.tsx	DashboardOverview 컴포넌트를 PostList 위에 렌더링하도록 통합
스타일 조정 src/features/posts/PostAside.tsx	header 요소의 테두리 색상을 border-gray-400에서 border-gray-300으로 변경

시퀀스 다이어그램

sequenceDiagram
    participant Client as 클라이언트
    participant DashboardOverview as DashboardOverview<br/>컴포넌트
    participant Hooks as 커스텀 훅<br/>(useQuery)
    participant APIRoute as API 라우트<br/>(/api/dashboard/*)
    participant ServerAPI as serverApi<br/>(RPC)
    participant Database as 데이터베이스

    Client->>DashboardOverview: 렌더링 요청
    DashboardOverview->>Hooks: useTechStack, useWeeklyActivity, useTopLiked 호출
    
    Hooks->>APIRoute: GET /api/dashboard/tech-stack
    Hooks->>APIRoute: GET /api/dashboard/weekly-activity
    Hooks->>APIRoute: GET /api/dashboard/top-liked
    
    APIRoute->>APIRoute: 쿠키에서 access_token 검증
    APIRoute->>ServerAPI: POST /rpc/get_tech_stack (user_id)
    APIRoute->>ServerAPI: POST /rpc/get_analyses (user_id, 필터링)
    APIRoute->>ServerAPI: POST /rpc/get_analyses (user_id, 정렬: likes_count)
    
    ServerAPI->>Database: 기술 스택 데이터 조회
    ServerAPI->>Database: 주간 활동 데이터 조회
    ServerAPI->>Database: 상위 좋아요 포스트 조회
    
    Database-->>ServerAPI: 데이터 반환
    ServerAPI-->>APIRoute: RPC 응답
    APIRoute-->>Hooks: JSON 응답
    Hooks-->>DashboardOverview: 데이터 반환
    DashboardOverview-->>Client: UI 렌더링

Loading

코드 리뷰 예상 난이도

🎯 3 (보통) | ⏱️ ~20분

연관 가능성 있는 PR

• feat: 로그인 유저 검증, 조회, 로그아웃 구현(#57) #61: 새 대시보드 API 라우트가 verifyAccessToken 등 인증 엔드포인트에 직접 의존하므로 관련성이 높습니다.
• feat: 나의 공방 목록에 내 데이터 연결 (#213) #215: 두 PR 모두 src/features/posts/PostContents.tsx를 수정하며, 이 PR이 DashboardOverview를 임포트 및 렌더링하는 변경을 추가합니다.
• feat: posts 목록 무한스크롤 구현(#226) #230: 두 PR 모두 src/features/posts/PostContents.tsx를 수정하며, 대시보드 UI 통합 시 상호작용 가능성이 있습니다.

축하 시

🎉 대시보드 기능이 반짝반짝 완성됐네! 🐇
기술 스택 차트와 주간 활동 잔디가 함께
상위 포스트들과 춤을 추네요.
recharts가 멋진 시각화를 만들어주고
세 개의 훅이 데이터를 부지런히 모아
사용자 대시보드는 이제 완벽해! 🌟

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/#244-user-dashboard

---

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.}