feat: blog template

package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "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,18 @@
+import { Route, Routes } 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,30 @@
+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>
+export const Card = ({ id, title, author, likes, createdAt }) => {
+  const navigate = useNavigate();
+  return (
+    <div
+      className={styles.card_wrapper}
+      onClick={() => navigate(`/posts/${id}`)}
+    >
+      <h3 className={styles.card_head}>
+        <span>{title}</span>
+        <span>❤️{likes}</span>
+      </h3>
 
-            <p>글쓴이 : {author}</p>
-            <p>작성일 : {createdAt}</p>
-        </div>
-    );
+      <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/Card.module.css

@@ -1,14 +1,19 @@
 .card_wrapper {
-  width: min(100%, 500px);
+  width: min(100%, 1000px);
 
   margin: 20px auto;
   padding: 20px;
-  border-radius: 15px;
 
   box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
 
   cursor: pointer;
 }
+.card_wrapper:hover {
+  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.4);
+	background-color: #44559930;
+	transition: 0.25s;
+	cursor: pointer;
+}
 
 .card_head {
   display: flex;

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="/posts/new">글작성</Link>
+        </li>
+      </ul>
+    </nav>
+  );
 };

src/components/NavBar.module.css

@@ -2,7 +2,7 @@
     width: 100%;
     height: 60px;
 
-    background-color: #303030;
+    background-color: #445599;
     color: #fff;
 }
 

src/components/Post.jsx

@@ -0,0 +1,23 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./Post.module.css";
+
+export const Post = ({ id, title, author, likes, createdAt, content }) => {
+  const navigate = 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={() => navigate(-1)}>뒤로가기</button>
+    </div>
+  );
+};

src/components/Post.module.css

@@ -0,0 +1,44 @@
+.post_wrapper {
+	width: min(100%, 900px);
+
+	margin: 20px auto;
+	padding: 20px;
+
+	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 {
+	position: relative;
+	left: 88%;
+	width: 100px;
+	padding: 5px 0px;
+	border: 1px solid #303030;
+	border-radius: 5px;
+	color: #303030;
+	background-color: white;
+}
+.post_wrapper > button:hover {
+	background-color: #44559940;
+	border: 1px solid #303030;
+	transition: 0.5s;
+	cursor: pointer;
+}

src/globals.css

@@ -18,4 +18,4 @@ a:visited {
 }
 
 #root {
-}
+}

src/main.jsx

@@ -2,9 +2,10 @@ 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(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>
 );

src/pages/PostPage.jsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Post } from "../components/Post";
+import { useParams } from "react-router-dom";
+
+export default function PostPage() {
+  const [isPending, setIsPending] = useState(false);
+  const [post, setPost] = useState([]);
+  const params = useParams();
+
+  useEffect(() => {
+    setIsPending(true);
+    fetch(`http://localhost:8080/posts/${params.id}`)
+      .then((response) => {
+        return response.json();
+      })
+      .then((post) => {
+        setPost(post);
+      })
+      .finally(() => {
+        setIsPending(false);
+      });
+  }, []);
+  return (
+    <>
+      {isPending ? (
+        <>
+          <p style={
+            {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              fontSize: "1.5rem",
+              height: "70vh",
+              fontStyle: "italic"
+            }
+          }>로딩중 ...</p>
+        </>
+      ) : (
+        <Post
+          id={post.id}
+          title={post.title}
+          author={post.author}
+          likes={post.likes}
+          createdAt={post.createdAt}
+          content={post.content}
+        />
+      )}
+    </>
+  );
+}