diff --git a/src/apis/dog/useDogProfile.tsx b/src/apis/dog/useDogProfile.tsx index 53c0acf..72d8805 100644 --- a/src/apis/dog/useDogProfile.tsx +++ b/src/apis/dog/useDogProfile.tsx @@ -53,7 +53,7 @@ export function usePatchDogProfile(id: number) { return useMutation({ mutationFn: (data: PatchDogProfileRequest) => patchDogProfile(id, data), onSuccess: () => { - pushModal() + pushModal(, 'none') }, onError: (error: Error) => { showToast(error.message) diff --git a/src/components/DogProfile/index.tsx b/src/components/DogProfile/index.tsx index 309cc7c..cf4aaa9 100644 --- a/src/components/DogProfile/index.tsx +++ b/src/components/DogProfile/index.tsx @@ -30,7 +30,7 @@ export default function DogProfile({ dogProfile, isEditBtnVisible = false }: Dog {dogProfile.name} - {dogProfile.breed} + {dogProfile.breed} {age}살 diff --git a/src/components/DogProfile/styles.ts b/src/components/DogProfile/styles.ts index 6a545b7..61ee670 100644 --- a/src/components/DogProfile/styles.ts +++ b/src/components/DogProfile/styles.ts @@ -13,9 +13,16 @@ export const TyopNameWrapper = styled.div` margin-bottom: 0.4rem; ` +export const Breed = styled.div` + font-size: 15px; + max-width: 83px; + overflow: hidden; + text-overflow: ellipsis; +` + export const EditIconWrapper = styled.div` position: absolute; - right: 48px; + right: 29px; width: 2rem; height: 2rem; background-color: ${({ theme }) => theme.colors.brand.lighten_2}; @@ -29,6 +36,7 @@ export const EditIconWrapper = styled.div` export const DogInfoArea = styled(Box)` padding: 16px 20px; + position: relative; ` export const DogInfoWrapper = styled.div` display: flex; @@ -60,17 +68,6 @@ export const OneLineIntro = styled(Box)` } ` -// export const EditIconWrapper = styled.div` -// width: 2rem; -// height: 2rem; -// background-color: ${({ theme }) => theme.colors.brand.lighten_2}; -// border-radius: 50%; -// display: flex; -// justify-content: center; -// align-items: center; -// margin-left: auto; -// ` - export const InviteBtn = styled.button` width: 57px; height: 36px; diff --git a/src/constants/layout.ts b/src/constants/layout.ts index b11049f..ba2df54 100644 --- a/src/constants/layout.ts +++ b/src/constants/layout.ts @@ -1,5 +1,5 @@ export const HEADER_HEIGHT = 56 export const HEADER_HEIGHT_LG = 80 -export const HEADER_Z_INDEX = 80 +export const HEADER_Z_INDEX = 200 export const FOOTER_HEIGHT = 56 diff --git a/src/pages/FamilyDDangPage/index.tsx b/src/pages/FamilyDDangPage/index.tsx index bb1188d..9850a96 100644 --- a/src/pages/FamilyDDangPage/index.tsx +++ b/src/pages/FamilyDDangPage/index.tsx @@ -11,14 +11,12 @@ import OwnerUpdateModal from '~modals/OwnerUpdateModal' import { fetchFamilyDDang } from '~apis/family/fetchFamilyDDang' import { FAMILY_ROLE } from '~constants/familyRole' import DogProfile from '~components/DogProfile' -import { useMyPage } from '~apis/myPage/useMyPage' import { useEffect } from 'react' export default function FamilyDDang() { const { pushModal, modalList } = useModalStore() - const { refetch } = useMyPage() - const { data, isLoading, isError } = useQuery({ + const { data, isLoading, isError, refetch } = useQuery({ queryKey: ['familyList'], queryFn: fetchFamilyDDang, }) @@ -56,23 +54,10 @@ export default function FamilyDDang() { - {/* {firstDog && ( - - )} */} - {familyInfo?.dogs[0] && } - {members?.map(member => ( + {members?.map((member, index) => ( @@ -85,10 +70,9 @@ export default function FamilyDDang() { 산책 시간 - {/* {member.walkScheduleInfoList.map(schedule => schedule.dayOfWeek).join(', ') || '없음'} */} - - - {member.walkScheduleInfoList.map(schedule => schedule.walkTime).join(', ') || ''} + {member.walkScheduleInfoList + .map(schedule => schedule.walkTime.split(':').slice(0, 2)?.join(':')) + .join(', ') || ''} @@ -98,9 +82,11 @@ export default function FamilyDDang() { - - - + {index === 0 && ( + + + + )} ))} diff --git a/src/pages/FamilyDDangPage/styles.ts b/src/pages/FamilyDDangPage/styles.ts index 34f641a..0a91da9 100644 --- a/src/pages/FamilyDDangPage/styles.ts +++ b/src/pages/FamilyDDangPage/styles.ts @@ -8,6 +8,10 @@ export const FamilyDDang = styled.div` height: 100%; display: flex; flex-direction: column; + overflow-y: auto; + &::-webkit-scrollbar { + display: none; + } ` export const Header = styled(BasicHeader)` @@ -26,6 +30,7 @@ export const IconWrapper = styled.div` cursor: pointer; ` export const ProfileOneArea = styled.div` + position: relative; display: flex; gap: 1rem; padding: 1.25rem 0; @@ -36,13 +41,19 @@ export const ProfileOneArea = styled.div` ` export const FamilyInfoArea = styled.div` - gap: 1rem; + gap: 2px; + display: flex; + flex-direction: column; ` export const LineWrapper = styled.div` display: flex; gap: 0.5rem; + /* border: solid 1px red; */ + align-items: flex-end; ` export const EditIconWrapper = styled.div` + position: absolute; + right: 0px; width: 2rem; height: 2rem; background-color: ${({ theme }) => theme.colors.brand.lighten_2};