LikeLion-KNU · 2NNS-V · May 30, 2024
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Soeun Nam</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,11 +1,18 @@
+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>
+        <Route path = "/posts/:id" element= {<PostPage/>}></Route>
+        <Route path = "/post/new" element= {<NewPostPage/>}></Route>
+      </Routes>
     </>
   );
 }
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -1,8 +1,11 @@
+import { useNavigate } from "react-router-dom";
 import styles from "./Card.module.css";
 
-export const Card = ({ title, author, likes, createdAt }) => {
+export const Card = ({ id, title, author, likes, createdAt }) => {
+    const navigate = useNavigate();
+
     return (
-        <div className={styles.card_wrapper}>
+        <div className={styles.card_wrapper} onClick={()=> navigate(`posts/${id}`)}>
             <h3 className={styles.card_head}>
                 <span>{title}</span>
                 <span>❤️ {likes}</span>

diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -0,0 +1,12 @@
+import styles from "./Loading.module.css";
+
+export const Loading = () => {
+    return (
+        <div className={styles.loading_wrapper}>
+            <h1>loading</h1>
+            <div className={styles.loading_bar_container}>
+                <div className={styles.loading_bar}></div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/components/Loading.module.css b/src/components/Loading.module.css
@@ -0,0 +1,55 @@
+/* Loading.module.css */
+.loading_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh; 
+    background-color: #f0f0f0; 
+}
+
+.loading_wrapper h1 {
+    font-size: 2em; 
+    font-weight: bold; 
+    color: #333;
+    animation: pulse 1.5s infinite; 
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.loading_bar_container {
+    width: 80%;
+    background-color: #ddd;
+    border-radius: 10px;
+    overflow: hidden;
+    height: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.loading_bar {
+    width: 0;
+    height: 100%;
+    background-color: pink;
+    border-radius: 10px 0 0 10px;
+    animation: loading 5s linear forwards;
+}
+
+
+@keyframes loading {
+    0% {
+        width: 0;
+    }
+    100% {
+        width: 100%;
+    }
+}
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
@@ -1,21 +1,22 @@
 import styles from "./NavBar.module.css";
+import { Link } from "react-router-dom";
 
 export const NavBar = () => {
     return (
         <nav className={styles.nav_wrapper}>
             <ul className={styles.nav_container}>
                 <li>
-                    <a href="/">MY BLOG</a>
+                    <Link to={"/"}>Soeun Nam's Blog</Link>
                 </li>
 
                 <li style={{ flexGrow: 1 }} />
 
                 <li>
-                    <a href="/">글 목록</a>
+                    <Link to={"/"}>home</Link>
                 </li>
 
                 <li>
-                    <a href="/post/new">글작성</a>
+                    <Link to={"/post/new"}>post</Link>
                 </li>
             </ul>
         </nav>

diff --git a/src/components/NavBar.module.css b/src/components/NavBar.module.css
@@ -2,7 +2,7 @@
     width: 100%;
     height: 60px;
 
-    background-color: #303030;
+    background-color: #707070;
     color: #fff;
 }
 

diff --git a/src/components/NewPost.module.css b/src/components/NewPost.module.css
@@ -0,0 +1,52 @@
+/* NewPostPage.module.css */
+.new_post_wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    margin: 20px;
+}
+
+.new_post_form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 600px;
+}
+
+.new_post_wrapper h2 {
+    margin : 20px;
+}
+
+.new_post_form input,
+.new_post_form textarea {
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 1em;
+}
+
+.new_post_form textarea {
+    width: 100%;
+    height: 500px; 
+    resize: none;
+}
+
+.new_post_form button {
+    padding: 10px;
+    border: none;
+    background-color: pink;
+    color: white;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1em;
+}
+
+.new_post_form button:hover {
+    background-color:  #707070;
+}
diff --git a/src/components/Post.jsx b/src/components/Post.jsx
@@ -0,0 +1,39 @@
+import { useNavigate } from "react-router-dom";
+import styles from "./Post.module.css";
+
+export const Post = ({ id, title, author, likes, createdAt, content }) => {
+	const navigate = useNavigate();
+
+	const handleDelete = () => {
+        if (window.confirm("Are you sure you want to delete this post?")) {
+            fetch(`http://localhost:8080/posts/${id}`, {
+                method: "DELETE"
+            })
+                .then(() => {
+                    navigate("/");
+                })
+                .catch((error) => {
+                    console.error("Error deleting post:", error);
+                });
+        }
+    };
+
+	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={handleDelete} className={styles.delete_button}>삭제하기</button>
+			<button onClick={() => navigate(-1)}>뒤로가기</button>
+		</div>
+	);
+};
diff --git a/src/components/Post.module.css b/src/components/Post.module.css
@@ -0,0 +1,44 @@
+.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;
+	margin:10px;
+}
+.post_wrapper > button:hover {
+	background-color: #303030;
+	color: white;
+	transition: 0.5s;
+	cursor: pointer;
+}
diff --git a/src/main.jsx b/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>
+    <BrowserRouter>
         <App />
-    </React.StrictMode>
+    </BrowserRouter>
 );