헤더의 async 함수 호출 후 렌더링을 위해 App.vue에 Suspense 컴포넌트 추가

+ 배포 환경에서 UserImageComponent의 이미지가 조회되지 않는 문제로 관련 콘솔 로그 작성 코드 추가
yhlee002 · Jul 22, 2024 · 424722c · 424722c
1 parent cafc65e
commit 424722c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -12,7 +12,13 @@ const {modalOpen, datas, open} = storeToRefs(modalStore);
 
 <template>
   <div id="app">
-    <HeaderComponent></HeaderComponent>
+    <Suspense>
+      <HeaderComponent></HeaderComponent>
+      <template #fallback>
+        Loading...
+      </template>
+    </Suspense>
+
     <div class="main-block">
       <Suspense>
         <RouterView/>

diff --git a/src/components/fragment/HeaderComponent.vue b/src/components/fragment/HeaderComponent.vue
@@ -5,7 +5,9 @@ import NoProfileImageComponent from "@/components/icon/NoProfileImageComponent.v
 import UserImageComponent from "@/components/icon/UserImageComponent.vue";
 
 const userStore = useUserStore();
-userStore.getCurrentUser();
+await userStore.getCurrentUser();
+// const user = userStore.user;
+
 
 const logoutUrl = `http://${import.meta.env.VITE_APP_HOST}:8080/api/members/logout`;
 
@@ -46,15 +48,15 @@ async function logout() {
             <!-- profile image -->
             <UserImageComponent :profileImage="userStore.profileImage" :role="userStore.role"></UserImageComponent>
             <span class="userbox-text" v-if="userStore.user != null">{{ userStore.user.name }}
-          <span v-if="userStore.user.role ==='ROLE_ADMIN'" style="color: #c6c6c6; font-size: 0.8rem">(관리자)</span>
-          </span>
+              <span v-if="userStore.user.role ==='ROLE_ADMIN'" style="color: #c6c6c6; font-size: 0.8rem">(관리자)</span>
+            </span>
             <br>
             <span class="userbox-text">
-            <router-link to="/mypage" v-if="userStore.isAuthenticated" style="margin-right: 3px">내정보</router-link>
-        </span>
-        <span>
-          <span style="cursor: pointer;" @click="logout()">로그아웃</span>
-        </span>
+              <router-link to="/mypage" v-if="userStore.isAuthenticated" style="margin-right: 3px">내정보</router-link>
+            </span>
+            <span>
+              <span style="cursor: pointer;" @click="logout()">로그아웃</span>
+            </span>
             <form id="logout" :action="logoutUrl" method="POST"></form>
           </div>
         </div>

diff --git a/src/components/icon/UserImageComponent.vue b/src/components/icon/UserImageComponent.vue
@@ -1,12 +1,14 @@
 <script setup>
 import NoProfileImageComponent from "@/components/icon/NoProfileImageComponent.vue";
 
-const props = defineProps(['profileImage', 'role', 'width', 'height'])
+const props = defineProps(['profileImage', 'role', 'width', 'height']);
+
+console.log('props', props);
 </script>
 
 <template>
   <div v-if="profileImage" id="writerProfileImage">
-    <img v-if="profileImage && role !== 'ROLE_ADMIN'" :src="profileImage"
+    <img v-if="role !== 'ROLE_ADMIN'" :src="profileImage"
          :style="{width: width, height: height}"
          class="profile_image" alt="프로필 이미지"/>
   </div>