[박준성] Week7 (#273)

* fix: hover transition ease-out

* feat: router 설치

* fix: api.js fetchProfile fetchLinks 사용

* feat:SharePage&FolderPage 나누기(커밋 누락)
feat&stlye: AddLink 컴포넌트 생성 및 input css 구현

* Fix: AddLink Button을 input 오른쪽에 고정

* Fix: api 분리

* Refactor: Search & CardInput 컨포넌트 분리

* Feat: FolderPage api로 profile 가져오기

* Feat: Card 컴포넌트를 페이지별 분리 및 시간 기능 구현

* Feat: 케밥 버튼, 별 버튼 넣기

* Fix: 데이터 없을 때 수정

* Feat: Kebab Button 모달창 만들기

* Feat: 폴더 목록 누를 시 목록 이름 나오기

package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/Main.js

@@ -0,0 +1,18 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import SharedPage from "./pages/SharedPage";
+import FolderPage from "./pages/FolderPage";
+import Footer from "./components/Footer";
+
+function Main() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/shared" element={<SharedPage />}/>
+        <Route path="/folder" element={<FolderPage />}/>
+      </Routes>
+      <Footer />
+    </BrowserRouter>
+  );
+}
+
+export default Main;

src/api.js

@@ -1,6 +1,59 @@
-//  export async function getProfile() {
-//   const response = await fetch ('https://bootcamp-api.codeit.kr/api/sample/user')
-//   const body = await response.json();
-//   return body;
-// }
-// 사용하고 싶은데 사용하지 못해서 남겨둠..
+export async function fetchProfile() {
+  try {
+    const response = await fetch(
+      "https://bootcamp-api.codeit.kr/api/sample/user"
+    );
+    const body = await response.json();
+    return body;
+  } catch (err) {
+    console.log(err.message);
+  }
+}
+
+export async function fetchLinks() {
+  try {
+    const response = await fetch(
+      "https://bootcamp-api.codeit.kr/api/sample/folder"
+    );
+    const body = await response.json();
+    return body;
+  } catch (err) {
+    console.log(err.message);
+  }
+}
+
+export async function getUser() {
+  try {
+    const response = await fetch(
+      "https://bootcamp-api.codeit.kr/api/users/1"
+    )
+    const body = await response.json();
+    return body;
+  } catch (err) {
+    console.log(err.message);
+  }
+}
+
+export async function getUserFolder() {
+  try {
+    const response = await fetch(
+      "https://bootcamp-api.codeit.kr/api/users/1/folders"
+    )
+    const body = await response.json();
+    return body;
+  } catch (err) {
+    console.log(err.message);
+  }
+}
+
+export async function getUserLink() {
+  try {
+    const response = await fetch(
+      "https://bootcamp-api.codeit.kr/api/users/1/links"
+    )
+    const body = await response.json();
+    return body;
+  } catch (err) {
+    console.log(err.message);
+  }
+}

src/components/AddLink.js

@@ -0,0 +1,14 @@
+
+
+function AddLink() {
+  return (
+    <div className="AddLink">
+    <div className="InputContainer">
+      <input className="AddLinkInput" placeholder="링크를 추가해 보세요"/>
+      <button className="AddLinkButton">추가하기</button>
+    </div>
+    </div>
+  );
+}
+
+export default AddLink;

src/components/Card-folder.js

@@ -0,0 +1,53 @@
+import noneImg from "../assets/noneimg.svg";
+import { timeAgo } from "../time";
+import { useState } from "react";
+import KebabModal from "./KebabModal";
+import { Link } from "react-router-dom";
+
+function formatDate(value) {
+  const date = new Date(value);
+  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
+}
+
+function Card({ data }) {
+  const [modalOpen, setModalOpen] = useState(Array(data).fill(false));
+  const showModal = (index) => {
+    const newModalOpen = [...modalOpen];
+    newModalOpen[index] = !newModalOpen[index];
+    setModalOpen(newModalOpen);
+  }
+
+  return (
+    <div className="CardGrid">
+      {data ? (data.map((data, index) => (
+          <div className="Contents">
+            <Link to={data.url} target="_blank">
+              <div className="CardContainer">
+                <button className="StarImg"></button>
+                <img
+                  className="Card"
+                  src={data.image_source || noneImg}
+                  key={data.id}
+                  alt="이미지 미리보기"
+                />
+              </div>
+            </Link>
+            <div className="CardInfoContainer">
+            {modalOpen[index] && <KebabModal />}
+            <button className="KebabImg" onClick={() => showModal(index)}></button>
+              <p className="CreatedAt">{timeAgo(data.created_at)}</p>
+              <p className="Description">
+                {data.description || "no description"}
+              </p>
+              <p className="makeDate">{formatDate(data.created_at)}</p>
+            </div>
+          </div>
+        ))) : (
+          <p>"저장된 링크가 없습니다"</p>
+        )}
+
+    </div>
+  );
+}
+
+export default Card;

src/components/Card-shared.js

@@ -0,0 +1,51 @@
+import noneImg from "../assets/noneimg.svg";
+import { timeAgo } from "../time";
+import KebabModal from "./KebabModal";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+
+function formatDate(value) {
+  const date = new Date(value);
+  return `${date.getFullYear()}. ${date.getMonth() + 1}. ${date.getDate()}`;
+}
+
+function Card({ data }) {
+  const [modalOpen, setModalOpen] = useState(Array(data).fill(false));
+  const showModal = (index) => {
+    const newModalOpen = [...modalOpen];
+    newModalOpen[index] = !newModalOpen[index];
+    setModalOpen(newModalOpen);
+  }
+
+  return (
+    <div className="CardGrid">
+      {data &&  
+        data.map((data, index) => (
+          <div className="Contents">
+          <Link to={data.url}>
+            <div className="CardContainer">
+                <button className="StarImg"></button>
+                <img
+                  className="Card"
+                  src={data.imageSource || noneImg}
+                  key={data.id}
+                  alt="이미지 미리보기"
+                />
+              </div>
+            </Link>
+            <div className="CardInfoContainer">
+            <button className="KebabImg" onClick={() => showModal(index)}></button>
+              {modalOpen[index] && <KebabModal />}
+              <p className="CreatedAt">{timeAgo(data.createdAt)}</p>
+              <p className="Description">
+                {data.description || "no description"}
+              </p>
+              <p className="makeDate">{formatDate(data.createdAt)}</p>
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}
+
+export default Card;