Skip to content

Commit 786292a

Browse files
seorang42seorang42
committed
🔀 [fix] : conflict resolved
2 parents 5871f4e + 46a571e commit 786292a

File tree

21 files changed

+384
-824
lines changed

21 files changed

+384
-824
lines changed

.github/workflows/cicd.yml renamed to .github/workflows/CD.yml

Lines changed: 57 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,57 @@
1-
# github repository actions 페이지에 나타날 이름
2-
name: CI/CD for front using github actions
3-
4-
# event trigger
5-
# develop 브랜치에 pull_request가 닫히거나 푸시했을때 실행
6-
on:
7-
pull_request:
8-
types: [closed]
9-
branches: [ "develop" ]
10-
push:
11-
branches: [ "develop" ]
12-
13-
14-
permissions:
15-
contents: read
16-
17-
jobs:
18-
front-cicd:
19-
runs-on: ubuntu-latest
20-
steps:
21-
# 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
22-
- uses: actions/checkout@v4
23-
24-
# Node.js 환경 설정
25-
- name: Use Node.js
26-
uses: actions/setup-node@v4
27-
with:
28-
node-version: 22 # 지정된 Node.js 버전 사용
29-
cache: npm # setup-node 의 캐시 기능을 사용함
30-
cache-dependency-path: package-lock.json # 캐시 기능을 사용할 때 캐시의 기준이 될 파일을 지정
31-
32-
- name: Install Dependencies
33-
run: npm install
34-
35-
- name: Build with npm
36-
run: npm run build || exit 0 # exit 0를 추가하여 경고성 오류 무시
37-
38-
- name: Create nginx.conf
39-
run: touch ./nginx.conf
40-
- run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
41-
42-
## docker build & push to production
43-
- name: Docker build & push
44-
run: |
45-
docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
46-
docker build -t ${{ secrets.DOCKER_FRONT_REPO }} .
47-
docker push ${{ secrets.DOCKER_FRONT_REPO }}
48-
49-
## deploy
50-
- name: Deploy
51-
uses: appleboy/ssh-action@master
52-
id: deploy
53-
with:
54-
host: ${{ secrets.FRONT_HOST }}
55-
username: ${{ secrets.FRONT_HOST_USERNAME }}
56-
key: ${{ secrets.FRONT_HOST_KEY }}
57-
port: ${{ secrets.FRONT_HOST_PORT }}
58-
script: |
59-
docker rm -f taskflow-front
60-
docker image rm ${{ secrets.DOCKER_FRONT_REPO }} -f
61-
docker run --name taskflow-front -d -p 80:80 --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}
1+
# github repository actions 페이지에 나타날 이름
2+
name: CD for front using github actions
3+
4+
# event trigger
5+
# develop 브랜치에 pull_request가 닫히거나 푸시했을때 실행
6+
on:
7+
push:
8+
branches: [ "develop" ]
9+
10+
permissions:
11+
contents: read
12+
13+
jobs:
14+
front-cicd:
15+
runs-on: ubuntu-latest
16+
steps:
17+
# 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
18+
- uses: actions/checkout@v4
19+
20+
# Node.js 환경 설정
21+
- name: Use Node.js
22+
uses: actions/setup-node@v4
23+
with:
24+
node-version: 22 # 지정된 Node.js 버전 사용
25+
cache: npm # setup-node 의 캐시 기능을 사용함
26+
cache-dependency-path: package-lock.json # 캐시 기능을 사용할 때 캐시의 기준이 될 파일을 지정
27+
28+
- name: Install Dependencies
29+
run: npm install
30+
31+
- name: Build with npm
32+
run: npm run build-only
33+
34+
- name: Create nginx.conf
35+
run: touch ./nginx.conf
36+
- run: echo "${{ secrets.NGINX_CONF }}" > ./nginx.conf
37+
38+
## docker build & push to production
39+
- name: Docker build & push
40+
run: |
41+
docker login clap.kr-central-2.kcr.dev -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}
42+
docker build -t ${{ secrets.DOCKER_FRONT_REPO }} .
43+
docker push ${{ secrets.DOCKER_FRONT_REPO }}
44+
45+
## deploy
46+
- name: Deploy
47+
uses: appleboy/ssh-action@master
48+
id: deploy
49+
with:
50+
host: ${{ secrets.FRONT_HOST }}
51+
username: ${{ secrets.FRONT_HOST_USERNAME }}
52+
key: ${{ secrets.FRONT_HOST_KEY }}
53+
port: ${{ secrets.FRONT_HOST_PORT }}
54+
script: |
55+
docker rm -f taskflow-front
56+
docker image rm ${{ secrets.DOCKER_FRONT_REPO }} -f
57+
docker run --name taskflow-front -d -p 80:80 --restart on-failure ${{ secrets.DOCKER_FRONT_REPO }}

