final commit

week10/my-app/package.json

@@ -9,8 +9,11 @@
     "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "react-redux": "^9.1.2",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "redux": "^5.0.1",
     "styled-components": "^6.1.11",
     "web-vitals": "^2.1.4"
   },

week10/my-app/src/App.jsx

@@ -1,25 +1,96 @@
 import RegisterPage from "./pages/Register";
 import CreatePage from "./pages/Write";
+import ListPage from "./pages/List";
+import DetailPage from "./pages/Detail";
 import { Routes, Route, NavLink } from "react-router-dom";
 import styled from "styled-components";
+import { useState, useEffect } from "react";
+import { GetPostsApi } from "./api/post";
+import { GetUserHeartApi } from "./api/heart";
+import { Navigate } from "react-router-dom";
+
 function App() {
+  const [posts, setPosts] = useState(null);
+  const [heartPosts, setHeartPosts] = useState();
+
+  async function getPosts() {
+    try {
+      const data = await GetPostsApi();
+      setPosts(data);
+    } catch (err) {
+      console.log(err.message);
+    }
+  }
+
+  async function getHeartPosts() {
+    console.log("test");
+    try {
+      const data = await GetUserHeartApi();
+      setHeartPosts(data);
+    } catch (err) {
+      console.log(err.message);
+    }
+  }
+
+  useEffect(() => {
+    getPosts();
+    getHeartPosts();
+  }, []);
+
   return (
     <div>
       <Navbar>
-        <NavLink to="/">글 목록</NavLink>
-        <NavLink to="/write">글쓰기</NavLink>
-        <NavLink to="/register">로그인/회원가입</NavLink>
-        <NavLink to="/heart">좋아요 누른 글</NavLink>
+        <StyledNavLink to="/posts">글 목록</StyledNavLink>
+        <StyledNavLink to="/write">글쓰기</StyledNavLink>
+        <StyledNavLink to="/register">로그인/회원가입</StyledNavLink>
+        <StyledNavLink to="/heart" onClick={getHeartPosts}>
+          좋아요 누른 글
+        </StyledNavLink>
       </Navbar>
       <Routes>
-        {/* <Route path="/" element={<ListPage />} /> */}
-        {/* <Route path="/detail/:postId" element={<DetailPage />} /> */}
+        <Route path="/" element={<Navigate to="/posts" />} />
+        <Route
+          path="/posts"
+          element={<ListPage posts={posts} setPosts={setPosts} />}
+        />
+        <Route
+          path="/posts/:postId"
+          element={<DetailPage posts={posts} setPosts={setPosts} />}
+        />
         <Route path="/write" element={<CreatePage />} />
         <Route path="/register" element={<RegisterPage />} />
-        {/* <Route path="/heart" element={<HeartPage />} /> */}
+        <Route
+          path="/heart"
+          element={<ListPage posts={heartPosts} setPosts={setHeartPosts} />}
+        />
       </Routes>
     </div>
   );
 }
+
 export default App;
-const Navbar = styled.div``;
+
+const Navbar = styled.div`
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #333;
+  padding: 10px 20px;
+`;
+
+const StyledNavLink = styled(NavLink)`
+  color: white;
+  text-decoration: none;
+  font-size: 18px;
+  padding: 10px 20px;
+
+  &.active {
+    background-color: #555;
+    border-radius: 4px;
+  }
+
+  &:hover {
+    background-color: #444;
+    border-radius: 4px;
+  }
+`;

week10/my-app/src/api/comment.js

@@ -0,0 +1,37 @@
+import client from ".";
+import axios from "axios";
+
+export const GetCommentApi = async (postId) => {
+  try {
+    if (postId) {
+      const res = await client.get(
+        `${process.env.REACT_APP_SERVER_URL}/posts/${postId}/comments`
+      );
+      console.log(res.data);
+      return res.data;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const PostCommentApi = async (postId, content) => {
+  try {
+    await client.post(`${process.env.REACT_APP_SERVER_URL}/comments`, {
+      postId,
+      content,
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const DeleteCommentApi = async (commentId) => {
+  try {
+    await client.delete(
+      `${process.env.REACT_APP_SERVER_URL}/comments/${commentId}`
+    );
+  } catch (err) {
+    console.log(err);
+  }
+};

week10/my-app/src/api/heart.js

@@ -0,0 +1,57 @@
+import client from ".";
+import axios from "axios";
+
+export const GetHeartApi = async (postId) => {
+  try {
+    if (postId) {
+      const res = await client.get(`/posts/${postId}/hearts`);
+      // console.log(res);
+      return res.data;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const PostHeartApi = async (postId) => {
+  try {
+    const res = await client.post(`/posts/${postId}/hearts`);
+    // console.log(res);
+  } catch (err) {
+    console.log(err.message);
+  }
+};
+
+export const DeleteHeartApi = async (postId) => {
+  try {
+    await client.delete(`/posts/${postId}/hearts`);
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const GetUserHeartApi = async () => {
+  try {
+    const res = await client.get(`/posts/hearts`);
+    return res.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const FindIfLiked = async (postId) => {
+  var liked = false;
+  try {
+    const list = await GetUserHeartApi();
+    if (list.length > 0) {
+      list.forEach(function (post) {
+        if (post.postId.toString() == postId) {
+          liked = true;
+        }
+      });
+    }
+  } catch (err) {
+    console.log(err.message);
+  }
+  return liked;
+};

week10/my-app/src/api/index.js

@@ -1,4 +1,5 @@
 import axios from "axios";
+
 const client = axios.create();
 client.defaults.baseURL = process.env.REACT_APP_SERVER_URL;
 client.defaults.withCredentials = true;
@@ -9,4 +10,5 @@ console.log(
   "현재 axios instance 헤더 토큰",
   client.defaults.headers.common["Authorization"]
 );
+
 export default client;

week10/my-app/src/api/post.js

@@ -1,4 +1,5 @@
 import client from ".";
+import axios from "axios";
 
 export const CreateNewPostApi = async (request, image) => {
   try {
@@ -13,24 +14,39 @@ export const CreateNewPostApi = async (request, image) => {
         "Content-Type": "multipart/form-data",
       },
     });
-    console.log(res);
+    // console.log(res);
   } catch (err) {
     console.log(err);
   }
 };
 
-export const GetPostApi = async () => {
+export const GetPostsApi = async () => {
   try {
-    const res = await client.get("/posts", {
-      postId,
-      nickname,
-      title,
-      content,
-      image,
-      createDate,
-      modifiedDate,
-    });
-    console.log(res);
+    const res = await client.get("/posts");
+    // console.log(res.data);
+    return res.data;
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const DeletePostApi = async (postId) => {
+  try {
+    await client.delete(`${process.env.REACT_APP_SERVER_URL}/posts/${postId}`);
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const GetPostDetailApi = async (postId) => {
+  try {
+    if (postId) {
+      const res = await client.get(
+        `${process.env.REACT_APP_SERVER_URL}/posts/${postId}`
+      );
+      // console.log(res.data);
+      return res.data;
+    }
   } catch (err) {
     console.log(err);
   }