From bc3ab7c3104a0cf78958f7e0e69a6f45a1c1aedd Mon Sep 17 00:00:00 2001
From: jiyeon <bjyy0201@gmail.com>
Date: Wed, 5 Feb 2025 15:37:53 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[refactor]=20:=20?=
 =?UTF-8?q?=EB=B6=88=ED=95=84=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index bafbad6c..25713987 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -14,15 +14,6 @@ export const postLogin = async (loginData: loginDataTypes, sessionId: string) =>
 }
 
 export const patchPassword = async (password: string) => {
-  const accessToken = Cookies.get('accessToken')
-
-  if (!accessToken) return
-
-  const response = await axiosInstance.patch('/api/members/password', password, {
-    headers: {
-      Authorization: `Bearer ${accessToken}`
-    }
-  })
-
+  const response = await axiosInstance.patch('/api/members/password', password)
   return response.data
 }

From e59e9737127fa52335f77eda34a625c00003b947 Mon Sep 17 00:00:00 2001
From: jiyeon <bjyy0201@gmail.com>
Date: Wed, 5 Feb 2025 19:49:28 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[refactor]=20:=20?=
 =?UTF-8?q?=EC=9D=B8=EC=A6=9D=20=EC=9D=B8=EA=B0=80=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts                         | 17 ++++----
 src/components/TopBar.vue               | 55 -------------------------
 src/components/top-bar/ProfileModal.vue |  3 +-
 src/components/top-bar/TopBar.vue       | 27 ++++++++----
 src/views/LoginView.vue                 | 10 ++---
 5 files changed, 32 insertions(+), 80 deletions(-)
 delete mode 100644 src/components/TopBar.vue

diff --git a/src/api/auth.ts b/src/api/auth.ts
index b2391bd8..adddce06 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -16,7 +16,6 @@ export const postLogin = async (loginData: loginDataTypes, sessionId: string) =>
     path: '/',
     sameSite: 'strict'
   })
-
   await memberStore.updateMemberInfoWithToken()
   return response.data
 }
