Skip to content

Commit

Permalink
Merge pull request #139 from prgrms-web-devcourse-final-project/134-f…
Browse files Browse the repository at this point in the history
…eature/mypage-setting

[Feature] 마이페이지 CSS 수정, 데이터 바인딩
  • Loading branch information
kimjuyoung99 authored Dec 7, 2024
2 parents dc7bb76 + 7b9b41b commit 5d3117b
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 14 deletions.
24 changes: 20 additions & 4 deletions src/components/DogProfile/index.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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>
Expand Down
14 changes: 12 additions & 2 deletions src/components/DogProfile/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`
Expand All @@ -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;
Expand Down
31 changes: 26 additions & 5 deletions src/pages/MyPage/index.tsx
Original file line number Diff line number Diff line change
@@ -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 />)
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/MyPage/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit 5d3117b

Please sign in to comment.