From d1f73a9d6442428faab960e0696ab9575d996cf1 Mon Sep 17 00:00:00 2001
From: 42inshin <inshin@student.42seoul.kr>
Date: Fri, 29 Dec 2023 15:25:18 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20FIX:=20home=20=EB=A1=9C=EB=94=A9=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=A1=9C=EB=94=A9=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=B3=B4=EC=97=AC=EC=A3=BC=EA=B8=B0=20#75?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/LoadingAnimation.vue |  4 ++--
 src/components/home/FoldCard.vue           | 17 +++++++++--------
 src/components/home/FoldCardCompact.vue    |  9 ++++-----
 src/stores/home.ts                         |  4 +---
 src/views/HomeView.vue                     |  4 ++--
 5 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/common/LoadingAnimation.vue b/src/components/common/LoadingAnimation.vue
index a58c9ec..9be4762 100644
--- 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
index dd6d048..cfa0450 100644
--- 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
index 49c0cf0..7d21ccf 100644
--- 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
index 4651fb5..413680b 100644
--- 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
index 9a05d97..2f55d45 100644
--- 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, () => {