@@ -28,16 +27,16 @@ export const patchPassword = async (password: string) => {
 
 export const deleteLogout = async () => {
   const memberStore = useMemberStore()
-  const refreshToken = Cookies.get('refreshToken')
+  // const refreshToken = Cookies.get('refreshToken')
 
-  const response = await axiosInstance.delete('/api/auths/logout', {
-    headers: {
-      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
-      refreshToken: refreshToken
-    }
-  })
+  // // const response = await axiosInstance.delete('/api/auths/logout', {
+  // //   headers: {
+  // //     Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
+  // //     refreshToken: refreshToken
+  // //   }
+  // // })
   Cookies.remove('accessToken', { path: '/' })
   Cookies.remove('refreshToken', { path: '/' })
   await memberStore.updateMemberInfoWithToken()
-  return response
+  return
 }
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
deleted file mode 100644
index 5f74dcba..00000000
--- a/src/components/TopBar.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="fixed w-full bg-white text-black py-2 border-b border-border-1">
-    <div
-      class="max-w-[1200px] min-w-[1024px] mx-auto px-6 flex w-full justify-between items-center">
-      <div class="flex justify-center items-center gap-6 h-full">
-        <button
-          v-show="isLogined"
-          @click="isSideOpen = true">
-          <CommonIcons :name="hamburgerIcon" />
-        </button>
-        <img src="/MainLogo.svg" />
-      </div>
-      <div
-        v-show="isLogined"
-        class="flex items-center gap-6">
-        <NotificationIcon :new-notification="12" />
-        <img
-          v-if="info?.imageUrl"
-          class="rounded-[50%] w-10 h-10"
-          :src="info.imageUrl"
-          alt="프로필 이미지" />
-        <div
-          v-else
-          class="rounded-[50%] bg-zinc-100 p-5" />
-      </div>
-    </div>
-  </div>
-  <SideBar
-    v-if="isSideOpen"
-    @close="onCloseSide" />
-</template>
-
-<script setup lang="ts">
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
-import { onMounted, ref } from 'vue'
-import { hamburgerIcon } from '../constants/iconPath'
-import CommonIcons from './common/CommonIcons.vue'
-import NotificationIcon from './icons/NotificationIcon.vue'
-import SideBar from './top-bar/SideBar.vue'
-
-const memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
-
-onMounted(async () => {
-  await memberStore.updateMemberInfoWithToken()
-})
-
-const isSideOpen = ref(false)
-const isLogined = ref(true)
-
-const onCloseSide = () => {
-  isSideOpen.value = false
-}
-</script>
diff --git a/src/components/top-bar/ProfileModal.vue b/src/components/top-bar/ProfileModal.vue
index f5e1088b..eda33884 100644
--- a/src/components/top-bar/ProfileModal.vue
+++ b/src/components/top-bar/ProfileModal.vue
@@ -63,7 +63,7 @@ import { computed } from 'vue'
 const isModalVisible = ref(false)
 
 const memberStore = useMemberStore()
-const { info } = storeToRefs(memberStore)
+const { isLogined, info } = storeToRefs(memberStore)
 
 const imgUrl = computed(() => info.value.imageUrl)
 const name = computed(() => info.value.memberName)
@@ -88,6 +88,7 @@ const handleEdit = () => {
 }
 const openLogoutModal = () => {
   isModalVisible.value = true
+  isLogined.value = false
 }
 const closeLogoutModal = () => {
   isModalVisible.value = false
diff --git a/src/components/top-bar/TopBar.vue b/src/components/top-bar/TopBar.vue
index 9d1b47e6..f761b739 100644
--- a/src/components/top-bar/TopBar.vue
+++ b/src/components/top-bar/TopBar.vue
@@ -65,9 +65,10 @@ const { isLogined, info } = storeToRefs(memberStore)
 const route = useRoute()
 const router = useRouter()
 onMounted(async () => {
-  await fetchNotificationCount()
-
-  await memberStore.updateMemberInfoWithToken()
+  if (isLogined.value) {
+    await fetchNotificationCount()
+    await memberStore.updateMemberInfoWithToken()
+  }
 
   const originUrl = route.path.split('/')[1]
   if (info.value.memberRole === 'ROLE_USER') {
@@ -90,11 +91,13 @@ const isNotifiVisible = ref(false)
 const isProfileVisible = ref(false)
 
 const fetchNotificationCount = async () => {
-  try {
-    const data = await getNotifiCount()
-    countNotifi.value = data.count
-  } catch (error) {
-    console.error('알림 개수 불러오기 실패:', error)
+  if (isLogined.value) {
+    try {
+      const data = await getNotifiCount()
+      countNotifi.value = data.count
+    } catch (error) {
+      console.error('알림 개수 불러오기 실패:', error)
+    }
   }
 }
 
@@ -109,10 +112,16 @@ const onCloseSide = () => {
   isSideOpen.value = false
 }
 
+watch(isLogined, newValue => {
+  if (newValue) {
+    location.reload() // 페이지 새로고침
+  }
+})
+
 watch(
   () => info.value,
   async newInfo => {
-    if (newInfo.memberName) {
+    if (newInfo.memberName && isLogined) {
       await fetchNotificationCount()
     }
   },
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 1dd39baf..0654f0b8 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,11 +1,9 @@
 <template>
   <div class="max-w-400">
     <div class="py-16">
-      <div class="text-4xl font-bold text-center">
-        <p class="pb-2">TaskFlow</p>
-        <p class="pb-2">로그인</p>
-      </div>
-      <p class="text-center font-bold text-body">아이디와 비밀번호를 입력해주세요</p>
+      <TitleContainer
+        :title="'TaskFlow\n로그인'"
+        content="아이디와 비밀번호를 입력해주세요" />
     </div>
     <form
       @submit.prevent="handleLogin"
@@ -48,6 +46,7 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { postLogin } from '@/api/auth'
+import TitleContainer from '@/components/common/TitleContainer.vue'
 
 const router = useRouter()
 
@@ -62,7 +61,6 @@ const handleLogin = async () => {
     }
     const sessionId = '000'
     const res = await postLogin(loginData, sessionId)
-
     if (res) {
       switch (res.memberInfo.memberRole) {
         case 'ROLE_ADMIN':

From f535d267bd3ce99f1b8e73c1960c2c1311cfe9bf Mon Sep 17 00:00:00 2001
From: jiyeon <bjyy0201@gmail.com>
Date: Thu, 6 Feb 2025 11:09:40 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[refactor]=20:=20?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83=20api=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index adddce06..58720fdf 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -26,17 +26,16 @@ export const patchPassword = async (password: string) => {
 }
 
 export const deleteLogout = async () => {
-  const memberStore = useMemberStore()
-  // const refreshToken = Cookies.get('refreshToken')
+  const refreshToken = Cookies.get('refreshToken')
+  const accessToken = Cookies.get('accessToken')
 
-  // // const response = await axiosInstance.delete('/api/auths/logout', {
-  // //   headers: {
-  // //     Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
-  // //     refreshToken: refreshToken
-  // //   }
-  // // })
+  const response = await axiosInstance.delete('/api/auths/logout', {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      refreshToken: refreshToken
+    }
+  })
   Cookies.remove('accessToken', { path: '/' })
   Cookies.remove('refreshToken', { path: '/' })
-  await memberStore.updateMemberInfoWithToken()
-  return
+  return response
 }

From 6d2a90999c9ae32a677e0a9a69cba4c5536848e2 Mon Sep 17 00:00:00 2001
From: jiyeon <bjyy0201@gmail.com>
Date: Thu, 6 Feb 2025 11:12:06 +0900
Subject: [PATCH 4/5] =?UTF-8?q?=E2=9C=A8=20=20[feat]=20:=20=ED=86=A0?=
 =?UTF-8?q?=ED=81=B0=20=EB=A7=8C=EB=A3=8C=EC=8B=9C=20=ED=86=A0=ED=81=B0=20?=
 =?UTF-8?q?=EC=9E=AC=EB=B0=9C=EA=B8=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/axios.ts | 47 ++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 2531c53c..9c12f4c6 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -3,6 +3,32 @@ import Cookies from 'js-cookie'
 
 const baseURL = import.meta.env.VITE_API_BASE_URL
 
+const getNewAccessToken = async () => {
+  console.log('토큰 재발급 시도')
+  try {
+    const refreshToken = Cookies.get('refreshToken')
+    console.log(refreshToken)
+    const response = await axios.post(
+      baseURL + '/api/auths/reissuance',
+      {},
+      {
+        headers: { refreshToken: refreshToken }
+      }
+    )
+    Cookies.set('accessToken', response.data.accessToken)
+    Cookies.set('refreshToken', response.data.newRefreshToken)
+    console.log('토큰 발행 성공')
+
+    console.log(response.data)
+
+    return response.data.accessToken
+  } catch (e) {
+    console.error('토큰 발행 실패', e)
+    Cookies.remove('accessToken')
+    Cookies.remove('refreshToken')
+    window.location.reload()
+  }
+}
 const setInterceptors = (instance: AxiosInstance) => {
   instance.interceptors.request.use(
     (config: InternalAxiosRequestConfig) => {
@@ -19,17 +45,34 @@ const setInterceptors = (instance: AxiosInstance) => {
 
   instance.interceptors.response.use(
     response => response,
-    error => {
+    async error => {
       if (axios.isCancel(error)) {
         console.log('요청이 취소되었습니다:', error.message)
       } else if (error.response) {
+        console.log('상태확인 에러메세지:', error.response)
         switch (error.response.status) {
           case 401:
             console.error('인증 오류: 다시 로그인하세요.')
             break
-          case 403:
+          case 403: {
             console.error('권한 오류: 접근 권한이 없습니다.')
+
+            const originalRequest = error.config
+            if (!originalRequest._retry) {
+              originalRequest._retry = true
+
+              try {
+                console.log('토큰이 만료됨')
+                const newAccessToken = await getNewAccessToken()
+
+                originalRequest.headers.Authorization = `Bearer ${newAccessToken}`
+                return instance(originalRequest)
+              } catch (err) {
+                console.error('토큰 갱신 실패:', err)
+              }
+            }
             break
+          }
           case 404:
             console.error('요청한 자원을 찾을 수 없습니다.')
             break

From aabda2bda3985663a76116a7a1beb8c7c340e944 Mon Sep 17 00:00:00 2001
From: jiyeon <bjyy0201@gmail.com>
Date: Thu, 6 Feb 2025 11:12:23 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20[refactor]=20:=20?=
 =?UTF-8?q?=EB=82=B4=20=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95=201?=
 =?UTF-8?q?=EC=B0=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.ts                    |  6 +++
 src/components/EditInformation.vue | 74 +++++++++++++++++++++---------
 src/stores/member.ts               | 15 ++++--
 src/types/auth.ts                  |  3 ++
 src/types/user.ts                  |  7 +++
 5 files changed, 80 insertions(+), 25 deletions(-)

diff --git a/src/api/user.ts b/src/api/user.ts
index 0315d6e2..4b6d2eaf 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -1,7 +1,13 @@
 import type { Status } from '@/types/common'
+import type { userInfo } from '@/types/user'
 import type { RequestApprovePostTypes } from '@/types/manager'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
+export const patchEditInfo = async (formdata: userInfo, image: File) => {
+  const response = await formDataAxiosInstance.post('/api/tasks', formdata, image)
+  return response.data
+}
+
 export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
   return response.data
diff --git a/src/components/EditInformation.vue b/src/components/EditInformation.vue
index 549368a1..17e774de 100644
--- a/src/components/EditInformation.vue
+++ b/src/components/EditInformation.vue
@@ -10,15 +10,22 @@
     <div class="profile">
       <p class="text-body text-xs font-bold">프로필 사진</p>
       <img
-        v-if="imageUrl"
-        :src="imageUrl"
+        v-if="previewUrl || info.imageUrl"
+        :src="previewUrl || info.imageUrl"
         alt="프로필 이미지"
         class="w-24 h-24 rounded-full object-cover border mt-3" />
-      <div
-        v-else
-        class="w-24 h-24 rounded-full bg-background-1 flex items-center justify-center mt-3"></div>
-      <!-- 파일 업로드 필요 -->
-      <p class="mt-3 text-xs text-primary1 font-bold cursor-pointer">변경</p>
+
+      <label
+        for="fileInput"
+        class="mt-3 text-xs text-primary1 font-bold cursor-pointer"
+        >변경</label
+      >
+      <input
+        id="fileInput"
+        type="file"
+        @change="handleFileUpload"
+        accept="image/*"
+        class="hidden" />
     </div>
 
     <div class="flex flex-col">
@@ -26,23 +33,23 @@
       <input
         class="input-box h-11 mt-2 text-black"
         placeholder="이름을 입력해주세요"
-        v-model="memberName" />
+        v-model="info.memberName" />
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">아이디</p>
-      <p class="mt-2 text-black">{{ memberId }}</p>
+      <p class="mt-2 text-black">{{ info.nickname }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">이메일</p>
-      <p class="mt-2 text-black">{{ memberEmail }}</p>
+      <p class="mt-2 text-black">{{ info.email }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">부서</p>
-      <p class="mt-2 text-black">{{ memberDepartment }}</p>
+      <p class="mt-2 text-black">{{ info.departmentName }}</p>
     </div>
     <div class="flex flex-col">
       <p class="text-body text-xs font-bold">직무</p>
-      <p class="mt-2 text-black">{{ memberJob }}</p>
+      <p class="mt-2 text-black">{{ info.departmentRole }}</p>
     </div>
     <div>
       <p class="text-body text-xs font-bold">알림 수신 여부</p>
@@ -85,13 +92,17 @@ import ModalView from './ModalView.vue'
 import FormButtonContainer from './common/FormButtonContainer.vue'
 import FormCheckbox from './common/FormCheckbox.vue'
 const router = useRouter()
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+import { patchEditInfo } from '@/api/user'
+import
+
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
+const selectedFile = ref<File | null>(null)
+const previewUrl = ref<string | null>(null)
 
-const memberName = ref('백지연')
-const memberId = ref('Chole.yeon')
-const memberEmail = ref('taskflow123@gachon.ac.kr')
-const memberDepartment = ref('인프라팀')
-const memberJob = ref('인프라 아키텍처')
-const imageUrl = ref('')
 const isModalVisible = ref(false)
 
 const memberForm = ref({
@@ -100,15 +111,34 @@ const memberForm = ref({
   isEmailChecked: false
 })
 
+const formData = new FormData()
+
+const requestData: any = {
+  name: info.value.memberName,
+  agitNotification: memberForm.value.isAgitChecked,
+  emailNotification: memberForm.value.isEmailChecked,
+  kakaoWorkNotification: memberForm.value.isKakaoWorkChecked
+}
 const handleCancel = () => {
   router.back()
 }
 
-const handleSubmit = () => {
-  isModalVisible.value = true
-}
-
 const handlePwChange = () => {
   router.push('/pw-check')
 }
+
+const handleFileUpload = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (target.files && target.files[0]) {
+    selectedFile.value = target.files[0]
+
+    previewUrl.value = URL.createObjectURL(selectedFile.value)
+  }
+}
+
+const handleSubmit = () => {
+  isModalVisible.value = true
+  console.log(requestData)
+  patchEditInfo(requestData, selectedFile.value)
+}
 </script>
diff --git a/src/stores/member.ts b/src/stores/member.ts
index a3b1ef72..f4e45b13 100644
--- a/src/stores/member.ts
+++ b/src/stores/member.ts
@@ -10,7 +10,10 @@ export const useMemberStore = defineStore('memberInfo', () => {
     nickname: '',
     imageUrl: '',
     memberRole: '',
-    memberStatus: ''
+    memberStatus: '',
+    email: '',
+    departmentName: '',
+    departmentRole: ''
   })
 
   const refreshToken = ref(Cookies.get('refreshToken') || '')
@@ -27,9 +30,12 @@ export const useMemberStore = defineStore('memberInfo', () => {
     info.value = {
       memberName: responseData.name || '',
       nickname: responseData.nicknanme || '',
+      email: responseData.email || '',
       imageUrl: responseData.profileImageUrl || '',
       memberRole: responseData.role || '',
-      memberStatus: ''
+      memberStatus: responseData.memberStatus || '',
+      departmentName: responseData.departmentName || '',
+      departmentRole: responseData.departmentRole || ''
     }
     console.log('Updated member info:', info.value)
   }
@@ -40,7 +46,10 @@ export const useMemberStore = defineStore('memberInfo', () => {
       nickname: '',
       imageUrl: '',
       memberRole: '',
-      memberStatus: ''
+      memberStatus: '',
+      email: '',
+      departmentName: '',
+      departmentRole: ''
     }
     isLogined.value = false
     Cookies.remove('accessToken')
diff --git a/src/types/auth.ts b/src/types/auth.ts
index 87007613..3e91977d 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,9 +1,12 @@
 export interface User {
   memberName: string
   nickname: string
+  email: string
   imageUrl: string
   memberRole: string
   memberStatus: string
+  departmentName: string
+  departmentRole: string
 }
 
 export interface loginDataTypes {
diff --git a/src/types/user.ts b/src/types/user.ts
index 14a699f4..01241965 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,6 +1,13 @@
 import type { LabelDataTypes, Status } from './common'
 import type { ManagerTypes } from './manager'
 
+export interface userInfo {
+  name: string
+  agitNotification: boolean
+  emailNotification: boolean
+  kakaoWorkNotification: boolean
+}
+
 export interface MyRequestListData {
   taskId: number
   taskCode: string