Merge pull request #320 from catchroom/feature/#285

✨ feat: order 스켈레톤 추가
catchroom · Jan 28, 2024 · b0f950b · b0f950b
2 parents f929cdc + 4544dba
commit b0f950b
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 6 deletions.
diff --git a/app/order/[id]/page.tsx b/app/order/[id]/page.tsx
@@ -13,6 +13,7 @@ import { useQueryGetOrderProduct } from '@/api/order/query';
 import { useParams } from 'next/navigation';
 import { useRecoilValue } from 'recoil';
 import { negoPriceSelector } from '@/atoms/chat/chatContentAtom';
+import OrderSkeletonUI from '@/components/order/orderSkeletonUI';
 // const productId = 18;
 const Page = () => {
   const params = useParams<{ id: string }>();
@@ -23,7 +24,7 @@ const Page = () => {
 
   const guestInfoFormRef = useRef(null);
 
-  if (isLoading) return <div>Loading...</div>;
+  if (isLoading) return <OrderSkeletonUI />;
   if (error) return <div>Error loading data</div>;
   if (!data) return <div>No data available</div>;
   const { accommodationName, productName, checkInDate, checkOutDate } =

diff --git a/components/common/header/index.tsx b/components/common/header/index.tsx
@@ -10,7 +10,6 @@ import { HeaderProps } from '@/types/common/header/types';
 import Modal from '../modal';
 import { useRecoilValue } from 'recoil';
 import { isHeaderSate } from '@/atoms/sale/headerAtom';
-import { usePathname } from 'next/navigation';
 import { useSearchParams } from 'next/navigation';
 import { isProductState } from '@/atoms/sale/productAtom';
 import { mypageRoutingAtom } from '@/atoms/mypage/mypageRoutingAtom';
@@ -26,7 +25,6 @@ const Header = ({
   isSale = false,
 }: HeaderProps) => {
   const router = useRouter();
-  const pathname = usePathname();
   const [modalOpen, setModalOpen] = useState(false);
   const ref = useSearchParams();
   const refString = ref?.get('ref');
@@ -51,14 +49,13 @@ const Header = ({
   };
 
   const handleBackBtn = () => {
-    if (pathname === '/mypage/dashboard/purchase') {
-      router.push('/mypage');
-    } else if (isSale) {
+    if (isSale) {
       setModalOpen(true);
     } else if (refString === 'info') {
       router.push('/');
     } else {
       router.back();
+      console.log('이동');
     }
   };
 

diff --git a/components/complete/completeSkeletonUI/index.tsx b/components/complete/completeSkeletonUI/index.tsx
@@ -53,6 +53,15 @@ const CompleteSkeletonUI = () => {
               <div className="h-4 bg-gray-200 rounded w-24"></div>
               <div className="h-4 bg-gray-200 rounded w-36"></div>
             </section>
+            <section className="flex flex-col gap-2 px-5 py-5 border-b border-gray-200">
+              <div className="h-4 bg-gray-200 rounded w-48"></div>
+              <div className="flex justify-between items-center">
+                <div className="h-4 bg-gray-200 rounded w-24"></div>
+                <div className="h-4 bg-gray-200 rounded w-36"></div>
+              </div>
+              <div className="h-4 bg-gray-200 rounded w-24"></div>
+              <div className="h-4 bg-gray-200 rounded w-36"></div>
+            </section>
           </div>
         </div>
       </div>

diff --git a/components/order/orderSkeletonUI/index.tsx b/components/order/orderSkeletonUI/index.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+
+const OrderSkeletonUI = () => {
+  return (
+    <div className="flex flex-col container mt-10 mx-auto w-full px-5 py-6">
+      <div className="px-2 pt-2 mb-5">
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-48 mb-4"></div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-2"></div>
+      </div>
+      <div className="relative flex flex-wrap w-full h-[5.625rem] mt-7 items-center justify-around bg-surface-gray rounded-[4px]">
+        <div className="text-center flex flex-col items-center">
+          <div className="h-4 bg-white rounded-full dark:bg-gray-700 w-[80px]"></div>
+          <div className="h-4 bg-white rounded-full dark:bg-gray-700 w-[130px] mt-1"></div>
+        </div>
+        <div className="absolute h-[37px] w-[1px] bg-gray-400 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2" />
+        <div className="text-center flex flex-col items-center">
+          <div className="h-4 bg-white rounded-full dark:bg-gray-700 w-[80px]"></div>
+          <div className="h-4 bg-white rounded-full dark:bg-gray-700 w-[130px] mt-1"></div>
+        </div>
+      </div>
+      <div className="flex flex-col mt-8 mb-6">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div>
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+      <div className="flex flex-col mt-8 mb-6">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div>
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+      <div className="flex flex-col mt-8 mb-8">
+        <div className="mx-[-20px]">
+          {/* <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div> */}
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+      <div className="flex flex-col mt-8 mb-8">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div>
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+      <div className="flex flex-col mt-8 mb-8">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div>
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+      <div className="flex flex-col mt-8 mb-8">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div>
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+      <div className="flex flex-col mt-8 mb-8">
+        <div className="mx-[-20px]">
+          <div className="w-full border-t-8 bg-black opacity-5 mb-6"></div>
+        </div>
+        <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-32 mb-4"></div>
+        <div className="w-48 h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4"></div>
+        <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700 mb-4.5"></div>
+      </div>
+    </div>
+  );
+};
+
+export default OrderSkeletonUI;