Merge pull request #7 from TeamBNBN/fe/ArticleDetail

[Front-end] feat: 글 내용 추가

frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx

@@ -0,0 +1,32 @@
+import { Link } from "react-router-dom";
+import styles from './ArticleDetail.module.css'
+import ArticleDetailAnswer from "./ArticleDetailAnswer/ArticleDetailAnswer";
+
+export default function ArticleDetail() {
+
+    const title = '헷갈리는게 있어요';
+    const author = '이재용';
+    const content = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perferendis sed dolorem vitae?';
+    return (
+        <>
+        <div className={styles.articleDetail}>
+            <header>
+                <div>
+                    <Link to={'/'} className={styles.backButton}>
+                        <div>-</div>
+                        <div className={styles.backText}>Q&A</div>
+                    </Link>
+                </div>
+                <div>
+                    <div className={styles.title}>{title}</div>
+                    <div className={styles.author}>{author}</div>
+                </div>
+            </header>
+            <div>
+                <p className={styles.content}>{content}</p>
+            </div>
+            <ArticleDetailAnswer />
+        </div>
+        </>
+    )
+}

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

@@ -0,0 +1,38 @@
+.articleDetail {
+    width: 100%;
+    background-color: var(--background-default);
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.articleDetail > * {
+    padding-bottom: 40px;
+}
+
+.backButton {
+    display: flex;
+    color: var(--text-color-secondary);
+    flex-wrap: nowrap;
+    line-height: 1.2;
+    font-weight: 400;
+    font-size: 20px;
+    padding-bottom: 8px;
+}
+
+.backText {
+    padding-left: 4px;
+}
+
+.title {
+    font-size: 32px;
+    line-height: 1.2;
+    font-weight: 800;
+}
+
+.author {
+    font-size: 14px;
+    font-weight: 200;
+    line-height: 1.4;
+    color: var(--text-color-secondary);
+}