diff --git a/.env.dev b/.env.dev
new file mode 100644
index 0000000..99081c1
--- /dev/null
+++ b/.env.dev
@@ -0,0 +1,5 @@
+VITE_DOMAIN = http://localhost:5173/
+# VITE_LOGIN_URL = http://localhost:10325/ms/
+# VITE_FILE_URL = http://localhost:10325/ms/
+# VITE_API_URL = http://localhost:10325/api/
+VITE_API_URL = http://localhost:10325/test/
\ No newline at end of file
diff --git a/public/css/custom.css b/public/css/custom.css
index 5c3e23b..2bf9c1b 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -29,68 +29,82 @@
 
 
 /* 휴가*/
-
 .half-day-buttons {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin-top: 20px;
-  }
-  .half-day-buttons .btn.active {
-    border: 2px solid black;
-  }
-  .fc-daygrid-day-frame {
-    min-height: 80px !important;
-    max-height: 120px !important;
-    overflow: hidden !important;
-    padding-top: 25px !important;
-  }
-  .fc-daygrid-day-events {
-    max-height: 100px !important;
-    overflow-y: auto !important;
-  }
-  .fc-daygrid-event {
-    position: absolute !important;
-    height: 20px !important;
-    width: 100% !important;
-    left: 0 !important;
-    margin: 2px 0 !important;
-    padding: 0 !important;
-    border-radius: 2px !important;
-    border: none !important;
-  }
-  .fc-daygrid-event-harness {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: flex-start;
-    width: 100%;
-    gap: 22px;
-  }
-  .fc-daygrid-event.half-day-am {
-    width: 45% !important;
-    left: 0 !important;
-  }
-  .fc-daygrid-event.half-day-pm {
-    width: 45% !important;
-    left: auto !important;
-    right: 0 !important;
-  }
-  .fc-daygrid-event.full-day {
-    width: 100% !important;
-    left: 0 !important;
-  }
-  .fc-day-sun .fc-daygrid-day-number,
-  .fc-col-header-cell:first-child .fc-col-header-cell-cushion {
-    color: #ff4500 !important;
-  }
-  .fc-day-sat .fc-daygrid-day-number,
-  .fc-col-header-cell:last-child .fc-col-header-cell-cushion {
-    color: #6076e0 !important;
-  }
-  .fc-daygrid-day-number {
-    position: absolute !important;
-    top: 0px !important;
-    left: 5px !important;
-    text-align: left !important;
-  }
\ No newline at end of file
+}
+.half-day-buttons .btn.active {
+  border: 2px solid black;
+}
+.fc-daygrid-day-frame {
+  min-height: 80px !important;
+  max-height: 120px !important;
+  overflow: hidden !important;
+  padding-top: 25px !important;
+}
+.fc-daygrid-day-events {
+  max-height: 100px !important;
+  overflow-y: auto !important;
+}
+.fc-daygrid-event {
+  position: absolute !important;
+  height: 20px !important;
+  width: 100% !important;
+  left: 0 !important;
+  margin: 2px 0 !important;
+  padding: 0 !important;
+  border-radius: 2px !important;
+  border: none !important;
+}
+.fc-daygrid-event-harness {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+  gap: 22px;
+}
+.fc-daygrid-event.half-day-am {
+  width: 45% !important;
+  left: 0 !important;
+}
+.fc-daygrid-event.half-day-pm {
+  width: 45% !important;
+  left: auto !important;
+  right: 0 !important;
+}
+.fc-daygrid-event.full-day {
+  width: 100% !important;
+  left: 0 !important;
+}
+.fc-day-sun .fc-daygrid-day-number,
+.fc-col-header-cell:first-child .fc-col-header-cell-cushion {
+  color: #ff4500 !important;
+}
+.fc-day-sat .fc-daygrid-day-number,
+.fc-col-header-cell:last-child .fc-col-header-cell-cushion {
+  color: #6076e0 !important;
+}
+.fc-daygrid-day-number {
+  position: absolute !important;
+  top: 0px !important;
+  left: 5px !important;
+  text-align: left !important;
+}
+
+.user-avatar {
+  border: 3px solid;
+  width: 110px;
+  height: 110px;
+  object-fit: cover;
+  background-color: white;
+  transition: transform 0.2s ease-in-out;
+}
+
+
+
+.grayscaleImg {
+  filter: grayscale(100%);
+}
\ No newline at end of file
diff --git a/src/common/axios-interceptor.js b/src/common/axios-interceptor.js
index 05f3abd..a6ae5a1 100644
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@@ -1,12 +1,12 @@
-import axios from "axios";
+import axios from 'axios';
 import { useRoute } from 'vue-router';
 import { useToastStore } from '@s/toastStore';
 
 const $api = axios.create({
     baseURL: 'http://localhost:10325/api/',
     timeout: 300000,
-    withCredentials : true
-})
+    withCredentials: true,
+});
 
 /**
  * Default Content-Type : json
@@ -14,7 +14,6 @@ const $api = axios.create({
  */
 $api.interceptors.request.use(
     function (config) {
-
         let contentType = 'application/json';
 
         if (config.isFormData) contentType = 'multipart/form-data';
@@ -23,21 +22,21 @@ $api.interceptors.request.use(
         config.headers['X-Requested-With'] = 'XMLHttpRequest';
 
         return config;
-    }, function (error) {
+    },
+    function (error) {
         // 요청 오류가 있는 작업 수행
         return Promise.reject(error);
-    }
+    },
 );
 
 // 응답 인터셉터 추가하기
 $api.interceptors.response.use(
-
     function (response) {
         // 2xx 범위의 응답 처리
         return response;
     },
     function (error) {
-        const toastStore = useToastStore()
+        const toastStore = useToastStore();
         const currentPage = error.config.headers['X-Page-Route'];
         // 오류 응답 처리
         if (error.response) {
@@ -70,7 +69,7 @@ $api.interceptors.response.use(
         }
 
         return Promise.reject(error);
-    }
+    },
 );
 
 export default $api;
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index e90055c..7125374 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -62,17 +62,19 @@ watch(() => props.dislikeCount, (newVal) => {
 });
 
 const handleLike = () => {
-    console.log('좋아요',likeCount.value)
-    // emit('updateReaction', { type: 'like', boardId: props.boardId, commentId: props.commentId });
-    // likeClicked.value = true;
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: true, isDislike: false });
+    const isLike = !likeClicked.value;
+    const isDislike = false;
+    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+    likeClicked.value = isLike;
+    dislikeClicked.value = false;
 };
 
 const handleDislike = () => {
-    console.log('싫어요')
-    // emit('updateReaction', { type: 'dislike', boardId: props.boardId, commentId: props.commentId });
-    // dislikeClicked.value = true;
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike: false, isDislike: true });
+    const isDislike = !dislikeClicked.value;
+    const isLike = false;
+    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+    dislikeClicked.value = isDislike;
+    likeClicked.value = false;
 };
 
 </script>
