Feature/update user info

dvlpDana commented 1 month ago

feat(28): 유저 정보 업데이트 작업

🔘Part

[x] UI 작업

🔎 작업 내용

회원정보 수정 UI 작업 완료

이미지 첨부

🔧 앞으로의 과제

use-user-store에서 가져온 유저정보를 UserInfoFormValues 에 밀어넣는 과정에서, 아래와 같은 에러가 뜨는거 같은데 왜 그런지 다들 한번 살펴봐주실 수 있을까요...?

middleware 구성해서, 마이페이지, 결제하기 등에 로그인한 user만 접근할 수 있도록 하기

➕ 이슈 링크

https://github.com/FC-InnerCircle/icd01-team05_06-commerce-fe/issues/28

env

NEXT_PUBLIC_EXTERNAL_API_URL=https://76ztyqn6fe.execute-api.ap-northeast-2.amazonaws.com/
NEXT_PUBLIC_AUTH_API_URL=https://76ztyqn6fe.execute-api.ap-northeast-2.amazonaws.com/auth/v1/
NEXT_PUBLIC_PRODUCT_API_URL=https://76ztyqn6fe.execute-api.ap-northeast-2.amazonaws.com/product/v1/
NEXT_PUBLIC_ORDER_API_URL=https://76ztyqn6fe.execute-api.ap-northeast-2.amazonaws.com/order/v1/

dowookims commented 1 month ago

Q) use-user-store에서 가져온 유저정보를 UserInfoFormValues 에 밀어넣는 과정에서, 아래와 같은 에러가 뜨는거 같은데 왜 그런지 다들 한번 살펴봐주실 수 있을까요...?

A) 이거는 persist가 localStorage를 사용하게끔 처리되어 있는데요~ localStorage가 브라우저에서 사용되는 API에요

서버사이드에서는 persist 데이터를 사용하지 못하기 때문에 initial data가 빈값으로 되어서 렌더링 되는데, 클라이언트 사이드 에서는 localStorage의 값을 가져와서 렌더링하다보니, 하이드레이션 과정에서 차이가 발생하고 이거 때문에 에러를 노출하는 것으로 확인됩니다.

그래서 use client를 사용하셨지만, 서버환경일때에는 렌더링 안되게 처리하는 등의 방식 또는 다른 방식을 사용하셔서 우회하셔야 할 것 같아요.

찾아보니 이렇게도 우회하시네요

https://dev.to/abdulsamad/how-to-use-zustands-persist-middleware-in-nextjs-4lb5

dvlpDana commented 1 month ago

Q) use-user-store에서 가져온 유저정보를 UserInfoFormValues 에 밀어넣는 과정에서, 아래와 같은 에러가 뜨는거 같은데 왜 그런지 다들 한번 살펴봐주실 수 있을까요...?

A) 이거는 persist가 localStorage를 사용하게끔 처리되어 있는데요~ localStorage가 브라우저에서 사용되는 API에요

서버사이드에서는 persist 데이터를 사용하지 못하기 때문에 initial data가 빈값으로 되어서 렌더링 되는데, 클라이언트 사이드 에서는 localStorage의 값을 가져와서 렌더링하다보니, 하이드레이션 과정에서 차이가 발생하고 이거 때문에 에러를 노출하는 것으로 확인됩니다.

그래서 use client를 사용하셨지만, 서버환경일때에는 렌더링 안되게 처리하는 등의 방식 또는 다른 방식을 사용하셔서 우회하셔야 할 것 같아요.

찾아보니 이렇게도 우회하시네요

https://dev.to/abdulsamad/how-to-use-zustands-persist-middleware-in-nextjs-4lb5

와....왜 그런지 이유를 못찾고 있었는데 이렇게 도우 멘토님이 봐주시니 왜 그런지 알게 되었습니다!! 혼자 고민하는 시간도 있어야 되지만 이렇게 고민을 나누니 또 해결책을 찾을 수 있어 좋습니다! 감사합니다 도우님! 말씀해주신 방법으로 해결해보겠습니다 :)

dvlpDana commented 1 month ago

PaymentPostAddressModal 카카오 주소 api 연동 해놓은 모달이 있는데, 제가 말씀만드리고 공통으로 안빼놨어서 한번더 개발하셨네요.. ㅜㅜ 죄송합니댜..

zod에서 유효성 실패시 사용자에게 보여질 메세지 처리는 따로 안된건가요?

...와... 이건 정말 로컬에서 실행해보지 않으면 모르는건데 이렇게 시간을 내서 꼼꼼히 살펴봐주시다니 감동입니다...ㅎ 유효성 검사가 제대로 노출되지 않는다는 점 확인하였고 바로 수정하였습니다 감사합니다 재석님 :)

FC-InnerCircle / icd01-team05_06-commerce-fe