Merge pull request #329 from wjy308/part2-우제윤-week8

[우제윤 ] Week8

package.json

@@ -9,7 +9,9 @@
     "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",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,20 +1,17 @@
 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

@@ -21,7 +21,7 @@
   display: flex;
   flex-direction: column;
   width: 325px;
-  height: 366px;
+  height: 327px;
   box-shadow: 0 0.5rem 2.5rem 0 rgba(0, 0, 0, 0.08);
   border-radius: 1.5rem;
 }
@@ -37,6 +37,7 @@
 
 .CardList-item-img.hoverd {
   background-size: 130%;
+  transition: all 0.5s ease-in-out;
 }
 
 .CardList-contents {
@@ -45,6 +46,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
 }
 
 .CardList-item-createdAt {
@@ -68,11 +70,17 @@
     column-gap: 5rem;
   }
 
-  @media (min-width: 1124px) {
-    .CardList {
-      max-width: 89rem;
-      grid-template-columns: repeat(auto-fill, 21rem);
-      column-gap: 2rem;
-    }
+  .CardList-item {
+    width: 340px;
+    height: 334px;
   }
 }
+
+@media (min-width: 1124px) {
+  .CardList {
+    max-width: 89rem;
+    grid-template-columns: repeat(auto-fill, 21rem);
+    column-gap: 2rem;
+  }
+}
+/* <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"