Merge pull request #82 from innovationacademy-kr/develop

v3: Develop to main #75
innovationacademy-kr · Dec 31, 2023 · 6463b37 · 6463b37
2 parents 813ad58 + d7dd74e
commit 6463b37
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 16 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
@@ -6,6 +6,7 @@ import { saveStorage, getStorage } from "@/utils/localStorage";
 
 export const useHomeStore = defineStore("home", () => {
   const isLoading = ref(false);
+  const isMainInfoLoading = ref(false);
 
   const userInfo = ref({
     login: "",
@@ -84,6 +85,10 @@ export const useHomeStore = defineStore("home", () => {
     return isLoading.value;
   };
 
+  const getIsMainInfoLoading = () => {
+    return isMainInfoLoading.value;
+  };
+
   const getUserInfo = () => {
     return userInfo.value;
   };
@@ -172,6 +177,7 @@ export const useHomeStore = defineStore("home", () => {
 
   const apiMainInfo = async () => {
     try {
+      isMainInfoLoading.value = true;
       const { data: mainInfo } = await getMainInfo();
       userInfo.value = {
         login: mainInfo.login,
@@ -184,8 +190,10 @@ export const useHomeStore = defineStore("home", () => {
         gaepo: mainInfo.gaepo,
       };
       infoMessages.value = mainInfo.infoMessages;
+      isMainInfoLoading.value = false;
     } catch (error) {
       console.log(error);
+      isMainInfoLoading.value = false;
     }
   };
 
@@ -300,6 +308,7 @@ export const useHomeStore = defineStore("home", () => {
 
   return {
     getIsLoading,
+    getIsMainInfoLoading,
     getUserInfo,
     getAccDate,
     getAccMonth,

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -25,6 +25,8 @@ const {
   getUserInfo,
   apiAccTimes,
   getInfoMessages,
+  getIsLoading,
+  getIsMainInfoLoading,
 } = useHomeStore();
 
 onMounted(() => {
@@ -38,6 +40,8 @@ const acceptedMonthAccTime = ref(getAccAcceptedMonth());
 const getWeeklyData = ref(getWeeklyGraph());
 const getMonthlyData = ref(getMonthlyGraph());
 const numberOfPeople = ref(getNumberOfPeople());
+const isLoading = ref(getIsLoading());
+const isMainInfoLoading = ref(getIsMainInfoLoading());
 
 const isOnline = ref(getUserInfo().inoutState);
 
@@ -75,6 +79,14 @@ watch(getNumberOfPeople, () => {
   numberOfPeople.value = getNumberOfPeople();
 });
 
+watch(getIsLoading, (val) => {
+  isLoading.value = val;
+});
+
+watch(getIsMainInfoLoading, (val) => {
+  isMainInfoLoading.value = val;
+});
+
 watch(getUserInfo, () => {
   isOnline.value = getUserInfo().inoutState;
   if (isOnline.value === "IN") {
@@ -161,7 +173,7 @@ const stopTimer = () => {
       :numberOfPeople="numberOfPeople"
     />
   </main>
-  <DefaultModal v-if="isClickInfo != InfoModal.NONE">
+  <DefaultModal v-if="!isMainInfoLoading && isClickInfo != InfoModal.NONE">
     <template #title>
       <span
         class="bold"