Feat/#68/archive api

src/app/(layout)/archive/_components/ArchiveCardGrid/index.tsx

@@ -4,72 +4,76 @@ import { useState, useEffect } from 'react';
 import Card from '@/components/ui/Card';
 import { useModalStore } from '@/stores/useModalStore';
 import { TagType } from '@/types';
+import { useTemplatesLikes } from '@/hooks/template/useTemplateLikes';
+import { useRecentlyUsedTemplates } from '@/hooks/template/useRecentlyUsedTemplates';
+import { useFolderDetail } from '@/hooks/folder/useFolderDetail';
+import { Template } from '@/services/template/getTemplates';
 
 interface ArchiveCardGridProps {
   selectedFolderId: string;
   selectedTag?: TagType;
   sortType: 'popular' | 'latest';
 }
 
-// 템플릿 데이터 타입 정의
-interface TemplateData {
-  id: string;
-  templateId: number;
-  title: string;
-  description: string;
-  tags: string[];
-  likes: number;
-  content: string;
-  folderId: string;
-}
-
-// 폴더별 더미 데이터
-const folderData: Record<string, TemplateData[]> = {
-  '1': Array.from({ length: 32 }, (_, index) => ({
-    id: `fav_${index + 1}`,
-    templateId: index + 1,
-    title: `찜한 템플릿 ${index + 1}`,
-    description:
-      '찜한 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
-    tags: ['인사말', '자기소개'],
-    likes: 150 + index,
-    content: `찜한 템플릿 ${index + 1}의 내용입니다.\n\n안녕하세요 잘 부탁드립니다.`,
-    folderId: '1',
-  })),
-  '2': Array.from({ length: 5 }, (_, index) => ({
-    id: `recent_${index + 1}`,
-    templateId: 100 + index + 1,
-    title: `최근 사용한 템플릿 ${index + 1}`,
-    description:
-      '최근에 사용한 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
-    tags: ['감사글', '공지글'],
-    likes: 80 + index,
-    content: `최근 사용한 템플릿 ${index + 1}의 내용입니다.\n\n감사합니다.`,
-    folderId: '2',
-  })),
-  '3': Array.from({ length: 8 }, (_, index) => ({
-    id: `user1_${index + 1}`,
-    templateId: 200 + index + 1,
-    title: `사용자 폴더1 템플릿 ${index + 1}`,
-    description:
-      '사용자가 만든 폴더의 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
-    tags: ['부탁글', '제안글'],
-    likes: 60 + index,
-    content: `사용자 폴더1 템플릿 ${index + 1}의 내용입니다.\n\n잘 부탁드립니다.`,
-    folderId: '3',
-  })),
-  '4': Array.from({ length: 3 }, (_, index) => ({
-    id: `user2_${index + 1}`,
-    templateId: 300 + index + 1,
-    title: `사용자 폴더2 템플릿 ${index + 1}`,
-    description:
-      '사용자가 만든 폴더의 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
-    tags: ['후기작성', '소셜글'],
-    likes: 40 + index,
-    content: `사용자 폴더2 템플릿 ${index + 1}의 내용입니다.\n\n감사합니다.`,
-    folderId: '4',
-  })),
-};
+// 템플릿 데이터 타입 정의 (현재 사용되지 않음 - API 타입으로 대체됨)
+// interface TemplateData {
+//   id: string;
+//   templateId: number;
+//   title: string;
+//   description: string;
+//   tags: string[];
+//   likes: number;
+//   content: string;
+//   folderId: string;
+// }
+
+// 폴더별 더미 데이터 (현재 사용되지 않음 - API 연동으로 대체됨)
+// const folderData: Record<string, TemplateData[]> = {
+//   '1': Array.from({ length: 32 }, (_, index) => ({
+//     id: `fav_${index + 1}`,
+//     templateId: index + 1,
+//     title: `찜한 템플릿 ${index + 1}`,
+//     description:
+//       '찜한 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
+//     tags: ['인사말', '자기소개'],
+//     likes: 150 + index,
+//     content: `찜한 템플릿 ${index + 1}의 내용입니다.\n\n안녕하세요 잘 부탁드립니다.`,
+//     folderId: '1',
+//   })),
+//   '2': Array.from({ length: 5 }, (_, index) => ({
+//     id: `recent_${index + 1}`,
+//     templateId: 100 + index + 1,
+//     title: `최근 사용한 템플릿 ${index + 1}`,
+//     description:
+//       '최근에 사용한 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
+//     tags: ['감사글', '공지글'],
+//     likes: 80 + index,
+//     content: `최근 사용한 템플릿 ${index + 1}의 내용입니다.\n\n감사합니다.`,
+//     folderId: '2',
+//   })),
+//   '3': Array.from({ length: 8 }, (_, index) => ({
+//     id: `user1_${index + 1}`,
+//     templateId: 200 + index + 1,
+//     title: `사용자 폴더1 템플릿 ${index + 1}`,
+//     description:
+//       '사용자가 만든 폴더의 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
+//     tags: ['부탁글', '제안글'],
+//     likes: 60 + index,
+//     content: `사용자 폴더1 템플릿 ${index + 1}의 내용입니다.\n\n잘 부탁드립니다.`,
+//     folderId: '3',
+//   })),
+//   '4': Array.from({ length: 3 }, (_, index) => ({
+//     id: `user2_${index + 1}`,
+//     templateId: 300 + index + 1,
+//     title: `사용자 폴더2 템플릿 ${index + 1}`,
+//     description:
+//       '사용자가 만든 폴더의 템플릿입니다. 글로우업 글쓰기 서비스는 여러 상황에서 사용자의 글쓰기 경험을 돕고자 합니다.',
+//     tags: ['후기작성', '소셜글'],
+//     likes: 40 + index,
+//     content: `사용자 폴더2 템플릿 ${index + 1}의 내용입니다.\n\n감사합니다.`,
+//     folderId: '4',
+//   })),
+// };
 
 export default function ArchiveCardGrid({
   selectedFolderId,
@@ -80,6 +84,46 @@ export default function ArchiveCardGrid({
   const [isLoading, setIsLoading] = useState(false);
   const { openModal, currentModal } = useModalStore();
 
+  // 폴더별 데이터 API 연동
+  const isLikes = selectedFolderId === '1';
+  const isRecent = selectedFolderId === '2';
+  const folderIdNum = Number(selectedFolderId);
+
+  const { data: likesData } = useTemplatesLikes();
+  const { data: recentData } = useRecentlyUsedTemplates();
+  const { data: folderDetailData } = useFolderDetail(
+    !isLikes && !isRecent && !isNaN(folderIdNum) ? folderIdNum : 0,
+  );
+
+  // 템플릿 데이터 추출
+  let templates: Template[] = [];
+  if (isLikes) {
+    templates = likesData?.templates ?? [];
+  } else if (isRecent) {
+    templates = recentData?.templates ?? [];
+  } else if (folderDetailData) {
+    templates = folderDetailData.templates ?? [];
+  }
+
+  // 태그 필터링
+  let filteredTemplates: Template[] = templates;
+  if (selectedTag) {
+    filteredTemplates = templates.filter((card) =>
+      card.tags.some((tag: string) => tag === selectedTag),
+    );
+  }
+
+  // 정렬
+  if (sortType === 'popular') {
+    filteredTemplates = [...filteredTemplates].sort((a, b) => b.likeCount - a.likeCount);
+  } else {
+    filteredTemplates = [...filteredTemplates].sort((a, b) => b.templateId - a.templateId);
+  }
+
+  // 페이징
+  const displayedCards = filteredTemplates.slice(0, visibleCards);
+  const hasMoreCards = visibleCards < filteredTemplates.length;
+
   // 컴포넌트 마운트 시와 모달이 닫힐 때만 카드 클릭 상태 초기화
   useEffect(() => {
     // 모달이 닫힐 때만 카드 클릭 상태를 초기화
@@ -93,26 +137,6 @@ export default function ArchiveCardGrid({
     setVisibleCards(15);
   }, [selectedFolderId]);
 
-  // 현재 폴더의 데이터 가져오기
-  const getCurrentFolderData = () => {
-    const data = folderData[selectedFolderId] || [];
-
-    // 태그 필터링
-    let filteredData = data;
-    if (selectedTag) {
-      filteredData = data.filter((card) => card.tags.some((tag: string) => tag === selectedTag));
-    }
-
-    // 정렬
-    if (sortType === 'popular') {
-      filteredData.sort((a, b) => b.likes - a.likes);
-    } else {
-      filteredData.sort((a, b) => b.templateId - a.templateId); // 최신순 (ID 기준)
-    }
-
-    return filteredData;
-  };
-
   const handleLoadMore = () => {
     setIsLoading(true);
     // 더 불러오기 로직 (추후 API 연결)
@@ -123,7 +147,7 @@ export default function ArchiveCardGrid({
   };
 
   // 모달 열기 핸들러 - 카드 클릭 시 모달 연결을 위한 상태 처리
-  const handleCardClick = (templateId: number, cardData: TemplateData) => {
+  const handleCardClick = (templateId: number, cardData: Template) => {
     console.log('카드 클릭:', {
       templateId,
       folderId: selectedFolderId,
@@ -138,22 +162,18 @@ export default function ArchiveCardGrid({
     });
   };
 
-  const currentData = getCurrentFolderData();
-  const displayedCards = currentData.slice(0, visibleCards);
-  const hasMoreCards = visibleCards < currentData.length;
-
   return (
     <div>
       {/* 카드 그리드 - 3열로 배치 */}
       <div className="grid grid-cols-3 gap-x-[13.33px] gap-y-[12px]">
         {displayedCards.map((card) => (
           <Card
-            key={card.id}
+            key={card.templateId}
             variant="large"
             title={card.title}
-            description={card.description}
+            description={card.content}
             tags={card.tags}
-            likes={card.likes}
+            likes={card.likeCount}
             onClick={() => handleCardClick(card.templateId, card)}
             className="cursor-pointer transition-all duration-200 hover:scale-[1.02] hover:shadow-lg"
           />

src/app/(layout)/archive/_components/ArchiveSidebar/index.tsx

@@ -5,6 +5,9 @@ import { useRouter } from 'next/navigation';
 import ArchiveFolderStatus from '../ArchiveFolderStatus';
 import ArchiveFolderInput from '../ArchiveFolderInput';
 import ArchiveModalWarning from '../ArchiveModalWarning';
+import { useFolders } from '@/hooks/folder/useFolders';
+import { useCreateFolder } from '@/hooks/folder/useCreateFolder';
+import { useDeleteFolder } from '@/hooks/folder/useDeleteFolder';
 
 interface ArchiveSidebarProps {
   selectedFolderId: string;
@@ -15,19 +18,27 @@ export default function ArchiveSidebar({ selectedFolderId, onFolderSelect }: Arc
   const router = useRouter();
   const [isCreatingFolder, setIsCreatingFolder] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<string | null>(null);
-
-  // 테스트용 더미 데이터
-  const [folders, setFolders] = useState([
-    { id: '1', name: '찜한 템플릿', templateCount: 32 },
-    { id: '2', name: '최근 사용한 템플릿', templateCount: 5 },
-    { id: '3', name: '사용자 폴더1', templateCount: 8 },
-    { id: '4', name: '사용자 폴더2', templateCount: 3 },
-  ]);
-
-  const handleFolderClick = (folderId: string) => {
-    onFolderSelect(folderId);
-    console.log('폴더 선택:', folderId);
+  const [folderToDelete, setFolderToDelete] = useState<number | null>(null);
+
+  // 폴더 목록 API 연동
+  const { data: foldersData } = useFolders();
+  const createFolderMutation = useCreateFolder();
+  const deleteFolderMutation = useDeleteFolder();
+
+  // 찜한 템플릿, 최근 사용한 템플릿은 고정
+  const fixedFolders = [
+    { id: 1, name: '찜한 템플릿' },
+    { id: 2, name: '최근 사용한 템플릿' },
+  ];
+
+  // 폴더 목록 합치기
+  const folders = [
+    ...fixedFolders,
+    ...(foldersData?.folders?.map((f) => ({ id: f.folderId, name: f.name })) || []),
+  ];
+
+  const handleFolderClick = (folderId: number) => {
+    onFolderSelect(folderId.toString());
   };
 
   const handleFolderDoubleClick = (folderId: string) => {
@@ -39,39 +50,37 @@ export default function ArchiveSidebar({ selectedFolderId, onFolderSelect }: Arc
   };
 
   const handleFolderSave = (folderName: string) => {
-    console.log('폴더 저장:', folderName);
-    // 새 폴더를 목록에 추가
-    const newFolder = {
-      id: Date.now().toString(),
-      name: folderName,
-      templateCount: 0,
-    };
-    setFolders((prev) => [...prev, newFolder]);
-    setIsCreatingFolder(false);
+    createFolderMutation.mutate(
+      { name: folderName },
+      {
+        onSuccess: () => setIsCreatingFolder(false),
+      },
+    );
   };
 
   const handleFolderCancel = () => {
-    console.log('폴더 생성 취소');
     setIsCreatingFolder(false);
   };
 
   const handleExploreClick = () => {
     router.push('/explore');
   };
 
-  const handleDeleteClick = (folderId: string) => {
+  const handleDeleteClick = (folderId: number) => {
     setFolderToDelete(folderId);
     setDeleteModalOpen(true);
   };
 
   const handleDeleteConfirm = () => {
     if (folderToDelete) {
-      setFolders((prev) => prev.filter((folder) => folder.id !== folderToDelete));
-      console.log('폴더 삭제:', folderToDelete);
-      // 삭제된 폴더가 현재 선택된 폴더라면 기본 폴더로 변경
-      if (selectedFolderId === folderToDelete) {
-        onFolderSelect('1'); // 찜한 템플릿으로 변경
-      }
+      deleteFolderMutation.mutate(folderToDelete, {
+        onSuccess: () => {
+          // 삭제된 폴더가 현재 선택된 폴더라면 기본 폴더로 변경
+          if (selectedFolderId === folderToDelete.toString()) {
+            onFolderSelect('1');
+          }
+        },
+      });
     }
     setDeleteModalOpen(false);
     setFolderToDelete(null);
@@ -88,17 +97,17 @@ export default function ArchiveSidebar({ selectedFolderId, onFolderSelect }: Arc
       style={{ width: '312px', height: '640px' }}
     >
       <div className="flex-1">
-        {/* 기존 폴더들 */}
+        {/* 폴더 목록 */}
         {folders.map((folder) => (
           <ArchiveFolderStatus
             key={folder.id}
-            folderId={folder.id}
+            folderId={folder.id.toString()}
             folderName={folder.name}
-            isSelected={selectedFolderId === folder.id}
-            isDeletable={folder.id !== '1' && folder.id !== '2'} // 찜한 템플릿, 최근 사용한 템플릿 제외
-            onClick={handleFolderClick}
-            onDoubleClick={handleFolderDoubleClick}
-            onDelete={handleDeleteClick}
+            isSelected={selectedFolderId === folder.id.toString()}
+            isDeletable={folder.id !== 1 && folder.id !== 2}
+            onClick={() => handleFolderClick(folder.id)}
+            onDoubleClick={() => handleFolderDoubleClick(folder.id.toString())}
+            onDelete={() => handleDeleteClick(folder.id)}
           />
         ))}
 
@@ -117,6 +126,7 @@ export default function ArchiveSidebar({ selectedFolderId, onFolderSelect }: Arc
           <button
             className="button-md text-layout-grey4 hover:text-layout-grey6 hover:bg-layout-grey3 w-full rounded-lg px-4 py-3 text-left transition-all duration-200"
             onClick={handleCreateFolderClick}
+            disabled={createFolderMutation.isPending}
           >
             + 폴더 만들기
           </button>