Merge branch 'develop' of https://github.com/TaskFlow-CLAP/TaskFlow-FE into CLAP-281

Author: Minkyu0424

.github/workflows/CD.yml

@@ -11,7 +11,7 @@ permissions:
   contents: read
 
 jobs:
-  front-cicd:
+  front-cd:
     runs-on: ubuntu-latest
     steps:
       # 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
@@ -31,26 +31,16 @@ jobs:
       - name: Build with npm
         run: npm run build-only
 
-      - name: send file via ssh
-        uses: appleboy/scp-action@v0.1.7
-        with:
-          host: ${{ secrets.FRONT_HOST }}
-          username: ${{ secrets.FRONT_HOST_USERNAME }}
-          key: ${{ secrets.FRONT_HOST_KEY }}
-          port: ${{ secrets.FRONT_HOST_PORT }}
-          source: "dist/*"
-          target: /home/${{ secrets.FRONT_HOST_USERNAME }}/
-#
-#      - name: Create nginx.conf
-#        run: touch ./nginx.conf
-#      - run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
+      - name: Create nginx.conf
+        run: touch ./nginx.conf
+      - run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
 
-      ## docker build & push to production
-#      - name: Docker build & push
-#        run: |
-#          docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
-#          docker build -t ${{ secrets.DOCKER_FRONT_REPO }} .
-#          docker push ${{ secrets.DOCKER_FRONT_REPO }}
+      # docker build & push to production
+      - name: Docker build & push
+        run: |
+          docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
+          docker build -t ${{ secrets.DOCKER_FRONT_REPO }} .
+          docker push ${{ secrets.DOCKER_FRONT_REPO }}
 
       ## deploy
       - name: Deploy
@@ -62,9 +52,6 @@ jobs:
           key: ${{ secrets.FRONT_HOST_KEY }}
           port: ${{ secrets.FRONT_HOST_PORT }}
           script: |
-            sudo rm -rf /var/www/html/*
-            sudo cp -r dist/* /var/www/html/
-            sudo systemctl restart nginx
-#            docker rm -f taskflow-front
-#            docker image rm ${{ secrets.DOCKER_FRONT_REPO }} -f
-#            docker run --name taskflow-front -d -p 80:80 --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}
+            docker rm -f taskflow-front
+            docker image rm ${{ secrets.DOCKER_FRONT_REPO }} -f
+            docker run --name taskflow-front -d -p 80:80 -p 443:443 -v /etc/letsencrypt/:/etc/letsencrypt/ -v /etc/ssl/:/etc/ssl/  --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}

.github/workflows/CI.yml

@@ -12,7 +12,7 @@ permissions:
   contents: read
 
 jobs:
-  front-cicd:
+  front-ci:
     runs-on: ubuntu-latest
     steps:
       # 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)

Dockerfile

@@ -1,5 +1,4 @@
 FROM nginx
 COPY nginx.conf /etc/nginx/conf.d/default.conf
 COPY dist/. /usr/share/nginx/html/
-EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

package-lock.json

@@ -19,6 +19,7 @@
     "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "tailwind-scrollbar-hide": "^2.0.0",
+    "v3-infinite-loading": "^1.3.2",
     "vue": "^3.5.13",
     "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.0",

package.json

@@ -1,28 +1,44 @@
 import { axiosInstance } from '@/utils/axios'
 import Cookies from 'js-cookie'
 import type { loginDataTypes } from '@/types/auth'
+import { useMemberStore } from '@/stores/member'
 
 export const postLogin = async (loginData: loginDataTypes, sessionId: string) => {
+  const memberStore = useMemberStore()
   const response = await axiosInstance.post('/api/auths/login', loginData, {
     headers: { sessionId: sessionId }
   })
   Cookies.set('accessToken', response.data.accessToken, {
     path: '/',
     sameSite: 'strict'
   })
+  Cookies.set('refreshToken', response.data.refreshToken, {
+    path: '/',
+    sameSite: 'strict'
+  })
+
+  await memberStore.updateMemberInfoWithToken()
   return response.data
 }
 
 export const patchPassword = async (password: string) => {
-  const accessToken = Cookies.get('accessToken')
+  const response = await axiosInstance.patch('/api/members/password', password)
 
-  if (!accessToken) return
+  return response.data
+}
+
+export const deleteLogout = async () => {
+  const memberStore = useMemberStore()
+  const refreshToken = Cookies.get('refreshToken')
 
-  const response = await axiosInstance.patch('/api/members/password', password, {
+  const response = await axiosInstance.delete('/api/auths/logout', {
     headers: {
-      Authorization: `Bearer ${accessToken}`
+      Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`,
+      refreshToken: refreshToken
     }
   })
-
-  return response.data
+  Cookies.remove('accessToken', { path: '/' })
+  Cookies.remove('refreshToken', { path: '/' })
+  await memberStore.updateMemberInfoWithToken()
+  return response
 }

src/api/auth.ts

@@ -1,5 +1,23 @@
 import { axiosInstance } from '../utils/axios'
 
+export const getNotification = async (pageNum: number, sizeNum: number) => {
+  const response = await axiosInstance.get(`/api/notifications?page=${pageNum}&size=${sizeNum}`)
+
+  return response.data
+}
+
+export const patchNotificationRead = async (notificationId: number) => {
+  const response = await axiosInstance.patch(`/api/notification/${notificationId}`)
+  console.log(notificationId)
+  return response.data
+}
+
+export const getNotifiCount = async () => {
+  const response = await axiosInstance.get(`/api/notifications/count`)
+  console.log(response.data)
+  return response.data
+}
+
 export const getMainCategory = async () => {
   const response = await axiosInstance.get('/api/main-category')
   return response.data

src/api/common.ts

@@ -16,7 +16,7 @@
         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"></div>
+        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>
     </div>
@@ -91,7 +91,7 @@ const memberId = ref('Chole.yeon')
 const memberEmail = ref('taskflow123@gachon.ac.kr')
 const memberDepartment = ref('인프라팀')
 const memberJob = ref('인프라 아키텍처')
-const imageUrl = ref('../../public/images/mockProfile.jpg')
+const imageUrl = ref('')
 const isModalVisible = ref(false)
 
 const memberForm = ref({

src/components/EditInformation.vue

@@ -5,7 +5,7 @@
     :options="options" />
   <NoContent
     v-else
-    content="데이터가 없습니다" />
+    content="집계된 데이터가 없습니다" />
 </template>
 
 <script setup lang="ts">

src/components/PieChart.vue

@@ -5,7 +5,13 @@
     @click="onTaskClick">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
-        <span class="text-black">{{ data.title }}</span>
+        <div class="flex items-center gap-2">
+          <TaskLabel
+            v-if="data.labelInfo"
+            :color="data.labelInfo.labelColor"
+            :content="data.labelInfo.labelName" />
+          <span class="text-black">{{ data.title }}</span>
+        </div>
         <CommonIcons
           v-if="draggable"
           :name="bentoIcon" />
@@ -34,6 +40,7 @@ import { computed } from 'vue'
 import type { TaskCardProps } from '@/types/manager'
 import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
+import TaskLabel from './common/TaskLabel.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()