Merge pull request #82 from Duri-Salon/feat(salon)/statistics-page

[feat] statistics page, QA 부분 수정
Duri-Salon · Dec 18, 2024 · d6e2417 · d6e2417
2 parents d31cbba + 6d7aa9c
commit d6e2417
Show file tree

Hide file tree

Showing 32 changed files with 576 additions and 97 deletions.
diff --git a/apps/duri/src/components/home/RecommendedShop.tsx b/apps/duri/src/components/home/RecommendedShop.tsx
@@ -24,7 +24,7 @@ const RecommendedShop = ({ shopList }: { shopList: RecommendedShopType[] }) => {
         )}
         <Text typo="Title1">여기 샵은 어때요?</Text>
       </Flex>
-      <ShopWrapper justify="flex-start" margin="23px 0 0 0" height={220}>
+      <ShopWrapper justify="flex-start" margin='14px 0 0'>
         <ShopVertical shopList={shopList} />
       </ShopWrapper>
     </>

diff --git a/apps/duri/src/components/home/ShopHorizontal.tsx b/apps/duri/src/components/home/ShopHorizontal.tsx
@@ -41,7 +41,7 @@ export const ShopHorizontal = ({
   };
 
   return (
-    <Flex direction="column" gap={20} margin="28px 0 0 0">
+    <Flex direction="column" gap={20} margin="28px 0 0">
       {shopList &&
         shopList.map((shop: RegularShopType) => (
           <HeightFitFlex key={shop.shopId} justify="flex-start" gap={15}>

diff --git a/apps/duri/src/components/home/ShopVertical.tsx b/apps/duri/src/components/home/ShopVertical.tsx
@@ -14,17 +14,16 @@ export const ShopVertical = ({
   const handleClickShop = (shopIdx: number) => navigate(`/shop/${shopIdx}`);
 
   return (
-    <FitFlex justify="flex-start" gap={6} padding="0 20px">
+    <FitFlex justify="flex-start" gap={6} padding="5px 20px">
       {shopList &&
         shopList.map((shop: RecommendedShopType) => (
           <Wrapper
             key={shop.shopId}
             direction="column"
+            justify="flex-start"
             align="flex-start"
-            gap={6}
             width={152}
-            height={184}
-            padding="3px 3px 13px 3px"
+            padding="3px"
             onClick={() => handleClickShop(shop.shopId)}
           >
             {shop.imageURL ? (
@@ -84,6 +83,38 @@ export const ShopVertical = ({
                   {shop.shopTag2}
                 </Tag>
               </HeightFitFlex>
+                <Text typo="Caption4" colorCode={theme.palette.Gray500}>
+                  {shop.address}
+                </Text>
+
+              <TagWrapper direction="column" align="flex-start" gap={3}>
+                {shop.shopTag1 && (
+                  <Tag
+                    key="tag1"
+                    typo="Caption5"
+                    bg={theme.palette.Gray50}
+                    fontColor={theme.palette.Gray500}
+                    width="fit-content"
+                    height="19px"
+                    borderRadius="2px"
+                  >
+                    {shop.shopTag1}
+                  </Tag>
+                )}
+                {shop.shopTag2 && (
+                  <Tag
+                    key="tag2"
+                    typo="Caption5"
+                    bg={theme.palette.Gray50}
+                    fontColor={theme.palette.Gray500}
+                    width="fit-content"
+                    height="19px"
+                    borderRadius="2px"
+                  >
+                    {shop.shopTag2}
+                  </Tag>
+                )}
+              </TagWrapper>
             </HeightFitFlex>
           </Wrapper>
         ))}
@@ -94,7 +125,7 @@ export const ShopVertical = ({
 const Tag = styled(Button)`
   padding: 10px;
 `;
-const Wrapper = styled(HeightFitFlex)`
+const Wrapper = styled(Flex)`
   border-radius: 12px;
   background: var(--bw-white, #fff);
   box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
@@ -104,3 +135,7 @@ const Wrapper = styled(HeightFitFlex)`
 const FitFlex = styled(HeightFitFlex)`
   width: fit-content;
 `;
+
+const TagWrapper = styled(HeightFitFlex)`
+  min-height: 45px;
+`;
diff --git a/apps/duri/src/components/my/history/ResponseQuotationHistory.tsx b/apps/duri/src/components/my/history/ResponseQuotationHistory.tsx
@@ -13,7 +13,7 @@ export const ResponseQuotationHistory = ({
   const navigate = useNavigate();
   const { data: quotationData } = useGetDetailQuotation(requestId);
   const handleClickReviewButton = (quotationId: number) => {
-    navigate('/review/write', {
+    navigate('/my/review/write', {
       state: {
         quotationId: quotationId,
       },

diff --git a/apps/duri/src/components/payment/Widget.tsx b/apps/duri/src/components/payment/Widget.tsx
@@ -32,8 +32,8 @@ const PaymentWidget = ({
   const { mutateAsync: postAmount } = usePostAmount();
 
   const { widgets, ready } = useTossPaymentWidget(
-    uuidData?.customerKey,
     amount,
+    uuidData?.customerKey,
   );
 
   const handleClickPaymentButton = () => {
@@ -68,6 +68,14 @@ const PaymentWidget = ({
     widgets.setAmount(amount);
   }, [widgets, amount]);
 
+  useEffect(() => {
+    if (ready) {
+      setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+      }, 0); // 0ms 대기 후 스크롤 적용
+    }
+  }, [ready]);
+
   return (
     <Container direction="column">
       <Flex direction="column" className="wrapper">

diff --git a/apps/duri/src/components/quotation/IncomingQuotation.tsx b/apps/duri/src/components/quotation/IncomingQuotation.tsx
@@ -20,6 +20,7 @@ export const IncomingQuotation = ({
   return (
     <>
       <Button
+      height='79px'
         padding="24px 16px"
         bg={theme.palette.White}
         borderRadius="16px"

diff --git a/apps/duri/src/components/quotation/SalonCard.tsx b/apps/duri/src/components/quotation/SalonCard.tsx
@@ -32,10 +32,14 @@ export const SalonCard = ({
           {imageURL ? (
             <Image width={34} height={34} src={imageURL} borderRadius={34} />
           ) : (
-            <WidthFitFlex><Store width={34} height={34}/></WidthFitFlex>
+            <WidthFitFlex width={34} height={34}>
+              <Store width={28} height={28} />
+            </WidthFitFlex>
           )}
           <Flex height={34}>
-          <Text typo={salonName.length > 5 ? "Caption3" :"Body4"}>{salonName}</Text>
+            <Text typo={salonName.length > 5 ? 'Caption3' : 'Body4'}>
+              {salonName}
+            </Text>
           </Flex>
         </WidthFitFlex>
       </Flex>

diff --git a/apps/duri/src/components/shop/SendRequesQBox.tsx b/apps/duri/src/components/shop/SendRequesQBox.tsx
@@ -52,12 +52,12 @@ export const SendRequestQBox = ({
         <Text typo="Title3">요청서 선택</Text>
         <HeightFitFlex justify="space-between">
           <Text typo="Title3">작성한 요청서가 없습니다.</Text>
-          <WidthFitFlex onClick={moveToShopRequest}>
+          <CursorButton onClick={moveToShopRequest}>
             <Text typo="Label3" colorCode={theme.palette.Gray300}>
               작성하러가기
             </Text>
             <NextArrow width={23} color={theme.palette.Gray300} />
-          </WidthFitFlex>
+          </CursorButton>
         </HeightFitFlex>
       </HeightFitFlex>
       <AbsoluteBtnWrapper gap={8} padding="0 20px">
@@ -86,3 +86,7 @@ const FlexBtn = styled(Button)<{ flex: string }>`
   border-radius: 8px;
   flex: ${({ flex }) => flex};
 `;
+
+const CursorButton = styled(WidthFitFlex)`
+  cursor: pointer;
+`;
diff --git a/apps/duri/src/pages/Home/index.tsx b/apps/duri/src/pages/Home/index.tsx
@@ -12,6 +12,7 @@ import {
   HeightFitFlex,
   MainHeader,
   MobileLayout,
+  SkeletonCard,
   Text,
   theme,
 } from '@duri-fe/ui';
@@ -34,13 +35,11 @@ const Home = () => {
   const [lon, setLon] = useState<number | null>(null);
 
   const { data: petData } = useGetPetInfo();
-  const { data: regularListData } = useGetRegularShopList();
+  const { data: regularListData, isPending: isPendingRegularData } =
+    useGetRegularShopList();
   const { data: reservationData } = useGetUpcomingReservation();
-  const {
-    data: recommendedListData,
-    isLoading: recommendedListLoading,
-    isPending: recommendedListPending,
-  } = useGetRecommendedShopList(lat, lon);
+  const { data: recommendedListData, isPending: isPendingRecommendData } =
+    useGetRecommendedShopList(lat, lon);
 
   const navigate = useNavigate();
   const handleNavigate = () => {
@@ -103,30 +102,45 @@ const Home = () => {
               </Text>
             )}
             <Text typo="Title1">단골 샵 빠른 입찰</Text>
-            {regularListData && regularListData.homeShopList.length > 0 ? (
-              <SpeedQuotation shopList={regularListData.homeShopList} />
-            ) : (
-              <Flex direction="column" padding="62px 99px" gap={12}>
-                <Flex direction="column">
-                  <Text typo="Caption4" colorCode={theme.palette.Gray400}>
-                    아직 단골샵이 없어요!
-                  </Text>
-                  <Text typo="Caption4" colorCode={theme.palette.Gray400}>
-                    단골샵을 찾으러 가볼까요?
-                  </Text>
-                </Flex>
-                <Button
-                  width="135px"
-                  height="37px"
-                  typo="Label4"
-                  borderRadius="8px"
-                  bg={theme.palette.Black}
-                  fontColor={theme.palette.White}
-                  onClick={handleNavigate}
-                >
-                  샵 둘러보기
-                </Button>
+            {isPendingRegularData ? (
+              <Flex
+                direction="column"
+                gap={9}
+                justify="flex-start"
+                margin="28px 0 0"
+              >
+                <SkeletonCard width={336} height={100} borderRadius={8} />
+                <SkeletonCard width={336} height={100} borderRadius={8} />
               </Flex>
+            ) : (
+              <>
+                {/* 단골샵이 없는 경우 */}
+                {regularListData && regularListData.homeShopList.length > 0 ? (
+                  <SpeedQuotation shopList={regularListData.homeShopList} />
+                ) : (
+                  <Flex direction="column" padding="62px 99px" gap={12}>
+                    <Flex direction="column">
+                      <Text typo="Caption4" colorCode={theme.palette.Gray400}>
+                        아직 단골샵이 없어요!
+                      </Text>
+                      <Text typo="Caption4" colorCode={theme.palette.Gray400}>
+                        단골샵을 찾으러 가볼까요?
+                      </Text>
+                    </Flex>
+                    <Button
+                      width="135px"
+                      height="37px"
+                      typo="Label4"
+                      borderRadius="8px"
+                      bg={theme.palette.Black}
+                      fontColor={theme.palette.White}
+                      onClick={handleNavigate}
+                    >
+                      샵 둘러보기
+                    </Button>
+                  </Flex>
+                )}
+              </>
             )}
           </Flex>
 
@@ -143,16 +157,13 @@ const Home = () => {
         </Flex>
         <Flex direction="column">
           {/* 추천 샵 */}
-          {recommendedListLoading ||
-            (recommendedListPending && (
-              <Flex margin="31px 0 6px 0">
-                <Text typo="Caption1" colorCode={theme.palette.Gray300}>
-                  Loading...
-                </Text>
-              </Flex>
-            ))}
-          {recommendedListData && (
-            <RecommendedShop shopList={recommendedListData} />
+          {isPendingRecommendData ? (
+            <Flex gap={6} justify="flex-start" padding="0 20px">
+              <SkeletonCard width={152} height={198} borderRadius={12} />
+              <SkeletonCard width={152} height={198} borderRadius={12} />
+            </Flex>
+          ) : (
+            <RecommendedShop shopList={recommendedListData ?? []} />
           )}
         </Flex>
         <DuriNavbar />

diff --git a/apps/duri/src/pages/Login/index.tsx b/apps/duri/src/pages/Login/index.tsx
@@ -1,5 +1,5 @@
 import {
-  Doori,
+  DuriDog,
   Flex,
   MobileLayout,
   NaverLogo,
@@ -19,8 +19,8 @@ const LoginPage = () => {
     <MobileLayout>
       <Container direction="column">
         {/** 로고 */}
-        <Doori height={40} />
-        <Flex direction="column" margin="48px 0 0 0">
+        <DuriDog width={169} height={143} />
+        <Flex direction="column">
           <Text typo="Heading">두리묭실로</Text>
           <Text typo="Heading">쉽고 빠르게 예약해요!</Text>
           <Text

diff --git a/apps/duri/src/pages/My/MyReview.tsx b/apps/duri/src/pages/My/MyReview.tsx
@@ -16,7 +16,7 @@ import styled from '@emotion/styled';
 
 const MyReviewPage = () => {
   const navigate = useNavigate();
-  const handleNavigate = () => navigate(-1);
+  const handleNavigate = () => navigate('/my');
   const { data: reviewListData } = useGetMyReviews();
   const [reviewCount, setReviewCount] = useState<number>(0);
   const [reviewList, setReviewList] =

diff --git a/apps/duri/src/pages/Payment/Success.tsx b/apps/duri/src/pages/Payment/Success.tsx
@@ -14,6 +14,8 @@ import {
 } from '@duri-fe/ui';
 import { usePostAmountVerity, usePostPayment } from '@duri-fe/utils';
 import styled from '@emotion/styled';
+import { format } from 'date-fns';
+
 
 const SuccessPage = () => {
   const navigate = useNavigate();
@@ -133,13 +135,13 @@ const SuccessPage = () => {
               <Text typo="Caption1" colorCode={theme.palette.Gray300}>
                 결제일시
               </Text>
-              <Text typo="Label2">2024-11-21 10:52:16</Text>
+              <Text typo="Label2">{format(new Date(), "yyyy-MM-dd HH:mm:ss")}</Text>
             </HeightFitFlex>
             <HeightFitFlex justify="space-between">
               <Text typo="Caption1" colorCode={theme.palette.Gray300}>
-                결제카드
+                결제수단
               </Text>
-              <Text typo="Label2">현대카드</Text>
+              <Text typo="Label2">간편결제</Text>
             </HeightFitFlex>
           </Flex>
         </Flex>