Design: Change article styles

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

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);
 </script>
 
 <template>
@@ -26,8 +51,7 @@ getArticle(id, ({ data }) => {
     </template>
   </BoardHeader>
   <p>{{ article.text }}</p>
-
-  <CommentList :id="id"></CommentList>
+  <CommentArea :article-id="id" :comments="comments" />
 </template>
 
 <style scoped>
@@ -36,6 +60,5 @@ p {
   line-height: 1.6;
   padding-bottom: 20px;
   border-bottom: 1px solid var(--color-border);
-  white-space: pre;
 }
 </style>

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,

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));
 <template>
   <header>
     <h1>게시판</h1>
-    <RouterLink class="write" :to="{ name: 'article-create' }">글쓰기</RouterLink>
+    <RouterLink :to="{ name: 'article-create' }">
+      <FilledButton primary class="write">글쓰기</FilledButton>
+    </RouterLink>
   </header>
   <ul>
     <li v-for="article in articles" :key="article.id">
@@ -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);
 }
 </style>

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

src/components/article/CommentArea.vue

@@ -7,13 +7,24 @@ const { articleId, comments } = defineProps({ articleId: Number, comments: Array
 
 <template>
   <div class="comments">
-    <h2>댓글</h2>
+    <h2>
+      댓글 <span>{{ comments.length }}</span>
+    </h2>
     <CommentForm :article-id="articleId" />
     <CommentList :comments="comments" />
   </div>
 </template>
 
 <style scoped>
+h2 {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+h2 span {
+  color: var(--color-primary);
+}
+
 .comments {
   display: flex;
   flex-direction: column;

src/components/article/CommentForm.vue

@@ -52,6 +52,7 @@ form {
 }
 
 input {
+  padding: 12px;
   border: 1px solid var(--color-border);
 }
 

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'),
         },