Merge pull request #14 from TeamBNBN/FE/articlePreview

[Front-End] feat: ArticlePreview 추가

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>
-        </>
     )
 }

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>
-        </>
     )
 }

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;

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>
+    )
+}

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;  
+}

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 className={styles.createArticle}>
-        <div>
             <header className={styles.header}>
                 <div>
                     <Link to={'/'} className={styles.backButton}>
@@ -35,6 +34,5 @@ export default function CreateArticle() {
                 </form>
             </div>
         </div>
-        </>
     )
 }

frontend/src/components/Article/CreateArticle/CreateArticle.module.css

@@ -1,3 +1,8 @@
+.createArticle {
+    width: 100%;
+}
+
+
 .header {
     padding-left: 20px;
     width: 100%;

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';