diff --git a/src/assets/base.css b/src/assets/base.css
index e99c4f2..156a713 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -89,7 +89,6 @@ body {
color 0.5s,
background-color 0.5s;
line-height: 1.6;
- font-size: 15px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -116,4 +115,9 @@ textarea {
border-radius: 8px;
padding: 8px 12px;
background-color: var(--color-background);
+ font-size: 16px;
+}
+
+p {
+ white-space: pre;
}
diff --git a/src/components/article/ArticleDetail.vue b/src/components/article/ArticleDetail.vue
index 6cc296a..225fc3b 100644
--- a/src/components/article/ArticleDetail.vue
+++ b/src/components/article/ArticleDetail.vue
@@ -3,16 +3,41 @@ import { ref } from 'vue';
import { useRoute } from 'vue-router';
import BoardHeader from './BoardHeader.vue';
import { getArticle } from '@/api/article';
-import CommentList from '@/components/article/CommentList.vue';
+import CommentArea from './CommentArea.vue';
const route = useRoute();
const id = Number(route.params.id);
const article = ref({});
+const comments = ref([]);
getArticle(id, ({ data }) => {
article.value = data;
});
+
+// FIXME: remove mock data
+setTimeout(() => {
+ article.value = {
+ title: '제목',
+ text: '내용',
+ author: '작성자',
+ date: '2024-04-11 13:12:14',
+ };
+ comments.value = [
+ {
+ id: 1,
+ nickname: '닉네임',
+ date: '2024-04-11 13:12:14',
+ text: '댓글 내용',
+ },
+ {
+ id: 2,
+ nickname: '닉네임',
+ date: '2024-04-11 13:12:14',
+ text: '댓글 내용',
+ },
+ ];
+}, 100);
@@ -26,8 +51,7 @@ getArticle(id, ({ data }) => {
{{ article.text }}
-
-
+
diff --git a/src/components/article/ArticleForm.vue b/src/components/article/ArticleForm.vue
index 0ef266d..b7b514a 100644
--- a/src/components/article/ArticleForm.vue
+++ b/src/components/article/ArticleForm.vue
@@ -89,12 +89,12 @@ form {
}
#title {
- font-size: 1.25rem;
+ font-size: 20px;
font-weight: bold;
}
#text {
- font-size: 1rem;
+ font-size: 16px;
min-height: 200px;
}
@@ -106,7 +106,7 @@ form {
.errorMessage {
color: var(--color-error);
- font-size: 0.85rem;
+ font-size: 14px;
}
button {
@@ -116,7 +116,7 @@ button {
border: none;
border-radius: 8px;
cursor: pointer;
- font-size: 1rem;
+ font-size: 16px;
font-weight: bold;
transition:
scale 0.25s,
diff --git a/src/components/article/ArticleList.vue b/src/components/article/ArticleList.vue
index 4fe4736..fa74bbe 100644
--- a/src/components/article/ArticleList.vue
+++ b/src/components/article/ArticleList.vue
@@ -2,6 +2,7 @@
import { getArticles } from '@/api/article';
import { ref } from 'vue';
import { RouterLink } from 'vue-router';
+import FilledButton from '../common/FilledButton.vue';
const articles = ref([]);
@@ -11,7 +12,9 @@ getArticles(({ data }) => (articles.value = data));
-
@@ -47,14 +50,7 @@ header {
.write {
padding: 8px 16px;
border-radius: 12px;
- background-color: var(--color-primary);
- color: var(--color-background);
- text-decoration: none;
- transition: scale 0.25s;
-}
-
-.write:active {
- scale: 0.95;
+ font-size: 16px;
}
.title {
@@ -65,7 +61,7 @@ header {
}
.title h2 {
- font-size: 1.1rem;
+ font-size: 18px;
font-weight: normal;
}
@@ -107,7 +103,7 @@ header {
.info {
display: flex;
gap: 20px;
- font-size: 0.8rem;
+ font-size: 14px;
color: var(--color-text-secondary);
}
diff --git a/src/components/article/BoardHeader.vue b/src/components/article/BoardHeader.vue
index 26b6e4e..e3c2d04 100644
--- a/src/components/article/BoardHeader.vue
+++ b/src/components/article/BoardHeader.vue
@@ -44,6 +44,7 @@ header {
display: flex;
align-items: center;
gap: 12px;
+ font-size: 14px;
color: var(--color-text-secondary);
}
diff --git a/src/components/article/CommentArea.vue b/src/components/article/CommentArea.vue
new file mode 100644
index 0000000..33c235a
--- /dev/null
+++ b/src/components/article/CommentArea.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
diff --git a/src/components/article/CommentForm.vue b/src/components/article/CommentForm.vue
new file mode 100644
index 0000000..95fd251
--- /dev/null
+++ b/src/components/article/CommentForm.vue
@@ -0,0 +1,82 @@
+
+
+
+
+
+
+
diff --git a/src/components/article/CommentItem.vue b/src/components/article/CommentItem.vue
new file mode 100644
index 0000000..bdaf265
--- /dev/null
+++ b/src/components/article/CommentItem.vue
@@ -0,0 +1,50 @@
+
+
+
+
-
+
+
{{ comment.text }}
+
+
+
+
diff --git a/src/components/article/CommentList.vue b/src/components/article/CommentList.vue
index 678e562..81e0ea0 100644
--- a/src/components/article/CommentList.vue
+++ b/src/components/article/CommentList.vue
@@ -1,41 +1,18 @@
-
-
댓글
-
-
- -
-
-
{{ comment.nickname }}
-
{{ comment.date }}
-
-
-
+
diff --git a/src/components/common/FilledButton.vue b/src/components/common/FilledButton.vue
new file mode 100644
index 0000000..1d007ae
--- /dev/null
+++ b/src/components/common/FilledButton.vue
@@ -0,0 +1,56 @@
+
+
+
+
+
+
+
diff --git a/src/components/common/TextButton.vue b/src/components/common/TextButton.vue
new file mode 100644
index 0000000..7fc8ada
--- /dev/null
+++ b/src/components/common/TextButton.vue
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
diff --git a/src/router/index.js b/src/router/index.js
index aa56cfd..f8903b4 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -19,12 +19,12 @@ const router = createRouter({
component: () => import('@/components/article/ArticleList.vue'),
},
{
- path: '/article/:id',
+ path: 'article/:id',
name: 'article',
component: () => import('@/components/article/ArticleDetail.vue'),
},
{
- path: '/article/form',
+ path: 'article/form',
name: 'article-create',
component: () => import('@/components/article/ArticleForm.vue'),
},
+ 댓글 {{ comments.length }} +
+