[#414] [프로필] 프로필 수정 페이지

[hanyugeon]

구현 내용

스크린샷

pr 포인트

• TopNavigation의 Leftitem, RightItem position 속성을 수정하였습니다.

• ToastProvider 추가 및 ToastUI를 적용 하였습니다.

• 프로필 정보 수정 API를 연결하였습니다.

• InputLength 컴포넌트가 react-hook-form에 종속되고 있던 점을 해결하였습니다.
  규란님의 도움으로 InputLength 컴포넌트를 분리하고 Base컴포넌트에 새롭게 작성해두었습니다
  InputLength 내부 컴포넌트를 분리하고싶은데 기가막힐 방법이 떠오르질 않네요
  러프하게 작성된 코드라 가독성이 쓰레기 일 수 있습니다. 입니다. (주석을 추가해 두었습니다...!)

• 기존의 app/profile/me/edit page.tsx를 새롭게 작성한 컴포넌트로 대체하였습니다.

Help

- InputLength 컴포넌트를 분리하고 싶어요.

관련 이슈

• Close [프로필] 프로필 수정 페이지 #414

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dadok	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 16, 2023 10:20am

[github-actions]

🚀 Storybook: https://64aba10cd478ad51307a8997-dyqifmykvl.chromatic.com/

[gxxrxn]

InputLength 컴포넌트를 분리하고 싶어요.

@hanyugeon
코드가 FormValues 타입에 의존하고 있어서 분리가 어렵다는 뜻으로 이해했는데 맞을까요??

확인해보니 UseControllerProps를 통해 control과 name props를 가져와야 타입이 일치하는 것 같아요.

type InputLengthProps<
  TFieldValues extends FieldValues = FieldValues,
  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = Pick<UseControllerProps<TFieldValues, TFieldName>, 'control' | 'name'> & {
  minLength: number;
  maxLength: number;
};

그리고 InputLength 컴포넌트에서 제네릭을 받아 전달해주면 FormValues 타입에 의존적이지 않은 컴포넌트를 만들 수 있을 것 같아요!

const InputLength = <T extends FieldValues>({
  control,
  name,
  minLength,
  maxLength,
}: InputLengthProps<T>) => {
  // ...
};

확인해보고 코멘트 남겨주세요~!!

[hanyugeon]

@minjongbaek @WooDaeHyun @gxxrxn

리뷰해주셔도 좋습니다

[minjongbaek]

p5;
파일명과 export default 되는 컴포넌트의 이름이 같으면 좋을 것 같아요. 지금은 괜찮지만 한 파일에서 여러 컴포넌트를 선언하는 경우 컴포넌트를 쉽게 찾을 수 있을 것 같아서요.

[hanyugeon]

@minjongbaek

제가 놓친 부분이네요! 수정하였습니다! 191e9f9 👍

[minjongbaek]

p5;
input value를 받지 않고 length를 바로 받아도 괜찮을 것 같네요!

[hanyugeon]

@minjongbaek

민종님 의견을 듣고 이전의 currentValue props가 컴포넌트의 역할과는 일관성이 떨어진다고 판단하여
currentValue > currentLength로 수정하였습니다! c51289a 👍

[WooDaeHyun]

comment 확인 부탁드립니다~ 👍

[WooDaeHyun]

👍

[WooDaeHyun]

ask;
단순히 IconClose가 close만을 위한 것이라면 router.push 대신 Link 태그로 감싸는건 어떻게 생각하시나요?
해당 부분에 대한 의문이 생겨 router와 Link태그의 차이점들을 검색하면서 알게 되었는데 두 라우팅 방식에 있어서 엄청난 차이가 존재하지는 않지만 가장 큰 차이는 아무래도 SEO 측면에서 차이가 있다는 글들이 많이 있네요! 아무래도 a태그를 활용하는가 하지 않는가에서 오는 차이점인 것 같습니다.

다음 글들은 제가 읽어 본 글들이니 한 번 참고해 주시면 좋을 것 같아요~
Link vs router
Link vs router vs a태그

[hanyugeon]

@WooDaeHyun

SEO측면에서 좋은 의견인것같아요!

적극 반영하였습니다! 5322b22 👍

[hanyugeon]

@minjongbaek @WooDaeHyun @gxxrxn

다시 리뷰해주셔도 좋습니다

[minjongbaek]

👍

[WooDaeHyun]

고생하셨습니당! 👍