Merge branch 'develop' into feat/#194/feed-cd-api

Author: maylh

src/App.tsx

@@ -3,7 +3,6 @@ import { useLocation } from 'react-router-dom'
 
 import styled from 'styled-components'
 
-import { ToastProvider } from '@app/providers'
 import { AppRoutes } from '@app/routes/routes'
 
 import { routesConfig, type RouteConfig } from '@shared/config/routesConfig'
@@ -143,15 +142,13 @@ const App = () => {
         $layoutWidth={LAYOUT_WIDTH}
         $layoutBottomGap={LAYOUT_BOTTOM_GAP}
       >
-        <ToastProvider>
-          <AppRoutes />
-          {isNavVisible && (
-            <NavContainer $layoutWidth={LAYOUT_WIDTH} $layoutBottomGap={LAYOUT_BOTTOM_GAP}>
-              <NavBar />
-            </NavContainer>
-          )}
-          <GlobalErrorModal />
-        </ToastProvider>
+        <AppRoutes />
+        {isNavVisible && (
+          <NavContainer $layoutWidth={LAYOUT_WIDTH} $layoutBottomGap={LAYOUT_BOTTOM_GAP}>
+            <NavBar />
+          </NavContainer>
+        )}
+        <GlobalErrorModal />
       </MainLayout>
     </RootWrapper>
   )

src/app/providers/index.ts

@@ -1,5 +1,4 @@
-import { ChatProvider } from '@/app/providers/ChatProvider'
-
+import { ChatProvider } from './ChatProvider'
 import { default as PlayerProvider } from './PlayerProvider'
 import QueryProvider from './QueryProvider'
 import ThemeProvider from './ThemeProvider'

src/assets/images/img_customize_set_1.png

