From 20b0f4c3dc0eb8940e9a84177f0a94b34d3bce6d Mon Sep 17 00:00:00 2001
From: autarkist <autarkist@naver.com>
Date: Thu, 1 Feb 2024 23:31:12 +0900
Subject: [PATCH] blog #4

---
 .../{girl-8435329_1280.png => girl.png}       | Bin
 src/app/blog/blog.module.css                  |  11 ++++++-
 src/app/blog/page.jsx                         |  16 ++++++++---
 src/components/postCard/postCard.jsx          |  18 +++++++++++-
 src/components/postCard/postcard.module.css   |  27 +++++++++++++++++-
 5 files changed, 65 insertions(+), 7 deletions(-)
 rename public/static/{girl-8435329_1280.png => girl.png} (100%)

diff --git a/public/static/girl-8435329_1280.png b/public/static/girl.png
similarity index 100%
rename from public/static/girl-8435329_1280.png
rename to public/static/girl.png
diff --git a/src/app/blog/blog.module.css b/src/app/blog/blog.module.css
index b7df57d6c..f02433a08 100644
--- a/src/app/blog/blog.module.css
+++ b/src/app/blog/blog.module.css
@@ -1 +1,10 @@
-.container{}
\ No newline at end of file
+.container{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.post {
+    width: 33%;
+}
\ No newline at end of file
diff --git a/src/app/blog/page.jsx b/src/app/blog/page.jsx
index 149b8745e..44c415cb1 100644
--- a/src/app/blog/page.jsx
+++ b/src/app/blog/page.jsx
@@ -4,10 +4,18 @@ import styles from "./blog.module.css";
 const BlogPage = () => {
   return (
     <div className={styles.container}>
-      <PostCard />
-      <PostCard />
-      <PostCard />
-      <PostCard />
+      <div className={styles.post}>
+        <PostCard />
+      </div>
+      <div className={styles.post}>
+        <PostCard />
+      </div>
+      <div className={styles.post}>
+        <PostCard />
+      </div>
+      <div className={styles.post}>
+        <PostCard />
+      </div>
     </div>
   );
 };
diff --git a/src/components/postCard/postCard.jsx b/src/components/postCard/postCard.jsx
index 9366f40df..85b3f8405 100644
--- a/src/components/postCard/postCard.jsx
+++ b/src/components/postCard/postCard.jsx
@@ -1,5 +1,21 @@
+import Link from "next/link"
+import Image from "next/image"
+import styles from "./postcard.module.css"
+
 const PostCard = () => {
-    return <div className={}>PostCard</div>;
+    return <div className={styles.container}>
+        <div className={styles.top}>
+            <div className={styles.imgContainer}>
+                <Image src="/static/girl.png" fill alt="" className={styles.img} />
+            </div>
+            <span className={styles.date}>2024.02.02</span>
+        </div>
+        <div className={styles.bottom}>
+            <h1 className={styles.title}>Title</h1>
+            <p className={styles.desc}>Desc</p>
+            <Link href="/blog/post">READ MORE</Link>
+        </div>
+    </div>;
 };
 
 export default PostCard;
\ No newline at end of file
diff --git a/src/components/postCard/postcard.module.css b/src/components/postCard/postcard.module.css
index b7df57d6c..1debb91b5 100644
--- a/src/components/postCard/postcard.module.css
+++ b/src/components/postCard/postcard.module.css
@@ -1 +1,26 @@
-.container{}
\ No newline at end of file
+.container{
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-bottom: 40px;
+    margin-top: 10px;
+}
+
+.top{
+    display: flex;
+}
+
+.imgContainer{
+    position: relative;
+    width: 90%;
+    height: 300px;
+}
+
+.img{
+    object-fit: cover;
+}
+
+.date {
+    font-size: 12px;
+    transform: rotate(270deg);
+}
\ No newline at end of file