Skip to content

Commit 244a51b

Browse files
BaekJiyeon02BaekJiyeon02
authored
Merge pull request #50 from TaskFlow-CLAP/CLAP-182
CLAP-182 내 정보 수정 페이지 UI 제작
2 parents da52caa + d632ebf commit 244a51b

File tree

17 files changed

+192
-70
lines changed

17 files changed

+192
-70
lines changed

‎src/assets/styles.css‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,19 @@ body {
3333
@apply max-w-1200 h-screen flex flex-col gap-6 overflow-hidden;
3434
}
3535

36+
.button-large {
37+
@apply flex w-full py-3 font-bold border rounded items-center justify-center min-w-[138px];
38+
}
39+
.button-large-default {
40+
@apply button-large bg-white text-zinc-400 border-zinc-400;
41+
}
42+
.button-large-red {
43+
@apply button-large bg-red-1 text-white border-red-1;
44+
}
45+
.button-large-primary {
46+
@apply button-large bg-primary1 text-white border-primary1;
47+
}
48+
3649
.button-medium {
3750
@apply flex items-center justify-center rounded px-4 py-2 font-bold gap-1 text-xs cursor-pointer shrink-0;
3851
}
@@ -85,20 +98,8 @@ body {
8598
@apply text-xs p-2 rounded text-center cursor-pointer;
8699
}
87100

88-
.button-large {
89-
@apply flex w-full py-3 font-bold border rounded items-center justify-center min-w-[138px];
90-
}
91-
.button-large-default {
92-
@apply button-large bg-white text-zinc-400 border-zinc-400;
93-
}
94-
.button-large-red {
95-
@apply button-large bg-red-1 text-white border-red-1;
96-
}
97-
.button-large-primary {
98-
@apply button-large bg-primary1 text-white border-primary1;
99-
}
100101
.input-box {
101-
@apply block w-full px-4 py-4 border border-zinc-300 rounded focus:outline-none;
102+
@apply block w-full px-4 py-4 border border-border-1 rounded focus:outline-none;
102103
}
103104