diff --git a/src/components/user/LoginForm.vue b/src/components/user/LoginForm.vue
index 55b1e4a..48a3c77 100644
--- a/src/components/user/LoginForm.vue
+++ b/src/components/user/LoginForm.vue
@@ -1,14 +1,7 @@
 <template>
     <form @submit.prevent="handleSubmit">
         <div class="col-xl-12">
-            <UserFormInput
-                title="아이디"
-                name="id"
-                :is-alert="idAlert"
-                :useInputGroup="true"
-                @update:data="handleIdChange"
-                :value="id"
-            />
+            <UserFormInput title="아이디" name="id" :is-alert="idAlert" :useInputGroup="true" @update:data="handleIdChange" :value="id" />
 
             <UserFormInput
                 title="비밀번호"
@@ -63,17 +56,24 @@
     };
 
     const handleSubmit = async () => {
-        $api.post('user/login', {
-            loginId: id.value,
-            password: password.value,
-            remember: remember.value,
-        }, { headers: { 'X-Page-Route': route.path } })
-        .then(res => {
+        $api.post(
+            'user/login',
+            {
+                loginId: id.value,
+                password: password.value,
+                remember: remember.value,
+            },
+            { headers: { 'X-Page-Route': route.path } },
+        ).then(res => {
             if (res.status === 200) {
+                // TODO: 개발용 로그인 쿠키세팅이므로 차후 삭제
+                const sessionCookie = res.data.data;
+                document.cookie = `JSESSIONID=${sessionCookie};path=/;expires=-1;`;
+                document.cookie = `JSESSIONID=${sessionCookie};path=/`;
+
                 userStore.userInfo();
                 router.push('/');
             }
-        })
+        });
     };
-
 </script>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 32e7ce0..ba4d594 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -1,54 +1,54 @@
 <template>
