Merge pull request #93 from Duri-Salon/fix/revert-commit

[fix] revert commit 된 부분 복구, 중복 이름 훅 수정
Duri-Salon · Dec 20, 2024 · 0f3efa5 · 0f3efa5
2 parents a66d824 + 1369ca3
commit 0f3efa5
Show file tree

Hide file tree

Showing 15 changed files with 114 additions and 77 deletions.
diff --git a/apps/duri/src/components/home/ShopHorizontal.tsx b/apps/duri/src/components/home/ShopHorizontal.tsx
@@ -2,13 +2,14 @@ import { useState } from 'react';
 import { BottomSheet } from 'react-spring-bottom-sheet';
 import { useNavigate } from 'react-router-dom';
 
+import ShopDefaultImage from '@assets/images/pngs/ShopDefaultImage.png';
 import { RegularShopType } from '@duri/assets/types/shop';
 import {
   Button,
   Flex,
   HeightFitFlex,
+  Image,
   NextArrow,
-  ProfileImage,
   Send,
   Star,
   Text,
@@ -46,11 +47,11 @@ export const ShopHorizontal = ({
         shopList.map((shop: RegularShopType) => (
           <HeightFitFlex key={shop.shopId} justify="flex-start" gap={15}>
             <ImageBox onClick={() => handleClickShop(shop.shopId)}>
-              <ProfileImage
+              <Image
                 width={100}
                 height={100}
                 borderRadius={8}
-                src={shop.imageURL}
+                src={shop.imageURL ?? ShopDefaultImage}
               />
             </ImageBox>
             <Flex

diff --git a/apps/duri/src/components/home/ShopVertical.tsx b/apps/duri/src/components/home/ShopVertical.tsx
@@ -1,5 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
+import ShopDefaultImage from '@assets/images/pngs/ShopDefaultImage.png';
 import { RecommendedShopType } from '@duri/assets/types/shop';
 import { Button, Flex, HeightFitFlex, Image, Text, theme } from '@duri-fe/ui';
 import { getShortenedAddress } from '@duri-fe/utils';
@@ -23,42 +24,42 @@ export const ShopVertical = ({
             justify="flex-start"
             align="flex-start"
             width={152}
+            height={200}
             padding="3px"
             onClick={() => handleClickShop(shop.shopId)}
           >
-            {shop.imageURL ? (
-              <Image
-                width={146}
-                height={81}
-                borderRadius={8}
-                src={shop.imageURL}
-              />
-            ) : (
-              <Flex
-                backgroundColor={theme.palette.Gray_White}
-                width={146}
-                height={81}
-                borderRadius={8}
-              ></Flex>
-            )}
-            <HeightFitFlex direction="column" align="flex-start">
-              <Text typo="Title3" margin="13px 0 11px 6px">
-                {shop.shopName}
-              </Text>
+            <Image
+              width={146}
+              height={81}
+              borderRadius={8}
+              src={shop.imageURL === '' ? ShopDefaultImage : shop.imageURL}
+            />
+
+            <Flex
+              direction="column"
+              align="flex-start"
+              padding="0 0 8px 0"
+              margin="13px 0 8px 6px"
+              gap={8}
+            >
+              <Text typo="Title3">{shop.shopName}</Text>
               <Text
                 typo="Caption4"
                 colorCode={theme.palette.Gray500}
-                margin="0 0 12px 6px"
               >
                 {getShortenedAddress(shop.address)}
               </Text>
-              <HeightFitFlex
+              <Flex
                 direction="column"
                 align="flex-start"
                 gap={3}
-                margin="0 0 0 6px"
               >
-                <TagWrapper direction="column" align="flex-start" gap={3}>
+                <TagWrapper
+                  direction="column"
+                  justify="flex-start"
+                  align="flex-start"
+                  gap={3}
+                >
                   {shop.shopTag1 && (
                     <Tag
                       key="tag1"
@@ -86,8 +87,8 @@ export const ShopVertical = ({
                     </Tag>
                   )}
                 </TagWrapper>
-              </HeightFitFlex>
-            </HeightFitFlex>
+              </Flex>
+            </Flex>
           </Wrapper>
         ))}
     </FitFlex>
@@ -108,6 +109,6 @@ const FitFlex = styled(HeightFitFlex)`
   width: fit-content;
 `;
 
-const TagWrapper = styled(HeightFitFlex)`
+const TagWrapper = styled(Flex)`
   min-height: 45px;
 `;
diff --git a/apps/duri/src/components/quotation/DetailResponseQuotation.tsx b/apps/duri/src/components/quotation/DetailResponseQuotation.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 
 import { Button, ResponseQuotation, theme } from '@duri-fe/ui';
-import { useGetDetailQuotation } from '@duri-fe/utils';
+import { useGetDetailQuotationDuri } from '@duri-fe/utils';
 
 export const DetailResponseQuotation = ({
   requestId,
@@ -11,7 +11,7 @@ export const DetailResponseQuotation = ({
   handleCloseButton: () => void;
 }) => {
   const navigate = useNavigate();
-  const { data: quotationData } = useGetDetailQuotation(requestId);
+  const { data: quotationData } = useGetDetailQuotationDuri(requestId);
   const handleClickPayment = (quotationId: number) => {
     navigate('/payment', {
       state: {

diff --git a/apps/duri/src/components/quotation/RequestItem.tsx b/apps/duri/src/components/quotation/RequestItem.tsx
@@ -19,9 +19,10 @@ export const RequestItem = ({
     //URL에서는 요청 자체 id가 뜨게 하고, 실제 세부조회에서는 요청서의 id를 전달해서 조회할 수 있도록
   };
 
+
   return (
     <>
-      {isExpired ? (
+      {isExpired && shops && shops.length > 0 ? (
         <Card
           borderRadius={16}
           shadow="small"
@@ -33,7 +34,7 @@ export const RequestItem = ({
             createdAt={createdAt}
             expiredAt={expiredAt}
             shopName={
-              shops.length > 1
+              shops?.length > 1
                 ? `${shops[0].shopName} 외 ${shops.length - 1}`
                 : `${shops[0].shopName}`
             }
@@ -42,7 +43,7 @@ export const RequestItem = ({
           <Seperator height="2px" colorCode={theme.palette.Gray50} />
           <Flex justify="flex-start" padding="0 11px" margin="20px 0">
             <Text typo="Caption3" colorCode={theme.palette.Gray300}>
-              {shops && shops.length > 1
+              {shops?.length > 1
                 ? `${shops[0]?.shopName} 외 ${shops.length - 1}`
                 : `${shops[0]?.shopName}`}
             </Text>

diff --git a/apps/duri/src/pages/Auth/index.tsx b/apps/duri/src/pages/Auth/index.tsx
@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import {
+  DuriDog,
   Flex,
   MobileLayout,
   NaverLogo,
@@ -36,7 +37,7 @@ const AuthPage = () => {
     <MobileLayout>
       <Container direction="column">
         {/** 로고 */}
-        <Logo src="/images/logo.png" />
+        <DuriDog width={169} height={143} />
         <Flex direction="column" margin="24px 0 0 0">
           <Text typo="Heading">두리묭실로</Text>
           <Text typo="Heading">쉽고 빠르게 예약해요!</Text>
@@ -76,8 +77,6 @@ const Container = styled(Flex)`
   position: relative;
 `;
 
-const Logo = styled.img``;
-
 const LoginButton = styled.button`
   width: 60px;
   height: 60px;

diff --git a/apps/duri/src/pages/Home/index.tsx b/apps/duri/src/pages/Home/index.tsx
@@ -36,6 +36,7 @@ const Home = () => {
   const { data: petData } = useGetPetInfo();
   const { data: regularListData, isPending: isPendingRegularData } =
     useGetRegularShopList();
+
   const { data: reservationData } = useGetUpcomingReservation();
   const { data: recommendedListData, isPending: isPendingRecommendData } =
     useGetRecommendedShopList(lat, lon);
@@ -45,17 +46,18 @@ const Home = () => {
     navigate('/shop');
   };
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
 
   useEffect(() => {
-    if (coordinates) {
+    if (coordinates.lat && coordinates.lng) {
       setLat(coordinates.lat);
       setLon(coordinates.lng);
     }
   }, [coordinates]);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <MobileLayout>
       <Flex direction="column" margin="0 0 114px 0">
@@ -145,7 +147,7 @@ const Home = () => {
           </Flex>
 
           {/* AI 스타일링 배너 */}
-          <Flex margin='24px 0 0'>
+          <Flex margin="24px 0 0">
             <a href="/ai">
               <AiBanner height={100} />
             </a>

diff --git a/apps/duri/src/pages/My/MyHistory.tsx b/apps/duri/src/pages/My/MyHistory.tsx
@@ -29,9 +29,11 @@ const MyHistoryPage = () => {
 
   // 모달 토글 함수
   const handleToggleModal = (requestId: number) => {
+    console.log(requestId)
     setRequestId(requestId);
     toggleModal();
   };
+  console.log(historyData)
 
   return (
     <MobileLayout>
@@ -72,7 +74,7 @@ const MyHistoryPage = () => {
                     petName={history.petName}
                     visitDate={history.startDate}
                     dayOfWeek={history.day}
-                    toggleModal={() => handleToggleModal(history.quotationId)}
+                    toggleModal={() => handleToggleModal(history.requestId)}
                   />
                 ))}
               </BorderLeftFlex>

diff --git a/apps/duri/src/pages/My/index.tsx b/apps/duri/src/pages/My/index.tsx
@@ -36,7 +36,7 @@ interface PetInfoType {
 
 const MyPage = () => {
   // const { data: petData, isError: getPetInfoError } = useGetPetInfo();
-  const { data: userInfo } = useGetUserInfo();
+  const { data: userInfo, isSuccess: getUserInfo } = useGetUserInfo();
   const { data: petListData } = useGetPetListInfo();
   const [petInfo, setPetInfo] = useState<PetInfoType>();
   const navigate = useNavigate();
@@ -46,11 +46,6 @@ const MyPage = () => {
     navigate('/login');
   };
 
-  useEffect(() => {
-    if (!userInfo) {
-      navigate('/login');
-    }
-  }, [userInfo]);
 
   const handleClickRegisterButton = () => {
     navigate('/my/pet/register');
@@ -69,7 +64,7 @@ const MyPage = () => {
       <Header />
       <Flex direction="column" padding="0 18px" margin="0 0 100px 0">
         <>
-          {userInfo ? (
+          {getUserInfo && userInfo ? (
             <>
               <UserInfo
                 name={userInfo.name}
@@ -121,7 +116,7 @@ const MyPage = () => {
               <Text typo="Label3" colorCode={theme.palette.Gray300}>
                 등록된 반려견이 없습니다.
               </Text>
-              {userInfo && (
+              {getUserInfo && (
                 <Button
                   typo="Label4"
                   fontColor={theme.palette.White}
@@ -157,7 +152,7 @@ const MyPage = () => {
                 borderRadius={8}
                 gap={5}
                 onClick={() =>
-                  userInfo ? handleNavigate('/my/history') : null
+                  getUserInfo && handleNavigate('/my/history')
                 }
               >
                 <Scissors width={24} height={24} />
@@ -169,7 +164,7 @@ const MyPage = () => {
               backgroundColor={theme.palette.White}
               borderRadius={8}
               gap={10}
-              onClick={() => (userInfo ? handleNavigate('/my/review') : null)}
+              onClick={() => (getUserInfo && handleNavigate('/my/review'))}
             >
               <Write width={18} height={18} />
               <Text typo="Label1">내가 쓴 후기</Text>

diff --git a/apps/duri/src/pages/Quotation/index.tsx b/apps/duri/src/pages/Quotation/index.tsx
@@ -18,6 +18,7 @@ const QuotationPage = () => {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
+console.log(requestList)
 
   return (
     <MobileLayout backgroundColor={theme.palette.Gray_White}>
@@ -52,7 +53,7 @@ const QuotationPage = () => {
             )}
           </Flex>
         ) : (
-          <Flex margin="92px 0 0">
+          <Flex margin="24px 0 0">
             <Text typo="Body3" colorCode={theme.palette.Gray300}>
               요청서 및 견적서가 없습니다.
             </Text>

diff --git a/apps/salon/src/pages/Auth/index.tsx b/apps/salon/src/pages/Auth/index.tsx
@@ -40,11 +40,7 @@ const AuthPage = () => {
         <Flex direction="column" margin="24px 0 0 0">
           <Text typo="Heading">두리묭실로</Text>
           <Text typo="Heading">쉽고 빠르게 예약해요!</Text>
-          <Text
-            typo="Body3"
-            colorCode={theme.palette.Gray300}
-            margin="8px 0 0 0"
-          >
+          <Text typo="Body3" colorCode={theme.palette.Gray300}>
             최저가 예약부터 근처 미용샵까지
           </Text>
         </Flex>

diff --git a/packages/utils/src/apis/duri/hooks/home.ts b/packages/utils/src/apis/duri/hooks/home.ts
@@ -27,11 +27,15 @@ export const useGetRecommendedShopList = (
   lat: number | null,
   lon: number | null,
 ) => {
+  console.log(lat, lon);
+  const isCoordinatesValid =
+    lat !== null && lon !== null && lat !== 0 && lon !== 0;
+
   return useQuery({
     queryKey: ['getRecommendedShopList', lat, lon],
-    queryFn: () => getRecommendedShopInfo(lat!, lon!), // null이 아닌 경우에만 호출
-    staleTime: 1000 * 60 * 30,
-    enabled: lat !== null && lon !== null, // lat과 lon이 null이 아닐 때만 활성화
+    queryFn: () => getRecommendedShopInfo(lat!, lon!),
+    staleTime: 1000 * 60 * 10,
+    enabled: isCoordinatesValid, // 유효한 경우에만 실행
   });
 };
 

diff --git a/packages/utils/src/apis/duri/hooks/my.ts b/packages/utils/src/apis/duri/hooks/my.ts
@@ -67,12 +67,11 @@ export const usePutPetInfo = () => {
 };
 
 export const useGetUserInfo = () => {
-  const { data, isError } = useQuery({
+  return useQuery({
     queryKey: ['getUserInfo'],
     queryFn: () => getUserInfo(),
     staleTime: 1000 * 60 * 30,
   });
-  return { data, isError };
 };
 
 export const usePutUserInfo = (handleNavigate: () => void) => {