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 ( + <> +
+
+
+ +
-
+
Q&A
+ +
+
+
{title}
+
{author}
+
+
+
+

{content}

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