Merge pull request #80 from innovationacademy-kr/fe/dev/refactor_v4/#75

[FE] FIX: home 로딩 시 로딩 애니메이션 보여주기 #75
innovationacademy-kr · Dec 29, 2023 · 7c56336 · 7c56336
2 parents 7211d7f + d1f73a9
commit 7c56336
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 20 deletions.
diff --git a/src/components/common/LoadingAnimation.vue b/src/components/common/LoadingAnimation.vue
@@ -22,7 +22,7 @@
   height: 6px;
   border-radius: 50%;
   background-color: var(--gray-soft);
-  animation: loading 1.2s infinite ease-in;
+  animation: loading 1.6s infinite ease-in-out;
   animation-delay: 0.4s;
 }
 .loading:before,
@@ -36,7 +36,7 @@
   background-color: var(--gray-soft);
   top: 50%;
   transform: translateY(-50%);
-  animation: loading 1.2s infinite linear;
+  animation: loading 1.6s infinite ease-in-out;
 }
 .loading:before {
   left: -12px;

diff --git a/src/components/home/FoldCard.vue b/src/components/home/FoldCard.vue
@@ -3,7 +3,6 @@ import { ref, watch } from "vue";
 import ChevronIcon from "@/components/icons/IconChevron.vue";
 import CircleProgress from "@/components/home/CircleProgress.vue";
 import LoadingAnimationVue from "@/components/common/LoadingAnimation.vue";
-import { useMonthLogStore } from "@/stores/monthlog";
 import { useHomeStore } from "@/stores/home";
 
 const props = defineProps<{
@@ -12,13 +11,15 @@ const props = defineProps<{
   isMonth?: boolean;
 }>();
 
-const { getGoalDateHour, getGoalMonthHour, setGoalDateHour, setGoalMonthHour } =
-  useHomeStore();
-
-const monthStore = useMonthLogStore();
-const { showIsLoading } = monthStore;
-const isLoading = ref(showIsLoading());
+const {
+  getGoalDateHour,
+  getGoalMonthHour,
+  setGoalDateHour,
+  setGoalMonthHour,
+  getIsLoading,
+} = useHomeStore();
 
+const isLoading = ref(getIsLoading());
 const isOpen = ref(false);
 const goalTimeSet = () => {
   if (props.isMonth) {
@@ -31,7 +32,7 @@ const goalTimeSet = () => {
 const goalTime = ref(goalTimeSet());
 const colorSet = ref(props.isMonth);
 
-watch(showIsLoading, (val) => {
+watch(getIsLoading, (val) => {
   isLoading.value = val;
 });
 

diff --git a/src/components/home/FoldCardCompact.vue b/src/components/home/FoldCardCompact.vue
@@ -2,7 +2,7 @@
 import { ref, watch } from "vue";
 import ChevronIcon from "@/components/icons/IconChevron.vue";
 import LoadingAnimationVue from "@/components/common/LoadingAnimation.vue";
-import { useMonthLogStore } from "@/stores/monthlog";
+import { useHomeStore } from "@/stores/home";
 
 const props = defineProps<{
   hour: number;
@@ -11,13 +11,12 @@ const props = defineProps<{
   acceptedMin: number;
 }>();
 
-const monthStore = useMonthLogStore();
-const { showIsLoading } = monthStore;
-const isLoading = ref(showIsLoading());
+const { getIsLoading } = useHomeStore();
+const isLoading = ref(getIsLoading());
 
 const isOpen = ref(false);
 
-watch(showIsLoading, (val) => {
+watch(getIsLoading, (val) => {
   isLoading.value = val;
 });
 

diff --git a/src/stores/home.ts b/src/stores/home.ts
@@ -276,9 +276,7 @@ export const useHomeStore = defineStore("home", () => {
 
   const apiAccTimes = async () => {
     try {
-      if (!getStorage("weeklyAccTime")) {
-        isLoading.value = true;
-      }
+      isLoading.value = true;
       const { data: accTimes } = await getAccTimes();
       accDate.value = accTimes.todayAccumulationTime;
       accMonth.value = calcSecToTime(accTimes.monthAccumulationTime);

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -77,8 +77,8 @@ watch(getNumberOfPeople, () => {
   numberOfPeople.value = getNumberOfPeople();
 });
 
-watch(getIsLoading, () => {
-  isLoading.value = getIsLoading();
+watch(getIsLoading, (val) => {
+  isLoading.value = val;
 });
 
 watch(getUserInfo, () => {