[FE] 마이페이지 기능 고도화 및 행사 이름 변경 기능 구현 #869
Conversation
| const userInfo = { | ||
| isGuest: data.isGuest, | ||
| nickname: data.nickname, | ||
| profileImage: data.profileImage, | ||
| accountNumber: data.accountNumber, | ||
| bankName: data.bankName, | ||
| }; | ||
|
|
||
| return { | ||
| userInfo, | ||
| ...rest, | ||
| }; | ||
| }; |
There was a problem hiding this comment.
아래 코드처럼 작성하면 더 간단합니다!
return {
userInfo: {...data} // 스프레드 안써도됨
// etc
}There was a problem hiding this comment.
호오~~ 그러네요!! 감사합니다!
client/src/pages/mypage/MyPage.tsx
Outdated
| return <MyPageLayout userInfoSection={<UserInfoSection />} settingSection={<SettingSection />} />; | ||
| }; |
There was a problem hiding this comment.
props로 뚫는 방식을 사용한 이유가 궁금합니다..!! 아래 방식처럼 하면 안되는 이유가 혹시 있었나요?!
<div>
<Comp1/>
<Comp2/>
</divThere was a problem hiding this comment.
MyPageLayout으로 view를 분리하면서 로딩 화면과 에러 화면을 생각하면서 이런 구조가 나온 것 같은데
차근차근 다시 보니깐 제안해 준 방식이 더 보기 좋을 것 같아요!
이 방식으로 수정해놓았어요!
| @@ -0,0 +1,24 @@ | |||
| import {useNavigate} from 'react-router-dom'; | |||
There was a problem hiding this comment.
오 좋은데요! path로 들어올 수도 있긴 하니까요
There was a problem hiding this comment.
이 경우는 쿠키가 없을 때 마이페이지를 접근한 경우에 대한 에러 처리 입니다!
그래서 이전 페이지로 navigate하는 기능이 들어와 있어요!
path로 들어와도 쿠키가 있으면 정상적으로 접근할 수 있어야 한다고 생각해요
| @@ -3,7 +3,7 @@ import {useLocation, useNavigate} from 'react-router-dom'; | |||
|
|
|||
| import BankSelectModal from '@components/Modal/BankSelectModal/BankSelectModal'; | |||
|
|
|||
| import useAccount from '@hooks/useAccount'; | |||
| import useEventAccount from '@hooks/useEventAccount'; | |||
There was a problem hiding this comment.
혹시 EventAccount로 이름을 바꾼 이유가 무엇인가요? 아마 제가 수정한 부분과 충돌할 것 같아서..!
There was a problem hiding this comment.
계좌 번호 수정이 행사 단계와 유저 단계 두 가지가 있잖아요! 저는 재사용을 생각하지 않고 새로 훅을 만들 것이라 생각하여 useEventAccount라는 행사계좌번호 수정이라는 훅으로 이름을 바꿨어요.
웨디의 pr을 보니 useAccount 훅을 재사용해서 이 훅 이름을 그대로 사용하는 것이 더 좋을 것 같네요.
issue
구현 사항
마이페이지 프로필과 이름이 보이는 기능 구현
마이페이지에서 상단의 가짜 데이터만 채워 놨던 것을 /api/users/mine api를 이용하여 실제 데이터로 대체했습니다.
이 때 User 타입에서 profileImage가 없을 때 백엔드에서 주는 값은 null입니다. 그래서 serviceType User의 profileImage를 string에서 string | null로 변환했습니다.
회원이 아닐 때 마이페이지 접근 제한 (마이페이지 로딩 화면과 에러 화면 보여주는 기능 구현)
카카오 로그인을 하지 않고 마이페이지를 접근하는 경우는 비정상적인 접근이므로 막아야 했습니다.
/api/users/mine api를 요청할 때 카카오 로그인 유저가 아닌 경우 401 에러를 발생 시킵니다. 저는 이것을 이용하여 백엔드에서 401 에러가 오면 에러 화면을 보여줘야겠다고 생각했습니다.
그래서 이 페이지에서 선언적인 에러 화면을 보여주기 위해 SuspenseQuery를 따로 만들었습니다. /api/users/mine는 useQuery와 useSuspenseQuery 두 개가 있게 됩니다. 이 부분이 조금 아쉽긴 한데... 여기선 선언적인 에러가 필요해서 이렇게 작성했습니다.
그래서 로딩화면과 에러화면 둘 다 제작을 했고 그 결과는 아래 사진으로 첨부합니다.
행사 이름 변경
행사 이름 변경 기능을 연결했습니다.
이는 행사를 생성할 때 쓰는 useSetEventNameStep 함수를 재사용했습니다. 이 훅에 initialData 만 넣어주면 수정 기능이 문제 없이 작동하는 것을 확인했고, 이 훅을 연결해서 기능을 제작했습니다.
초기 값을 불러오는 방식은 location.state를 사용했으며 이 값이 비었을 때는 navigate -1를 해서 뒤로 돌아가게 했습니다.
다만 여기서 disabed 조건을 하나 추가했는데 location.state와 hook의 반환값 eventName이 같으면 수정을 하지 않은 것이기 때문에 이 조건을 추가했습니다.
행사 계좌번호 api 잘못 연결한 것 수정
계좌번호를 수정할 수 있는 api는 두 개가 있습니다. 행사의 계좌번호와 유저의 계좌번호
지금 코드에는 행사 계좌번호 수정 페이지에 유저 계좌번호 수정이 연결되어있는 상황을 발견한 뒤 이를 수정했습니다.
백엔드 문의 결과 아직 기능 미완성이라는 답변이 와서 완성되면 아마 정상 연결이 될 예정입니다.
행사 완료 조건 네이밍 변경
모두 입금이 완료 된 상태가 행사 완료 조건인지에 대한 저번 회의의 결론인 네이밍 변경을 반영하여
정산 중, 정산 완료라고 수정했습니다.
🫡 참고사항