[정지성]Week15

components/FolderCards/index.tsx

@@ -7,22 +7,14 @@ import moreoptionicon from '@/public/moreoptionicon.svg';
 import { useState } from 'react';
 import ModalFolder from '@/components/modal/ModalFolder';
 import ModalDelete from '@/components/modal/ModalDelete';
+import { CardData } from '@/types/folder-type';
 import Image from 'next/image';
 import Link from 'next/link';
 
-interface Link {
-  id: string;
-  url: string;
-  image_source?: string;
-  thumbnail?: string;
-  title: string;
-  created_at: Date;
-  description: string;
-}
-
-function FolderCards({ url }: { url: string }) {
-  const card = useFetch<{ data: Link[] }>(url);
-  const cardData = card?.data;
+// function FolderCards({ url }: { url: string }) {
+function FolderCards({ cards: cardData }: { cards: CardData[] }) {
+  // const card = useFetch<{ data: Link[] }>(url);
+  // const cardData = card?.data;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
   const [popoverStates, setPopoverStates] = useState<{
@@ -59,7 +51,7 @@ function FolderCards({ url }: { url: string }) {
 
   return (
     <div className={styles.card_grid_container}>
-      {!cardData ? (
+      {!cardData.length ? (
         <div className={styles.noLinkText}>
           <p>저장된 링크가 없습니다</p>
         </div>

components/Foldermenu/index.tsx

@@ -4,7 +4,7 @@ import addfolderIcon from '@/public/addfolder.svg';
 import deleteicon from '@/public/deleteicon.svg';
 import changenameicon from '@/public/changenameicon.svg';
 import shareicon from '@/public/shareicon.svg';
-import { useState } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 import FolderCards from '@/components/FolderCards';
 import ModalFolder from '@/components/modal/ModalFolder';
 import ModalShare from '@/components/modal/ModalShare';
@@ -15,8 +15,9 @@ import S from './foldermenu.module.css';
 import {
   BASE_URL_FOLDER,
   BASE_URL_ALL_FOLDER,
-  BASE_FOLDER_ID,
 } from '@/constant/folder-constant';
+import { CardData } from '@/types/folder-type';
+import { useRouter } from 'next/router';
 
 interface Card {
   id: string;
@@ -25,22 +26,33 @@ interface Card {
   description: string;
 }
 interface Folder {
-  id: string;
+  id: string | number;
   name: string;
 }
 
 interface FolderResponse {
   data: Folder[];
 }
 
-function Foldermenu() {
-  const folder = useFetch<FolderResponse>(BASE_URL_FOLDER);
-  const folderNames = folder?.data;
-  const [activeButton, setActiveButton] = useState('전체');
-  const [url, setUrl] = useState(BASE_URL_ALL_FOLDER);
-  const [currentFolderId, setCurrentFolderId] = useState<string | null>(
-    BASE_FOLDER_ID
-  );
+function Foldermenu({ selectedFolderId }: { selectedFolderId?: string }) {
+  const router = useRouter();
+
+  const foldersResponse = useFetch<FolderResponse>(BASE_URL_FOLDER);
+  const folders = useMemo(() => foldersResponse?.data ?? [], [foldersResponse]);
+  const selectedFolder = useMemo(() => {
+    if (!folders || !selectedFolderId) return undefined;
+    return folders.find(
+      (folder) => folder.id.toString() === selectedFolderId.toString()
+    );
+  }, [folders, selectedFolderId]);
+
+  const requestCardUrl = selectedFolderId
+    ? `${BASE_URL_ALL_FOLDER}?folderId=${selectedFolderId}`
+    : BASE_URL_ALL_FOLDER;
+
+  const cardsResponse = useFetch<{ data: CardData[] }>(requestCardUrl);
+  const cards = cardsResponse?.data ?? [];
+
   const [filteredLinks, setFilteredLinks] = useState<Card[]>([]);
   const [modalState, setModalState] = useState({
     addFolder: false,
@@ -62,21 +74,20 @@ function Foldermenu() {
       [modalType]: false,
     }));
   };
+
   const handleSearch = (filteredLinks: Card[]) => {
     setFilteredLinks(filteredLinks);
   };
 
-  const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const folderId = e.currentTarget.id;
-    const folderName = e.currentTarget.textContent || '';
-    setActiveButton(folderName);
-    setCurrentFolderId(folderId);
-
-    if (folderId !== BASE_FOLDER_ID) {
-      setUrl(`${BASE_URL_ALL_FOLDER}?folderId=${folderId}`);
-    } else {
-      setUrl(BASE_URL_ALL_FOLDER);
+  const handleOnClick = (selectedFolderId: string) => {
+    if (selectedFolderId) {
+      router.push(`/folder/${selectedFolderId}`, undefined, {
+        shallow: true,
+      });
+      return;
     }
+
+    router.push('/', undefined, { shallow: true });
   };
 
   return (
@@ -86,26 +97,23 @@ function Foldermenu() {
         <div className={S.folderListContainer}>
           <button
             className={`${styles.folderButtons} ${styles.allFolders} ${
-              currentFolderId == BASE_FOLDER_ID ? styles.active : ''
+              selectedFolderId ? '' : styles.active
             }`}
-            onClick={handleOnClick}
-            id={BASE_FOLDER_ID}
+            onClick={() => handleOnClick('/')}
           >
             전체
           </button>
-          {folderNames &&
-            folderNames.map((foldername) => (
-              <button
-                className={`${styles.folderButtons} ${
-                  currentFolderId == foldername.id ? styles.active : ''
-                }`}
-                key={foldername.id}
-                onClick={handleOnClick}
-                id={foldername.id}
-              >
-                {foldername.name}
-              </button>
-            ))}
+          {folders.map((folder) => (
+            <button
+              className={`${styles.folderButtons} ${
+                selectedFolderId == folder.id.toString() ? styles.active : ''
+              }`}
+              key={folder.id}
+              onClick={() => handleOnClick(folder.id.toString())}
+            >
+              {folder.name}
+            </button>
+          ))}
         </div>
         <button onClick={() => handleModalOpen('addFolder')}>
           <Image
@@ -116,8 +124,10 @@ function Foldermenu() {
         </button>
       </div>
       <div className={S.folderMenuContainer}>
-        <p className={styles.folderName}>{activeButton}</p>
-        {activeButton === '전체' && (
+        <p className={styles.folderName}>
+          {selectedFolder ? selectedFolder.name : '전체'}
+        </p>
+        {!selectedFolderId && (
           <div className={S.imageContainer}>
             <button onClick={() => handleModalOpen('shareFolder')}>
               <Image src={shareicon} alt="폴더 공유 아이콘" />
@@ -131,7 +141,7 @@ function Foldermenu() {
           </div>
         )}
       </div>
-      <FolderCards url={url} />
+      <FolderCards cards={cards} />
 
       {modalState.addFolder && (
         <ModalFolder
@@ -145,16 +155,16 @@ function Foldermenu() {
       {modalState.shareFolder && (
         <ModalShare
           title={'폴더 공유'}
-          targetName={activeButton}
+          targetName={selectedFolder ? selectedFolder.name : '전체'}
           onClose={() => handleModalClose('shareFolder')}
           isModalOpen={modalState.shareFolder}
-          currentFolderId={currentFolderId}
+          currentFolderId={modalState.shareFolder}
         />
       )}
       {modalState.renameFolder && (
         <ModalFolder
           title={'폴더 이름 변경'}
-          folderName={activeButton}
+          folderName={selectedFolder ? selectedFolder.name : '전체'}
           onClose={() => handleModalClose('renameFolder')}
           buttonName={'변경하기'}
           isModalOpen={modalState.renameFolder}
@@ -163,7 +173,7 @@ function Foldermenu() {
       {modalState.deleteFolder && (
         <ModalDelete
           title={'폴더 삭제'}
-          DeleteName={activeButton}
+          DeleteName={selectedFolder ? selectedFolder.name : '전체'}
           onClose={() => handleModalClose('deleteFolder')}
           isModalOpen={modalState.deleteFolder}
         />

lib/axios.js

@@ -0,0 +1,7 @@
+import axios from 'axios';
+
+const instance = axios.create({
+  baseURL: 'https://bootcamp-api.codeit.kr/api',
+});
+
+export default instance;

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "axios": "^1.7.2",
     "babel-plugin-styled-components": "^2.1.4",
     "moment": "^2.30.1",
     "next": "13.5.6",