-    <div class="users-list-wrapper">
-      <button class="scroll-btn left" @click="scrollLeft">❮</button>
-
-      <div class="users-list-container" ref="userListContainer">
-        <ul class="list-unstyled users-list d-flex align-items-center justify-content-start">
-          <li
-            v-for="(user, index) in userList"
+    <div class="card-body d-flex justify-content-center">
+        <ul class="list-unstyled d-flex align-items-center gap-7 mb-0 mt-2">
+            <li
+            v-for="(user, index) in sortedUserList"
             :key="index"
-            class="avatar pull-up position-relative"
             :class="{ disabled: user.disabled }"
             @click="toggleDisable(index)"
-            data-bs-toggle="tooltip"
-            data-popup="tooltip-custom"
             data-bs-placement="top"
             :aria-label="user.MEMBERSEQ"
-            :data-bs-original-title="getTooltipTitle(user)"
-          >
-            <div class="tooltip-custom">{{ getTooltipTitle(user) }}</div>
+            >
             <img
-              class="rounded-circle user-avatar"
-              :src="getUserProfileImage(user.MEMBERPRF)"
-              alt="user"
-              :style="{ borderColor: user.usercolor }"
-              @error="setDefaultImage"
-              @load="showImage"
+                class="rounded-circle user-avatar"
+                :src="getUserProfileImage(user.MEMBERPRF)"
+                alt="user"
+                :style="getDynamicStyle(user)"
+                @error="setDefaultImage"
+                @load="showImage"
             />
-          </li>
+            </li>
         </ul>
-      </div>
-
-      <button class="scroll-btn right" @click="scrollRight">❯</button>
     </div>
   </template>
 
   <script setup>
-  import { onMounted, ref, nextTick } from "vue";
-  import { useUserStore } from "@s/userList";
+  import { onMounted, ref, computed, nextTick } from "vue";
+  import { useUserStore } from "@s/useUserStore"; // 사용자 정보 스토어 사용
+  import { useUserStore as useUserListStore } from "@s/userList"; // 사원 리스트 스토어
   import $api from "@api";
 
-  const emit = defineEmits();
   const userStore = useUserStore();
-  const userList = ref([]);
-  const userListContainer = ref(null); // 프로필 목록 컨테이너 참조
-  const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
-  const defaultProfile = "/img/icons/icon.png"; // 기본 이미지 경로
+  const userListStore = useUserListStore();
+
+  const userList = ref([]);
+  const userListContainer = ref(null);
+  const baseUrl = $api.defaults.baseURL.replace(/api\/$/, "");
+  const defaultProfile = "/img/icons/icon.png";
+
+  const employeeId = ref(null); // 현재 로그인한 사용자 ID
 
