Merge pull request #14 from 2024-Iris/repository

dokkisan · web-flow · commit 1d0420f9c143 · 2024-07-27T22:42:53.000+09:00
사용자 이메일 업데이트, 알림 설정, 회원 탈퇴 구현
diff --git a/src/App.vue b/src/App.vue
@@ -2,7 +2,7 @@
   <header v-if="!$route.meta.hideHeader" class="bg-white">
     <nav aria-label="Global" class="flex w-full items-center justify-between py-4 lg:px-8 bg-gray-50">
       <div class="flex items-center lg:flex-1">
-        <router-link to="/" class="flex items-center">
+        <router-link class="flex items-center" to="/">
           <img alt="issuefy logo" class="h-16 w-auto" src="./assets/issuefy-removebg_logo.png"/>
           <div v-if="$route.meta.showBreadcrumbs" class="ml-4 flex items-center space-x-2">
             <router-link :to="`/${$route.params.org}`" class="text-sm font-medium text-gray-900 hover:text-blue-600">
@@ -22,7 +22,7 @@
       </div>
       <div v-if="isLoggedIn" class="hidden lg:flex lg:items-center lg:gap-x-6">
         <div class="relative">
-          <button @click="toggleNotifications" class="relative">
+          <button class="relative" @click="toggleNotifications">
             <font-awesome-icon icon="bell" style="color: #B197FC;"/>
             <span v-if="unreadCount > 0"
                   class="absolute -top-1 -right-1 bg-red-600 text-white text-xs rounded-full px-1">
@@ -48,22 +48,22 @@
                   </div>
                   <div class="flex justify-between items-center">
                     <span class="text-xs text-gray-500">{{ notification.formattedTime }}</span>
-                    <button v-if="!notification.read" @click="markAsRead(notification.userNotificationId)"
-                            class="text-xs text-purple-500 hover:text-purple-700">
+                    <button v-if="!notification.read" class="text-xs text-purple-500 hover:text-purple-700"
+                            @click="markAsRead(notification.userNotificationId)">
                       읽음
                     </button>
                   </div>
                 </div>
               </div>
               <div v-if="notifications.length > visibleNotifications.length" class="p-2 text-center">
-                <button @click.stop="loadMoreNotifications" class="text-purple-500 hover:text-purple-700">더 보기</button>
+                <button class="text-purple-500 hover:text-purple-700" @click.stop="loadMoreNotifications">더 보기</button>
               </div>
             </div>
             <div v-else class="p-4 text-gray-500">
               알림이 없습니다.
             </div>
             <div v-if="hasUnreadNotifications" class="p-2 border-t border-gray-200">
-              <button @click="markAllAsRead" class="w-full text-center text-purple-500 hover:text-purple-700">모두 읽음
+              <button class="w-full text-center text-purple-500 hover:text-purple-700" @click="markAllAsRead">모두 읽음
               </button>
             </div>
           </div>
@@ -74,8 +74,8 @@
       <div v-if="isLoggedIn" class="mx-5"></div>
       <div v-if="isLoggedIn" class="flex items-center gap-x-4">
         <div class="flex items-center space-x-2">
-          <img :src="avatarURL" class="w-10 h-10 rounded-full" alt="User Avatar">
-          <router-link to="/settings" class="text-sm font-semibold leading-6 text-blue-600 hover:underline">
+          <img :src="avatarURL" alt="User Avatar" class="w-10 h-10 rounded-full">
+          <router-link class="text-sm font-semibold leading-6 text-blue-600 hover:underline" to="/settings">
             {{ userName }}
           </router-link>
         </div>
