[우제윤 ] Week8

package.json

@@ -9,6 +9,7 @@
     "date-fns": "^3.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.js

@@ -1,20 +1,18 @@
 import "./App.css";
-import NavigationBar from "./NavigationBar/NavigationBar.js";
 import "./global.css";
 import "./colors.css";
-import Profile from "./Profile/Profile.js";
-import { CardList } from "./CardList/CardList.js";
-import Footer from "./Footer/Footer.js";
-import SearchBar from "./SearchBar/SearchBar.js";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Shared from "./page/Shared.js";
+import Folder from "./page/Folder.js";
 
 function App() {
   return (
-    <>
-      <NavigationBar />
-      <Profile />
-      <CardList />
-      <Footer />
-    </>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/Shared" element={<Shared />}></Route>
+        <Route path="/Folder" element={<Folder />}></Route>
+      </Routes>
+    </BrowserRouter>
   );
 }
 

src/CardList/CardList.css

@@ -76,3 +76,4 @@
     }
   }
 }
+/* <div className="FolderList_list-container"> */

src/NavigationBar/NavigationBar.css

@@ -6,6 +6,7 @@
   width: 100%;
   top: 0;
   align-items: center;
+  z-index: 1;
 }
 
 .NavigationBar-items {

src/NavigationBar/NavigationBar.js

@@ -2,12 +2,12 @@ import { useAsync } from "../api/useAsync";
 import NavProfile from "./NavProfile";
 import "./NavigationBar.css";
 
-function NavigationBar() {
+function NavigationBar({ position }) {
   const { userInfo, userFolder, loading, error } = useAsync();
 
   return (
     <nav className="NavigationBar">
-      <div className="NavigationBar-items">
+      <div className="NavigationBar-items" style={{ position: position }}>
         <a href="/">
           <img
             className="NavigationBar-logo"

src/SearchBar/SearchBar.css

@@ -1,24 +1,47 @@
 .SearchBar {
-  z-index: -1;
   position: relative;
-  width: 90%;
+  width: 325px;
   margin-left: 50px;
   margin-right: 50px;
+  margin-top: 20px;
   max-width: 1124px;
 }
 
 .SearchBar-InputSearch {
   background-color: var(--gray-light);
-  margin-top: 20px;
-  width: 100%;
   height: 43px;
+  width: 100%;
   border-radius: 10px;
   padding-left: 13%;
   padding-right: 8%;
 }
 
 .SearchBar-InputSearch-icon {
   position: absolute;
-  top: 52%;
+  top: 35%;
   left: 5%;
 }
+
+@media (min-width: 768px) {
+  .SearchBar {
+    width: 745px;
+  }
+  .SearchBar-InputSearch {
+    padding-left: 10%;
+    padding-right: 8%;
+  }
+}
+
+@media (min-width: 1124px) {
+  .SearchBar {
+    width: 1050px;
+  }
+
+  .SearchBar-InputSearch-icon {
+    left: 2%;
+  }
+
+  .SearchBar-InputSearch {
+    padding-left: 5%;
+  }
+}

src/SearchBar/SearchBar.js

@@ -4,11 +4,11 @@ import "./SearchBar.css";
 function SearchBar() {
   return (
     <div className="SearchBar">
+      <img src={SEARCH_ICON} className="SearchBar-InputSearch-icon"></img>
       <input
         className="SearchBar-InputSearch"
         placeholder="링크를 검색해 보세요."
       ></input>
-      <img src={SEARCH_ICON} className="SearchBar-InputSearch-icon"></img>
     </div>
   );
 }

src/api/getUserFolder.js

@@ -10,3 +10,40 @@ export const getUserFolder = async () => {
   const { folder } = await response.json();
   return { folder };
 };
+
+export const getFolderList = async () => {
+  const response = await fetch(`${BASE_URL}/users/1/folders`, {
+    method: "GET",
+  });
+  if (!response.ok) {
+    throw new Error("폴더정보 불러오기 실패");
+  }
+  const folder = await response.json();
+  return folder;
+};
+
+export const getAllFolderList = async () => {
+  const response = await fetch(`${BASE_URL}/users/1/links`, {
+    method: "GET",
+  });
+  if (!response.ok) {
+    throw new Error("폴더정보 불러오기 실패");
+  }
+  const folder = await response.json();
+  return folder;
+};
+
+export const getFolderListById = async (folderId) => {
+  const response = await fetch(
+    `${BASE_URL}/users/1/links?folderId=${folderId}`,
+    {
+      method: "GET",
+    }
+  );
+  if (!response.ok) {
+    throw new Error("폴더정보 불러오기 실패");
+  }
+  const folder = await response.json();
+  console.log("ddddddddddd:" + { folder });
+  return folder;
+};

src/api/useFolderAsync.js

@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+import { getFolderList, getAllFolderList } from "./getUserFolder";
+const BASE_URL = "https://bootcamp-api.codeit.kr/api";
+
+export function useFolderAsync() {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [folderList, setFolderList] = useState(null);
+  const [allFolderList, setAllFolderList] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const folderList = await getFolderList();
+        const allFolderList = await getAllFolderList();
+
+        setFolderList(folderList);
+        setAllFolderList(allFolderList);
+        setLoading(false); // 로딩 상태 변경
+      } catch (error) {
+        // 에러 발생 시 에러 상태 업데이트
+        setError(error);
+        setLoading(false); // 로딩 상태 변경
+      }
+    };
+
+    fetchData(); // fetchData 함수 호출
+  }, []);
+
+  return { folderList, allFolderList, loading, error }; // 상태를 반환
+}

