Seongil week4 hw

lionblog-seongil/src/components/Posts/index.jsx

@@ -14,3 +14,27 @@ export const SmallPost = ({ post }) => {
     </div>
   );
 };
+
+export const BigPost = ({ post }) => {
+  const likeBtnClick = () => {
+    alert("좋아요");
+  };
+  return (
+    <div className="w-max flex flex-col justify-center items-center">
+      <div className="block group py-10 px-8 mr-5 my-5 ring-8 ring-transparent border-2 border-box border-white hover:bg-orange-400 hover:text-black hover:border-transparent hover:ring-orange-200 rounded-xl font-medium">
+        <h1 className="font-extrabold text-2xl truncate">{post.title}</h1>
+        <p className="mt-2">{post.author.username}</p>
+        <div className="flex flex-wrap mt-5">
+          {post.tags.map((tag) => (
+            <span key={tag.id} className="tag m-1">
+              #{tag.content}
+            </span>
+          ))}
+        </div>
+        <div onClick={likeBtnClick}>
+          {post.like_users.length > 0 && `❤️ ${post.like_users.length}`}
+        </div>
+      </div>
+    </div>
+  );
+};

lionblog-seongil/src/routes/HomePage.jsx

@@ -20,7 +20,9 @@ const HomePage = () => {
       </div>
       <div className="grid grid-cols-4 px-10 mt-10">
         {postList.map((post) => (
-          <SmallPost key={post.id} post={post} />
+          <Link to={"/" + post.id}>
+            <SmallPost key={post.id} post={post} />
+          </Link>
         ))}
       </div>
       <div className="flex justify-center m-20">

lionblog-seongil/src/routes/PostCreatePage.jsx

@@ -1,5 +1,48 @@
 const PostCreatePage = () => {
-  return <div>Post Create Page</div>;
+  const handleSignUpSubmit = () => {
+    alert("게시물을 등록합니다");
+  };
+  return (
+    <div className="flex flex-col items-center w-1/2">
+      <h3 className="font-bold text-2xl">게시글 작성</h3>
+      <form className="form gap-2" onSubmit={handleSignUpSubmit}>
+        <label required type="text" className="label">
+          제목:
+        </label>
+        <input
+          required
+          placeholder="제목을 작성하세요"
+          type="text"
+          id="title"
+          className="input"
+        />
+        <label required className="label">
+          내용:
+        </label>
+        <input
+          className="h-64 input"
+          placeholder="내용을 작성하세요"
+          required
+          type="text"
+          id="content"
+        />
+        <label required className="label">
+          태그:
+        </label>
+        <input
+          className="input"
+          placeholder="태그를 추가하세요"
+          type="text"
+          id="tag"
+        />
+        <div className="flex flex-row items-center gap-5">
+          <button type="submit" className="button mt-7">
+            완료
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 };
 
 export default PostCreatePage;

lionblog-seongil/src/routes/PostDetailPage.jsx

@@ -1,5 +1,34 @@
+import posts from "../data/posts";
+import { BigPost } from "../components/Posts";
+import { useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
+
 const PostDetailPage = () => {
-  return <div>Post Detail Page</div>;
+  const postId = useParams().postId;
+  const post = posts.find((post) => post.id === parseInt(postId));
+  const handleDeleteClick = () => {
+    alert("삭제"); // TODO: add api call for sign up
+  };
+  return (
+    <div>
+      <BigPost key={post.id} post={post} />
+      <form>
+        <div className="flex flex-row items-center gap-5">
+          <Link to={`/${post.id}/edit`}>
+            <button type="submit" className="button mt-7">
+              수정
+            </button>
+          </Link>
+          <button
+            type="button"
+            className="button mt-7"
+            onClick={handleDeleteClick}
+          >
+            삭제
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 };
-
 export default PostDetailPage;

lionblog-seongil/src/routes/PostEditPage.jsx

@@ -1,5 +1,63 @@
+import posts from "../data/posts";
+import { useParams } from "react-router-dom";
 const PostEditPage = () => {
-  return <div>Post Edit Page</div>;
+  const handleSignUpSubmit = () => {
+    alert("수정 완료");
+  };
+  const postId = useParams().postId;
+  const post = posts.find((post) => post.id === parseInt(postId));
+  return (
+    <div className="flex flex-col items-center w-1/2">
+      <h3 className="font-bold text-2xl">게시글 수정</h3>
+      <form className="form gap-2" onSubmit={handleSignUpSubmit}>
+        <label required type="text" className="label">
+          제목:
+        </label>
+        <input
+          required
+          value={post.title}
+          type="text"
+          id="title"
+          className="input"
+        />
+        <label required className="label">
+          내용:
+        </label>
+        <input
+          className="h-64 input"
+          value={post.content}
+          required
+          type="text"
+          id="content"
+        />
+        <label required className="label">
+          태그:
+        </label>
+        <input
+          className="input"
+          placeholder="태그를 추가하세요"
+          required
+          type="text"
+          id="tag"
+        />
+        <div className="w-full flex flex-row justify-left flex-wrap mt-5">
+          {post.tags.map((tag) => (
+            <div className="gap-0.5">
+              <span key={tag.id} className="tag m-1 -mr-px">
+                #{tag.content}
+              </span>
+              <span className="tag text-xs">X</span>
+            </div>
+          ))}
+        </div>
+        <div className="flex flex-row items-center gap-5">
+          <button type="submit" className="button mt-7">
+            완료
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 };
 
 export default PostEditPage;

lionblog-seongil/src/routes/SignInPage.jsx

@@ -1,5 +1,32 @@
 const SignInPage = () => {
-  return <div>Sign In Page</div>;
+  const handleSignUpSubmit = () => {
+    alert("로그인 하기"); // TODO: add api call for sign up
+  };
+  return (
+    <div className="flex flex-col items-center w-1/2">
+      <h3 className="font-bold text-2xl">회원가입</h3>
+      <form className="form gap-2" onSubmit={handleSignUpSubmit}>
+        <label htmlFor="email" className="label">
+          *이름:
+        </label>
+        <input required type="text" id="username" className="input" />
+
+        <label required htmlFor="username" className="label">
+          *비밀번호:
+        </label>
+        <input required type="password" id="password" className="input" />
+
+        <div className="flex flex-row items-center gap-5">
+          <button type="reset" className="button mt-7">
+            초기화
+          </button>
+          <button type="submit" className="button mt-7">
+            로그인
+          </button>
+        </div>
+      </form>
+    </div>
+  );
 };
 
 export default SignInPage;