- {folder && folder.length >= 1 ? (
- folder.map(
- (folderData, index) =>
- index !== 0 && (
-
+ {isExistFolder ? (
+ folder.map(({ id, image_source, created_at, description, url }) => (
+
+
+
+ ))
) : (
저장된 링크가 없습니다
)}
diff --git a/src/components/Folder/FolderCategory.js b/src/components/Folder/FolderCategory.js
index 3580f79312..0368dce8b3 100644
--- a/src/components/Folder/FolderCategory.js
+++ b/src/components/Folder/FolderCategory.js
@@ -10,29 +10,27 @@ import {
function FolderCategory({ category, currentCategory, handleCategoryButton }) {
return (
- <>
-
-
- {category &&
- category.map((categoryData) => (
-
- {categoryData.name}
-
- ))}
-
+
+
+ {category &&
+ category.map(({ id, name }) => (
+
+ {name}
+
+ ))}
+
-
- 폴더 추가
-
-
-
-
+
+ 폴더 추가
+
+
+
);
}
diff --git a/src/components/Folder/FolderContent.js b/src/components/Folder/FolderContent.js
index 8e55378216..34f33da5cf 100644
--- a/src/components/Folder/FolderContent.js
+++ b/src/components/Folder/FolderContent.js
@@ -7,14 +7,17 @@ import { FolderTitle } from './FolderTitle';
import { FolderCards } from './FolderCards';
function FolderContent() {
- const folderCategory = useFetchFolderCategoryData();
+ const [currentCategory, setCurrentCategory] = useState('전체');
- const folderCards = useFetchFolderCardsData(0);
+ const [folderId, setFolderId] = useState(0);
- const [currentCategory, setCurrentCategory] = useState('전체');
+ const folderCategory = useFetchFolderCategoryData();
+
+ const folderCards = useFetchFolderCardsData(folderId);
const handleCategoryButton = (e) => {
setCurrentCategory(e.target.innerText);
+ setFolderId(e.target.id);
};
return (
@@ -23,7 +26,7 @@ function FolderContent() {
{folderCategory ? (
<>
diff --git a/src/hooks/useFetchFolderCardsData.js b/src/hooks/useFetchFolderCardsData.js
index 5614e29c0c..5f364de725 100644
--- a/src/hooks/useFetchFolderCardsData.js
+++ b/src/hooks/useFetchFolderCardsData.js
@@ -1,31 +1,44 @@
+import { useState, useEffect } from 'react';
+
const BASE_URL = 'https://bootcamp-api.codeit.kr/api';
-const fetchFolderCardsData = async (folderId) => {
- if (folderId === '0') {
- try {
- const response = await fetch(`${BASE_URL}/users/4/links`);
- if (!response.ok) {
- throw new Error('response 전달 실패');
- }
- return response.data.json();
- } catch (error) {
- console.error('에러 발생:', error);
- return null;
- }
- } else {
- try {
- const response = await fetch(
- `${BASE_URL}/users/4/links?folderId=${folderId}`
- );
- if (!response.ok) {
- throw new Error('response 전달 실패');
+function useFetchFolderCardsData(folderId) {
+ const [cardsData, setCardsData] = useState([]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ if (folderId === 0) {
+ try {
+ const response = await fetch(`${BASE_URL}/users/11/links`);
+ if (!response.ok) {
+ throw new Error('response 전달 실패');
+ }
+ const data = await response.json();
+ setCardsData(data.data);
+ } catch (error) {
+ console.error('Fetch FolderCardsData에서 에러 발생:', error);
+ return null;
+ }
+ } else {
+ try {
+ const response = await fetch(
+ `${BASE_URL}/users/11/links?folderId=${folderId}`
+ );
+ if (!response.ok) {
+ throw new Error('response 전달 실패');
+ }
+ const data = await response.json();
+ setCardsData(data.data);
+ } catch (error) {
+ console.error('에러 발생:', error);
+ return null;
+ }
}
- return response.data.json();
- } catch (error) {
- console.error('에러 발생:', error);
- return null;
- }
- }
-};
+ };
+ fetchData();
+ }, [folderId]);
+
+ return cardsData;
+}
-export default fetchFolderCardsData;
+export default useFetchFolderCardsData;
diff --git a/src/hooks/useFetchFolderCategoryData.js b/src/hooks/useFetchFolderCategoryData.js
index ac5829c1d4..4354d36a9b 100644
--- a/src/hooks/useFetchFolderCategoryData.js
+++ b/src/hooks/useFetchFolderCategoryData.js
@@ -7,7 +7,7 @@ function useFetchFolderCategoryData() {
const fetchData = async () => {
try {
const response = await fetch(
- 'https://bootcamp-api.codeit.kr/api/users/4/folders'
+ 'https://bootcamp-api.codeit.kr/api/users/11/folders'
);
if (!response.ok) {
throw new Error('response 전달 실패');
diff --git a/src/images/non_image.svg b/src/images/non_image.svg
deleted file mode 100644
index 1dc759407e..0000000000
--- a/src/images/non_image.svg
+++ /dev/null
@@ -1,19 +0,0 @@
-
diff --git a/src/pages/Folder.js b/src/pages/FolderPage.js
similarity index 63%
rename from src/pages/Folder.js
rename to src/pages/FolderPage.js
index 3ce3adb317..c6da19bd5f 100644
--- a/src/pages/Folder.js
+++ b/src/pages/FolderPage.js
@@ -1,17 +1,17 @@
-import { Helmet } from 'react-helmet';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
import FolderHeader from '../components/Folder/FolderHeader';
import FolderContent from '../components/Folder/FolderContent';
-function Folder() {
+function FolderPage() {
return (
- <>
+
Linkbrary - Folder
-
+
);
}
-export default Folder;
+export default FolderPage;
diff --git a/src/pages/Shared.js b/src/pages/SharedPage.js
similarity index 61%
rename from src/pages/Shared.js
rename to src/pages/SharedPage.js
index a57d25d740..32a6c5babe 100644
--- a/src/pages/Shared.js
+++ b/src/pages/SharedPage.js
@@ -1,17 +1,17 @@
-import { Helmet } from 'react-helmet';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
import SharedHeader from '../components/Shared/SharedHeader';
import CardList from '../components/CardList';
-function Shared() {
+function SharedPage() {
return (
- <>
+
Linkbrary - Shared
-
+
);
}
-export default Shared;
+export default SharedPage;