From 52cb0c5b7d788b1282a0108dd2a4961649cbdbe4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Tue, 16 Jul 2024 09:19:47 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ArticlePreview=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Article/ArticleDetail/ArticleDetail.jsx   |  2 --
 .../ArticleDetailAnswer.jsx                   |  2 --
 .../ArticleDetailAnswer.module.css            |  1 +
 .../Article/ArticlePreview/ArticlePreview.jsx | 19 +++++++++++
 .../ArticlePreview/ArticlePreview.module.css  | 32 +++++++++++++++++++
 .../Article/CreateArticle/CreateArticle.jsx   |  4 +--
 .../CreateArticle/CreateArticle.module.css    |  5 +++
 frontend/src/components/Article/index.js      |  1 +
 8 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
 create mode 100644 frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css

diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
index bd277ec..86b6486 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
@@ -8,7 +8,6 @@ export default function ArticleDetail() {
     const author = '이재용';
     const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
     return (
-        <>
         <div className={styles.articleDetail}>
             <header>
                 <div>
@@ -27,6 +26,5 @@ export default function ArticleDetail() {
             </div>
             <ArticleDetailAnswer />
         </div>
-        </>
     )
 }
\ No newline at end of file
diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx
index d18d6ce..3e75a60 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx
@@ -3,7 +3,6 @@ import styles from './ArticleDetailAnswer.module.css'
 
 export default function ArticleDetailAnswer () {
     return (
-        <>
         <div className={styles.answer}>
             <div className={styles.answerHeader}>
                 <div>--</div>
@@ -11,6 +10,5 @@ export default function ArticleDetailAnswer () {
             </div>
             <div className={styles.content}>Lorem ipsum dolor sit amet.</div>
         </div>
-        </>
     )
 }
\ No newline at end of file
diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
index d156882..f48c29a 100644
--- a/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
+++ b/frontend/src/components/Article/ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.module.css
@@ -1,4 +1,5 @@
 .answer {
+    width: 100%;
     border: 1px solid var(--border-color);
     border-radius: 16px;
     padding: 12px 16px;
diff --git a/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
new file mode 100644
index 0000000..c08ce27
--- /dev/null
+++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.jsx
@@ -0,0 +1,19 @@
+import { Link } from "react-router-dom"
+import styles from "./ArticlePreview.module.css"
+
+export default function ArticlePreview () {
+   // TODO: 아이콘 변경
+    return (
+        <div className={styles.wrapper}>
+            <div className={styles.header}>
+                <div className={styles.title}>공지사항</div>
+                <Link to="/">ICON</Link>
+            </div>
+            <div className={styles.main}>
+                <div className={styles.content}>3주차 수업 휴강 공지</div>
+                <div className={styles.content}>정보처리기사 어쩌구</div>
+                <div className={styles.content}>첫 수업 준비사항</div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css b/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css
new file mode 100644
index 0000000..ffb7ece
--- /dev/null
+++ b/frontend/src/components/Article/ArticlePreview/ArticlePreview.module.css
@@ -0,0 +1,32 @@
+.wrapper {
+    width: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 20px;
+    background-color: var(--background-default);
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24px;
+}
+
+.title {
+    font-size: 24px;
+    line-height: 1.2;
+    font-weight: 700;
+}
+
+.main {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 12px 0;
+}
+
+.content {
+    font-size: 16px;
+    line-height: 1.4;
+    font-weight: 400;  
+}
\ No newline at end of file
diff --git a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx
index d13d04c..49cefd5 100644
--- a/frontend/src/components/Article/CreateArticle/CreateArticle.jsx
+++ b/frontend/src/components/Article/CreateArticle/CreateArticle.jsx
@@ -5,8 +5,7 @@ import styles from "./CreateArticle.module.css"
 export default function CreateArticle() {
     // TODO: 입력 크기에 따라 반응형으로 textarea 크기 변경 
     return (
-        <>
-        <div>
+        <div className={styles.createArticle}>
             <header className={styles.header}>
                 <div>
                     <Link to={'/'} className={styles.backButton}>
@@ -35,6 +34,5 @@ export default function CreateArticle() {
                 </form>
             </div>
         </div>
-        </>
     )
 }
\ No newline at end of file
diff --git a/frontend/src/components/Article/CreateArticle/CreateArticle.module.css b/frontend/src/components/Article/CreateArticle/CreateArticle.module.css
index 5472226..12e7427 100644
--- a/frontend/src/components/Article/CreateArticle/CreateArticle.module.css
+++ b/frontend/src/components/Article/CreateArticle/CreateArticle.module.css
@@ -1,3 +1,8 @@
+.createArticle {
+    width: 100%;
+}
+
+
 .header {
     padding-left: 20px;
     width: 100%;
diff --git a/frontend/src/components/Article/index.js b/frontend/src/components/Article/index.js
index 903b100..4e82aa4 100644
--- a/frontend/src/components/Article/index.js
+++ b/frontend/src/components/Article/index.js
@@ -1,3 +1,4 @@
 export { default as ArticleDetail } from './ArticleDetail/ArticleDetail.jsx';
 export { default as ArticleDetailAnswer } from './ArticleDetail/ArticleDetailAnswer/ArticleDetailAnswer.jsx';
 export { default as CreateArticle } from './CreateArticle/CreateArticle.jsx';
+export { default as ArticlePreview } from './ArticlePreview/ArticlePreview.jsx';
\ No newline at end of file