-  // ✅ 사용자 목록 호출
   onMounted(async () => {
-    await userStore.fetchUserList();
-    userList.value = userStore.userList;
+    await userStore.userInfo(); // 로그인한 사용자 정보 가져오기
+    await userListStore.fetchUserList(); // 사원 리스트 가져오기
+
+    userList.value = userListStore.userList;
+
+    // 로그인한 사용자의 ID 가져오기
+    if (userStore.user) {
+      employeeId.value = userStore.user.id;
+    }
+
     nextTick(() => {
       const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
       tooltips.forEach((tooltip) => {
@@ -57,131 +57,51 @@
     });
   });
 
-  // ✅ 프로필 이미지 경로 반환
+  // 내 프로필을 가장 앞에 배치한 리스트 정렬
+  const sortedUserList = computed(() => {
+    if (!employeeId.value) return userList.value; // 로그인한 사용자가 없으면 기존 리스트 반환
+
+    // 내 프로필 찾기
+    const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
+    const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
+
+    return myProfile ? [myProfile, ...otherUsers] : userList.value;
+  });
+
   const getUserProfileImage = (profilePath) => {
     return profilePath && profilePath.trim()
       ? `${baseUrl}upload/img/profile/${profilePath}`
       : defaultProfile;
   };
 
-  // ✅ 이미지 로딩 오류 처리
   const setDefaultImage = (event) => {
     event.target.src = defaultProfile;
   };
 
-  // ✅ 이미지 로드 후 깜빡임 방지
   const showImage = (event) => {
     event.target.style.visibility = "visible";
   };
 
-  // ✅ 툴팁 타이틀 설정
-  const getTooltipTitle = (user) => {
-    return user.MEMBERSEQ === userList.value.MEMBERSEQ ? "나" : user.MEMBERNAM;
-  };
+  // 프로필 크기 동적 조정
+  const profileSize = computed(() => {
+    const totalUsers = userList.value.length;
 
-  // ✅ 좌우 스크롤 이동 기능 추가 (한 줄씩 이동)
-  const scrollLeft = () => {
-    userListContainer.value.scrollBy({ left: -userListContainer.value.clientWidth, behavior: "smooth" });
-  };
+    if (totalUsers <= 7) return "120px"; // 7명 이하
+    if (totalUsers <= 10) return "110px"; // ~10명
+    if (totalUsers <= 20) return "80px"; // ~20명
+    return "60px"; // 20명 이상
+  });
 
-  const scrollRight = () => {
-    userListContainer.value.scrollBy({ left: userListContainer.value.clientWidth, behavior: "smooth" });
+  // 개별 유저 스타일 적용
+  const getDynamicStyle = (user) => {
+    return {
+      width: profileSize.value,
+      height: profileSize.value,
+      borderWidth: "3px",
+      borderColor: user.usercolor || "#ccc",
+    };
   };
   </script>
 
   <style scoped>
-  /* ✅ 전체 프로필 목록 감싸는 영역 */
-  .users-list-wrapper {
-    position: relative;
-    width: 100%;
-    max-width: 1250px;
-    margin: auto;
-  }
-
-  /* ✅ 스크롤 가능하도록 컨테이너 설정 */
-  .users-list-container {
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 200px; /* 한 줄 이상 넘어가지 않도록 조절 */
-    padding: 50px;
-    scrollbar-width: none; /* Firefox에서 스크롤바 숨김 */
-  }
-
-  /* ✅ 스크롤바 숨기기 */
-  .users-list-container::-webkit-scrollbar {
-    display: none; /* Chrome, Safari에서 스크롤바 숨김 */
-  }
-
-  /* ✅ 프로필 목록 */
-  .users-list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px; /* 프로필 간격 */
-    padding: 10px;
-  }
-
-  /* ✅ 프로필 이미지 스타일 */
-  .user-avatar {
-    border: 3px solid;
-    width: 100px;
-    height: 100px;
-    object-fit: cover;
-    background-color: white;
-    transition: transform 0.2s ease-in-out;
-  }
-
-  /* ✅ 프로필 선택 효과 */
-  .avatar:hover .user-avatar {
-    transform: scale(1.1);
-  }
-
-  /* ✅ 툴팁 위치 조정 */
-  .tooltip-custom {
-    position: absolute;
-    top: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.75);
-    color: white;
-    padding: 5px 8px;
-    font-size: 12px;
-    border-radius: 5px;
-    white-space: nowrap;
-    display: none;
-  }
-
-  /* ✅ 툴팁 표시 */
-  .avatar:hover .tooltip-custom {
-    display: block;
-  }
-
-  /* ✅ 좌우 스크롤 버튼 */
-  .scroll-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgba(0, 0, 0, 0.5);
-    color: white;
-    border: none;
-    cursor: pointer;
-    padding: 10px 15px;
-    font-size: 20px;
-    z-index: 100;
-    transition: background 0.3s ease;
-  }
-
-  .scroll-btn.left {
-    left: -40px;
-  }
-
-  .scroll-btn.right {
-    right: -40px;
-  }
-
-  .scroll-btn:hover {
-    background-color: rgba(0, 0, 0, 0.8);
-  }
   </style>
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 47cc56c..5b9d8f1 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -1,27 +1,23 @@
 <template>
     <div class="vacation-management">
-        <div class="container flex-grow-1">
+        <div class="container-xxl flex-grow-1 container-p-y">
         <div class="card app-calendar-wrapper">
             <div class="row g-0">
             <div class="col app-calendar-content">
                 <div class="card shadow-none border-0">
+                    <ProfileList  />
                 <div class="card-body">
                     <full-calendar
                     ref="fullCalendarRef"
                     :options="calendarOptions"
                     class="flatpickr-calendar-only"
                     />
+                    <HalfDayButtons
+                    @toggleHalfDay="toggleHalfDay"
+                    @addVacationRequests="addVacationRequests"
+                    />
                 </div>
                 </div>
-
-                <ProfileList  />
-
-                <HalfDayButtons
-                @toggleHalfDay="toggleHalfDay"
-                @addVacationRequests="addVacationRequests"
-                />
-
-                <br />
             </div>
             </div>
         </div>
@@ -72,7 +68,6 @@ const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이
 const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
 const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
 const halfDayType = ref(null);
-const employeeId = ref(1);
 
 // 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
 const holidayDates = ref(new Set());
@@ -216,7 +211,6 @@ if (selectedDates.value.size === 0) {
 const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
     date,
     type,
-    employeeId: employeeId.value,
 }));
 try {
     const response = await axios.post("vacation", vacationRequests);