‎.github/workflows/CI.yml‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# github repository actions 페이지에 나타날 이름
2+
name: CI for front using github actions
3+
4+
# event trigger
5+
# develop 브랜치에 pull_request가 닫히거나 푸시했을때 실행
6+
on:
7+
pull_request:
8+
types: [ opened, synchronize ]
9+
branches: [ "develop" ]
10+
11+
permissions:
12+
contents: read
13+
14+
jobs:
15+
front-cicd:
16+
runs-on: ubuntu-latest
17+
steps:
18+
# 저장소 코드를 체크아웃합니다. (PR 올린 코드를 가져오는 행위)
19+
- uses: actions/checkout@v4
20+
21+
# Node.js 환경 설정
22+
- name: Use Node.js
23+
uses: actions/setup-node@v4
24+
with:
25+
node-version: 22 # 지정된 Node.js 버전 사용
26+
cache: npm # setup-node 의 캐시 기능을 사용함
27+
cache-dependency-path: package-lock.json # 캐시 기능을 사용할 때 캐시의 기준이 될 파일을 지정
28+
29+
- name: Install Dependencies
30+
run: npm install
31+
32+
- name: Build with npm
33+
run: npm run build-only

‎src/api/auth.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { axiosInstance } from '@/utils/axios'
2+
import Cookies from 'js-cookie'
3+
import type { loginDataTypes } from '@/types/auth'
4+
5+
export const postLogin = async (loginData: loginDataTypes, sessionId: string) => {
6+
const response = await axiosInstance.post('/api/auths/login', loginData, {
7+
headers: { sessionId: sessionId }
8+
})
9+
Cookies.set('accessToken', response.data.accessToken, {
10+
path: '/',
11+
sameSite: 'strict'
12+
})
13+
return response.data
14+
}
15+
16+
export const patchPassword = async (password: string) => {
17+
const accessToken = Cookies.get('accessToken')
18+
19+
if (!accessToken) return
20+
21+
const response = await axiosInstance.patch('/api/members/password', password, {
22+
headers: {
23+
Authorization: `Bearer ${accessToken}`
24+
}
25+
})
26+
27+
return response.data
28+
}

‎src/components/SideBar.vue‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,14 @@
3939

4040
<div class="flex w-full justify-between px-6 py-4 bg-white">
4141
<div class="flex w-full items-center gap-3">
42-
<!-- 프로필 사진 API 필요 -->
43-
<div class="w-10 h-10 rounded-full bg-background-1" />
42+
<img
43+
v-if="info?.imageUrl"
44+
class="rounded-[50%] w-10 h-10"
45+
:src="info.imageUrl"
46+
alt="프로필 이미지" />
47+
<div
48+
v-else
49+
class="w-10 h-10 rounded-full bg-background-1" />
4450
<div class="flex flex-col gap-1">
4551
<p class="text-xs text-body font-bold">{{ name }}</p>
4652
<p class="text-sm text-black">{{ nickname }}</p>
@@ -61,22 +67,26 @@
6167

6268
<script setup lang="ts">
6369
import { useRoute } from 'vue-router'
64-
import { computed, ref } from 'vue'
70+
import { computed } from 'vue'
6571
import CommonIcons from './common/CommonIcons.vue'
6672
import { hamburgerIcon } from '@/constants/iconPath'
6773
import { SIDE_USER_MENU, SIDE_MANAGER_MENU, SIDE_ADMIN_MENU } from '@/constants/menu'
74+
import { useMemberStore } from '@/stores/member'
75+
import { storeToRefs } from 'pinia'
76+
77+
const memberStore = useMemberStore()
78+
const { info } = storeToRefs(memberStore)
6879
6980
const route = useRoute()
7081
71-
// 회원 역할, 닉네임 필요
72-
const role = ref('admin')
73-
const name = ref('백지연')
74-
const nickname = ref('Chloe.yeon')
82+
const role = computed(() => info.value.memberRole)
83+
const name = computed(() => info.value.memberName)
84+
const nickname = computed(() => info.value.nickname)
7585
7686
const filteredMenu = computed(() => {
77-
return role.value === 'user'
87+
return role.value === 'ROLE_USER'
7888
? SIDE_USER_MENU
79-
: role.value === 'manager'
89+
: role.value === 'ROLE_MANAGER'
8090
? SIDE_MANAGER_MENU
8191
: SIDE_ADMIN_MENU
8292
})

‎src/components/TopBar.vue‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,14 @@
1414
v-show="isLogined"
1515
class="flex items-center gap-6">
1616
<NotificationIcon :new-notification="12" />
17-
<!-- 프로필 사진 API 필요 -->
18-
<div class="rounded-[50%] bg-zinc-100 p-5" />
17+
<img
18+
v-if="info?.imageUrl"
19+
class="rounded-[50%] w-10 h-10"
20+
:src="info.imageUrl"
21+
alt="프로필 이미지" />
22+
<div
23+
v-else
24+
class="rounded-[50%] bg-zinc-100 p-5" />
1925
</div>
2026
</div>
2127
</div>
@@ -25,13 +31,21 @@
2531
</template>
2632

