Feat: Add article component

src/components/article/ArticleDetail.vue

@@ -1,139 +1,55 @@
 <script setup>
 import { ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { getArticle, updateArticle, deleteArticle } from '@/api/article';
+import { useRoute } from 'vue-router';
+import BoardHeader from './BoardHeader.vue';
+import { getArticle } from '@/api/article';
 
 const route = useRoute();
-const router = useRouter();
 
-const id = ref(route.query.id);
+const id = route.params.id;
+const article = ref({});
 
-/*
-  DOM이 mounted된 상태에서 아직 서버에서 데이터가 안 온 경우
-  Book의 데이터를 화면에 표시 할 수 없어서 error 발생하므로 초기 설정을 한다.
-*/
-const article = ref({
-  id: '',
-  title: '',
-  text: '',
-  name: '',
-  authorId: '',
-  date: '',
+// function mockAPI() {
+//   return new Promise((resolve) => {
+//     setTimeout(() => {
+//       resolve({
+//         id,
+//         title: `Article title ${id}`,
+//         text: 'Article text 1\n\nasdfasdf        asdf',
+//         author: 'asdf',
+//         comments: [],
+//         date: '2024-04-05 13:23',
+//       });
+//     });
+//   });
+// }
+
+// mockAPI().then((result) => (article.value = result));
+
+getArticle(id, ({ data }) => {
+  article.value = data;
 });
-
-//setup(init)단계이므로 detailBook() 호출해서 서버에서 데이터 전송 받기
-getArticle(
-  id.value,
-  ({ data }) => {
-    article.value = data;
-  },
-  (error) => {
-    alert(error);
-  }
-);
-
-//초기에는 Detail화면 표시 하기 위해 readonly='readonly' 로 표시
-//수정일 경우 readonly='' 표시하기 위해 isReadonly=false로
-const isReadonly = ref(true);
-
-function removeHandler() {
-  // console.log('BookDetail.remove.......................')
-  // books.value = books.value.filter((item) => isbn.value != item.isbn)
-  // console.log('BookDetail.remove.......................books:', books.value)
-  deleteArticle(
-    id.value,
-    ({ data }) => {
-      console.log('deleteArticle................result:', data);
-      alert('삭제 성공');
-      moveHandler();
-    },
-    (error) => {
-      alert('삭제 실패');
-    }
-  );
-  // moveHandler()
-}
-
-function moveHandler() {
-  router.push({
-    name: 'article-list',
-  });
-}
-
-function updateHandler() {
-  if (!isReadonly.value) {
-    //isReadonly가 false인 상황은 update 상황
-    updateArticle(
-      article.value,
-      id,
-      ({ data }) => {
-        console.log('updateArticl................result:', data);
-        alert('수정 성공');
-      },
-      (error) => {
-        alert('수정 실패');
-      }
-    );
-  }
-  isReadonly.value = !isReadonly.value;
-}
 </script>
 
 <template>
-  <div>
-    <table class="table table-bordered">
-      <tbody>
-        <tr>
-          <th>게시판 번호</th>
-          <td><input type="text" v-model.lazy="book.isbn" readonly="readonly" /></td>
-        </tr>
-        <tr>
-          <th>제목</th>
-          <td><input type="text" v-model.lazy="book.title" :readonly="isReadonly" /></td>
-        </tr>
-        <tr>
-          <th>내용</th>
-          <td><input type="text" v-model.lazy="book.author" :readonly="isReadonly" /></td>
-        </tr>
-        <tr>
-          <th>작성자</th>
-          <td><input type="text" v-model.lazy="book.price" :readonly="isReadonly" /></td>
-        </tr>
-        <tr>
-          <th>아이디</th>
-          <td><input type="text" v-model.lazy="book.price" :readonly="isReadonly" /></td>
-        </tr>
-        <tr>
-          <th>날짜</th>
-          <td><input type="text" v-model.lazy="book.price" :readonly="isReadonly" /></td>
-        </tr>
-        <!-- <tr>
-          <th colspan="2">책 정보</th>
-        </tr>
-        <tr>
-          <td colspan="2">
-            <textarea
-              cols="45"
-              rows="10"
-              v-model.lazy="book.describ"
-              :readonly="isReadonly"
-            ></textarea>
-          </td>
-        </tr> -->
-        <tr>
-          <td colspan="2" class="text-center">
-            <button class="btn btn-outline-primary m-1" @click="updateHandler">수정</button>
-            <button class="btn btn-outline-primary m-1" @click="moveHandler">목록</button>
-            <button class="btn btn-outline-primary m-1" @click="removeHandler">삭제</button>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
+  <BoardHeader>
+    <template #title>
+      <h1>{{ article.title }}</h1>
+    </template>
+    <template #info>
+      <div class="author">{{ article.author }}</div>
+      <div class="date">{{ article.date }}</div>
+    </template>
+  </BoardHeader>
+  <p>{{ article.text }}</p>
 </template>
 
 <style scoped>
-input:read-only {
-  background-color: lightgray;
+p {
+  margin: 20px;
+  line-height: 1.6;
+  padding-bottom: 20px;
+  border-bottom: 1px solid var(--color-border);
+  white-space: pre;
 }
 </style>