0530

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "antd": "^5.17.4",
+    "axios": "^1.7.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.14",

src/App.jsx

@@ -1,11 +1,17 @@
+import { Routes, Route } from "react-router-dom";
 import { NavBar } from "./components/NavBar";
 import HomePage from "./pages/HomePage";
-
+import PostPage from "./pages/PostPage";
+import NewPostPage from "./pages/NewPostPage";
 export default function App() {
   return (
     <>
       <NavBar />
-      <HomePage />
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/posts/:id" element={<PostPage />} />
+        <Route path="/posts/new" element={<NewPostPage />} />
+      </Routes>
     </>
   );
 }

src/components/Card.jsx

@@ -1,25 +1,26 @@
+import { useNavigate } from "react-router-dom";
 import styles from "./Card.module.css";
 
-export const Card = ({ title, author, likes, createdAt }) => {
-    return (
-        <div className={styles.card_wrapper}>
-            <h3 className={styles.card_head}>
-                <span>{title}</span>
-                <span>❤️ {likes}</span>
-            </h3>
-
-            <p>글쓴이 : {author}</p>
-            <p>작성일 : {createdAt}</p>
-        </div>
-    );
+export const Card = ({ id, title, author, likes, createdAt }) => {
+  const navi = useNavigate();
+  return (
+    <div className={styles.card_wrapper} onClick={() => navi(`/posts/${id}`)}>
+      <h3 className={styles.card_head}>
+        <span>{title}</span>
+        <span>❤️ {likes}</span>
+      </h3>
+      <p>글쓴이 : {author}</p>
+      <p>작성일 : {createdAt}</p>
+    </div>
+  );
 };
 
 export const CardSkeleton = () => {
-    return (
-        <div className={styles.card_wrapper}>
-            <div className={`${styles.skeleton} ${styles.skeleton_head}`}></div>
-            <div className={`${styles.skeleton} ${styles.skeleton_text}`}></div>
-            <div className={`${styles.skeleton} ${styles.skeleton_text}`}></div>
-        </div>
-    );
+  return (
+    <div className={styles.card_wrapper}>
+      <div className={`${styles.skeleton} ${styles.skeleton_head}`}></div>
+      <div className={`${styles.skeleton} ${styles.skeleton_text}`}></div>
+      <div className={`${styles.skeleton} ${styles.skeleton_text}`}></div>
+    </div>
+  );
 };

src/components/NavBar.jsx

@@ -1,23 +1,24 @@
+import { Link } from "react-router-dom";
 import styles from "./NavBar.module.css";
 
 export const NavBar = () => {
-    return (
-        <nav className={styles.nav_wrapper}>
-            <ul className={styles.nav_container}>
-                <li>
-                    <a href="/">MY BLOG</a>
-                </li>
+  return (
+    <nav className={styles.nav_wrapper}>
+      <ul className={styles.nav_container}>
+        <li>
+          <Link to="/">MY BLOG</Link>
+        </li>
 
-                <li style={{ flexGrow: 1 }} />
+        <li style={{ flexGrow: 1 }} />
 
-                <li>
-                    <a href="/">글 목록</a>
-                </li>
+        <li>
+          <Link to="/">글 목록</Link>
+        </li>
 
-                <li>
-                    <a href="/post/new">글작성</a>
-                </li>
-            </ul>
-        </nav>
-    );
+        <li>
+          <Link to="/post/new">글작성</Link>
+        </li>
+      </ul>
+    </nav>
+  );
 };

src/components/Post.jsx

@@ -0,0 +1,24 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./Post.module.css";
+
+export const Post = ({ id, title, author, likes, createdAt, content }) => {
+  const navi = useNavigate();
+
+  return (
+    <div className={styles.post_wrapper}>
+      <h4>#{id}번째 게시글</h4>
+      <h1 className={styles.post_head}>
+        <span>{title}</span>
+        <span>❤️ {likes}</span>
+      </h1>
+      <div className={styles.post_auth}>
+        <span>{author}</span>
+        <span>{createdAt}</span>
+      </div>
+      <div className={styles.post_content}>
+        <p>{content}</p>
+      </div>
+      <button onClick={() => navi(-1)}>뒤로 가기</button>
+    </div>
+  );
+};

src/components/Post.module.css

@@ -0,0 +1,53 @@
+.post_wrapper {
+	width: min(100%, 900px);
+
+	margin: 20px auto;
+	padding: 20px;
+	border-radius: 15px;
+
+	box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
+}
+.post_auth {
+	display: flex;
+	gap: 10px;
+	align-items: end;
+	margin: 2px 0px;
+}
+.post_auth > span:first-child {
+	font-weight: bold;
+}
+.post_auth > span:last-child {
+	color: grey;
+	font-size: 14px;
+}
+.post_content {
+	margin: 30px 0px;
+	padding: 20px 0px;
+	border-top: 1px solid #ccc;
+	border-bottom: 1px solid #ccc;
+}
+
+.post_wrapper > button {
+	width: 100px;
+	padding: 5px 0px;
+	border: 1px solid #303030;
+	border-radius: 5px;
+	color: #303030;
+	background-color: white;
+}
+.post_wrapper > button:hover{ 
+	animation-duration: 3s; 
+	animation-name: rainbowLink; 
+	animation-iteration-count: infinite; 
+	cursor: pointer;
+} 
+@keyframes rainbowLink {     
+	0% { color: #ff2a2a; }
+	15% { color: #ff7a2a; }
+	30% { color: #ffc52a; }
+	45% { color: #43ff2a; }
+	60% { color: #2a89ff; }
+	75% { color: #202082; }
+	90% { color: #6b2aff; } 
+	100% { color: #e82aff; }
+   }

src/globals.css

@@ -19,3 +19,26 @@ a:visited {
 
 #root {
 }
+
+.loading-wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background-color: #0002;
+    position: fixed;
+}
+
+@keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+}
+.loading-content {
+    animation: rotate 1s linear infinite;
+}

src/main.jsx

@@ -2,9 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.jsx";
 import "./globals.css";
+import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
+  <BrowserRouter>
     <React.StrictMode>
-        <App />
+      <App />
     </React.StrictMode>
+  </BrowserRouter>
 );

src/pages/HomePage.jsx

@@ -1,9 +1,13 @@
 import { useEffect, useState } from "react";
-import { Card, CardSkeleton } from "../components/Card";
+import { Card } from "../components/Card";
+import { Pagination } from "antd";
 
 export default function HomePage() {
   const [isPending, setIsPending] = useState(false);
   const [posts, setPosts] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const pageSize = 3;
+
   useEffect(() => {
     setIsPending(true);
     fetch("http://localhost:8080/posts")
@@ -18,17 +22,25 @@ export default function HomePage() {
       });
   }, []);
 
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const paginatedPosts = posts.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize
+  );
+
   return (
     <>
       {isPending ? (
-        <>
-          <CardSkeleton />
-          <CardSkeleton />
-          <CardSkeleton />
-          <CardSkeleton />
-        </>
+        <div className="loading-wrapper">
+          <div className="loading-content">
+            <p>로딩중...</p>
+          </div>
+        </div>
       ) : (
-        posts.map((post) => {
+        paginatedPosts.map((post) => {
           return (
             <Card
               key={post.id}
@@ -41,6 +53,20 @@ export default function HomePage() {
           );
         })
       )}
+      <div
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          display: "flex",
+        }}
+      >
+        <Pagination
+          current={currentPage}
+          pageSize={pageSize}
+          total={posts.length}
+          onChange={handlePageChange}
+        />
+      </div>
     </>
   );
 }

src/pages/NewPostPage.jsx

@@ -1,7 +1,7 @@
 export default function NewPostPage() {
-    return (
-        <>
-            <h1>♡˚‧ 새로운 글 작성페이지 ♡=*˚‧♡ </h1>
-        </>
-    );
-}
+  return (
+    <>
+      <h1>♡˚‧ 새로운 글 작성페이지 ♡=*˚‧♡ </h1>
+    </>
+  );
+}

src/pages/PostPage.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+import { Post } from "../components/Post";
+import { useParams } from "react-router-dom";
+// import axios from "axios";
+export default function PostPage() {
+  const [isPending, setIsPending] = useState(false);
+  const [post, setPost] = useState([]);
+
+  const param = useParams();
+  useEffect(() => {
+    setIsPending(true);
+    // axios.get(`http://localhost:8080/posts/${param.id}`)
+    fetch(`http://localhost:8080/posts/${param.id}`)
+      .then((response) => {
+        return response.json();
+      })
+      .then((result) => {
+        setPost(result);
+        setIsPending(false);
+      });
+  }, []);
+
+  return (
+    <>
+      {isPending ? (
+        <div className="loading-wrapper">
+          <div className="loading-content">
+            <p>로딩중...</p>
+          </div>
+        </div>
+      ) : (
+        <Post
+          id={post.id}
+          title={post.title}
+          author={post.author}
+          likes={post.likes}
+          createdAt={post.createdAt}
+          content={post.content}
+        />
+      )}
+    </>
+  );
+}