Skip to content

CLAP-364 UI/UX 개선 Chloe #139

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BaekJiyeon02 merged 7 commits into from
Feb 10, 2025
Merged

CLAP-364 UI/UX 개선 Chloe #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f2dfa64
♻️ [refactor] : router.push -> router.replace 로 수정
BaekJiyeon02 Feb 10, 2025
cb4fd8b
🐛 [fix] : 오타 및 용어 수정
BaekJiyeon02 Feb 10, 2025
e0579cf
Merge branch 'release' of https://github.com/TaskFlow-CLAP/TaskFlow-F…
BaekJiyeon02 Feb 10, 2025
904598d
🐛 [fix] : 칸 너비 조정 및 유효성 검사에 따른 경고 <p> absolute 수정
BaekJiyeon02 Feb 10, 2025
07777a4
🐛 [fix] : 오타 수정
BaekJiyeon02 Feb 10, 2025
2b77d04
Merge branch 'release' of https://github.com/TaskFlow-CLAP/TaskFlow-F…
BaekJiyeon02 Feb 10, 2025
75265b0
🐛 [fix] : 비밀번호 같을시의 isDifferent 값 수정
BaekJiyeon02 Feb 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 13 additions & 11 deletions src/components/common/EditInformation.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,16 +59,18 @@
maxlength="10"
ref="nameInput"
@blur="validateName" />
<span
v-show="isInvalid"
class="text-red-1 text-xs font-bold mt-1"
>이름에는 특수문자가 포함될 수 없습니다.</span
>
<span
v-show="isFull"
class="text-red-1 text-xs font-bold mt-1"
>이름은 1글자 이상, 10글자이하만 가능합니다.</span
>
<div class="mb-1">
<span
v-show="isInvalid"
class="absolute text-red-1 text-xs font-bold mt-1"
>이름에는 특수문자가 포함될 수 없습니다.</span
>
<span
v-show="isFull"
class="absolute text-red-1 text-xs font-bold mt-1"
>이름은 1글자 이상, 10글자이하만 가능합니다.</span
>
</div>
</div>
<div class="flex flex-col">
<p class="text-body text-xs font-bold">아이디</p>
Expand Down Expand Up @@ -190,7 +192,7 @@ const handlePwChange = () => {
}

const changePw = () => {
router.push('/pw-check')
router.replace('/pw-check')
}

const warningModalToggle = () => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/top-bar/ProfileModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const emit = defineEmits<{
}>()

