diff --git a/src/app/QueryProvider.tsx b/src/app/QueryProvider.tsx
index 827ba39..fb90fdb 100644
--- a/src/app/QueryProvider.tsx
+++ b/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;
diff --git a/src/app/main.tsx b/src/app/main.tsx
index 5135735..7a62bdc 100644
--- a/src/app/main.tsx
+++ b/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>
diff --git a/src/app/styles/globals.scss b/src/app/styles/globals.scss
index 3ad3ba1..14f9b94 100644
--- a/src/app/styles/globals.scss
+++ b/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;
diff --git a/src/features/archive/archive.api.ts b/src/features/archive/archive.api.ts
index f96f2ec..f65a12e 100644
--- a/src/features/archive/archive.api.ts
+++ b/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);
diff --git a/src/features/archive/archive.dto.ts b/src/features/archive/archive.dto.ts
index 06b4be4..9489cba 100644
--- a/src/features/archive/archive.dto.ts
+++ b/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;
+}>;
diff --git a/src/features/archive/archive.hook.ts b/src/features/archive/archive.hook.ts
index 2887821..1878419 100644
--- a/src/features/archive/archive.hook.ts
+++ b/src/features/archive/archive.hook.ts
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { AxiosError } from 'axios';
 
 import {
   deleteArchive,
@@ -12,6 +13,10 @@ import {
   getPopularlityArchiveList,
   postLikeArchive,
   getLikeArchiveList,
+  getSearchArchive,
+  putComment,
+  getMyArchiveList,
+  patchArchiveOrder,
 } from './archive.api';
 import type {
   BaseArchiveDTO,
@@ -19,25 +24,37 @@ import type {
   GetCommentsApiResponse,
   GetArchiveListApiResponse,
   ArchiveCardDTO,
+  PatchArchiveOrderDTO,
+  CommentsPageDTO,
+  ArchivePageDTO,
 } from './archive.dto';
 import type { Color } from './colors.type';
 
 import { useCustomInfiniteQuery } from '@/shared/hook';
+import { customToast } from '@/shared/ui';
 
 export const useCreateArchive = () =>
   useMutation({
     mutationFn: (data: BaseArchiveDTO) => postCreateArchive(data),
+    onError: async (err: AxiosError<{ status: number; reason: string; timeStamp: string }>) => {
+      const message = err.response?.data?.reason || '아카이브 작성에 실패하였습니다.';
+      await customToast({ text: message, timer: 3000, icon: 'error' });
+    },
   });
 
 export const useUpdateArchive = (archiveId: number) =>
   useMutation({
     mutationFn: (data: BaseArchiveDTO) => putArchive(archiveId, data),
+    onError: async () => {
+      await customToast({ text: '아카이브 수정에 실패하였습니다', timer: 3000, icon: 'error' });
+    },
   });
 
-export const useDeleteArchive = () =>
-  useMutation({
+export const useDeleteArchive = () => {
+  return useMutation({
     mutationFn: ({ archiveId }: { archiveId: number }) => deleteArchive(archiveId),
   });
+};
 
 export const useArchive = (archiveId: number) =>
   useQuery({
@@ -50,6 +67,7 @@ export const useComments = (archiveId: number) => {
     ['/archive', archiveId, 'comment'],
     ({ pageParam }) => getComments(archiveId, 10, pageParam),
     10,
+    'comments',
   );
 };
 
@@ -80,19 +98,104 @@ export const useCreateComment = (archiveId: number) => {
         userProfile: userProfile,
       };
 
-      queryClient.setQueryData(
-        ['/archive', archiveId, 'comment'],
-        (old: GetCommentsApiResponse) => {
-          if (!old.data) return old;
+      queryClient.setQueryData(['/archive', archiveId, 'comment'], (old: CommentsPageDTO) => {
+        if (!old) return old;
 
-          return [...old.data, optimisticComment];
-        },
-      );
+        const updatedPages = old.pages.map((page, index) => {
+          if (index === 0) {
+            return {
+              ...page,
+              data: {
+                ...page.data,
+                comments: [optimisticComment, ...page.data.comments],
+              },
+            };
+          }
+          return page;
+        });
+
+        return {
+          ...old,
+          pages: updatedPages,
+        };
+      });
+
+      return { previousComments, optimisticComment };
+    },
+    onSuccess: async (newComment, _, context) => {
+      queryClient.setQueryData(['/archive', archiveId, 'comment'], (old: CommentsPageDTO) => {
+        if (!old) return old;
+
+        const updatedPages = old.pages.map(page => ({
+          ...page,
+          data: {
+            ...page.data,
+            comments: page.data.comments.map(comment =>
+              comment.commentId === context?.optimisticComment.commentId
+                ? { ...comment, commentId: newComment.data?.commentId }
+                : comment,
+            ),
+          },
+        }));
+
+        return {
+          ...old,
+          pages: updatedPages,
+        };
+      });
+
+      await customToast({ text: '댓글이 작성되었습니다.', timer: 3000, icon: 'success' });
+    },
+    onError: async (err, _, context) => {
+      await customToast({ text: '댓글 작성에 실패하였습니다', timer: 3000, icon: 'error' });
+      if (context) {
+        queryClient.setQueryData(['/archive', archiveId, 'comment'], context.previousComments);
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['/archive', archiveId, 'comment'] }).catch(err => {
+        console.error('Failed to invalidate queries:', err);
+      });
+    },
+  });
+};
+
+export const useUpdateComment = (archiveId: number, commentId: number, content: string) => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ content }: { content: string }) => putComment(commentId, content),
+    onMutate: async () => {
+      await queryClient.cancelQueries({ queryKey: ['/archive', archiveId, 'comment'] });
+
+      const previousComments = queryClient.getQueryData(['/archive', archiveId, 'comment']);
+
+      queryClient.setQueryData(['/archive', archiveId, 'comment'], (old: CommentsPageDTO) => {
+        if (!old) return old;
+
+        const updatedPages = old.pages.map(page => ({
+          ...page,
+          data: {
+            ...page.data,
+            comments: page.data.comments.map((comment: Comment) =>
+              comment.commentId === commentId ? { ...comment, content } : comment,
+            ),
+          },
+        }));
+
+        return {
+          ...old,
+          pages: updatedPages,
+        };
+      });
 
       return { previousComments };
     },
