Merge pull request #331 from juan0444/part2-이주안-week8

[이주안]Week8

src/App.js

@@ -1,24 +1,47 @@
-import logo from './logo.svg';
-import './App.css';
+
+import React from "react";
+import styled from "styled-components";
+import "./reset.css";
+import appAip from "../src/api/appAip";
+import NavigationBar from "../src/components/NavigationBar";
+import MainProfile from "../src/components/MainProfile";
+import Search from "../src/components/Search";
+import Cards from "../src/components/Cards";
+import Footer from "../src/components/Footer";
+
+// export function TestLoginData(userData) {
+//   if (!userData) {
+//     return <>테스트</>;
+//   }
+
+//   console.log("?", userData);
+// }
+
+export const ContentBlock = styled.div`
+  margin: 2.5rem 10rem;
+
+  @media screen and (max-width: 1124px) {
+    margin: 2.5rem 4.34rem;
+  }
+
+  @media screen and (max-width: 545px) {
+    margin: 2.5rem 2.03rem;
+  }
+`;
 
 function App() {
+  const { items, user, profile } = appAip();
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <>
+      <NavigationBar user={user} />
+      <MainProfile profile={profile} />
+      <ContentBlock>
+        <Search />
+        <Cards items={items} />
+      </ContentBlock>
+      <Footer />
+    </>
   );
 }
 

src/Main.js

@@ -0,0 +1,25 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import App from "./App";
+import LinkPage from "./pages/LinkPage";
+import SigninPage from "./pages/SigninPage";
+import NotFoundPage from "./pages/NotFoundPage";
+import FolderPage from "./pages/FolderPage";
+
+function PageLink() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<App />} />
+        <Route path="shared" element={<LinkPage />} />
+        <Route path="folder">
+          <Route index element={<FolderPage />} />
+          <Route path=":folderName" element={<FolderPage />} />
+        </Route>
+        <Route path="signin" element={<SigninPage />} />
+        <Route path="*" element={<NotFoundPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default PageLink;

src/api/appAip.js

@@ -0,0 +1,89 @@
+import { useState, useEffect } from "react";
+
+export const URL = "https://bootcamp-api.codeit.kr/api";
+
+// 네비게이션 바 - 프로필 유저 정보
+export const fetchUser = async () => {
+  try {
+    const response = await fetch(`${URL}/sample/user`);
+
+    if (response.ok) {
+      const result = await response.json();
+      return result;
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+// 폴더 소유자 정보, 링크 정보
+export const fetchFoderContent = async () => {
+  try {
+    const response = await fetch(`${URL}/sample/folder`);
+
+    if (response.ok) {
+      const result = await response.json();
+      return result;
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+// 로그인
+// 전체 수정필요
+export const requestPost = async (email, password) => {
+  try {
+    const response = await fetch(`${URL}/sign-in`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: email,
+        password: password,
+      }),
+    });
+
+    if (response.ok) {
+      // window.location.href = "/";
+      const result = await response.json();
+      return result;
+    }
+
+    if (!response.ok) {
+      throw new Error("테스트");
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+function AppAip() {
+  const [items, setItems] = useState([]);
+  const [user, setUser] = useState([]);
+  const [profile, setProfile] = useState([]);
+
+  const fetchContent = async () => {
+    const { folder } = await fetchFoderContent();
+
+    setProfile(folder);
+    setItems(folder.links);
+  };
+
+  const fetchUser = async () => {
+    const userData = await fetchUser();
+
+    setUser(userData);
+  };
+
+  useEffect(() => {
+    // 이름 변경
+    fetchContent();
+    fetchUser();
+  }, []);
+
+  return { items, user, profile };
+}
+
+export default AppAip;

src/api/folderAip.js

@@ -0,0 +1,85 @@
+import { useState, useEffect } from "react";
+import { URL } from "./appAip";
+
+/**
+ * 폴더 목록 데이터
+ */
+export const fetchFolderList = async () => {
+  try {
+    const response = await fetch(`${URL}/users/1/folders`);
+
+    if (response.ok) {
+      const result = await response.json();
+      return result;
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+/**
+ * 프로필 데이터
+ */
+export const fetchFolderUser = async () => {
+  try {
+    const response = await fetch(`${URL}/users/1`);
+
+    if (response.ok) {
+      const result = await response.json();
+      return result;
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+/**
+ * 폴더 카드 데이터
+ */
+export const fetchFolderContent = async () => {
+  try {
+    const response = await fetch(`${URL}/users/1/links`);
+
+    if (response.ok) {
+      const result = await response.json();
+      return result;
+    }
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+
+function FolderAip() {
+  const [folderItems, setFolderItems] = useState([]);
+  const [folderUser, setFolderUser] = useState([]);
+  const [folderContent, setFolderContent] = useState([]);
+
+  // 고치기
+  const fetchFolders = async () => {
+    const folder = await fetchFolderList();
+
+    setFolderItems(folder.data);
+  };
+
+  const fetchUser = async () => {
+    const folder = await fetchFolderUser();
+
+    setFolderUser(folder.data);
+  };
+
+  const fetchContent = async () => {
+    const folder = await fetchFolderContent();
+
+    setFolderContent(folder.data);
+  };
+
+  useEffect(() => {
+    fetchFolders();
+    fetchUser();
+    fetchContent();
+  }, []);
+
+  return { folderItems, folderUser, folderContent };
+}
+
+export default FolderAip;