Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 17 additions & 11 deletions src/entities/playlist/api/playlist.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ import { api } from '@/shared/api/httpClient'

// 나의 CD 리스트 조회
export const getMyCdList = (sort: string) => {
return api.get<MyCdListResponse>(`/main/mypage/playlists/me?sort=${sort}`)
return api.get<MyCdListResponse>(`/main/playlist/mypage/me?sort=${sort}`)

Choose a reason for hiding this comment

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

medium

이 파일 전체에 걸쳐 API 엔드포인트 경로가 하드코딩된 문자열('매직 스트링')로 사용되고 있습니다. 이는 스타일 가이드에 위배되며1, 향후 경로 변경 시 여러 곳을 수정해야 하는 유지보수 문제를 야기합니다.

API 경로들을 중앙에서 관리하는 상수 객체나 헬퍼 함수로 추출하는 것을 강력히 권장합니다. 예를 들어, src/shared/api/paths.ts 같은 파일을 만들어 경로를 관리할 수 있습니다.

중복 예시:

  • deleteMyPagePlaylistgetPlaylistDetail 함수에서 '/main/playlist/${playlistId}' 경로가 중복됩니다.

리팩토링 제안:

// src/shared/api/paths.ts (예시)
const API_BASE = '/main';

export const PLAYLIST_PATHS = {
  MY_PAGE: `${API_BASE}/playlist/mypage/me`,
  BY_ID: (id: number) => `${API_BASE}/playlist/${id}`,
  BROWSE: `${API_BASE}/playlist/browse`,
  // ... 기타 경로
};

// 사용 예시 (playlist.ts)
import { PLAYLIST_PATHS } from '@/shared/api/paths';

export const getMyCdList = (sort: string) => {
  return api.get<MyCdListResponse>(`${PLAYLIST_PATHS.MY_PAGE}?sort=${sort}`)
}

export const deleteMyPagePlaylist = (playlistId: number) => {
  return api.delete<string | null>(PLAYLIST_PATHS.BY_ID(playlistId))
}

이러한 접근 방식은 코드의 가독성, 일관성 및 유지보수성을 크게 향상시킬 것입니다. 이 PR에서 수정된 모든 API 파일에 이 패턴을 적용하는 것을 고려해보세요.

Style Guide References

Footnotes

}

// 나의 팔로잉 리스트 조회
export const getMyFollowingList = (sort: string) => {
return api.get<MyFollowingListResponse>(`/main/mypage/playlists/follows?sort=${sort}`)
return api.get<MyFollowingListResponse>(`/main/playlist/mypage/me/follows?sort=${sort}`)
}