@@ -7,6 +7,7 @@ export interface CdBasicInfo {
   playlistId: number
   playlistName: string
   creatorNickname?: string
+  creatorShareCode?: string
   genre: string
   isPublic: boolean
   isLiked?: boolean

src/assets/images/img_customize_set_2.png

@@ -1,19 +1,21 @@
 export const PROFILE_LIMITS = {
   MAX_FILE_SIZE: 5 * 1024 * 1024, // 5mb
-  NICKNAME: 10,
+  NICKNAME: { MIN: 2, MAX: 10 },
   SHARE_CODE: { MIN: 5, MAX: 12 },
   BIO: 25,
   KEYWORDS: 3,
 } as const
 
 export const PROFILE_ERROR_MESSAGES = {
   image: `${PROFILE_LIMITS.MAX_FILE_SIZE / (1024 * 1024)}MB 이하의 파일만 업로드 가능해요`,
-  nickname: `${PROFILE_LIMITS.NICKNAME}자 이내로 입력 가능해요`,
+  nickname: `${PROFILE_LIMITS.NICKNAME.MIN}-${PROFILE_LIMITS.NICKNAME.MAX}자로 입력해 주세요`,
   shareCode: {
-    isInvalid: `${PROFILE_LIMITS.SHARE_CODE.MIN}~${PROFILE_LIMITS.SHARE_CODE.MAX}자의 영문자, 숫자, 언더바(_)만 입력할 수 있어요`,
+    isTooShort: `${PROFILE_LIMITS.SHARE_CODE.MIN}자 이상 입력해 주세요`,
+    isOnlyUnderscore: `_만 사용할 수는 없어요`,
+    isInvalid: `영문, 숫자, _만 사용할 수 있어요`,
     isDuplicate: '이미 사용 중인 아이디예요',
   },
-  bio: `${PROFILE_LIMITS.BIO}자 이내로 입력 가능해요`,
+  bio: `${PROFILE_LIMITS.BIO}자 이내로 입력해 주세요`,
 } as const
 
 export const PROFILE_KEYWORDS_LIST = [

src/assets/images/img_customize_set_3.png

@@ -1,30 +1,30 @@
 import type {
   FollowListResponse,
-  FollowSortType,
+  FollowParams,
   FollowStatusResponse,
 } from '@/features/follow/types/follow'
 import { api } from '@/shared/api/httpClient'
 
-export const postFollow = (userId: string) => {
-  return api.post(`/main/follow/${userId}`)
+export const postFollow = (shareCode: string) => {
+  return api.post(`/main/follow/${shareCode}`)
 }
 
-export const deleteFollow = (userId: string) => {
-  return api.delete(`/main/follow/${userId}`)
+export const deleteFollow = (shareCode: string) => {
+  return api.delete(`/main/follow/${shareCode}`)
 }
 
-export const getFollowStatus = (userId: string) => {
-  return api.get<FollowStatusResponse>(`/main/follow/${userId}`)
+export const getFollowStatus = (shareCode: string) => {
+  return api.get<FollowStatusResponse>(`/main/follow/${shareCode}`)
 }
 
-export const getFollowingList = (userId: string, sort?: FollowSortType) => {
-  return api.get<FollowListResponse>(`/main/follow/following/${userId}`, {
-    params: { sort: sort }, // Default: LATEST
+export const getFollowingList = (shareCode: string, params?: FollowParams) => {
+  return api.get<FollowListResponse>(`/main/follow/following/${shareCode}`, {
+    params,
   })
 }
 
-export const getFollowerList = (userId: string, sort?: FollowSortType) => {
-  return api.get<FollowListResponse>(`/main/follow/follower/${userId}`, {
-    params: { sort: sort }, // Default: LATEST
+export const getFollowerList = (shareCode: string, params?: FollowParams) => {
+  return api.get<FollowListResponse>(`/main/follow/follower/${shareCode}`, {
+    params,
   })
 }

src/entities/playlist/types/playlist.ts

@@ -1,4 +1,9 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query'
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQueryClient,
+  type InfiniteData,
+} from '@tanstack/react-query'
 import { useQuery } from '@tanstack/react-query'
 
 import {
@@ -8,15 +13,15 @@ import {
   getFollowingList,
   getFollowerList,
 } from '@/features/follow/api/follow'
-import type { FollowSortType } from '@/features/follow/types/follow'
+import type { FollowListResponse, FollowSortType } from '@/features/follow/types/follow'
 
-const useFollow = (shareCode: string, initialIsFollowing?: boolean) => {
+const useFollow = (shareCode: string, initialIsFollowing?: boolean, enabled = true) => {
   const queryClient = useQueryClient()
 
   const { data } = useQuery({
     queryKey: ['followStatus', shareCode],
     queryFn: () => getFollowStatus(shareCode),
-    enabled: !!shareCode,
+    enabled: !!shareCode && enabled,
     initialData: initialIsFollowing !== undefined ? { isFollowing: initialIsFollowing } : undefined,
   })
 
@@ -73,18 +78,34 @@ const useFollow = (shareCode: string, initialIsFollowing?: boolean) => {
 
 export default useFollow
 
-export const useFollowerList = (shareCode: string, sort?: FollowSortType) => {
-  return useQuery({
-    queryKey: ['followerList', shareCode, sort],
-    queryFn: () => getFollowerList(shareCode, sort),
-    enabled: !!shareCode,
-  })
-}
+export const useFollowList = (
+  type: 'FOLLOWERS' | 'FOLLOWING',
+  shareCode: string,
+  sort: FollowSortType = 'LATEST'
+) => {
+  const isFollower = type === 'FOLLOWERS'
+  const queryKey = isFollower ? 'followerList' : 'followingList'
+  const fetchFn = isFollower ? getFollowerList : getFollowingList
 
-export const useFollowingList = (shareCode: string, sort?: FollowSortType) => {
-  return useQuery({
-    queryKey: ['followingList', shareCode, sort],
-    queryFn: () => getFollowingList(shareCode, sort),
+  return useInfiniteQuery<
+    FollowListResponse,
+    Error,
+    InfiniteData<FollowListResponse>,
+    string[],
+    number | undefined
+  >({
+    queryKey: [queryKey, shareCode, sort],
+    queryFn: ({ pageParam }) =>
+      fetchFn(shareCode, {
+        cursor: pageParam,
+        limit: 10,
+        sort,
+      }),
+    initialPageParam: undefined,
     enabled: !!shareCode,
+    getNextPageParam: (lastPage) => {
+      if (!lastPage.hasNext) return undefined
+      return lastPage.nextCursor
+    },
   })
 }

src/entities/user/constants/user.ts

@@ -20,3 +20,9 @@ export interface FollowListResponse {
 }
 
 export type FollowSortType = 'LATEST' | 'OLDEST'
+
+export interface FollowParams {
+  cursor?: number
+  limit?: number
+  sort?: FollowSortType
+}