🐛 Fix : FamilyRole 변수명 변경

Author: kimjuyoung78

src/modals/PositionChoiceModal/index.tsx

@@ -4,39 +4,36 @@ import { RadioGroup } from '@mui/material'
 import { useModalStore } from '~stores/modalStore'
 import { ActionButton } from '~components/Button/ActionButton'
 import { FAMILY_ROLE } from '~constants/familyRole'
+import { FamilyRole } from '~types/common'
 
-interface PositionChoiceModalProps {
-  onSelect: (position: string) => void
-  initialValue?: string | null
-}
-
-const positions = Object.values(FAMILY_ROLE)
+const familyRoles = Object.values(FAMILY_ROLE)
+type FamilyRoleChoiceModalProps = { onSelectRole: (role: FamilyRole) => void; initialRole: FamilyRole }
 
-export default function PositionChoiceModal({ onSelect, initialValue = 'null' }: PositionChoiceModalProps) {
-  const [value, setValue] = useState(initialValue)
+export default function FamilyRoleChoiceModal({ onSelectRole, initialRole }: FamilyRoleChoiceModalProps) {
+  const [selectedFamilyRole, setSelectedFamilyRole] = useState<FamilyRole>(initialRole)
   const { popModal } = useModalStore()
 
   const handleConfirm = () => {
-    if (value !== null) {
-      onSelect(value)
+    if (selectedFamilyRole !== null) {
+      onSelectRole(selectedFamilyRole)
       popModal()
     }
   }
 
   return (
     <S.DialogContainer open={true} onClose={popModal}>
       <S.DialogTitle>가족 포지션 선택</S.DialogTitle>
-      <RadioGroup value={value} onChange={e => setValue(e.target.value)}>
+      <RadioGroup value={selectedFamilyRole} onChange={e => setSelectedFamilyRole(e.target.value as FamilyRole)}>
         <S.RadioGroupContainer>
-          {positions.map(position => (
-            <S.StyledFormControlLabel key={position} value={position} control={<S.StyledRadio />} label={position} />
+          {familyRoles.map(role => (
+            <S.StyledFormControlLabel key={role} value={role} control={<S.StyledRadio />} label={role} />
           ))}
         </S.RadioGroupContainer>
       </RadioGroup>
 
       <S.ButtonContainer>
         <ActionButton onClick={popModal}>취소</ActionButton>
-        <ActionButton onClick={handleConfirm} disabled={!value} $fontWeight='700'>
+        <ActionButton onClick={handleConfirm} disabled={!selectedFamilyRole} $fontWeight='700'>
           확인
         </ActionButton>
       </S.ButtonContainer>

src/pages/RegisterPage/Register/index.tsx

@@ -6,7 +6,7 @@ import { Input } from '~components/Input'
 import RegisterAvatarModal from '~modals/RegisterAvatarModal'
 import { useModalStore } from '~stores/modalStore'
 import { ActionButton } from '~components/Button/ActionButton'
-import PositionChoiceModal from '~modals/PositionChoiceModal'
+import FamilyRoleChoiceModal from '~modals/PositionChoiceModal'
 import { useGeolocation } from '~hooks/useGeolocation'
 import { useOwnerProfileStore } from '~stores/ownerProfileStore'
 import { validateOwnerProfile } from '~utils/validateOwnerProfile'
@@ -18,17 +18,6 @@ import { createRegister } from '~apis/register/createRegister'
 import { FamilyRole } from '~types/common'
 import { useEffect } from 'react'
 
-const positionLabelMap: Record<FamilyRole, string> = {
-  MOTHER: '엄마',
-  FATHER: '아빠',
-  OLDER_BROTHER: '형',
-  ELDER_BROTHER: '오빠',
-  ELDER_SISTER: '언니',
-  OLDER_SISTER: '누나',
-  GRANDFATHER: '할아버지',
-  GRANDMOTHER: '할머니',
-}
-
 export default function Register() {
   const { ownerProfile, setOwnerProfile } = useOwnerProfileStore()
   const { location, getCurrentLocation } = useGeolocation()
@@ -49,16 +38,16 @@ export default function Register() {
       const registerData = {
         email,
         provider,
-        name: ownerProfile.nickName,
+        name: ownerProfile.name,
         gender: ownerProfile.gender as 'MALE' | 'FEMALE',
-        address: ownerProfile.location,
-        familyRole: ownerProfile.position as FamilyRole,
-        profileImg: ownerProfile.avatar || '',
+        address: ownerProfile.address,
+        familyRole: ownerProfile.familyRole as FamilyRole,
+        profileImg: ownerProfile.profileImg || '',
       }
 
       const response = await createRegister({
         ...registerData,
-        provider: registerData.provider as 'KAKAO' | 'NAVER' | 'GOOGLE',
+        provider: registerData.provider as 'KAKAO' | 'GOOGLE',
       })
       if (response.code === 201) {
         pushModal(<RegisterDogPage />)
@@ -69,7 +58,7 @@ export default function Register() {
   }
   useEffect(() => {
     if (location.address) {
-      setOwnerProfile({ location: location.address })
+      setOwnerProfile({ address: location.address })
     }
   }, [location.address, setOwnerProfile])
   const handleLocationClick = () => {
@@ -78,15 +67,18 @@ export default function Register() {
 
   const handleRoleClick = () => {
     pushModal(
-      <PositionChoiceModal onSelect={position => setOwnerProfile({ position })} initialValue={ownerProfile.position} />
+      <FamilyRoleChoiceModal
+        onSelectRole={role => setOwnerProfile({ familyRole: role })}
+        initialRole={ownerProfile.familyRole}
+      />
     )
   }
 
   const handleAvatarClick = () => {
     pushModal(
       <RegisterAvatarModal
-        onSelectAvatar={avatarSrc => setOwnerProfile({ avatar: avatarSrc })}
-        initialSelectedAvatar={ownerProfile.avatar}
+        onSelectAvatar={avatarSrc => setOwnerProfile({ profileImg: avatarSrc })}
+        initialSelectedAvatar={ownerProfile.profileImg}
       />
     )
   }
@@ -105,9 +97,9 @@ export default function Register() {
       <S.TextSection weight='700'>견주님에 대해{'\n'}알려주세요</S.TextSection>
 
       <S.AddOwnerAvatarBtnWrapper>
-        {ownerProfile.avatar ? (
+        {ownerProfile.profileImg ? (
           <S.Avatar onClick={handleAvatarClick}>
-            <img src={ownerProfile.avatar} alt='선택된 아바타' />
+            <img src={ownerProfile.profileImg} alt='선택된 아바타' />
           </S.Avatar>
         ) : (
           <S.AddOwnerAvatarBtn onClick={handleAvatarClick}>
@@ -121,15 +113,15 @@ export default function Register() {
         <S.NickNameWrapper>
           <Input
             placeholder='닉네임 입력'
-            value={ownerProfile.nickName}
-            onChange={e => setOwnerProfile({ nickName: e.target.value })}
+            value={ownerProfile.name}
+            onChange={e => setOwnerProfile({ name: e.target.value })}
           />
         </S.NickNameWrapper>
-        <S.PositionChoiceBtn onClick={handleRoleClick} $hasSelected={!!ownerProfile.position}>
-          {ownerProfile.position ? positionLabelMap[ownerProfile.position as FamilyRole] : '가족 포지션 선택'}
+        <S.PositionChoiceBtn onClick={handleRoleClick} $hasSelected={!!ownerProfile.familyRole}>
+          {ownerProfile.familyRole || '가족 포지션 선택'}
         </S.PositionChoiceBtn>
-        <S.LocationBtn onClick={handleLocationClick} $hasSelected={!!ownerProfile.location}>
-          {ownerProfile.location || '내 동네 불러오기'}
+        <S.LocationBtn onClick={handleLocationClick} $hasSelected={!!ownerProfile.address}>
+          {ownerProfile.address || '내 동네 불러오기'}
         </S.LocationBtn>
         <S.GenderSelectBtnWrapper>
           <GenderSelectButton

src/stores/ownerProfileStore.ts

@@ -21,4 +21,4 @@ export const useOwnerProfileStore = create<OwnerProfileStore>(set => ({
     set(state => ({
       ownerProfile: { ...state.ownerProfile, ...profile },
     })),
-}))
+}))