From 6d88ec8f7b276ef9da46a0e3b9422ed751d71b0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=EA=B8=B0=EC=98=81?= <wjdrldud98@gmail.com>
Date: Mon, 15 Jul 2024 13:14:24 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B8=80=20=EB=82=B4=EC=9A=A9=20?=
 =?UTF-8?q?=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   | 32 ++++++++++++++++
 .../ArticleDetail/ArticleDetail.module.css    | 38 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
 create mode 100644 frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css

diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx b/frontend/src/components/Article/ArticleDetail/ArticleDetail.jsx
new file mode 100644
index 0000000..bd277ec
--- /dev/null
+++ b/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>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css b/frontend/src/components/Article/ArticleDetail/ArticleDetail.module.css
new file mode 100644
index 0000000..0ce9d5a
--- /dev/null
+++ b/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);
+}
\ No newline at end of file