Merge branch 'dev' of https://github.com/prgrms-web-devcourse-final-p…

…roject/WEB1_1_ZeroOne_FE into feat/#82-gathering-api

src/app/QueryProvider.tsx

@@ -1,17 +1,22 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const QueryProvider = ({ children }: { children: React.ReactNode }) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
         staleTime: 0,
-        refetchOnWindowFocus: false,
         retry: 1,
       },
     },
   });
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
 };
 
 export default QueryProvider;

src/app/main.tsx

@@ -7,10 +7,11 @@ import App from './App';
 import { worker } from '../mocks/browser';
 import './styles/globals.scss';
 
-if (process.env.NODE_ENV === 'development') {
-  void worker.start({ onUnhandledRequest: 'warn' });
-}
-const queryClient = new QueryClient();
+
+// if (process.env.NODE_ENV === 'development') {
+//   void worker.start({ onUnhandledRequest: 'warn' });
+// }
+
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

src/app/styles/globals.scss

@@ -52,8 +52,12 @@
 // 토스트 메시지 스타일링
 .swal2-toast {
   font-family: 'Pretendard Variable', Pretendard, sans-serif !important;
-  background-color: rgba(variables.$secondary-color, 0.95) !important;
+  background-color: rgba(variables.$secondary-color, 1) !important;
   box-shadow: 0 0 1rem rgba(variables.$primary-color, 0.1) !important;
+
+  .swal2-container.swal2-backdrop-show {
+    background-color: transparent !important;
+  }
 }
 
 // 아이콘 색상 커스텀
@@ -98,11 +102,6 @@
   }
 }
 
-// 오버레이 배경 커스텀
-.swal2-container.swal2-backdrop-show {
-  background-color: variables.$modal-bg !important;
-}
-
 // 프로그레스 바 커스텀 (토스트용)
 .swal2-timer-progress-bar {
   background-color: rgba(variables.$primary-color, 0.2) !important;

src/features/archive/archive.api.ts

@@ -1,4 +1,4 @@
-import type { PostCommentApiResponse } from './archive.dto';
+import type { PatchArchiveOrderDTO, PostCommentApiResponse } from './archive.dto';
 import type { GetArchiveApiResponse, GetCommentsApiResponse } from './archive.dto';
 import type {
   PostArchiveApiResponse,
@@ -36,13 +36,18 @@ export const postCreateComment = (archiveId: number, content: string) =>
 export const deleteComment = (commentId: number) =>
   api.delete<PostCommentApiResponse>(`/archive/comment/${commentId}`).then(res => res.data);
 
-export const getPopularlityArchiveList = () =>
+export const putComment = (commentId: number, content: string) =>
+  api
+    .put<PostCommentApiResponse>(`/archive/comment/${commentId}`, { content })
+    .then(res => res.data);
+
+export const getPopularlityArchiveList = (size: number) =>
   api
     .get<GetArchiveListApiResponse>('/archive', {
       params: {
         sort: 'popularlity',
         page: 0,
-        size: 5,
+        size,
       },
     })
     .then(res => res.data);
@@ -72,5 +77,12 @@ export const getSearchArchive = (searchKeyword: string, page: number) =>
 
 export const postLikeArchive = (archiveId: number) => api.post(`/archive/${archiveId}`);
 
-export const getLikeArchiveList = () =>
-  api.get<GetArchiveListApiResponse>('/archive/me/like').then(res => res.data);
+export const getLikeArchiveList = (page: number) =>
+  api
+    .get<GetArchiveListApiResponse>('/archive/me/like', { params: { page, size: 9 } })
+    .then(res => res.data);
+
+export const getMyArchiveList = () =>
+  api.get<GetArchiveListApiResponse>('/archive/me').then(res => res.data);
+
+export const patchArchiveOrder = (data: PatchArchiveOrderDTO) => api.patch('/archive', data);

src/features/archive/archive.dto.ts

@@ -6,9 +6,9 @@ export interface BaseArchiveDTO {
   title: string;
   description: string;
   introduction: string;
-  type: Color;
+  colorType: Color;
   canComment: boolean;
-  tags: { content: string }[];
+  tags: { tag: string }[];
   imageUrls: { url: string }[];
 }
 
@@ -20,6 +20,7 @@ export interface Archive extends BaseArchiveDTO {
   hits: number;
   isMine: boolean;
   userProfile: string;
+  type: Color;
 }
 
 export interface ArchiveCardDTO {
@@ -29,8 +30,8 @@ export interface ArchiveCardDTO {
   type: Color;
   likeCount: number;
   username: string;
-  thumbnail: string;
-  createDate: Date;
+  imageUrl: string;
+  createDate: string;
   isLiked: boolean;
 }
 
@@ -50,8 +51,46 @@ export interface PostArchiveResponseDTO {
   archiveId: number;
 }
 
+export interface PatchArchiveOrderDTO {
+  orderRequest: Record<number, number>;
+}
+
+export type Meta = {
+  currentPage: number;
+  size: number;
+  hasNext: boolean;
+};
+
+export type CommentPageData = {
+  comments: Comment[];
+  meta: Meta;
+};
+
+export type ArchivePageData = {
+  archives: ArchiveCardDTO[];
+  meta: Meta;
+};
+
+export type Page<T> = {
+  data: T;
+  timeStamp: string;
+};
+
+export type CommentsPageDTO = {
+  pages: Page<CommentPageData>[];
+  pageParams: number[];
+};
+
+export type ArchivePageDTO = {
+  pages: Page<ArchivePageData>[];
+  pageParams: number[];
+};
+
 export type PostArchiveApiResponse = ApiResponse<PostArchiveResponseDTO>;
 export type GetArchiveApiResponse = ApiResponse<Archive>;
 export type GetCommentsApiResponse = ApiResponse<Comment[]>;
 export type PostCommentApiResponse = ApiResponse<PostCommentResponseDTO>;
-export type GetArchiveListApiResponse = ApiResponse<ArchiveCardDTO[]>;
+export type GetArchiveListApiResponse = ApiResponse<{
+  archives: ArchiveCardDTO[];
+  slice: Meta;
+}>;