Merge pull request #35 from Triumers/feat/manager

[Refactor] Vuex 추가 후 관련된 코드 수정

.env

@@ -0,0 +1,2 @@
+# .env
+PROD=false

package.json

@@ -11,10 +11,11 @@
   "dependencies": {
     "axios": "^1.7.2",
     "bootstrap": "^5.3.3",
-    "bootstrap-vue-3": "^0.5.1",
+    "bootstrap-vue-3": "^0.3.12",
     "html2pdf.js": "^0.10.1",
     "vue": "^3.4.27",
-    "vue-router": "^4.0.13"
+    "vue-router": "^4.0.13",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",

src/components/anonymous-board/AnonymousBoardDetail.vue

@@ -52,9 +52,12 @@
 import { ref, onMounted, computed } from 'vue';
 import axios from 'axios';
 import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 const route = useRoute();
 const router = useRouter();
+const store = useStore();
+
 const anonymousBoard = ref({});
 const anonymousBoardCommentList = ref([]);
 const currentPage = ref(1);
@@ -64,19 +67,17 @@ const newComment = ref({
   content: '',
   nickname: '익명',
 });
-const isAdmin = ref(false);
 
 const totalPages = computed(() => Math.ceil(totalCount.value / pageSize.value));
 
 const isHrManagerOrAdmin = computed(() => {
-  const userRole = localStorage.getItem('role');
-  return ['ROLE_ADMIN', 'ROLE_HR_MANAGER'].includes(userRole);
+  return ['ROLE_ADMIN', 'ROLE_HR_MANAGER'].includes(store.state.userRole);
 });
 
 onMounted(() => {
   fetchAnonymousBoardById();
   fetchAnonymousBoardCommentList();
-  checkAdminRole();
+  store.dispatch('checkUserInfo');
 });
 
 async function fetchAnonymousBoardById() {
@@ -149,13 +150,6 @@ function nextPage() {
 function goToBoardList() {
   router.push('/office-life/anonymous-board/list');
 }
-
-function checkAdminRole() {
-  // 관리자 여부를 확인하는 로직 추가
-  // 예: 로그인한 사용자의 역할을 확인하여 관리자인 경우 isAdmin을 true로 설정
-  // 실제 구현에서는 서버에서 사용자 정보를 가져와 확인해야 함
-  isAdmin.value = true; // 예시로 관리자로 설정
-}
 </script>
 
 

src/components/user/Login.vue

@@ -21,8 +21,11 @@
 import { ref, onMounted } from 'vue';
 import axios from 'axios';
 import { useRouter } from 'vue-router';
+import { useStore } from 'vuex';
 
 const router = useRouter();
+const store = useStore();
+
 const email = ref('');
 const password = ref('');
 
@@ -31,7 +34,7 @@ const checkLoginStatus = () => {
   const token = localStorage.getItem('token');
   if (token) {
     alert('이미 로그인한 상태입니다.');
-    router.push('/wiki/posts');
+    router.push('/wiki/1');
   }
 };
 
@@ -40,16 +43,13 @@ async function login() {
     const response = await axios.post('/login', {
       email: email.value,
       password: password.value,
-    }).then(response => {
-      localStorage.setItem('token', response.headers.get('Authorization'));
-      localStorage.setItem('role', response.headers.get('UserRole'));
-      router.push('/wiki/posts');
-      return response.data;
     });
-    // 로그인 성공 시 처리할 로직 추가
+    const token = response.headers.get('Authorization');
+    const userRole = response.headers.get('UserRole');
+    store.dispatch('login', { token, userRole });
+    router.push('/wiki/1');
   } catch (error) {
     console.error('Failed to login:', error);
-    // 로그인 실패 시 처리할 로직 추가
     alert('로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.');
   }
 }