Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Dec 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
Loading