♻ refactor: IProfile 타입 정리

✅ 체크리스트

[x] 중복 선언된 profile 관련 타입 정리
[x] Partial -> Pick/Omit 기능 사용한 타입으로 변경
[x] useProfile에 profileAtom 기본값 사용
[x] 수정된 사용자 정보 patch API 필드명 적용 (nickname -> nickName)

📝 작업 상세 내용

1️⃣ 중복 제거

MyPage/Diary.tsx에 있는 TCreateMarpkup 타입 제거 TCreateMarpkup 가 types/diary.ts와 MyPage/Diary.tsx 2곳에 중복 선언되어 있어 MyPage/Diary.tsx에 있는 TCreateMarpkup을 제거했습니다.

2️⃣ Pick/Omit 기능 사용

// Setting Page updateProfile Type 수정 전
interface IUpdateProfile {
  nickname?: string;
  profileIntro?: string;
}

//  수정 후 
type pickProfileImageURL = Pick<IProfile, 'profileImageURL'>;

// Setting Page updateProfile Type
type omitProfileImageURL = Omit<IProfile, 'profileImageURL'>;

IUpdateProfile를 Omit 기능을 사용하여 omitProfileImageURL로 수정했습니다.
Pick 기능을 사용하여 profileImageURL만 선택한 pickProfileImageURL을 생성했습니다.
Partial 기능을 이용하고 있던 부분을 생성한 omit/pickProfileImageURL로 변경했습니다.
Partial 유틸리티 기능은 코드의 복잡성을 제거해주고 객체의 타입을 유연하게 만든다는 장점이 있습니다. Pick/Omit 기능을 이용하면 타입의 명확성이 높아지고 코드의 의도 파악이 쉽다는 장점이 있습니다. 사실 어떤걸 써도 상관없을 것 같다 생각하지만 프로필만 업데이트하는 경우, 닉네임/소개글을 업데이트하는 경우 2가지로 명확히 구분되어있어 타입 명확성을 높이고자 Pick/Omit 타입으로 수정했습니다.
Pick/Omit 타입으로 수정하면서 IProfile의 해당 속성이 선택적임을 뜻하는 ?는 제거해주었습니다.

3️⃣ useProfile 수정 사항

수정 전

const useProfile = () => {
  const profile = useRecoilValue<IProfile | undefined>(profileSelector);

  const { profileImageURL, nickName, profileIntro } = profile || {};

  return { profileImageURL, nickName, profileIntro };
};

수정 후

const useProfile = () => {
  const profile = useRecoilValue<IProfile | undefined>(profileSelector);
  const profileFromAtom = useRecoilValue(profileAtom);

  const { profileImageURL, nickName, profileIntro } = profile || profileFromAtom;

  return { profileImageURL, nickName, profileIntro };
};

profileAtom의 기본값은 아래와 같이 전부 '' 문자열로 되어있습니다.

default: {
    profileImageURL: '',
    nickName: '',
    profileIntro: '',
  },

profileSelector에서 memberId가 falsy 값일 경우, useProfile의 profile은 undefiend 값을 가지게 됩니다. profile이 undefined일 경우, || 논리합 연산자로 인해 두번째 피연산자 값인 profileFromAtom 값을 가져옴으로써 profileAtom의 기본값을 사용합니다. 수정 전에는 {}를 반환했습니다. 기본값을 사용함으로써 useProfile은 언제나 string을 반환하게 됩니다.

수정함으로써 아래 타입 에러를 해결했습니다.

Setting 페이지

Profile 컴포넌트

useProfile이 profileAtom의 기본값을 반환할 경우 마이페이지는 이렇게 나타납니다.

{} 였을 때는 profileURL, nickname, info 모두 아무것도 없는 상태로 나타났습니다.

추후 recoil -> zustand로 바뀔 예정이긴하지만 조금 다듬어 봤습니다! 😄

4️⃣ nickname -> nickName

사용자 정보 patch api의 닉네임 필드명은 nickname, 멤버의 기본 프로필 정보 api의 닉네임 필드명은 nickName으로 깔끔한 타입 정리를 위해 통일이 필요했습니다. 백엔드로 수정 요청하였고 예슬님께서 수정해주셔서 적용 완료했습니다!

🚨 버그 발생 이유 (선택 사항)

🔎 후속 작업 (선택 사항)

🤔 질문 사항 (선택 사항)

📚 참고 자료 (선택 사항)

추가적인 참고 사항이나 관련된 문서, 링크 등을 제공해주세요.

📸 스크린샷 (선택 사항)

변경 사항에 대한 스크린샷이 있다면 첨부해주세요.

✅ 셀프 체크리스트

[x] 브랜치 확인하기
[x] 불필요한 코드가 들어가지 않았는지 재확인하기
[x] issue 닫기
[x] reiewers, assignees, Lables 등록 확인하기

이슈 번호: Close #156

CHZZK-Study / Grass-Diary-Client