-    onError: (err, _, context) => {
-      console.log(err);
+    onSuccess: async () => {
+      await customToast({ text: '댓글이 수정되었습니다', timer: 3000, icon: 'success' });
+    },
+    onError: async (err, _, context) => {
+      await customToast({ text: '댓글 수정에 실패하였습니다', timer: 3000, icon: 'error' });
       if (context) {
         queryClient.setQueryData(['/archive', archiveId, 'comment'], context.previousComments);
       }
@@ -116,19 +219,32 @@ export const useDeleteComment = (archiveId: number) => {
 
       const previousComments = queryClient.getQueryData(['/archive', archiveId, 'comment']);
 
-      queryClient.setQueryData(
-        ['/archive', archiveId, 'comment'],
-        (old: GetCommentsApiResponse) => {
-          if (!old.data) return old;
+      queryClient.setQueryData(['/archive', archiveId, 'comment'], (old: CommentsPageDTO) => {
+        if (!old) return old;
 
-          return old.data.filter((comment: Comment) => comment.commentId !== commentId);
-        },
-      );
+        const updatedPages = old.pages.map(page => ({
+          ...page,
+          data: {
+            ...page.data,
+            comments: page.data.comments.filter(
+              (comment: Comment) => comment.commentId !== commentId,
+            ),
+          },
+        }));
+
+        return {
+          ...old,
+          pages: updatedPages,
+        };
+      });
 
       return { previousComments };
     },
-    onError: (err, _, context) => {
-      console.log(err);
+    onSuccess: async () => {
+      await customToast({ text: '댓글이 삭제되었습니다', timer: 3000, icon: 'success' });
+    },
+    onError: async (err, _, context) => {
+      await customToast({ text: '댓글 삭제에 실패하였습니다', timer: 3000, icon: 'error' });
       if (context) {
         queryClient.setQueryData(['/archive', archiveId, 'comment'], context.previousComments);
       }
@@ -141,76 +257,151 @@ export const useDeleteComment = (archiveId: number) => {
   });
 };
 
-export const usePopularArchiveList = () =>
+export const usePopularArchiveList = (size: number) =>
   useQuery({
     queryKey: ['/archive', 'popularlity'],
-    queryFn: () => getPopularlityArchiveList(),
+    queryFn: () => getPopularlityArchiveList(size),
   });
 
-export const useArchiveList = (sort: string, color: Color | 'default') => {
+export const useArchiveList = (sort: string, color: Color) => {
   return useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
-    ['/archive', sort, color],
-    ({ pageParam }) => getArchiveList(sort, pageParam, color === 'default' ? null : color),
+    ['/archive', 'list', sort, color],
+    ({ pageParam }) => getArchiveList(sort, pageParam, color === 'DEFAULT' ? null : color),
     9,
+    'archives',
+    true,
   );
 };
 
 export const useSearchArchive = (searchKeyword: string) => {
   return useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
-    ['/archive', 'search', searchKeyword],
-    ({ pageParam }) => getArchiveList(searchKeyword, pageParam),
+    ['/archive', 'list', 'search', searchKeyword],
+    ({ pageParam }) => getSearchArchive(searchKeyword, pageParam),
     9,
+    'archives',
+    true,
   );
 };
 
-export const useLikeArchiveList = () =>
-  useQuery({
-    queryKey: ['/archive/me/like'],
-    queryFn: getLikeArchiveList,
-  });
+export const useLikeArchiveList = () => {
+  return useCustomInfiniteQuery<GetArchiveListApiResponse, ArchiveCardDTO, Error>(
+    ['/archive', 'list', 'me', 'like'],
+    ({ pageParam }) => getLikeArchiveList(pageParam),
+    9,
+    'archives',
+    true,
+  );
+};
 
 export const useLikeArchive = (archiveId: number) => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: () => postLikeArchive(archiveId),
-    onMutate: () => {
-      const prevData = queryClient
-        .getQueryCache()
-        .findAll({ predicate: query => query.queryKey[0] === '/archive' });
-
-      prevData.forEach(query => {
-        queryClient.setQueryData(query.queryKey, (oldData: GetArchiveListApiResponse) => {
-          if (!oldData.data) return oldData;
-
-          return oldData.data.map((archive: ArchiveCardDTO) =>
-            archive.archiveId === archiveId
-              ? {
-                  ...archive,
-                  isLiked: !archive.isLiked,
+    onMutate: async () => {
+      // TODO : isLiked optimistic update
+      await queryClient.cancelQueries({ queryKey: ['/archive', 'list', 'me', 'like'] });
+
+      const prevArchiveList = queryClient.getQueryData(['/archive', 'list', 'me', 'like']);
+      const prevLikedData = queryClient.getQueryCache().findAll({
+        predicate: query => query.queryKey[0] === '/archive' && query.queryKey[1] === 'list',
+      });
+
+      queryClient.setQueryData(['/archive', 'list', 'me', 'like'], (old: ArchivePageDTO) => {
+        if (!old) return old;
+
+        const updatedPages = old.pages.map(page => ({
+          ...page,
+          data: {
+            ...page.data,
+            archives: page.data.archives.filter(
+              (archive: ArchiveCardDTO) => archive.archiveId !== archiveId,
+            ),
+          },
+        }));
+
+        return {
+          ...old,
+          pages: updatedPages,
+        };
+      });
+
+      prevLikedData.forEach(query => {
+        queryClient.setQueryData(query.queryKey, (old: ArchivePageDTO) => {
+          if (!old) return old;
+
+          const updatedPages = old.pages.map(page => ({
+            ...page,
+            data: {
+              ...page.data,
+              archives: page.data.archives.map((archive: ArchiveCardDTO) => {
+                if (archive.archiveId === archiveId) {
+                  return {
+                    ...archive,
+                    isLiked: !archive.isLiked,
+                  };
                 }
-              : archive,
-          );
+                return archive;
+              }),
+            },
+          }));
+
+          return {
+            ...old,
+            pages: updatedPages,
+          };
         });
       });
 
-      return { prevData };
+      return { prevArchiveList, prevLikedData };
     },
-    onError: (_, __, context) => {
+    onError: (err, _, context) => {
       if (context) {
-        context.prevData.forEach(query => {
+        queryClient.setQueryData(['/archive', archiveId, 'comment'], context.prevArchiveList);
+        context.prevLikedData.forEach(query => {
           queryClient.invalidateQueries({ queryKey: query.queryKey }).catch(err => {
             console.error('Failed to invalidate query:', err);
           });
         });
       }
     },
-    onSettled: () => {
-      queryClient
-        .invalidateQueries({ predicate: query => query.queryKey[0] === '/archive' })
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ['/archive', 'list', 'me', 'like'] });
+      await queryClient
+        .invalidateQueries({
+          predicate: query => query.queryKey[0] === '/archive' && query.queryKey[1] === 'list',
+        })
         .catch(err => {
           console.error('Failed to invalidate queries:', err);
         });
     },
   });
 };
+
+export const useMyArchiveList = () =>
+  useQuery({
+    queryKey: ['/archive', 'list', 'me'],
+    queryFn: getMyArchiveList,
+  });
+
+export const useUpdateArchiveOrder = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: PatchArchiveOrderDTO) => patchArchiveOrder(data),
+    onSuccess: async () => {
+      await customToast({ text: '아카이브 순서가 변경되었습니다', timer: 3000, icon: 'success' });
+
+      queryClient.invalidateQueries({ queryKey: ['/archive', 'list', 'me'] }).catch(error => {
+        console.error('Error invalidating queries:', error);
+      });
+    },
+    onError: async () => {
+      await customToast({
+        text: '아카이브 순서 변경에 실패하였습니다',
+        timer: 3000,
+        icon: 'error',
+      });
+    },
+  });
+};
diff --git a/src/features/archive/colors.type.ts b/src/features/archive/colors.type.ts
index e68e088..11191ca 100644
--- a/src/features/archive/colors.type.ts
+++ b/src/features/archive/colors.type.ts
@@ -1,6 +1,7 @@
-export type Color = 'red' | 'yellow' | 'blue' | 'green' | 'purple';
+export type Color = 'RED' | 'YELLOW' | 'BLUE' | 'GREEN' | 'PURPLE' | 'DEFAULT';
 
 export interface ColorInfo {
+  label: string;
   name: string;
   description: string;
   tag: string;
@@ -15,43 +16,55 @@ export interface ColorGroup {
 export const ColorData: ColorGroup[] = [
   {
     group: 'one',
-    colors: ['red', 'yellow', 'blue'],
+    colors: ['RED', 'YELLOW', 'BLUE'],
   },
   {
     group: 'two',
-    colors: ['green', 'purple'],
+    colors: ['GREEN', 'PURPLE'],
   },
 ];
 
 export const ColorMap: { [key in Color]: ColorInfo } = {
-  red: {
+  RED: {
+    label: 'red',
     name: '빨강',
     description: '추진력이 돋보이는 기록',
     tag: '#주도적인 리더십 #적극적인 행동력',
     hex: '#ff5e5e',
   },
-  yellow: {
+  YELLOW: {
+    label: 'yellow',
     name: '노랑',
     description: '창의력이 돋보이는 기록',
     tag: '#창의적인 아이디어 #자유로운 발상',
     hex: '#ffe66b',
   },
-  blue: {
+  BLUE: {
+    label: 'blue',
     name: '파랑',
     description: '분석력이 돋보이는 기록',
     tag: '#논리적 사고 #깊이 있는 연구',
     hex: '#8ad0e2',
   },
-  green: {
+  GREEN: {
+    label: 'green',
     name: '초록',
     description: '헌신했던 경험이 돋보이는 기록',
     tag: '#타인을 위한 봉사 #공동체 기여',
     hex: '#b5d681',
   },
-  purple: {
+  PURPLE: {
+    label: 'purple',
     name: '보라',
     description: '성찰력이 돋보이는 기록',
     tag: '#내적 동기 탐구 #가치관 형성',
     hex: '#aa8abd',
   },
+  DEFAULT: {
+    label: 'default',
+    name: '기본',
+    description: '기본 색상',
+    tag: '#기본 색상',
+    hex: '#333533',
+  },
 };
diff --git a/src/features/archive/editor.hook.ts b/src/features/archive/editor.hook.ts
index ae494c3..9b71f1c 100644
--- a/src/features/archive/editor.hook.ts
+++ b/src/features/archive/editor.hook.ts
@@ -3,6 +3,10 @@ import { EditorView } from '@codemirror/view';
 import { useCallback } from 'react';
 
 import type { EditorViewRef } from './editor.type';
+import { useArchiveStore } from './model';
+import type { PostImagesApiResponse } from '../image/image.dto';
+
+import api from '@/shared/api/baseApi';
 
 export const useMarkdown = ({
   editorViewRef,
@@ -82,18 +86,34 @@ export const useMarkdown = ({
   }, []);
 
   const handleImage = useCallback(
-    (imageFile: File, view: EditorView) => {
+    async (imageFile: File, view: EditorView) => {
       if (!/image\/(png|jpg|jpeg|gif)/.test(imageFile.type)) return;
 
       const formData = new FormData();
-      formData.append('image', imageFile);
-
-      // TODO: 서버 API 호출 후 이미지 URL 반환
-      console.log('Uploading image:', imageFile);
-
-      // Mock image URL
-      const mockImageUrl = 'https://example.com/uploaded-image.jpg';
-      insertImageAtCursor(view, `![Image](${mockImageUrl})`);
+      formData.append('files', imageFile);
+      const { archiveData, updateArchiveData } = useArchiveStore.getState();
+
+      try {
+        const imageUrls = await api
+          .post<PostImagesApiResponse>('/upload/images', formData, {
+            headers: {
+              'Content-Type': 'multipart/form-data',
+            },
+          })
+          .then(res => {
+            updateArchiveData('imageUrls', [
+              ...archiveData.imageUrls,
+              { url: res.data.data?.imgUrls[0].imgUrl ?? '' },
+            ]);
+
+            return res.data.data?.imgUrls;
+          });
+
+        insertImageAtCursor(view, `![Image](${imageUrls?.[0].imgUrl})`);
+      } catch {
+        console.error('Failed to upload image');
+        return;
+      }
     },
     [insertImageAtCursor],
   );
@@ -108,7 +128,7 @@ export const useMarkdown = ({
         if (item.kind === 'file') {
           const file = item.getAsFile();
           if (file) {
-            handleImage(file, view);
+            handleImage(file, view).catch(console.error);
           }
         }
       }
@@ -122,7 +142,7 @@ export const useMarkdown = ({
 
       const { files } = event.dataTransfer;
 
-      for (const file of files) handleImage(file, view);
+      for (const file of files) handleImage(file, view).catch(console.error);
     },
   });
 
diff --git a/src/features/archive/model/archive.store.ts b/src/features/archive/model/archive.store.ts
index 453daf5..372611c 100644
--- a/src/features/archive/model/archive.store.ts
+++ b/src/features/archive/model/archive.store.ts
@@ -12,7 +12,7 @@ interface ArchiveStore {
   setArchiveData: (newData: BaseArchiveDTO) => void;
   updateArchiveData: <T extends keyof BaseArchiveDTO>(key: T, value: BaseArchiveDTO[T]) => void;
   resetArchiveData: () => void;
-  color: Color | null;
+  color: Color;
   setColor: (color: Color) => void;
   clearStorage: () => void;
 }
@@ -21,10 +21,10 @@ export const initialArchiveState: BaseArchiveDTO = {
   title: '',
   description: '',
   introduction: '',
-  type: 'red',
+  colorType: 'DEFAULT',
   canComment: false,
   tags: [],
-  imageUrls: [{ url: 'https://source.unsplash.com/random/800x600' }],
+  imageUrls: [],
 };
 
 export const useArchiveStore = create(
@@ -58,11 +58,11 @@ export const useArchiveStore = create(
         }));
       },
 
-      color: null,
+      color: 'DEFAULT',
       setColor: color => {
         set(
           produce((state: ArchiveStore) => {
-            state.archiveData.type = color;
+            state.archiveData.colorType = color;
           }),
         );
         set(() => ({
@@ -74,7 +74,7 @@ export const useArchiveStore = create(
         set(() => ({
           archiveId: 0,
           archiveData: initialArchiveState,
-          color: null,
+          color: 'DEFAULT',
         }));
         useArchiveStore.persist.clearStorage();
       },
diff --git a/src/features/archive/ui/ArchiveCard.module.scss b/src/features/archive/ui/ArchiveCard.module.scss
index aa34c9f..d152acd 100644
--- a/src/features/archive/ui/ArchiveCard.module.scss
+++ b/src/features/archive/ui/ArchiveCard.module.scss
@@ -1,13 +1,5 @@
 @use 'sass:color';
 
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  width: 20rem;
-  padding: 1.8rem;
-}
-
 .info {
   z-index: 10;
   display: flex;
@@ -147,7 +139,7 @@
   position: absolute;
   right: 1.6rem;
   bottom: 1.6rem;
-  z-index: 30;
+  z-index: 100;
   font-size: 1.6rem;
   color: rgb(255, 136, 130);
   text-shadow: '0 0 2px black';
diff --git a/src/features/archive/ui/ArchiveCard.tsx b/src/features/archive/ui/ArchiveCard.tsx
index 98abe5b..0121e39 100644
--- a/src/features/archive/ui/ArchiveCard.tsx
+++ b/src/features/archive/ui/ArchiveCard.tsx
@@ -1,35 +1,53 @@
 import cn from 'classnames';
+import { useNavigate } from 'react-router-dom';
 
 import type { ArchiveCardDTO } from '../archive.dto';
 import styles from './ArchiveCard.module.scss';
 
+import { useLikeArchive } from '@/features';
 import ColorChipLogo from '@/shared/assets/color-chip-logo.svg';
 import EmptyHeart from '@/shared/assets/empty-heart.svg';
 import Heart from '@/shared/assets/heart.svg';
 
-export const ArchiveCard = ({ archive }: { archive: ArchiveCardDTO }) => {
+export const ArchiveCard = ({ archive, isMine }: { archive: ArchiveCardDTO; isMine?: boolean }) => {
+  const { mutate: likeArchive } = useLikeArchive(archive.archiveId);
+  const navigate = useNavigate();
+
   return (
-    <div className={styles.container}>
+    <div>
       <article className={styles.card}>
         <img
           alt='archive-thumbnail'
-          className={archive.thumbnail ? styles.thumbnail : styles.noThumbnail}
-          src={archive.thumbnail || ColorChipLogo}
+          className={archive.imageUrl ? styles.thumbnail : styles.noThumbnail}
+          src={archive.imageUrl || ColorChipLogo}
         />
         {<div className={cn(styles.color, styles[archive.type])} />}
-        <div className={styles.contents}>
+        <div
+          className={styles.contents}
+          onClick={() => {
+            navigate(`/archive/${archive.archiveId}`);
+          }}
+        >
           <div className={styles.info}>
             <h3>{archive.title}</h3>
             <p>{archive.username}</p>
             <span>{archive.introduction}</span>
           </div>
-          <p className={styles.date}>{archive.createDate.toISOString().slice(0, 10)}</p>
-          <img
-            alt='isLiked-icon'
-            className={styles.heart}
-            src={archive.isLiked ? Heart : EmptyHeart}
-          />
+          <p className={styles.date}>{archive.createDate}</p>
         </div>
+        {!isMine && (
+          <button
+            onClick={() => {
+              likeArchive();
+            }}
+          >
+            <img
+              alt='isLiked-icon'
+              className={styles.heart}
+              src={archive.isLiked ? Heart : EmptyHeart}
+            />
+          </button>
+        )}
       </article>
     </div>
   );
diff --git a/src/features/archive/ui/ColorChip.module.scss b/src/features/archive/ui/ColorChip.module.scss
index 63f227a..d406fc4 100644
--- a/src/features/archive/ui/ColorChip.module.scss
+++ b/src/features/archive/ui/ColorChip.module.scss
@@ -13,6 +13,7 @@
 }
 
 .chip {
+  position: relative;
   display: flex;
   align-items: center;
   align-self: stretch;
@@ -25,10 +26,22 @@
     height: 7.375rem;
     object-fit: contain;
   }
-}
 
-.selected {
-  background-color: rgba(216, 216, 216, 50%);
+  .check {
+    position: absolute;
+    right: 0.75rem;
+    bottom: 0.75rem;
+    color: $secondary-color;
+    text-shadow: 0 0 0.125rem rgba(0, 0, 0, 25%);
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .selected {
+    visibility: visible;
+    opacity: 1;
+  }
 }
 
 .description {
diff --git a/src/features/archive/ui/ColorChip.tsx b/src/features/archive/ui/ColorChip.tsx
index bf76675..32e59ac 100644
--- a/src/features/archive/ui/ColorChip.tsx
+++ b/src/features/archive/ui/ColorChip.tsx
@@ -1,3 +1,7 @@
+import { faCircleCheck } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import cn from 'classnames';
+
 import type { ColorInfo } from '../colors.type';
 import styles from './ColorChip.module.scss';
 
@@ -16,9 +20,13 @@ export const ColorChip = ({
     <section className={styles.wrapper} onClick={onClick}>
       <div className={styles.chip} style={{ backgroundColor: colors.hex }}>
         <img alt='color-chip-logo' src={ColorChipLogo} />
+        <FontAwesomeIcon
+          className={cn(styles.check, { [styles.selected]: isSelected })}
+          icon={faCircleCheck}
+        />
       </div>
       <div className={styles.description}>
-        <h3 className={isSelected ? styles.selected : ''}>{colors.name}</h3>
+        <h3>{colors.name}</h3>
         <p>{colors.description}</p>
         <p>{colors.tag}</p>
       </div>
diff --git a/src/features/archive/ui/ColorSelect.tsx b/src/features/archive/ui/ColorSelect.tsx
index 4655e00..a34d746 100644
--- a/src/features/archive/ui/ColorSelect.tsx
+++ b/src/features/archive/ui/ColorSelect.tsx
@@ -1,23 +1,23 @@
 import cn from 'classnames';
 
 import styles from './ColorSelect.module.scss';
-import type { Color } from '../colors.type';
+import { ColorMap, type Color } from '../colors.type';
 
 export const ColorSelect = ({
   color,
   setColor,
 }: {
-  color: Color | 'default';
-  setColor: (color: Color | 'default') => void;
+  color: Color;
+  setColor: (color: Color) => void;
 }) => {
-  const colors: (Color | 'default')[] = ['default', 'red', 'yellow', 'blue', 'green', 'purple'];
+  const colors: Color[] = ['DEFAULT', 'RED', 'YELLOW', 'BLUE', 'GREEN', 'PURPLE'];
 
   return (
     <div className={styles.container}>
       {colors.map(c => (
         <div
-          className={cn(styles.color, styles[c], {
-            [styles.selected]: color === c || (color === null && c === 'default'),
+          className={cn(styles.color, styles[ColorMap[c].label], {
+            [styles.selected]: color === c,
           })}
           key={c}
           onClick={() => {
diff --git a/src/features/archive/ui/CommentItem.module.scss b/src/features/archive/ui/CommentItem.module.scss
index 027702a..f6301b4 100644
--- a/src/features/archive/ui/CommentItem.module.scss
+++ b/src/features/archive/ui/CommentItem.module.scss
@@ -26,8 +26,92 @@
 
   .editBtns {
     display: flex;
-    gap: 0.5rem;
+    gap: 0.8rem;
     color: #afafaf;
     cursor: pointer;
   }
 }
+
+.editWrapper {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+
+  .editArea {
+    width: 100%;
+    height: 5rem;
+    padding: 0.3rem;
+    font: inherit;
+    line-height: 1.2;
+    text-align: start;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+    vertical-align: top;
+    resize: none;
+    border: none;
+    border-radius: 4px;
+    outline: 1px solid #e9e9e9;
+
+    @media (width <= 768px) {
+      height: 3rem;
+    }
+
+    &::-webkit-scrollbar {
+      width: 5px;
+      height: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #ededed;
+      border-radius: 12px;
+    }
+
+    &:focus {
+      outline: 1px solid #e9e9e9;
+    }
+  }
+}
+
+.editBtnsWrapper {
+  display: flex;
+  gap: 0.8rem;
+  color: #afafaf;
+  cursor: pointer;
+  transform: translateY(0.3rem);
+}
+
+.edit,
+.check,
+.cancel,
+.trash {
+  font-size: 0.8rem;
+}
+
+.edit,
+.check {
+  &:hover {
+    color: $green;
+  }
+}
+
+.cancel,
+.trash {
+  &:hover {
+    color: rgba($red, 0.8);
+  }
+}
+
+.userInfo {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+
+  img {
+    width: 1.5rem;
+    aspect-ratio: 1/1;
+    object-fit: contain;
+    background-color: #e9e9e9;
+    border-radius: 4px;
+  }
+}
diff --git a/src/features/archive/ui/CommentItem.tsx b/src/features/archive/ui/CommentItem.tsx
index 4ba5d13..3c24beb 100644
--- a/src/features/archive/ui/CommentItem.tsx
+++ b/src/features/archive/ui/CommentItem.tsx
@@ -1,31 +1,75 @@
-import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faCircleCheck, faCircleXmark, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from 'react';
 
 import styles from './CommentItem.module.scss';
 import type { Comment } from '../archive.dto';
-import { useDeleteComment } from '../archive.hook';
+import { useDeleteComment, useUpdateComment } from '../archive.hook';
 
 export const CommentItem = ({ comment, archiveId }: { comment: Comment; archiveId: number }) => {
+  const [editedContent, setEditedContent] = useState(comment.content);
   const { mutate: deleteComment } = useDeleteComment(archiveId);
+  const { mutate: editComment } = useUpdateComment(archiveId, comment.commentId, editedContent);
+  const [isEdit, setIsEdit] = useState(false);
 
   return (
     <div className={styles.container}>
-      <div className={styles.info}>
-        <p className={styles.name}>{comment.username}</p>
-        {comment.isMine && (
-          <div className={styles.editBtns}>
-            <FontAwesomeIcon icon={faEdit} size='xs' />
+      {isEdit ? (
+        <div className={styles.editWrapper}>
+          <textarea
+            className={styles.editArea}
+            onChange={e => {
+              setEditedContent(e.target.value);
+            }}
+            value={editedContent}
+          />
+          <div className={styles.editBtnsWrapper}>
             <FontAwesomeIcon
-              icon={faTrash}
+              className={styles.check}
+              icon={faCircleCheck}
               onClick={() => {
-                deleteComment({ commentId: comment.commentId });
+                editComment({ content: editedContent });
+                setIsEdit(false);
               }}
-              size='xs'
             />
+            <FontAwesomeIcon
+              className={styles.cancel}
+              icon={faCircleXmark}
+              onClick={() => {
+                setIsEdit(false);
+              }}
+            />
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className={styles.info}>
+            <div className={styles.userInfo}>
+              <img alt='user profile' className={styles.profile} src={comment.userProfile} />
+              <p className={styles.name}>{comment.username}</p>
+            </div>
+            {comment.isMine && (
+              <div className={styles.editBtns}>
+                <FontAwesomeIcon
+                  className={styles.edit}
+                  icon={faEdit}
+                  onClick={() => {
+                    setIsEdit(true);
+                  }}
+                />
+                <FontAwesomeIcon
+                  className={styles.trash}
+                  icon={faTrash}
+                  onClick={() => {
+                    deleteComment({ commentId: comment.commentId });
+                  }}
+                />
+              </div>
+            )}
           </div>
-        )}
-      </div>
-      <p className={styles.content}>{comment.content}</p>
+          <p className={styles.content}>{comment.content}</p>
+        </>
+      )}
     </div>
   );
 };
diff --git a/src/features/archive/ui/MarkdownPreview.module.scss b/src/features/archive/ui/MarkdownPreview.module.scss
index 7d408b2..7e8191e 100644
--- a/src/features/archive/ui/MarkdownPreview.module.scss
+++ b/src/features/archive/ui/MarkdownPreview.module.scss
@@ -80,4 +80,12 @@
     background-color: #fff;
     border-radius: 0.625rem;
   }
+
+  img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+    object-fit: content;
+    border-radius: 8px;
+  }
 }
diff --git a/src/features/archive/ui/WriteComment.tsx b/src/features/archive/ui/WriteComment.tsx
index 9a429d4..59f33b8 100644
--- a/src/features/archive/ui/WriteComment.tsx
+++ b/src/features/archive/ui/WriteComment.tsx
@@ -3,10 +3,12 @@ import { useState } from 'react';
 import { useCreateComment } from '../archive.hook';
 import styles from './WriteComment.module.scss';
 
+import { useUserStore } from '@/features/user/model/user.store';
 import { Button } from '@/shared/ui';
 
 export const WriteComment = ({ archiveId }: { archiveId: number }) => {
   const { mutate: createComment } = useCreateComment(archiveId);
+  const { userData } = useUserStore();
 
   const [content, setContent] = useState('');
 
@@ -24,7 +26,11 @@ export const WriteComment = ({ archiveId }: { archiveId: number }) => {
         <Button
           className={styles.absolute}
           onClick={() => {
-            createComment({ content: content, username: '', userProfile: '' });
+            createComment({
+              content: content,
+              username: userData?.name ?? '',
+              userProfile: userData?.imageUrl ?? '',
+            });
             setContent('');
           }}
         >
diff --git a/src/features/image/image.api.ts b/src/features/image/image.api.ts
new file mode 100644
index 0000000..07c1f71
--- /dev/null
+++ b/src/features/image/image.api.ts
@@ -0,0 +1,12 @@
+import type { PostImagesApiResponse } from './image.dto';
+
+import api from '@/shared/api/baseApi';
+
+export const postImages = (data: FormData) =>
+  api
+    .post<PostImagesApiResponse>('/upload/images', data, {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    })
+    .then(res => res.data);
diff --git a/src/features/image/image.dto.ts b/src/features/image/image.dto.ts
new file mode 100644
index 0000000..75f6dcc
--- /dev/null
+++ b/src/features/image/image.dto.ts
@@ -0,0 +1,7 @@
+import type { ApiResponse } from '@/shared/api';
+
+export interface Images {
+  imgUrls: { imgUrl: string }[];
+}
+
+export type PostImagesApiResponse = ApiResponse<Images>;
diff --git a/src/features/image/image.hook.ts b/src/features/image/image.hook.ts
new file mode 100644
index 0000000..1c3185e
--- /dev/null
+++ b/src/features/image/image.hook.ts
@@ -0,0 +1,8 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { postImages } from './image.api';
+
+export const useImageUpload = () =>
+  useMutation({
+    mutationFn: (data: FormData) => postImages(data),
+  });
diff --git a/src/features/index.ts b/src/features/index.ts
index 9b77b72..43a5b04 100644
--- a/src/features/index.ts
+++ b/src/features/index.ts
@@ -1,5 +1,4 @@
 export * from './archive';
-export * from './chatting';
 export * from './gathering';
 export * from './portfolio';
 export * from './search';
diff --git a/src/features/search/ui/SearchBar.module.scss b/src/features/search/ui/SearchBar.module.scss
index da2d081..57b9987 100644
--- a/src/features/search/ui/SearchBar.module.scss
+++ b/src/features/search/ui/SearchBar.module.scss
@@ -1,13 +1,18 @@
 .container {
+  position: absolute;
+  right: 2rem;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 40%;
+  width: 100%;
   min-width: 300px;
   padding: 0.8rem 1.3rem;
   color: $secondary-color;
+  visibility: hidden;
   background-color: $primary-color;
   border-radius: 20px;
+  opacity: 0;
+  transition: 0.8s ease;
 
   input {
     width: 100%;
@@ -15,3 +20,8 @@
     color: $secondary-color;
   }
 }
+
+.visible {
+  visibility: visible;
+  opacity: 1;
+}
diff --git a/src/features/search/ui/SearchBar.tsx b/src/features/search/ui/SearchBar.tsx
index 7817c4e..4bf2726 100644
--- a/src/features/search/ui/SearchBar.tsx
+++ b/src/features/search/ui/SearchBar.tsx
@@ -1,26 +1,55 @@
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import cn from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 import styles from './SearchBar.module.scss';
 
 export const SearchBar = ({
-  searchText,
-  setSearchText,
+  isSearch,
+  setIsSearch,
 }: {
-  searchText: string;
-  setSearchText: (t: string) => void;
+  isSearch: boolean;
+  setIsSearch: (s: boolean) => void;
 }) => {
+  const [searchText, setSearchText] = useState('');
+  const navigate = useNavigate();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isSearch && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isSearch]);
+
+  const handleEnter = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      navigate(`/search?searchText=${searchText}`);
+      setIsSearch(false);
+    }
+  };
+
   return (
-    <div className={styles.container}>
+    <div className={cn(styles.container, { [styles.visible]: isSearch })}>
       <input
         onChange={e => {
           setSearchText(e.target.value);
         }}
-        placeholder='검색어를 입력해주세요'
+        onKeyDown={handleEnter}
+        placeholder='다양한 스토리의 아카이브를 검색해보세요!'
+        ref={inputRef}
         type='text'
         value={searchText}
       />
-      <FontAwesomeIcon className={styles.icon} icon={faSearch} />
+      <FontAwesomeIcon
+        className={styles.icon}
+        icon={faSearch}
+        onClick={() => {
+          navigate(`/search?searchText=${searchText}`);
+          setIsSearch(false);
+        }}
+      />
     </div>
   );
 };
diff --git a/src/features/user/ui/UserProfileInfo.tsx b/src/features/user/ui/UserProfileInfo.tsx
index 742b2ea..bd00c84 100644
--- a/src/features/user/ui/UserProfileInfo.tsx
+++ b/src/features/user/ui/UserProfileInfo.tsx
@@ -15,7 +15,12 @@ export const UserProfileInfo = () => {
       <div className={styles.userInfo}>
         <div className={styles.infoHeader}>
           <strong>채승규</strong>
-          <FontAwesomeIcon icon={faGear} />
+          <FontAwesomeIcon
+            icon={faGear}
+            onClick={() => {
+              // TODO : 내 정보일 경우 /my로 이동
+            }}
+          />
         </div>
         <div className={styles.jobInfos}>
           <span>프론트엔드 개발자</span>
diff --git a/src/mocks/handlers/archive.ts b/src/mocks/handlers/archive.ts
index b013030..50c461d 100644
--- a/src/mocks/handlers/archive.ts
+++ b/src/mocks/handlers/archive.ts
@@ -21,9 +21,9 @@ export const archiveHandlers = [
           },
         );
       }
-      const { title, description, type, tags, imageUrls } = body as BaseArchiveDTO;
+      const { title, description, colorType, tags, imageUrls } = body as BaseArchiveDTO;
 
-      if (!title || !description || !type || tags.length === 0 || imageUrls.length === 0) {
+      if (!title || !description || !colorType || tags.length === 0 || imageUrls.length === 0) {
         return new Response(
           JSON.stringify({
             status: 400,
@@ -334,9 +334,9 @@ export const archiveHandlers = [
         );
       }
 
-      const { title, description, type, tags, imageUrls } = body as BaseArchiveDTO;
+      const { title, description, colorType, tags, imageUrls } = body as BaseArchiveDTO;
 
-      if (!title || !description || !type || tags.length === 0 || imageUrls.length === 0) {
+      if (!title || !description || !colorType || tags.length === 0 || imageUrls.length === 0) {
         return new Response(
           JSON.stringify({
             status: 400,
diff --git a/src/pages/ArchiveListPage/ArchiveListPage.tsx b/src/pages/ArchiveListPage/ArchiveListPage.tsx
index 79b0002..1a93c31 100644
--- a/src/pages/ArchiveListPage/ArchiveListPage.tsx
+++ b/src/pages/ArchiveListPage/ArchiveListPage.tsx
@@ -5,15 +5,17 @@ import styles from './ArchiveListPage.module.scss';
 
 import type { Color } from '@/features';
 import { ColorSelect, useArchiveList } from '@/features';
-import { Button, SelectBtn, TripleDot } from '@/shared/ui';
+import { Button, Loader, SelectBtn, TripleDot } from '@/shared/ui';
 import { ArchiveGrid } from '@/widgets';
 
 export const ArchiveListPage = () => {
   const navigate = useNavigate();
   const [sort, setSort] = useState({ label: '최신순', value: 'latest' });
-  const [color, setColor] = useState<Color | 'default'>('default');
+  const [color, setColor] = useState<Color>('DEFAULT');
 
-  const { items: archives, isFetchingNextPage, ref } = useArchiveList(sort.value, color);
+  const { items: archives, isFetchingNextPage, ref, isPending } = useArchiveList(sort.value, color);
+
+  if (isPending) return <Loader />;
 
   return (
     <div className={styles.wrapper}>
diff --git a/src/pages/DetailArchivePage/DetailArchivePage.module.scss b/src/pages/DetailArchivePage/DetailArchivePage.module.scss
index ed73b8e..d40de1b 100644
--- a/src/pages/DetailArchivePage/DetailArchivePage.module.scss
+++ b/src/pages/DetailArchivePage/DetailArchivePage.module.scss
@@ -14,6 +14,8 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
 }
 
 .comment {
@@ -21,9 +23,4 @@
   flex-direction: column;
   align-items: center;
   width: 100%;
-  padding: 0 2rem;
-
-  @media (width <= 768px) {
-    padding: 0;
-  }
 }
diff --git a/src/pages/DetailArchivePage/DetailArchivePage.tsx b/src/pages/DetailArchivePage/DetailArchivePage.tsx
index 1aca0bd..04ebcb0 100644
--- a/src/pages/DetailArchivePage/DetailArchivePage.tsx
+++ b/src/pages/DetailArchivePage/DetailArchivePage.tsx
@@ -1,37 +1,23 @@
-import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 import styles from './DetailArchivePage.module.scss';
-import { worker } from '../../mocks/browser';
 
 import { MarkdownPreview, WriteComment, CommentItem, useArchive, useComments } from '@/features';
-import { TripleDot } from '@/shared/ui';
+import { Loader, TripleDot } from '@/shared/ui';
 import { DetailHeader } from '@/widgets';
 
 export const DetailArchivePage = () => {
   const { archiveId } = useParams();
 
-  const { data: archive, refetch: fetchArchive } = useArchive(Number(archiveId));
-  const { items, isFetchingNextPage, ref, fetchNextPage } = useComments(Number(archiveId));
+  const { data: archive, isLoading: isArchiveLoading } = useArchive(Number(archiveId));
+  const {
+    items,
+    isFetchingNextPage,
+    ref,
+    isLoading: isCommentsLoading,
+  } = useComments(Number(archiveId));
 
-  useEffect(() => {
-    worker
-      .start()
-      .then(() => {
-        if (archiveId) void fetchArchive();
-      })
-      .catch(error => {
-        console.error('Failed to start worker:', error);
-      });
-
-    return () => {
-      worker.stop();
-    };
-  }, [archiveId, fetchArchive]);
-
-  useEffect(() => {
-    if (archive) void fetchNextPage();
-  }, [archive]);
+  if (isArchiveLoading || isCommentsLoading) return <Loader />;
 
   return (
     <div className={styles.wrapper}>
@@ -43,14 +29,20 @@ export const DetailArchivePage = () => {
           </div>
         </>
       )}
-      <div className={styles.comment}>
-        <WriteComment archiveId={Number(archiveId)} />
-        {items &&
-          items.map(comment => (
-            <CommentItem archiveId={Number(archiveId)} comment={comment} key={comment.commentId} />
-          ))}
-        {archive && <div ref={ref}>{isFetchingNextPage && <TripleDot />}</div>}
-      </div>
+      {archive?.data?.canComment && (
+        <div className={styles.comment}>
+          <WriteComment archiveId={Number(archiveId)} />
+          {items &&
+            items.map(comment => (
+              <CommentItem
+                archiveId={Number(archiveId)}
+                comment={comment}
+                key={comment.commentId}
+              />
+            ))}
+          {archive && <div ref={ref}>{isFetchingNextPage && <TripleDot />}</div>}
+        </div>
+      )}
     </div>
   );
 };
diff --git a/src/pages/LikeListPage/LikeListPage.module.scss b/src/pages/LikeListPage/LikeListPage.module.scss
index 8371467..07cd45c 100644
--- a/src/pages/LikeListPage/LikeListPage.module.scss
+++ b/src/pages/LikeListPage/LikeListPage.module.scss
@@ -1,7 +1,7 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 3rem;
   padding: 4rem 8rem;
 
   @media (width <= 768px) {
diff --git a/src/pages/MyPage/MyPage.module.scss b/src/pages/MyPage/MyPage.module.scss
index dcc378b..c975503 100644
--- a/src/pages/MyPage/MyPage.module.scss
+++ b/src/pages/MyPage/MyPage.module.scss
@@ -3,11 +3,21 @@
   column-gap: 4rem;
   width: 100%;
   padding: 4rem 8rem;
+
+  @media (width <= 768px) {
+    flex-direction: column;
+    gap: 2rem;
+    padding: 2rem;
+  }
 }
 
 .tabContainer {
   width: 12rem;
   color: $primary-color;
+
+  @media (width <= 768px) {
+    width: 100%;
+  }
 }
 
 .contentContainer {
diff --git a/src/pages/SearchPage/SearchPage.module.scss b/src/pages/SearchPage/SearchPage.module.scss
index f998baa..fa86197 100644
--- a/src/pages/SearchPage/SearchPage.module.scss
+++ b/src/pages/SearchPage/SearchPage.module.scss
@@ -2,12 +2,24 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: 2rem;
+  gap: 3rem;
   align-items: center;
   padding: 4rem 8rem;
 
   @media (width <= 768px) {
-    gap: 1rem;
+    gap: 2rem;
     padding: 2rem;
   }
 }
+
+.path {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  color: #848484;
+}
diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx
index e22a15f..fd1c50d 100644
--- a/src/pages/SearchPage/SearchPage.tsx
+++ b/src/pages/SearchPage/SearchPage.tsx
@@ -1,18 +1,36 @@
-import { useState } from 'react';
+import { faChevronRight, faHome } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useLocation } from 'react-router-dom';
 
 import styles from './SearchPage.module.scss';
 
-import { SearchBar } from '@/features';
-import { SearchTap } from '@/widgets';
+import { useSearchArchive } from '@/features';
+import { Loader, TripleDot } from '@/shared/ui';
+import { ArchiveGrid } from '@/widgets';
 
 export const SearchPage = () => {
-  const [searchText, setSearchText] = useState('');
-  const [activeTab, setActiveTab] = useState('전체');
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const searchText = searchParams.get('searchText');
+
+  const {
+    items: archives,
+    ref,
+    isFetchingNextPage,
+    isPending,
+  } = useSearchArchive(searchText ?? '');
+
+  if (isPending) return <Loader />;
 
   return (
     <div className={styles.wrapper}>
-      <SearchBar searchText={searchText} setSearchText={setSearchText} />
-      <SearchTap activeTab={activeTab} setActiveTab={setActiveTab} />
+      <span className={styles.path}>
+        <FontAwesomeIcon icon={faHome} size='xs' />
+        <FontAwesomeIcon icon={faChevronRight} size='xs' />
+        Search
+      </span>
+      <ArchiveGrid archives={archives} />
+      <div ref={ref}>{isFetchingNextPage && <TripleDot />}</div>
     </div>
   );
 };
diff --git a/src/pages/WriteArchivePage/WriteArchivePage.tsx b/src/pages/WriteArchivePage/WriteArchivePage.tsx
index 849ee18..6e02783 100644
--- a/src/pages/WriteArchivePage/WriteArchivePage.tsx
+++ b/src/pages/WriteArchivePage/WriteArchivePage.tsx
@@ -54,7 +54,7 @@ export const WriteArchivePage = () => {
             onClick={() => {
               dispatch({ type: 'WRITE_FORM' });
             }}
-            selectedColor={color || 'red'}
+            selectedColor={color}
           />
         ),
       };
diff --git a/src/shared/api/baseApi.ts b/src/shared/api/baseApi.ts
index 75777e3..b02fe33 100644
--- a/src/shared/api/baseApi.ts
+++ b/src/shared/api/baseApi.ts
@@ -1,6 +1,8 @@
 import type { AxiosRequestConfig } from 'axios';
 import axios from 'axios';
 
+import { customConfirm } from '../ui';
+
 import { getLocalAccessToken, reissueToken } from '@/features/auth/auth.api';
 
 let isRefreshing = false;
@@ -59,6 +61,9 @@ api.interceptors.response.use(
       } finally {
         // eslint-disable-next-line require-atomic-updates
         isRefreshing = false;
+        customConfirm({ text: '로그인이 필요합니다.', title: '로그인', icon: 'info' }).catch(
+          console.error,
+        );
       }
     }
 
diff --git a/src/shared/hook/useCustomInfiniteQuery.ts b/src/shared/hook/useCustomInfiniteQuery.ts
index df7044c..9dbbc97 100644
--- a/src/shared/hook/useCustomInfiniteQuery.ts
+++ b/src/shared/hook/useCustomInfiniteQuery.ts
@@ -1,9 +1,16 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 import throttle from 'lodash-es/throttle';
-import { useMemo, useEffect } from 'react';
+import throttle from 'lodash-es/throttle';
+import { useMemo, useEffect, useEffect } from 'react';
 
 import { useIntersectionObserver } from './useIntersectionObserver';
 
+export const useCustomInfiniteQuery = <
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TData extends { [key: string]: any },
+  TItem,
+  TError,
+>(
 export const useCustomInfiniteQuery = <
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   TData extends { [key: string]: any },
@@ -15,23 +22,25 @@ export const useCustomInfiniteQuery = <
   pageSize: number,
   dataKey: string,
   enabled: boolean = false,
+  staleTime: number = 0,
 ) => {
-  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage, refetch } = useInfiniteQuery<
-    TData,
-    TError
-  >({
-    queryKey,
-    queryFn: ({ pageParam = 0 }) => queryFn({ pageParam: pageParam as number }),
-    getNextPageParam: (lastPage, allPages) => {
-      if (Array.isArray(lastPage.data[dataKey])) {
-        const isLastPage = lastPage.data[dataKey]?.length < pageSize;
-        return isLastPage ? null : allPages.length;
-      }
-      return null;
-    },
-    initialPageParam: 0,
-    enabled: enabled,
-  });
+  const { data, fetchNextPage, isLoading, isError, isFetchingNextPage, refetch, isPending, refetch } =
+    useInfiniteQuery<TData, TError>({
+      queryKey,
+      queryFn: ({ pageParam = 0 }) => queryFn({ pageParam: pageParam as number }),
+      getNextPageParam: (lastPage, allPages) => {
+        if (Array.isArray(lastPage.data[dataKey][dataKey])) {
+          const isLastPage = lastPage.data[dataKey][dataKey]?.length < pageSize;
+          return isLastPage ? null : allPages.length;
+        }
+        return null;
+      },
+      initialPageParam: 0,
+      enabled: enabled,
+      staleTime,
+      refetchOnMount: 'always',
+      refetchOnWindowFocus: true,
+    });
 
   const items = useMemo(() => {
     const temp: TItem[] = [];
@@ -63,5 +72,5 @@ export const useCustomInfiniteQuery = <
     { threshold: 1.0 },
   );
 
-  return { items, isFetchingNextPage, isLoading, isError, ref, fetchNextPage, refetch };
+  return { items, isFetchingNextPage, isLoading, isError, ref, fetchNextPage, refetch, isPending, refetch };
 };
diff --git a/src/shared/ui/Loader/Loader.module.scss b/src/shared/ui/Loader/Loader.module.scss
new file mode 100644
index 0000000..e4de95b
--- /dev/null
+++ b/src/shared/ui/Loader/Loader.module.scss
@@ -0,0 +1,54 @@
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100svh;
+}
+
+.dot {
+  width: 0.325rem;
+  height: 0.325rem;
+  background-color: $primary-color;
+  border: 1px solid $primary-color;
+  border-radius: 50%;
+  animation: shake 0.3s ease-in-out infinite;
+
+  &:nth-child(1) {
+    animation-delay: 0s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: 0.1s;
+  }
+
+  &:nth-child(3) {
+    animation-delay: 0.2s;
+  }
+}
+
+@keyframes shake {
+  0%,
+  100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-2px);
+  }
+
+  75% {
+    transform: translateX(2px);
+  }
+}
+
+.container {
+  display: flex;
+  gap: 0.94rem;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+}
diff --git a/src/shared/ui/Loader/Loader.tsx b/src/shared/ui/Loader/Loader.tsx
new file mode 100644
index 0000000..2c7e388
--- /dev/null
+++ b/src/shared/ui/Loader/Loader.tsx
@@ -0,0 +1,13 @@
+import styles from './Loader.module.scss';
+
+export const Loader = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.container}>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div className={styles.dot} key={index}></div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx b/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx
index 30b7184..f29362f 100644
--- a/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx
+++ b/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx
@@ -57,7 +57,7 @@ export const MarkdownEditor = <T extends { [key: string]: any }>({
         onCommand={insertStartToggle}
         onInsertImage={file => {
           if (editorViewRef.current) {
-            handleImage(file, editorViewRef.current);
+            handleImage(file, editorViewRef.current).catch(console.error);
           }
         }}
       />
diff --git a/src/shared/ui/NoResult/NoResult.tsx b/src/shared/ui/NoResult/NoResult.tsx
new file mode 100644
index 0000000..c1b49de
--- /dev/null
+++ b/src/shared/ui/NoResult/NoResult.tsx
@@ -0,0 +1,9 @@
+import { faFaceSadTear } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export const NoResult = () => (
+  <span style={{ color: '#333533', fontSize: '1.125rem' }}>
+    앗, 찾으시는 결과가 없어요!{' '}
+    <FontAwesomeIcon bounce icon={faFaceSadTear} style={{ color: '#3b3b3b' }} />
+  </span>
+);
diff --git a/src/shared/ui/Tag/Tag.tsx b/src/shared/ui/Tag/Tag.tsx
index bc30638..7d39925 100644
--- a/src/shared/ui/Tag/Tag.tsx
+++ b/src/shared/ui/Tag/Tag.tsx
@@ -8,17 +8,17 @@ export const Tag = ({
   onRemove,
   isDeleteable = true,
 }: {
-  tag: { content: string };
+  tag: { tag: string };
   onRemove?: (tagContent: string) => void;
   isDeleteable?: boolean;
 }) => (
-  <span className={styles.tag} key={tag.content}>
-    {tag.content}
+  <span className={styles.tag} key={tag.tag}>
+    {tag.tag}
     {isDeleteable && (
       <FontAwesomeIcon
         icon={faX}
         onClick={() => {
-          if (onRemove) onRemove(tag.content);
+          if (onRemove) onRemove(tag.tag);
         }}
         size='xs'
       />
diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts
index 23f9e8c..59fe6fe 100644
--- a/src/shared/ui/index.ts
+++ b/src/shared/ui/index.ts
@@ -14,3 +14,5 @@ export { Tag } from './Tag/Tag';
 export { TextArea } from './TextArea/TextArea';
 export { TripleDot } from './TripleDot/TripleDot';
 export { ScrollToTop } from './ScrollToTop/ScrollToTop';
+export { NoResult } from './NoResult/NoResult';
+export { Loader } from './Loader/Loader';
diff --git a/src/shared/util/findCategoryName.ts b/src/shared/util/findCategoryName.ts
new file mode 100644
index 0000000..f4c9b38
--- /dev/null
+++ b/src/shared/util/findCategoryName.ts
@@ -0,0 +1,14 @@
+import { JOB_CATEGORIES } from '../model';
+
+export const findCategoryName = (id: string) => {
+  for (const category of JOB_CATEGORIES) {
+    if (category.subItems) {
+      for (const subItem of category.subItems) {
+        if (subItem.id === id) {
+          return subItem.name;
+        }
+      }
+    }
+  }
+  return '';
+};
diff --git a/src/shared/util/index.ts b/src/shared/util/index.ts
new file mode 100644
index 0000000..fc0fe9d
--- /dev/null
+++ b/src/shared/util/index.ts
@@ -0,0 +1 @@
+export * from './findCategoryName';
diff --git a/src/widgets/ArchiveGrid/ArchiveGrid.tsx b/src/widgets/ArchiveGrid/ArchiveGrid.tsx
index 3a59d71..ad173a1 100644
--- a/src/widgets/ArchiveGrid/ArchiveGrid.tsx
+++ b/src/widgets/ArchiveGrid/ArchiveGrid.tsx
@@ -1,23 +1,25 @@
-import { useNavigate } from 'react-router-dom';
-
 import styles from './ArchiveGrid.module.scss';
 
 import type { ArchiveCardDTO } from '@/features';
 import { ArchiveCard } from '@/features';
+import { NoResult } from '@/shared/ui';
+
+export const ArchiveGrid = ({
+  archives,
+  isMine,
+}: {
+  archives: ArchiveCardDTO[];
+  isMine?: boolean;
+}) => {
+  if (archives.length === 0 || !archives) {
+    return <NoResult />;
+  }
 
-export const ArchiveGrid = ({ archives }: { archives: ArchiveCardDTO[] }) => {
-  const navigate = useNavigate();
   return (
     <div className={styles.wrapper}>
       {archives.map(archive => (
-        <div
-          className={styles.item}
-          key={archive.archiveId}
-          onClick={() => {
-            navigate(`/archive/${archive.archiveId}`);
-          }}
-        >
-          <ArchiveCard archive={archive} />
+        <div className={styles.item} key={archive.archiveId}>
+          <ArchiveCard archive={archive} isMine={isMine} />
         </div>
       ))}
     </div>
diff --git a/src/widgets/ChattingModal/ChattingModal.tsx b/src/widgets/ChattingModal/ChattingModal.tsx
index 44a192e..f541831 100644
--- a/src/widgets/ChattingModal/ChattingModal.tsx
+++ b/src/widgets/ChattingModal/ChattingModal.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import styles from './ChattingModal.module.scss';
 
-import { ChatInput, ChatRoomItem, HomeHeader, ChatHeader } from '@/features';
+import { ChatInput, ChatRoomItem, HomeHeader, ChatHeader } from '@/features/chatting';
 import { chatListDummyData } from '@/features/chatting/model/mock';
 import { Modal } from '@/shared/ui';
 
diff --git a/src/widgets/ChattingModal/ui/ChattingModal.tsx b/src/widgets/ChattingModal/ui/ChattingModal.tsx
index 5dc192d..c7a6af7 100644
--- a/src/widgets/ChattingModal/ui/ChattingModal.tsx
+++ b/src/widgets/ChattingModal/ui/ChattingModal.tsx
@@ -2,7 +2,13 @@ import { useState } from 'react';
 
 import styles from './ChattingModal.module.scss';
 
-import { ChatInput, ChatRoomItem, ChatBottomNav, HomeHeader, ChatHeader } from '@/features';
+import {
+  ChatInput,
+  ChatRoomItem,
+  ChatBottomNav,
+  HomeHeader,
+  ChatHeader,
+} from '@/features/chatting';
 import { chatListDummyData } from '@/features/chatting/model/mock';
 import { Modal } from '@/shared/ui';
 
diff --git a/src/widgets/DetailArchive/DetailHeader.module.scss b/src/widgets/DetailArchive/DetailHeader.module.scss
index 937bd04..0c30c48 100644
--- a/src/widgets/DetailArchive/DetailHeader.module.scss
+++ b/src/widgets/DetailArchive/DetailHeader.module.scss
@@ -68,6 +68,14 @@
       font-size: 1rem;
     }
   }
+
+  img {
+    width: 1.5rem;
+    aspect-ratio: 1/1;
+    object-fit: contain;
+    background-color: #e9e9e9;
+    border-radius: 4px;
+  }
 }
 
 .tags {
diff --git a/src/widgets/DetailArchive/DetailHeader.tsx b/src/widgets/DetailArchive/DetailHeader.tsx
index 8118500..803b86d 100644
--- a/src/widgets/DetailArchive/DetailHeader.tsx
+++ b/src/widgets/DetailArchive/DetailHeader.tsx
@@ -12,7 +12,8 @@ import styles from './DetailHeader.module.scss';
 
 import type { Archive } from '@/features';
 import { ColorMap, useArchiveStore, useDeleteArchive } from '@/features';
-import { Button, Tag } from '@/shared/ui';
+import { Button, customToast, Tag } from '@/shared/ui';
+import { findCategoryName } from '@/shared/util';
 
 export const DetailHeader = ({ archive, archiveId }: { archive: Archive; archiveId: number }) => {
   const { mutate: deleteArchive } = useDeleteArchive();
@@ -25,7 +26,7 @@ export const DetailHeader = ({ archive, archiveId }: { archive: Archive; archive
       title: archive.title,
       description: archive.description,
       introduction: archive.introduction,
-      type: archive.type,
+      colorType: archive.type,
       canComment: archive.canComment,
       tags: archive.tags,
       imageUrls: archive.imageUrls,
@@ -61,30 +62,40 @@ export const DetailHeader = ({ archive, archiveId }: { archive: Archive; archive
       </div>
       <div className={styles.row}>
         <div className={styles.itemWrapper}>
+          <img alt='user profile' className={styles.profile} src={archive.userProfile} />
           <p>{archive.username}</p>
-          <span>{archive.job}</span>
+          <span>{findCategoryName(archive.job)}</span>
         </div>
         <div className={styles.itemWrapper}>
-          <Button onClick={handleEditArchive}>수정하기</Button>
-          <Button
-            onClick={() => {
-              deleteArchive(
-                { archiveId: Number(archiveId) },
-                {
-                  onSuccess: () => {
-                    navigate(-1);
-                  },
-                },
-              );
-            }}
-          >
-            삭제하기
-          </Button>
+          {archive.isMine && (
+            <>
+              <Button onClick={handleEditArchive}>수정하기</Button>
+              <Button
+                onClick={() => {
+                  deleteArchive(
+                    { archiveId: Number(archiveId) },
+                    {
+                      onSuccess: () => {
+                        navigate(-1);
+                        customToast({
+                          text: '아카이브가 삭제되었습니다',
+                          timer: 3000,
+                          icon: 'success',
+                        });
+                      },
+                    },
+                  );
+                }}
+              >
+                삭제하기
+              </Button>
+            </>
+          )}
         </div>
       </div>
       <div className={styles.tags}>
         {archive.tags.map(tag => (
-          <Tag isDeleteable={false} key={tag.content} tag={tag} />
+          <Tag isDeleteable={false} key={tag.tag} tag={tag} />
         ))}
       </div>
       <div className={styles.intro}>
diff --git a/src/widgets/Layout/ui/Footer/Footer.tsx b/src/widgets/Layout/ui/Footer/Footer.tsx
index fd3b47b..aeed41c 100644
--- a/src/widgets/Layout/ui/Footer/Footer.tsx
+++ b/src/widgets/Layout/ui/Footer/Footer.tsx
@@ -3,7 +3,7 @@ import styles from './Footer.module.scss';
 export const Footer = () => {
   return (
     <footer className={styles.footer}>
-      <span>Palette</span>
+      <span>Palettee</span>
       <p>ⓒ2024. ZeroOne all rights reserved</p>
     </footer>
   );
diff --git a/src/widgets/Layout/ui/Header/Header.module.scss b/src/widgets/Layout/ui/Header/Header.module.scss
index 8d5c3fe..0cac377 100644
--- a/src/widgets/Layout/ui/Header/Header.module.scss
+++ b/src/widgets/Layout/ui/Header/Header.module.scss
@@ -97,6 +97,10 @@
 .button {
   cursor: pointer;
   transition: 0.3s ease;
+
+  &:hover {
+    transform: scale(0.8);
+  }
 }
 
 .heart {
@@ -104,3 +108,17 @@
     color: $red;
   }
 }
+
+.mobileBtns {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+.searchWrapper {
+  position: absolute;
+  top: $header-height;
+  right: 0;
+  display: flex;
+  width: 30%;
+}
diff --git a/src/widgets/Layout/ui/Header/Header.tsx b/src/widgets/Layout/ui/Header/Header.tsx
index 861276d..81e1689 100644
--- a/src/widgets/Layout/ui/Header/Header.tsx
+++ b/src/widgets/Layout/ui/Header/Header.tsx
@@ -1,7 +1,7 @@
 import { faBars, faHeart, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
-import React from 'react';
+import React, { useRef } from 'react';
 import { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { useShallow } from 'zustand/shallow';
@@ -10,13 +10,11 @@ import styles from './Header.module.scss';
 import { NAV_LINKS } from '../../constants';
 
 //assets
+import { SearchBar } from '@/features';
 import { logout } from '@/features/auth/auth.api';
 import { useUserStore } from '@/features/user/model/user.store';
 import Logo from '@/shared/assets/paletteLogo.svg?react';
-//model
 import { useModalStore } from '@/shared/model/modalStore';
-//component
-
 import { Button, customConfirm } from '@/shared/ui';
 import { MenuModal } from '@/widgets/MenuModal/MenuModal';
 
@@ -43,6 +41,7 @@ export const Header = () => {
       showCancelButton: false,
     });
   };
+  const [isSearch, setIsSearch] = useState(false);
 
   useEffect(() => {
     const handleResize = () => {
@@ -56,6 +55,27 @@ export const Header = () => {
     };
   }, []);
 
+  const searchRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const handler = (event: MouseEvent) => {
+      if (searchRef.current !== null && !searchRef.current.contains(event.target as Node)) {
+        setTimeout(() => {
+          setIsSearch(false);
+        }, 100);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+
+    return () => {
+      document.removeEventListener('mousedown', handler);
+    };
+  }, []);
+
+  const toggleSearch = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (!isSearch) setIsSearch(true);
+  };
+
   return (
     <header className={styles.header}>
       {/** Logo */}
@@ -63,18 +83,40 @@ export const Header = () => {
         <Link to='/'>
           <Logo height={36} />
         </Link>
-        <span>Palette</span>
+        <span>Palettee</span>
       </h1>
       {isMobile ? (
         <>
-          <FontAwesomeIcon
-            icon={faBars}
-            onClick={() => {
-              setMenuOpen(true);
-            }}
-            size='lg'
-          />
-          {menuOpen && <MenuModal isOpen={menuOpen} onClose={setMenuOpen} />}{' '}
+          <div className={styles.mobileBtns}>
+            <FontAwesomeIcon
+              className={cn(styles.button, styles.search)}
+              icon={faSearch}
+              onClick={toggleSearch}
+            />
+            <FontAwesomeIcon
+              icon={faBars}
+              onClick={() => {
+                setMenuOpen(true);
+              }}
+              size='lg'
+            />
+          </div>
+          {isSearch && (
+            <div
+              className={cn(styles.searchWrapper, { [styles.visible]: isSearch })}
+              ref={searchRef}
+            >
+              <SearchBar isSearch setIsSearch={setIsSearch} />
+            </div>
+          )}
+          {menuOpen && (
+            <MenuModal
+              isOpen={menuOpen}
+              isUserData={userData ? true : false}
+              onClose={setMenuOpen}
+              onLogout={logoutHandler}
+            />
+          )}{' '}
         </>
       ) : (
         <>
@@ -96,9 +138,7 @@ export const Header = () => {
             <FontAwesomeIcon
               className={cn(styles.button, styles.search)}
               icon={faSearch}
-              onClick={() => {
-                navigate('/search');
-              }}
+              onClick={toggleSearch}
             />
             <FontAwesomeIcon
               className={cn(styles.button, styles.heart)}
@@ -107,24 +147,32 @@ export const Header = () => {
                 navigate('/like');
               }}
             />
-        {userData ? (
-          <Button
-            onClick={() => {
-              void logoutHandler();
-            }}
-          >
-            로그아웃
-          </Button>
-        ) : (
-          <Button
-            onClick={() => {
-              open('login');
-            }}
-          >
-            로그인
-          </Button>
-        )}
+            {userData ? (
+              <Button
+                onClick={() => {
+                  void logoutHandler();
+                }}
+              >
+                로그아웃
+              </Button>
+            ) : (
+              <Button
+                onClick={() => {
+                  open('login');
+                }}
+              >
+                로그인
+              </Button>
+            )}
           </div>{' '}
+          {isSearch && (
+            <div
+              className={cn(styles.searchWrapper, { [styles.visible]: isSearch })}
+              ref={searchRef}
+            >
+              <SearchBar isSearch setIsSearch={setIsSearch} />
+            </div>
+          )}
         </>
       )}
     </header>
diff --git a/src/widgets/LikeTab/LikeTab.tsx b/src/widgets/LikeTab/LikeTab.tsx
index 05cdbde..f601c89 100644
--- a/src/widgets/LikeTab/LikeTab.tsx
+++ b/src/widgets/LikeTab/LikeTab.tsx
@@ -3,20 +3,9 @@ import { ArchiveGrid } from '../ArchiveGrid';
 import { GatheringGrid } from '../GatheringGrid';
 import { PortFolioGrid } from '../PortfolioGrid/PortFolioGrid';
 
-import type { ArchiveCardDTO, Color } from '@/features';
-import type { GatheringItem } from '@/features/gathering/model/dto/gathering.dto';
-
-const dummyArchives: ArchiveCardDTO[] = Array.from({ length: 9 }, (_, i) => ({
-  archiveId: i,
-  title: `Sample Archive`,
-  introduction: `Description for sample archive`,
-  type: ['red', 'blue', 'green', 'yellow', 'purple'][Math.floor(Math.random() * 4)] as Color,
-  username: '홍길동',
-  likeCount: Math.floor(Math.random() * 100),
-  isLiked: Math.random() > 0.5,
-  thumbnail: 'https://picsum.photos/300/200',
-  createDate: new Date(),
-}));
+import { useLikeArchiveList } from '@/features';
+import type { GatheringItem } from '@/features/gathering/model/gathering.dto';
+import { Loader, TripleDot } from '@/shared/ui';
 
 const dummyGatherings: GatheringItem[] = Array.from({ length: 9 }, (_, i) => ({
   gatheringId: i,
@@ -33,16 +22,6 @@ const dummyGatherings: GatheringItem[] = Array.from({ length: 9 }, (_, i) => ({
   tags: ['tag1', 'tag2'],
 }));
 
-const renderingLikeTap = (activeTab: string) => {
-  if (activeTab === '포트폴리오') {
-    return <PortFolioGrid />;
-  } else if (activeTab === '아카이브') {
-    return <ArchiveGrid archives={dummyArchives} />;
-  } else if (activeTab === '게더링') {
-    return <GatheringGrid items={dummyGatherings} />;
-  }
-};
-
 export const LikeTab = ({
   activeTab,
   setActiveTab,
@@ -52,6 +31,33 @@ export const LikeTab = ({
 }) => {
   const tabs = ['포트폴리오', '아카이브', '게더링'];
 
+  const {
+    items: likeArchives,
+    isPending: isArchiveLoading,
+    isFetchingNextPage,
+    ref,
+  } = useLikeArchiveList();
+
+  const renderingLikeTap = (activeTab: string) => {
+    if (activeTab === '포트폴리오') {
+      return <PortFolioGrid />;
+    } else if (activeTab === '아카이브') {
+      if (!likeArchives || isArchiveLoading) {
+        return <Loader />;
+      }
+      return (
+        <>
+          <ArchiveGrid archives={likeArchives} />
+          <div className={styles.loading} ref={ref}>
+            {isFetchingNextPage && <TripleDot />}
+          </div>
+        </>
+      );
+    } else if (activeTab === '게더링') {
+      return <GatheringGrid items={dummyGatherings} />;
+    }
+  };
+
   return (
     <div className={styles.wrapper}>
       <ul className={styles.tabList}>
diff --git a/src/widgets/MenuModal/MenuModal.tsx b/src/widgets/MenuModal/MenuModal.tsx
index b3d17fb..f668133 100644
--- a/src/widgets/MenuModal/MenuModal.tsx
+++ b/src/widgets/MenuModal/MenuModal.tsx
@@ -1,4 +1,4 @@
-import { faHeart, faHome, faSearch, faX } from '@fortawesome/free-solid-svg-icons';
+import { faHeart, faHome, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import cn from 'classnames';
 import React from 'react';
@@ -15,9 +15,13 @@ import { Button } from '@/shared/ui';
 export const MenuModal = ({
   isOpen,
   onClose,
+  isUserData,
+  onLogout,
 }: {
   isOpen: boolean;
   onClose: (f: boolean) => void;
+  isUserData: boolean;
+  onLogout: () => Promise<void>;
 }) => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
@@ -70,14 +74,6 @@ export const MenuModal = ({
         </ul>
       </nav>
       <div className={styles.userMenu}>
-        <FontAwesomeIcon
-          className={cn(styles.button, styles.search)}
-          icon={faSearch}
-          onClick={() => {
-            navigate('/search');
-            onClose(false);
-          }}
-        />
         <FontAwesomeIcon
           className={cn(styles.button, styles.heart)}
           icon={faHeart}
@@ -86,14 +82,24 @@ export const MenuModal = ({
             onClose(false);
           }}
         />
-        <Button
-          onClick={() => {
-            open('login');
-            onClose(false);
-          }}
-        >
-          로그인
-        </Button>
+        {isUserData ? (
+          <Button
+            onClick={() => {
+              void onLogout();
+            }}
+          >
+            로그아웃
+          </Button>
+        ) : (
+          <Button
+            onClick={() => {
+              open('login');
+              onClose(false);
+            }}
+          >
+            로그인
+          </Button>
+        )}
       </div>{' '}
     </div>
   );
diff --git a/src/widgets/SearchAll/SearchAll.module.scss b/src/widgets/SearchAll/SearchAll.module.scss
deleted file mode 100644
index dc25fc6..0000000
--- a/src/widgets/SearchAll/SearchAll.module.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 4rem;
-}
-
-.listWrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 2rem;
-
-  .tab {
-    font-size: 1rem;
-    color: $third-color;
-  }
-}
-
-.list {
-  display: grid;
-  grid-template-rows: auto;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  gap: 1rem;
-
-  @media (width <= 1000px) {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @media (width <= 480px) {
-    grid-template-columns: 1fr;
-  }
-}
-
-.listHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
diff --git a/src/widgets/SearchAll/SearchAll.tsx b/src/widgets/SearchAll/SearchAll.tsx
deleted file mode 100644
index 4788ea2..0000000
--- a/src/widgets/SearchAll/SearchAll.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { useNavigate } from 'react-router-dom';
-
-import styles from './SearchAll.module.scss';
-
-import { ArchiveCard } from '@/features';
-import type { ArchiveCardDTO } from '@/features';
-import type { GatheringCardProps } from '@/features/gathering/ui/GatheringCard/GatheringCard';
-import { Button, GatheringCard } from '@/shared/ui';
-
-export const SearchAll = ({
-  archives,
-  gatherings,
-  setActiveTab,
-}: {
-  archives: ArchiveCardDTO[];
-  gatherings: GatheringCardProps[];
-  setActiveTab: (t: string) => void;
-}) => {
-  const navigate = useNavigate();
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.listWrapper}>
-        <div className={styles.listHeader}>
-          <p className={styles.tab}>아카이브</p>
-          <Button
-            onClick={() => {
-              setActiveTab('아카이브');
-            }}
-          >
-            더보기
-          </Button>
-        </div>
-        <ul className={styles.list}>
-          {archives.map(archive => (
-            <div
-              onClick={() => {
-                navigate(`/archive/${archive.archiveId}`);
-              }}
-            >
-              <ArchiveCard archive={archive} key={archive.archiveId} />
-            </div>
-          ))}
-        </ul>
-      </div>
-      <div className={styles.listWrapper}>
-        <div className={styles.listHeader}>
-          <p className={styles.tab}>게더링</p>
-          <Button
-            onClick={() => {
-              setActiveTab('게더링');
-            }}
-          >
-            더보기
-          </Button>
-        </div>
-        <ul className={styles.list}>
-          {gatherings.map(gathering => (
-            <div
-              onClick={() => {
-                navigate(`/gathering/1`);
-              }}
-            >
-              <GatheringCard title={gathering.title} />
-            </div>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};
diff --git a/src/widgets/SearchTap/SearchTap.module.scss b/src/widgets/SearchTap/SearchTap.module.scss
deleted file mode 100644
index b64da7f..0000000
--- a/src/widgets/SearchTap/SearchTap.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  gap: 2rem;
-  width: 100%;
-}
-
-.tabList {
-  display: flex;
-  gap: 1.5rem;
-  width: 100%;
-  padding: 1.12rem 1.36rem;
-
-  @media (width <= 768px) {
-    justify-content: center;
-  }
-
-  li {
-    position: relative;
-    padding: 0.8rem;
-    font-size: 1rem;
-    font-style: normal;
-    font-weight: 700;
-    line-height: normal;
-    color: $primary-color;
-    text-align: center;
-    cursor: pointer;
-
-    &::after {
-      position: absolute;
-      bottom: -0.25rem;
-      left: 0;
-      display: block;
-      width: 0;
-      height: 0.125rem;
-      content: '';
-      background-color: $primary-color;
-      border-radius: 0.5rem;
-      transition: width 0.3s ease;
-    }
-
-    &.active::after {
-      width: 100%;
-    }
-  }
-}
diff --git a/src/widgets/SearchTap/SearchTap.tsx b/src/widgets/SearchTap/SearchTap.tsx
deleted file mode 100644
index 397bd87..0000000
--- a/src/widgets/SearchTap/SearchTap.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { ArchiveGrid } from '../ArchiveGrid';
-import { GatheringGrid } from '../GatheringGrid';
-import styles from './SearchTap.module.scss';
-import { SearchAll } from '../SearchAll/SearchAll';
-
-import type { ArchiveCardDTO, Color } from '@/features';
-import type { GatheringItem } from '@/features/gathering/model/dto/gathering.dto';
-
-const dummyArchives: ArchiveCardDTO[] = Array.from({ length: 9 }, (_, i) => ({
-  archiveId: i,
-  title: `Sample Archive`,
-  introduction: `Description for sample archive`,
-  type: ['red', 'blue', 'green', 'yellow', 'purple'][Math.floor(Math.random() * 4)] as Color,
-  username: '홍길동',
-  likeCount: Math.floor(Math.random() * 100),
-  isLiked: Math.random() > 0.5,
-  thumbnail: 'https://picsum.photos/300/200',
-  createDate: new Date(),
-}));
-
-const dummyGatherings: GatheringItem[] = Array.from({ length: 9 }, (_, i) => ({
-  gatheringId: i,
-  title: `Sample Gathering ${i + 1}`,
-  userId: i,
-  username: '홍길동',
-  sort: '프로젝트',
-  subject: '개발', // ProjectSubjectType만 허용
-  tags: ['React', 'TypeScript', 'Next.js'],
-  deadLine: '2024-11-28',
-  position: ['개발자', '디자이너'], // 여러 포지션 가능
-  contactType: '온라인',
-  period: '3개월',
-  personnel: '3',
-}));
-
-const renderingSearchTap = (activeTab: string, setActiveTab: (t: string) => void) => {
-  if (activeTab === '전체') {
-    return (
-      <SearchAll
-        archives={dummyArchives.slice(0, 4)}
-        gatherings={dummyGatherings.slice(0, 4)}
-        setActiveTab={setActiveTab}
-      />
-    );
-  } else if (activeTab === '아카이브') {
-    return <ArchiveGrid archives={dummyArchives} />;
-  } else if (activeTab === '게더링') {
-    return <GatheringGrid items={dummyGatherings} />;
-  }
-};
-
-export const SearchTap = ({
-  activeTab,
-  setActiveTab,
-}: {
-  activeTab: string;
-  setActiveTab: (t: string) => void;
-}) => {
-  const tabs = ['전체', '아카이브', '게더링'];
-
-  return (
-    <div className={styles.wrapper}>
-      <ul className={styles.tabList}>
-        {tabs.map(tab => (
-          <li
-            className={activeTab === tab ? styles.active : ''}
-            key={tab}
-            onClick={() => {
-              setActiveTab(tab);
-            }}
-          >
-            {tab}
-          </li>
-        ))}
-      </ul>
-      {renderingSearchTap(activeTab, setActiveTab)}
-    </div>
-  );
-};
diff --git a/src/widgets/SettingUser/SetArchive.module.scss b/src/widgets/SettingUser/SetArchive.module.scss
new file mode 100644
index 0000000..3798163
--- /dev/null
+++ b/src/widgets/SettingUser/SetArchive.module.scss
@@ -0,0 +1,21 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+  gap: 1.25rem;
+  width: 100%;
+}
+
+.item {
+  cursor: grab;
+  user-select: none;
+  transition: transform 0.2s ease;
+}
+
+.item:active {
+  cursor: grabbing;
+}
+
+.item.dragging {
+  opacity: 0.5;
+  transform: scale(1.1);
+}
diff --git a/src/widgets/SettingUser/SetArchive.tsx b/src/widgets/SettingUser/SetArchive.tsx
index 3481c3c..982afa5 100644
--- a/src/widgets/SettingUser/SetArchive.tsx
+++ b/src/widgets/SettingUser/SetArchive.tsx
@@ -1,17 +1,91 @@
-import { ArchiveGrid } from '../ArchiveGrid';
-
-import type { ArchiveCardDTO, Color } from '@/features';
-const dummyArchives: ArchiveCardDTO[] = Array.from({ length: 9 }, (_, i) => ({
-  archiveId: i,
-  title: `Sample Archive`,
-  introduction: `Description for sample archive`,
-  type: ['red', 'blue', 'green', 'yellow', 'purple'][Math.floor(Math.random() * 4)] as Color,
-  username: '홍길동',
-  likeCount: Math.floor(Math.random() * 100),
-  isLiked: Math.random() > 0.5,
-  thumbnail: 'https://picsum.photos/300/200',
-  createDate: new Date(),
-}));
+import { useState, useEffect } from 'react';
+
+import styles from './SetArchive.module.scss';
+
+import {
+  ArchiveCard,
+  useMyArchiveList,
+  useUpdateArchiveOrder,
+  type ArchiveCardDTO,
+} from '@/features';
+import { Button, Loader } from '@/shared/ui';
+
 export const SetArchive = () => {
-  return <ArchiveGrid archives={dummyArchives} />;
+  const { data: myArchives, isPending } = useMyArchiveList();
+  const { mutate: updateArchiveOrder } = useUpdateArchiveOrder();
+
+  const [archives, setArchives] = useState<ArchiveCardDTO[]>([]);
+
+  useEffect(() => {
+    if (myArchives?.data) {
+      setArchives(myArchives.data.archives);
+    }
+  }, [myArchives]);
+
+  const [draggedItemId, setDraggedItemId] = useState<number | null>(null);
+
+  const handleDragStart = (id: number) => {
+    setDraggedItemId(id);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>, id: number) => {
+    e.preventDefault();
+
+    if (draggedItemId === id) return;
+
+    const draggedIndex = archives.findIndex(item => item.archiveId === draggedItemId);
+    const targetIndex = archives.findIndex(item => item.archiveId === id);
+
+    const updatedItems = [...archives];
+    const [draggedItem] = updatedItems.splice(draggedIndex, 1);
+    updatedItems.splice(targetIndex, 0, draggedItem);
+
+    setArchives(updatedItems);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedItemId(null);
+  };
+
+  const handleUpdateOrder = () => {
+    const orderRequest: Record<number, number> = archives.reduce(
+      (acc: Record<number, number>, archive, index) => {
+        acc[archive.archiveId] = index + 1;
+        return acc;
+      },
+      {},
+    );
+
+    updateArchiveOrder({ orderRequest });
+  };
+
+  if (!myArchives?.data || isPending) {
+    return <Loader />;
+  }
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        {archives.map(archive => (
+          <div
+            className={styles.item}
+            draggable
+            key={archive.archiveId}
+            onDragEnd={handleDragEnd}
+            onDragOver={e => {
+              handleDragOver(e, archive.archiveId);
+            }}
+            onDragStart={() => {
+              handleDragStart(archive.archiveId);
+            }}
+          >
+            <ArchiveCard archive={archive} isMine />
+          </div>
+        ))}
+      </div>
+      <Button onClick={handleUpdateOrder}>
+        드래그 앤 드롭으로 순서를 수정하고 이 버튼을 눌러주세요!
+      </Button>
+    </>
+  );
 };
diff --git a/src/widgets/SettingUser/SideTab.module.scss b/src/widgets/SettingUser/SideTab.module.scss
index ba90b23..5430e86 100644
--- a/src/widgets/SettingUser/SideTab.module.scss
+++ b/src/widgets/SettingUser/SideTab.module.scss
@@ -5,6 +5,12 @@
   align-items: center;
   font-weight: 500;
 
+  @media (width <= 768px) {
+    flex-direction: row;
+    gap: 2rem;
+    width: 100%;
+  }
+
   & > li:first-of-type {
     font-size: 1.5rem;
     font-weight: 600;
diff --git a/src/widgets/SettingUser/SideTab.tsx b/src/widgets/SettingUser/SideTab.tsx
index c12d295..15476ed 100644
--- a/src/widgets/SettingUser/SideTab.tsx
+++ b/src/widgets/SettingUser/SideTab.tsx
@@ -1,4 +1,5 @@
 import cn from 'classnames';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { MYPAGE_TAB } from './hooks/useMyTab';
@@ -11,6 +12,21 @@ interface SideTapProps {
 }
 
 export const SideTab = ({ isActivePath }: SideTapProps) => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <>
       {MYPAGE_TAB.map(tab => (
@@ -18,7 +34,7 @@ export const SideTab = ({ isActivePath }: SideTapProps) => {
           <li>
             <div>
               <span>{tab.title}</span>
-              <TripleDot className={styles.divider} />
+              {!isMobile && <TripleDot className={styles.divider} />}
             </div>
           </li>
           {tab.tabList.map(subTab => (
diff --git a/src/widgets/UserContents/UserContents.tsx b/src/widgets/UserContents/UserContents.tsx
index 23bcea8..6362c99 100644
--- a/src/widgets/UserContents/UserContents.tsx
+++ b/src/widgets/UserContents/UserContents.tsx
@@ -4,8 +4,12 @@ import { GatheringGrid } from '../GatheringGrid';
 import { ContentsTab } from './ContentsTab';
 import { useUserTab } from './hook/useUserTab';
 
+
 import type { ArchiveCardDTO, Color } from '@/features';
 import type { GatheringItem } from '@/features/gathering/model/dto/gathering.dto';
+import { useMyArchiveList } from '@/features';
+import { Loader } from '@/shared/ui';
+
 import { PieChart } from '@/shared/ui/Chart/PieChart';
 
 //더미 데이터
@@ -42,30 +46,24 @@ const ARCHIVE_COLOR_DATA = [
   },
 ];
 
-//더미 데이터
-const dummyArchives: ArchiveCardDTO[] = Array.from({ length: 9 }, (_, i) => ({
-  archiveId: i,
-  title: `Sample Archive`,
-  introduction: `Description for sample archive`,
-  type: ['red', 'blue', 'green', 'yellow', 'purple'][Math.floor(Math.random() * 4)] as Color,
-  username: '홍길동',
-  likeCount: Math.floor(Math.random() * 100),
-  isLiked: Math.random() > 0.5,
-  thumbnail: 'https://picsum.photos/300/200',
-  createDate: new Date(),
-}));
+const ArchiveContent = () => {
+  const { data: myArchives, isPending } = useMyArchiveList();
 
-const ArchiveContent = () => (
-  <div className={styles.colorTrendWrapper}>
-    <div className={styles.colorTrendContainer}>
-      <h2>나의 아카이브 현황</h2>
-      <div>
-        <PieChart data={ARCHIVE_COLOR_DATA} />
+  if (!myArchives?.data || isPending) {
+    return <Loader />;
+  }
+  return (
+    <div className={styles.colorTrendWrapper}>
+      <div className={styles.colorTrendContainer}>
+        <h2>나의 아카이브 현황</h2>
+        <div>
+          <PieChart data={ARCHIVE_COLOR_DATA} />
+        </div>
       </div>
+      <ArchiveGrid archives={myArchives.data?.archives} isMine />
     </div>
-    <ArchiveGrid archives={dummyArchives} />
-  </div>
-);
+  );
+};
 
 const dummyGatherings: GatheringItem[] = Array.from({ length: 9 }, (_, i) => ({
   gatheringId: i,
diff --git a/src/widgets/WriteArchive/ColorChips.tsx b/src/widgets/WriteArchive/ColorChips.tsx
index 2437956..b4a4a58 100644
--- a/src/widgets/WriteArchive/ColorChips.tsx
+++ b/src/widgets/WriteArchive/ColorChips.tsx
@@ -9,8 +9,8 @@ export const ColorChips = ({
   selectedColor,
   onSelectColor,
 }: {
-  selectedColor: Color | null;
-  onSelectColor: ((color: Color | null) => void) | ((color: Color) => void);
+  selectedColor: Color;
+  onSelectColor: (color: Color) => void;
 }) => {
   const handleChipClick = (colorName: Color) => {
     onSelectColor(colorName);
diff --git a/src/widgets/WriteArchive/ColorChoiceStep.tsx b/src/widgets/WriteArchive/ColorChoiceStep.tsx
index 2bbcd71..c4f9c1f 100644
--- a/src/widgets/WriteArchive/ColorChoiceStep.tsx
+++ b/src/widgets/WriteArchive/ColorChoiceStep.tsx
@@ -9,8 +9,8 @@ export const ColorChoiceStep = ({
   onSelectColor,
 }: {
   onClick: () => void;
-  selectedColor: Color | null;
-  onSelectColor: ((color: Color | null) => void) | ((color: Color) => void);
+  selectedColor: Color;
+  onSelectColor: (color: Color) => void;
 }) => {
   return (
     <>
diff --git a/src/widgets/WriteArchive/WriteStep.tsx b/src/widgets/WriteArchive/WriteStep.tsx
index a430773..6f10bc8 100644
--- a/src/widgets/WriteArchive/WriteStep.tsx
+++ b/src/widgets/WriteArchive/WriteStep.tsx
@@ -7,7 +7,7 @@ import styles from './WriteStep.module.scss';
 
 import type { Color, PostArchiveApiResponse } from '@/features';
 import { ColorMap, useArchiveStore, useCreateArchive, useUpdateArchive } from '@/features';
-import { Button, MarkdownEditor, ScrollToTop, Switch, Tag } from '@/shared/ui';
+import { Button, customToast, MarkdownEditor, ScrollToTop, Switch, Tag } from '@/shared/ui';
 
 export const WriteStep = ({
   onClick,
@@ -18,6 +18,7 @@ export const WriteStep = ({
   isEdit?: boolean;
 }) => {
   const navigate = useNavigate();
+  const [isComposing, setIsComposing] = useState(false);
 
   const { archiveData, archiveId, resetArchiveData, setArchiveId, updateArchiveData } =
     useArchiveStore();
@@ -25,13 +26,18 @@ export const WriteStep = ({
 
   const handleTagAddition = () => {
     if (tag.trim()) {
-      updateArchiveData('tags', [...archiveData.tags, { content: tag }]);
-      setTag('');
+      const isDuplicate = archiveData.tags.some(existingTag => existingTag.tag === tag.trim());
+      if (!isDuplicate) {
+        updateArchiveData('tags', [...archiveData.tags, { tag: tag.trim() }]);
+        setTag('');
+      } else {
+        customToast({ text: '이미 추가된 태그입니다.', timer: 3000, icon: 'info' });
+      }
     }
   };
 
   const handleTagRemoval = (tagContent: string) => {
-    const updatedTags = archiveData.tags.filter(t => t.content !== tagContent);
+    const updatedTags = archiveData.tags.filter(t => t.tag !== tagContent);
     updateArchiveData('tags', updatedTags);
   };
 
@@ -44,9 +50,7 @@ export const WriteStep = ({
         resetArchiveData();
         navigate(`/archive/${archiveId}`);
         setArchiveId(0);
-      },
-      onError: err => {
-        console.error(err);
+        customToast({ text: '아카이브가 수정되었어요!', timer: 3000, icon: 'success' });
       },
     });
   };
@@ -56,9 +60,7 @@ export const WriteStep = ({
       onSuccess: (data: PostArchiveApiResponse) => {
         resetArchiveData();
         navigate(`/archive/${data.data?.archiveId}`);
-      },
-      onError: err => {
-        console.error(err);
+        customToast({ text: '아카이브가 만들어졌어요!', timer: 3000, icon: 'success' });
       },
     });
   };
@@ -71,9 +73,9 @@ export const WriteStep = ({
           <FontAwesomeIcon icon={faChevronLeft} onClick={onClick} />
           <div
             className={styles.color}
-            style={{ backgroundColor: `${ColorMap[archiveData.type].hex}` }}
+            style={{ backgroundColor: `${ColorMap[archiveData.colorType].hex}` }}
           />
-          <span>{ColorMap[archiveData.type].name}</span>
+          <span>{ColorMap[archiveData.colorType].name}</span>
         </div>
         <div className={styles.settingWrapper}>
           <span>댓글 허용</span>
@@ -112,12 +114,12 @@ export const WriteStep = ({
           />
         </div>
       </div>
-      <MarkdownEditor data={archiveData} onUpdate={updateArchiveData} updateKey='description' />
+      <MarkdownEditor data={archiveData} onUpdate={updateArchiveData} updateKey={'description'} />
       <div className={styles.inputContainer}>
         <label>태그</label>
         <div className={styles.tags}>
           {archiveData.tags.map(tag => (
-            <Tag key={tag.content} onRemove={handleTagRemoval} tag={tag} />
+            <Tag key={tag.tag} onRemove={handleTagRemoval} tag={tag} />
           ))}
         </div>
         <div className={styles.inputBox}>
@@ -125,7 +127,14 @@ export const WriteStep = ({
             onChange={e => {
               setTag(e.target.value);
             }}
+            onCompositionEnd={() => {
+              setIsComposing(false);
+            }}
+            onCompositionStart={() => {
+              setIsComposing(true);
+            }}
             onKeyDown={e => {
+              if (isComposing) return;
               if (e.key === 'Enter') handleTagAddition();
             }}
             placeholder='태그'
diff --git a/src/widgets/index.ts b/src/widgets/index.ts
index 412841b..7913f19 100644
--- a/src/widgets/index.ts
+++ b/src/widgets/index.ts
@@ -9,8 +9,6 @@ export * from './Layout';
 export * from './LikeTab/LikeTab';
 export * from './LoginModal/ui/LoginModal';
 export * from './PortfolioGrid/PortFolioGrid';
-export * from './SearchAll/SearchAll';
-export * from './SearchTap/SearchTap';
 export * from './UserContents/UserContents';
 export * from './WriteArchive';
 export * from './WriteGathering/WriteGatheringDetail';