diff --git a/src/components/ootd/OOTDFollowComponent.vue b/src/components/ootd/OOTDFollowComponent.vue
index 362b5351..cde55d12 100644
--- a/src/components/ootd/OOTDFollowComponent.vue
+++ b/src/components/ootd/OOTDFollowComponent.vue
@@ -7,9 +7,10 @@ import { useFollowStore } from '@/stores/follow/FollowStore'
 import { toggleFollow } from '@/apis/ootd/FollowService'
 import { onBeforeRouteLeave } from 'vue-router'
 import type { FollowingResponse } from '@/apis/ootd/FollowDto'
+import { storeToRefs } from 'pinia'
 
 const followStore = useFollowStore()
-const follows = followStore.follows
+const {follows} = storeToRefs(followStore)
 
 const tabOptions = reactive([
   { label: '팔로워', value: 'follower' },
@@ -24,34 +25,20 @@ const onTabChange = async (tabOption: string) => {
 
 const flushFollowStore = async () => {
   const followingIds: number[] = []
-  follows.forEach((followingId: number) => {
+  follows.value.forEach((followingId: number) => {
     followingIds.push(followingId)
   })
 
   if (followingIds.length !== 0) {
     await toggleFollow(followingIds)
-    follows.clear()
+    await followStore.clearFollows()
   }
 }
-
 // 페이지 이동 시 이벤트
 onBeforeRouteLeave(async (to, from) => {
   await flushFollowStore()
 })
 
-// 새로고침 or 브라우저 창 닫을 때 이벤트
-window.addEventListener('beforeunload', async (event) => {
-  // event를 멈춰놓고 flush 성공시 리로드
-  event.returnValue = ''
-  flushFollowStore().then((res) => {
-    window.location.reload()
-  }).catch((error) => {
-    console.error(error)
-    event.preventDefault()
-    event.returnValue = ''
-  })
-})
-
 </script>
 
 <template>
diff --git a/src/components/ootd/OOTDFollowerTableComponent.vue b/src/components/ootd/OOTDFollowerTableComponent.vue
index b93e2fd2..43dab69b 100644
--- a/src/components/ootd/OOTDFollowerTableComponent.vue
+++ b/src/components/ootd/OOTDFollowerTableComponent.vue
@@ -7,6 +7,7 @@ import { getFollowers } from '@/apis/ootd/FollowService'
 import { onBeforeMount, watch } from 'vue'
 import PaginationComponent from '@/components/ootd/PaginationComponent.vue'
 import { useFollowStore } from '@/stores/follow/FollowStore'
+import { storeToRefs } from 'pinia'
 
 const props = defineProps({
   addedFollowings: {
@@ -23,7 +24,7 @@ const totalPages = ref<number>()
 const totalElements = ref<number>()
 
 const followStore = useFollowStore()
-const follows = followStore.follows
+const {follows} = storeToRefs(followStore)
 
 const fetchDefaultData = async (): Promise<FollowerPageResponse<FollowerResponse>> => {
   const followerPageResponse = await getFollowers(0, 5, 'createdAt,desc')
@@ -58,7 +59,7 @@ const followButtonClickListener = (followerId: number, isFollowing: boolean | un
   // 이미 팔로잉하는 상태라면
   if(isFollowing) {
     // 언팔로우
-    if(!follows.has(followerId)) {
+    if(!followStore.hasFollowingId(followerId)) {
       followers.value?.forEach((follower) => {
         if(follower.id === followerId) {
           props.addedFollowings!.push({
@@ -81,7 +82,7 @@ const followButtonClickListener = (followerId: number, isFollowing: boolean | un
   // 아니라면
   else {
     // 언팔로우
-    if(follows.has(followerId)) {
+    if(followStore.hasFollowingId(followerId)) {
       const indexToRemove = props.addedFollowings!.findIndex((following) => following.id === followerId)
       if (indexToRemove !== -1) {
         props.addedFollowings?.splice(indexToRemove, 1)
@@ -101,7 +102,7 @@ const followButtonClickListener = (followerId: number, isFollowing: boolean | un
       })
     }
   }
-  follows.has(followerId) ? follows.delete(followerId) : follows.add(followerId)
+  followStore.toggleFollows(followerId)
 }
 
 const img = ref<Array<HTMLImageElement>>(new Array<HTMLImageElement>())
@@ -142,7 +143,7 @@ const handleImageLoad = async () => {
           {{ follower.nickname }}
         </RouterLink>
       </div>
-      <div v-if='follows.has(follower.id) ? !follower.isFollowing : follower.isFollowing'
+      <div v-if='followStore.hasFollowingId(follower.id) ? !follower.isFollowing : follower.isFollowing'
            class='follow-btn following'
            @click='followButtonClickListener(follower.id, follower.isFollowing)'>
         <svg
diff --git a/src/components/ootd/OOTDFollowingTableComponent.vue b/src/components/ootd/OOTDFollowingTableComponent.vue
index 5857897d..ea5aa2d5 100644
--- a/src/components/ootd/OOTDFollowingTableComponent.vue
+++ b/src/components/ootd/OOTDFollowingTableComponent.vue
@@ -5,6 +5,7 @@ import PaginationComponent from '@/components/ootd/PaginationComponent.vue'
 import type { FollowingPageResponse, FollowingResponse } from '@/apis/ootd/FollowDto'
 import { getFollowings } from '@/apis/ootd/FollowService'
 import { useFollowStore } from '@/stores/follow/FollowStore'
+import { storeToRefs } from 'pinia'
 
 const props = defineProps({
   addedFollowings: {
@@ -21,7 +22,7 @@ const totalPages = ref<number>()
 const totalElements = ref<number>()
 
 const followStore = useFollowStore()
-const follows = followStore.follows
+const {follows} = storeToRefs(followStore)
 
 const fetchDefaultData = async (): Promise<FollowingPageResponse<FollowingResponse>> => {
   const followingPageResponse = await getFollowings(0, 5, 'createdAt,desc')
@@ -60,7 +61,7 @@ watch(requestPage, async (afterPage, beforePage) => {
 })
 
 const followButtonClickListener = (followingId: number, isFollowing: boolean | undefined) => {
-  follows.has(followingId) ? follows.delete(followingId) : follows.add(followingId)
+  followStore.toggleFollows(followingId)
 }
 
 const followingEmits = defineEmits(['followings'])
@@ -104,7 +105,7 @@ const handleImageLoad = async () => {
           {{ following.nickname }}
         </RouterLink>
       </div>
-      <div v-if='follows.has(following.id) ? !following.isFollowing : following.isFollowing'
+      <div v-if='followStore.hasFollowingId(following.id) ? !following.isFollowing : following.isFollowing'
            class='follow-btn following'
            @click='followButtonClickListener(following.id, following.isFollowing)'>
         <svg
diff --git a/src/components/ootd/OOTDPostCardComponent.vue b/src/components/ootd/OOTDPostCardComponent.vue
index 65575f0a..494bc758 100644
--- a/src/components/ootd/OOTDPostCardComponent.vue
+++ b/src/components/ootd/OOTDPostCardComponent.vue
@@ -1,11 +1,10 @@
 <script setup lang='ts'>
-import { onBeforeMount, onBeforeUnmount, onUnmounted, ref } from 'vue'
+import { ref } from 'vue'
 import type { PostResponse } from '@/apis/ootd/PostDto'
 import { usePostLikeStore } from '@/stores/postlike/PostLikeStore'
-import router from '@/router'
 import { onBeforeRouteLeave } from 'vue-router'
+import { storeToRefs } from 'pinia'
 import { togglePostLike } from '@/apis/ootd/PostLikeService'
-
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
 const props = defineProps({
@@ -17,32 +16,34 @@ const props = defineProps({
 })
 
 const postLikeStore = usePostLikeStore()
-const postLikes = postLikeStore.postLikes
-const likeButtonClickListener = (postId: number, isLike: boolean | undefined) => {
+const {postLikes} = storeToRefs(postLikeStore)
+
+const likeButtonClickListener = async (postId: number, isLike: boolean | undefined) => {
   if (isLike === undefined) {
     alert('로그인이 필요합니다.')
   } else {
     const postIndex = props.posts.findIndex((post) => post.id === postId)
     if (postIndex !== -1) {
-      if (postLikes.has(postId)) {
+      const hasPostLike = postLikeStore.hasPostLike(postId)
+      if (hasPostLike) {
         props.posts[postIndex].isLike ? props.posts[postIndex].likeCount += 1 : props.posts[postIndex].likeCount -= 1
       } else {
         props.posts[postIndex].isLike ? props.posts[postIndex].likeCount -= 1 : props.posts[postIndex].likeCount += 1
       }
-      postLikes.has(postId) ? postLikes.delete(postId) : postLikes.add(postId)
+      await postLikeStore.togglePostLikes(postId)
     }
   }
 }
 
 const flushLikeStore = async () => {
   const postIds: number[] = []
-  postLikes.forEach((postLike) => {
-    postIds.push(postLike)
+  postLikes.value.forEach((storedPostLike) => {
+    postIds.push(storedPostLike)
   })
 
   if (postIds.length !== 0) {
     await togglePostLike(postIds)
-    postLikes.clear()
+    await postLikeStore.clearPostLikes()
   }
 }
 
@@ -51,19 +52,6 @@ onBeforeRouteLeave(async (to, from) => {
   await flushLikeStore()
 })
 
-// 새로고침 or 브라우저 창 닫을 때 이벤트
-window.addEventListener('beforeunload', async (event) => {
-  // event를 멈춰놓고 flush 성공시 리로드
-  event.returnValue = ''
-  flushLikeStore().then((res) => {
-    window.location.reload()
-  }).catch((error) => {
-    console.error(error)
-    event.preventDefault()
-    event.returnValue = ''
-  })
-})
-
 const img = ref<Array<HTMLImageElement>>(new Array<HTMLImageElement>())
 const imageSize = ref({
   width: 0,
@@ -104,7 +92,7 @@ const handleImageLoad = async () => {
           <svg class='ootd-post-card-like' xmlns='http://www.w3.org/2000/svg'
                viewBox='0 0 44 42' fill='none'>
             <path class='ootd-post-card-like-icon'
-                  :class="{ 'selected': post.isLike === undefined ? false : (postLikes.has(post.id) ? !post.isLike : post.isLike) }"
+                  :class="{ 'selected': post.isLike === undefined ? false : (postLikeStore.hasPostLike(post.id) ? !post.isLike : post.isLike) }"
                   d='M21.3268 39.4395L22 40.0523L22.6732 39.4395L25.5717 36.8008C25.5718 36.8007 25.5719 36.8007 25.572 36.8006C30.7022 32.1485 35.0416 28.2134 38.0868 24.4879C41.143 20.7488 43 17.0988 43 13C43 6.26652 37.7111 1 31 1C27.6025 1 24.3411 2.41653 22 4.70025C19.6589 2.41653 16.3975 1 13 1C6.28891 1 1 6.26652 1 13C1 17.0988 2.85704 20.7488 5.91324 24.4879C8.9584 28.2134 13.2978 32.1485 18.428 36.8006C18.4281 36.8007 18.4282 36.8007 18.4283 36.8008L21.3268 39.4395Z'
                   fill='#DADADA' fill-opacity='0.4' stroke='white' stroke-width='2' />
           </svg>
diff --git a/src/components/ootd/OOTDProfileCardComponent.vue b/src/components/ootd/OOTDProfileCardComponent.vue
index 6bb9c45f..9e769a0e 100644
--- a/src/components/ootd/OOTDProfileCardComponent.vue
+++ b/src/components/ootd/OOTDProfileCardComponent.vue
@@ -10,13 +10,14 @@ import { toggleFollow } from '@/apis/ootd/FollowService'
 import { onBeforeRouteLeave } from 'vue-router'
 import { useMemberStore } from '@/stores/member/MemberStore'
 import type { GiftInfo } from '@/apis/order/orderDto'
+import { storeToRefs } from 'pinia'
 
 const emit = defineEmits(['fetchData'])
 const memberStore = useMemberStore()
 const memberId = memberStore.getMemberInfo().memberId
 const nickname = memberStore.nickname ? memberStore.nickname : ''
 const followStore = useFollowStore()
-const follows = followStore.follows
+const {follows} = storeToRefs(followStore)
 
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
@@ -62,20 +63,20 @@ const followButtonClickListener = (followingId: number, isFollowing: boolean | u
       ? (member.value!.followerCount -= 1)
       : (member.value!.followerCount += 1)
     member.value!.isFollowing = !isFollowing
-    follows.has(followingId) ? follows.delete(followingId) : follows.add(followingId)
+    followStore.toggleFollows(followingId)
   }
 
 }
 
 const flushFollowStore = async () => {
   const followingIds: number[] = []
-  follows.forEach((followingId: number) => {
+  follows.value.forEach((followingId: number) => {
     followingIds.push(followingId)
   })
 
   if (followingIds.length !== 0) {
     await toggleFollow(followingIds)
-    follows.clear()
+    await followStore.clearFollows()
   }
 }
 
diff --git a/src/stores/follow/FollowStore.ts b/src/stores/follow/FollowStore.ts
index 0ebcd5ea..aee96329 100644
--- a/src/stores/follow/FollowStore.ts
+++ b/src/stores/follow/FollowStore.ts
@@ -1,8 +1,32 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { type Ref, ref } from 'vue'
 
 export const useFollowStore
   = defineStore('follow', () => {
-  const follows = ref<Set<number>>(new Set<number>())
-  return { follows }
+  const follows: Ref<number[]> = ref<number[]>([])
+
+  const toggleFollows = async (followingId: number) => {
+    const findIndex = follows.value.indexOf(followingId)
+    if (findIndex === -1) {
+      follows.value.push(followingId)
+    } else {
+      follows.value.splice(findIndex, 1)
+    }
+  }
+
+  const hasFollowingId = (followingId: number) => {
+    return follows.value.includes(followingId)
+  }
+
+  const clearFollows = async () => {
+    follows.value = []
+  }
+
+  return { follows, clearFollows, hasFollowingId, toggleFollows }
+}, {
+  persist: {
+    key: 'follows',
+    storage: localStorage,
+    paths: ['follows']
+  }
 })
\ No newline at end of file
diff --git a/src/stores/postlike/PostLikeStore.ts b/src/stores/postlike/PostLikeStore.ts
index 425ab30a..b3de6be8 100644
--- a/src/stores/postlike/PostLikeStore.ts
+++ b/src/stores/postlike/PostLikeStore.ts
@@ -1,8 +1,34 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { type Ref, ref } from 'vue'
 
 export const usePostLikeStore
   = defineStore('postLike', () => {
-  const postLikes = ref<Set<number>>(new Set<number>())
-  return { postLikes }
-})
\ No newline at end of file
+
+    const postLikes: Ref<number[]> = ref<number[]>([])
+
+    const togglePostLikes = async (postId: number) => {
+      const findIndex = postLikes.value.indexOf(postId)
+      if (findIndex === -1) {
+        postLikes.value.push(postId)
+      } else {
+        postLikes.value.splice(findIndex, 1)
+      }
+    }
+
+    const hasPostLike = (postId: number) => {
+      return postLikes.value.includes(postId)
+    }
+
+    const clearPostLikes = async () => {
+      postLikes.value = []
+    }
+
+    return { postLikes, clearPostLikes, hasPostLike, togglePostLikes }
+  }, {
+    persist: {
+      key: 'postLikes',
+      storage: localStorage,
+      paths: ['postLikes']
+    }
+  }
+)
diff --git a/src/views/OOTDDetailView.vue b/src/views/OOTDDetailView.vue
index 642d7617..01681d84 100644
--- a/src/views/OOTDDetailView.vue
+++ b/src/views/OOTDDetailView.vue
@@ -12,6 +12,7 @@ import { useFollowStore } from '@/stores/follow/FollowStore'
 import { toggleFollow } from '@/apis/ootd/FollowService'
 import { usePostStore } from '@/stores/post/PostStore'
 import { useMemberStore } from '@/stores/member/MemberStore'
+import { storeToRefs } from 'pinia'
 
 const VITE_STATIC_IMG_URL = ref<string>(import.meta.env.VITE_STATIC_IMG_URL)
 
@@ -75,53 +76,53 @@ onBeforeMount(async () => {
 })
 
 const postLikeStore = usePostLikeStore()
-const postLikes = postLikeStore.postLikes
+const {postLikes} = storeToRefs(postLikeStore)
 const likeButtonClickListener = (isLike: boolean | undefined) => {
   if (isLike === undefined) {
     alert('로그인이 필요합니다.')
   } else {
-    if (postLikes.has(postId.value)) {
+    if (postLikeStore.hasPostLike(postId.value)) {
       post.value.isLike ? post.value.likeCount += 1 : post.value.likeCount -= 1
     } else {
       post.value.isLike ? post.value.likeCount -= 1 : post.value.likeCount += 1
     }
-    postLikes.has(postId.value) ? postLikes.delete(postId.value) : postLikes.add(postId.value)
+    postLikeStore.togglePostLikes(postId.value)
   }
 }
 
 
 const followStore = useFollowStore()
-const follows = followStore.follows
+const {follows} = storeToRefs(followStore)
 const followButtonClickListener = (followingId: number, isFollowing: boolean | undefined) => {
   if(isFollowing === undefined) {
     alert('로그인이 필요합니다.')
   } else {
     post.value.member.isFollowing = !isFollowing
-    follows.has(followingId) ? follows.delete(followingId) : follows.add(followingId)
+    followStore.toggleFollows(followingId)
   }
 }
 
 const flushFollowStore = async () => {
   const followingIds: number[] = []
-  follows.forEach((followingId: number) => {
+  follows.value.forEach((followingId: number) => {
     followingIds.push(followingId)
   })
 
   if (followingIds.length !== 0) {
     await toggleFollow(followingIds)
-    follows.clear()
+    await followStore.clearFollows()
   }
 }
 
 const flushLikeStore = async () => {
   const postIds: number[] = []
-  postLikes.forEach((postLike) => {
-    postIds.push(postLike)
+  postLikes.value.forEach((storedPostLike) => {
+    postIds.push(storedPostLike)
   })
 
   if (postIds.length !== 0) {
     await togglePostLike(postIds)
-    postLikes.clear()
+    await postLikeStore.clearPostLikes()
   }
 }
 
@@ -131,25 +132,6 @@ onBeforeRouteLeave(async (to, from) => {
   await flushFollowStore()
 })
 
-// 새로고침 or 브라우저 창 닫을 때 이벤트
-window.addEventListener('beforeunload', async (event) => {
-  // event를 멈춰놓고 flush 성공시 리로드
-  event.returnValue = ''
-  flushFollowStore().then((res) => {
-    flushLikeStore().then((res2) => {
-      window.location.reload()
-    }).catch((error) => {
-      console.error(error)
-      event.preventDefault()
-      event.returnValue = ''
-    })
-  }).catch((error) => {
-    console.error(error)
-    event.preventDefault()
-    event.returnValue = ''
-  })
-})
-
 const postStore = usePostStore()
 const onUpdateBtnClick = async () => {
   await postStore.setPostUpdateRequest({
@@ -279,7 +261,7 @@ const onTagedProductMouseLeave = async (productId: number) => {
           <div class='ootd-detail-like-button-wrapper'>
             <div class='ootd-detail-like-button' @click='likeButtonClickListener(post.isLike)'>
               <svg
-                :class="{ 'selected': post.isLike === undefined ? false : (postLikes.has(post.id) ? !post.isLike : post.isLike) }"
+                :class="{ 'selected': post.isLike === undefined ? false : (postLikeStore.hasPostLike(post.id) ? !post.isLike : post.isLike) }"
                 class='ootd-detail-like-button-icon' xmlns='http://www.w3.org/2000/svg'
                 viewBox='0 0 40 37' fill='none'>
                 <path