[refactor/recommend] - 추천 페이지 리스타일링

[ramong26]

아티스트 관계도 보여주는 그래프 (맵) 생성

1. 초기 렌더링이 심할 수도 있으니 10명씩 api 호출
2. 로그인 -> 스포티파이로 재생
3. 비로그인 -> 뮤직비디오 외부이동

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

✅ Successfully generated implementation plan.

💡 Use @coderabbitai <feedback> to replan

Examples

• Example 1
• Example 2

---

🔗 Similar Issues

Related Issues

• [feat/foryou-recommend] - foryou페이지 상단 추천 컴포넌트 생성 #68
• [style/channel] - 채널 페이지 리스타일링 #127
• [feat/recommend-card] - recommend 페이지 카드 선택시 옵션창 뜨게 (스포티파이 이동 vs 인터뷰 페이지 이동) #77
• [style-track] - 트랙페이지 리스타일링 #118
• [style/track-interview] - 트랙 인터뷰 페이지 리스타일링 #125
• [feat/artist-wiki] - 위키피디아 api 이용해서 아티스트 정보 가져오기 #50

👤 Suggested Assignees

• ramong26

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord or schedule a call!

[coderabbitai]

Coding Plan

Approach

Add an interactive artist relationship graph visualization to the recommendation page that displays artist connections, fetches related artists in batches of 10 to optimize rendering performance, and handles artist clicks differently based on authentication state (Spotify playback for logged-in users, YouTube music video redirect for non-logged-in users).

Observations

This Next.js application uses a feature-based directory structure (src/features/[feature]/) with React Query for data fetching, Zustand for state management, and Tailwind CSS for styling. The recommendation page (src/app/recommend/page.tsx) currently renders a simple TodayMusic component. Authentication is JWT-based with Spotify OAuth integration, and user state is managed through useUserStore(). The project already has Spotify API integration for fetching individual artists and YouTube integration patterns for music video searches. API routes follow the Next.js App Router pattern in src/app/api/.

Assumptions

Assumption 1: Graph library selection for artist relationship visualization

Options Considered:

• react-force-graph: Simple React component API with built-in force-directed layout, canvas rendering, and zoom/pan controls
• Cytoscape.js (with react-cytoscapejs): Full-featured with extensive layout options and graph analysis utilities, but more complex API
• Sigma.js: WebGL-optimized for thousands of nodes, but requires more setup and custom React integration

Chosen Option: react-force-graph

Rationale: This aligns best with the codebase's simplicity and provides the right balance of features. Its component-based API matches existing React patterns, canvas rendering handles the expected node count well, and built-in zoom/pan functionality satisfies the ticket requirements without requiring extensive configuration.

Assumption 2: Source of initial seed artists for the relationship graph

Options Considered:

• Extract artists from currently displayed recommendations in TodayMusic component
• Fetch user's top artists from Spotify (requires additional API integration)
• Use a predefined list of popular/seed artists

Chosen Option: Extract artists from TodayMusic recommendations

Rationale: This creates a natural connection between the existing recommendation content and the new graph visualization, requiring no additional data fetching and making the feature feel integrated rather than standalone. Users can explore relationships of artists they're already seeing recommended.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Backend API for Fetching Related Artists

Create Spotify API integration for fetching related artists to populate the relationship graph. This phase establishes the data foundation needed for the visualization.

Task 1: Create Related Artists API Endpoint

Implement a new API route that fetches related artists from Spotify's API and returns them in a format suitable for graph visualization.

• Create src/app/api/spotify/related-artists/[id]/route.ts with GET handler
• Call Spotify's /v1/artists/{id}/related-artists endpoint (returns up to 20 related artists per request)
• Transform Spotify response to include only necessary fields (id, name, images) to reduce payload size
• Include error handling for invalid artist IDs, rate limits (429), and network failures
• Follow the authentication pattern from existing src/app/api/spotify/artist/[id]/route.ts

Task 2: Create API Service for Graph Data

Build a client-side service layer for fetching and caching artist relationship data.

• Create src/features/recommend/services/artistGraphService.ts with functions to fetch related artists
• Use React Query for caching and request deduplication (follow pattern from src/shared/hooks/getTrackList.ts)
• Implement batching logic to respect the "10 artists at a time" requirement through controlled query execution
• Add TypeScript interfaces for graph node and edge data structures in src/features/recommend/types/graph.ts

🤖 Prompt for AI agents

This phase establishes the backend API for fetching related artist data from
Spotify to power the relationship graph.