const handleEdit = () => {
router.push('/edit-information')
router.replace('/edit-information')
emit('close')
}
const openLogoutModal = () => {
Expand All @@ -76,7 +76,7 @@ const openLogoutModal = () => {
const closeLogoutModal = () => {
isModalVisible.value = false
isLogined.value = false
router.push('/login')
router.replace('/login')
}

const handleLogout = async () => {
Expand Down
8 changes: 4 additions & 4 deletions src/components/top-bar/TopBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,13 @@ onMounted(async () => {

const originUrl = route.path.split('/')[1]
if (info.value.role === 'ROLE_USER') {
if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.push('/my-request')
if (!PERMITTED_URL.ROLE_USER.includes(originUrl)) router.replace('/my-request')
} else if (info.value.role === 'ROLE_MANAGER') {
if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.push('/my-task')
if (!PERMITTED_URL.ROLE_MANAGER.includes(originUrl)) router.replace('/my-task')
} else if (info.value.role === 'ROLE_ADMIN') {
if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.push('/member-management')
if (!PERMITTED_URL.ROLE_ADMIN.includes(originUrl)) router.replace('/member-management')
} else {
if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.push('/login')
if (!PERMITTED_URL.UNKNOWN.includes(originUrl)) router.replace('/login')
Copy link
Contributor

@seorang42 seorang42 Feb 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pw-check와 edit-information은 replace로 잘 변경해주신 것 같은데,
이 부분과 login으로의 replace는 다시 한 번 생각해봐야 할 것 같습니다.

예를 들어 권한이 없는 페이지로 url 입력을 통해 직접 이동하여 위 코드에서 replace가 된다면,
뒤로가기를 눌렀을 때 replace 된 페이지가 아닌 잘못된 페이지로 계속 뒤로가기가 되어
결국 다시 replace가 되는 상황이 생길 수 있을 것 같습니다.

이 부분에 대해서는 내일 프론트엔드끼리 상의 후 맞춰봐야 할 것 같습니다.
일단은 이대로 머지 부탁드립니다!

}
})

Expand Down
23 changes: 11 additions & 12 deletions src/views/LoginView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
<form
@submit.prevent="handleLogin"
class="mb-2">
<div class="mb-6">
<div class="mb-7">
<input
type="text"
id="nickname"
v-model="nickname"
placeholder="닉네임을 입력해주세요"
id="id"
v-model="id"
placeholder="아이디를 입력해주세요"
required
class="input-box" />
</div>
Expand Down Expand Up @@ -61,7 +61,7 @@ import { useRouter } from 'vue-router'

const router = useRouter()

const nickname = ref('')
const id = ref('')
const password = ref('')
const memberStore = useMemberStore()

Expand All @@ -76,7 +76,7 @@ const closeModal = () => {

const handleLogin = async () => {
try {
const name = nickname.value.toString()
const name = id.value.toString()
const res = await postLogin(name, password.value)
const role = await memberStore.updateMemberInfoWithToken()

Expand All @@ -85,24 +85,22 @@ const handleLogin = async () => {
} else if (res && role && Cookies.get('refreshToken')) {
switch (role) {
case 'ROLE_ADMIN':
router.push('/member-management')
router.replace('/member-management')
break
case 'ROLE_MANAGER':
router.push('my-request')
router.replace('my-request')
break
case 'ROLE_USER':
router.push('/my-request')
router.replace('/my-request')
break
default:
router.push('/')
router.replace('/')
}
}
} catch (error) {
if (axios.isAxiosError(error)) {
switch (error.response?.status) {
case 401:
isModalVisible.value = !isModalVisible.value
console.log(error.response?.data)
if (error.response?.data == 'AUTH_015') {
messageHeader.value = '정지된 계정입니다'
messageBody.value =
Expand All @@ -111,6 +109,7 @@ const handleLogin = async () => {
messageHeader.value = '일치하는 정보가 없습니다'
messageBody.value = '닉네임과 비밀번호를 다시 확인해주세요'
}
isModalVisible.value = !isModalVisible.value
break

case 404:
Expand Down
8 changes: 4 additions & 4 deletions src/views/PwChangeEmail.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
:isOpen="isModalVisible"
type="successType"
@close="closeModal">
<template #header> 인증 번호가 전송되었습니다 </template>
<template #header> 새로운 비밀번호가 전송되었습니다 </template>
<template #body> 이메일을 확인해주세요 </template>
</ModalView>
<ModalView
Expand All @@ -22,12 +22,12 @@
<form
@submit.prevent="handleCheck"
class="mb-2">
<div class="mb-6">
<div class="mb-7">
<input
type="email"
id="email"
v-model="email"
placeholder="이메일 입력해주세요"
placeholder="이메일을 입력해주세요"
required
class="input-box" />
</div>
Expand Down Expand Up @@ -68,7 +68,7 @@ const email = ref('')

const closeModal = () => {
isModalVisible.value = !isModalVisible.value
router.push('/login')
router.replace('/login')
}
const closeFailModal = () => {
isFailModalVisible.value = !isFailModalVisible.value
Expand Down
15 changes: 9 additions & 6 deletions src/views/PwChangeView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<form
@submit.prevent="handleChange"
class="mb-2">
<div class="mb-6">
<div class="mb-7">
<input
type="password"
id="newPw"
Expand All @@ -34,7 +34,7 @@
]" />
<p
v-show="isInvalid"
class="text-red-1 text-xs font-bold mt-1">
class="absolute text-red-1 text-xs font-bold mt-1">
대문자, 소문자, 숫자, 특수문자 포함 8자-20자 입력해주세요
</p>
</div>
Expand All @@ -52,7 +52,7 @@
]" />
<p
v-show="isDifferent"
class="text-red-1 text-xs font-bold mt-1">
class="absolute text-red-1 text-xs font-bold mt-1">
비밀번호가 일치하지 않아요
</p>
</div>
Expand Down Expand Up @@ -109,14 +109,17 @@ const closeModal = () => {
}

const handleChange = () => {
if (newPw.value != checkPw.value) {
isDifferent.value = true
checkPwInput.value?.focus()
} else if (newPw.value == checkPw.value) {
isDifferent.value = false
}
validatePassword()
if (isInvalid.value == false && newPw.value === checkPw.value) {
patchPassword(newPw.value)
pwChange()
openModal()
} else {
isDifferent.value = true
checkPwInput.value?.focus()
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/views/PwCheckView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,13 @@ const handleCheck = async () => {
switch (error?.response?.status) {
case 400:
isModalVisible.value = !isModalVisible.value
messageHeader.value = '비밀번호가 일치 하지 않습니다'
messageHeader.value = '비밀번호가 일치하지 않습니다'
messageBody.value = '다시 확인하여 주세요'
break

case 401:
isModalVisible.value = !isModalVisible.value
messageHeader.value = '비밀번호가 일치 하지 않습니다'
messageHeader.value = '비밀번호가 일치하지 않습니다'
messageBody.value = '다시 확인하여 주세요'
break

Expand Down
Loading