104105
.task-detail {

‎src/components/EditInformation.vue‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<template>
2+
<div class="flex flex-col gap-y-6">
3+
<ModalView
4+
:isOpen="isModalVisible"
5+
:type="'successType'"
6+
@close="handleCancel">
7+
<template #header> 정보가 수정되었습니다 </template>
8+
</ModalView>
9+
10+
<div class="profile">
11+
<p class="text-body text-xs font-bold">프로필 사진</p>
12+
<img
13+
v-if="imageUrl"
14+
:src="imageUrl"
15+
alt="프로필 이미지"
16+
class="w-24 h-24 rounded-full object-cover border mt-3" />
17+
<div
18+
v-else
19+
class="w-24 h-24 rounded-full bg-background-1 flex items-center justify-center"></div>
20+
<!-- 파일 업로드 필요 -->
21+
<p class="mt-3 text-xs text-primary1 font-bold cursor-pointer">변경</p>
22+
</div>
23+
24+
<div class="flex flex-col">
25+
<p class="text-body text-xs font-bold">이름</p>
26+
<input
27+
class="input-box h-11 mt-2"
28+
placeholder="이름을 입력해주세요"
29+
v-model="memberName" />
30+
</div>
31+
<div class="flex flex-col">
32+
<p class="text-body text-xs font-bold">아이디</p>
33+
<p class="mt-">{{ memberId }}</p>
34+
</div>
35+
<div class="flex flex-col">
36+
<p class="text-body text-xs font-bold">이메일</p>
37+
<p class="mt-2">{{ memberEmail }}</p>
38+
</div>
39+
<div class="flex flex-col">
40+
<p class="text-body text-xs font-bold">부서</p>
41+
<p class="mt-2">{{ memberDepartment }}</p>
42+
</div>
43+
<div class="flex flex-col">
44+
<p class="text-body text-xs font-bold">직무</p>
45+
<p class="mt-2">{{ memberJob }}</p>
46+
</div>
47+
<div>
48+
<p class="text-body text-xs font-bold">알림 수신 여부</p>
49+
<div class="flex flex-col mt-2 gap-2">
50+
<FormCheckbox
51+
v-model="memberForm.isAgitChecked"
52+
:checkButtonName="'아지트'"
53+
:isChecked="memberForm.isAgitChecked" />
54+
<FormCheckbox
55+
v-model="memberForm.isKakaoWorkChecked"
56+
:checkButtonName="'카카오워크'"
57+
:isChecked="memberForm.isKakaoWorkChecked" />
58+
<FormCheckbox
59+
v-model="memberForm.isEmailChecked"
60+
:checkButtonName="'이메일'"
61+
:isChecked="memberForm.isEmailChecked" />
62+
</div>
63+
</div>
64+
<div>
65+
<p class="text-body text-xs font-bold">비밀번호 재설정</p>
66+
<button
67+
class="button-medium-secondary mt-2"
68+
@click="handlePwChange">
69+
재설정하기
70+
</button>
71+
</div>
72+
73+
<FormButtonContainer
74+
:handleCancel="handleCancel"
75+
:handleSubmit="handleSubmit"
76+
cancelText="취소"
77+
submitText="수정" />
78+
</div>
79+
</template>
80+
81+
<script lang="ts" setup>
82+
import { ref } from 'vue'
83+
import { useRouter } from 'vue-router'
84+
import ModalView from './ModalView.vue'
85+
import FormButtonContainer from './common/FormButtonContainer.vue'
86+
import FormCheckbox from './common/FormCheckbox.vue'
87+
const router = useRouter()
88+
89+
const memberName = ref('백지연')
90+
const memberId = ref('Chole.yeon')
91+
const memberEmail = ref('[email protected]')
92+
const memberDepartment = ref('인프라팀')
93+
const memberJob = ref('인프라 아키텍처')
94+
const imageUrl = ref('../../public/images/mockProfile.jpg')
95+
const isModalVisible = ref(false)
96+
97+
const memberForm = ref({
98+
isAgitChecked: false,
99+
isKakaoWorkChecked: false,
100+
isEmailChecked: false
101+
})
102+
103+
const handleCancel = () => {
104+
isModalVisible.value = false
105+
}
106+
107+
const handleSubmit = () => {
108+
isModalVisible.value = true
109+
}
110+
111+
const handlePwChange = () => {
112+
router.push('/pw-check')
113+
}
114+
</script>

‎src/components/SideBar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</div>
4646
<div class="flex items-end justify-end w-full">
4747
<RouterLink
48-
to="/"
48+
to="/edit-information"
4949
class="text-primary1 text-sm font-bold"
5050
>내 정보 수정</RouterLink
5151
>

‎src/components/TopBar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<div
1616
v-show="isLogined"
1717
class="w-[10%] h-full flex items-center gap-6">
18-
<CommonIcons :name="notifiacationIcon" />
18+
<CommonIcons :name="notificationIcon" />
1919
<!-- 프로필 사진 API 필요 -->
2020
<div class="rounded-[50%] bg-zinc-100 p-5" />
2121
</div>
@@ -30,7 +30,7 @@
3030
import { ref } from 'vue'
3131
import CommonIcons from './common/CommonIcons.vue'
3232
import SideBar from './SideBar.vue'
33-
import { hamburgerIcon, notifiacationIcon } from '../constants/iconPath'
33+
import { hamburgerIcon, notificationIcon } from '../constants/iconPath'
3434
3535
// 로그인 정보 필요
3636
const isSideOpen = ref(false)

src/components/user-manage/FormButtonContainer.vue renamed to src/components/common/FormButtonContainer.vue

File renamed without changes.

src/components/user-manage/FormCheckbox.vue renamed to src/components/common/FormCheckbox.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<script lang="ts" setup>
1919
import { checkBoxIcon } from '@/constants/iconPath'
2020
import type { FormCheckboxProps } from '@/types/common'
21-
import CommonIcons from '../common/CommonIcons.vue'
21+
import CommonIcons from './CommonIcons.vue'
2222
2323
const { labelName, checkButtonName, isChecked } = defineProps<FormCheckboxProps>()
2424
const emit = defineEmits(['update:modelValue'])

‎src/components/request-approve/RequestApprove.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ import ModalView from '../ModalView.vue'
5858
import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
5959
import DueDateInput from './DueDateInput.vue'
6060
import ProcessorDropdown from './ProcessorDropdown.vue'
61-
import FormButtonContainer from '../user-manage/FormButtonContainer.vue'
61+
import FormButtonContainer from '../common/FormButtonContainer.vue'
6262
6363
const isModalVisible = ref(false)
6464
const approveForm = ref(INITIAL_REQUEST_APPROVE_FORM)

‎src/components/request-task/RequestTask.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
import { EXPLANATION_PLACEHOLDER, TITLE_PLACEHOLDER } from '@/constants/user'
3131
import { DUMMY_REQUEST_TASK_CATEGORIES } from '@/datas/taskdetail'
3232
import { ref } from 'vue'
33-
import FormButtonContainer from '../user-manage/FormButtonContainer.vue'
33+
import FormButtonContainer from '../common/FormButtonContainer.vue'
3434
import RequestTaskDropdown from './RequestTaskDropdown.vue'
3535
import RequestTaskFileInput from './RequestTaskFileInput.vue'
3636
import RequestTaskInput from './RequestTaskInput.vue'

‎src/components/statistics/StatisticsCard.vue‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,19 @@ import { ref } from 'vue'
2727
import PieChart from '../PieChart.vue'
2828
import LineChart from '../LineChart.vue'
2929
import PeriodButtons from './PeriodButtons.vue'
30-
import type { PeriodType, StatisticsCardProps } from '@/types/manager'
30+
import type { PeriodType } from '@/types/manager'
3131
32-
const { title, statisticsType, chartType } = defineProps<StatisticsCardProps>()
32+
const { title, statisticsType, chartType } = defineProps<{
33+
title: string
34+
statisticsType: StatisticsType
35+
chartType: 'line' | 'pie'
36+
}>()
37+
38+
type StatisticsType =
39+
| 'REQUEST_BY_PERIOD'
40+
| 'PROCESS_BY_PERIOD'
41+
| 'REQUEST_BY_CATEGORY'
42+
| 'PROCESS_BY_MANAGER'
3343
3444
const periodType = ref<PeriodType>('DAY')
3545
const changePeriod = (newPeriodType: PeriodType) => {

‎src/components/user-manage/UserRegistration.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ import { ref } from 'vue'
5252
import ModalView from '../ModalView.vue'
5353
import RequestTaskDropdown from '../request-task/RequestTaskDropdown.vue'
5454
import RequestTaskInput from '../request-task/RequestTaskInput.vue'
55-
import FormButtonContainer from './FormButtonContainer.vue'
56-
import FormCheckbox from './FormCheckbox.vue'
55+
import FormButtonContainer from '../common/FormButtonContainer.vue'
56+
import FormCheckbox from '../common/FormCheckbox.vue'
5757
5858
const isModalVisible = ref(false)
5959
const userRegistrationForm = ref(INITIAL_USER_REGISTRATION)

0 commit comments

Comments
 (0)