Create API endpoint at `src/app/api/spotify/related-artists/[id]/route.ts`:
- Implement GET handler that calls Spotify's `/v1/artists/{id}/related-artists`
endpoint
- Transform response to include only id, name, and images fields
- Add error handling for invalid IDs, rate limits, and network failures
- Follow existing authentication patterns from
`src/app/api/spotify/artist/[id]/route.ts`

Create client-side service at
`src/features/recommend/services/artistGraphService.ts`:
- Implement functions to fetch related artists using the new API endpoint
- Integrate React Query for caching and request deduplication
- Add batching logic to control fetching 10 artists at a time

Create TypeScript types at `src/features/recommend/types/graph.ts`:
- Define interfaces for graph nodes and edges

Phase 2: Graph Visualization Component

Build the interactive artist relationship graph with zoom, pan, and node expansion capabilities. This phase creates the visual component that will render artist connections.

Task 1: Install Graph Library and Create Base Component

Set up the visualization library and create the foundational graph component.

• Install react-force-graph dependency via npm/yarn
• Create src/features/recommend/components/ArtistRelationshipGraph.tsx component
• Initialize ForceGraph2D component with canvas renderer (follow Tailwind styling patterns for container)
• Configure initial graph appearance (node colors, sizes, link styling) using force-graph's configuration API
• Implement zoom controls and camera positioning (zoomToFit on initial render)

Task 2: Create Graph State Management Hook

Build custom hook to manage graph data fetching, node expansion, and state synchronization.

• Create src/features/recommend/hooks/useArtistGraph.ts hook
• Manage graph state including nodes array, edges array, and expanded artist IDs set
• Implement expandArtist(artistId) function that fetches related artists and adds new nodes/edges to graph
• Track loading states and implement batch size limit (max 10 new artists per expansion)
• Add logic to prevent duplicate nodes and handle circular relationships
• Follow React Query patterns for async state management

Task 3: Implement Progressive Loading UI

Add user controls for expanding the graph and visual feedback during data fetching.

• Create "Load More" button or automatic expansion on node click (up to 10 artists per batch)
• Add loading spinner or skeleton states for nodes being expanded (use framer-motion for animations)
• Display node count and provide controls to reset or recenter graph
• Implement visual differentiation for seed nodes vs. expanded nodes (size, color, or opacity)

🤖 Prompt for AI agents

This phase builds the interactive graph visualization component with zoom, pan,
and expansion features.

Install react-force-graph dependency

Create base component at
`src/features/recommend/components/ArtistRelationshipGraph.tsx`:
- Initialize ForceGraph2D with canvas renderer
- Configure node appearance (colors, sizes) and link styling
- Implement zoom controls and zoomToFit on initial render
- Apply Tailwind styling for container

Create state management hook at
`src/features/recommend/hooks/useArtistGraph.ts`:
- Manage nodes, edges, and expanded artist IDs
- Implement expandArtist function that fetches related artists and updates graph
- Enforce batch limit of 10 artists per expansion
- Handle duplicate nodes and circular relationships
- Track loading states using React Query patterns

Add progressive loading UI:
- Create "Load More" button or automatic node click expansion
- Add loading spinner for expanding nodes using framer-motion
- Display node count with reset/recenter controls
- Visually differentiate seed nodes from expanded nodes

Phase 3: Authentication-Based Click Behavior and Integration

Integrate the graph into the recommendation page and implement different click behaviors based on user authentication state. This phase connects the graph to existing playback and video functionality.

Task 1: Implement Node Click Handlers with Auth Logic

Add click interaction that branches based on login status using existing authentication patterns.

