Merge pull request #155 from Docent-Inc/feature/vue-query

Feature/vue-query - 이미지 기본 지정 및 콘솔 제거
Docent-Inc · Jan 18, 2024 · 3de291e · 3de291e
2 parents eaff15b + d610582
commit 3de291e
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 20 deletions.
diff --git a/components/diary/BoardItems.vue b/components/diary/BoardItems.vue
@@ -71,6 +71,7 @@ const {
     isFetching,
     data: data,
     fetchNextPage,
+    refetch,
 } = useInfiniteQuery({
     queryKey: ["mypage", props.type],
     queryFn: ({ pageParam = 1 }) => getMypageList(pageParam),
@@ -87,16 +88,22 @@ function getMypageList(pageParam) {
 }
 
 function loadMore() {
-    console.log(
-        ">>Load More - ",
-        hasNextPage.value,
-        `${list.value.length}/${totalCounts.value}`,
-    );
+    // console.log(
+    //     ">>Load More - ",
+    //     hasNextPage.value,
+    //     `${list.value.length}/${totalCounts.value}`,
+    // );
     if (isLoading.value || isFetching.value || !hasNextPage.value) return;
 
-    console.log(">>Load More - OK ", isLoading.value, isFetching.value);
+    // console.log(">>Load More - OK ", isLoading.value, isFetching.value);
     fetchNextPage();
 }
+
+//// 삭제, 생성 시 Refetch
+const { $eventBus } = useNuxtApp();
+$eventBus.$on("refetch", ({ path }) => {
+    if (path.includes("/mypage")) refetch();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -118,8 +125,10 @@ function loadMore() {
     }
 
     .item {
-        flex: 0 0 calc(50% - 3px);
+        flex: 0 0 auto;
+        width: calc(50% - 3px);
         height: auto;
+        aspect-ratio: 1/1;
         box-sizing: border-box;
 
         &.empty {

diff --git a/pages/diary/[id].vue b/pages/diary/[id].vue
@@ -328,10 +328,10 @@ export default {
                 this.$eventBus.$emit("onConfirmModal", {
                     title: "삭제되었습니다.",
                     callback: () => {
+                        this.$eventBus.$emit("refetch", { path: "/mypage" });
                         this.$router.back();
                     },
                 });
-                this.deleteOptimisticRecord(this.diary);
             } else {
                 // 실패 시, 문구 띄우고 새로고침
                 this.$eventBus.$emit("onConfirmModal", {

diff --git a/pages/edit/record.vue b/pages/edit/record.vue
@@ -98,14 +98,14 @@
             </div>
         </div>
     </form>
-<!--    <Toast-->
-<!--        v-if="isMakingProcess"-->
-<!--        @click="isMakingProcess = false"-->
-<!--        text="기록을 토대로 그림을 생성하고 있어요!"-->
-<!--        subText="약 15초 정도 기다려주시면 그림과 기록이 저장돼요."-->
-<!--        :top="60"-->
-<!--        :align="'center'"-->
-<!--    />-->
+    <!--    <Toast-->
+    <!--        v-if="isMakingProcess"-->
+    <!--        @click="isMakingProcess = false"-->
+    <!--        text="기록을 토대로 그림을 생성하고 있어요!"-->
+    <!--        subText="약 15초 정도 기다려주시면 그림과 기록이 저장돼요."-->
+    <!--        :top="60"-->
+    <!--        :align="'center'"-->
+    <!--    />-->
 </template>
 <script>
 import { mapState, mapActions } from "pinia";
@@ -114,7 +114,6 @@ import { useMypageStore } from "~/store/mypage";
 import Header from "~/components/common/Header.vue";
 import Toast from "~/components/common/Toast.vue";
 
-
 export default {
     components: {
         Header,
@@ -264,15 +263,21 @@ export default {
                 content: this.content,
             };
             // console.log(reqBody);
-            this.createRecords(this.type, reqBody, this.typeName);
-            setTimeout(() => {
+            const isSuccess = this.createRecords(
+                this.type,
+                reqBody,
+                this.typeName,
+            );
+            if (isSuccess) {
                 this.$router.push({
                     path: "/mypage",
                     query: {
                         tab: this.typeNameEN,
                     },
                 });
-            }, 1000);
+                this.$eventBus.$emit("refetch", { path: "/mypage" });
+            }
+
             if (this.type === 3) return;
             // 꿈, 일기, 메모
             this.isMakingProcess = true;

diff --git a/pages/memo/[id].vue b/pages/memo/[id].vue
@@ -216,6 +216,7 @@ export default {
                 this.$eventBus.$emit("onConfirmModal", {
                     title: "삭제되었습니다.",
                     callback: () => {
+                        this.$eventBus.$emit("refetch", { path: "/mypage" });
                         this.$router.back();
                     },
                 });

diff --git a/store/mypage.ts b/store/mypage.ts
@@ -93,17 +93,23 @@ export const useMypageStore = defineStore("mypage", {
                     this.content = "";
                     this.isCreating = false;
                     // console.log(this.recordRes.data.memo);
+
+                    return true;
                 } else if (this.recordRes.success) {
                     // this.list.unshift(this.recordRes.data.diary);
                     this.title = "";
                     this.content = "";
                     this.isCreating = false;
+
+                    return true;
                 } else {
                     window.alert(
                         "기록을 생성하지 못했어요. 다시 시도해보시겠어요?",
                     );
                 }
                 this.loadingTab = -1;
+
+                return false;
             } catch (error) {
                 console.error(error);
             }