src/colors.css

@@ -16,3 +16,38 @@
   --text-content-gray: #666666;
   --text-content-black: #333333;
 }
+
+.text-gradient-yellow-to-sky {
+  background-image: linear-gradient(to right, #ffd88b, #6fbaff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.text-gradient-blue-to-blue {
+  background-image: linear-gradient(to right, #528885, #6d7ccd);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.text-gradient-green-to-sky {
+  background-image: linear-gradient(to right, #68e8f9, #fe578f);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.text-gradient-purple-to-pink {
+  background-image: linear-gradient(to right, #6d6afe, #ff9f9f);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+.text-gradient-pink-to-sky {
+  background-image: linear-gradient(to right, #fe8a8a, #a4ceff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}

src/common.css

@@ -0,0 +1,10 @@
+.btn {
+  background-image: linear-gradient(to right, #6d6afe, #6ae3fe);
+  border-radius: 8px;
+  color: #f5f5f5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  cursor: pointer;
+}

src/components/FolderCardList.js

@@ -0,0 +1,61 @@
+import "../CardList/CardList.css";
+import { useState, useEffect } from "react";
+import FolderCardListItem from "./FolderCardListItem";
+
+export const FolderCardList = ({ folderId }) => {
+  const [folderInfo, setFolderInfo] = useState(null); // 폴더 정보 상태
+  const BASE_URL = "https://bootcamp-api.codeit.kr/api";
+
+  useEffect(() => {
+    const getFolderListById = async () => {
+      try {
+        let response;
+        if (folderId) {
+          response = await fetch(
+            `${BASE_URL}/users/1/links?folderId=${folderId}`
+          );
+        } else {
+          response = await fetch(`${BASE_URL}/users/1/links`);
+        }
+
+        if (!response.ok) {
+          throw new Error("폴더 정보를 가져오는데 실패했습니다.");
+        }
+
+        const folderData = await response.json();
+        setFolderInfo(folderData); // 폴더 정보 상태 업데이트
+      } catch (error) {
+        console.error(error);
+        setFolderInfo([]); // 에러 발생 시 폴더 정보를 빈 배열로 초기화
+      }
+    };
+    // 폴더 정보 가져오는 함수 호출
+    getFolderListById();
+  }, [folderId]); // folderId가 변경될 때마다 호출
+
+  useEffect(() => {
+    if (folderInfo) {
+      console.log("폴더 정보:", folderInfo);
+    }
+  }, [folderInfo]);
+
+  if (!folderInfo) {
+    return <div>로딩 중...</div>;
+  }
+
+  if (folderInfo.data && Array.isArray(folderInfo.data)) {
+    // 폴더 정보가 객체이고 그 안에 data 필드가 있는 경우, data를 사용하여 렌더링합니다.
+    return (
+      <div className="CardList">
+        {folderInfo.data.map((item, index) => (
+          <div className="CardList-item" key={index}>
+            <FolderCardListItem item={item} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // 폴더 정보가 없거나 잘못된 형태인 경우 에러를 표시합니다.
+  return <div>폴더 정보를 불러오는 중 문제가 발생했습니다.</div>;
+};