[Feature/BAR-155] 참고하는 레이아웃 수정 및 폴더 저장 삭제 기능 추가

package.json

@@ -20,6 +20,7 @@
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.17.9",
     "@types/js-cookie": "^3.0.6",
+    "@types/react-responsive-masonry": "^2.1.3",
     "@vanilla-extract/css": "^1.14.0",
     "@vanilla-extract/dynamic": "^2.1.0",
     "@vanilla-extract/recipes": "^0.5.1",
@@ -37,6 +38,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-notion-x": "^6.16.0",
+    "react-responsive-masonry": "^2.1.7",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

src/components/Card/style.css.ts

@@ -66,6 +66,7 @@ export const header = style([
 export const body = style([
   sprinkles({ typography: '15/Body/Regular' }),
   {
+    whiteSpace: 'pre-wrap',
     wordBreak: 'keep-all',
   },
 ]);

src/domain/참고하는/api/index.ts

@@ -15,3 +15,6 @@ export const postSaveTemplate = ({
   memoFolderId,
 }: PostSaveTemplateParams) =>
   http.post(`/templates/${templateId}/archive`, { memoFolderId });
+
+export const deleteTemplate = (templateId: number) =>
+  http.delete(`/templates/${templateId}/archive`);

src/domain/참고하는/components/FolderDialog.css.ts

@@ -42,3 +42,10 @@ export const hover = style({
     fill: COLORS['Grey/600'],
   },
 });
+
+export const hoverBlue = style({
+  transition: 'fill 100ms ease-in-out',
+  ':hover': {
+    fill: COLORS['Blue/Default'],
+  },
+});

src/domain/참고하는/components/FolderDialog.tsx

@@ -1,23 +1,68 @@
+import { useQueryClient } from '@tanstack/react-query';
+
 import { type Folder } from '@api/memoFolder/types';
+import Button from '@components/Button';
 import Dropdown from '@components/Dropdown';
 import Icon from '@components/Icon';
 import * as styles from '@domain/참고하는/components/FolderDialog.css';
 import { useModalStore } from '@stores/modal';
+import { useToastStore } from '@stores/toast';
 import { COLORS } from '@styles/tokens';
 
+import useDeleteTemplate from '../queries/useDeleteTemplate';
 import useSaveTemplate from '../queries/useSaveTemplate';
 
 interface FolderDialogProps {
   templateId: number;
+  isArchived: boolean;
   memoFolders: Folder[];
 }
 
-const FolderDialog = ({ templateId, memoFolders }: FolderDialogProps) => {
+const FolderDialog = ({
+  templateId,
+  isArchived,
+  memoFolders,
+}: FolderDialogProps) => {
   const { openModal } = useModalStore();
-  const { mutateAsync } = useSaveTemplate();
+  const { mutateAsync: saveTemplate } = useSaveTemplate();
+  const { mutateAsync: deleteTemplate } = useDeleteTemplate();
+
+  const queryClient = useQueryClient();
+  const { showToast } = useToastStore();
 
   const handleFolderClick = (memoFolderId: number) => async () =>
-    await mutateAsync({ templateId, memoFolderId });
+    await saveTemplate(
+      { templateId, memoFolderId },
+      {
+        onSuccess: async () => {
+          await queryClient.invalidateQueries({
+            queryKey: ['templates'],
+          });
+          showToast({ message: '글이 저장됐어요.' });
+        },
+      },
+    );
+
+  const handleDeleteTemplateClick = async () => {
+    await deleteTemplate(templateId, {
+      onSuccess: async () => {
+        await queryClient.invalidateQueries({
+          queryKey: ['templates'],
+        });
+      },
+    });
+  };
+
+  if (isArchived)
+    return (
+      <Button onClick={handleDeleteTemplateClick}>
+        <Icon
+          icon="bookmarkRefer"
+          className={styles.hoverBlue}
+          color={COLORS['Grey/300']}
+        />
+      </Button>
+    );
 
   return (
     <Dropdown size="medium" placement="bottom-center">

src/domain/참고하는/components/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';
 
 import FilterButtons from '@domain/참고하는/components/FilterButtons';
 import FilterHeader from '@domain/참고하는/components/FilterHeader';
@@ -28,6 +29,8 @@ const 참고하는TabContent = () => {
   const handleFilterButtonSelect = (type: FilterButton) => () =>
     setSelectedFilterButton(type);
 
+  if (!data) return null;
+
   return (
     <div className={styles.referPageTabWrapper}>
       <FilterHeader
@@ -38,15 +41,17 @@ const 참고하는TabContent = () => {
         selectedFilterButton={selectedFilterButton}
         handleFilterButtonSelect={handleFilterButtonSelect}
       />
-      <ul className={styles.referCardsWrapper}>
-        {data?.content.map((data) => (
-          <참고하는TemplateCard
-            key={data.templateId}
-            data={data}
-            memoFolders={memoFoldersData}
-          />
-        ))}
-      </ul>
+      <ResponsiveMasonry columnsCountBreakPoints={{ 768: 2, 1080: 3 }}>
+        <Masonry className={styles.referCardsWrapper} gutter="16px">
+          {data.content.map((data) => (
+            <참고하는TemplateCard
+              key={data.templateId}
+              data={data}
+              memoFolders={memoFoldersData}
+            />
+          ))}
+        </Masonry>
+      </ResponsiveMasonry>
     </div>
   );
 };

src/domain/참고하는/components/참고하는TemplateCard.tsx

@@ -6,15 +6,15 @@ import Icon from '@components/Icon';
 import { CATEGORY_COLOR } from '@constants/config';
 import * as styles from '@domain/참고하는/components/참고하는TemplateCard.css';
 import { CATEGORY } from '@domain/참고하는/models';
-import { type Refer } from '@domain/참고하는/types';
+import { type ReferContent } from '@domain/참고하는/types';
 import { getNumToK } from '@domain/참고하는/utils';
 import { useToastStore } from '@stores/toast';
 import { COLORS } from '@styles/tokens';
 
 import FolderDialog from './FolderDialog';
 
 interface 참고하는TemplateCardProps {
-  data: Refer;
+  data: ReferContent;
   memoFolders: Folder[];
 }
 
@@ -29,6 +29,7 @@ const 참고하는TemplateCard = ({
     content,
     copiedCount,
     savedCount,
+    isArchived,
   } = data;
 
   const { showToast } = useToastStore();
@@ -52,7 +53,11 @@ const 참고하는TemplateCard = ({
             color={COLORS['Grey/300']}
           />
         </Button>
-        <FolderDialog templateId={templateId} memoFolders={memoFolders} />
+        <FolderDialog
+          templateId={templateId}
+          isArchived={isArchived}
+          memoFolders={memoFolders}
+        />
       </Card.Menu>
       <Card.Header>
         <Badge color={CATEGORY_COLOR[categoryNameKr]}>{categoryNameKr}</Badge>

src/domain/참고하는/queries/useDeleteTemplate.ts

@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { deleteTemplate } from '../api';
+
+const useDeleteTemplate = () =>
+  useMutation({
+    mutationFn: deleteTemplate,
+  });
+
+export default useDeleteTemplate;

src/domain/참고하는/types/index.ts

@@ -2,26 +2,18 @@ import { type CATEGORY, type FILTER_BUTTONS } from '@domain/참고하는/models'
 
 export type Category = keyof typeof CATEGORY;
 
-export interface Refer {
+export interface ReferContent {
   templateId: number;
   category: Category;
   subCategory: string;
   content: string;
   savedCount: number;
   copiedCount: number;
+  isArchived: boolean;
 }
 
 export type FilterButton = keyof typeof FILTER_BUTTONS;
 
-export interface Content {
-  templateId: number;
-  category: Category;
-  subCategory: string;
-  content: string;
-  savedCount: number;
-  copiedCount: number;
-}
-
 export interface Templates {
-  content: Content[];
+  content: ReferContent[];
 }

src/styles/sprinkles.css.ts

@@ -27,7 +27,7 @@ const width = {
 const responsiveProperties = defineProperties({
   conditions: {
     small: { '@media': 'screen and (min-width: 768px)' },
-    middle: { '@media': 'screen and (min-width: 1024px)' },
+    middle: { '@media': 'screen and (min-width: 1080px)' },
     large: { '@media': 'screen and (min-width: 1440px)' },
   },
   defaultCondition: 'large',