// 단일 cd 커스텀 데이터 조회
Expand All @@ -27,39 +27,45 @@ export const getCdCustomData = (playlistId: number) => {

// 마이페이지 플레이리스트 조회
export const getMyPagePlaylist = (playlistId: number) => {
return api.get<MyPlaylistResponse>(`/main/mypage/playlists/me/${playlistId}`)
return api.get<MyPlaylistResponse>(`/main/playlist/mypage/me/${playlistId}`)
}

// 마이페이지 플레이리스트 삭제
export const deleteMyPagePlaylist = (playlistId: number) => {
return api.delete<string | null>(`/main/mypage/playlists/me/${playlistId}`)
return api.delete<string | null>(`/main/playlist/${playlistId}`)
}

// 대표 플레이리스트 설정
export const setPrimaryPlaylist = (playlistId: number) => {
return api.patch<string | null>(`/main/mypage/playlists/me/${playlistId}/representative`)
return api.patch<string | null>(`/main/playlist/mypage/me/${playlistId}/representative`)
}

// 셔플된 플레이리스트 목록 조회
export const getShufflePlaylists = (params: PlaylistParams) => {
return api.get<PlaylistResponse>('/main/browse/playlists', { params })
return api.get<PlaylistResponse>('/main/playlist/browse', { params })
}

// 플레이리스트 상세 조회 + 재생 기록 저장
export const getPlaylistDetail = (playlistId: number) => {
return api.get<PlaylistDetailResponse>(`/main/playlists/${playlistId}`)
return api.get<PlaylistDetailResponse>(`/main/playlist/${playlistId}`)
}

// 하트비트 시작
export const postPlaylistStart = (playlistId: number) => {
return api.post(`/main/browse/playlists/start`, null, { params: { playlistId } })
return api.post(`/main/playlist/browse/start`, null, { params: { playlistId } })
}

// 하트비트 확정
export const postPlaylistConfirm = (playlistId: number) => {
return api.post(`/main/browse/playlists/confirm`, null, { params: { playlistId } })
return api.post(`/main/playlist/browse/confirm`, null, { params: { playlistId } })
}

// 플리 조회수 단건 조회
export const getPlaylistViewCounts = (playlistId: number) => {
return api.get(`/main/browse/playlists/view-counts/${playlistId}`)
return api.get(`/main/playlist/browse/view-counts/${playlistId}`)
}

// 내 대표 플레이리스트 조회
export const getMyRepresentativePlaylist = () => {
return api.get<MyRepresentResponse>('main/playlists/representative')
return api.get<MyRepresentResponse>('main/playlist/mypage/me/representative')
}
6 changes: 3 additions & 3 deletions src/features/customize/api/customize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const postYouTubeVideoInfo = (payload: string[]) => {

// 임시 플레이리스트 저장: 플레이리스트 최종 생성 전 본문 세션에 임시 저장
export const postTempPlaylist = (payload: TempPlaylistPayload) => {
return api.post<null>('/main/mypage/playlists/temp', payload)
return api.post<null>('/main/playlist/temp', payload)
}

// cd 유저 커스텀 스티커 리스트 조회
Expand All @@ -39,10 +39,10 @@ export const postUserSticker = (payload: UserStickerPayload) => {

// 플레이리스트 생성: 세션 임시본 사용 + cd 요청
export const postFinalPlaylist = (payload: FinalPlaylistPayload) => {
return api.post<FinalPlaylistResponse>('/main/mypage/playlists/final', payload)
return api.post<FinalPlaylistResponse>('/main/playlist/final', payload)
}

// 플레이리스트 수정: 세션 임시본 사용 + cd 수정
export const patchEditPlaylist = (payload: EditPlaylistPayload) => {
return api.patch<FinalPlaylistResponse>('/main/mypage/playlists/final', payload)
return api.patch<FinalPlaylistResponse>('/main/playlist/final', payload)
Comment on lines +42 to +47

Choose a reason for hiding this comment

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

medium

postFinalPlaylistpatchEditPlaylist 함수에서 동일한 API 엔드포인트 '/main/playlist/final'가 중복으로 사용되고 있습니다. 이는 '매직 스트링' 사용에 해당하며, 코드 중복을 야기합니다.1

이 경로를 파일 상단에 상수로 추출하여 중복을 제거하고 코드의 명확성을 높이는 것을 권장합니다.

const FINAL_PLAYLIST_PATH = '/main/playlist/final';

// ...

// 플레이리스트 생성: 세션 임시본 사용 + cd 요청
export const postFinalPlaylist = (payload: FinalPlaylistPayload) => {
  return api.post<FinalPlaylistResponse>(FINAL_PLAYLIST_PATH, payload)
}

// 플레이리스트 수정: 세션 임시본 사용 + cd 수정
export const patchEditPlaylist = (payload: EditPlaylistPayload) => {
  return api.patch<FinalPlaylistResponse>(FINAL_PLAYLIST_PATH, payload)
}

Style Guide References

Footnotes

}
6 changes: 3 additions & 3 deletions src/features/follow/api/follow.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { api } from '@/shared/api/httpClient'

export const postFollow = (playlistId: number) => {
return api.post(`/main/browse/playlists/${playlistId}/follow`)
return api.post(`/main/follow/${playlistId}`)
}

export const deleteFollow = (playlistId: number) => {
return api.delete(`/main/browse/playlists/${playlistId}/follow`)
return api.delete(`/main/follow/${playlistId}`)
}

export const getFollowStatus = (playlistId: number) => {
return api.get(`/main/browse/playlists/${playlistId}/follow`)
return api.get(`/main/follow/${playlistId}`)
}
Comment on lines 3 to 13

Choose a reason for hiding this comment

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

medium

세 함수(postFollow, deleteFollow, getFollowStatus)에서 동일한 API 엔드포인트 경로를 생성하는 로직이 반복되고 있습니다. 이는 '매직 스트링' 사용 및 코드 중복에 해당합니다.1

경로를 생성하는 헬퍼 함수를 만들어 중복을 제거하고, 코드의 일관성과 유지보수성을 높이는 것을 제안합니다.

Suggested change
export const postFollow = (playlistId: number) => {
return api.post(`/main/browse/playlists/${playlistId}/follow`)
return api.post(`/main/follow/${playlistId}`)
}
export const deleteFollow = (playlistId: number) => {
return api.delete(`/main/browse/playlists/${playlistId}/follow`)
return api.delete(`/main/follow/${playlistId}`)
}
export const getFollowStatus = (playlistId: number) => {
return api.get(`/main/browse/playlists/${playlistId}/follow`)
return api.get(`/main/follow/${playlistId}`)
}
const followPath = (playlistId: number) => `/main/follow/${playlistId}`
export const postFollow = (playlistId: number) => {
return api.post(followPath(playlistId))
}
export const deleteFollow = (playlistId: number) => {
return api.delete(followPath(playlistId))
}
export const getFollowStatus = (playlistId: number) => {
return api.get(followPath(playlistId))
}

Style Guide References

Footnotes

2 changes: 1 addition & 1 deletion src/features/profile/api/profile.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const patchProfile = (payload: ProfilePayload) => {
formData.append('profileImage', payload.file)
}

return api.patch<ProfileResponse>('/main/mypage/playlists/me', formData, {
return api.patch<ProfileResponse>('/main/user/profile', formData, {
headers: {
'Content-Type': 'multipart/form-data',
},
Expand Down
6 changes: 3 additions & 3 deletions src/features/recommend/api/recommend.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import {
import { api } from '@/shared/api/httpClient'

export const getRecommendationsByRecent = () => {
return api.get<RecommendationsResponse>('/main/playlists/recommendations/playlist')
return api.get<RecommendationsResponse>('/main/recommendation/playlist')
}

export const getRecommendationsByFollow = () => {
return api.get<RecommendationsResponse>('/main/playlists/recommendations/follow')
return api.get<RecommendationsResponse>('/main/recommendation/follow')
}

export const getRecommendedGenres = () => {
return api.get<RecommendedGenresResponse>('/main/playlists/recommendations/genres')
return api.get<RecommendedGenresResponse>('/main/recommendation/genres')
}
Comment on lines 7 to 17

Choose a reason for hiding this comment

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

medium

API 엔드포인트들이 하드코딩된 문자열로 작성되어 있습니다. 이는 '매직 스트링' 사용에 해당하며, 유지보수를 어렵게 만듭니다.1

공통 경로인 /main/recommendation을 기반으로 상수 객체를 만들어 관리하면 가독성과 유지보수성이 향상됩니다.

Suggested change
export const getRecommendationsByRecent = () => {
return api.get<RecommendationsResponse>('/main/playlists/recommendations/playlist')
return api.get<RecommendationsResponse>('/main/recommendation/playlist')
}
export const getRecommendationsByFollow = () => {
return api.get<RecommendationsResponse>('/main/playlists/recommendations/follow')
return api.get<RecommendationsResponse>('/main/recommendation/follow')
}
export const getRecommendedGenres = () => {
return api.get<RecommendedGenresResponse>('/main/playlists/recommendations/genres')
return api.get<RecommendedGenresResponse>('/main/recommendation/genres')
}
const RECOMMENDATION_PATH = '/main/recommendation'
export const getRecommendationsByRecent = () => {
return api.get<RecommendationsResponse>(`${RECOMMENDATION_PATH}/playlist`)
}
export const getRecommendationsByFollow = () => {
return api.get<RecommendationsResponse>(`${RECOMMENDATION_PATH}/follow`)
}
export const getRecommendedGenres = () => {
return api.get<RecommendedGenresResponse>(`${RECOMMENDATION_PATH}/genres`)
}

Style Guide References

Footnotes

2 changes: 1 addition & 1 deletion src/features/share/api/share.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,5 @@ import { api } from '@/shared/api/httpClient'

// 공유 코드 발급
export const postShare = () => {
return api.post<string>('/main/mypage/playlists/me/share')
return api.post<string>('/main/playlist/mypage/me/share')
}
Loading