🛠️ 공용 타입 위치 이동 (#26)

- API 공용 타입 shared로 이동 - api logging 함수 수정 - Feed 무한 스크롤 hasNext -> hasNextPage 변경 Closes #24
CollaBu · May 2, 2024 · a5a1c14 · a5a1c14
1 parent f20821a
commit a5a1c14
Show file tree

Hide file tree

Showing 14 changed files with 47 additions and 82 deletions.
diff --git a/src/app/mocks/consts/comment.ts b/src/app/mocks/consts/comment.ts
@@ -1,20 +1,12 @@
+import { Comment } from '@/shared/consts';
+
 import { feeds } from './feed';
-import { User, users } from './user';
+import { users } from './user';
 
 interface Comments {
   [feedId: keyof typeof feeds]: Comment[];
 }
 
-interface Comment {
-  id: number;
-
-  user: User;
-  content: string;
-
-  createdAt: string;
-  updatedAt: string;
-}
-
 export const comments: Comments = {
   1: [
     {

diff --git a/src/app/mocks/consts/feed.ts b/src/app/mocks/consts/feed.ts
@@ -1,35 +1,13 @@
+import { Feed } from '@/shared/consts';
+
 import { comments } from './comment';
 import { likes } from './like';
-import { User, users } from './user';
+import { users } from './user';
 
 interface Feeds {
   [feedId: number]: Feed;
 }
 
-interface Feed {
-  id: number;
-
-  user: User;
-
-  title: string;
-  content: string;
-  images: Image[];
-
-  likeCount: number;
-  commentCount: number;
-
-  isLiked: boolean;
-  isBookmark: boolean;
-
-  createdAt: string;
-  updatedAt: string;
-}
-
-interface Image {
-  id: number;
-  imageUrl: string;
-}
-
 export const feeds: Feeds = {
   1: {
     id: 1,

diff --git a/src/app/mocks/consts/like.ts b/src/app/mocks/consts/like.ts
@@ -1,14 +1,11 @@
+import { Like } from '@/shared/consts';
+
 import { feeds } from './feed';
 
 interface Likes {
   [feedId: keyof typeof feeds]: Like;
 }
 
-interface Like {
-  totalCount: number;
-  isLiked: boolean;
-}
-
 export const likes: Likes = {
   1: { totalCount: 10, isLiked: false },
   2: { totalCount: 2, isLiked: true },

diff --git a/src/app/mocks/consts/user.ts b/src/app/mocks/consts/user.ts
@@ -1,14 +1,9 @@
+import { User } from '@/shared/consts';
+
 interface Users {
   [userId: number]: User;
 }
 
-export interface User {
-  id: number;
-  profileImage: string;
-  name: string;
-  content: string;
-}
-
 export const users: Users = {
   1: {
     id: 1,

diff --git a/src/app/mocks/handler/feed.ts b/src/app/mocks/handler/feed.ts
@@ -44,14 +44,14 @@ export const feedHandlers = [
 
     const totalFeeds = Object.values(feeds).length;
     const endOfPageRange = formattedPage * pageCount;
-    const hasNext = endOfPageRange < totalFeeds;
+    const hasNextPage = endOfPageRange < totalFeeds;
 
     return createHttpSuccessResponse({
       feeds: feedsData,
       currentPageNumber: pageCount,
       pageSize: formattedPage,
       numberOfElements: feedsData.length,
-      hasNext,
+      hasNextPage,
     });
   }),
 

diff --git a/src/shared/axios/dir/log.ts b/src/shared/axios/dir/log.ts
@@ -13,9 +13,7 @@ export function logApiRequestOnDev(config: InternalAxiosRequestConfig) {
   if (import.meta.env.DEV) {
     const { method, url, data } = config;
 
-    const title = `${method?.toUpperCase()} ${url}`;
-
-    console.group(`🛫 [API 요청] ${title}`);
+    console.groupCollapsed(`🛫 [API 요청] ${method?.toUpperCase()} ${url}`);
     console.log(`현재 시각: ${getCurrentDate()}`);
     console.log(`요청 데이터: ${JSON.stringify(data, null, 2) || 'X'}`);
     console.groupEnd();
@@ -28,12 +26,9 @@ export function logApiResponseOnDev(response: AxiosResponse) {
     const { method, url } = config;
     const { code, data } = response.data;
 
-    const title = `${method?.toUpperCase()} ${url}`;
-    const httpStatus = `${status} ${statusText}`;
-
-    console.group(`🛬 [API 응답] ${title}`);
+    console.groupCollapsed(`🛬 [API 응답] ${method?.toUpperCase()} ${url}`);
     console.log(`현재 시각: ${getCurrentDate()}`);
-    console.log(`HTTP 응답 코드: ${httpStatus}`);
+    console.log(`HTTP 응답 코드: ${status} ${statusText}`);
     console.log(`서버 응답 코드: ${code}`);
     console.log(`서버 응답 데이터: ${JSON.stringify(data, null, 2)}`);
     console.groupEnd();
@@ -45,9 +40,7 @@ export function logApiErrorOnDev(error: AxiosError) {
     const { code } = error;
     const { method, url } = error.config as AxiosRequestConfig;
 
-    const title = `${method?.toUpperCase()} ${url}`;
-
-    console.group(`🚨 [API 에러] ${title}`);
+    console.groupCollapsed(`🚨 [API 에러] ${method?.toUpperCase()} ${url}`);
     console.log(`현재 시각: ${getCurrentDate()}`);
     console.log(`에러 코드: ${code}`);
     console.log(`에러명: ${error.message}`);

diff --git a/src/shared/consts/index.ts b/src/shared/consts/index.ts
@@ -1 +1,2 @@
 export { QUERY_KEYS } from './query-key/queryKeys';
+export type * from './types';
diff --git a/src/shared/consts/types/comment.d.ts b/src/shared/consts/types/comment.d.ts
@@ -0,0 +1,9 @@
+export interface Comment {
+  id: number;
+
+  user: User;
+  content: string;
+
+  createdAt: string;
+  updatedAt: string;
+}
diff --git a/src/widgets/feed/consts/type.ts → src/shared/consts/types/feed.d.ts b/src/widgets/feed/consts/type.ts → src/shared/consts/types/feed.d.ts
@@ -1,9 +1,3 @@
-export interface FeedProps {
-  feed: Feed;
-}
-
-export type FeedList = Feed[];
-
 export interface Feed {
   id: number;
 
@@ -23,14 +17,7 @@ export interface Feed {
   updatedAt: string;
 }
 
-interface Image {
+export interface Image {
   id: number;
   imageUrl: string;
 }
-
-interface User {
-  id: number;
-  profileImage: string;
-  name: string;
-  content: string;
-}
diff --git a/src/shared/consts/types/index.ts b/src/shared/consts/types/index.ts
@@ -0,0 +1,4 @@
+export type { Feed, Image } from './feed';
+export type { Comment } from './comment';
+export type { Like } from './like';
+export type { User } from './user';
diff --git a/src/shared/consts/types/like.d.ts b/src/shared/consts/types/like.d.ts
@@ -0,0 +1,4 @@
+export interface Like {
+  totalCount: number;
+  isLiked: boolean;
+}
diff --git a/src/shared/consts/types/user.d.ts b/src/shared/consts/types/user.d.ts
@@ -0,0 +1,6 @@
+export interface User {
+  id: number;
+  profileImage: string;
+  name: string;
+  content: string;
+}
diff --git a/src/widgets/feed-main-list/api/useInfinityFeeds.tsx b/src/widgets/feed-main-list/api/useInfinityFeeds.tsx
@@ -1,15 +1,14 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { axiosInstance } from '@/shared/axios';
-import { QUERY_KEYS } from '@/shared/consts';
-import { FeedList } from '@/widgets/feed/consts/type';
+import { Feed, QUERY_KEYS } from '@/shared/consts';
 
 interface FetchFeeds {
   code: string;
   data: {
     currentPageNumber: number;
-    feeds: FeedList;
-    hasNext: boolean;
+    feeds: Feed[];
+    hasNextPage: boolean;
     numberOfElements: number;
     pageSize: number;
   };
@@ -34,7 +33,7 @@ export const useInfinityFeeds = () => {
     queryFn: ({ pageParam }) => fetchFeeds(pageParam),
     initialPageParam: 1,
     getNextPageParam: (currentPages, _, lastPageParam) => {
-      return currentPages.data.hasNext ? lastPageParam + 1 : null;
+      return currentPages.data.hasNextPage ? lastPageParam + 1 : null;
     },
   });
 

diff --git a/src/widgets/feed/ui/Feed.tsx b/src/widgets/feed/ui/Feed.tsx
@@ -1,10 +1,10 @@
+import { Feed as FeedProps } from '@/shared/consts';
 import { Icon, Profile } from '@/shared/ui';
 import { calculateElapsedTime } from '@/shared/utils';
 
 import './Feed.scss';
-import { FeedProps } from '../consts/type';
 
-export const Feed: React.FC<FeedProps> = ({ feed }) => {
+export const Feed: React.FC<{ feed: FeedProps }> = ({ feed }) => {
   const { user, content, likeCount, commentCount, updatedAt } = feed;
 
   return (
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export { QUERY_KEYS } from './query-key/queryKeys';
		export type * from './types';