@@ -175,13 +175,13 @@ export default {
     const markNotificationsAsRead = async (userNotificationIds) => {
       try {
         const response = await axios.patch(
-          `${process.env.VUE_APP_API_URL}/notifications`,
-          { userNotificationIds },
-          {
-            headers: {
-              'Authorization': `Bearer ${authStore.accessToken}`
+            `${process.env.VUE_APP_API_URL}/notifications`,
+            {userNotificationIds},
+            {
+              headers: {
+                'Authorization': `Bearer ${authStore.accessToken}`
+              }
             }
-          }
         );
 
         if (response.status === 200) {
@@ -204,8 +204,8 @@ export default {
 
     const markAllAsRead = async () => {
       const unreadNotificationIds = notifications.value
-        .filter(n => !n.read)
-        .map(n => n.userNotificationId);
+          .filter(n => !n.read)
+          .map(n => n.userNotificationId);
       if (unreadNotificationIds.length > 0) {
         await markNotificationsAsRead(unreadNotificationIds);
       }
diff --git a/src/components/ExpiredPage.vue b/src/components/ExpiredPage.vue
@@ -7,7 +7,7 @@
         <p class="text-lg mb-8">다시 로그인해주세요.</p>
       </div>
       <div class="text-left">
-        <router-link to="/login" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">
+        <router-link class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm" to="/login">
           로그인
         </router-link>
       </div>
diff --git a/src/components/GithubAuth.vue b/src/components/GithubAuth.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { onMounted, nextTick } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import { useAuthStore } from '@/store/pinia';
+import {nextTick, onMounted} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import {useAuthStore} from '@/store/pinia';
 import axios from 'axios';
 
 const router = useRouter();
@@ -12,11 +12,11 @@ const authStore = useAuthStore();
 async function fetchJWT(code) {
   try {
     const response = await axios.get(`${process.env.VUE_APP_API_URL}/login`, {
-      params: { code }
+      params: {code}
     });
-    const { jwt, userName, avatarURL } = response.data;
-    const { accessToken, refreshToken } = jwt;
-    return { accessToken, refreshToken, userName, avatarURL };
+    const {jwt, userName, avatarURL} = response.data;
+    const {accessToken, refreshToken} = jwt;
+    return {accessToken, refreshToken, userName, avatarURL};
   } catch (error) {
     console.error('Error fetching JWT:', error);
     return null;
diff --git a/src/components/IssueDetailPage.vue b/src/components/IssueDetailPage.vue
@@ -5,8 +5,9 @@
         <div class="flex justify-between items-center">
           <h1 class="text-lg leading-6 font-medium text-gray-900">{{ issue.title }}</h1>
           <div>
-            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
-                  :class="{'bg-green-100 text-green-800': issue.status === 'open', 'bg-red-100 text-red-800': issue.status === 'closed'}">
+            <span
+                :class="{'bg-green-100 text-green-800': issue.status === 'open', 'bg-red-100 text-red-800': issue.status === 'closed'}"
+                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full">
               {{ issue.status }}
             </span>
           </div>
@@ -21,8 +22,8 @@
         </div>
         <div v-if="issue.labels.length > 0" class="px-4 py-4 sm:px-6">
           <span v-for="label in issue.labels" :key="label"
-                class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 mr-2"
-                :style="{ backgroundColor: getColorForLabel(label), color: getTextColorForLabel(label) }">
+                :style="{ backgroundColor: getColorForLabel(label), color: getTextColorForLabel(label) }"
+                class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium leading-5 mr-2">
             {{ label }}
           </span>
         </div>
diff --git a/src/components/IssuePage.vue b/src/components/IssuePage.vue
@@ -11,7 +11,7 @@
     <div v-for="issue in filteredIssues" :key="issue.id"
          class="issue bg-white border-b border-gray-200 py-4 px-6 flex justify-between items-center hover:bg-gray-100">
       <div class="w-1/3 text-left flex items-center">
-        <button @click="toggleStar(issue.id)" class="text-yellow-500 mr-2">
+        <button class="text-yellow-500 mr-2" @click="toggleStar(issue.id)">
           {{ issue.star ? '★' : '☆' }}
         </button>
         <router-link :to="`/${org}/${repository}/issues/` + issue.id"
@@ -28,8 +28,8 @@
         </div>
       </div>
       <div class="w-1/3 text-center">
-        <span class="status text-sm font-semibold"
-              :class="{'text-green-500': issue.status === 'open', 'text-red-500': issue.status === 'closed'}">{{
+        <span :class="{'text-green-500': issue.status === 'open', 'text-red-500': issue.status === 'closed'}"
+              class="status text-sm font-semibold">{{
             issue.status
           }}</span>
         <p class="text-sm text-gray-600">{{ issue.updatedAt }}</p>
diff --git a/src/components/LoginPage.vue b/src/components/LoginPage.vue
@@ -3,7 +3,6 @@ const clientId = process.env.VUE_APP_GITHUB_CLIENT_ID;
 const redirectUri = encodeURIComponent(`${process.env.VUE_APP_CALLBACK_URL}`);
 
 function handleGitHubLogin() {
-  // GitHub 로그인 페이지로 리디렉션
   window.location.href = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}`;
 }
 
diff --git a/src/components/LogoutPage.vue b/src/components/LogoutPage.vue
@@ -1,13 +1,31 @@
 <script setup>
-
 import {useAuthStore} from "@/store/pinia";
 import {useRouter} from "vue-router";
+import axios from "axios";
+import {onMounted} from 'vue';
 
 const authStore = useAuthStore()
 const router = useRouter()
 
-authStore.clearCredentials()
-router.push('/login')
+async function performLogout() {
+  try {
+    const accessToken = authStore.accessToken;
+    await axios.post(`${process.env.VUE_APP_API_URL}/logout`, {}, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`
+      }
+    });
+
+    await authStore.clearCredentials()
+    await router.push('/login')
+  } catch (error) {
+    console.error('Logout failed:', error);
+  }
+}
+
+onMounted(() => {
+  performLogout();
+})
 </script>
 
 <template>
diff --git a/src/components/RepositoryNotificationPage.vue b/src/components/RepositoryNotificationPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show" class="notification" :class="type">
+  <div v-if="show" :class="type" class="notification">
     <div class="notification-content">
       <font-awesome-icon v-if="type === 'success'" icon="check" style="color: #63E6BE;"/>
       <font-awesome-icon v-else icon="circle-exclamation"/>
diff --git a/src/components/RepositoryPage.vue b/src/components/RepositoryPage.vue
@@ -2,42 +2,43 @@
   <div class="container mx-auto mt-6 max-w-7xl font-sans">
     <div class="text-black py-4 px-6 flex justify-between items-center font-bold">
       <div v-if="!hideListName">
-        <h1 class="text-base text-left font-bold">리포지토리 목록</h1>
+        <h1 class="text-lg text-left font-bold">리포지토리 목록</h1>
       </div>
       <div v-if="!hideAddBox" class="flex items-center space-x-4 w-2/3 justify-end">
         <div v-if="adding" v-click-outside="cancelAdding" class="flex items-center space-x-2">
           <input
-              v-model="newRepositoryUrl"
-              @keyup.enter="addRepository"
-              type="text"
               id="newRepositoryUrl"
+              v-model="newRepositoryUrl"
+              class="input-full-width font-thin px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-blue-200"
               name="newRepositoryUrl"
               placeholder="Enter Repository URL"
-              class="input-full-width font-thin px-3 py-1 border border-gray-300 rounded-md focus:outline-none focus:ring focus:ring-blue-200"
+              type="text"
+              @keyup.enter="addRepository"
           />
-          <button @click="addRepository"
-                  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">
+          <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm"
+                  @click="addRepository">
             추가
           </button>
-          <button @click="cancelAdding"
-                  class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded text-sm">
+          <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded text-sm"
+                  @click="cancelAdding">
             취소
           </button>
         </div>
-        <button v-if="!adding" @click="startAdding"
-                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm">
+        <button v-if="!adding" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-sm"
+                @click="startAdding">
           리포지토리 추가
         </button>
-        <button v-if="hasSelectedRepositories" @click="deleteSelectedRepositories"
-                class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded text-sm">
+        <button v-if="hasSelectedRepositories"
+                class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded text-sm"
+                @click="deleteSelectedRepositories">
           리포지토리 삭제
         </button>
       </div>
     </div>
 
     <div class="repository-header bg-gray-100 py-4 px-6 flex justify-between items-center font-semibold">
       <div class="w-1/12 text-left">
-        <input type="checkbox" v-model="allSelected" @change="toggleSelectAll">
+        <input v-model="allSelected" type="checkbox" @change="toggleSelectAll">
       </div>
 
       <div class="w-1/3 text-left text-base">조직 이름</div>
@@ -49,10 +50,10 @@
       <div v-for="repository in org.org.repositories" :key="repository.id"
            class="repository bg-white border-b border-gray-200 py-4 px-6 flex justify-between items-center hover:bg-gray-100">
         <div class="w-1/12 text-left">
-          <input type="checkbox" v-model="repository.selected">
+          <input v-model="repository.selected" type="checkbox">
         </div>
         <div class="w-1/3 text-left flex items-center">
-          <button @click="toggleStar(repository.id)" class="text-yellow-500 mr-2">
+          <button class="text-yellow-500 mr-2" @click="toggleStar(repository.id)">
             {{ repository.star ? '★' : '☆' }}
           </button>
           <span class="org text-base font-bold mr-3">{{ org.org.name }}</span>
@@ -69,7 +70,7 @@
       </div>
     </div>
 
-    <Notification :show="showNotification" :type="notificationType" :message="notificationMessage"/>
+    <Notification :message="notificationMessage" :show="showNotification" :type="notificationType"/>
   </div>
 </template>
 
diff --git a/src/components/SettingPage.vue b/src/components/SettingPage.vue
diff --git a/src/directives/clickOutside.js b/src/directives/clickOutside.js
diff --git a/src/store/pinia.js b/src/store/pinia.js

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,6 @@ const clientId = process.env.VUE_APP_GITHUB_CLIENT_ID;`
`3`	`3`	const redirectUri = encodeURIComponent(`${process.env.VUE_APP_CALLBACK_URL}`);
`4`	`4`
`5`	`5`	`function handleGitHubLogin() {`
`6`		`- // GitHub 로그인 페이지로 리디렉션`
`7`	`6`	window.location.href = `https://github.com/login/oauth/authorize?client_id=${clientId}&redirect_uri=${redirectUri}`;
`8`	`7`	`}`
`9`	`8`