Merge pull request #77 from Duri-Salon/feat(duri)/mypage-delete-pet

[feat] mypage pet delete API 연결 및 UI 구현, 훅 onSuccess에 alert 추가
Duri-Salon · Dec 18, 2024 · c280942 · c280942
2 parents a59fbb8 + 5c4bacc
commit c280942
Show file tree

Hide file tree

Showing 24 changed files with 613 additions and 134 deletions.
diff --git a/apps/duri/src/App.tsx b/apps/duri/src/App.tsx
@@ -37,6 +37,8 @@ import PrivateRoute from '@components/PrivateRoute';
 
 import 'react-spring-bottom-sheet/dist/style.css';
 
+import MyPetRegisterPage from './pages/My/MyPetRegister';
+
 function App() {
   return (
     <BrowserRouter>
@@ -72,6 +74,7 @@ function App() {
           <Route path="/my" element={<MyPage />} />
           <Route path="/my/pet" element={<MyPetPage />} />
           <Route path="/my/pet/modify" element={<MyPetModifyPage />} />
+          <Route path="/my/pet/register" element={<MyPetRegisterPage />} />
           <Route path="/my/info" element={<MyInfoModifyPage />} />
           <Route path="/my/shop" element={<MyShopPage />} />
           <Route path="/my/history" element={<MyHistoryPage />} />

diff --git a/apps/duri/src/components/my/Status.tsx b/apps/duri/src/components/my/Status.tsx
@@ -16,11 +16,13 @@ export const Status = ({ reservationCnt, noShowCnt }: StatusProps) => {
     >
       <Flex direction="column" gap={15}>
         <Text typo="Caption2">누적예약</Text>
-        <Text typo="Body2">{reservationCnt}건</Text>
+        <Text typo="Body2">
+          {reservationCnt === -1 ? ' - ' : reservationCnt}건
+        </Text>
       </Flex>
       <BorderFlex direction="column" gap={15}>
         <Text typo="Caption2">노쇼</Text>
-        <Text typo="Body2">{noShowCnt}건</Text>
+        <Text typo="Body2">{noShowCnt === -1 ? ' - ' : noShowCnt}건</Text>
       </BorderFlex>
       <FlexButton direction="column" gap={9}>
         <Text typo="Caption2">고객센터</Text>
@@ -32,9 +34,9 @@ export const Status = ({ reservationCnt, noShowCnt }: StatusProps) => {
 
 const FlexButton = styled(Flex)`
   cursor: pointer;
-`
+`;
 
 const BorderFlex = styled(Flex)`
-    border-left: solid 1.5px ${theme.palette.Normal600};
-    border-right: solid 1.5px ${theme.palette.Normal600};
-`
+  border-left: solid 1.5px ${theme.palette.Normal600};
+  border-right: solid 1.5px ${theme.palette.Normal600};
+`;
diff --git a/apps/duri/src/components/my/modify/ModifyPetInfoCard.tsx b/apps/duri/src/components/my/modify/ModifyPetInfoCard.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 
-import { Flex } from '@duri-fe/ui';
+import { Button, Flex, HeightFitFlex, Text, theme } from '@duri-fe/ui';
 import { useGetPetListInfo } from '@duri-fe/utils';
 
 import { SwipeCard } from './SwipeCard';
@@ -20,15 +21,22 @@ interface PetListInfo {
 }
 
 export const ModifyPetInfoCard = () => {
+  const navigate = useNavigate();
+
   const { data: petListData } = useGetPetListInfo();
+
   const [petListInfo, setPetListInfo] = useState<PetListInfo[]>([]);
+
+  const handleClickRegisterButton = () => {
+    navigate('/my/pet/register');
+  };
+
   useEffect(() => {
     if (petListData) setPetListInfo(petListData);
-    console.log(petListData);
-  });
+  }, [petListData]);
 
   return (
-    <Flex direction="column" gap={20} padding="0 0 114px 0">
+    <Flex direction="column" gap={20}>
       {petListInfo &&
         petListInfo.map(
           ({
@@ -58,6 +66,34 @@ export const ModifyPetInfoCard = () => {
             />
           ),
         )}
+      {petListInfo.length === 0 && (
+        <Flex
+          backgroundColor={theme.palette.White}
+          borderRadius={16}
+          width={334}
+          height={163}
+          padding="12px 30px 16px 12px"
+          gap={16}
+          direction='column'
+        >
+          <Text typo="Label3" colorCode={theme.palette.Gray300}>
+            앗! 등록된 반려견이 없어요.
+          </Text>
+          <HeightFitFlex>
+            <Button
+              typo="Label4"
+              fontColor={theme.palette.White}
+              onClick={handleClickRegisterButton}
+              bg={theme.palette.Black}
+              width="135px"
+              padding="10px"
+              borderRadius="8px"
+            >
+              마이펫 등록하러가기
+            </Button>
+          </HeightFitFlex>
+        </Flex>
+      )}
     </Flex>
   );
 };
diff --git a/apps/duri/src/components/my/modify/PetModifyForm.tsx b/apps/duri/src/components/my/modify/PetModifyForm.tsx
@@ -3,7 +3,7 @@ import { Control, Controller, UseFormSetValue } from 'react-hook-form';
 import {
   BREEDS,
   GENDER_OPTION_LIST,
-  NEUTERED_OPTION_LIST,
+  NEUTERED_FORM_OPTION_LIST,
 } from '@duri/constants';
 import { FormData } from '@duri/pages/My/MyPetModify';
 import { Button, Dropdown, Flex, Text, theme, WidthFitFlex } from '@duri-fe/ui';
@@ -25,6 +25,9 @@ export const PetModifyForm = ({
   getValues: (name: keyof FormData) => string | number | string[] | boolean;
 }) => {
   // 드롭다운에서 선택된 값 업데이트!!!
+  const handleAgeSelect = (value: string | number) => {
+    if (typeof value === 'number') setValue('age', value);
+  };
   const handleBreedSelect = (value: string | number) => {
     if (typeof value === 'string') setValue('breed', value);
   };
@@ -105,7 +108,7 @@ export const PetModifyForm = ({
           control={control}
           render={() => (
             <WidthFitFlex gap={4}>
-              {NEUTERED_OPTION_LIST.map(({ key, label }) => (
+              {NEUTERED_FORM_OPTION_LIST.map(({ key, label }) => (
                 <Button
                   key={label}
                   width="fit-content"
@@ -147,7 +150,7 @@ export const PetModifyForm = ({
               options={ageList}
               defaultValue={`${field.value}살`}
               width={114}
-              onSelect={handleBreedSelect}
+              onSelect={handleAgeSelect}
               suffix="살"
             />
           )}

diff --git a/apps/duri/src/components/my/modify/SwipeCard.tsx b/apps/duri/src/components/my/modify/SwipeCard.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { Button, Flex, Modal, PetInfo, Text, theme, Trash } from '@duri-fe/ui';
-import { useModal } from '@duri-fe/utils';
+import { useDeletePetInfo, useModal } from '@duri-fe/utils';
 import styled from '@emotion/styled';
 
 interface PetListInfo {
@@ -32,11 +32,16 @@ export const SwipeCard = ({
 }: PetListInfo) => {
   const navigate = useNavigate();
   const { isOpenModal, toggleModal } = useModal();
+  const { mutateAsync: deletePetInfo } = useDeletePetInfo();
+
   const [isSwiped, setIsSwiped] = useState<boolean>(false);
   const [swipePosition, setSwipePosition] = useState<number>(0); // 화면에 반영될 스와이프 위치
+
   const handleDelete = () => {
     toggleModal();
+
     //삭제 api 호출
+    deletePetInfo(id);
   };
   const handleNotDelete = () => {
     toggleModal();
@@ -150,7 +155,7 @@ export const SwipeCard = ({
         </SwipeWrapper>
       </SwipeContainer>
 
-      <Modal isOpen={isOpenModal} toggleModal={toggleModal}>
+      <Modal isOpen={isOpenModal} toggleModal={toggleModal} closeIcon={false}>
         <Flex direction="column" gap={5}>
           <Flex direction="column">
             <Text typo="Body2">반려견 정보 삭제 시</Text>
@@ -177,11 +182,12 @@ export const SwipeCard = ({
             </Button>
             <Button
               typo="Body3"
-              bg={theme.palette.Black}
+              bg={theme.palette.Alert}
               fontColor={theme.palette.White}
               width="145px"
               height="47px"
               borderRadius="8px"
+              onClick={handleDelete}
             >
               삭제할게요
             </Button>