[Feat] 아카이브 기능 연결 (#88)

* fix: Color type 대문자로 변경

* feat: 검색 페이지 변경 및 API 연결

* feat: 이미지 업로드 API 구현

* feat: 이미지 업로드 시 API 연결

* feat: 아카이브 전체 조회 및 검색 연결

* fix: useCustomInfiniteQuery 수정

* feat: 대기 화면

* feat: SearchPage 검색 -> SearchBar 검색

* feat: 드래그 앤 드롭

* feat: Loader

* feat: 마이 페이지 쪽 아카이브 hook 구현

* feat: 아카이브 상세 페이지 연결

* feat: 나의 아카이브 조회

* feat: error handling with toast message

* feat: 아카이브 생성 에러 메시지 받아서 출력

* feat: 아카이브 댓글 수정

* feat: 아카이브 순서 변경

* feat: 내 아카이브 하트 제거

* feat: 컬러 선택 표시 변경

* fix: 이미지 업로드 후, 전역 상태에 저장 로직 변경

* fix: 토스트메시지 출력 타이밍 변경

* fix: mac tag 중복 입력 문제

* feat: 댓글 optimistic update

* feat: 아카이브 순서 변경

* feat: 좋아요 optimistic update 로직 수정

* feat: header 검색 바 리팩토링

* feat: 리스트 loading -> pending

* fix: build error

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

@@ -6,9 +6,9 @@ import { worker } from '../mocks/browser';
 
 import './styles/globals.scss';
 
-if (process.env.NODE_ENV === 'development') {
-  void worker.start({ onUnhandledRequest: 'warn' });
-}
+// 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;
+}>;