♻️ Refactor : userService 파일 타입지정 및 기타 오류 수정 #213

src/apis/userService.ts

@@ -1,15 +1,21 @@
+import { GoodsRecordApiResponse } from './../typings/db'
 import { ProfileEditApiResponse } from '@typings/db'
 import fetchApi from './ky'
+import { MyDataApiReponse, UserDataApiResponse } from '@typings/userForm'
 
 const userService = {
   getUserInfo: async (userId: number) => {
-    const response = await fetchApi.get(`members/${userId}`).json()
+    const response: UserDataApiResponse = await fetchApi
+      .get(`members/${userId}`)
+      .json()
 
     return response.data
   },
 
   getMyInfo: async (userId: number) => {
-    const response = await fetchApi.get(`members/me?memberId=${userId}`).json()
+    const response: MyDataApiReponse = await fetchApi
+      .get(`members/me?memberId=${userId}`)
+      .json()
 
     return response.data
   },
@@ -29,10 +35,9 @@ const userService = {
     callingType: string,
     page: number,
   ) => {
-    const response = await fetchApi
+    const response: GoodsRecordApiResponse = await fetchApi
       .get(`profile/${memberId}/goods/${callingType}?page=${page}&size=5`)
       .json()
-
     return response.data
   },
 }

src/pages/GoodsRecordPage/index.tsx

@@ -7,26 +7,17 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { useInfiniteQuery } from '@tanstack/react-query'
 import { QUERY_KEY } from '@apis/queryClient'
 import userService from '@apis/userService'
-import { useInView } from 'react-intersection-observer'
 import { RefContainer } from '@styles/globalStyle'
 import Spinner from '@components/Spinner'
 import { toast } from 'react-toastify'
 import { ROUTE_PATH } from '@constants/ROUTE_PATH'
+import { GoodsRecordData } from '@typings/db'
 
 const HEADER_TEXT = {
   sold: '굿즈 판매기록',
   bought: '굿즈 구매기록',
 }
 
-interface GoodsRecord {
-  author: string
-  createdAt: string
-  imageUrl: string
-  postId: number
-  price: number
-  title: string
-}
-
 const GoodsRecordPage = () => {
   const location = useLocation()
   const navigate = useNavigate()
@@ -87,7 +78,9 @@ const GoodsRecordPage = () => {
   if (!data) return null
 
   const { pages } = data
-  const goodsRecordList: GoodsRecord[] = pages.flatMap((page) => page.content)
+  const goodsRecordList: GoodsRecordData[] = pages.flatMap((page) =>
+    page ? page.content : [],
+  )
 
   return (
     <>

src/pages/ProfilePage/ProfileMain.tsx

@@ -49,7 +49,7 @@ const ProfileMain = () => {
 
   const [userId, setUserId] = useState(id)
   const [isMyProfile, setIsMyProfile] = useState<boolean | null>(null)
-  const [userInfo, setUserInfo] = useState<UserInfo | null>(null)
+  const [userInfo, setUserInfo] = useState<UserInfo | undefined>(undefined)
 
   const myInfoResult = useGetMyInfo(Number(loginMemberId))
   const userInfoResult = useGetUserInfo(

src/typings/db.ts

@@ -304,3 +304,31 @@ export interface ProfileEditApiResponse {
   status: string
   timestamp: string
 }
+
+// userService.getGoodsRecordList
+
+export interface GoodsRecordData {
+  postId: number
+  title: string
+  imageUrl: string
+  price: number
+  author: string
+  createdAt: string
+}
+
+export interface GoodsRecordReponse {
+  content: GoodsRecordData[]
+  hasNext: boolean
+  pageNumber: number
+  pageSize: number
+  totalElements: number
+  totalPages: number
+}
+
+export interface GoodsRecordApiResponse {
+  code: number
+  data: GoodsRecordReponse
+  message: string | null
+  status: string
+  timestamp: string
+}

src/typings/userForm.ts

@@ -11,3 +11,19 @@ export interface UserInfo {
   teamName: string
   visitsCount?: number
 }
+
+export interface UserDataApiResponse {
+  code: number
+  data: UserInfo
+  message: string | null
+  status: string
+  timestamp: string
+}
+
+export interface MyDataApiReponse {
+  code: number
+  data: UserInfo
+  message: string | null
+  status: string
+  timestamp: string
+}