From 095224074b70f130650657b52e60ddf0a36634b0 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 16:57:23 +0900
Subject: [PATCH 01/15] =?UTF-8?q?feat(manager):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/SearchUser.vue | 191 ++++++++++++++++++++++++++
 src/views/Manager.vue                 |  11 ++
 2 files changed, 202 insertions(+)
 create mode 100644 src/components/manager/SearchUser.vue
 create mode 100644 src/views/Manager.vue

diff --git a/src/components/manager/SearchUser.vue b/src/components/manager/SearchUser.vue
new file mode 100644
index 0000000..fb27c84
--- /dev/null
+++ b/src/components/manager/SearchUser.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="container">
+    <div class="header no-background no-shadow">
+      <h2>회원 검색</h2>
+      <button class="create-button" @click="goToMemberCreate">회원 생성</button>
+    </div>
+    <div class="search-container">
+      <input
+        type="text"
+        v-model="searchKeyword"
+        placeholder="이름 또는 이메일 검색"
+        class="search-input"
+        @input="searchMembers"
+        @keyup.enter="searchMembers"
+      />
+      <div class="search-button-wrapper">
+        <button class="search-button" @click="searchMembers">검색</button>
+      </div>
+    </div>
+    <div v-if="members.length === 0 && searchKeyword !== ''" class="no-results">
+      검색 결과가 없습니다.
+    </div>
+    <div class="member-list">
+      <div
+        v-for="member in members"
+        :key="member.id"
+        class="member-item"
+        @click="selectMember(member)"
+      >
+        <div class="member-name">{{ member.name }}</div>
+        <div class="member-email">{{ member.email }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import axios from 'axios';
+
+const router = useRouter();
+const searchKeyword = ref('');
+const members = ref([]);
+
+async function searchMembers() {
+  try {
+    const token = localStorage.getItem('token');
+    let response;
+    if (searchKeyword.value.includes('@')) {
+      response = await axios.get(
+        `http://localhost:5000/employee/find/email/${searchKeyword.value}`,
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+    } else {
+      response = await axios.post(
+        'http://localhost:5000/employee/find/name',
+        {
+          name: searchKeyword.value,
+        },
+        {
+          headers: {
+            Authorization: token,
+          },
+        }
+      );
+    }
+    members.value = response.data.employee;
+  } catch (error) {
+    console.error('Failed to search members:', error);
+    // 오류 처리 로직 추가
+    alert('회원 검색에 실패했습니다. 다시 시도해주세요.');
+  }
+}
+
+function selectMember(member) {
+  router.push({ name: 'MemberEdit', params: { id: member.id } });
+}
+
+function goToMemberCreate() {
+  router.push({ name: 'MemberCreate' });
+}
+</script>
+
+<style scoped>
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.no-background {
+  background-color: transparent;
+}
+  
+.no-shadow {
+  box-shadow: none;
+}
+  
+.create-button {
+  padding: 10px 20px;
+  background-color: #042444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.create-button:hover {
+  background-color: #1b2cba;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.search-input {
+  flex: 1;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.search-button-wrapper {
+  margin-left: 10px;
+}
+
+.search-button {
+  padding: 10px 20px;
+  background-color: #042444;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.search-button:hover {
+  background-color: #1b2cba;
+}
+
+.no-results {
+  text-align: center;
+  font-style: italic;
+  color: #888;
+  margin-bottom: 20px;
+}
+
+.member-list {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  gap: 20px;
+}
+
+.member-item {
+  background-color: #f5f5f5;
+  padding: 20px;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.member-item:hover {
+  background-color: #e0e0e0;
+}
+
+.member-name {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 5px;
+}
+
+.member-email {
+  font-size: 14px;
+  color: #888;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Manager.vue b/src/views/Manager.vue
new file mode 100644
index 0000000..204d059
--- /dev/null
+++ b/src/views/Manager.vue
@@ -0,0 +1,11 @@
+<template>
+    <div>
+      <router-view></router-view>
+    </div>
+  </template>
+  
+  <script>
+  import { ref } from 'vue';
+  import { RouterView } from "vue-router";
+  
+  </script>
\ No newline at end of file

From 61897441b1dfd9ea15487ed0c572da354b5ec077 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 17:09:27 +0900
Subject: [PATCH 02/15] =?UTF-8?q?feat(manager):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EA=B6=8C=ED=95=9C=20=EC=88=98=EC=A0=95=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/EditUserRole.vue | 84 +++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 src/components/manager/EditUserRole.vue

diff --git a/src/components/manager/EditUserRole.vue b/src/components/manager/EditUserRole.vue
new file mode 100644
index 0000000..9abecf1
--- /dev/null
+++ b/src/components/manager/EditUserRole.vue
@@ -0,0 +1,84 @@
+<template>
+    <div class="container">
+      <h2>회원 권한 수정</h2>
+      <div class="form-group">
+        <label for="role">권한:</label>
+        <select id="role" v-model="role" required>
+          <option value="ROLE_NORMAL">일반 사용자</option>
+          <option value="ROLE_LEADER">리더</option>
+          <option value="ROLE_HR_MANAGER">인사 매니저</option>
+          <option value="ROLE_ADMIN">관리자</option>
+        </select>
+      </div>
+      <button class="submit-button" @click="updateMemberPermission">수정</button>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import axios from 'axios';
+  
+  const router = useRouter();
+  const route = useRoute();
+  const memberId = route.params.id;
+  const role = ref('ROLE_NORMAL');
+  
+  async function updateMemberPermission() {
+    try {
+      const token = localStorage.getItem('token');
+      await axios.post('http://localhost:5000/manager/edit/role', {
+        email: memberId,
+        role: role.value,
+      }, {
+        headers: {
+          Authorization: token,
+        },
+      });
+      alert('회원 권한이 성공적으로 수정되었습니다.');
+      router.push({ name: 'MemberEdit', params: { id: memberId } });
+    } catch (error) {
+      console.error('Failed to update member permission:', error);
+      alert('회원 권한 수정에 실패했습니다. 다시 시도해주세요.');
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  .submit-button {
+    padding: 10px 20px;
+    background-color: #042444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  .submit-button:hover {
+    background-color: #1b2cba;
+  }
+  </style>
\ No newline at end of file

From 7b1c70d313efc01caa83fad7d483d025a80f0e41 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 17:09:56 +0900
Subject: [PATCH 03/15] =?UTF-8?q?feat(manager):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=B4=88=EA=B8=B0?=
 =?UTF-8?q?=ED=99=94=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/ResetUserPassword.vue | 59 ++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/manager/ResetUserPassword.vue

diff --git a/src/components/manager/ResetUserPassword.vue b/src/components/manager/ResetUserPassword.vue
new file mode 100644
index 0000000..c5ac8ad
--- /dev/null
+++ b/src/components/manager/ResetUserPassword.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="container">
+      <h2>회원 비밀번호 초기화</h2>
+      <p>회원의 비밀번호를 초기화하시겠습니까?</p>
+      <button class="submit-button" @click="resetMemberPassword">초기화</button>
+    </div>
+  </template>
+  
+  <script setup>
+  import { useRouter, useRoute } from 'vue-router';
+  import axios from 'axios';
+  
+  const router = useRouter();
+  const route = useRoute();
+  const memberId = route.params.id;
+  
+  async function resetMemberPassword() {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.post('http://localhost:5000/manager/edit/password', {
+        email: memberId,
+      }, {
+        headers: {
+          Authorization: token,
+        },
+      });
+  
+      const newPassword = response.data.password;
+      alert(`회원의 비밀번호가 초기화되었습니다. 새로운 비밀번호: ${newPassword}`);
+      router.push({ name: 'MemberEdit', params: { id: memberId } });
+    } catch (error) {
+      console.error('Failed to reset member password:', error);
+      // 오류 처리 로직 추가
+      alert('회원 비밀번호 초기화에 실패했습니다. 다시 시도해주세요.');
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  .submit-button {
+    padding: 10px 20px;
+    background-color: #042444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  .submit-button:hover {
+    background-color: #1b2cba;
+  }
+  </style>
\ No newline at end of file

From 69e0d85390c4eff967ddd53e017b9d0f96309fb3 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 17:54:53 +0900
Subject: [PATCH 04/15] =?UTF-8?q?feat(manager):=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/EditUser.vue | 532 ++++++++++++++++++++++++++++
 1 file changed, 532 insertions(+)
 create mode 100644 src/components/manager/EditUser.vue

diff --git a/src/components/manager/EditUser.vue b/src/components/manager/EditUser.vue
new file mode 100644
index 0000000..fd3fe88
--- /dev/null
+++ b/src/components/manager/EditUser.vue
@@ -0,0 +1,532 @@
+<template>
+    <div class="container">
+      <div class="header no-background no-shadow">
+        <h2>회원 정보 수정</h2>
+        <div class="button-group">
+          <button class="permission-button" @click="goToMemberPermission">권한 수정</button>
+          <button class="reset-password-button" @click="goToMemberResetPassword">비밀번호 초기화</button>
+        </div>
+      </div>
+      <form @submit.prevent="updateMember">
+        <div class="form-group">
+          <label for="email">이메일:</label>
+          <input type="email" id="email" v-model="email" required />
+        </div>
+        <div class="form-group">
+          <label for="name">이름:</label>
+          <input type="text" id="name" v-model="name" required />
+        </div>
+        <div class="form-group">
+        <label for="profileImg">프로필 이미지:</label>
+        <input type="file" id="profileImg" @change="handleProfileImgChange" accept="image/jpeg" />
+        </div>
+        <div class="form-group">
+          <label for="startDate">입사일:</label>
+          <input type="date" id="startDate" v-model="startDate" />
+        </div>
+        <div class="form-group">
+          <label for="endDate">퇴사일:</label>
+          <input type="date" id="endDate" v-model="endDate" />
+        </div>
+        <div class="form-group">
+          <label for="phoneNumber">전화번호:</label>
+          <input type="tel" id="phoneNumber" v-model="phoneNumber" />
+        </div>
+        <div class="form-group">
+          <label for="team" class="label-bold">팀:</label>
+          <div class="search-input">
+            <input
+              v-model="teamSearch"
+              type="text"
+              placeholder="팀 이름 검색"
+              @input="searchTeams"
+              class="form-control"
+            />
+            <button @click="searchTeams" class="btn search-button">검색</button>
+          </div>
+          <div v-if="showTeamResults" class="search-results">
+            <div
+              v-for="team in filteredTeams"
+              :key="team.id"
+              class="search-result"
+              :class="{ 'selected': selectedTeam && selectedTeam.id === team.id }"
+              @click="selectTeam(team)"
+            >
+              {{ team.name }}
+            </div>
+            <div v-if="filteredTeams.length === 0 && teamSearch !== ''" class="no-results">
+              검색 결과가 없습니다.
+            </div>
+          </div>
+          <div v-if="selectedTeam" class="selected-item">
+            {{ selectedTeam.name }}
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="position" class="label-bold">직책:</label>
+          <div class="search-input">
+            <input
+              v-model="positionSearch"
+              type="text"
+              placeholder="직책 이름 검색"
+              @input="searchPositions"
+              class="form-control"
+            />
+            <button @click="searchPositions" class="btn search-button">검색</button>
+          </div>
+          <div v-if="showPositionResults" class="search-results">
+            <div
+              v-for="position in filteredPositions"
+              :key="position.id"
+              class="search-result"
+              :class="{ 'selected': selectedPosition && selectedPosition.id === position.id }"
+              @click="selectPosition(position)"
+            >
+              {{ position.name }}
+            </div>
+            <div v-if="filteredPositions.length === 0 && positionSearch !== ''" class="no-results">
+              검색 결과가 없습니다.
+            </div>
+          </div>
+          <div v-if="selectedPosition" class="selected-item">
+            {{ selectedPosition.name }}
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="rank" class="label-bold">직급:</label>
+          <div class="search-input">
+            <input
+              v-model="rankSearch"
+              type="text"
+              placeholder="직급 이름 검색"
+              @input="searchRanks"
+              class="form-control"
+            />
+            <button @click="searchRanks" class="btn search-button">검색</button>
+          </div>
+          <div v-if="showRankResults" class="search-results">
+            <div
+              v-for="rank in filteredRanks"
+              :key="rank.id"
+              class="search-result"
+              :class="{ 'selected': selectedRank && selectedRank.id === rank.id }"
+              @click="selectRank(rank)"
+            >
+              {{ rank.name }}
+            </div>
+            <div v-if="filteredRanks.length === 0 && rankSearch !== ''" class="no-results">
+              검색 결과가 없습니다.
+            </div>
+          </div>
+          <div v-if="selectedRank" class="selected-item">
+            {{ selectedRank.name }}
+          </div>
+        </div>
+        <div class="form-actions">
+          <button type="submit" class="submit-button" :disabled="!isFormValid">수정</button>
+        </div>
+      </form>
+    </div>
+  </template>
+  
+  <script setup>
+import { ref, onMounted, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import axios from 'axios';
+
+const router = useRouter();
+const route = useRoute();
+const memberId = route.params.id;
+
+const email = ref('');
+const name = ref('');
+const profileImg = ref(null);
+const startDate = ref('');
+const endDate = ref('');
+const phoneNumber = ref('');
+const teamSearch = ref('');
+const positionSearch = ref('');
+const rankSearch = ref('');
+const selectedTeam = ref(null);
+const selectedPosition = ref(null);
+const selectedRank = ref(null);
+const teams = ref([]);
+const positions = ref([]);
+const ranks = ref([]);
+const showTeamResults = ref(false);
+const showPositionResults = ref(false);
+const showRankResults = ref(false);
+
+const filteredTeams = computed(() => {
+  if (!teamSearch.value) {
+    return teams.value;
+  }
+  return teams.value.filter(team =>
+    team.name.toLowerCase().includes(teamSearch.value.toLowerCase())
+  );
+});
+
+const filteredPositions = computed(() => {
+  if (!positionSearch.value) {
+    return positions.value;
+  }
+  return positions.value.filter(position =>
+    position.name.toLowerCase().includes(positionSearch.value.toLowerCase())
+  );
+});
+
+const filteredRanks = computed(() => {
+  if (!rankSearch.value) {
+    return ranks.value;
+  }
+  return ranks.value.filter(rank =>
+    rank.name.toLowerCase().includes(rankSearch.value.toLowerCase())
+  );
+});
+
+const isFormValid = computed(() => {
+  return selectedTeam.value && selectedPosition.value && selectedRank.value;
+});
+
+onMounted(async () => {
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.get(`http://localhost:5000/employee/find/id/${memberId}`, {
+      headers: {
+        Authorization: token,
+      },
+    });
+
+    const memberData = response.data.employee[0];
+    email.value = memberData.email;
+    name.value = memberData.name;
+    profileImg.value = memberData.profileImg;
+    startDate.value = memberData.startDate;
+    endDate.value = memberData.endDate;
+    phoneNumber.value = memberData.phoneNumber;
+    selectedTeam.value = memberData.team;
+    selectedPosition.value = memberData.position;
+    selectedRank.value = memberData.rank;
+
+    await fetchTeams();
+    await fetchPositions();
+    await fetchRanks();
+  } catch (error) {
+    console.error('Failed to fetch member data:', error);
+    alert('회원 정보를 불러오는데 실패했습니다.');
+  }
+});
+
+async function fetchTeams() {
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.get('http://localhost:5000/organization/find/team/all', {
+      headers: {
+        Authorization: token,
+      },
+    });
+    teams.value = response.data;
+  } catch (error) {
+    console.error('Failed to fetch teams:', error);
+    // 팀 정보를 불러오는 데 실패해도 경고 메시지를 표시하지 않습니다.
+  }
+}
+
+async function fetchPositions() {
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.get('http://localhost:5000/duty/find/position/all', {
+      headers: {
+        Authorization: token,
+      },
+    });
+    positions.value = response.data.position;
+  } catch (error) {
+    console.error('Failed to fetch positions:', error);
+    alert('직책 정보를 불러오는데 실패했습니다.');
+  }
+}
+
+async function fetchRanks() {
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.get('http://localhost:5000/duty/find/rank/all', {
+      headers: {
+        Authorization: token,
+      },
+    });
+    ranks.value = response.data.rank;
+  } catch (error) {
+    console.error('Failed to fetch ranks:', error);
+    alert('직급 정보를 불러오는데 실패했습니다.');
+  }
+}
+
+async function searchTeams() {
+  if (teamSearch.value === '') {
+    await fetchTeams();
+    showTeamResults.value = false;
+    return;
+  }
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.post('http://localhost:5000/organization/find/team/name', {
+      name: teamSearch.value,
+    }, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    teams.value = response.data;
+    showTeamResults.value = true;
+  } catch (error) {
+    console.error('Failed to search teams:', error);
+  }
+}
+
+async function searchPositions() {
+  if (positionSearch.value === '') {
+    await fetchPositions();
+    showPositionResults.value = false;
+    return;
+  }
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.get(`http://localhost:5000/duty/find/position/${positionSearch.value}`, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    positions.value = response.data.position;
+    showPositionResults.value = true;
+  } catch (error) {
+    console.error('Failed to search positions:', error);
+  }
+}
+
+async function searchRanks() {
+  if (rankSearch.value === '') {
+    await fetchRanks();
+    showRankResults.value = false;
+    return;
+  }
+  try {
+    const token = localStorage.getItem('token');
+    const response = await axios.get(`http://localhost:5000/duty/find/rank/${rankSearch.value}`, {
+      headers: {
+        Authorization: token,
+      },
+    });
+    ranks.value = response.data.rank;
+    showRankResults.value = true;
+  } catch (error) {
+    console.error('Failed to search ranks:', error);
+  }
+}
+
+function selectTeam(team) {
+  selectedTeam.value = team;
+  teamSearch.value = team.name;
+  showTeamResults.value = false;
+}
+
+function selectPosition(position) {
+  selectedPosition.value = position;
+  positionSearch.value = position.name;
+  showPositionResults.value = false;
+}
+
+function selectRank(rank) {
+  selectedRank.value = rank;
+  rankSearch.value = rank.name;
+  showRankResults.value = false;
+}
+
+function handleProfileImgChange(event) {
+  profileImg.value = event.target.files[0];
+}
+
+async function updateMember() {
+  try {
+    const token = localStorage.getItem('token');
+    const formData = new FormData();
+    formData.append('email', email.value);
+    formData.append('name', name.value);
+    if (profileImg.value) {
+      formData.append('profileImg', profileImg.value);
+    }
+    formData.append('startDate', startDate.value);
+    formData.append('endDate', endDate.value);
+    formData.append('phoneNumber', phoneNumber.value);
+    formData.append('teamId', selectedTeam.value.id);
+    formData.append('positionId', selectedPosition.value.id);
+    formData.append('rankId', selectedRank.value.id);
+
+    const response = await axios.post('http://localhost:5000/manager/edit/info', formData, {
+      headers: {
+        Authorization: token,
+        'Content-Type': 'multipart/form-data',
+      },
+    });
+
+    if (response.status === 200) {
+      alert('회원 정보가 성공적으로 수정되었습니다.');
+      router.push({ name: 'MemberSearch' });
+    } else {
+      alert('회원 정보 수정에 실패했습니다. 다시 시도해주세요.');
+    }
+  } catch (error) {
+    console.error('Failed to update member:', error);
+    alert('회원 정보 수정에 실패했습니다. 다시 시도해주세요.');
+  }
+}
+
+function goToMemberPermission() {
+  router.push({ name: 'MemberPermission', params: { id: memberId } });
+}
+
+function goToMemberResetPassword() {
+  router.push({ name: 'MemberResetPassword', params: { id: memberId } });
+}
+</script>
+  
+  
+  <style scoped>
+  .container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .no-background {
+  background-color: transparent;
+}
+  
+.no-shadow {
+  box-shadow: none;
+}
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  input[type="email"],
+  input[type="text"],
+  input[type="date"],
+  input[type="tel"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  .search-input {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+  
+  .search-input input {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ccc;
+border-radius: 4px;
+outline: none;
+}
+.search-button {
+margin-left: 10px;
+background-color: #042444;
+color: white;
+transition: background-color 0.2s;
+}
+.search-button:hover {
+background-color: #1b2cba;
+}
+.search-results {
+max-height: 200px;
+overflow-y: auto;
+margin-bottom: 10px;
+border: 1px solid #ccc;
+border-radius: 4px;
+padding: 8px;
+}
+.search-result {
+padding: 8px;
+cursor: pointer;
+transition: background-color 0.2s;
+}
+.search-result:hover {
+background-color: #f5f5f5;
+}
+.search-result.selected {
+background-color: #e0e0e0;
+}
+.no-results {
+margin-bottom: 10px;
+color: #888;
+}
+.selected-item {
+display: flex;
+align-items: center;
+margin-bottom: 10px;
+padding: 8px;
+background-color: #f0f0f0;
+border-radius: 4px;
+}
+.clear-button {
+margin-left: 10px;
+background-color: #042444;
+color: white;
+transition: background-color 0.2s;
+}
+.clear-button:hover {
+background-color: #1b2cba;
+}
+.form-actions {
+display: flex;
+justify-content: flex-end;
+}
+.submit-button {
+padding: 10px 20px;
+background-color: #042444;
+color: white;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+transition: background-color 0.2s;
+}
+.submit-button:hover {
+background-color: #1b2cba;
+}
+.button-group {
+display: flex;
+gap: 10px;
+}
+.permission-button,
+.reset-password-button {
+padding: 10px 20px;
+background-color: #042444;
+color: white;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+transition: background-color 0.2s;
+}
+.permission-button:hover,
+.reset-password-button:hover {
+background-color: #1b2cba;
+}
+</style>
\ No newline at end of file

From fee191e694f4e33d6b034326e915b8dcc4c1c8ca Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 18:08:05 +0900
Subject: [PATCH 05/15] =?UTF-8?q?feat(manager):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/CreateUser.vue | 441 ++++++++++++++++++++++++++
 1 file changed, 441 insertions(+)
 create mode 100644 src/components/manager/CreateUser.vue

diff --git a/src/components/manager/CreateUser.vue b/src/components/manager/CreateUser.vue
new file mode 100644
index 0000000..cfcb591
--- /dev/null
+++ b/src/components/manager/CreateUser.vue
@@ -0,0 +1,441 @@
+<template>
+    <div class="container">
+      <h2>회원 생성</h2>
+      <form @submit.prevent="createMember">
+        <div class="form-group">
+          <label for="email">이메일:</label>
+          <input type="email" id="email" v-model="email" required />
+        </div>
+        <div class="form-group">
+          <label for="password">비밀번호:</label>
+          <input type="password" id="password" v-model="password" required />
+        </div>
+        <div class="form-group">
+          <label for="name">이름:</label>
+          <input type="text" id="name" v-model="name" required />
+        </div>
+        <div class="form-group">
+        <label for="role">권한:</label>
+        <select id="role" v-model="role" required>
+            <option value="ROLE_ADMIN">관리자</option>
+            <option value="ROLE_HR_MANAGER">인사 매니저</option>
+            <option value="ROLE_LEADER">리더</option>
+            <option value="ROLE_NORMAL">일반 사용자</option>
+        </select>
+        </div>
+        <div class="form-group">
+          <label for="team" class="label-bold">팀:</label>
+          <div class="search-input">
+            <input
+              v-model="teamSearch"
+              type="text"
+              placeholder="팀 이름 검색"
+              @input="searchTeams"
+              class="form-control"
+            />
+            <button @click="searchTeams" class="btn search-button">검색</button>
+          </div>
+          <div v-if="showTeamResults" class="search-results">
+            <div
+              v-for="team in filteredTeams"
+              :key="team.id"
+              class="search-result"
+              :class="{ 'selected': selectedTeam && selectedTeam.id === team.id }"
+              @click="selectTeam(team)"
+            >
+              {{ team.name }}
+            </div>
+            <div v-if="filteredTeams.length === 0 && teamSearch !== ''" class="no-results">
+              검색 결과가 없습니다.
+            </div>
+          </div>
+          <div v-if="selectedTeam" class="selected-item">
+            {{ selectedTeam.name }}
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="position" class="label-bold">직책:</label>
+          <div class="search-input">
+            <input
+              v-model="positionSearch"
+              type="text"
+              placeholder="직책 이름 검색"
+              @input="searchPositions"
+              class="form-control"
+            />
+            <button @click="searchPositions" class="btn search-button">검색</button>
+          </div>
+          <div v-if="showPositionResults" class="search-results">
+            <div
+              v-for="position in filteredPositions"
+              :key="position.id"
+              class="search-result"
+              :class="{ 'selected': selectedPosition && selectedPosition.id === position.id }"
+              @click="selectPosition(position)"
+            >
+              {{ position.name }}
+            </div>
+            <div v-if="filteredPositions.length === 0 && positionSearch !== ''" class="no-results">
+              검색 결과가 없습니다.
+            </div>
+          </div>
+          <div v-if="selectedPosition" class="selected-item">
+            {{ selectedPosition.name }}
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="rank" class="label-bold">직급:</label>
+          <div class="search-input">
+            <input
+              v-model="rankSearch"
+              type="text"
+              placeholder="직급 이름 검색"
+              @input="searchRanks"
+              class="form-control"
+            />
+            <button @click="searchRanks" class="btn search-button">검색</button>
+          </div>
+          <div v-if="showRankResults" class="search-results">
+            <div
+              v-for="rank in filteredRanks"
+              :key="rank.id"
+              class="search-result"
+              :class="{ 'selected': selectedRank && selectedRank.id === rank.id }"
+              @click="selectRank(rank)"
+            >
+              {{ rank.name }}
+            </div>
+            <div v-if="filteredRanks.length === 0 && rankSearch !== ''" class="no-results">
+              검색 결과가 없습니다.
+            </div>
+          </div>
+          <div v-if="selectedRank" class="selected-item">
+            {{ selectedRank.name }}
+          </div>
+        </div>
+        <button type="submit" class="submit-button" :disabled="!isFormValid">생성</button>
+      </form>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed } from 'vue';
+  import { useRouter } from 'vue-router';
+  import axios from 'axios';
+  
+  const router = useRouter();
+  const email = ref('');
+  const password = ref('');
+  const name = ref('');
+  const role = ref('ROLE_NORMAL');
+  const teamSearch = ref('');
+  const positionSearch = ref('');
+  const rankSearch = ref('');
+  const selectedTeam = ref(null);
+  const selectedPosition = ref(null);
+  const selectedRank = ref(null);
+  const teams = ref([]);
+  const positions = ref([]);
+  const ranks = ref([]);
+  const showTeamResults = ref(false);
+  const showPositionResults = ref(false);
+  const showRankResults = ref(false);
+  
+  const filteredTeams = computed(() => {
+    if (!teamSearch.value) {
+      return teams.value;
+    }
+    return teams.value.filter(team =>
+      team.name.toLowerCase().includes(teamSearch.value.toLowerCase())
+    );
+  });
+  
+  const filteredPositions = computed(() => {
+    if (!positionSearch.value) {
+      return positions.value;
+    }
+    return positions.value.filter(position =>
+      position.name.toLowerCase().includes(positionSearch.value.toLowerCase())
+    );
+  });
+  
+  const filteredRanks = computed(() => {
+    if (!rankSearch.value) {
+      return ranks.value;
+    }
+    return ranks.value.filter(rank =>
+      rank.name.toLowerCase().includes(rankSearch.value.toLowerCase())
+    );
+  });
+  
+  const isFormValid = computed(() => {
+    return selectedTeam.value && selectedPosition.value && selectedRank.value;
+  });
+  
+  async function fetchTeams() {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.get('http://localhost:5000/organization/find/team/all', {
+        headers: {
+          Authorization: token,
+        },
+      });
+      teams.value = response.data;
+    } catch (error) {
+      console.error('Failed to fetch teams:', error);
+      // 팀 정보를 불러오는 데 실패해도 경고 메시지를 표시하지 않습니다.
+    }
+  }
+  
+  async function fetchPositions() {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.get('http://localhost:5000/duty/find/position/all', {
+        headers: {
+          Authorization: token,
+        },
+      });
+      positions.value = response.data.position;
+    } catch (error) {
+      console.error('Failed to fetch positions:', error);
+      alert('직책 정보를 불러오는데 실패했습니다.');
+    }
+  }
+  
+  async function fetchRanks() {
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.get('http://localhost:5000/duty/find/rank/all', {
+        headers: {
+          Authorization: token,
+        },
+      });
+      ranks.value = response.data.rank;
+    } catch (error) {
+      console.error('Failed to fetch ranks:', error);
+      alert('직급 정보를 불러오는데 실패했습니다.');
+    }
+  }
+  
+  async function searchTeams() {
+    if (teamSearch.value === '') {
+      await fetchTeams();
+      showTeamResults.value = false;
+      return;
+    }
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.post('http://localhost:5000/organization/find/team/name', {
+        name: teamSearch.value,
+      }, {
+        headers: {
+          Authorization: token,
+        },
+      });
+      teams.value = response.data;
+      showTeamResults.value = true;
+    } catch (error) {
+      console.error('Failed to search teams:', error);
+    }
+  }
+  
+  async function searchPositions() {
+    if (positionSearch.value === '') {
+      await fetchPositions();
+      showPositionResults.value = false;
+      return;
+    }
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.get(`http://localhost:5000/duty/find/position/${positionSearch.value}`, {
+        headers: {
+          Authorization: token,
+        },
+      });
+      positions.value = response.data.position;
+      showPositionResults.value = true;
+    } catch (error) {
+      console.error('Failed to search positions:', error);
+    }
+  }
+  
+  async function searchRanks() {
+    if (rankSearch.value === '') {
+      await fetchRanks();
+      showRankResults.value = false;
+      return;
+    }
+    try {
+      const token = localStorage.getItem('token');
+      const response = await axios.get(`http://localhost:5000/duty/find/rank/${rankSearch.value}`, {
+        headers: {
+          Authorization: token,
+        },
+      });
+      ranks.value = response.data.rank;
+      showRankResults.value = true;
+    } catch (error) {
+      console.error('Failed to search ranks:', error);
+    }
+  }
+  
+  function selectTeam(team) {
+    selectedTeam.value = team;
+    teamSearch.value = team.name;
+    showTeamResults.value = false;
+  }
+  
+  function selectPosition(position) {
+    selectedPosition.value = position;
+    positionSearch.value = position.name;
+    showPositionResults.value = false;
+  }
+  
+  function selectRank(rank) {
+    selectedRank.value = rank;
+    rankSearch.value = rank.name;
+    showRankResults.value = false;
+  }
+  
+  async function createMember() {
+  try {
+    const token = localStorage.getItem('token');
+    await axios.post('http://localhost:5000/manager/signup', {
+      email: email.value,
+      password: password.value,
+      name: name.value,
+      role: role.value,
+      teamId: selectedTeam.value.id,
+      positionId: selectedPosition.value.id,
+      rankId: selectedRank.value.id,
+    }, {
+      headers: {
+        Authorization: token,
+      },
+    });
+
+    alert('회원이 성공적으로 생성되었습니다.');
+    router.push('/manager'); 
+  } catch (error) {
+    console.error('Failed to create member:', error);
+    if (error.response && error.response.status === 400) {
+      // 서버에서 400 Bad Request 응답을 반환한 경우
+      // 이는 요청 데이터에 문제가 있었음을 의미합니다.
+      alert('회원 생성 요청이 잘못되었습니다. 입력 데이터를 확인하세요.');
+    } else if (error.response && error.response.status === 500) {
+      // 서버에서 500 Internal Server Error 응답을 반환한 경우
+      // 서버 측 오류입니다.
+      alert('서버 오류로 인해 회원 생성에 실패했습니다. 잠시 후 다시 시도해 주세요.');
+    } else {
+      // 기타 오류
+      alert('회원 생성에 실패했습니다. 다시 시도해주세요.');
+    }
+  }
+}
+  </script>
+  
+  
+  <style scoped>
+  .container {
+    max-width: 500px;
+    margin: 0 auto;
+    padding: 20px;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  label {
+    font-weight: bold;
+    display: block;
+    margin-bottom: 5px;
+  }
+  
+  input[type="email"],
+  input[type="password"],
+  input[type="text"],
+  input[type="number"],
+  select {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+  
+  .submit-button {
+    padding: 10px 20px;
+    background-color: #042444;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+  
+  .submit-button:hover {
+    background-color: #1b2cba;
+  }
+
+  .search-input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.search-input input {
+  flex: 1;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  outline: none;
+}
+
+.search-button {
+  margin-left: 10px;
+  background-color: #042444;
+  color: white;
+  transition: background-color 0.2s;
+}
+
+.search-button:hover {
+  background-color: #1b2cba;
+}
+
+.search-results {
+  max-height: 200px;
+  overflow-y: auto;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+}
+
+.search-result {
+  padding: 8px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.search-result:hover {
+  background-color: #f5f5f5;
+}
+
+.search-result.selected {
+  background-color: #e0e0e0;
+}
+
+.no-results {
+  margin-bottom: 10px;
+  color: #888;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  padding: 8px;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+}
+  </style>
\ No newline at end of file

From 9d3848ed5f75ee97559525bcb0dd85d59894d31a Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 18:13:06 +0900
Subject: [PATCH 06/15] =?UTF-8?q?style(manager):=20=ED=9A=8C=EC=9B=90=20?=
 =?UTF-8?q?=EA=B2=80=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/SearchUser.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/manager/SearchUser.vue b/src/components/manager/SearchUser.vue
index fb27c84..68dd023 100644
--- a/src/components/manager/SearchUser.vue
+++ b/src/components/manager/SearchUser.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="container">
+    <div>
+      <h1>관리자 페이지</h1>
+    </div>
+    <div style="height: 20px;"></div>
     <div class="header no-background no-shadow">
       <h2>회원 검색</h2>
       <button class="create-button" @click="goToMemberCreate">회원 생성</button>

From 86c68a6ba623bf62865fcef933a2e01b3044d005 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 19:59:16 +0900
Subject: [PATCH 07/15] =?UTF-8?q?refactor(manager):=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=84=B0=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/EditUser.vue          |  6 +--
 src/components/manager/EditUserRole.vue      |  2 +-
 src/components/manager/ResetUserPassword.vue |  2 +-
 src/components/manager/SearchUser.vue        | 39 +++++++-------------
 4 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/components/manager/EditUser.vue b/src/components/manager/EditUser.vue
index fd3fe88..cf9384c 100644
--- a/src/components/manager/EditUser.vue
+++ b/src/components/manager/EditUser.vue
@@ -371,7 +371,7 @@ async function updateMember() {
 
     if (response.status === 200) {
       alert('회원 정보가 성공적으로 수정되었습니다.');
-      router.push({ name: 'MemberSearch' });
+      router.push({ name: 'SearchUser' });
     } else {
       alert('회원 정보 수정에 실패했습니다. 다시 시도해주세요.');
     }
@@ -382,11 +382,11 @@ async function updateMember() {
 }
 
 function goToMemberPermission() {
-  router.push({ name: 'MemberPermission', params: { id: memberId } });
+  router.push({ name: 'EditUserRole', params: { id: memberId } });
 }
 
 function goToMemberResetPassword() {
-  router.push({ name: 'MemberResetPassword', params: { id: memberId } });
+  router.push({ name: 'ResetUserPassword', params: { id: memberId } });
 }
 </script>
   
diff --git a/src/components/manager/EditUserRole.vue b/src/components/manager/EditUserRole.vue
index 9abecf1..026ebf3 100644
--- a/src/components/manager/EditUserRole.vue
+++ b/src/components/manager/EditUserRole.vue
@@ -36,7 +36,7 @@
         },
       });
       alert('회원 권한이 성공적으로 수정되었습니다.');
-      router.push({ name: 'MemberEdit', params: { id: memberId } });
+      router.push({ name: 'EditUser', params: { id: memberId } });
     } catch (error) {
       console.error('Failed to update member permission:', error);
       alert('회원 권한 수정에 실패했습니다. 다시 시도해주세요.');
diff --git a/src/components/manager/ResetUserPassword.vue b/src/components/manager/ResetUserPassword.vue
index c5ac8ad..8a4e4a2 100644
--- a/src/components/manager/ResetUserPassword.vue
+++ b/src/components/manager/ResetUserPassword.vue
@@ -27,7 +27,7 @@
   
       const newPassword = response.data.password;
       alert(`회원의 비밀번호가 초기화되었습니다. 새로운 비밀번호: ${newPassword}`);
-      router.push({ name: 'MemberEdit', params: { id: memberId } });
+      router.push({ name: 'EditUser', params: { id: memberId } });
     } catch (error) {
       console.error('Failed to reset member password:', error);
       // 오류 처리 로직 추가
diff --git a/src/components/manager/SearchUser.vue b/src/components/manager/SearchUser.vue
index 68dd023..06f4e36 100644
--- a/src/components/manager/SearchUser.vue
+++ b/src/components/manager/SearchUser.vue
@@ -12,7 +12,7 @@
       <input
         type="text"
         v-model="searchKeyword"
-        placeholder="이름 또는 이메일 검색"
+        placeholder="이름 검색(한 글자 이상)"
         class="search-input"
         @input="searchMembers"
         @keyup.enter="searchMembers"
@@ -50,43 +50,30 @@ const members = ref([]);
 async function searchMembers() {
   try {
     const token = localStorage.getItem('token');
-    let response;
-    if (searchKeyword.value.includes('@')) {
-      response = await axios.get(
-        `http://localhost:5000/employee/find/email/${searchKeyword.value}`,
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-    } else {
-      response = await axios.post(
-        'http://localhost:5000/employee/find/name',
-        {
-          name: searchKeyword.value,
+    const response = await axios.post(
+      'http://localhost:5000/employee/find/name',
+      {
+        name: searchKeyword.value,
+      },
+      {
+        headers: {
+          Authorization: token,
         },
-        {
-          headers: {
-            Authorization: token,
-          },
-        }
-      );
-    }
+      }
+    );
     members.value = response.data.employee;
   } catch (error) {
     console.error('Failed to search members:', error);
-    // 오류 처리 로직 추가
     alert('회원 검색에 실패했습니다. 다시 시도해주세요.');
   }
 }
 
 function selectMember(member) {
-  router.push({ name: 'MemberEdit', params: { id: member.id } });
+  router.push({ name: 'EditUser', params: { id: member.id } });
 }
 
 function goToMemberCreate() {
-  router.push({ name: 'MemberCreate' });
+  router.push({ name: 'CreateUser' });
 }
 </script>
 

From 18ff03a4278263b268fa66d2d0e7ce3bd2e647fa Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 19:59:31 +0900
Subject: [PATCH 08/15] =?UTF-8?q?feat(manager):=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=84=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/mainRouter.js | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/router/mainRouter.js b/src/router/mainRouter.js
index dc5c565..f3b02a3 100644
--- a/src/router/mainRouter.js
+++ b/src/router/mainRouter.js
@@ -43,6 +43,13 @@ import FavoritePosts from '@/components/user/FavoritePosts.vue';
 import MyComments from '@/components/user/MyComments.vue';
 import MyPosts from '@/components/user/MyPosts.vue';
 
+import Manager from '@/views/Manager.vue';
+import CreateUser from '@/components/manager/CreateUser.vue';
+import EditUser from '@/components/manager/EditUser.vue';
+import EditUserRole from '@/components/manager/EditUserRole.vue';
+import ResetUserPassword from '@/components/manager/ResetUserPassword.vue';
+import SearchUser from '@/components/manager/SearchUser.vue';
+
 const router = createRouter({
     history: createWebHistory(),
     routes: [
@@ -79,6 +86,36 @@ const router = createRouter({
             path: '/my-page/comments',
             component: MyComments
         },
+        {
+            path: '/manager',
+            component: Manager,
+            children: [
+                {
+                path: '',
+                component: SearchUser,
+                },
+                {
+                path: 'create',
+                name: 'CreateUser',
+                component: CreateUser,
+                },
+                {
+                path: 'edit/:id',
+                name: 'EditUser',
+                component: EditUser,
+                },
+                {
+                path: 'permission/:id',
+                name: 'EditUserRole',
+                component: EditUserRole,
+                },
+                {
+                path: 'reset-password/:id',
+                name: 'ResetUserPassword',
+                component: ResetUserPassword,
+                },
+            ],
+        },
         {
             path: '/search',
             component: SearchView,

From 433176c9421a452de98723088d87c79daff5afd5 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:12:02 +0900
Subject: [PATCH 09/15] =?UTF-8?q?refactor(manager):=20=ED=9A=8C=EC=9B=90?=
 =?UTF-8?q?=20=EC=A1=B0=ED=9A=8C=20=EA=B8=B0=EB=8A=A5=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/SearchUser.vue | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/manager/SearchUser.vue b/src/components/manager/SearchUser.vue
index 06f4e36..b7a5d3d 100644
--- a/src/components/manager/SearchUser.vue
+++ b/src/components/manager/SearchUser.vue
@@ -48,6 +48,11 @@ const searchKeyword = ref('');
 const members = ref([]);
 
 async function searchMembers() {
+  if (searchKeyword.value.length === 0) {
+    members.value = [];
+    return;
+  }
+  
   try {
     const token = localStorage.getItem('token');
     const response = await axios.post(
@@ -69,11 +74,11 @@ async function searchMembers() {
 }
 
 function selectMember(member) {
-  router.push({ name: 'EditUser', params: { id: member.id } });
+  router.push({ name: 'MemberEdit', params: { id: member.id } });
 }
 
 function goToMemberCreate() {
-  router.push({ name: 'CreateUser' });
+  router.push({ name: 'MemberCreate' });
 }
 </script>
 
@@ -179,4 +184,4 @@ function goToMemberCreate() {
   font-size: 14px;
   color: #888;
 }
-</style>
\ No newline at end of file
+</style>

From cc25d2e22ae19a6f9761fdc4f349d9f021e559f6 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:14:18 +0900
Subject: [PATCH 10/15] =?UTF-8?q?refactor(manager):=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=84=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/mainRouter.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/router/mainRouter.js b/src/router/mainRouter.js
index f3b02a3..0e80b45 100644
--- a/src/router/mainRouter.js
+++ b/src/router/mainRouter.js
@@ -105,7 +105,7 @@ const router = createRouter({
                 component: EditUser,
                 },
                 {
-                path: 'permission/:id',
+                path: 'edit-user-role/:id',
                 name: 'EditUserRole',
                 component: EditUserRole,
                 },

From 9295aa04b588e704afccec53cf274d6735c80ded Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:37:05 +0900
Subject: [PATCH 11/15] =?UTF-8?q?feat(manager,=20approval):=20=ED=97=A4?=
 =?UTF-8?q?=EB=8D=94=EC=97=90=20=EA=B2=B0=EC=9E=AC,=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=EC=9E=90=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 결재 버튼은 로그인하면 다 보이게 만듦
- 관리자 버튼은 로그인한 사람이 ROLE_HR_MANAGER 또는 ROLE_ADMIN일 때만 보이게 만듦
---
 src/views/Header.vue | 271 +++++++++++++++++++++++++------------------
 1 file changed, 160 insertions(+), 111 deletions(-)

diff --git a/src/views/Header.vue b/src/views/Header.vue
index 5dee77c..5a8cdd4 100644
--- a/src/views/Header.vue
+++ b/src/views/Header.vue
@@ -1,152 +1,201 @@
 <template>
     <header class="header">
-        <div class="header-left">
-            <div class="logo">
-                <img src="@/assets/images/logo_header.png" alt="Logo" @click="navigateTo('/')" />
-            </div>
-        </div>
-
-        <div class="header-center">
-
-            <span class="search-type">
-                <select v-model="search.type" class="form-select pt-1 search-type"
-                    style="width:fit-content; vertical-align: middle; margin-right: 10px;">
-                    <option value="title">제목</option>
-                    <option value="content">내용</option>
-                    <option value="tag">태그</option>
-                </select>
-            </span>
-
-            <b-form-tags v-if="search.type == 'tag'" class="form-select pt-1 search-input" input-id="tags-separators"
-                v-model="search.tags" separator=" " placeholder="태그 입력 후, 스페이스 바를 눌러주세요." no-add-on-enter></b-form-tags>
-
-            <input v-else type="text" v-model="search.keyword" placeholder="검색어를 입력하세요" class="search-input" />
-            <button class="search-button" @click="searchPost">
-                <img src="@/assets/icons/search_icon.png" alt="Search" />
-            </button>
-        </div>
-
-        <div class="header-right">
-            <button class="profile-button" @click="navigateToProfile">
-                <img src="@/assets/images/profile_image.png" alt="Profile" />
-                <!-- Employee의 image -->
-            </button>
+      <div class="header-left">
+        <div class="logo">
+          <img src="@/assets/images/logo_header.png" alt="Logo" @click="navigateTo('/')" />
         </div>
+      </div>
+      <div class="header-center">
+        <span class="search-type">
+          <select v-model="search.type" class="form-select pt-1 search-type"
+                  style="width:fit-content; vertical-align: middle; margin-right: 10px;">
+            <option value="title">제목</option>
+            <option value="content">내용</option>
+            <option value="tag">태그</option>
+          </select>
+        </span>
+        <b-form-tags v-if="search.type == 'tag'" class="form-select pt-1 search-input" input-id="tags-separators"
+                     v-model="search.tags" separator=" " placeholder="태그 입력 후, 스페이스 바를 눌러주세요." no-add-on-enter></b-form-tags>
+        <input v-else type="text" v-model="search.keyword" placeholder="검색어를 입력하세요" class="search-input" />
+        <button class="search-button" @click="searchPost">
+          <img src="@/assets/icons/search_icon.png" alt="Search" />
+        </button>
+      </div>
+      <div class="header-right">
+        <button v-if="isLoggedIn" class="approval-button" @click="navigateToApproval">
+          결재
+        </button>
+        <button v-if="isAdmin" class="admin-button" @click="navigateToManager">
+          관리자
+        </button>
+        <button class="profile-button" @click="navigateToProfile">
+          <img src="@/assets/images/profile_image.png" alt="Profile" />
+        </button>
+      </div>
     </header>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const search = ref({
+  </template>
+  
+  <script setup>
+  import { ref, computed, onMounted } from 'vue';
+  import { useRouter } from 'vue-router';
+  
+  const router = useRouter();
+  
+  const search = ref({
     type: 'title',
     keyword: '',
     title: null,
     content: null,
     tags: []
-});
-
-const navigateTo = (path) => {
+  });
+  
+  // 로그인 상태와 사용자 권한을 저장할 변수
+  const loggedIn = ref(false);
+  const role = ref('');
+  
+  // 로그인 상태와 사용자 권한을 확인하는 함수
+  const checkUserInfo = () => {
+    const token = localStorage.getItem('token');
+    const userRole = localStorage.getItem('role');
+  
+    if (token) {
+      loggedIn.value = true;
+      role.value = userRole;
+    } else {
+      loggedIn.value = false;
+      role.value = '';
+    }
+  };
+  
+  const isLoggedIn = computed(() => loggedIn.value);
+  const isAdmin = computed(() => ['ROLE_ADMIN', 'ROLE_HR_MANAGER'].includes(role.value));
+  
+  const navigateTo = (path) => {
     router.push({ path });
-};
-
-const navigateToProfile = () => {
+  };
+  
+  const navigateToProfile = () => {
     router.push({ path: '/my-page' });
-};
-
-const searchPost = () => {
-
+  };
+  
+  const searchPost = () => {
     const query = {
-        type: search.value.type,
-        keyword: search.value.keyword,
-        tags: search.value.type === 'tag' ? search.value.tags.join(',') : null
+      type: search.value.type,
+      keyword: search.value.keyword,
+      tags: search.value.type === 'tag' ? search.value.tags.join(',') : null
     };
-
     router.push({ path: '/search', query });
-};
-</script>
-
-<style>
+  };
+  
+  const navigateToApproval = () => {
+    router.push({ path: '/approval' });
+  };
+  
+  const navigateToManager = () => {
+    router.push({ path: '/manager' });
+  };
+  
+  onMounted(() => {
+    checkUserInfo();
+  });
+  </script>
+  
+  <style>
 .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #000;
-    width: 100%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #000;
+  width: 100%;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .header-left,
 .header-right {
-    display: flex;
-    align-items: center;
+  display: flex;
+  align-items: center;
 }
 
 .header-center {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .logo {
-    font-size: 24px;
-    font-weight: bold;
+  font-size: 24px;
+  font-weight: bold;
 }
 
-.logo>img {
-    width: 200px;
+.logo > img {
+  width: 200px;
 }
 
 .search-input {
-    width: 100%;
-    max-width: 800px;
-    padding: 5px 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px 4px 4px 4px;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-    outline: none;
+  width: 100%;
+  max-width: 800px;
+  padding: 5px 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  outline: none;
 }
 
 .search-button {
-    background-color: #042444;
-    border: none;
-    border-radius: 4px 4px 4px 4px;
-    padding: 5px 10px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  background-color: #042444;
+  border: none;
+  border-radius: 4px 4px 4px 4px;
+  padding: 5px 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.search-button>img {
-    width: 25px;
-    height: 25px;
-    filter: invert(100%);
+.search-button > img {
+  width: 25px;
+  height: 25px;
+  filter: invert(100%);
 }
 
 .profile-button {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    overflow: hidden;
-    width: 40px;
-    height: 40px;
-    margin-left: 20px;
-    margin-right: 20px;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  width: 40px;
+  height: 40px;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.profile-button > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.approval-button,
+.admin-button {
+  background-color: transparent;
+  color: #042444;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  margin-left: 10px;
+  font-weight: bold;
+  text-decoration: none;
+  transition: color 0.3s;
 }
 
-.profile-button>img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.approval-button:hover,
+.admin-button:hover {
+  color: #0c5195;
 }
-</style>
+</style>
\ No newline at end of file

From 50228a7050ccb200c789fac4195d0864fb54c647 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:39:04 +0900
Subject: [PATCH 12/15] =?UTF-8?q?feat(user):=20=EC=9D=B4=EB=AF=B8=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=ED=95=9C=20=EC=83=81=ED=83=9C?=
 =?UTF-8?q?=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=ED=8C=8C=ED=8C=9D=EC=97=85?=
 =?UTF-8?q?=EC=B0=BD=20=EB=9C=A8=EA=B3=A0=20=EC=9C=84=ED=82=A4=20=EA=B8=80?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=98=EA=B2=8C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/Login.vue | 101 +++++++++++++++++++---------------
 1 file changed, 56 insertions(+), 45 deletions(-)

diff --git a/src/components/user/Login.vue b/src/components/user/Login.vue
index 0eb3949..d78bfd4 100644
--- a/src/components/user/Login.vue
+++ b/src/components/user/Login.vue
@@ -1,52 +1,63 @@
 <template>
-    <div class="container">
-      <div class="login-form">
-        <h2 class="form-title">로그인</h2>
-        <form @submit.prevent="login">
-          <div class="form-group">
-            <label for="email">이메일</label>
-            <input type="email" id="email" v-model="email" required class="form-input" />
-          </div>
-          <div class="form-group">
-            <label for="password">비밀번호</label>
-            <input type="password" id="password" v-model="password" required class="form-input" />
-          </div>
-          <button type="submit" class="login-button">로그인</button>
-        </form>
-      </div>
+  <div class="container">
+    <div class="login-form">
+      <h2 class="form-title">로그인</h2>
+      <form @submit.prevent="login">
+        <div class="form-group">
+          <label for="email">이메일</label>
+          <input type="email" id="email" v-model="email" required class="form-input" />
+        </div>
+        <div class="form-group">
+          <label for="password">비밀번호</label>
+          <input type="password" id="password" v-model="password" required class="form-input" />
+        </div>
+        <button type="submit" class="login-button">로그인</button>
+      </form>
     </div>
-  </template>
-  
-  <script setup>
-  import { ref } from 'vue';
-  import axios from 'axios';
-  import { useRouter } from 'vue-router';
-  
-  const router = useRouter();
-  const email = ref('');
-  const password = ref('');
-  
-  async function login() {
-    try {
-      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');
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+import { useRouter } from 'vue-router';
 
-        return response.data;
-      })
-      // 로그인 성공 시 처리할 로직 추가
-      
-    } catch (error) {
-      console.error('Failed to login:', error);
-      // 로그인 실패 시 처리할 로직 추가
-      alert('로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.');
-    }
+const router = useRouter();
+const email = ref('');
+const password = ref('');
+
+// 로그인 상태 확인 함수
+const checkLoginStatus = () => {
+  const token = localStorage.getItem('token');
+  if (token) {
+    alert('이미 로그인한 상태입니다.');
+    router.push('/wiki/posts');
+  }
+};
+
+async function login() {
+  try {
+    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;
+    });
+    // 로그인 성공 시 처리할 로직 추가
+  } catch (error) {
+    console.error('Failed to login:', error);
+    // 로그인 실패 시 처리할 로직 추가
+    alert('로그인에 실패했습니다. 이메일과 비밀번호를 확인해주세요.');
   }
-  </script>
+}
+
+onMounted(() => {
+  checkLoginStatus();
+});
+</script>
   
   <style scoped>
   .container {

From 04153b6374222d6ff874d501bbb77d9cc7058d32 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:41:46 +0900
Subject: [PATCH 13/15] =?UTF-8?q?refactor(anonymous-board):=20=EA=B6=8C?=
 =?UTF-8?q?=ED=95=9C=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EA=B8=80=20=EC=82=AD=EC=A0=9C=20=EB=B2=84=ED=8A=BC=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EA=B2=8C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- HR_MANAGER 또는 ADMIN일 때만 게시글 삭제 버튼 보이게 수정
---
 src/components/anonymous-board/AnonymousBoardDetail.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/anonymous-board/AnonymousBoardDetail.vue b/src/components/anonymous-board/AnonymousBoardDetail.vue
index 9c84340..d15bbfd 100644
--- a/src/components/anonymous-board/AnonymousBoardDetail.vue
+++ b/src/components/anonymous-board/AnonymousBoardDetail.vue
@@ -6,7 +6,7 @@
         <hr class="title-separator" />
         <div class="board-actions">
           <button @click="goToBoardList" class="list-button">글 목록</button>
-          <button @click="deleteAnonymousBoard" v-if="isAdmin" class="delete-button">삭제</button>
+          <button @click="deleteAnonymousBoard" v-if="isHrManagerOrAdmin" class="delete-button">삭제</button>
         </div>
       </div>
       <div class="board-info">
@@ -68,6 +68,11 @@ 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);
+});
+
 onMounted(() => {
   fetchAnonymousBoardById();
   fetchAnonymousBoardCommentList();

From 9cff4d546b33c435e42625fb88aaf127a2bbbcc8 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:49:33 +0900
Subject: [PATCH 14/15] =?UTF-8?q?refactor(manager):=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=84=B0=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/manager/SearchUser.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/manager/SearchUser.vue b/src/components/manager/SearchUser.vue
index b7a5d3d..d587967 100644
--- a/src/components/manager/SearchUser.vue
+++ b/src/components/manager/SearchUser.vue
@@ -74,11 +74,11 @@ async function searchMembers() {
 }
 
 function selectMember(member) {
-  router.push({ name: 'MemberEdit', params: { id: member.id } });
+  router.push({ name: 'EditUser', params: { id: member.id } });
 }
 
 function goToMemberCreate() {
-  router.push({ name: 'MemberCreate' });
+  router.push({ name: 'CreateUser' });
 }
 </script>
 

From 0deab360bc6c3e497b3f0fb981dbadfe4f7a17a6 Mon Sep 17 00:00:00 2001
From: noctesilente <mox9nox@gmail.com>
Date: Wed, 5 Jun 2024 20:50:12 +0900
Subject: [PATCH 15/15] =?UTF-8?q?feat(header):=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B2=84=ED=8A=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Header.vue | 296 ++++++++++++++++++++++---------------------
 1 file changed, 155 insertions(+), 141 deletions(-)

diff --git a/src/views/Header.vue b/src/views/Header.vue
index 5a8cdd4..5fa199a 100644
--- a/src/views/Header.vue
+++ b/src/views/Header.vue
@@ -28,36 +28,39 @@
         <button v-if="isAdmin" class="admin-button" @click="navigateToManager">
           관리자
         </button>
+        <button v-if="isLoggedIn" class="logout-button" @click="logout">
+          로그아웃
+        </button>
         <button class="profile-button" @click="navigateToProfile">
           <img src="@/assets/images/profile_image.png" alt="Profile" />
         </button>
       </div>
     </header>
-  </template>
-  
-  <script setup>
-  import { ref, computed, onMounted } from 'vue';
-  import { useRouter } from 'vue-router';
-  
-  const router = useRouter();
-  
-  const search = ref({
+   </template>
+   
+   <script setup>
+   import { ref, computed, onMounted } from 'vue';
+   import { useRouter } from 'vue-router';
+   
+   const router = useRouter();
+   
+   const search = ref({
     type: 'title',
     keyword: '',
     title: null,
     content: null,
     tags: []
-  });
-  
-  // 로그인 상태와 사용자 권한을 저장할 변수
-  const loggedIn = ref(false);
-  const role = ref('');
-  
-  // 로그인 상태와 사용자 권한을 확인하는 함수
-  const checkUserInfo = () => {
+   });
+   
+   // 로그인 상태와 사용자 권한을 저장할 변수
+   const loggedIn = ref(false);
+   const role = ref('');
+   
+   // 로그인 상태와 사용자 권한을 확인하는 함수
+   const checkUserInfo = () => {
     const token = localStorage.getItem('token');
     const userRole = localStorage.getItem('role');
-  
+   
     if (token) {
       loggedIn.value = true;
       role.value = userRole;
@@ -65,137 +68,148 @@
       loggedIn.value = false;
       role.value = '';
     }
-  };
-  
-  const isLoggedIn = computed(() => loggedIn.value);
-  const isAdmin = computed(() => ['ROLE_ADMIN', 'ROLE_HR_MANAGER'].includes(role.value));
-  
-  const navigateTo = (path) => {
+   };
+   
+   const isLoggedIn = computed(() => loggedIn.value);
+   const isAdmin = computed(() => ['ROLE_ADMIN', 'ROLE_HR_MANAGER'].includes(role.value));
+   
+   const navigateTo = (path) => {
     router.push({ path });
-  };
-  
-  const navigateToProfile = () => {
+   };
+   
+   const navigateToProfile = () => {
     router.push({ path: '/my-page' });
-  };
-  
-  const searchPost = () => {
+   };
+   
+   const searchPost = () => {
     const query = {
       type: search.value.type,
       keyword: search.value.keyword,
       tags: search.value.type === 'tag' ? search.value.tags.join(',') : null
     };
     router.push({ path: '/search', query });
-  };
-  
-  const navigateToApproval = () => {
+   };
+   
+   const navigateToApproval = () => {
     router.push({ path: '/approval' });
-  };
-  
-  const navigateToManager = () => {
+   };
+   
+   const navigateToManager = () => {
     router.push({ path: '/manager' });
-  };
-  
-  onMounted(() => {
+   };
+   
+   const logout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('role');
+    loggedIn.value = false;
+    role.value = '';
+    alert('로그아웃되었습니다.');
+    router.push('/login');
+   };
+   
+   onMounted(() => {
     checkUserInfo();
-  });
-  </script>
-  
-  <style>
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #000;
-  width: 100%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.header-left,
-.header-right {
-  display: flex;
-  align-items: center;
-}
-
-.header-center {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.logo {
-  font-size: 24px;
-  font-weight: bold;
-}
-
-.logo > img {
-  width: 200px;
-}
-
-.search-input {
-  width: 100%;
-  max-width: 800px;
-  padding: 5px 10px;
-  border: 1px solid #ccc;
-  border-radius: 4px 4px 4px 4px;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  outline: none;
-}
-
-.search-button {
-  background-color: #042444;
-  border: none;
-  border-radius: 4px 4px 4px 4px;
-  padding: 5px 10px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.search-button > img {
-  width: 25px;
-  height: 25px;
-  filter: invert(100%);
-}
-
-.profile-button {
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  overflow: hidden;
-  width: 40px;
-  height: 40px;
-  margin-left: 20px;
-  margin-right: 20px;
-}
-
-.profile-button > img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.approval-button,
-.admin-button {
-  background-color: transparent;
-  color: #042444;
-  border: none;
-  padding: 5px 10px;
-  cursor: pointer;
-  margin-left: 10px;
-  font-weight: bold;
-  text-decoration: none;
-  transition: color 0.3s;
-}
-
-.approval-button:hover,
-.admin-button:hover {
-  color: #0c5195;
-}
-</style>
\ No newline at end of file
+   });
+   </script>
+   
+   <style>
+   .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: #000;
+    width: 100%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+   }
+   
+   .header-left,
+   .header-right {
+    display: flex;
+    align-items: center;
+   }
+   
+   .header-center {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+   }
+   
+   .logo {
+    font-size: 24px;
+    font-weight: bold;
+   }
+   
+   .logo > img {
+    width: 200px;
+   }
+   
+   .search-input {
+    width: 100%;
+    max-width: 800px;
+    padding: 5px 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px 4px 4px 4px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    outline: none;
+   }
+   
+   .search-button {
+    background-color: #042444;
+    border: none;
+    border-radius: 4px 4px 4px 4px;
+    padding: 5px 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+   }
+   
+   .search-button > img {
+    width: 25px;
+    height: 25px;
+    filter: invert(100%);
+   }
+   
+   .profile-button {
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    overflow: hidden;
+    width: 40px;
+    height: 40px;
+    margin-left: 20px;
+    margin-right: 20px;
+   }
+   
+   .profile-button > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+   }
+   
+   .approval-button,
+   .admin-button,
+   .logout-button {
+    background-color: transparent;
+    color: #042444;
+    border: none;
+    padding: 5px 10px;
+    cursor: pointer;
+    margin-left: 10px;
+    font-weight: bold;
+    text-decoration: none;
+    transition: color 0.3s;
+   }
+   
+   .approval-button:hover,
+   .admin-button:hover,
+   .logout-button:hover {
+    color: #0c5195;
+   }
+   </style>
\ No newline at end of file