From c15aa96e47ee4e5908628b75be56dc82bb517418 Mon Sep 17 00:00:00 2001
From: Yeonjeong Choi <makalu171@gmail.com>
Date: Wed, 1 Mar 2023 16:23:53 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=EB=93=9C=20=EB=AD=89=EC=B9=98?=
 =?UTF-8?q?=20=EC=82=AD=EC=A0=9C/=EC=B4=88=EA=B8=B0=ED=99=94/=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=EC=9D=84=20=EB=B3=80=EA=B2=BD=ED=95=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EB=8B=A4.=20(#17)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🧪 LearnsetList test 추가

* ✨ Dashboard에서 카드 뭉치 목록 렌더링
---
 src/components/LearnsetList.vue               | 77 +++++++++++++++++++
 src/components/__tests__/LearnsetList.spec.ts | 36 +++++++++
 src/views/DashboardView.vue                   | 48 +++++++++---
 3 files changed, 150 insertions(+), 11 deletions(-)
 create mode 100644 src/components/LearnsetList.vue
 create mode 100644 src/components/__tests__/LearnsetList.spec.ts

diff --git a/src/components/LearnsetList.vue b/src/components/LearnsetList.vue
new file mode 100644
index 0000000..a13e472
--- /dev/null
+++ b/src/components/LearnsetList.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <v-card class="mx-auto" variant="outlined">
+      <v-card-item>
+        <div>
+          <div class="text-h6 font-weight-bold mb-1">당신의 카드 뭉치</div>
+          <div class="text-caption">
+            학습을 위해 추가된 카드 뭉치 목록입니다.
+          </div>
+        </div>
+      </v-card-item>
+      <v-card-text>
+        <v-list lines="two">
+          <v-list-item
+            v-for="learnset in learnsets"
+            :key="learnset.id"
+            :title="learnset.name"
+            active-color="primary"
+            @click="moveLearnset(learnset.id)"
+          >
+            <template v-slot:append>
+              <BaseButton
+                text=""
+                color="grey-lighten-1"
+                variant="text"
+                @click.stop="deleteLearnset({ id: learnset.id })"
+              >
+                <v-icon icon="mdi-delete"></v-icon>
+              </BaseButton>
+            </template>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BaseButton from '@/components/BaseButton.vue';
+import { MutationTypes } from '@/store/mutations';
+import type { MyStore } from '@/store/types';
+import type { Learnset } from '@/types/interfaces';
+import type { PropType } from 'vue';
+import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+
+defineProps({
+  learnsets: {
+    type: Array as PropType<Array<Learnset>>,
+    required: true,
+  },
+});
+
+const store: MyStore = useStore();
+
+const deleteLearnset = ({ id }: { id: string }) => {
+  const [learnset] = store.getters.learnset(id);
+
+  const deleteLearnset = confirm(
+    `"${learnset.name}" 카드 뭉치를 삭제하시겠습니까?`
+  );
+
+  if (deleteLearnset) {
+    router.push('/');
+    store.commit(MutationTypes.DELETE_LEARNSET, learnset);
+  }
+  return;
+};
+
+const router = useRouter();
+
+const moveLearnset = (id: string) => {
+  router.push(`/learnset/${id}`);
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/__tests__/LearnsetList.spec.ts b/src/components/__tests__/LearnsetList.spec.ts
new file mode 100644
index 0000000..0d0a001
--- /dev/null
+++ b/src/components/__tests__/LearnsetList.spec.ts
@@ -0,0 +1,36 @@
+import vuetify from '@/utils/setupVuetify';
+import { render } from '@testing-library/vue';
+import LearnsetList from '@/components/LearnsetList.vue';
+
+describe(`LearnsetList Component`, () => {
+  it(`카드 뭉치 이름과 삭제 버튼이 렌더링된다.`, () => {
+    const learnsets = [
+      {
+        id: '',
+        name: '카드 뭉치 1',
+        created: 0,
+        cards: [],
+      },
+      {
+        id: '',
+        name: '카드 뭉치 2',
+        created: 0,
+        cards: [],
+      },
+    ];
+
+    const { getByText, getAllByRole } = render(LearnsetList, {
+      global: {
+        plugins: [vuetify],
+      },
+      props: {
+        learnsets,
+      },
+    });
+
+    expect(getByText(learnsets[0].name)).toBeInTheDocument();
+    expect(getByText(learnsets[1].name)).toBeInTheDocument();
+
+    expect(getAllByRole('button').length).toBe(2);
+  });
+});
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 46b942d..97784da 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -1,14 +1,31 @@
 <template>
-  <div class="d-flex">
-    <div class="pa-10">
-      <BaseButton text="카드 뭉치 추가하기" @click="importLearnset" />
-      <AddLearnsetModal
-        :learnset-title="mdFile.name"
-        title="카드 뭉치 추가하기"
-        ref="modal"
-        @add-learnset="addLearnset"
-      />
+  <v-container class="container mb-10">
+    <div class="d-flex flex-column fill-height justify-center align-center">
+      <h1 class="text-h4 font-weight-black mb-4">FlashMD</h1>
+      <h4 class="subheading">
+        Markdown으로 작성된 파일로 flash card를 만들어 학습해 보세요!
+      </h4>
     </div>
+  </v-container>
+  <div class="d-flex flex-column w-100 align-center">
+    <h5 class="font-weight-thin mb-2">
+      아래 버튼을 클릭해 카드 뭉치를 추가하거나 목록에서 카드 뭉치를 선택해
+      학습을 시작하세요.
+    </h5>
+    <BaseButton text="카드 뭉치 추가하기" @click="importLearnset" />
+    <AddLearnsetModal
+      :learnset-title="mdFile.name"
+      title="카드 뭉치 추가하기"
+      ref="modal"
+      @add-learnset="addLearnset"
+    />
+
+    <v-divider></v-divider>
+    <v-container>
+      <v-sheet class="pa-6 mx-auto" max-width="1000">
+        <LearnsetList v-if="learnsets" :learnsets="learnsets" />
+      </v-sheet>
+    </v-container>
   </div>
 </template>
 
@@ -18,6 +35,7 @@ import type { File } from '@/types/interfaces';
 
 import BaseButton from '@/components/BaseButton.vue';
 import AddLearnsetModal from '@/components/AddLearnsetModal.vue';
+import LearnsetList from '@/components/LearnsetList.vue';
 
 import { ref, reactive } from 'vue';
 
@@ -28,8 +46,11 @@ import { MutationTypes } from '@/store/mutations';
 import { useMarkdownIt } from '@/plugins/markdownit';
 
 import { useRouter } from 'vue-router';
+import type { MyStore } from '@/store/types';
 
-const store = useStore();
+const store: MyStore = useStore();
+
+const learnsets = store.state.learnsets;
 
 const md = useMarkdownIt();
 
@@ -75,4 +96,9 @@ const addLearnset = (name: string) => {
 };
 </script>
 
-<style scoped></style>
+<style scoped>
+.container {
+  height: 300px;
+  background-color: #d1c4e9;
+}
+</style>