Merge pull request #139 from prgrms-web-devcourse-final-project/134-feature/mypage-setting

[Feature] 마이페이지 CSS 수정, 데이터 바인딩

Author: kimjuyoung78

src/components/DogProfile/index.tsx

@@ -1,5 +1,5 @@
 import * as S from './styles'
-import { Typo13, Typo15, Typo20 } from '~components/Typo'
+import { Typo13, Typo14, Typo15, Typo20 } from '~components/Typo'
 import { Separator } from '~components/Separator'
 import Profile from '~components/Profile'
 import { DogProfileType } from '~types/dogProfile'
@@ -18,22 +18,38 @@ const calculateAge = (birthDate?: Date): number => {
   }
   return age
 }
-export default function DogProfile({ name, gender, profileImg, birthDate, breed, comment }: DogProfileType) {
+export default function DogProfile({
+  name,
+  gender,
+  profileImg,
+  birthDate,
+  breed,
+  comment,
+  isNeutered,
+  weight,
+}: DogProfileType) {
   const age = calculateAge(stringToDate(birthDate!))
   return (
     <S.DogInfoArea>
       <S.DogInfoWrapper>
         <Profile $size={80} $src={profileImg || ''} />
         <S.DogDetailWrapper>
           <S.TypoWrapper>
-            <Typo20 $weight='700'>{name}</Typo20>
+            <S.TyopNameWrapper>
+              <Typo20 $weight='700'>{name}</Typo20>
+            </S.TyopNameWrapper>
             <Typo15 $weight='400'>{breed}</Typo15>
             <Separator $height={8} />
             <Typo15 $weight='400'>{age}살</Typo15>
             <Separator $height={8} />
             <Typo15 $weight='400'>{gender === 'MALE' ? '남' : '여'}</Typo15>
           </S.TypoWrapper>
-        </S.DogDetailWrapper>
+          <S.DogDetailInfoWrapper>
+            <Typo14 $weight='400'>중성화 {isNeutered === 'TRUE' ? 'O' : 'X'}</Typo14>
+            <Separator $height={8} />
+            <Typo14 $weight='400'>{weight} KG</Typo14>
+          </S.DogDetailInfoWrapper>
+        </S.DogDetailWrapper>     
       </S.DogInfoWrapper>
 
       <S.OneLineIntro>

src/components/DogProfile/styles.ts

@@ -5,8 +5,13 @@ export const TypoWrapper = styled.div<{ $gap?: number }>`
   display: flex;
   align-items: center;
   gap: ${({ $gap = 4 }) => $gap}px;
+  margin-bottom: 0.1rem;
+  margin-top: 1rem;
+`
+export const TyopNameWrapper = styled.div`
+  margin-right: 0.3rem;
+  margin-bottom: 0.4rem;
 `
-
 export const DogInfoArea = styled(Box)`
   padding: 16px 20px;
 `
@@ -15,7 +20,12 @@ export const DogInfoWrapper = styled.div`
   align-items: center;
   gap: 12px;
 `
-
+export const DogDetailInfoWrapper = styled.div`
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+  margin-bottom: 1rem;
+`
 export const DogDetailWrapper = styled.div`
   display: flex;
   flex-direction: column;

src/pages/MyPage/index.tsx

@@ -1,25 +1,44 @@
 import { fetchMypage } from '~apis/myPage/fetchMypage'
-// import ProfileImage from 'assets/masterprofile.svg?react'
 import { Helmet } from 'react-helmet-async'
 import { IoSettingsOutline } from 'react-icons/io5'
-import { Typo13, Typo15, Typo24 } from '~components/Typo'
+import { Typo14, Typo15, Typo24 } from '~components/Typo'
 import SettingModal from '~modals/SettingModal'
 import { useModalStore } from '~stores/modalStore'
 import * as S from './styles'
 import CountSection from '~components/WalkCountArea'
 import { useQuery } from '@tanstack/react-query'
 import DogProfile from '~components/DogProfile'
+import { FAMILY_ROLE } from '~constants/familyRole'
+import { useEffect, useState } from 'react'
 
 export default function MyPage() {
   const { data } = useQuery({
     queryKey: ['myPage'],
     queryFn: fetchMypage,
   })
+  const [ProfileImage, setProfileImage] = useState<React.ComponentType | null>(null)
 
   const myPageData = data?.data // API 응답 구조에 맞춰 접근
   console.log(myPageData)
 
+  useEffect(() => {
+    if (myPageData?.profileImg) {
+      // profileImg에서 파일 번호를 추출
+      const avatarNumber = myPageData.profileImg.match(/Avatar(\d+)/)?.[1]
+
+      if (avatarNumber) {
+        import(`../../../src/assets/avatars/Avatar${avatarNumber}.svg?react`)
+          .then(module => {
+            setProfileImage(() => module.default)
+          })
+          .catch(err => console.error('Error loading SVG:', err))
+      }
+    }
+  }, [myPageData?.profileImg])
+
   const { pushModal } = useModalStore()
+  const familyRole = Object.values(FAMILY_ROLE)
+  console.log(familyRole)
 
   const onSettingsClick = () => {
     pushModal(<SettingModal />)
@@ -43,16 +62,18 @@ export default function MyPage() {
         <S.ProfileSection>
           <S.ProfileArea>
             {/* <ProfileImage /> */}
-            {myPageData?.profileImg}
+            {ProfileImage && <ProfileImage />}
           </S.ProfileArea>
           <S.ProfileText>
             <Typo24 $weight='800'>{myPageData?.name}</Typo24>
             <Typo15 $weight='400' $color='font_2'>
               {myPageData?.address} 거주
             </Typo15>
             <S.TypoWrap>
-              <Typo13 $weight='700'>{myPageData?.gender}</Typo13>
-              <Typo13 $weight='700'>{myPageData?.familyRole}</Typo13>
+              <Typo14 $weight='700'>{myPageData?.gender === 'FEMALE' ? '여자' : '남자'}</Typo14>
+              <Typo14 $weight='700'>
+                {myPageData?.familyRole ? FAMILY_ROLE[myPageData.familyRole as keyof typeof FAMILY_ROLE] : ''}
+              </Typo14>
             </S.TypoWrap>
           </S.ProfileText>
         </S.ProfileSection>

src/pages/MyPage/styles.ts

@@ -48,7 +48,7 @@ export const SettingIcon = styled.div`
 
 export const ProfileSection = styled.div`
   width: 100%;
-  height: 17.8125rem;
+  height: 19rem;
   flex-shrink: 0;
   background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
   border-radius: 1rem;
@@ -57,8 +57,8 @@ export const ProfileSection = styled.div`
 `
 
 export const ProfileArea = styled.div`
-  width: 8.75rem;
-  height: 8.75rem;
+  width: 11rem;
+  height: 10rem;
   flex-shrink: 0;
   margin: 1.5rem auto;
   display: flex;