[Design] 패밀리댕 페이지 개선

src/apis/dog/useDogProfile.tsx

@@ -53,7 +53,7 @@ export function usePatchDogProfile(id: number) {
   return useMutation({
     mutationFn: (data: PatchDogProfileRequest) => patchDogProfile(id, data),
     onSuccess: () => {
-      pushModal(<ConfirmModal content='반려견 정보가 수정되었습니다' onClick={completeRegistration} />)
+      pushModal(<ConfirmModal content='반려견 정보가 수정되었습니다' onClick={completeRegistration} />, 'none')
     },
     onError: (error: Error) => {
       showToast(error.message)

src/components/DogProfile/index.tsx

@@ -30,7 +30,7 @@ export default function DogProfile({ dogProfile, isEditBtnVisible = false }: Dog
             <S.TyopNameWrapper>
               <Typo20 $weight='700'>{dogProfile.name}</Typo20>
             </S.TyopNameWrapper>
-            <Typo15 $weight='400'>{dogProfile.breed}</Typo15>
+            <S.Breed>{dogProfile.breed}</S.Breed>
             <Separator $height={8} />
             <Typo15 $weight='400'>{age}살</Typo15>
             <Separator $height={8} />

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;

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

src/pages/FamilyDDangPage/index.tsx

@@ -11,21 +11,19 @@
 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,
   })
 
   useEffect(() => {
     refetch()
   }, [modalList])
 
   if (isLoading) {
     return <div>Loading...</div>
@@ -56,23 +54,10 @@
         </S.IconWrapper>
       </S.Header>
 
-      {/* {firstDog && (
-        <DogProfile
-          name={firstDog.name}
-          gender={firstDog.gender === 'MALE' ? '남자' : '여자'}
-          profileImg={firstDog.profileImg}
-          birthDate={firstDog.birthDate}
-          breed={firstDog.breed}
-          comment={firstDog.comment}
-          isNeutered={firstDog.isNeutered === 'TRUE' ? '중성화 O' : '중성화 X'}
-          weight={`${firstDog.weight}kg`}
-        />
-      )} */}
-
       {familyInfo?.dogs[0] && <DogProfile dogProfile={familyInfo?.dogs[0]} isEditBtnVisible />}
 
       <S.FamilySection>
-        {members?.map(member => (
+        {members?.map((member, index) => (
           <S.ProfileOneArea key={member.memberId}>
             <Profile $size={64} $src={member.profileImg} userId={member.memberId} />
             <S.FamilyInfoArea>
@@ -85,10 +70,9 @@
               <S.LineWrapper>
                 <Typo14 $weight='700'>산책 시간</Typo14>
                 <Typo14 $weight='700' $color='default'>
-                  {/* {member.walkScheduleInfoList.map(schedule => schedule.dayOfWeek).join(', ') || '없음'} */}
-                </Typo14>
-                <Typo14 $weight='700' $color='default'>
-                  {member.walkScheduleInfoList.map(schedule => schedule.walkTime).join(', ') || ''}
+                  {member.walkScheduleInfoList
+                    .map(schedule => schedule.walkTime.split(':').slice(0, 2)?.join(':'))
+                    .join(', ') || ''}
                 </Typo14>
               </S.LineWrapper>
               <S.LineWrapper>
@@ -98,9 +82,11 @@
                 </Typo14>
               </S.LineWrapper>
             </S.FamilyInfoArea>
-            <S.EditIconWrapper onClick={onClickMemberUpdate}>
-              <MdOutlineModeEdit size={20} />
-            </S.EditIconWrapper>
+            {index === 0 && (
+              <S.EditIconWrapper onClick={onClickMemberUpdate}>
+                <MdOutlineModeEdit size={20} />
+              </S.EditIconWrapper>
+            )}
           </S.ProfileOneArea>
         ))}
       </S.FamilySection>

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};