• In ArtistRelationshipGraph.tsx, add onNodeClick handler
• Use useUserStore() to check authentication state (follow pattern from src/features/recommend/components/TodayMusic.tsx)
• For logged-in users: fetch artist's top tracks via existing Spotify API patterns and trigger playback using Miniplayer component logic
• For non-logged-in users: construct YouTube search URL following pattern from src/features/chart/components/IframeYoutube.tsx (https://www.youtube.com/results?search_query=${artistName}+official+music+video)
• Use Next.js Link component with target="_blank" for external YouTube redirects

Task 2: Integrate Spotify Playback for Logged-In Users

Connect artist clicks to the existing Spotify playback system.

• Create src/features/recommend/hooks/useArtistPlayback.ts hook for fetching artist top tracks
• Call existing /api/spotify/user-access-token endpoint to get user's Spotify token
• Fetch artist's top tracks from Spotify API (similar to existing track playback patterns)
• Integrate with existing Miniplayer component or create simplified inline player for graph context
• Handle premium vs. non-premium users (show alert if user lacks premium, following existing Miniplayer pattern)

Task 3: Add Graph Component to Recommendation Page

Integrate the artist graph into the existing recommendation page layout.

• Modify src/features/recommend/components/TodayMusic.tsx to include new ArtistRelationshipGraph component
• Extract seed artists from current recommendation data (tracks' artists array)
• Position graph in layout (consider tab-based UI or side-by-side with existing recommendations)
• Add section header and description explaining the graph feature
• Ensure responsive design using Tailwind classes (graph should adapt to screen size)
• Initialize graph with 10 seed artists extracted from TodayMusic recommendations

🤖 Prompt for AI agents

This phase integrates the graph into the recommendation page with
authentication-based click behaviors.

Implement click handlers in `ArtistRelationshipGraph.tsx`:
- Add onNodeClick handler that checks authentication state via useUserStore()
- For logged-in users: trigger Spotify playback of artist's top tracks
- For non-logged-in users: redirect to YouTube search with artist name and
"official music video"
- Use Next.js Link with target="_blank" for YouTube redirects

Create playback hook at `src/features/recommend/hooks/useArtistPlayback.ts`:
- Fetch user's Spotify access token from `/api/spotify/user-access-token`
- Retrieve artist's top tracks from Spotify API
- Integrate with existing Miniplayer component
- Handle premium vs. non-premium users with appropriate alerts

Integrate into recommendation page:
- Modify `src/features/recommend/components/TodayMusic.tsx` to include
ArtistRelationshipGraph
- Extract 10 seed artists from current recommendation data
- Position graph in layout with responsive Tailwind classes
- Add section header and description
- Initialize graph with seed artists

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

This phase establishes the backend API for fetching related artist data from
Spotify to power the relationship graph.

Create API endpoint at `src/app/api/spotify/related-artists/[id]/route.ts`:
- Implement GET handler that calls Spotify's `/v1/artists/{id}/related-artists`
endpoint
- Transform response to include only id, name, and images fields
- Add error handling for invalid IDs, rate limits, and network failures
- Follow existing authentication patterns from
`src/app/api/spotify/artist/[id]/route.ts`

Create client-side service at
`src/features/recommend/services/artistGraphService.ts`:
- Implement functions to fetch related artists using the new API endpoint
- Integrate React Query for caching and request deduplication
- Add batching logic to control fetching 10 artists at a time

Create TypeScript types at `src/features/recommend/types/graph.ts`:
- Define interfaces for graph nodes and edges
===============================================================================

Task: 2

This phase builds the interactive graph visualization component with zoom, pan,
and expansion features.

Install react-force-graph dependency

Create base component at
`src/features/recommend/components/ArtistRelationshipGraph.tsx`:
- Initialize ForceGraph2D with canvas renderer
- Configure node appearance (colors, sizes) and link styling
- Implement zoom controls and zoomToFit on initial render
- Apply Tailwind styling for container

Create state management hook at
`src/features/recommend/hooks/useArtistGraph.ts`:
- Manage nodes, edges, and expanded artist IDs
- Implement expandArtist function that fetches related artists and updates graph
- Enforce batch limit of 10 artists per expansion
- Handle duplicate nodes and circular relationships
- Track loading states using React Query patterns

Add progressive loading UI:
- Create "Load More" button or automatic node click expansion
- Add loading spinner for expanding nodes using framer-motion
- Display node count with reset/recenter controls
- Visually differentiate seed nodes from expanded nodes
===============================================================================

Task: 3

This phase integrates the graph into the recommendation page with
authentication-based click behaviors.

Implement click handlers in `ArtistRelationshipGraph.tsx`:
- Add onNodeClick handler that checks authentication state via useUserStore()
- For logged-in users: trigger Spotify playback of artist's top tracks
- For non-logged-in users: redirect to YouTube search with artist name and
"official music video"
- Use Next.js Link with target="_blank" for YouTube redirects

Create playback hook at `src/features/recommend/hooks/useArtistPlayback.ts`:
- Fetch user's Spotify access token from `/api/spotify/user-access-token`
- Retrieve artist's top tracks from Spotify API
- Integrate with existing Miniplayer component
- Handle premium vs. non-premium users with appropriate alerts

Integrate into recommendation page:
- Modify `src/features/recommend/components/TodayMusic.tsx` to include
ArtistRelationshipGraph
- Extract 10 seed artists from current recommendation data
- Position graph in layout with responsive Tailwind classes
- Add section header and description
- Initialize graph with seed artists

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- @coderabbitai You can skip phase 3. Add a simple unit test case for phase 2.
- @coderabbitai For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord or schedule a call!