2733
<script setup lang="ts">
28-
import { ref } from 'vue'
34+
import { ref, onMounted } from 'vue'
2935
import CommonIcons from './common/CommonIcons.vue'
3036
import SideBar from './SideBar.vue'
3137
import { hamburgerIcon } from '../constants/iconPath'
3238
import NotificationIcon from './icons/NotificationIcon.vue'
39+
import { storeToRefs } from 'pinia'
40+
import { useMemberStore } from '@/stores/member'
41+
42+
const memberStore = useMemberStore()
43+
const { info } = storeToRefs(memberStore)
44+
45+
onMounted(async () => {
46+
await memberStore.updateMemberInfoWithToken()
47+
})
3348
34-
// 로그인 정보 필요
3549
const isSideOpen = ref(false)
3650
const isLogined = ref(true)
3751

‎src/components/my-request/MyRequestList.vue‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<template #pagination>
1616
<ListPagination
1717
:page-number="params.page + 1"
18-
:total-page="totalPage"
18+
:total-page="totalPage || 0"
1919
@update:page-number="onPageChange" />
2020
</template>
2121
</ListContainer>
@@ -26,20 +26,20 @@ import { useRequestParamsStore } from '@/stores/params'
2626
import type { MyRequestResponse } from '@/types/user'
2727
import { axiosInstance } from '@/utils/axios'
2828
import { useQuery } from '@tanstack/vue-query'
29-
import { ref, watch } from 'vue'
3029
import { useParseParams } from '../hooks/useParseParams'
3130
import ListContainer from '../lists/ListContainer.vue'
3231
import ListPagination from '../lists/ListPagination.vue'
3332
import NoContent from '../lists/NoContent.vue'
3433
import MyRequestListBar from './MyRequestListBar.vue'
3534
import MyRequestListCard from './MyRequestListCard.vue'
35+
import { computed } from 'vue'
3636
3737
const { params } = useRequestParamsStore()
3838
const onPageChange = (value: number) => {
3939
params.page = value
4040
}
4141
42-
const fetchRequestList = async () => {
42+
const fetchMyRequestList = async () => {
4343
const { parseRequestParams } = useParseParams()
4444
const parsedParams = parseRequestParams(params)
4545
const response = await axiosInstance.get('/api/tasks/requests', {
@@ -53,15 +53,10 @@ const fetchRequestList = async () => {
5353
5454
const { data } = useQuery<MyRequestResponse>({
5555
queryKey: ['myRequest', params],
56-
queryFn: fetchRequestList
56+
queryFn: fetchMyRequestList
5757
})
5858
59-
watch(
60-
data,
61-
() => {
62-
if (data.value?.totalPages) totalPage.value = data.value.totalPages
63-
},
64-
{ once: true }
65-
)
66-
const totalPage = ref(0)
59+
const totalPage = computed(() => {
60+
return data.value?.totalPages
61+
})
6762
</script>

‎src/components/my-task/MyTaskList.vue‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@
66

77
<template #listCards>
88
<MyTaskListCard
9-
v-for="info in DUMMY_MY_TASK_LIST_DATA"
9+
v-for="info in data?.content"
1010
:key="info.taskId"
1111
:info="info" />
12+
<NoContent v-if="data?.content.length === 0" />
1213
</template>
1314

1415
<template #pagination>
1516
<ListPagination
16-
:page-number="params.page"
17-
:total-page="DUMMY_TOTAL_PAGE"
17+
:page-number="params.page + 1"
18+
:total-page="totalPage || 0"
1819
@update:page-number="onPageChange" />
1920
</template>
2021
</ListContainer>
@@ -23,16 +24,39 @@
2324
<script setup lang="ts">
2425
import ListPagination from '../lists/ListPagination.vue'
2526
import ListContainer from '../lists/ListContainer.vue'
26-
import { DUMMY_MY_TASK_LIST_DATA } from '@/datas/dummy'
2727
import { useRequestParamsStore } from '@/stores/params'
2828
import MyTaskListCard from './MyTaskListCard.vue'
2929
import MyTaskListBar from './MyTaskListBar.vue'
30+
import { useParseParams } from '../hooks/useParseParams'
31+
import { axiosInstance } from '@/utils/axios'
32+
import type { MyTaskResponse } from '@/types/manager'
33+
import { useQuery } from '@tanstack/vue-query'
34+
import { computed } from 'vue'
35+
import NoContent from '../lists/NoContent.vue'
3036
3137
const { params } = useRequestParamsStore()
32-
const DUMMY_TOTAL_PAGE = 18
3338
const onPageChange = (value: number) => {
3439
params.page = value
3540
}
3641
37-
// Data Handling
42+
const fetchMyTaskList = async () => {
43+
const { parseRequestParams } = useParseParams()
44+
const parsedParams = parseRequestParams(params)
45+
const response = await axiosInstance.get('/api/tasks/assigned', {
46+
headers: {
47+
Authorization: `Bearer ${import.meta.env.VITE_ACCESS_TOKEN}`
48+
},
49+
params: parsedParams
50+
})
51+
return response.data
52+
}
53+
54+
const { data } = useQuery<MyTaskResponse>({
55+
queryKey: ['myTask', params],
56+
queryFn: fetchMyTaskList
57+
})
58+
59+
const totalPage = computed(() => {
60+
return data.value?.totalPages
61+
})
3862
</script>

0 commit comments

Comments
 (0)